Screw-Axis

“Connection reset by peer”が出る時

nao58 — Fri, 04 May 2012 16:52:52 +0000

連休を使って、負荷のキツくなってきたサーバを移転してるのですが。覚悟していたほどではないにしても、色々と問題が発生しました。そのうちのひとつが、Amazon S3への転送に失敗するようになったこと。途中で接続が切れる様子。

$ s3cmd put bkup-data:xxxx.tar.gz /tmp/xxxx.tar.gz
Connection reset: Connection reset by peer
99 retries left

使っているのは、Amazon S3のRubyライブラリ。バージョンは1.2.6です。

今回はCentOS 5.3から6.2への移行。S3ライブラリや転送するデータサイズ、相手のバスケットなどは変えていないので、やっぱりカーネル関係なんだろうなと。しかし、なかなか原因が特定できず、結構ハマりました。

以前は定期的に2G～3G程度のファイルを送っていたのですが、何度やっても切られるので断念。試しに2Mくらいのファイルを送ったら成功。50Mではアウト。割と早い段階で壁に当たってしまいます。最初はtarのまとめ単位を変えるなりsplitするなりして小さくして回避しようかとも思ったのですが、このサイズだと実際問題厳しすぎる。

で、まぁ色々やってみて、なんとなく特定できたのはLinuxカーネル2.6.17以降でTCP Windowバッファが自動チューニングされるようになっていると。コイツが、どうにかすると他のギアと干渉しあって接続を切るような挙動をしてしまうようです。実際にそうした干渉を確認できたワケではなく、そうらしいよという記述をこの辺やこの辺りで読んで調整入れたところで上手くいったので、そこで止めてしまった曖昧情報で申し訳ないのですが。

ともあれ上手くいったのは、ソケットのバッファ用メモリサイズを手動で設定すること。
/etc/sysctl.conf に、次のような記述を追加します。

net.core.rmem_max = 1747600
net.core.wmem_max = 1747600
net.ipv4.tcp_wmem = 4096 87380 1747600
net.ipv4.tcp_rmem = 4096 87380 1747600

ファイルを書き換えたら、端末をリブートするか、次のコマンドを実行。

$ sudo sysctl -p

正直なところ、バッファサイズをどの程度にすれば良いのか、よく分かりませんでした。この10倍くらいに設定している例もあれば、半分以下のものもあり。試した人の記述では、転送するファイルの総量が大きいほどに値を下げると上手くいくとありました。もちろん、下げすぎればネットワークのパフォーマンスに悪影響が出ます。せっかく自動チューニングしてくれるのだから、そちらに任せたいのですが…残念。しばらく様子見ながら、値は調整するかもしれません。

恐らく、S3に限らずサーバからソケット繋いでファイル転送する色々なサービスで起きる問題なんじゃないかと。同様の問題に当たって変更される場合、あくまで自己責任でお願いします。

No related posts.

[jQuery Mobile] 1.1.0公開

nao58 — Fri, 20 Apr 2012 05:22:12 +0000

jQuery Mobile初のメジャーバージョンアップとなる1.1.0が公開されました。

幾つかの大きな変更が加えられたバージョン1.1ですが、特に重要なポイントとして、固定ツールバーの変更、ページ切り替え効果の完全再開発、フォーム要素の洗練などが挙げられます。

また、当面は1.0と1.1が併用されることを想定し、それぞれのバージョン向けのテーマローラーが使えるようになっています。1.0で作られたテーマは、簡単に1.1へ変換できるようです。

更に、長い間リリースされると伝えられてきたダウンロードビルダーは、今週中にはアルファ版がリリースされる見込みだということです。

主な変更点は、次の通り。

固定ツールバーの抜本的書き換え

以前から問題がありつつも、ブラウザの対応状況などが原因でスクリプトによる仮想的な固定ツールバーを実装していましたが、今回 position:fixed の対応状況が一定を超えたということで、晴れてネイティブな本当の意味での「固定ツールバー」実装に踏み切られています。スクロール中に一旦ヘッダ/フッタが消える苦肉の策も、もう無くなっています(動作確認)。

今回は、肝となる position:fixed に対応していないブラウザ上では、固定ツールバーではなく普通のヘッダ/フッタになるようになっています。もし、どうしても古いブラウザ上でも固定的に見せたい場合、以前のバージョンで実装していた仮想的な固定ツールバーを使うことも可能です。方法については、リファレンスの「古いブラウザでの対応」を参照してください。

また、これに伴って、以前「次期新方式」候補だった TouchOverflow は予告通り廃止されました。

ページ切り替えの書き換え

新バージョンに対応したサイトを見て、最初に変化に気づくのは、これではないでしょうか。こちらも方法をかなり根本的に変えて、高速化しました。また、効果のバリエーションも増えています。また、未対応だったFirefoxへの対応も、されています。
» ページ切替効果

jQuery 1.7.1対応

今回から、正式にjQueryコアの 1.7.1 に対応しています。以前の通り 1.6.4 もサポート対象のままです。

