HouseTect, JavaScriptな情報をあなたに

僕が大好きなTextMateのカラーテーマMonokai » Blog Archive » Textmate color themeのVim版があったので、もうこうなったらちゃんとやる！
Vimをちゃんとやる！
ということで、とりあえずやった設定と.vimrcと.gvimrcをメモしておく。

Vimはちょいちょい使ってみてはいるんですが、すぐにTextMateやWebStormなんかに浮気して、すぐに使わなくなって、また使う頃にはコマンドほとんど覚えていない現象に陥っているので、今後は小さなtxtファイルの編集でもなるべくVimを使って行ってみようと思う。
とはいえ、コーディングはTextMateになるんだとは思いますが...

vimのカラースキーマを変更する

僕はいっつもエディターをいじるときに色から入ります。
色がうまいこといかないと、ヘコみます。

XXX.vimファイルをダウンロードし、以下のディレクトリに配置する。

カラースキーマの保存場所 - windowsの場合

$HOME/vimfiles/colors/

カラースキーマの保存場所 - macの場合

$HOME/.vim/colors/

colorschemeを選ぶ

新卒さんのための人気Vimカラースキーマランキング5+1(vim.org & github調べ) - 常識という迷信
を参考に、molokai - A port of the monokai scheme for TextMate : vim onlineにしてみました。

これはTextMateのほうで僕はこの色を使っているので、もうこれ以外考えられないです！
（Monokai » Blog Archive » Textmate color theme）

■参考リンク
カラースキーマの使い方 -- 名無しのvim使い

.gvimrcにcolorschemeの設定を書く

MacVim-KaoriYaでcolorschemeの設定 - 脳みそHack
これ毎回ハマるんですが、MacVim-KaoriYaの設定ファイルの読み込みの順番が

MacVim.app/Contents/Resources/vim/vimrc

ホームフォルダ/.vimrc または _vimrc

MacVim.app/Contents/Resources/vim/gvimrc

ホームフォルダ/.gvimrc または _gvimrc

via: MacVim-KaoriYaでcolorschemeの設定 - 脳みそHack

なので、.vimrcに書いてもいまいちcolorschemeが反映されない。
なので、.gvimrcをtouchにしてここに、

colorscheme molokai

と記載します。
これでテーマがちゃんと反映されます。

またカラースキーマ -- 名無しのvim使いにたくさんテーマがあるので、自分に合うのを探してみるのも楽しいかもしれません。

タブと全角スペースは色を変える

はじめ.vimrcのほうにいろいろと書いてためしてみたんですが、いっこうに全角スペースが可視化されなくてハマってて、
どうやら.gvimrcに書くのがいいみたい。

Vim初心者的導入メモ 2/3 「vimrc設定」編 - ナレッジエース
から

"全角スペースを視覚化
highlight ZenkakuSpace cterm=underline ctermfg=lightblue guibg=#666666
au BufNewFile,BufRead * match ZenkakuSpace /　/

を拝借。

タブの表示に関しては、vimでスペースやTabなどの見えない文字を表示させる方法 - Life is Try and Errorを参考にさせていただいた。

"特殊文字(SpecialKey)の見える化。listcharsはlcsでも設定可能。
"trailは行末スペース。
set list
set listchars=tab:>-,trail:-,nbsp:%,extends:>,precedes:<

上記2つを.gvimrcに追記すればOK！

---

Pluginを入れる

Zen-Coding

やっぱりZenがないと不便！

ZenCoding for Vim 導入方法（初心者さん向け） - sakurako_sの日記

vimのプロセス間でのコピペ

複数のvimプロセス間でコピペするためのplugin - while(1){die; respawn;}

vimからTextMateへもペーストできるので便利！

vim-autocomplpop

autocomplpop.vimを入れてやったこと-vimプラグイン - rderaログを見ながら入れてみた。
入力補完プラグイン。

C-pとかC-nで移動して、C-yで選択がデフォルトみたいだけど。

やはり、tabで移動したい。

via: autocomplpop.vimを入れてやったこと-vimプラグイン - rderaログ

のタブ切り替えは非常に便利。

---

便利機能

括弧とかダブルコート入力時に←に戻る

「もっと早く知りたかった」と思ったvimrc設定 - e2esound.com業務日誌

この設定のおかげで今後のvimライフが大きく左右されるんだろうなー。

imap {} {}<Left> imap [] []<Left> imap () ()<Left> imap "" ""<Left> imap '' ''<Left> imap <> <><Left>

を.vimrcに追記すればOK！

Esc以外でノーマルモードに戻る方法

Vimにおける Esc と Ctrl-cの違い。 - 備忘録 betaの記事を読むと、

