CSSを圧縮したらメディアクエリが効かなくなりました
もとのスタイル
@media screen and (max-width: 1024px) {
body {
background-color:red;
}
}圧縮後
@media screen and(max-width:1024px){body{background-color:red;}}こうなるとメディアクエリが効かなくなりました。
何が原因？？
結論からいうと、andと(の間のスペースが削除されたことが原因でした。
ここのスペースが抜けるとメディアクエリが利用できなくなるようです。
テスト1
@media screen and (max-width:1024px)
→OK
テスト2
@media screen and(max-width:1024px)
→NG
テスト3
@media(max-width:1024px)
→OK
圧縮ツールは？
YUI Compressorを利用していました。
どうやら、この不具合はバージョン2.4.2以下で発生するようです。
2.4.6、2.4.7で試したところ問題はありませんでした。
古い圧縮ツールをご利用の方はご注意を。。
新しいYUI Compressorはこちらからダウンロードできます。
Downloads: YUI Compressor
ブログ改修中です。
このブログを改修するにあたって、facebookの「いいね！」ボタンを追加することにしました。
以前はプラグインを適当に利用していたのですが、ちゃんとやろうと思ったら大変だったのでメモ。
※参考
WordPressに『いいね』ボタンを設置 / Facebook基礎
こちらの記事を参考にさせていただきました。
この記事と違うところがいくつかあったのでそこを記述します。
アプリIDを取得
まずは、アプリIDを取得します。上から準に
App Name：自分のブログの名前
App Namespace：未入力
Web Hosting：チェックしない
でcontinueをクリックすると。文字認証ページ「Security Check Required」が出てくるので表示された文字を入力して次へ進みます。
余談ですが、Web Hostingサービスできたんですね。。
「いいね！」ボタン設置
「いいね！」ボタン作成フォームで、必要な情報を入力して、コードを作成。
Like Button – Facebook Developers
作成ボタンをクリックすと以下のようなコードが作成されます。
1.JavaScript SDK
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=**********";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>2.「いいね！」ボタン設置用コード
<div class="fb-like" data-href="http://hazumu.net/blog" data-send="true" data-width="450" data-show-faces="true"></div>
1のJavaScript SDKをbodyの開始タグ直後に記述し、2のHTMLをボタンを表示させたい箇所に記述します。
WordPress用にHTMLを少し変更
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="true" data-width="100%" data-show-faces="true"></div>
記事の個別リンクを「いいね！」してもらうために、data-hrefのところはパーマネントリンクを出力させます。
また、このブログはレスポンシブデザインに対応させる予定のため、いいねボタンモジュールのwidth（data-width属性）を100%に変更しておきます。こうしておかないと、iPhoneのwidthが100%に収まりません。
Open Grap用のめたタグ取得
Like Button – Facebook Developers
続いて、Open Grap Protocolに対応させるためのmeta tagを作成します。
こんな感じです。
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:site_name" content="hazumu.net/blog" />
<meta property="fb:app_id" content="**********" />
作成したら、head内に埋め込みましょう。
デバッグ
ここまでやると後はデバッグするのみですが、デバッグでエラーが出てしまいました。
Debugger
エラー内容は、「そのドメインは対応していません」の様なエラーだったのですが、どうやら、アプリの基本情報管理ページのWeb Siteの欄にこのブログのURLを入力してなかったことが原因だったようです。
画像の赤枠の箇所に、「いいね！」ボタンを表示させたいWebサイトのドメインを入力しておきましょう。
以上
これで、このブログで「いいね！」ボタンがちゃんと使えるようになりました。
気が向いたら「いいね！」押してね！
iPhoneアプリ作ってます。
iOS5の実機に転送できなかったときのメモ
※iOS4ではできてました。
１. xcodeとTitanium SDKのバージョン確認
xcode 4.2
Titanium Mobile SDK 1.7.X
まず、xcodeは4.2以上でないとiOS5の開発ができません。
しかし、xcode4.3にしてしまうと、今度はTitanium SDKが使えなくなります。（※執筆時）
なので4.2を選択。
※4.3をインストールしてしまい古いバージョンを落としたい人はこちらから。
Downloads for Apple Developers
2. プロビジョニングファイルの確認
開発環境をととのえても、実機転送できず。訳が分からないので、最初からやり直す事に。
なにやら、ログに「アプリ名と、プロビジョニングフィアルが一致しません」のような事が出ていたので、とりあえずプロビジョニングの設定を確認。
Provisioning Profiles – iOS Provisioning Portal – Apple DeveloperのProvisioning Profileに設定してある、アプリの名前と、Titanium Studioで設定してあるプロジェクトのフォルダ名が違う事を発見。
修正すると別のバグでコンパイルエラー。3へ。
3. Certificateの確認
2の修正をすると、今度は以下のエラー
CodeSign error: Certificate identity ‘iPhone Developer: （アカウント）’ appears more than once in the keychain. The codesign tool requires there only be one.
ゼロからやり直したため、同じ証明書をキーチェンーンに二つ読み込んでいたらしい。片方削除でOK。
ちなみにログは
tail ./build/iphone/build/build.log
で見れます。
といったところで実機転送完了しました。
なぜiOS4の時はうまく実機転送できてたんだろ。
社内カンファレンスでnode.jsの話を聞いて触りたくなったので手元のmacにインストールしてみました。忘れては行けないのでログ
参考：Node.jsとnvmを初めてインストールするときのハマりポイントと対策
参考元にあった通り、nvmをgitから落としてきて。。
bashを使ってるのでスムーズに行きます。
$ git clone git://github.com/creationix/nvm.git ~/.nvm
$ source ~/.nvm/nvm.sh
とりあえず最新の安定板をインストール
で
うごいた！
てか、いつの間にmacでgitコマンドが使えるようになってたんだ。。
ホームディレクトリに
というファイルを作成。
と記述して保存。
その後、ターミナルを再起動すれば完了。
はじめに
スマートフォンが市場に多く出回り始めるにつれ、ネット系企業もこぞって自社のサービスや、コーポレートサイトをスマートフォンに最適化してきています。
そんななか、私が開発する際に参考にしているスマートフォンに最適化されたサイトをいくつか紹介したいと思います。
※基本iPhoneで表示確認しています。
Apple
言わずとしれたスマホ時代の仕掛人です。ただ、そのAppleはスマホサイトとPCのサイトに同じものを表示していると有名ですが・・
ここがすごい
・SVGで書かれたグローバルナビ
サイト自体は同じものを表示しているのですが、グローバルナビゲーションはロゴとフォントをSVGで描画してあります（PCで開くとpng画像）。なので、iPhoneで拡大縮小を行っても、美しいグローバルナビゲーションを見られることになります。些細ですが、さすがですね。。
Apple
Gmail
WebメーラーのGmailもスマホ対応しています。Webクリップアイコンも用意してあり、一見アプリと見間違う程の出来です。
ここがすごい
・オフラインの動作
Gmailのスマホ版はオフラインでも動きます。どうやら初回ダウンロードの時点でWeb SQL Databaseに、過去のメールスレッドを保存し、キャッシュマニフェストを使ってファイルをすべてローカルに保存しているようです。なので、オフライン時でも、メーラーにたまった最近のメールを閲覧することもでき、さらには下書き保存することもできます。
・引っ張って更新
iPhoneのツイッタークライアントに実装されている、下に引っ張って更新するUIもJavaScriptで実装してあり、ネイティブのアプリ顔負けの体験を提供してくれます。
Gmail
Yahoo!
最近、CEOが解任されてしまった米Yahoo!ですが、スマホサイトに関しては草分けになったのではないでしょうか。
ここがすごい
・カルーセルだらけ
画面サイズにより表示できる情報量が減ってしまう、スマホサイトですが、カルーセルを数多く使い、使い心地が悪くならない方法でポータルサイトとしての情報量を担保しています。しかし、ここまで大量のカルーセルを利用するとは大胆ですね。。
Yahoo!
vimeo
カンファレンスの動画がよくあがっている動画共有サイトです。
ここがすごい
・起動時の画像
Webクリップから起動すると、ネイティブのアプリと同じく起動時に、ロゴが入った起動画面が表示されます。さらに、同様の起動方法で起動させると、アドレスバーも表示されず一見アプリと区別がつきません。
・動画ページへの遷移が気持ちいい
一覧ページから動画詳細ページに横スライドで遷移しています。この遷移のスピードがなんともぬるぬるしていて気持ちがいいです。
vimeo
まとめ
スマホのページ最適化には以下の手法が現在の主流となっているようです。
PC版を最適化して同じものを表示
タッチUIであることを考慮して、PC版リンク領域を広くしたり、画像の最適化を行いPC版をスマホでも利用しやすくしています。他と比べて運用がかなり楽そうです。
ex.)Apple、New York Times
ネイティブのアプリケーションに近づける
Webの基本であるリンクでのページ遷移をなくし、各機能を持ったHTMLをAjaxで読み込むタイプのWebサイトです。Webアプリと呼ばれるものですね。
ex.))Gmail、Flikr、vimeo、YouTube、Gree
スマホ用のページを準備する
スマートフォン用に最適化されたWebサイトを用意する形です。
ex.)Yahoo!、Yahoo! JAPAN、ライブドア
レスポンシブ・ウェブデザイン
PC版をそのまま表示させているものですが、こちらは、デバイスの大きさによってCSSやJavaScriptでUIをかえています。コーポレートサイトとかは、このパターンが増えているような。
ex.)Web Designer Wall、Media Queries（利用したサイト一覧）
これらの手法を吟味しつつ、お客様に対して提供したい情報の種類によってどの手法をとるかを選ぶべきなのですね。
Safariでforeachが用意されていた件。
[1,2,4].forEach(function(elm){
alert(elm)
});
// 1
// 2
// 4Firefox4でもつかえたよ！
はじめに
HTML5で正しいマークアップするためには「カテゴリー」、「コンテンツモデル」など今までのHTMLにはなかった用語を理解する必要があります。
参考文献を読んでもいまいちしっくりこないので自分の言葉でまとめてみようと思います。W3Cのドラフトから一次情報でがんばってみようかと。
英文が訳せなかったり、いまいちわからないところは「徹底解説HTML5マークアップガイドブック」を参考にさせていただきました。
まずはコンテンツ(content)の意味が・・
W3Cのドラフトを読んでいくとコンテンツ(contents)という単語を何度も見かけます。
コンテンツモデルという言葉自体にも含まれています。少し調べてみましたが以下の認識で大丈夫ではないでしょうか。
コンテンツ ＝ 開始タグと終了タグに囲まれたすべてのもの
Elements can also have content, including other elements and text.
参考：HTML_element – Wikipedia
The element content is everything between the start and the end tag
参考：HTML Elements
基礎の基礎であるコンテンツの意味が分かったところで早速用語まとめへ。
用語まとめ
・カテゴリー
要素を同様の特性でカテゴリ化したものです。
「h1とh2って特性が似てるから同じグループでまとめようぜ！」ということです。
・コンテンツモデル
あるHTML要素が囲むべきコンテンツを定めたものです。
要素は、その要素のコンテンツモデルに従ったカテゴリのコンテンツしか囲めません。
例えば、p要素のコンテンツモデルはフレージングコンテンツ(後述)です。つまり、フレージングコンテンツというカテゴリに属す要素しか囲むことができません。したがって、カテゴリがフレージングコンテンツでない、section、div、h1などは囲むことができないということになります。
・メタデータコンテンツ
メタデータコンテンツ以外のコンテンツの動作や、スタイルを設定することができます。
ドキュメントと他のドキュメントを関連づけることができます。外部スタイルシートとか、外部のJavaScriptファイルとか。
ex:link style meta script …
・フローコンテンツ
bodyタグの下におかれるものがフローコンテンツにあたります。
メタデータコンテンツの一部をのぞいてほとんどですね。
ex:div p h1 section video …
・セクショニングコンテンツ
見出しと、フッター(必須でない)を含みセクション(一かたまりの文書)を形成するコンテンツです。ブログの記事などがよい例となります。
このブログでは「hazumu.net/blog」というhtml文書の中に、「HTML5の基礎用語を理解しておく」というタイトルを持った一つのセクションが形成されていることになります。
ex:section aside article …
・ヘッディングコンテンツ
セクションのヘッダーを表します。「hazumu.net/blog」の例でいうと「HTML5の基礎用語を理解しておく」がタイトルでありヘッディングコンテンツにあたります。
ex:h1 h2 hgroup …
・フレージングコンテンツ
ドキュメント内のテキストを表します。とくに、段落内に含まれる要素が多く含まれます。html4のインライン要素に似ています。
ex:a audio b bdi bdo br button
・エンベディッドコンテンツ
ドキュメント内にフラッシュ、ビデオ、音楽、svgなど他のリソースを表示する要素が含まれます。
ex:audio canvas embed iframe img …
・インタラクティブコンテンツ
クリックや、ドラッグなどユーザーの動作(インタラクション)が行われる要素が含まれます。イメージマップが設定されたimg要素なども含まれます。
ex:a audio button details …
・トランスペアレントコンテンツモデル
親要素のコンテンツモデルをそのまま適用するもの。CSSの継承に似ています。
まだまだ。。
次回はセクションとアウトライン周りが書きたい。
はじめに
iPhoneやiPadなどiOSに組み込まれているmobile SafariでJavaScriptを使ったアニメーションを動かすと動作が遅くなる事があります。
そこで、CSS3のアニメーションを利用して軽快なUIを実装しようという風潮が高まっているのですが、実はすべてのCSS3アニメーションがmobile safariで軽快に動くという訳ではないようです。
CSS3のアニメーションが軽快に動く(と言われている)理由
結論からいうと、safariというソフトウェアの力だけでなく、iPhoneやiPadのハードウェアの力を借りられるからです。
そういった、ハードウェアのことをアクセラレーターと呼ぶようです。詳しくは参考ページをご覧ください。
※参考
Hardware acceleration – Wikipedia, the free encyclopedia
アクセラレータとは【accelerator】 – 意味/解説/説明/定義 ： IT用語辞典
GPUとは【Graphics Processing Unit】 – 意味/解説/説明/定義 ： IT用語辞典
しかし先に述べた通りCSS3でアニメーションを書いたからといってすべてがアクセラレーターを利用して軽快に動作するとは限りません。
実際に、iPhoneのmobile safariのアクセラレーターがどこで動いているか見てみます。
アクセラレーターが機能している箇所を見る方法
お手元のmacにiOSシュミレーターをインストールして、ターミナルを開いて以下のコマンドを入力してください。
CA_COLOR_OPAQUE=1 /Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone\ Simulator.app/Contents/MacOS/iPhone\ Simulator
すると画像のように色がついた状態でシュミレーターが立ち上がります。
そして、赤い色がついているところがアクセラレーターが効いているところです。
アクセラレーターの動作を見えるようにしたところで、CSS3でアニメーションを書いてみましょう。
実験方法
今回使用するサンプルは、表示という黄色いボタンを押すと、青いボックスが、画面左からスライドインしてくるものです。
アクセラレーターが作動している箇所は赤く表示されます。もし、青いボックスがアニメーションしているときにアクセラレーターが作動していたら青いボックスごと赤いオーバーレイがかかるはずです。
サンプル１〜３（アクセラレーターが作動しない）
サンプル１は、マイナスマージンを利用して左側に隠した青いボックスを、CSS3のkeyframesアニメーションを利用して動かします。
#slideMenu.slideIn {
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 350ms;
-webkit-animation-name: slidein;
margin-left:0px;
}
#slideMenu.slideOut {
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 350ms;
-webkit-animation-name: slideout;
}
@-webkit-keyframes slidein {
from {margin-left:-320px; }
to { margin-left:0;}
}
@-webkit-keyframes slideout {
from {margin-left:0; }
to { margin-left:-320px;}
}サンプル２も１と同じく、keyframesアニメーションです。
ただ、今回はマイナスマージンではなく、絶対配置のleftを使っています。
#slideMenu.slideIn {
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 350ms;
-webkit-animation-name: slidein;
left:0px;
}
#slideMenu.slideOut {
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 350ms;
-webkit-animation-name: slideout;
}
@-webkit-keyframes slidein {
from {left:-320px;}
to {left:0;}
}
@-webkit-keyframes slideout {
from {left:0;}
to {left:-320px;}
}サンプル３は、jQueyのアニメーションで実装してみました。
function hideSlideMenu(){
$("#slideMenu").animate({left:"-320px"}, 350);
showMenuBtn();
}
function showSlideMneu(){
$("#slideMenu").animate({left:0}, 350);
$("#page").bind("click", function(){
hideSlideMenu();
});
hideMenuBtn();
}
$("#menuBtn").bind("click", function(){
showSlideMneu();
});
これらのサンプルを実際にシュミレーターで動かすとわかる通り、アニメーションの最中に青いボックスの上に赤いオーバーレイが表示されることはありません。
translate
最後に、CSS3のtransformと、translateを使ってみます。
#slideMenu.slideIn {
-webkit-transform: translate(0, 0);
left: 0;
}
#slideMenu.slideOut {
-webkit-transform: translate(-320px, 0);
left: -320px;
}結果
これを利用すると、青いボックスの上に赤いオーバーレイがかかっています。
どうやらアクセラレーターが動作しているようです。
まとめ
iOSのsafari上でアクセラレーターを利用して、このようなアニメーションを実行するにはtranslateを利用するべきなのでしょう。
まだ、-webkit-transformに適応できるほかの値を試していないのですが、随時試してみたいと思います。
※参考
mir.aculo.us JavaScript with Thomas Fuchs » Blog Archive » Visualizing WebKit’s hardware acceleration
Code blogCSS3 Transitions and Transforms in Gmail for the iPad – The official Google Code blog
やること
- vimのインストール
- vimrc設定
- プラグインを入れる
1、vimのインストール
こちらの記事を参考にしながら、MacVim-KaoriYaをインストールしました。
Mac OSXでのvim環境整理。.vimrcやらオヌヌメPlug inやらまとめ。CommentsAdd Star
2、vimrc設定
学生時代に先輩からもらった設定ファイルに自分でつぎはぎしたものを利用しているため、とても見せられるものではありません。。＞＜
とりあえず、お気に入りの設定だけメモメモ。(ファイルを紛失したときのために)
・基本
・検索関係
" 大文字小文字を判別なし
set ignorecase
" 大文字小文字が混ざって入力されたら区別
set smartcase
" 検索文字列を色づけ
set hlsearch
" インクリメンタルサーチ
set incsearch
・インデント
" タブの左側にカーソル表示
set listchars=tab:>\
set list
" タブ幅
set tabstop=4
set shiftwidth=4
" 自動インデントを有効にする
:set autoindent
・ステータスライン
" ステータスラインを常に表示
set laststatus=2
" ステータスラインに文字コードと改行文字を表示する
set statusline=%<%f\ %m%r%h%w%{'['.(&fenc!=''?&fenc:&enc).']['.&ff.']'}%=%l,%c%V%8Pその他、文字コード関係とかいろいろやってます。
いつか整理して、このブログで公開予定。
3、 プラグインを入れる
こちらも細かい設定は単体の記事で書くとして、以下のプラグインは必ず入れます。
neocomplcacheの補完動作をtabで管理できるようにするため、以下の関数をvimrcに追加します。
※参考
neocomplcacheでtab補完: BLOGΣ（゜Д゜）カッ!
function InsertTabWrapper()
if pumvisible()
return "\<c-n>"
endif
let col = col('.') - 1
if !col || getline('.')[col - 1] !~ '\k\|<\|/'
return "\<tab>"
elseif exists('&omnifunc') && &omnifunc == ''
return "\<c-n>"
else
return "\<c-x>\<c-o>"
endif
endfunction
inoremap <tab> <c-r>=InsertTabWrapper()<cr>