ミニフォーム要素

フォーム要素に、ミニバージョンが加えられました。ツールバーの中など、狭いスペースにフォームを置きたい場合に便利です。
» ミニフォームギャラリー
» 通常サイズとの比較

フリップスイッチのデザイン向上

画面幅いっぱいにとっていたフリップスイッチのデザインが、変更されました。
あわせて、スイッチがOnとOffの中間で止められてしまうような挙動も、なくなっています。

スライダーの機能強化

スライダーに関して、2つの機能追加があります。

まず、値の大小が直観的に分かるように、スライダーの左側部分に色をつけられるようになりました。色はテーマで決められた「アクティブ」の色で自由に変更することは出来ませんが。

また、stepを指定することで増減値を規定することが可能になっています。例えばstepが25であれば、指定できる値は25の倍数のみになります。

他にも多くの変更点があります。詳しくは元記事を。
また、日本語リファレンスも概ね対応しました。

[jQuery Mobile] 1.1.0 RC1公開

nao58 — Wed, 29 Feb 2012 06:35:11 +0000

バグフィックス中心の1.0.1とは異なり、かなり大きな変更を含むバージョン1.1.0の公開が近づいています。今回は変化が激しいため、RCを挟むようです。

Announcing jQuery Mobile 1.1.0 RC1

以下、主要な変更ポイントのまとめ。

固定ツールバーのスキーム変更

jQuery Mobileの開発スタート当初は実用的なサポートがほとんどされていなかった position:fixed ですが、最近対応状況が良くなっていることから大々的に書き直したとのこと。実際にiOS5で試してみましたが、確かに劇的にスムーズです。スクロールする度に逐一消えていたツールバーも、表示されたままで自然な感じに。ただ、ページがオペレーション可能になるまでの時間が遅くなったようにも感じますが。

このネイティブな新固定ツールバーが動作するのは、次のブラウザ。

iOS5 – iPhone and iPad
Android 2.2 and 2.3
Android 3.x tablets (Honeycomb)
Android 4.x (ICS)
Chrome for Android (beta)
BB Playbook 1-2
BB7
Nook Color/Tablet
Kindle Fire
Kindle 3
All modern desktop browsers (IE, Firefox, Safari, Chrome, etc.)

これ以外の環境では、どうやら固定ツールバーとして設定しても、通常のページと一緒にスクロールされる形になるようです。1.0で実装されていたスクリプトによる動的なものは、廃止になったということですね。

ページ切り替え機能の向上

重いと言われることの多いページ切り替え機能も、かなり手を入れられました。スマートデバイス上での切り替え効果実装が何故難しいのかが色々と書かれていますが、つまりは遷移前のページと後のページ両方を描画したままアニメーションすることが、スクロールページ位置などの関係で大変だということで。今回は、現在表示中のページを一度ホワイトアウトさせてしまうことで、この辺の問題を解決することにしたようです。実際に見てみると一目瞭然ですが、特に不自然さは感じないので良いと思います。

もうひとつ強調されているのは、Androidプラットフォームのアニメーション描画性能の悪さ。色々頑張ったけれど充分なパフォーマンスを得るのは難しかったようで、結局、3DトランスフォームをきちんとサポートしていないAndroid2系の環境などでは、効果に何を指定しても一番軽いフェードアウト/インのページ切り替え効果にしてしまうようになりました。

新たなページ切り替え効果2つ実装

そんなページ切り替え効果ですが、サポートの良いプラットフォームでは更にリッチに使えるよう、新たに2つの効果が追加されています。”turn” と “flow” で、試してみるならこちらから。

ページ切り替え効果のFirefoxサポート

-moz系の記述が入り、FFでもページ切り替え効果が動作するようになりました。これは切り替え効果へのニーズが低いPC端末向けではなく、いずれ出るFirefoxモバイルを睨んだものでしょう。

Ajaxローダのデザイン変更

「よりロードが速く感じる」デザインに変更したのだとか。どうでしょう。
あわせて、ローディングメッセージを表示させるかどうかのオプションや、メッセージをメソッド呼び出しのその場で引数として指定できる機能も加えられた様子。動作確認は、こちらで。

TouchOverflow機能の廃止

書籍でも「今後デフォルトになっていくのでは」と書いたTouchOverflowですが、敢無く廃止となりました。iOS5以外ではサポートが進まなかった上、そこでの実装もバグだらけ。メンテの手間が大変なので、断念とのこと。

jQuery 1.7.1のサポート

これまでjQuery本体は1.6.4とされてきましたが、1.7.1も正式に対応バージョンとなるようです。今後はむしろ、1.7.1を使ってくれとのこと。

ミニフォームの実装

固定ツールバーなどを進めていると、ヘッダ/フッタにフォーム要素を入れたくなることも。しかし従来の拡張オブジェクトではレイアウトに入れるのが難しいということで、新たにミニ版がつくられました。

これを使うには、要素に data-mini=”true” を指定するだけ。実際に従来のものとどれくらい異なるのかは、こちらを参照。

