HouseTect, JavaScriptな情報をあなたに

Vimをちゃんと使い始めてみる

Sun, 29 Jan 2012 15:23:14 +0900

僕が大好きな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ライフが大きく左右されるんだろうなー。を.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

hisasann/vimrc - GitHub さぁて、Vimライフをおくりはじめますか！追伸：WindowsではPeggyというエディターをよく使っております！ ■関連リンク・vimに欠かせない３つのプラグイン | tech.kayac.com - KAYAC engineers' blog ・Vim初心者的導入メモ 2/3 「vimrc設定」編 - ナレッジエース・vimrcを晒してみる - Archiva ・ぼちぼち散歩おれの.vimrc

Vimテクニックバイブル　～作業効率をカイゼンする150の技

posted with amazlet at 12.01.29

Vimサポーターズ
技術評論社
売り上げランキング: 43182

Amazon.co.jp で詳細を見る

さくらVPSでnginxをインストールしたときのメモ

Fri, 27 Jan 2012 02:09:48 +0900

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

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) ::ハブろぐからごっそり参考にさせていただいた！

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

apacheのhttpd.confの編集

リバースプロキシを導入する際は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

ハイパフォーマンスHTTPサーバ Nginx入門

posted with amazlet at 12.01.27

Clement Nedelcu
アスキー・メディアワークス
売り上げランキング: 14072

Amazon.co.jp で詳細を見る

書評 - jQuery Mobileポケットリファレンス

Fri, 27 Jan 2012 00:04:18 +0900

jQuery Mobile ポケットリファレンス

posted with amazlet at 12.01.27

森直彦
技術評論社
売り上げランキング: 6309

Amazon.co.jp で詳細を見る

技術評論社より献本いただきました。ありがとうございます！そして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を使ってのスマートフォンサイトの構築メモ

iDance - Thank you Steve.

Fri, 07 Oct 2011 10:53:51 +0900

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

Steve Jobs

posted with amazlet at 12.01.27

Walter Isaacson
Simon & Schuster (2011-10-24)
売り上げランキング: 3

Amazon.co.jp で詳細を見る

さくらVPSにApacheをインストールする方法

Fri, 29 Jul 2011 02:34:59 +0900

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

楽チン！