• Ctrl + c
• Ctrl + [

とこの2つの方法があるようですが、Ctrl + cのほうは、ちょっとクセがありそうなので、Ctrl + [が今後活躍しそうです。
でも、Escはちょっと遠いけど、慣れるとEscが一番速そう。

---

.vimrc

" 全般設定 " --------------------- set nocompatible " 必ず最初に書く set viminfo='20,<50,s10,h,! " YankRing用に!を追加 set shellslash " Windowsでディレクトリパスの区切り文字に / を使えるようにする set lazyredraw " マクロなどを実行中は描画を中断 set number set ruler set cmdheight=2 set laststatus=2 set statusline=%<%f\ %m%r%h%w%{'['.(&fenc!=''?&fenc:&enc).']['.&ff.']'}%=%l,%c%V%8P set title set linespace=0 set wildmenu set showcmd " コマンド補完 " --------------------- set wildmenu " コマンド補完を強化 set wildmode=list:full " リスト表示，最長マッチ " syntax color " --------------------- syntax on "colorscheme molokai " .gvimrcに書かないと反映されないのでコメントアウト highlight LineNr ctermfg=darkgrey " search " ---------------------- set ignorecase " 大文字小文字無視 set smartcase " 大文字ではじめたら大文字小文字無視しない set wrapscan " 最後まで検索したら先頭へ戻る "set nowrapscan " 検索をファイルの先頭へループしない set hlsearch " 検索文字をハイライト "set incsearch " edit " --------------------- set autoindent set cindent set showmatch " 括弧の対応をハイライト set backspace=indent,eol,start set clipboard=unnamed set pastetoggle=<F12> set guioptions+=a " tab " -------------------- set tabstop=4 " tabstopはTab文字を画面上で何文字分に展開するか "set expandtab " タブを空白文字に展開 set smarttab set shiftwidth=4 set shiftround set nowrap " backup " -------------------- set backup set backupdir=~/vim_backup set swapfile set directory=~/vim_swap "set nobackup " バックアップ取らない "set autoread " 他で書き換えられたら自動で読み直す "set noswapfile " スワップファイル作らない "set hidden " 編集中でも他のファイルを開けるようにする " doc " -------------------- helptags ~/.vim/doc " 文字コードの自動認識 if &encoding !=# 'utf-8' set encoding=japan set fileencoding=japan endif if has('iconv') let s:enc_euc = 'euc-jp' let s:enc_jis = 'iso-2022-jp' " iconvがeucJP-msに対応しているかをチェック if iconv("\x87\x64\x87\x6a", 'cp932', 'eucjp-ms') ==# "\xad\xc5\xad\xcb" let s:enc_euc = 'eucjp-ms' let s:enc_jis = 'iso-2022-jp-3' " iconvがJISX0213に対応しているかをチェック elseif iconv("\x87\x64\x87\x6a", 'cp932', 'euc-jisx0213') ==# "\xad\xc5\xad\xcb" let s:enc_euc = 'euc-jisx0213' let s:enc_jis = 'iso-2022-jp-3' endif " fileencodingsを構築 if &encoding ==# 'utf-8' let s:fileencodings_default = &fileencodings let &fileencodings = s:enc_jis .','. s:enc_euc .',cp932' let &fileencodings = &fileencodings .','. s:fileencodings_default unlet s:fileencodings_default else let &fileencodings = &fileencodings .','. s:enc_jis set fileencodings+=utf-8,ucs-2le,ucs-2 if &encoding =~# '^\(euc-jp\|euc-jisx0213\|eucjp-ms\)$' set fileencodings+=cp932 set fileencodings-=euc-jp set fileencodings-=euc-jisx0213 set fileencodings-=eucjp-ms let &encoding = s:enc_euc let &fileencoding = s:enc_euc else let &fileencodings = &fileencodings .','. s:enc_euc endif endif " 定数を処分 unlet s:enc_euc unlet s:enc_jis endif " 日本語を含まない場合は fileencoding に encoding を使うようにする if has('autocmd') function! AU_ReCheck_FENC() if &fileencoding =~# 'iso-2022-jp' && search("[^\x01-\x7e]", 'n') == 0 let &fileencoding=&encoding endif endfunction autocmd BufReadPost * call AU_ReCheck_FENC() endif " 改行コードの自動認識 set fileformats=unix,dos,mac " □とか○の文字があってもカーソル位置がずれないようにする if exists('&ambiwidth') set ambiwidth=double endif " 括弧入力後に←に移動 imap {} {}<Left> imap [] []<Left> imap () ()<Left> imap "" ""<Left> imap '' ''<Left> imap <> <><Left> " plugin " --------------------- " yanktmp map sy :call YanktmpYank()<CR> map sp :call YanktmpPaste_p()<CR> map sP :call YanktmpPaste_P()<CR> " vim-autocomplpop "<TAB>で補完 " {{{ Autocompletion using the TAB key " This function determines, wether we are on the start of the line text (then tab indents) or " if we want to try autocompletion function! InsertTabWrapper() let col = col('.') - 1 if !col || getline('.')[col - 1] !~ '\k' return "\<TAB>" else if pumvisible() return "\<C-N>" else return "\<C-N>\<C-P>" end endif endfunction " Remap the tab key to select action with InsertTabWrapper inoremap <tab> <c-r>=InsertTabWrapper()<cr> " }}} Autocompletion using the TAB key

.gvimrc

colorscheme molokai set textwidth=78 set columns=100 set lines=150 "特殊文字(SpecialKey)の見える化。listcharsはlcsでも設定可能。 "trailは行末スペース。 set list set listchars=tab:>-,trail:-,nbsp:%,extends:>,precedes:< " 全角スペースを視覚化 highlight ZenkakuSpace cterm=underline ctermfg=lightblue guibg=#666666 au BufNewFile,BufRead * match ZenkakuSpace /　/

hisasann/vimrc - GitHub

さぁて、Vimライフをおくりはじめますか！

追伸：WindowsではPeggyというエディターをよく使っております！

■関連リンク
・vimに欠かせない３つのプラグイン | tech.kayac.com - KAYAC engineers' blog
・Vim初心者的導入メモ 2/3 「vimrc設定」編 - ナレッジエース
・vimrcを晒してみる - Archiva
・ぼちぼち散歩 おれの.vimrc

極々メモ的な感じで、エントリーにしとく。

apacheのリバースプロキシ用にmod_rpafのインストール

のちのち必要になるのでまずはmod_rpafのインストールから。

wget http://stderr.net/apache/rpaf/download/mod_rpaf-0.6.tar.gz
tar xvzf mod_rpaf-0.6.tar.gz
cd mod_rpaf-0.6

Makefileをちょっと書き換える。

vi Makefile

-APXS2=$(shell which apxs)
+APXS2=/usr/sbin/apxs

makeしてみる。

make rpaf-2.0
sudo make install-2.0

apxsがないとエラーが出たので、httpd-develをインストール

httpd-develのインストール

sudo yum install httpd-devel

今度はhttpd-develを探しにいけなかったようなので、rpmを追加。

Loaded plugins: fastestmirror
Loading mirror speeds from cached hostfile
* base: ftp.nara.wide.ad.jp
* extras: ftp.nara.wide.ad.jp
* updates: ftp.nara.wide.ad.jp
Setting up Install Process
No package http-devel available.
Nothing to do
となったのでリポジトリを追加する

適当なディレクトリでwgetしてrpmファイルをダウンロードしとく。
そしてrpmコマンドで登録します。

wget http://download.fedora.redhat.com/pub/epel/5/x86_64/epel-release-5-4.noarch.rpm
wget http://rpms.famillecollet.com/el5.x86_64/remi-release-5-8.el5.remi.noarch.rpm
wget http://packages.sw.be/rpmforge-release/rpmforge-release-0.5.2-2.el5.rf.x86_64.rpm

rpm -Uvh epel-release-5-4.noarch.rpm remi-release-5-8.el5.remi.noarch.rpm rpmforge-release-0.5.2-2.el5.rf.x86_64.rpm

これで再度、

sudo yum install httpd-devel

実行したらうまく入った！

nginxのインストール

sudo yum install nginx

一応入ったことを確認しとく。

yum list installed | grep nginx

設定ファイルnginx.confの編集

nginx+apacheでちょっぴり快適なWebサーバーを目指してみる(CentOS さくらのVPS) ::ハブろぐからごっそり参考にさせていただいた！

sudo vi /etc/nginx/nginx.conf server { listen 80; server_name http://www28039u.sakura.ne.jp/; # いろいろ書いてある proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_redirect off; proxy_max_temp_file_size 0; location ~ .*\.(jpg|JPG|gif|GIF|png|PNG|swf|SWF|css|CSS|js|JS|inc|INC|ico|ICO) { root /var/www/; index index.html; ssi on; break; } location / { proxy_pass http://127.0.0.1:8082; break; } # いろいろ書いてある }

バーチャルホストvirtual.confの編集

sudo vi /etc/nginx/conf.d/virtual.conf server { listen 80; server_name http://www28039u.sakura.ne.jp/; location ~ .*\.(jpg|JPG|gif|GIF|png|PNG|swf|SWF|css|CSS|js|JS|inc|INC|ico|ICO) { root /home/hisasann/www/test; index index.html; ssi on; break; } location / { proxy_pass http://127.0.0.1:8082; break; } }

apacheのhttpd.confの編集

sudo vi /etc/httpd/conf/httpd.conf # 先ほど入れたmod_rpafちゃん LoadModule rpaf_module modules/mod_rpaf-2.0.so Listen 8082 <VirtualHost 127.0.0.1:8082> DocumentRoot /home/hisasann/www/test2 ServerName test.example.com RPAFenable On RPAFsethostname On RPAFproxy_ips 127.0.0.1 10.0.0.1 RPAFheader X-Forwarded-For </VirtualHost>

リバースプロキシを導入する際はmod_rpaf :: drk7jp
mod_rpafを使ったIPアドレスのアクセス制限

apacheとnginxの再起動

sudo /etc/init.d/httpd restart
sudo /etc/init.d/nginx restart

こんなこともあるみたい。

nginxを再起動させます。


注意:このとき、sudo /etc/init.d/nginx restartを使わないこと。再起動しないことがよくありました。

sudo /etc/init.d/nginx stop

sudo /etc/init.d/nginx start

via: nginx @ ウィキ - nginx　バーチャルホスト

実際にアクセスしてみる

アクセスしてみると、

/var/www/htmlに置いたhtmlはちゃんと表示されるのに、
自分で作成した/home/hisasann/www/test2に置いたファイルを開こうとしても、

(13)Permission denied: access to /index.html

となってしまった。

原因は、途中のディレクトリのhisasannが700だったから！
apache を利用しての public_html が公開できない - 解 - いろきゅう.jp ～Programmable maiden～ Tech side
[Linux]ApacheがPermission deniedを吐いてくる : うえちょこ＠ぼろぐ
（結構これにハマッテいる人がいて、SELinuxというものが悪さしている場合もあるよう）

これで
静的ファイル
「http://www28039u.sakura.ne.jp/sample.jpg」
は/home/hisasann/www/test/にアクセスされ、
動的ファイル
「http://www28039u.sakura.ne.jp/test2.html」
は/home/hisasann/www/test2/にアクセスされるようになった。

まだ分からないことだらけですが、なかなか面白い！

■参考リンク
さくら VPS + CentOS のチューニングや高速化もっとこうすれば良かった作業まとめ | ウェブル
さくら VPS で 静的ファイルは nginx で動的ファイルは Apache で処理するための詳細設定 | ウェブル
nginx+apacheでちょっぴり快適なWebサーバーを目指してみる(CentOS さくらのVPS) ::ハブろぐ
軽量高速Webサーバのnginxで静的コンテンツ配信とキャッシュコントロール | KRAY Inc

技術評論社より献本いただきました。
ありがとうございます！

そして2012年一発目のエントリー！

この本の概要

スマートフォンやタブレットなどのモバイルデバイス向けWebフレームワークとして人気のjQuery Mobileの使い方を解説するリファレンスです。jQuery Mobileを利用すると，HTML5ベースのタグでページを記述するだけで，iPhone，iPadやAndroid，Windows Phoneなどの各種スマートフォン・タブレットに対応したサイトが構築できます。本書では，jQuery Mobileを使ったサイト制作の基本的な考え方と，jQuery Mobileが持つ，モバイルデバイスに最適化されたリッチな，各種部品の使い方をわかりやすく解説します。

via: 書籍案内：jQuery Mobileポケットリファレンス｜gihyo.jp ... 技術評論社

jQueryMobileのバージョン1がリリースされてまだ間もないですが、やっとこさ日本語の本が出始めて理解しやすくなってきたのかなと思います。
jQueryだけの知識だけでは、やはりjQueryMobileを使うこなすことは難しいので、こういったリファレンス的な書籍はありがたい。

では、目次を。

目次

Chapter 1

jQuery Mobile の基本

Chapter 2

サイトの基本設計

Chapter 3

リンク

Chapter 4

ダイアログボックス

Chapter 5

レイアウト

Chapter 6

ヘッダ

Chapter 7

フッタ

Chapter 8

ナビゲーションバー

Chapter 9

ボタン

Chapter 10

フォーム

Chapter 11

テキスト入力ボックス

Chapter 12

スライダー

Chapter 13

トグルスイッチ

Chapter 14

ラジオボタン

Chapter 15

チェックボックス

Chapter 16

セレクトメニュー

Chapter 17

カスタムメニュー

Chapter 18

リスト

Chapter 19

グローバル設定

Chapter 20

ページイベント

Chapter 21

タッチイベント

Chapter 22

仮想マウスイベント

Chapter 23

端末回転イベント

Chapter 24

スクロールイベント

Chapter 25

レイアウトイベント

付録 A

システム関数

付録 B

ボタンアイコン一覧

付録 C

テーマシステム

ここまで網羅してくれているとjQueryMobile全体の把握にそう時間は掛からない。

ありがたい点 - その1

$.mobile.changePage
$.mobile.loadPage

といったシステム関数の引数を細かく解説してくれていること。
$.mobile.changePageの引数はアルファ時代から結構変わっているので、最新のバージョン1での解説は本当にありがたい。

これ意外にも$.mobileにはたくさんの便利関数があるが、それらについても書かれている。
というか知らないものも結構あったので、

別ページを独自に取得したいという需要は実際かなりあるので、このリファレンスがあれば開発がしやすいだろう。

ありがたい点 - その2

拡張セレクタjqmDataについても書かれていること。
これは、$.mobile.ns（ネームスペース）を加味したdata属性の取得に使うメソッドだが、これもちゃんと説明を受けないと理解できない。

ありがたい点 - その3

「自動的初期化を拒否する」というdata-role="none"や$.mobile.page.prototype.options.keepNativeについても細かく書かれています。
これは、コントロール要素をjQueryMobileに装飾させないための設定です。
独自デザインでサイトを設計する場合には、結構使います。

ありがたい点 - その4

仮想系のイベントについて書かれている。
vmousedownやvclickなど、一見するとなんのイベントなんのか分からないですが、こういったイベントについても細かく書かれている。
また、vclickはclickイベントよりも反応が速いが、これについてのデメリットも記載されている。
（これは知らなかった！）

jQueryMobileを使ったことある方、まったく触ったことない方。
このどちらにも本書は役にたつと思います。

また著者である森直彦さんの以下のページには大変お世話になっている。
jQuery Mobile 1.0 日本語リファレンス

■関連記事
jQueryMobileのXSSに関する調査メモ
jQueryMobileのかゆいところに手が届くお作法メモ
jQueryMobileを使ってのスマートフォンサイトの構築メモ

webkitAudioContextを使って音とcanvasへの描画をシンクロさせてみました。
あまり情報が多くなく、試行錯誤でしたがなんとかそれっぽくなったと思います。

canvasへの描画は、Paper.jsを使いました。
これぐらいならライブラリを使う必要なかったのですが、Paper.jsが気になっていたのでとりあえず慣れるということで。

また、今回のこのアプローチはken_c_loさんからアイデアをいただきました。
画像の提供から配置までのデザインを担当してもらい、ありがとうございます！

この作品をスティーブ・ジョブズ氏に捧げます。

iDance - Thank you Steve.

Chromeでご覧ください。（音が出ます）
iDance - Thank you Steve.

■github
hisasann/iDance - GitHub

AudioDance

こちらはiDanceの元となった作品です。
スピーカー画像を使って表現してみました。是非こちらもご覧ください。
AudioDance

■github
hisasann/AudioDance - GitHub

パッケージからインストールする

楽チン！

[root]$ yum -y install httpd
[root]$ /etc/rc.d/init.d/httpd start
Starting httpd: [ OK ]

自動起動にする

[root]$ chkconfig httpd on
[root]$ chkconfig --list httpd
httpd 0:off 1:off 2:on 3:on 4:on 5:on 6:off

3がonになっていればよい。

[root]$ chkconfig --list

これで自動起動の設定を確認できる

Apacheのバージョンを確認する

[root]$ rpm -qa httpd

あとはhttpでアクセスしてApacheの画面が表示されてばOK！

[via]
26.3. chkconfigコマンドによる自動起動の設定

むちゃくちゃザックリとして内容ですが、自分のために一応メモしとく。

何はともあれ接続する

パスワードはさくらインターネットから送られてくるメールに記載されている初期パスワードを入力する。

[makbook]$ ssh root@IPアドレス

真っ先にrootのパスワード変更する

[root]$ passwd
Changing password for user root.
New UNIX password:
Retype new UNIX password:
passwd: all authentication tokens updated successfully.

続いて今後メインに使っていくことになるユーザーを作成する

[root]$ useradd username[Enter]
[root]$ passwd username[Enter]
Changing password for user username.
New UNIX password:[新しいパスワードを入力]
Retype new UNIX password:[新しいパスワードを再入力]
passwd: all authentication tokens updated successfully.

[root]$ usermod -G wheel username

MacBookでSSH接続用のRSA鍵を作成する

[makbook]$ ssh-keygen [Enter]
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/username/.ssh/id_rsa): [Enter]
Enter passphrase (empty for no passphrase): [好きなパスワードを入力]
Enter same passphrase again: [好きなパスワードを再入力]
Your identification has been saved in /Users/username/.ssh/id_rsa.
Your public key has been saved in /Users/username/.ssh/id_rsa.pub.

作成したRSA鍵をサーバーにSCPでコピーする

[macbook]$ cd .ssh
[macbook .ssh]$ scp id_rsa.pub [username]@[IPアドレス]:~/

[username]$ mkdir .ssh
[username]$ chmod 700 .ssh
[username]$ cat id_rsa.pub >> authorized_keys
[username]$ mv authorized_keys .ssh/
[username]$ cd .ssh
[username .ssh]$ chmod 600 authorized_keys

MacBookからSSH接続の確認をする

ターミナルから、以下を入力する。

ssh username@IPアドレス

初回はRSA鍵を作成した時のパスワード入力を促されるけど、2回目からは聞かれない。

sudo設定の変更

作業用ユーザで sudo ができるよう設定を変更します。

[root]$ visudo
%wheel ALL=(ALL) ALL //コメントアウトを外す

サーバーのSSH設定の変更

[root]$ vi /etc/ssh/sshd_config

PermitRootLogin no # rootログイン禁止（一応明示的に）
PasswordAuthentication no # パスワードでログイン禁止（公開鍵暗号オンリー）

[root]$ /etc/init.d/sshd restart

sudoのログを取る

[root]$ touch /var/log/sudo
[root]$ chmod 600 /var/log/sudo

[root]$ visudo
### 末尾に以下を追記
Defaults syslog=local1

[root]$ vi /etc/syslog.conf
local1.* /var/log/sudo # 追加
local7.* /var/log/boot.log

#*.info;mail.none;authpriv.none;cron.none /var/log/messages # コメントアウト
*.info;mail.none;authpriv.none;cron.none;local1.none /var/log/messages # 追加

[root]$ /etc/init.d/syslog restart

[root]$ tail /var/log/sudo
Apr 17 04:55:55 www28039u sudo: username : TTY=pts/0 ; PWD=/home/username ; USER=root ; COMMAND=/bin/su -

SSHポート番号を変更する

[username]$ sudo vi /etc/ssh/sshd_config
#Port 22
Port 10022

[username]$ sudo /etc/init.d/sshd restart
Stopping sshd: [ OK ]
Starting sshd: [ OK ]

[makbook]$ ssh username@IPアドレス -p 10022

文字コードを日本語にする

[root]$ vi /etc/sysconfig/i18n
LANG="ja_JP.UTF-8"

に変更して、ログアウトしてログインする

[via]
さくらのVPS（CentOS）で文字コードを日本語にする方法（もしくはlessで文字化けさせない方法） | IDEA*IDEA

パッケージのアップデートをしとく

Cent OSをインストールした後、「yum update」を行う前に必ず「yum install yum-fastestmirror」すること - Future Insightに書かれているように、

yum install yum-fastestmirror

をやったらすでにインストールされてるって言われた。

[root]$ yum -y update

■参考リンク
さくらのVPS を使いはじめる | アカベコマイリ
さくらVPSにMacでSSH接続する初期設定 @ Eyes of Bastet
「さくらのVPS」借りてみた（作業ユーザー作成，SSH設定） - Rubellum fly light
myfinder's blog: さくらのVPSを借りたら真っ先にやるべきssh設定
【syslog】sudoのログを分ける - nullpopopo
AKIBE - さくらのVPS CentOSでサーバ構築 2 - User

今回の原因

#1789: jQuery Mobile XSS Problem by jnlin for jquery/jquery-mobile - Pull Request - GitHubに書かれているXSSが今回の内容。

これは以下のようなhash値をjQueryMobile側のhashchangeイベントがキャッチし、

#<img src=/ss onerror={alert('xss');}>

$()関数にhash値を渡すところで発生するよう。

jQueryMobileの2488行目あたりの以下のコードがそれ。このコードは2360行あたりにも存在する。

to = $( ":jqmData(url='" + url + "')" );

そして今回のjQueryのXSSに関する詳しい内容はmalaさんの記事を参考。
jQueryにおけるXSSを引き起こしやすい問題について - 金利0無利息キャッシング - キャッシングできます - subtech
new XSS pattern with jQuery

jQueryMobileのXSSデモUrl

以下のURLを表示するとalertが表示されるのが分かる。

■1.0a4.1
jQuery Mobile: Demos and Documentation

またbeta1のほうでは、

to = $( ":jqmData(url='" + url + "')" );

がなくなっており、hash値にimgタグを渡しても発生しない。

■1.0b1
jQuery Mobile: Demos and Documentation

jQueryのバグチケットを見てみる

#9521 (XSS with $(location.hash) and $(#) is needed?) - jQuery Core - Bug Tracker
ここに書いてある解決策である、

- quickExpr = /^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/, + quickExpr = /^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,

はうまくいかなかった。
これはコメント欄を読むと分かるが、「$("anychar<img>")」こうゆうパターンのときにダメのよう。
（何か他にも修正箇所が必要なのだろうか...）

malaさんのパッチを当てる！

ほんとありがたいことですが、こちらのパッチを使ってみたところうまくいきました！
quick patch script for jQuery http://bugs.jquery.com/ticket/9521 -- Gist

こちらのPerlコードは、今回の問題になっているjQuery変数のquickExprの内容を書き換えるものになります。
このパッチには過去古い時代のjQueryのquickExprも含まれているが、とりあえず以下に該当のバージョンのパッチを列挙してみました。

beta1のほうにバージョンアップできる場合は良いのですが、アルファ版とbeta版ではかなり動きや設定も違ってくるので、すぐに対応は難しいと思います。
jQuery MobileにXSSの脆弱性が見つかったのでアルファ版からベータ版に変更する際の注意点[to-R]

とりあえずまだ他のXSSがあるかどうかや今回の件に関する不具合がすべて取り除かれたかの動作確認は出来ておりませんが、
まずはjQuery側を修正し、動作検証をして様子を見てみようと思います。

jquery1.2.6時代のquickExpr用

- quickExpr = /^[^<]*(<(.|\s)+>)[^>]*$|^#(\w+)$/, + quickExpr = /^(?:\s*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,

jquery1.4.2時代のquickExpr用

- quickExpr = /^[^<]*(<[\w\W]+>)[^>]*$|^#([\w-]+)$/, + quickExpr = /^(?:\s*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,

jquery1.5時代のquickExpr用

- quickExpr = /^(?:[^<]*(<[\w\W]+>)[^>]*$|#([\w\-]+)$)/, + quickExpr = /^(?:\s*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/,

いやはや、なかなか難しいもんですなー！

■参考リンク
・Twitter / @bulkneets: 冗談みたいな話ですけど旧バージョンのjQuery m ...
・Twitter / @bulkneets: jQuery mobileのbeta 1がリリースさ ...
・Twitter / @bulkneets: 旧バージョンのjQuery Mobileはじめ多くの ...

jQueryMobileを使ってのスマートフォンサイトの構築メモの記事ではスマートフォン開発環境の構築に関するTipsとjQueryMobile（以降jqm）のちょっとした書き方に関する内容だったので、今回は「こうゆうときjqmではどうするの？」といったものをサンプルコードを交えてまとめてみようと思います。

サクッとデモだけ見たいーという方はjQueryMobileのかゆいところに手が届くお作法メモからどうぞ。

jqmのページロード時イベントの呼ばれる順番

各イベントに関してはこちらのドキュメントを見ていただくとして、jQuery Mobile Docs - Events。

初期ページのロード時の順番

1. pagebeforecreate
2. pagecreate
3. pagebeforeshow
4. pageshow

Ajaxページ遷移時の順番

遷移元のページをhide系のイベントで見えなくして、遷移先のページをshow系のイベントで見えるようにしています。
その順番は以下のようになりました。

1. pagebeforecreate
2. pagecreate
3. pagebeforehide
4. pagebeforeshow
5. pagehide
6. pageshow

表示される前に何か事前に処理しときたい場合は、pagebeforeshowイベントで処理し、画面が表示された後に何かしたい場合は、pageshowイベントを使うとよいかもしれません。

■デモ
jqmイベントの呼ばれる順番

$.mobile.changePageを独自に呼ぶ（get）

mobileinitイベント内で、$.mobile.ajaxEnabledにfalseをセットしています。
これが重要で、この設定をしておけばリンククリック時に勝手にAjaxページ遷移がされないようになります。

$(document).bind("mobileinit", function(){ $.mobile.page.prototype.options.addBackBtn = false; $.mobile.ajaxEnabled = false; });

あとはクリック時に$.mobile.changePageを呼んであげるだけですが、第4引数をtrueにしときます。
これでhash値が書き換えられるので履歴に残るようになります。

$(function() { var count = 1; $(document).delegate(".changePage", "click", function(event) { $.mobile.changePage({ url: "change-page-get2.html", type: "get", data: "count=" + (count++) }, "slide", false, true, false); }); $(document).delegate(".changePage", "click", function(event) { $.mobile.changePage({ url: "test.html", type: "get", data: "hoge=foo" }, "slide", false, true, false); }); });

「ajaxEnabledをtrueにした状態でリンクをクリックした場合」と、「changePageを独自に呼ぶ（get）でリンクをクリックした場合」とでは最終的に同じchangePageを呼ぶという意味では違いはほとんどありません。

そしてこのパターンのデメリットとしては、いろんなリンクをクリックしてAjaxページ遷移をしまくるとその分親となるbodyにどんどんHTMLがappendされて肥大していきます。
Ajaxページ遷移するボリュームがそこまででないなら問題はないと思いますが、いろんな条件を見ながら検索条件を絞り込むような画面だとこの遷移が頻繁に起こってしまうのでもしかすると重くなってしまうかもしれません。
（ページが肥大しないようにpostを使った方法を次でご紹介します。）

こちらのデモでは、毎回changePageするたびにカウントアップして別のページを読み込んでいると思わせています。
これで次の画面へ行って戻ってくると画面にはどんどんページが追加されていきます。

■デモ
$.mobile.changePageを独自に呼ぶ（get）

$.mobile.changePageを独自に呼ぶ（post）

こちらのサンプルは$.mobile.changePageを独自に呼ぶ（get）とほとんど同じですが、changePageに渡すtypeがpostになっています。
こうするとhash値はtest.htmlのままで、後ろにhoge=fooが付かないので、パラメータが可変でも常に1つのページを読み込むだけという状態になります。

$(function() { var count = 1; $(document).delegate(".changePage", "click", function(event) { $.mobile.changePage({ url: "change-page-post2.html", type: "post", data: "count=" + (count++) }, "slide", false, true, false); }); });

デモを触っていただくと分かりますが、getのときは画面遷移をするとページ数がどんどん増えていきましたが、postのパターンだと常に2個です。
2個というのは、初期に表示したページと次に読み込んだページの2つという意味です。

パーマリンクとしてhash値にパラメータをちゃんと持たせたいという場合には向きませんが、とくにそういった重要性がない場合はpostを考慮してみるのも一つの方法かもしれません。

■デモ
$.mobile.changePageを独自に呼ぶ（post）

HTML装飾をjqmにさせない

まずはdata-role="page"のタグのdata-themeに適当な文字を入れておきます。
つまりthemeとしては存在しない文字列になります。

<section data-role="page" data-theme="sp" class="page">

これだけだと、コントロール系の要素は勝手に装飾されてしまうので、以下のようにkeepNativeにCSSセレクターを指定しておきます。
以後はこのセレクターをclassに指定した要素は装飾されないようになります。

$(document).bind("mobileinit", function(){ $.mobile.page.prototype.options.keepNative = ".data-role-none"; }); <input type="text" name="name" id="name" value="" class="data-role-none">

■デモ
HTML装飾をjqmにさせない

page()でHTMLの装飾

「Ajaxでデータを取得して画面にappendするときにHTMLを装飾したい！」という場合にすごく有力なメソッドがこのpage()です。
以下のサンプルのようにjqmのdata-roleを含んだHTMl文字列をappendして、page()を実行するとまるっと装飾されます。

便利！

$(function() { $(document).delegate(".addPage", "click", function(event) { $(["<article data-theme='e'>", "<section data-role='content'>", "<h2>foo</h2>", "<ul data-role='listview' role='listbox' data-inset='true'>", "<li>hoge</li>", "<li>bar</li>", "</ul>", "<a href='#' data-role='button' data-icon='arrow-r' data-theme='a'>ぼたん</a>", "</section>", "</article>"].join("")) .appendTo($(".wrapper")) .page(); }); });

■デモ
page()でHTMLの装飾

buttonMarkup()でボタンの装飾

data-roleにbuttonを持つ要素を装飾したい場合は、このbuttonMarkup()を使います。
でもぶっちゃけpage()すればいいんだと思います。

$(function() { $(document).delegate(".addButton", "click", function(event) { $("<a>", { href: "#", "data-role": "button" }) .html("追加されたよ") .appendTo($(".wrapper")) .buttonMarkup(); }); });

■デモ
buttonMarkup()でボタンの装飾

listview()でリストの装飾

ul要素を含むHTMLを装飾したい場合はlistview()を使い、li要素しかない場合はlistview('refresh')を使います。
でもぶっちゃけpage()すればいいんだと思います。

$(function() { $(document).delegate(".addUl", "click", function(event) { $( "<ul>", { "data-role": "listview", "data-inset": "true" }) .append("<li>hoge</li>") .appendTo($(".ul-wrapper")) .listview(); }); $(document).delegate(".addLi", "click", function(event) { $(".ul-wrapper2") .append("<li>foo</li>") .listview('refresh'); }); });

■デモ
listview()でリストの装飾

URLを変えずにAjaxページ遷移＋戻る

この需要は意外とあるんじゃないカナーと思うのですが、
たとえば詳細ページから写真の一覧を表示したいけど、hash値を変えるとブラウザバック時に写真一覧に戻っちゃうからヤダッ！
というケース。

Ajaxページ遷移で読み込んだページの戻るボタンは、jqmのものではなく独自の挙動にしたいので$.mobile.page.prototype.options.addBackBtnをfalseにしときます。

$(document).bind("mobileinit", function(){ $.mobile.page.prototype.options.addBackBtn = false; $.mobile.ajaxEnabled = false; });

遷移元ページの進むと遷移先ページの戻るは同じchangePageを呼び出しますが、
戻るのほうは新たにAjaxページ遷移するのではなくすでに画面にロードされているPageに戻ればよいので第1引数にはid（data-url）を指定します。
さらにトランジションとしては戻るアニメーションをしてほしいので、第3引数はtrueをセットしています。

そして第5引数にtrueをセットして、hash値が変わって呼ばれたということにします。
この引数は確かjQueryMobileのアルファ4からいつの間にか追加されててjQuery Mobile Docs - Methodsにも書かれていません。

$(function() { $(document).delegate(".changePage", "click", function(event) { $.mobile.changePage({ url: "test.html", type: "post", data: "hoge=foo" }, "slide", false, false, false); }); $(document).delegate(".reverse", "click", function(event) { $.mobile.changePage("detail", "pop", true, false, true); }); });

遷移元となるページのdata-role="page"のタグにはidを指定しておきます。
このidが戻るときのchangePageのtoになります。

<section data-role="page" data-theme="b" class="page" id="detail">

■デモ
URLを変えずにAjaxページ遷移＋戻る

hashChangeイベントを自分で監視したい

以下のようにするだけです。

$(document).bind("mobileinit", function(){ $.mobile.hashListeningEnabled = false; });

■デモ
hashChangeイベントを自分で監視したい

$.mobile.widgetでカスタムな要素を作る

jqmはチェックボックスやラジオボタンを自動的に装飾してくれますが、そういった処理を自分オリジナルに作ることができます。
以下の例ではHTML要素に対してmarquee()というメソッドを呼ぶとその中にmarqueeタグが挿入されるだけのサンプルになります。

(function($, undefined) { $.widget( "mobile.marquee", $.mobile.widget, { options: { behavior: "scroll" }, _create: function(){ this.refresh(); }, refresh: function() { var elem = this.element, o = this.options, html = elem.html(); elem.empty(); $("<marquee behavior='" + o.behavior + "'>" + html + "</marquee>").appendTo(elem); } }); })(jQuery);

jqmの装飾する処理はDom構築が終わったタイミングで$.mobile.page内から呼ばれる_enhanceControlsメソッドにより行われますが、独自に作ったwidgetは呼ばれないので、readyになったタイミングで呼んであげる必要があります。（当たり前ですね）

そしてmarqueeの値を変更したあとにmarquee("refresh")を呼んでいますが、↑のほうで見たことがある記述ですね。
そう！listview('refresh')と同じですね。

こうゆう感じでwidget化しとくとrefreshするだけで再装飾されるので便利かもしれません。

$(function() { $(".custom-marquee").marquee({ behavior: "scroll" }); $(document).delegate(".changeValue", "click", function(event) { $(".custom-marquee") .html($("#value").val()) .marquee("refresh"); }); });

■デモ
$.mobile.widgetでカスタムな要素を作る

$.mobileの拡張

jqmに特化したコードはjQueryのPluginとして作るとあとあと面倒かもしれないので、$.mobile配下に入れておくとよいかもしれません。

$(document).bind("mobileinit", function(){ $.extend($.mobile , { foo: "ふー", bar: "ばー", hoge: "ほげ" }); });

■デモ
$.mobileの拡張

僕のmobileinitイベント

最後に今僕が使っているmobileinitイベントの内容をご紹介。
といってもベタな感じではありますが。

$(document).bind("mobileinit", function(){ // 戻るボタンのラベル $.mobile.page.prototype.options.backBtnText = "戻る"; // 戻るボタンを消す方法 $.mobile.page.prototype.options.addBackBtn = true; // 読み込み中のメッセージ $.mobile.loadingMessage = "読み込み中..."; // Ajaxでのページ取得に失敗した場合のメッセージ $.mobile.pageLoadErrorMessage = "ページの取得に失敗しました"; // リンククリック時にAjaxする $.mobile.ajaxEnabled = true; // コントロールの装飾をしないためのセレクター $.mobile.page.prototype.options.keepNative = ".data-role-none"; // デフォルトのAjaxページ遷移のトランジション $.mobile.defaultTransition = "slide"; // data-position="fixed"で画面内のどこかをclickするとfixedが解かれちゃうので、それを阻止 $.fixedToolbars.setTouchToggleEnabled(false); });

個人的にひとつ重要なのが、$.fixedToolbars.setTouchToggleEnabled(false)です。

これは、headerやらfooterをfixedにした場合に画面内のどこかをタップするとfixedな要素が消えてしまうのを防ぎます。
多分ですが、スマホサイトでよく見るfixedな要素は広告が多く、これが常に追従してくるのはさすがにちょっとという人のためにfixedな要素を消すためにあるのかなーなんて思ってたりします。（違うか！）

広告でしたらサイト訪問者がどこかをタップしてfixedな要素を消すのはよいとは思うのですが、サイトとして重要な要素の場合はタップしようが何しようがfixedでいて欲しいと思うので、このプロパティはfalseにしとくのがよいかと思っています。

まとめ

これらのデモはjQueryMobileのかゆいところに手が届くお作法メモから参照いただけます。

まだまだアルファ版なので仕様がどう変わるか分かりませんが、現時点でのjQueryMobileの完成度としては結構よいのではないかと思っています。
またそもそもデザインも何から何までjQueryMobileに依存するサイト製作は今後あまり浸透せず、イベント回りはjQueryMobile使うけどデザインは独自とかある程度関係性は疎結合として使われていくんじゃないかなーと。

いずれテーマをjQueryMobileのサイト上で作れるようになるとデザインの幅がグッと広がるので楽しみです！

これらのTipsがjQueryMobileを使うの人たち助けになれば幸いです。

■追伸：
vclickイベントって何もんなんだろう・・・

■関連記事
・jQueryMobileを使ってのスマートフォンサイトの構築メモ

徐々にjQuery Mobileのバージョンが上がってきて、だいぶ動きもスピード感もいい感じになってきたので、
そろそろスマートフォンサイトの構築で採用されはじめているのではないでしょうか。
この記事では個人的に、どうやるのか分からなくて調べたことをまとめてみました。

また最新の情報は、jquerymobile (jquerymobile) on Twitterをフォローしとくとよいかもしれません。

では、まずはスマートフォンサイトを構築するときにきっと役に立つTipsからご覧ください。

iPhoneシミュレータ

iPhoney

Macを使っているならiPhoneyがピッタリでしょう。
かなり安定しているし、デザインやJavaScriptの動きもとくに問題ない。

要素の位置やCSSのデザインなどを確認するなら、これがあればよいかも。
最終的には実機で見る必要があるけど、とりあえずこれがあれば困らない。

iPhoney

iBBDemo2

Windows版ならこれが主流なんですかね。
Safariが入っていないと動かないので、まずはSafariのインストールから。

でもSafariで見たときと、iBBDemo2で見たときでデザインの崩れ具合が結構違う。
iBBDemo2はJavaScriptの動きもちょっとおかしいので、実機でも見る前にチョロっと見る用なのかもしれません。

iBBDemo2 - Cross Platform iPad and iPhone Simulator

SafariでUAを変える

Safariの「開発メニュー」 → 「ユーザーエージェント」からiPhone、iPad、iPod Touchなどを選べるのでいずれかを選択。
これだけでスマホなUAになってくれるので、いろんなスマホサイトを見たい場合はこれが一番便利かもしれませんね。
Webインスペクタで要素のチェックなどもできるので便利！。

iPhone SDKに付いてくるiPhone Simulator.appを使う

iOS Dev Center - Apple Developer
より「Xcode and iOS SDK」をインストールするとiPhoneシミュレーターが付いてくるので、これを起動します。

iPhoneプロジェクトを作ってビルドをすると自動で立ち上がるので、それを使ってもいいんですが毎回ビルドするのも面倒なので、
以下の場所にあるアプリを直接起動します。

/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications/iPhone Simulator.app

ちなみに僕のMacはまだ10.5を使っているので、最新のSDKを入れられません。
ゆえに、iPhoneシミュレーターもちょっと古い？ためか実機とCSSの当たり方が少し違いました。

[via]
iPhoneシミュレーターを試す。Safariがサクサク、日本語入力も可 : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ

Androidシミュレータ

Androidエミュレータのインストール方法

かなり重いが一応Androidのエミュレータ入れたい人向け。
以下の記事を参考にすればできると思います（Mac版）

Android エミューレータで WebKit ウェブブラウザを起動する手順 : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ
Android 2.1 エミュレータのインストール手順 (Nexus One/HTC Desire) : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ

ちなみにこのエミュレータのブラウザから127.0.0.1やlocalhostではローカルのWebサーバーに接続することができない。

実はエミュレータ環境からではエミュレータが「localhost」なので、
自マシンには仮想的なネットワークアドレスが振り分けられているそうな

via: 愛は祈りだ [android]エミュレータからホストPCのサーバーに接続する

なので、「http://10.0.2.2/」や「http://IPアドレス」でアクセスする必要がある。

10.0.2.2 Special alias to your host loopback interface (i.e., 127.0.0.1 on your
development machine)
via: Android Emulator | Android Developers

割と楽に確認できるAndroidシミュレータないですかね？

スマートフォン対応サイトのまとめ

こうゆうふうにまとめてくれてるのは本当にありがたいことですわよ！
何か構想を練りたいときは、以下をダラダラ見てると何か閃くかも。

• スマートフォンサイト集めました。
• iShowcase - 国内のiPhone / iPad最適化対応をしたサイトを集めています
• 参考にしたい優れたiPhone(スマフォ)Webデザイン集 - iPhoneデザインボックス
• iPhoneサイトデザイン集のiPhoneデザインアーカイブ　公式サイト
• ASCII.jp：絶対見ておきたい有名企業のスマホサイトまとめ

スマートフォン向けなJavaScriptライブラリ

• jQuery Mobile | jQuery Mobile
• iui - Project Hosting on Google Code
• Sencha - Mobile JavaScript - Ext JS, Ext GWT and Sencha Touch
• Jo HTML5 Mobile App Framework
• The-M-Project
• [JS]モバイル・タッチデバイス用のアプリケーションを構築するためのJavaScriptのフレームワーク -DHTMLX Touch | コリス
• Wink toolkit - A mobile JavaScript framework to build great webapps

こんだけいろいろとあるとどれが一番いいとかはないとは思いますが、すでにjQueryの知識がある方ならjQuery Mobileが使いやすいと思います。

ホームアイコンをオリジナルなものにする

apple-touch-icon.pngというファイルをサイトのルートに置くか、metaタグへの指定で実現できます。

<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">

大きさは57pixel*57pixelがピッタリサイズなのですが、Yahooやアップルなどは129pixel*129pixel程度に作っておき、高精度のアイコン表示を行っています。なお、角丸やテカリ処理はiPhone側で自動で行ってくれます。

via: WebのスキルでiPad/iPhoneアプリ風のWebアプリ作成のまとめ｜本を買わずに解決するWeb制作の小技

フルスクリーンモードにする

<meta name="apple-mobile-web-app-capable" content="yes">

Webクリップから起動すると「ブックマーク追加」などがあるツールバーを非表示にできます。

またこのタグを指定した場合に、window.onorientationchangeがうまく発生しないという記述が以下のリンクに書いてあるが、iPhone3G（iOS4.2.1）ではうまくfireされた！
画面表示関係 - iPhone 3G DevWiki

さらに以下の記事がちょっと目からウロコだったんですが、Webクリップから起動した際に、aタグで画面遷移しようとするとSafariが起動しちゃう問題に書かれているんですが、これまったくもって知らなかったです。
あと、戻るボタンとかが非表示になっているので、戻るボタン必須だよね！という話もされています。

戻るボタン問題のほうはなんとかするとして、aタグの問題はjQuery Mobileを使っていれば大丈夫だと思います。
jQuery Mobileはaタグのclickイベントにフックして、外部リンクやrel="external"なリンクの場合には、location.href = urlとしてくれているので、Safariが起動しちゃうことはなさそうです。
このlocation.href = urlというところがポイントみたいです。

スマホサイト：Webアプリモードで意外と書かれていない落とし穴 - Kaleidoscope

ステータスバーを黒または半透明にする

<meta name="apple-mobile-web-app-status-bar-style" content="black/black-translucent/default">

Webクリップから起動すると「キャリア表示」などがあるステータスバーを黒または半透明にできます。
指定できるのは以下のいずれか。

• black
• black-translucent
• default

このタグはフルスクリーンモードにするで解説したタグと合わせて使うみたいです。

[via]
画面表示関係 - iPhone 3G DevWiki

URL - 検索バーを消す方法

アドレスバーを消す方法が、window.scrollToでY軸方向に1pxずらすのが主流っぽい。

window.addEventListener('load', function () { setTimeout(doScroll, 100); }, false); // iPhoneを回転させた場合にもステータスバーを消す window.onorientationchange = function() { setTimeout(doScroll, 100); }; function doScroll() { if (window.pageYOffset === 0) { window.scrollTo(0, 1); } }

こんな感じでonload時とonorientationchange時に毎回scrollToしてあげればうまいことアドレスバーが隠れてくれた。
また、jQueryMobileを使うとonload時にscrollToしてくれるが、onorientationchange時にはしてくれてないみたいなので、自分でイベントをセットする必要があるかなー。（jQuery Mobile v1.0a3）

[via]
iPhone Webアプリテンプレート（CSS Nite Vol.40 reprise） | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

数字を電話番号のリンクにしない

iOS 4.2.1

OK

Android 2.1

NG

iPhoneのSafariの挙動で、数字を自動的に判別し電話番号とみなす場合があります。
ただし、これは電話番号だけではなく小数点（3.141592）やIPアドレス（192.168.1.1）なども電話番号とみなして、リンクにしてしまうようなので、これを防ぐために以下のようにmetaタグで無効にしておいて、

<meta name="format-detection" content="telephone=no">

telto:で明示する方法がよさそうです。

<a href="telto:090-1234-1234">090-1234-1234</a>

[via]
ウノウラボ by Zynga Japan: iPhone向けのサイトを作るときのちょっとした気配り

タップされた場所をハイライトする

iOS 4.2.1

OK

Android 2.1

OK

これを使うか使わないかでかなりユーザビリティが変わってくると思います。
タッチしたときに該当リンクをハイライトしてくれるので、誤って他のリンクをタッチしてしまうミスを防ぐ手助けをしてくれます。

-webkit-tap-highlight-color:rgba(255,0,0,0.40);

[via]
ウノウラボ by Zynga Japan: iPhone向けのサイトを作るときのちょっとした気配り

iPhone4の解像度に画像を対応させる

iPhone4はiPhone3GSよりも解像度が2倍のため、等倍の画像がぼやけて表示されていまうことがあります。
これを解決するために、

• 画像を2倍のサイズで作っておいて、半分のwidthとheightで表示する（3GSに重いサイズの画像をダウンロード意味がない）
• 3GSの場合は等倍サイズ、4の場合は2倍のサイズを半分で表示する（CSS3のメディアクエリを使う。ちょっとだめ面倒かな）
• 我慢する

以下のリンクでかなり詳しく書かれているので、どういった方法を採用するかと考える必要がありますね。
小さい画像でしたら等倍でもあんまり気にならないかもしれませんが、少し大きめなバナーの場合はこういった手法を考慮する必要があるかもです。

【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】 | KAYAC DESIGNER'S BLOG - カヤックの意匠部によるデザインやマークアップの話

MobileSafariでposition:fixedがうまく機能しない

どうもiPhoneのSafariでposition:fixedが効かないみたいです。
たしかに、いろんなサイトをiPhoneで見ているとfixedではなく追従やふんわり消してからふんわり表示する方法を採用しているところが多いです。

以下にこの現象のことが書かれていて、
MobileSafariのposition:fixedが厄介すぎる件 - capeknote

• iscroll.js をつかう
• Sencha Touch (Ext.js 有料) をつかう

という案があるそうです。

iScrollはデモを見ればそのすごさが分かりますが、Senchaのほうは試していないのでよくわかっていないです。

個人的には、jQueryMobileの機能で代用するのがいいんじゃないかな〜と思っています。
jQuery Mobile: Demos and Documentation

作りこんでいくと常に検索ボタンを画面に表示したいなどの要望が出てきそうなので、この問題にいずれぶち当たりそうですね。

追記：2011-03-02

YUIを使ったパターンが書かれていました！
またこの記事の紹介もしていただきました。ありがとうございます！
YUIライブラリのScrollViewウィジェットを使ってiPhoneでもposition:fixed;が効いてるっぽく見せる - かちびと.net

スマホサイトはリキッドレイアウトがオススメ！

ラッピング要素をoverflow: hiddenにするとiPhoneはハミ出た部分が無視されますが、Androidだと押し広げてしまうケースがあるようです。
基本的な対応は以下のような感じになるのかな〜と思っています。

• リキッドレイアウトにする
• viewportの指定をwidth=device-widthにする（Androidブラウザでviewportのwidthの数値指定は効かないので）

■参考リンク
スマホサイトの作り方で、あんまり書かれてないことを書いてみた - iPhone・Android・WEB・音楽制作｜Kaleidoscope
Androidにおけるコンテンツフィットと「overflow:hidden」[to-R]

Android2.1でアニメーションgifが再生されない

Android2.1までは内蔵ブラウザでアニメーションGIFが再生できません

via: ブラウザでアニメーションファイル(GIF)をJavaScriptを用いて再生する方法 | GREE Engineers' Blog

とのことで、これをすんごくがんばったのが以下の記事。
アニメーションGifのひとつひとつの画像をバラして、順番に自力でアニメーションさせるというシロモノです。かなりすごい！

ブラウザでアニメーションファイル(GIF)をJavaScriptを用いて再生する方法 | GREE Engineers' Blog

---

jQuery Mobileについて

ではここからjQuery Mobileのお話。

すでにjQuery Mobileの解説はいろんなブログでされているので、基本的なことよりちょっと気になる感じのことを書いてみようかと思います。
何か間違いがあれば、hisasann on twitterで教えていただければ助かります！

format-detectionをtelephone=yes、またはそもそも指定していないのに自動で電話番号にならないケース

<meta name="format-detection" content="telephone=yes">

や、そもそもformat-detectionの指定をしていないのに自動で電話番号にならない場合があります。

jQueryMobileを使っていると画面遷移がAjaxを使ってHTMLを読み込むこと多いと思いますが、
この遷移先のHTMLの中に電話番号っぽい表記があって、それをDomに追加した場合にうまく自動で電話番号リンクにならないようです。
どうやら一番初めの画面描画時だけにこの電話番号自動リンク機能が実行されるようです。

なので、これはちょっとハマるポイントですね。

mobileinitイベント

jQuery Mobile: Demos and Documentation

mobileinitイベントはjQuery Mobileが初期化し、画面の装飾をする前のタイミングでfireされるイベントになります。
なので、文言などを変える場合は、このタイミングになります。

デフォルトBackボタンの文言変更する

$(document).bind("mobileinit", function(){ $.mobile.page.prototype.options.backBtnText = "戻る"; });

か

<div data-role="page" data-back-btn-text="戻る">

デフォルトBackボタンを消す

$(document).bind("mobileinit", function(){ $.mobile.page.prototype.options.addBackBtn = false; });

か

<div data-role="header" data-backbtn="false">

Ajax時の読込中のメッセージを変更する

$(document).bind("mobileinit", function(){ $.mobile.loadingMessage = "読み込み中..."; });

Ajaxでダイナミックにページを読み込んだ場合のimgのsrc先は？

例えば、

index.html
page/page.html
img/1.jpeg

こうゆうフォルダ構成だった場合に、index.htmlからpage/page.htmlをajaxで読み込んでindex.htmlの中にpage/page.htmlのdata-role="page"の部分を挿入するとします。
そしてpage/page.htmlからimg/1.jpegを読み込んでいたとします。

この場合、カレントディレクトリはindex.htmlが置いてあるディレクトリですが、読み込んだpage.html側からすれば「../img/1.jpeg」の場所に画像ファイルがあるんです。
これはなかなかやっかいな問題ですが、jQuery Mobileはそれとなく対応してくれています。

$.mobile.changePageメソッドの中に

if( !$.support.dynamicBaseTag ){ var baseUrl = getBaseURL(fileUrl); to.find('[src],link[href]').each(function(){ var thisAttr = $(this).is('[href]') ? 'href' : 'src', thisUrl = $(this).attr(thisAttr); //if full path exists and is same, chop it - helps IE out thisUrl.replace( location.protocol + '//' + location.host + location.pathname, '' ); if( !/^(\w+:|#|\/)/.test(thisUrl) ){ $(this).attr(thisAttr, baseUrl + thisUrl); } }); }

というコードがあり、baseタグに対応していない場合に各hrefとsrcを書き換えてくれます。
ちなみにFirefox3.6で試してみたらbaseタグに対応していなかったです。

なので、
Webkitの場合は、

<base href="http://localhost/hoge/page/"> <img src="../img/1.jpeg">

Firefoxなどbaseタグに対応していないブラウザの場合は、

<img src="page/../img/1.jpeg">

と書き換えられるようです。

一点問題があるとすれば、htmlコード上にbackgroundで画像を指定した場合にうまいことURIのreplaceが効かないことですかね。
（だから画像の角丸とかを作りたいときに困るかもしれません）

これは今後改善されていくのかな。。。

Android2.1でアニメーションgifが再生されないがAjax時のローディングgifは再生しているじゃないか！について

これは「ajax-loader.png」をCSS3のアニメーションでクルクル回しているだけ。
さすが、jQueryMobile！カシコイ！

該当箇所のCSSはこちらです。

.spin { -webkit-transform: rotate(360deg); -webkit-animation-name: spin; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; } @-webkit-keyframes spin { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} }

まぁ、そうですよね。

■関連リンク
CSS3アニメーションのおさらいとローディングアイコン :: 5509

デザインは独自のを使いたいんだけど、リンクなどは自動的にAjaxで遷移してほしい場合

今後やり方が変わるかもしれませんが、今のところはこれでイケるっぽい。

jQuery MobileのUIはとてもすばらしいですが、これをいろんなサイトで使うとしたらどれもこれも似たようなサイトが出来上がってしまうので、
サイトのデザインは独自にしたい場合にこうゆう方法が必要になってきます。

• data-role="page"を付けておけば、aタグなどは自動的にAjaxによる遷移になります。
• jQuery Mobileに装飾されないようにするために、data-theme="hoge"のようにdata-themeを存在しないものにします。
• input type="text"にdata-role="none"を付けておく。これしないと勝手にかっこよくなっちゃいます。

或いは、必要なCSS意外をjQuery MobileのCSSファイルから削除しちゃうとか。
でもこれだとあとあとデザインもjQuery Mobileのを使いたいという場合にちょっと不便ですね。

$.mobile.changePage()を使ってページ遷移を独自にしたい！

これは意外とこの需要はあるんじゃないかなーと思っています。
jQuery Mobileに出来る限り依存したくないけど、$.mobile.changePage()を使ったページ遷移は非常に使いやすいので
この部分だけを使いたい場合など。
（そもそもjQuery Mobileの主要機能って$.mobile.changePage()ですよね！）

まずは自動でaタグにAjax処理をbindしちゃうので、それをしないようにします。

$(document).bind("mobileinit", function(){ $.mobile.ajaxEnabled = false; });

そして1ページ目の進むボタンと2ページ目の戻るボタンにイベントを貼ります。

$(function() { // 1Page目のイベント $(".changePage").live("click", function() { $.mobile.changePage({ url: "page2.html", type: "post", data: $(this).serialize() }, "slide", false, true, false); }); // 2Page目のイベント $(".reverse").live("click", function() { window.history.back(); }); });

これで進むのほうは、進むトランジションで。
戻るのほうは、ちゃんと戻るトランジションになります。

ハマりやすいのは、2ページ目の戻るイベントを2ページ目のhtml（headとか）に記述しちゃうことです。
2ページ目のdata-role="page"の中に戻るボタンのイベント用のscriptタグを用意すればいいのかもしれませんが（もちろんliveで）、
基本的には1ページ目に2ページ目のボタンのイベントも用意しちゃう感じだと思います。
これみなさんどっちでやってるのかな？

JavaScripから要素を追加した場合に再装飾するにはどうするの？

たとえば独自なAjaxで取得してきたHTMLを画面に追加して、その要素にjQuery Mobileのテーマで装飾して欲しいなんてことがあるとは思うんですが、
こうゆうのは公式デモサイトではサンプルがなくてちょっと困ります。

こちらの内容を参考にしようと思ったんですが、page()というのがどこのpage()なのか分からなかったです。
JQuery Mobile　Alpha2（とちょびっとAlpha3）でサンプルサイト制作練習をした。(1) - いちてく

ボタンの装飾

$("<a>", { href: "#", "data-role": "button" }) .html("追加されたよ") .appendTo($("#append-wrap")) .buttonMarkup();

リストの装飾

$( "<ul>", { "role": "listview", "data-inset": "true" }) .append("<li>foo</li>") .appendTo($("#list-wrapper")) .listview();

これはliだけをDomに追加して、ulのlistview()を実行してもダメでした。
ul本体から作り直せばうまいこといきました。

なんとなくこのへんのメソッドの感じから言うと、画面ロード後にHTML要素を追加することをあんまり想定していない？んですかね。。。
結構分かりづらいです。

追記：2011-03-01

HTML5に詳しい吉川さんにTwitterで教えていただきました。
Twitter / @Toru Yoshikawa: @hisasann ブログのほう面白く拝見させて頂き ...

page()というのは、$('#page-id').page()のように呼ぶみたいで、
jQuery Mobileのセレクトボックスを作る$.mobile.selectmenuの中でダイアログを装飾するところで使用されていました。

使い方は、以下のようにまずはHTML文字列を作成して、どこか画面にappendし、page()を実行すれば装飾されるようになります。

$(["<section data-theme='e'>", "<article data-role='content'>", "<h2>foo</h2>", "<ul data-role='listview' role='listbox' data-inset='true'>", "<li>hoge</li>", "<li>bar</li>", "</ul>", "</article>", "</section>"].join("")) .appendTo($("#html-wrapper")) .page();

また、↑のほうで、Listはulから作らないとうまく再構築できないと記載していましたが、

$("#listbox") .append("<li>foo</li>") .listview('refresh');

のようにliを追加した後にlistview('refresh')を実行したらうまく再構築されました。
ただ、Listに1つしか要素がない状態で上記コードを実行すると、角丸のところがまだちょっと変な感じになりました。
このあたりは今後のバージョンアップで改善されていくんでしょうね。

なので、

• Listだけの装飾であれば、listview('refresh')
• HTML文字列を装飾するのであれば、$("<div>なにかしら</div>").page()
• Buttonだけの装飾であれば、buttonMarkup()

という感じですかね。
まぁ、面倒だからどのパターンでもpage()を使いそうですがｗ

追記：2011-03-11

コントロール要素の強化（enhanceControls）をしたくない場合

jQuery Mobileは使うんだけど、

• 勝手にテキストボックスやセレクトボックスなどのコントロール要素の装飾をしたくない。やめてっ！

という場合があったりします。

これは、たとえ

<section data-role="page" data-theme="hogefoobar">

のように存在しないdata-themeを指定してもコントロール要素は装飾されてしまいます。

こうゆうときにv1.0a2バージョンまでは$.page._createで行われる_enhanceControlsメソッドの呼び出しをコメントアウトするしかなかったんですが（多分！）、v1.0a3からは$.mobile.page.prototype.options.keepNativeという「なんにも装飾しないでねセレクター」プロパティが追加されています。

使い方は

$(document).bind("mobileinit", function(){ $.mobile.page.prototype.options.keepNative = ".data-role-none"; });

か

<section data-role="page" data-theme="e" data-keep-native=".data-role-none" >

でkeepNativeとしてのセレクターを指定しておきます。

あとは、各コントロール要素にclassでdata-role-noneを追加すればOK！

<input type="text" placeholder="例） やまだ たろう" class="data-role-none"> <input type="radio" value="choice-1" checked="checked" class="data-role-none"> <input type="checkbox" value="checkbox-1" class="data-role-none"> <select name="birthdayData.year" class="data-role-none">

これ地味に便利！じゃあの。

スマートフォン参考書籍

僕はこちらの本を読まさせていただきました！

ひと通りのスマートフォンサイト構築のお作法や、CSS3を使ったデザインの仕方など、かなり詳しく書かれています。
これで2,310円はけっこう安いですね。

まとめ

今後に期待しまくりなjQuery MobileのちょっとしたTipsを書いてみましたが、まだ分からないことがいっぱいあるので、
今後この記事に追記していこうと思っております。

また、以下にとりあえず目を通しておいたほうがよいと思った記事をリストアップしました。

• jQuery Mobileを使ってみた | blog.wonder-boys.net
• jQuery Mobileの使い方と挙動のまとめ その１ - アークウェブシステム開発SandBox
• 「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる － Publickey
• jQuery Mobile [基礎編]
• jQuery Mobileで「iPhoneで出会い系」紹介サイトを作ってみた - ゆーすけべー日記
• jQuery Mobile: Demos and Documentation（日本語版）
• Introduction to jQuery Mobile
• jQuery Mobile使用時によく使いそうなマークアップのリストと動作サンプル - かちびと.net
• 最近気になってきたjQueryについて色々調べてみました - もとまか日記

Beta版まだかなー！！

去年の年末に自宅のMacbookProを新しくしたので、そのときに行った作業やらインストールしたアプリやらをメモがてらに記事にしておきます。

キーバインド

システム環境設定のキーボードの修飾キーから「CapsLockキー」を「Controlキー」に変更。
（Shiftキーの上にCtrlキーがあるのが慣れていないため。。。）

Firefox

次世代ブラウザ Firefox - 高速・安全・カスタマイズ自在な無料ブラウザ

Mac版のFirefoxは、デフォルトでブックマークツールバーにfaviconが表示されないので、これを表示するようにCSSを修正する。

「~/Library/Application Support/Firefox/Profiles/********.default/chrome/」
の下にあるuserChrome-example.cssをuserChrome.cssにリネームして以下を記述する

toolbarbutton.bookmark-item:not([container="true"]) > .toolbarbutton-icon {
padding: 0px !important;
margin: 0px !important;
width: 16px;
height: 16px;
display: inline !important;
}

検索時にタブを新規に開くように以下の設定をする
about:configでbrowser.search.openintabの設定をtrueにする

[via]
Mozilla Re-Mix: Googleの検索結果ページを新しいタブで開く小技。

毎回必ず入れるアドオンたち。
Greasemonkey :: Add-ons for Firefox
AutoPagerize for Greasemonkey
Firebug :: Add-ons for Firefox
Hatena Bookmark :: Add-ons for Firefox

上記意外は少しづつ追加してく。

Opera

Opera ブラウザ | 高速で安全なインターネット | 無料ダウンロード

デザインのチェック用。

Google Chrome

Google Chrome - 新しい高速ブラウザを Windows、Mac、Linux でお試しください。

ネット巡回にはやっぱりChromeが最適。
でも職場のMac10.5だと起動がすごく重いんだよな〜。10.6のほうはとくに重さを感じないんですが。

夜フクロウ

YoruFukurou

個人的に一番使いやすいMac用Twitterクライアント。

TextMate

TextMate -- The Missing Editor for Mac OS X

日本語に対応させるには以下を参照
Railsに最適なテキストエディター「TextMate」を入れて日本語化してみた

ThemeColorはMonokai » Blog Archive » Textmate color themeが好きなのでダウンロード。
ダウンロードしたtmThemeファイルを「/Applications/TextMate.app/Contents/SharedSupport/Themes/」にコピーする。

Quicksilver

Quicksilver (Mac) - Download
もう言わずと知れたMacのランチャー。

ログイン時に起動するようにしとく。

あと念のため暴走しないように、Quicksilverが表示されるときのエフェクトを無効にしておく。
10.5のときに、Quicksilverがちょいちょい暴走しちゃって痛い目にあったもので。
QuickSilverの暴走を止める方法 - Lejayの日記

過去にこんなこともしてました。
Command+EでMacのFinderを開くようにしてみた

SIMBL

SIMBL

Visorのため。

Visor

Visor is a system-wide terminal accessible via a hot-key

「~/Library/Application Support/SIMBL/Plugins」に入れるんですが、たぶんSIMBL以下のディレクトリがないので、自分で作成する。
このツールは、Terminalを起動するとVisorがフックしてかっこよく起動してくれるので便利です。

今回2.2を入れてみたんですが、ホットキーの設定ができない？
1.2の時代はホットキーが使えたので、適当なショートカットを割り当てたんですが、今回はなんかそのへんがうまくいかなかったので、Ctrlキーを2回押したら起動するにチェックを入れてみた。

VLC

VideoLAN - VLC media player - Open Source Multimedia Framework and Player

flvでもaviでもなんでもござれなプレイヤー。
これなしでは生きていけないよ。

MacVim

macvim-kaoriya - Project Hosting on Google Code

僕はまったくもってVimを使いこなせないんですが、かっこつけて入れてます。

Skype

Skype 2.8 for Mac OS X - 最新バージョンのSkypeをダウンロードして、コンピュータ同士の無料通話を利用しよう

MacbookProは初めからマイクが内蔵されているので、Skypeを起動すればすぐに誰かと通話することができます。
しかも音質もすばらしい！

Skitch

welcome | skitch.com

画像に文章入れたり矢印引っ張ったりするのがすごく使いやすい。
前は記事用の画像の加工もこのアプリでやってました。

Google 日本語入力

Google 日本語入力 - ダウンロード

このツールのお陰で記事作成がほんと楽になりました。
しかも無料！

Dropbox

Dropbox - Home - Online backup, file sync and sharing made easy.

実質、僕はそんなに使いこなせていないんですが、自分の「ちょいプログラム」はすべてここに保存しておいて、職場と自宅のMacで同期させています。

iTunes

旧Macの「/Users/XXXX/Music/」の下にあるiTunesのファイルを外付けHDDに対比して、
新Macの同ディレクトリにコピー。
これでiTunesの移行は終わり。

iPhoto

旧Macの「/Users/XXXX/Pictures/」の下にあるiPhoto LibraryとPhoto Boothを外付けHDDに対比して、
新Macの同ディレクトリにコピー。
これでiPhotoの移行は終わり。

Growl

Growl

通知よろしくお願いいたします。

Cyberduck

Cyberduck | FTP、SFTP、WebDAV、Cloud Files、Google Docs、S3用ブラウザ、MacとWindowsに対応 | Cyberduckについて

Mac版のFTPアプリとしては最もメジャーですかね。
でもロリポップへのアクセスの調子が悪いので、Fetchというのも使い始めてみたんですが、こちら有料なんですよね。。。

Adium

Adium - Download

MSNメッセンジャーとかJabberとか。

iAntiVirus

パワフルなウィルス除去ソフト『iAntiVirus』 | Macの手書き説明書

常に監視してくれてるのはいいんですが、ちょっと重いです。

もし常に監視する必要がなくて、定期的にウィルスがあるかどうかをチェックするぐらいでOKでしたら

ClamXavがよいかもしれません。

必ず入れておきたいMac用アンチウイルスソフト「ClamXav」 - sorarium

Witch

Witch · Many Tricks

一応入れてますが、最近はこのツールが活躍することはあまりありません。
画面の左上か右上にマウスを持って行くと、Exposeするように設定してあるのでそんなに困らないです。

iStat Menus

iStat Menus, a Mac app by Bjango
普通に使っていたら、いつのまにか試用期間が終わって使えなくなってしまった。
前のバージョンは無料だったので、少しショック・・・

そしてTwitterでなんかよさげなのがないか聞いてみたら、MenuMetersを教えていただいたのでさっそく使ってます。
これかなりステキです！
MenuMeters

[via]
Twitter / @アントニオ猪木談: @hisasann ご存知かもしれませんがMenuM ...
Twitter / @数多世界: @hisasann 代替としてMenuMetersっ ...

Macports

付属のDVDからXcodeをインストールしておく。

んでIndex of /MacPortsから最新版をダウンロードしてインストールする。

以下のコマンドでMacPorts自体をアップデートし、取得できるパッケージ一覧を更新する。

sudo port -d selfupdate
sudo port -d sync

git

Macportsを入れた後に以下のコマンドを実行。

sudo port install git-core +gitweb +svn

hikariworks::blog » MacPortsでgitをインストール
他に必要なモジュールをインストールするのにかなり時間が掛かる。

tigを入れとくとgitのブラウズが楽になるかもしれません。
gitをブラウズするのに最適な「tig」をMacportsから入れてみた

Simple Calendar 2

アップル - ダウンロード - Dashboard ウィジェット - Simple Calendar 2

祝日がわかるダッシュボード用カレンダー。
あれ？今週祝日あったっけ？というときにすごく使えます。

■関連記事
・新しいMacbook Proにインストールしたものメモ

■関連リンク
・ターミナルのウィンドウををバイザーっぽくする「Visor」 -- MacSheep

HTML5 Pure CSS Lightboxを見てて、そういえばどうやってやってるか知らないな〜と思い自分なりに簡略化したデモページを作ってみました。
なるべく必要なスタイルだけを使うするようにしています。

CSS3の部

アニメーションは-webkit-animationを使っています。

/* Lightboxの枠 */ .lightbox { height: 100%; width: 100%; background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; z-index: 1000; display: none; -webkit-animation-name: fade; -webkit-animation-duration: 0.50s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-timing-function: ease-in; } /* Lightbox全体を覆うアンカー */ .lightbox a { display: table-cell; vertical-align: middle; text-align: center; } /* アンカーの中にいるimg要素 */ .lightbox img { -moz-box-shadow: 0 0 15px #444444; background-color: #FFFFFF; padding: 5px 5px 45px; -webkit-animation-name: grow; -webkit-animation-duration: 0.50s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-timing-function: ease-out; } /* アンカーの中にいる文字を表示する要素 */ .lightbox p { -moz-box-shadow: 0 0 15px #444444; background-color: #FFFFFF; color: #000000; font: bold 15px Helvetica,Arial,Sans-serif; text-shadow: 0 2px 6px #333333; padding: 5px 5px 45px; position: absolute; left: 50%; top: 50%; margin-left: -30%; margin-top: -200px; width: 60%; height: 400px; -webkit-animation-name: grow2; -webkit-animation-duration: 0.50s; -webkit-animation-iteration-count: 1; -webkit-animation-direction: normal; -webkit-animation-timing-function: ease-in; } /* lightboxがフラグメントID経由でアクティブになった場合に、ここのスタイルが適用される */ .lightbox:target { display: table; } /* keyframes */ @-webkit-keyframes fade { from {opacity: 0;} to {opacity: 1;} } @-webkit-keyframes grow { from {height: 0px;} to {height: 300px;} } @-webkit-keyframes grow2 { from {height: 0px;} to {height: 400px;} }

HTML5の部

Sample1〜Sample4までが画像で、Sample5がテキストになっています。

<!-- header --> <header> <h1>CSS3 Lightbox Sample</h1> <p> 詳細はソースを見てくださいね。<br> Webkit(Safari, Chrome)でクリックするとアニメーションがもれなく付いてきます。 </p> </header> <!-- anchor --> <section id="content"> <p><a href="#sample1">Sample1</a></p> <p><a href="#sample2">Sample2</a></p> <p><a href="#sample3">Sample3</a></p> <p><a href="#sample4">Sample4</a></p> <p><a href="#sample5">Sample5</a></p> </section> <!-- lightbox --> <section> <article id="sample1" class="lightbox"> <a href="#close"> <img src="1.jpg"> </a> </article> <article id="sample2" class="lightbox"> <a href="#close"> <img src="2.jpg"> </a> </article> <article id="sample3" class="lightbox"> <a href="#close"> <img src="3.jpg"> </a> </article> <article id="sample4" class="lightbox"> <a href="#close"> <img src="4.jpg"> </a> </article> <article id="sample5" class="lightbox"> <a href="#close"> <p> ほげほげ<br>ほげほげ </p> </a> </article> </section> <!-- footer --> <footer> <p>Created by <a href="http://hisasann.com/" target="_blank">hisasann.com</a></p> </footer>

デモサイト

WebkitやGoogle Chromeで見るともれなくアニメーション機能が付いてきます。
CSS3 Lightbox Sample

また、HTML5のタグは以下のリンクを参考にさせていただきました。（すごく見やすい！）
ありがとうございます！
HTML5リファレンス

■関連リンク
animation-timing-function－CSS3リファレンス
animation-direction－CSS3リファレンス