フリップスイッチのデザイン変更

つまみの部分が小さくなったり、最近のインターフェースを研究してデザインを改善したとのこと。確認はこちらから。

スライダーにハイライト機能の追加

スライダーの左側に色をつける「ハイライト」機能が追加されました。確かに、直観的に大きさが分かりやすいかもしれません。

この機能を有効にするには、要素に data-highlight=”true” を指定。

スライダーにステップ指定機能追加

HTML5のrange要素には既にある、step属性の指定が可能になりました。デフォルトは1ですが、ここに例えば step=”25″ と指定すれば、25おきにしか数値指定できなくなります。

iOSでのズーム機能のバグに対応するスクリプト

iOSでデバイスの回転とページのズームに関するバグに悩まされてきましたが、Scott Jehl氏のハックで対応可能になったようです。これを取り込むため、新たに zoom.iosorientationfix.js という身も蓋もない名前のユーティリティを追加。

更に、セレクトボックスやインプット要素がフォーカスを得た際に発生する別のズーム問題を解決するための zoom.iosfocusfix.js も用意されました。

ユーティリティとして $.mobile.zoom が用意され、enable()/disable()メソッドでズーム機能を切り替えることもできるようですが、まだ試せていません。

AMDモジュール対応

AMDに対応し、実行時に動的に追加モジュールをダウンロードできるようになりました。既にjQuery本体ではサポートされている機能です。

data-enhance=”false”属性

フレームワークが自動的に全てのマークアップを拡張してしまうため、サードパーティ製のウィジェットやライブラリで用意された要素にも自動的に拡張され、意図した動作やデザインが上書きされてしまう問題がありました。それをシンプルに解決するため、要素に data-enhance=”false” が指定されている場合には自動初期化処理が行われない仕様になりました。

今日は時間が無く、ざっと。
いずれ日本語リファレンスの方に対応を入れ、補足します。

[jQuery Mobile] 1.0.1公開

nao58 — Thu, 26 Jan 2012 23:45:35 +0000

jQuery Mobile、正式版になって以降で初のアップグレードが行われました。

jQuery Mobile 1.0.1 Released

とはいえ、以前予告があった通り、1.1への繋ぎとなるマイナーチェンジ。機能的に大きく変わった点は無く、バグフィックスやサポートブラウザの拡張などのメンテナンスが行われたものが1.0.1として公開になっています。

1.1.0は、来月下旬に公開される見通し。

BadaとUC Browserの公式サポート

Badaプラットフォームと、バンドルされているDolphin Browserが、Samsungの協力を得て正式にサポート対象となったようです。また、中国で広く使われているUC Browserにも対応されました。

どちらもレンダリング性能に優れたブラウザで、対応状況は元々かなり良好だった様子。

テスト用ラボへの端末寄付

jQuery Mobile検証用のテストラボでは、協力各社からテスト用端末が続々と集められていて、継続的に拡大中とのこと。しかしAndroid4.0系の端末が無く、現在はエミュレータで確認している状況なので、端末の寄付を募っています。協力いただける場合は連絡欲しいとのことなので、心当たりの方は元記事を。

最近は、より軽量のタブレット端末用サイト開発フレームワークが色々と登場していますが、こうした広範囲のサポート体制はjQuery Mobileの心強い点ですね。

[PR] jQuery Mobile リファレンスが書籍として発売されました

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

森直彦 (著)

技術評論社 (2012/1/20)

新品￥2,709

[jQuery Mobile] ページイベント・チートシート

nao58 — Fri, 20 Jan 2012 01:05:22 +0000

jQuery Mobileのマークアップ用チートシートに続いて、ページ関連イベントのチートシートをつくりました。

» jQuery Mobile Page Event Cheat-sheet

ページ遷移時のイベントは数も多く、「どの順番で呼ばれるんだっけ？」と忘れてしまうことがよくあるので、パッと見られる形であると便利かなと。

実はこのシートは、拙著「jQuery Mobileポケットリファレンス」(今日発売のハズ)に掲載した図の、体裁を整えたものです。各イベントの内容についても解説されていますので、よろしければお手元に(宣伝)。本家ドキュメントの意訳的なものは日本語リファレンスに載せていますが、書籍の方はもう少し噛み砕いたものになっています。

ちなみに、jQuery使いの人は習い性になってるだろう document.ready は、ランディング時には一度発生する(書いていませんが、mobileinitの後)ものの、ページ遷移時には一切発火しません。1ページだけ作っていると上手くいったような気になり、後で他のページから遷移してくると上手くいかない…というのは、よく聞く失敗なので注意してください。代替は、大抵 pageinit がオススメです。

余談ですがこうして見ると、やはりページ遷移時に “pagebeforechange” イベントが2度出てくるのが分かりにくいなって思います。しかも(?)初回と2回目で渡される引数の型が異なるという… こういった仕様になったのには、ちゃんと理由があるんでしょうけど。一度ちゃんと確認してみたいものです。