[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コマンドによる自動起動の設定

さくらVPSを使うときの初期設定メモ

Fri, 29 Jul 2011 02:29:54 +0900

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

何はともあれ接続する

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

[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

jQueryMobileのXSSに関する調査メモ

Mon, 27 Jun 2011 15:33:44 +0900

今回の原因

#1789: jQuery Mobile XSS Problem by jnlin for jquery/jquery-mobile - Pull Request - GitHubに書かれているXSSが今回の内容。これは以下のようなhash値をjQueryMobile側のhashchangeイベントがキャッチし、 $()関数にhash値を渡すところで発生するよう。 jQueryMobileの2488行目あたりの以下のコードがそれ。このコードは2360行あたりにも存在する。そして今回の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のほうでは、がなくなっており、hash値にimgタグを渡しても発生しない。 ■1.0b1 jQuery Mobile: Demos and Documentation

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

#9521 (XSS with $(location.hash) and $(#) is needed?) - jQuery Core - Bug Tracker ここに書いてある解決策である、はうまくいかなかった。これはコメント欄を読むと分かるが、「$("anychar")」こうゆうパターンのときにダメのよう。（何か他にも修正箇所が必要なのだろうか...）

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用

jquery1.4.2時代のquickExpr用

jquery1.5時代のquickExpr用

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

jQueryMobileのかゆいところに手が届くお作法メモ

Mon, 20 Jun 2011 17:18:34 +0900

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

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

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

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

pagebeforecreate
pagecreate
pagebeforeshow
pageshow

Ajaxページ遷移時の順番

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

pagebeforecreate
pagecreate
pagebeforehide
pagebeforeshow
pagehide
pageshow

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

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

mobileinitイベント内で、$.mobile.ajaxEnabledにfalseをセットしています。これが重要で、この設定をしておけばリンククリック時に勝手にAjaxページ遷移がされないようになります。あとはクリック時に$.mobile.changePageを呼んであげるだけですが、第4引数をtrueにしときます。これでhash値が書き換えられるので履歴に残るようになります。「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つのページを読み込むだけという状態になります。デモを触っていただくと分かりますが、getのときは画面遷移をするとページ数がどんどん増えていきましたが、postのパターンだと常に2個です。 2個というのは、初期に表示したページと次に読み込んだページの2つという意味です。パーマリンクとしてhash値にパラメータをちゃんと持たせたいという場合には向きませんが、とくにそういった重要性がない場合はpostを考慮してみるのも一つの方法かもしれません。 ■デモ $.mobile.changePageを独自に呼ぶ（post）

HTML装飾をjqmにさせない

まずはdata-role="page"のタグのdata-themeに適当な文字を入れておきます。つまりthemeとしては存在しない文字列になります。これだけだと、コントロール系の要素は勝手に装飾されてしまうので、以下のようにkeepNativeにCSSセレクターを指定しておきます。以後はこのセレクターをclassに指定した要素は装飾されないようになります。 ■デモ HTML装飾をjqmにさせない

page()でHTMLの装飾

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

buttonMarkup()でボタンの装飾

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

listview()でリストの装飾

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

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

この需要は意外とあるんじゃないカナーと思うのですが、たとえば詳細ページから写真の一覧を表示したいけど、hash値を変えるとブラウザバック時に写真一覧に戻っちゃうからヤダッ！というケース。 Ajaxページ遷移で読み込んだページの戻るボタンは、jqmのものではなく独自の挙動にしたいので$.mobile.page.prototype.options.addBackBtnをfalseにしときます。遷移元ページの進むと遷移先ページの戻るは同じchangePageを呼び出しますが、戻るのほうは新たにAjaxページ遷移するのではなくすでに画面にロードされているPageに戻ればよいので第1引数にはid（data-url）を指定します。さらにトランジションとしては戻るアニメーションをしてほしいので、第3引数はtrueをセットしています。そして第5引数にtrueをセットして、hash値が変わって呼ばれたということにします。この引数は確かjQueryMobileのアルファ4からいつの間にか追加されててjQuery Mobile Docs - Methodsにも書かれていません。遷移元となるページのdata-role="page"のタグにはidを指定しておきます。このidが戻るときのchangePageのtoになります。 ■デモ URLを変えずにAjaxページ遷移＋戻る

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

以下のようにするだけです。 ■デモ hashChangeイベントを自分で監視したい

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

jqmはチェックボックスやラジオボタンを自動的に装飾してくれますが、そういった処理を自分オリジナルに作ることができます。以下の例ではHTML要素に対してmarquee()というメソッドを呼ぶとその中にmarqueeタグが挿入されるだけのサンプルになります。 jqmの装飾する処理はDom構築が終わったタイミングで$.mobile.page内から呼ばれる_enhanceControlsメソッドにより行われますが、独自に作ったwidgetは呼ばれないので、readyになったタイミングで呼んであげる必要があります。（当たり前ですね）そしてmarqueeの値を変更したあとにmarquee("refresh")を呼んでいますが、↑のほうで見たことがある記述ですね。そう！listview('refresh')と同じですね。こうゆう感じでwidget化しとくとrefreshするだけで再装飾されるので便利かもしれません。 ■デモ $.mobile.widgetでカスタムな要素を作る

$.mobileの拡張

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

僕のmobileinitイベント

最後に今僕が使っているmobileinitイベントの内容をご紹介。といってもベタな感じではありますが。個人的にひとつ重要なのが、$.fixedToolbars.setTouchToggleEnabled(false)です。これは、headerやらfooterをfixedにした場合に画面内のどこかをタップするとfixedな要素が消えてしまうのを防ぎます。多分ですが、スマホサイトでよく見るfixedな要素は広告が多く、これが常に追従してくるのはさすがにちょっとという人のためにfixedな要素を消すためにあるのかなーなんて思ってたりします。（違うか！）広告でしたらサイト訪問者がどこかをタップしてfixedな要素を消すのはよいとは思うのですが、サイトとして重要な要素の場合はタップしようが何しようがfixedでいて欲しいと思うので、このプロパティはfalseにしとくのがよいかと思っています。

まとめ

これらのデモはjQueryMobileのかゆいところに手が届くお作法メモから参照いただけます。まだまだアルファ版なので仕様がどう変わるか分かりませんが、現時点でのjQueryMobileの完成度としては結構よいのではないかと思っています。またそもそもデザインも何から何までjQueryMobileに依存するサイト製作は今後あまり浸透せず、イベント回りはjQueryMobile使うけどデザインは独自とかある程度関係性は疎結合として使われていくんじゃないかなーと。いずれテーマをjQueryMobileのサイト上で作れるようになるとデザインの幅がグッと広がるので楽しみです！これらのTipsがjQueryMobileを使うの人たち助けになれば幸いです。 ■追伸： vclickイベントって何もんなんだろう・・・ ■関連記事・jQueryMobileを使ってのスマートフォンサイトの構築メモ

iPhone+Android スマートフォンサイト制作入門 (WEB PROFESSIONAL)

posted with amazlet at 11.06.20

たにぐちまこと
アスキー・メディアワークス
売り上げランキング: 784

Amazon.co.jp で詳細を見る

jQueryMobileを使ってのスマートフォンサイトの構築メモ

Mon, 28 Feb 2011 13:10:14 +0900

徐々に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シミュレータないですかね？

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

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

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

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

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

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

大きさは57pixel*57pixelがピッタリサイズなのですが、Yahooやアップルなどは129pixel*129pixel程度に作っておき、高精度のアイコン表示を行っています。なお、角丸やテカリ処理はiPhone側で自動で行ってくれます。
via: WebのスキルでiPad/iPhoneアプリ風のWebアプリ作成のまとめ｜本を買わずに解決するWeb制作の小技

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

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

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

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

black
black-translucent
default

このタグはフルスクリーンモードにするで解説したタグと合わせて使うみたいです。 [via] 画面表示関係 - iPhone 3G DevWiki

URL - 検索バーを消す方法

アドレスバーを消す方法が、window.scrollToでY軸方向に1pxずらすのが主流っぽい。こんな感じで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タグで無効にしておいて、 telto:で明示する方法がよさそうです。 [via] ウノウラボ by Zynga Japan: iPhone向けのサイトを作るときのちょっとした気配り

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

iOS 4.2.1: OK
Android 2.1: OK

これを使うか使わないかでかなりユーザビリティが変わってくると思います。タッチしたときに該当リンクをハイライトしてくれるので、誤って他のリンクをタッチしてしまうミスを防ぐ手助けをしてくれます。 [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、またはそもそも指定していないのに自動で電話番号にならないケース

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

mobileinitイベント

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

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

か

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

か

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

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メソッドの中にというコードがあり、baseタグに対応していない場合に各hrefとsrcを書き換えてくれます。ちなみにFirefox3.6で試してみたらbaseタグに対応していなかったです。なので、 Webkitの場合は、 Firefoxなどbaseタグに対応していないブラウザの場合は、と書き換えられるようです。一点問題があるとすれば、htmlコード上にbackgroundで画像を指定した場合にうまいことURIのreplaceが効かないことですかね。（だから画像の角丸とかを作りたいときに困るかもしれません）これは今後改善されていくのかな。。。

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

これは「ajax-loader.png」をCSS3のアニメーションでクルクル回しているだけ。さすが、jQueryMobile！カシコイ！該当箇所のCSSはこちらです。まぁ、そうですよね。 ■関連リンク 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しちゃうので、それをしないようにします。そして1ページ目の進むボタンと2ページ目の戻るボタンにイベントを貼ります。これで進むのほうは、進むトランジションで。戻るのほうは、ちゃんと戻るトランジションになります。ハマりやすいのは、2ページ目の戻るイベントを2ページ目のhtml（headとか）に記述しちゃうことです。 2ページ目のdata-role="page"の中に戻るボタンのイベント用のscriptタグを用意すればいいのかもしれませんが（もちろんliveで）、基本的には1ページ目に2ページ目のボタンのイベントも用意しちゃう感じだと思います。これみなさんどっちでやってるのかな？

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

たとえば独自なAjaxで取得してきたHTMLを画面に追加して、その要素にjQuery Mobileのテーマで装飾して欲しいなんてことがあるとは思うんですが、こうゆうのは公式デモサイトではサンプルがなくてちょっと困ります。こちらの内容を参考にしようと思ったんですが、page()というのがどこのpage()なのか分からなかったです。 JQuery Mobile　Alpha2（とちょびっとAlpha3）でサンプルサイト制作練習をした。(1) - いちてく ボタンの装飾 リストの装飾 これは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()を実行すれば装飾されるようになります。また、↑のほうで、Listはulから作らないとうまく再構築できないと記載していましたが、のようにliを追加した後にlistview('refresh')を実行したらうまく再構築されました。ただ、Listに1つしか要素がない状態で上記コードを実行すると、角丸のところがまだちょっと変な感じになりました。このあたりは今後のバージョンアップで改善されていくんでしょうね。なので、

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

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

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

jQuery Mobileは使うんだけど、

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

という場合があったりします。これは、たとえのように存在しないdata-themeを指定してもコントロール要素は装飾されてしまいます。こうゆうときにv1.0a2バージョンまでは$.page._createで行われる_enhanceControlsメソッドの呼び出しをコメントアウトするしかなかったんですが（多分！）、v1.0a3からは$.mobile.page.prototype.options.keepNativeという「なんにも装飾しないでねセレクター」プロパティが追加されています。使い方はかでkeepNativeとしてのセレクターを指定しておきます。あとは、各コントロール要素にclassでdata-role-noneを追加すればOK！これ地味に便利！じゃあの。

スマートフォン参考書籍

HTML5＋CSS3で作る魅せるiPhoneサイト iPhone/iPad/iPod touch対応

posted with amazlet at 11.02.26

谷拓樹
ラトルズ
売り上げランキング: 945

Amazon.co.jp で詳細を見る

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

まとめ

今後に期待しまくりなjQuery MobileのちょっとしたTipsを書いてみましたが、まだ分からないことがいっぱいあるので、今後この記事に追記していこうと思っております。また、以下にとりあえず目を通しておいたほうがよいと思った記事をリストアップしました。

Beta版まだかなー！！

新しいMacbook Proにインストールしたものメモ Part2

Fri, 21 Jan 2011 20:16:55 +0900

去年の年末に自宅の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とCSS3だけでLightbox - Pure CSS3, no javascript!!

Wed, 15 Dec 2010 13:17:10 +0900

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>
	<h1>CSS3 Lightbox Sample</h1>
	<p>
		詳細はソースを見てくださいね。<br>
		Webkit(Safari, Chrome)でクリックするとアニメーションがもれなく付いてきます。
	</p>
</header>

<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>

<section>
	<article id="sample1" class="lightbox">
		<a href="#close">
			
		</a>
	</article>
	<article id="sample2" class="lightbox">
		<a href="#close">
			
		</a>
	</article>
	<article id="sample3" class="lightbox">
		<a href="#close">
			
		</a>
	</article>
	<article id="sample4" class="lightbox">
		<a href="#close">
			
		</a>
	</article>
	<article id="sample5" class="lightbox">
		<a href="#close">
			<p>
				ほげほげ<br>ほげほげ
			</p>
		</a>
	</article>
</section>

<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リファレンス

gitをブラウズするのに最適な「tig」をMacportsから入れてみた

Mon, 22 Nov 2010 15:40:27 +0900

コンソールから使える git ブラウザ、tig が超便利 - って、なんでですか〜 - subtechを読んで、普段あんまりgitでソースを管理していないんですが、gitのログがかっこよく閲覧できそうなので試しにtigをインストールしてみました。んで、Macportsにあるかな〜と思って探してみたら、

$ sudo port search tig tig @0.16.2 (devel) A text interface to git repositories

あるじゃない！あるじゃない！ということなので、

$ sudo port install tig

ってやってみたら、以下のようにエラーが出ていっこうに進みません。（多分このエラーはそうそう起きるものではないとは思います）

$ sudo port install tig ---> Computing dependencies for tig ---> Dependencies to be installed: git-core curl curl-ca-bundle p5-error python26 gdbm rsync popt ---> Verifying checksum(s) for curl-ca-bundle Error: Target org.macports.checksum returned: certdata-1.67.txt does not exist in /opt/local/var/macports/distfiles/curl Error: Failed to install curl-ca-bundle Log for curl-ca-bundle is at: /opt/local/var/macports/logs/_opt_local_var_macports_sources_rsync.macports.org_release_ports_net_curl-ca-bundle/main.log Error: The following dependencies were not installed: git-core curl curl-ca-bundle p5-error python26 gdbm rsync popt Error: Status 1 encountered during processing. To report a bug, see

そもそもgitはMacportsから入れていないので、そのあたりかなと思いgitのインストールを試みても同じエラーがでる。んで以下の記事を参考にしていたらcleanというコマンドを発見！ setup_osx.wiki - bear-project - Project Hosting on Google Code MacPortsでインストールするときにChecksumエラーが出る場合の対処方法 - yinkywebの日記おりゃ！！

$ sudo port clean curl-ca-bundle

結果、すんなりtigのインストールに成功しました！でもまだgitのパスがまだ古いほう（Macportsで入れてないほう）を見に行ってしまうので、 /etc/paths.dディレクトリ内にあるgitファイルの中身を書き換えました。

vim /etc/paths.d/git /opt/local/bin/git

これに関しては、以下の記事がなかったら、分からなかったよ。最近のMac OSXで、PATHをスマート(?)に管理するやり方。 - こせきの技術日記 Mac OS X に於ける Path の追加方法 : Sadayuki の Blog これでようやく

$ git --version git version 1.7.3.2

と最新のgitを見に行ってくれるようになりました！ tigを使うにはgitで管理しているディレクトリに移動して、tigコマンドを実行するだけ。

$ cd /hoge/code/ $ tig

あとは適当にタイプしていけば慣れてくるのかな？いろいろ試してみたいと思いますっ！

k: Move cursor one line up
j: Move cursor one line down.
m: Switch to main view.
Tab: Switch to next view.

[via] The tig Manual 操作方法についてはこちらの記事がすごい参考になります！ CUI な Git ブラウザ tig を入れてみた - Born Too Late ■gitの関連記事・せっかちな人のための git 入門 - git をインストールし、共同で開発できる環境を整えるまで : 僕は発展途上技術者・Git入門ゼロから始めるGitドリル-エンジニアは空を飛ぶ

入門git

posted with amazlet at 12.01.27

Travis Swicegood
オーム社
売り上げランキング: 24084

Amazon.co.jp で詳細を見る

XMLHttpRequest level2に対応しているブラウザまとめ

Tue, 16 Nov 2010 13:23:56 +0900

XMLHttpRequest（Ajax）はもともとは他のドメインへのリクエストは出来なかったのですが、結構前2009年の8月ぐらいにW3Cのドラフトが出てそれ以来各ブラウザが搭載し始めているのが現状。 XMLHttpRequest Level 2 とりあえず対応しているブラウザをちょっと調べてみましたので、メモメモー！今回は僕が使っている2つのドメインをサンプルとして使っています。もし、ためされる場合は適宜ご自分のドメインに読み替えてください。

.htaccess

まず「http://lab.hisasann.com/XHR2/」の配下に「.htaccess」ファイルを用意して、

Header append Access-Control-Allow-Origin: *

と書いておきます。これでどこからXMLHttpRequestでアクセスしてきてもOKだよ〜という意味になります。（ローカルファイルからでもOKです）それだとちょっと実験としては面白くなかったので、以下の別のドメイン「http://hisasann.sakura.ne.jp」からのアクセスだけを許容するように設定してみました。

Header append Access-Control-Allow-Origin: http://hisasann.sakura.ne.jp

つまり http://hisasann.sakura.ne.jpからhttp://lab.hisasann.com/XHR2/に対してXMLHttpRequestでアクセスするという感じになります。

json.json（サンプル用json）

先ほどの.htaccessと同じディレクトリにjson.jsonというサンプル用のjsonを置いておきました。

{ "test": "ほげほげ" }

XMLHttpRequestのサンプルコード

どうもIE8だけはXMLHttpRequestではなく、独自のXDomainRequestというのを使わないといけないみたい。

各ブラウザの対応表（2010-11-16現在）

以下のURLに各ブラウザでアクセスしてみました。 http://hisasann.sakura.ne.jp/XMLHttpRequest2.html その結果が以下の表です。結構対応しているんですよね！！

Mac

Firefox3.6.12: OK
Safari5.0: OK
Chrome 7.0: OK
Opera10.10: NG

Windows

Firefox3.5.9: OK
Safari5.0: OK
Chrome 7.0: OK
Opera10.10: NG
IE8: OK
IE7: NG
IE6: NG

ちなみにIE8でブラウザモードをIE7にしても、XMLHttpRequestでアクセスできちゃうのねんっ！ IETesterのIE7でアクセスしたらちゃんとアクセスが拒否されました。 ■関連記事・XML Http Request Level2 の噂を聞いたので調べてみた・XMLHttpRequest Level 2 と wedata バックアップ - 0xFF

各ブラウザのオートコンプリート機能が働くパターンのまとめ and デモ

Thu, 04 Nov 2010 18:46:39 +0900

オートコンプリート機能は各ブラウザが搭載している機能ですが、ID・パスワードを保存するときに表示される保存ダイアログの挙動がよくわかっていなかったのでいろいろ試してみました。基本的にはテキストボックスを2つ持つformがあり、このformを以下の4つのパターンでsubmitさせた場合に、保存ダイアログが表示されるのかされないのかの検証になります。

普通にsubmitボタンでsubmitする場合

ごくごく一般的なパターンで、IDとパスワードを入力するテキストボックスがあって、submit用のinput type="submit"なボタンが置いてあります。 submitボタンをクリックするとどのブラウザでも、保存ダイアログが表示されました。

リンク経由でJavaScriptからsubmitボタンでsubmitする場合

aタグをクリックしたタイミングで、submitボタンをJavaScriptからclickするパターンです。 JavaScriptから実行しているので、一見すると保存ダイアログが出ないかと思われますが、ちゃんと表示されます。

リンク経由でJavaScriptからform.submit();でsubmitする場合

今回の検証で唯一この方法だけが、うまく保存ダイアログが表示されない場合がありました。 IE7、8で試したら保存ダイアログが表示されずに画面遷移しちゃいました。

imageボタンでsubmitする場合

これは1つ目と似ていますが、input type="image"なボタンでsubmitするパターンです。問題なく保存ダイアログが表示されました。

おまけ：autocomplete属性がoffでも保存ダイアログが出てしまう場合（つまりautocompleteに対応していない）

ブコメで

autocomplete=offとかの検証はないのかなー

とご意見をいただいたので、一応追記しときます。 autocomplete属性をoffにしてもダイアログが出ちゃうブラウザを調査しました。結果的にはMacとWindowsのOperaが対応していなかったです。 ■参考リンク・4.10.7.2 Common input element attributes -- HTML5 (Edition for Web Authors) 詳しくは以下のデモを参照ください！！オートコンプリート機能が働くパターンのまとめ and デモ

以下いろいろ備忘録

formのactionで、index.htmlからindex2.htmlに遷移している理由

Chromeだとformのactionが現在開いている画面と同じURLの場合？に保存ダイアログが出なかった。ゆえに、今回のデモではすべてindex2.htmlという2ページ目に遷移するようにしている。

Operaはどこにパスワードを保存してるの？

「環境設定→認証管理タブ→認証管理ボタン」

Google Chromeはどこにパスワードを保存してるの？

「環境設定→個人設定タブ→保存したパスワードを表示ボタン」つまりキーチェーンアクセスに保存されます。オシャレですね〜！

Safariはどこにパスワードを保存してるの？

「環境設定→自動入力タブ→ユーザ名とパスワードの編集ボタン」僕の環境だと保存したデータの削除を実行する「取り除く」というボタンが効かなかったです・・・ナンデだろう。

Firefoxはどこにパスワードを保存してるの？

「環境設定→セキュリティタブ→保存されているパスワードボタン」こんだけMac版とWindows版のブラウザを行き来するとワケがワカメになっちゃうよ... ■関連記事・Internet Explorer のオートコンプリートの動作について・オートコンプリート - Opera Wiki ・過去に入力した物でオートコンプリートしたい - Opera Wiki ・usoAutoCompleteFromHistory - 工房らくだ舎

TextMateでPHPコードを実行するショートカットは「Shift + Command + R」

Wed, 27 Oct 2010 20:11:17 +0900

もうね。今のいままで知らなかったのよ。まさかShift押しながらとはっ！ Ruby、Perl、PythonなどはTextMate上で即座に実行するには、Command + RでOKでした。この流れでPHPもCommand + Rなのかな〜と思ってたんですが、言語をPHPにして実行するとファイルを保存するダイアログが出るんです。なので、PHPはTextMateでは即座に実行ができないと思って、わざわざ/Site/ディレクトリにファイルを置いて確認してましたよ！んで、久々にPHP書こうかな〜って思ってバンドルのところを見てみたらなんとありましたよ！ Runするコマンドがっ！何事も知るということがとても大切なんだと思った今日このごろです。 ■関連記事・TextMateにZen-Codingを導入して遊んでみる・TextMateのGetBundleがうまくいかないときの対処方法・Railsに最適なテキストエディター「TextMate」を入れて日本語化してみた