チートシートはAPI版も少しだけですが要望いただいているので、いずれ作ってみる…かもしれません。

2012.01.31追記

外部からのランディング時に、mobileinit直後に発生するpagebeforechangeが記載されていませんでした。
これはベータ2から正式版になった際に仕様が変わったもので、キャッチアップできておらず申し訳ありません。
修正版に更新しましたので、お使いの方はリロードの上、再度ダウンロードお願いします。
ご指摘いただいたAT-ATさん、ありがとうございました。

[PR] jQuery Mobile リファレンスが書籍として発売されることになりました

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

森直彦 (著)

技術評論社 (2012/1/20)

新品￥2,709

[jQuery Mobile] 1時間でミニサイトをつくる

nao58 — Tue, 17 Jan 2012 09:27:31 +0000

jQuery Mobileは、慣れてしまえば非常に扱いやすいシンプルなライブラリなのですが、どうも「とっかかり」が難しいという話を聞きました。

そこで今回は、まだプライベート・ベータですがWYSIWYGでjQuery Mobileサイトを構築できる無料サービス “Codiqa” を使って、ちょっとしたサイトをサクッとつくってみます。端的にホームページビルダーのようなもので、あまりの簡単さにガッカリされてしまうかもしれませんが…

なお、サンプルとしてつくってみるのは、3月末に東京で開催されるラグビー7人制の世界大会「HSBCセブンズ・ワールドシリーズ」の特設サイトという態です。実に11年ぶりとなる日本開催なのですが、あまりにも情報が手に入らないため、せっかくなので少しまとめておこうかと。少しでも興味あれば、是非、秩父宮(秩父ではなく、国立競技場の近く)に足を運んでください。

Codiqa

今回使った Codiqa は、現時点では申し訳ありませんが未だプライベート・ベータです。パーツを画面にドラッグ&ドロップすることで簡単なサイトレイアウトをつくることが出来る、便利なWYSIWYGツールになっています。

まだ開発中のため、機能は大きく制限されています。使えるパーツの数もまだ少なく、作業状態を保存しておくことも出来ません。そして作ったサイトは、全て複数ページテンプレートとして1つのファイルに収まってしまいます。ですが今回は短時間でカンタンに作ってしまおうという企画なので、敢えてこのシンプルなツールで進めてしまおうと思います。それによって、jQuery Mobileのシンプルさが見えてくるのではないかと。

自分でも試してみたい方は、招待状の申請をしてみてください。トップページのテキストボックスにメールアドレスを登録すると、早ければ当日中にインビテーションが届くと思います。

トップページの作成

まずは、トップページをつくります。

左側にあるCOMPONENTSから、ヘッダやテキストなどを適当にドラッグ&ドロップ。非常に直観的なので、何も難しいことは無いでしょう。

デザインについては、後でテーマローラを使ってまとめてやるので、今は気にしません。ポイポイ配置したら、右側のプロパティウインドウで中身を埋めてやります。

もう、なんとなくサイトになってきました。この時点でダウンロードしてしまっても、テンプレートとしては充分有用かと思います。

ページの追加

続いて、他のページを追加します。左側のPAGESにある「New Page」をクリックして、新規ページを作成しましょう。

このボタンをクリックすると、まず識別する名前をつけるダイアログボックスが表示されます。見分けがつくよう、適当な名前を入力してください。
あるいは「Homeページの下に、このページ」というような階層構造をつくりたくなるかもしれませんが、現時点ではそうした機能はありません。一番上の”Home”以外は、総てフラットに横並びの「下位ページ」となります。

ここでも、また白紙ページに対して自由に配置してください。今回は、モバイル端末で読みやすいように “Collapsible” を使いました。これも、COMPONENTSからドラッグして、その内部に更に “Text Block” を配置することで簡単に実装できます。

同じ要領で、他のページも作っていけば完成です。

ダウンロードと、更なるカスタマイズ

ひと通りコンテンツが作成できたら、右上の「Download App」をクリックしてコードをダウンロードします。

ファイルはzip形式ですが、中身は mobile_website というフォルダに app.html というファイルが1つ入っているだけです。仮に10ページ作っていたとしても、この app.html が全てのページを含んだ単体のファイルとなります。これをブラウザで開けば、デザインした通りにサイトが作られているのがわかると思います。

これでも良いのですが、折角なので、もう少しカスタマイズしてみましょう。この app.html をエディタで開き、直接編集してしまいます。

まずは、ホーム以外のページヘッダに「Home」ボタンを付けます。各ページの header に、次のようにリンクを追加しました。


  
    大会概要
  
  Home

他にも、Codiqaでは入力できなかった table や dl などの要素を追加していきます。また、必要に応じて空になっている title 要素を埋めたり、faviconを設定するなどすると良いでしょう。

テーマの設定

最後に、独自のテーマを作成します。自分でCSSを書くのは大変なので、テーマローラーでチョチョっと。

テーマローラーについては、日本語リファレンスで説明しているので、そちらを参照のこと。

テーマローラー概要

出来上がったら、こちらもダウンロードします。

そして、先ほどの app.html に取り込み。~~次の1行を、head要素内のjquery.mobile-1.0.min.cssを読み込んでいる行(おそらく8行目)の下に挿入します。~~まずjquery.mobile-1.0.min.cssを、構造のみのjquery.mobile.structure-1.0.min.cssに切り替えます。そして、ダウンロードしたファイルへのリンクを挿入します。リンク先は、もちろんテーマローラーで作ったcssを配置した場所にしてください。

注：当初、こちらは単にテーマスタイルをデフォルトCSSの後に挿入するよう記述していました。実際は、デフォルトCSSを構造のみのものに変えて、テーマファイルと合せるのが正しい方法でした。

これで、おおよそ完成しました。ほぼ1時間。コンテンツの中身次第では、数十分で出来るはずです。

実際のサイト

更なる拡張

ついでに、セブンズラグビーの楽しさが少しでも感じられるように、フォトギャラリーなど作ってみました。

これは、先ほど Codiqa で作ったものとは別のファイルで作っています。テーマは、同じものです。こちらも写真はFlickrから持ってきて、インターフェースは以前に紹介したPhotoSwipeプラグインを使っているので、あっという間です。

トップページにリンクを置けば、内包されたページでも、外部に置いたページでも、同じサイトになります。

いかがでしょう。極めて短時間でつくったサイトですが、PCでもスマートフォンでも閲覧でき、更にSEOでも優位(もちろん、キーワードの選定や被リンクを増やすなど、SEO的な手当は必要ですが)な点が強みです。出力された app.html は単なるHTMLですから、デザインもいくらでも手を入れられます。HTMLとCSS、それに、ほんの少しjQuery Mobileの知識があれば、キャンペーンなどで「特設サイト」が欲しい場合など、コストをかけずにKMSを作ることが出来ます。

[PR] jQuery Mobile リファレンスが書籍として発売されることになりました

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

森直彦 (著)

技術評論社 (2012/1/20)

新品￥2,709

[jQuery Mobile] バージョン1.0.1から1.1へのロードマップ

nao58 — Tue, 10 Jan 2012 14:12:21 +0000

昨年暮れにようやく正式版1.0がリリースされたjQuery Mobile。先ほど、今後のロードマップとして次にバージョン1.0.1が、そして次にリビジョンが上がりバージョン1.1がリリースされることがアナウンスされました。

Upcoming Releases: 1.0.1, 1.1, and beyond

差し当って、要点をまとめ。

バージョン 1.0.1

これは「メンテナンス・リリース」と位置づけられています。内容的にはバグフィックスと、1.1へ繋がるマイナーな機能強化ということ。”Coming soon”となっているので、数日中には公開されるでしょう。

バージョン 1.1

こちらは、かなりまた大きな変化が加えられているようです。詳しくはリリース時点でリリースノートを再確認したいですが、大きな柱として挙げられているのは、次の2つです。

ページ切り替え効果を、よりスムーズに向上
固定ツールバーの挙動向上

どちらも次のバージョンで「劇的に」強化されているとのこと。開発側が多少盛っているとしても、どちらも直観的にユーザビリティと繋がる部分なので期待は高いです。

ページ切り替えについては、Android端末のようなアニメーションに弱いプラットフォームなどではどうしても限界があること、スクロール位置の調整や保持に時間がかかりすぎることなどから、チューニングだけではなく根本的に切り替え方法を変えることにしたようです。スクロール位置を調整せずに一度切り替えを行い、次のページをフェードさせることで不自然さを解消したとか。興味のある人は、こちらからとりあえずのデモを見ることができます。

その他、現時点で(おそらく)1.1に含まれるとされているのは、元々は正式版リリース時に実装されるとされていたダウンロード・ビルダー。jQueryコアでは既にあるお馴染みのものですが、jQuery MobileでもAMD(JSファイルの依存関係を定義するCommonJSによる標準化仕様:参照)対応を済ませたところで、遂にリリースとなる模様です。

意外だったのは、固定ツールバー機能強化に向けた最有望株だったはずの touchOverflow が deprecated にされたことです。iOS意外でのサポートが進まないこと、未サポートの環境と2つの手法を平行して実装することで複雑さが増すことなどから、一旦手法として放棄することにしたようで。もうすぐ発売の jQuery Mobileポケットリファレンスでも「おそらくは次バージョンではデフォルトでONになってる」なんて書いてしまったように思いますが… 見事にハズレました。すみません。

このバージョン1.1は、2月中～下旬にリリース予定。それから、およそ3ヶ月おきくらいのペースでバージョンアップさせていく予定とのことです。

バージョン 1.2

というわけで、予定通りなら5～6月(もしかしたら、もっと早く)にリリースになるだろうバージョン1.2についても、チョロっと。

読んでの通りバージョン1.0.1、1.1は共に機能向上がメインで、いわゆる「新機能」は加えられていません(ダウンロード・ビルダーはライブラリとしての機能ではないですし)。バージョン1.2では、新しいウィジェットを加えていきたいということです。

新ウィジェットは、たとえば既に(バグありの)デモが公開されている popup など。これは、ツールチップだけでなくポップアップメニューやログインフォーム、サムネイル表示など、なんでもポップアップにできるなかなか便利そうなウィジェットです。

他には fetch links という新機能が紹介されています。これはどうやら、リンク先のコンテンツの一部の要素を自動的にAjaxで取得し、その内容を手元のページの指定要素内にロードするようなものの様子。たとえばタブにこのfetch linkを指定してターゲットをメイン部分にすれば、コードを書かなくてもタブによりコンテンツ部分だけが切り替わるようになります。また、一覧にスニペットが表示されていて「続きを読む」というようなリンクをつけているような場合でも、この「続き」にfetch linkを指定しておけばページ遷移せずその場で続きの文書が出てくるようなことも。

いずれにしろ、これはまだ「次の次の次」。お楽しみにということで。

[PR] jQuery Mobile リファレンスが書籍として発売されることになりました

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

森直彦 (著)

技術評論社 (2012/1/20)

新品￥2,709

[jQuery Mobile] SEOとユーザビリティを両立させるポイント

nao58 — Tue, 10 Jan 2012 04:44:02 +0000

最近、海外のブログなどでも「スマートフォン向けサイトでのSEO」というキーワードが出てくることが増えてきました。SEOは常に正解の分からない得体のしれないオカルトに満ちた世界ですが、それでも今までの様々な試行錯誤から「定石」のようなものは出てきています。

そうした「SEOの定石」と、モバイルサイトでの「ユーザビリティ」を極力両立させるポイントについて、年明けにSEARCH ENGINE LANDで良い記事(How To Improve Mobile Commerce SEO Using JQM)があがっていました。そちらを参考に他の情報を加えつつ、jQuery Mobileを活用したサイト構築について少しまとめてみます。

モバイル端末でのユーザビリティ

Webユーザビリティ研究の第一人者、ヤコブ・ニールセンのアラートボックスの記事(Defer Secondary Content When Writing for Mobile Users)によると、やはりモバイル端末上の画面でユーザを惹きつけるポイントはまずファーストビューでページの最も伝えたいポイントをアピールし、次により詳細な内容に誘導することです。

ファーストビューの重要性はデスクトップ向けサイトでも繰り返し言われる基本的なことで「何を今更」かもしれません。しかし、モバイル端末(たとえばiPhone 3GSサイズ)ではデスクトップに比べてページのコンテンツ内容把握が2倍難しい(Mobile Content Is Twice as Difficult)という調査もあり、従来以上に強く認識する必要のあるポイントです。そうでなくても、デスクトップスクリーンはワイドになっていっていて、情報は1ページに詰め込まれていく傾向が強くなっています。しかし、モバイル端末では(こちらもスクリーンの大型化は進んできているものの)過去のデスクトップ端末に比べても遙かに小さな画面です。

面白いのは、モバイル端末でのブラウジング目的の最たるものは「時間つぶし」であると予測されている(Optimizing a Screen for Mobile Use)にも関わらず、多くのユーザはテキスト量の多いサイトを見せられることに対してデスクトップ端末での閲覧以上に短気である(Mobile Content: If in Doubt, Leave It Out)ことです。この一見矛盾する2つの調査結果を、ニールセンは “Information foraging theory” と結びつけて、モバイルでのブラウジングは時間つぶしといっても時間を無駄にしたいわけではなく、むしろ少ないコストで多くの情報を得ることを目的としたゲーム感覚であって、そのためによりダイレクトな情報を欲するのではないかと推察しています。このことは、自分に当てはめても直観的に納得のいかないものではありません。

そうなると、モバイル端末向けページのあるべき姿が漠然と見えてきます。「ページあたりに情報量を詰め込みすぎず、それが何のコンテンツであるのかが一目でわかるような作りにすること」と「興味を惹いた後は、じっくりと時間をかけて読めるような内容のあるページにすること」という二律背反を解決するため、インデックス/検索結果ページ -> 概要ページ -> 詳細ページというような階層構造を明確にして、ユーザに「これは求めるコンテンツなのか」を早い段階で素早く判断させてやることでしょう。そして、携帯端末向けだからといって情報を削ぎ落してしまうのではなく、最終的には充分な情報を腰を据えて得られる満足度の高いページを用意することです。

たとえば、Amazonは昨年末からモバイル端末向けページをマイナーチェンジしました。従来1ページにおさめられていた商品ページを複数に分割しています。

つまり、最初の商品ページでは概要やユーザ評価、在庫の有無などを極力素早く見せておき、プロダクトについて更に詳細な情報が知りたい場合は、更にもうひとつ次のページ(ページの名前が「商品詳細」と「説明&詳細」なのは、苦労の後が見えますが)で閲覧できるという具合です。

SEO

では、こうした構造をSEO的な観点から見ると、どうでしょう。これは、少し微妙なところです。

ページあたりの情報量を少なくしてコンテンツの視認性を優先した場合、そのページのキーワード量は当然ながら減ってしまいます。先ほどのAmazonを例にとっても、該当する製品を探しているユーザをランディングさせたいのは購入機能のある「商品詳細」ページであるはずです。しかし実のところ、製品名をダイレクトに検索しているのでない限り、製品に関連した検索に強いのは「説明&詳細」ページの方でしょう。あるいは、それらをひとまとめにした旧来型の「詰め込み」ページの方が強くなると考えられます。

もちろん、インデックス量が増えるメリットも無いわけではないですし、ページ単位でなくサイト単位での強さは依然として保つことが出来ます。Amazonくらいの規模であれば、大きな意味でサイトを受け皿にして、そこからユーザビリティの良いサイトでユーザを誘導することに注力する方針で問題無いでしょう。しかし、これから地位を確立していかなければならないサイトにとって、30位くらいのページが複数できることよりも10位以内に入るようなページが1つ出来ることの方が遙かに重要です。そうした目的において、キーワードや被リンクの分散しやすいページ構造は望ましいものとは言い難いものです。

このように、モバイル端末向けサイトにおいてもSEOとユーザビリティは(歴史上何度も繰り返されてきたように)相反するものになってしまいそうです。しかしこうした問題を解決する方法が、あるいはjQuery Mobileには備わっているかもしれません。

複数ページテンプレートの活用

jQuery Mobileのページ機構では、通常のシングルページテンプレートの他に、複数のページを単一ファイルにまとめたテンプレートを用いることも可能です。これは次のような構造でつくられます。





  
    Foo
  


  
    I'm first in the source order so I'm shown as the page.
    View internal page called bar
  


  
    Page Footer
  






  
    Bar
  


  
    I'm the second in the source order so I'm hidden when the page loads.
      I'm just shown if a link that references my ID is beeing clicked.
    Back to foo
  


  
    Page Footer

このページは、JavaScriptの動作しない環境では単一の大きなページに見えます。GoogleやYahooなど検索エンジンのクローラーから見ても、全体でひとつのページに見えるはずです。

つまり、たとえば前述のAmazonにおける「商品詳細」と「説明&詳細」ページを単一のテンプレートに入れてしまえば、ユーザビリティとしては動作を保ったまま、検索エンジンに対してはキーワードの揃った有意義なページとして見られる可能性が高いということです。

階層化リストビューの活用

同様に、jQuery Mobileのリストビューを活用することでSEOとユーザビリティを両立させることに近づけるかもしれません。この時に使用するのは、階層化リストビューです。

jQuery Mobileでは、HTMLのリスト(ul, ol)をネストさせることで1ファイルでありながら自動的に複数のページをジェネレートし、ドリルダウン式のページ構造を実現することが可能になっています(詳しくは日本語リファレンス、あるいは近日発売の拙著参照)。これも、前述の理由と同様に、検索エンジンに対して情報を1ファイルに集約させつつ、ユーザには断片化されたページを案内することでユーザビリティを保つことが出来るようになるはずです。

期待と注意点

ただし、この方法にも注意が必要です。元来複数ページテンプレートはSEO目的で用意されたわけではないためでもありますが、ファイル内のページ間リンクがアンカーの形式であるにも関わらず、実際にはリンク先のページ内アンカーが存在していない問題があります。たとえばGoogleに対しては “Google Section” の概念が適用されてくれることを期待しているため、これはやはり解決すべき問題です。そのためには、ベースとなるHTMLにはアンカーを記述しておき、jQueryが発動する環境ではpageinitイベントでアンカーを削除するような工夫が望ましいかもしれません。

実際、そうした動作をするプラグインなどを作ることは容易です。あるいはjQuery Mobileのコアライブラリに組み込むことも出来るでしょう。今のところそうした動きを聞かないのは、やはりSEOの何が正解で、現実的にどの程度の効果があるのか不透明であるためだと思われます。ここで書いたことも、あくまで「期待」であり、「確実にそうなる」わけではないことをご理解ください。

特に複数ページテンプレートについては、リンクの貼り方などサイト構築方法自体が特殊になるため、当初自分は「jQuery Mobile黎明期の機能」であり、あまり使うべきでない構造と捉えていました。今月発売になる「jQuery Mobileポケットリファレンス」でも、そのように紹介しています。しかし、今回SEOの観点から改めて考えた際に、この形式にも充分な利用価値がある可能性があると感じるようになりました。よく「jQuery Mobileは重い」と誤解を与える原因となるAjaxページロードを避ける目的以外にも、特定プロダクトのKiller Mini Site構築手法として活用できるかもしれません。

次は改めて、この複数テンプレートによるミニサイト構築について書きたいと思います。

[PR] jQuery Mobile リファレンスが書籍として発売されることになりました

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

森直彦 (著)

技術評論社 (2012/1/20)

新品￥2,709

[jQuery Mobile] BartenderプラグインでフッタをiOSアプリ風にする

nao58 — Thu, 22 Dec 2011 09:49:16 +0000

jQuery Mobile用プラグイン(?) “Bartender” を試してみました。

これは、フッタなどツールバーのデザインをiOSのネイティブアプリ風にするためのものです。

プラグインと呼ぶには少し抵抗があるのは、スクリプトを一切含まないスタイルシートだけの拡張機能であることです。もちろんそれは悪いことではなく、軽量で動作する望ましいことなのですが。

ともあれ、簡単な実装方法とデモを用意してみました。

デモ

簡易的なデモページを、下に用意しました。

» Bartenderプラグインデモ

このデモでは、プラグインを適用してiOSアプリ風にしたツールバーを、固定フッタにしています。

実装方法

まずは公式のGithub から、ファイル一式を持ってきます。最低限必要なものはスタイルシートと、アイコン用のストライプ画像です。とりあえず、テストなので全部上げてしまいましょう。そして、フレームワークのストラクチャCSSの後で、プラグインのCSSを読み込みます。理由あって後でこのスタイルを修正する必要が出てくるため、ミニマイズしていない方のファイルを使います。

このプラグインは、前述のとおりスクリプトを含みませんので、基本的にはこれだけです。もし独自のストライプ画像を用意していて、それをスタイルシートと別の場所に置いている場合は、CSSの中身を書き換える必要があります。

後は、もうマークアップするだけです。今回のデモは、フッタを次のように記述しています。


  
    
      機能
      ブランド
      価格
      コンタクト10
      About Us

ul要素に指定している apple-navbar-ui というクラスが、このプラグインの肝になっています。その下にアンカー(a)を囲んだリストアイテム(li)を作っていけば、自動的にアプリ風のパネルになっていきます。

これで概ねは上手く動作するのですが、コンタクトに付加しておいた ui-li-count がおかしなことになっています。

これは現在(2011年12月22日)の最新版がjQuery Mobileのベータ3にあわせて作られているためでした。現在の最新版(1.0)に合わせるためには、スタイルシートを少し変えてやる必要があります。そこで、bartender.cssの227行目からのNotification Iconsのブロックを、次のように変えてやります(体裁を見やすいように整えていますが、変更した箇所はそれほど多くありません)。

/*   8. Notification Icons .ui-li-count */
.apple-navbar-ui li a .ui-li-count{
  color: #ffffff;
  left: 55%;
  font-size: 90%;
  text-shadow: none;
  font-weight: bold;
  font-family: arial;
  -moz-box-shadow: 0 1px 2px #999;
  -webkit-box-shadow: 0 1px 2px #999;
  box-shadow: 0 1px 2px #999;
  padding-bottom: 1px;
  border: 0.15em solid #ffffff;
  border-radius: 14px;
  -moz-border-radius: 14px;
  -webkit-border-radius: 14px;
  background-color: #900;
  line-height: 16px;
  display: inline-block;
  background-position: 0 0 !important;
  margin-top: -18px;
  background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0,#fcc),color-stop(1,#900));
  background-image: -webkit-linear-gradient(top, #fcc, #900);
  background-image: linear-gradient(top, #fcc, #900);
  background-image: -moz-linear-gradient(top, #fcc, #900);
  background-image: -o-linear-gradient(top, #fcc, #900);
  background-image: -ms-linear-gradient(top, #fcc, #900);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffcccc', EndColorStr='#990000');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffcccc', EndColorStr='#990000')";
  position: absolute;
  top: 50%;
  padding: .2em .5em;
}

具体的には、まず最後の3行(position, top, padding)を追加しています。これで、当初のベータ3対応されていた状態には合わせられました。ただ、この状態では横幅を狭くした際にバルーンが中心より左に来てしまい、嬉しくありません。そこで right の指定を外して、代わりに left 指定を入れて、常にパネル中心部やや右にバルーンが配置されるよう変更しました。ついでに、バルーンの色をアラート風に赤く変更しています。これで、期待する形になりました(正直なところ、例によってIEでは残念な見栄えですが)。

プラグインで用意されたアイコンはここで使ったものが全てですが、自分で追加することも難しくありません。
また、レティーナディスプレイ用の高解像度アイコンにも対応しており、メディアクエリでディスプレイを見分けて切り替えるようにも出来ます。

フッタをスタイリッシュに作るのは意外と大変です。こうしたツールを使って実装するのも良いですね。

[PR] jQuery Mobile リファレンスが書籍として発売されることになりました

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

森直彦 (著)

技術評論社 (2012/1/20)

新品￥2,709

[jQuery Mobile] Markup Cheat Sheet

nao58 — Thu, 22 Dec 2011 05:55:23 +0000

I’ve just created jQuery Mobile Markup Cheat-sheet.

» jQuery Mobile Markup Cheat-sheet

This is almost just a “Data- attribute reference” of the official document, but I believe this can be still handy for both developers and designers