Screw-Axis

[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

[jQuery Mobile] チートシートつくりました

nao58 — Thu, 22 Dec 2011 05:53:19 +0000

jQuery Mobileのマークアップ用チートシートをつくってみました。

» jQuery Mobile Cheat-sheet

jQuery Mobile 日本語リファレンスを拡張していく過程で、あったら便利かなと。

とりあえず、すぐに指定方法を忘れてしまうマークアップから。特に data- で始まる属性のリファレンスが折角公開されたので、手元に置いておきたいなと思い。それから、どんなものがあったかやはりすぐに忘れてしまう、ボタンアイコンの一覧。多分便利だと思います。ボックスの色分けは、なんとなくのグルーピングですが、あまり気にせず。

要望があれば、次はAPIのチートシートもつくろうかな…と思ってます。

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

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

森直彦 (著)

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

新品￥2,709

[jQuery Mobile] PhotoSwipeプラグイン

nao58 — Tue, 20 Dec 2011 10:02:38 +0000

jQuery用プラグイン “PhotoSwipe” を、jQuery Mobileに適用したサンプルを試してみました。

これは、jQueryを使ってタッチデバイス上でスタイリッシュなイメージギャラリーを作るためのプラグインです。jQuery Mobileに特化したものではないですが、親和性は高いはずなので、組み合わせてみます。

PhotoSwipeの基本的な機能は、アンカーで参照した先にある複数の画像を、インターフェースのついたスライドとして見せてくれるものです。今回は提供されているサンプルを踏襲して、3×3のサムネイル画面をつくり、サムネイルがクリックされるとスライドショーが開始されるようにしたいと思います。ただし、サンプルにはjQuery Mobile的にまずい点があるので、その辺の修正コードも含むようにしています。

さておき、簡単な実走方法とデモを用意してみました。

デモ

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

» PhotoSwipeプラグインデモ

最初のサムネイル画面は、特にPhotoSwipeとは関係ありません。リストにアンカー付きの画像を並べ、それらをスタイルシートで制御しているだけです。ただ、これもレスポンシブ・レイアウトを用いた画像サイズによらない簡単なテクニックを使っていますので、興味のある方はヘッド要素内のスタイル定義を見てみてください。レスポンシブ・レイアウトについては、こちらから。

任意のサムネイルをクリックすると、PhotoSwipeが発動します。前後の画像へ切り替え、自動再生、プレビューモードの終了、ホイールやスワイプによる画像切り替えなどが出来ます。スマートフォンなど非力な端末上でも快適に動作します。

実装方法

このプラグインは画像なども含むため、まずは公式ページから最新版のファイル一式をダウンロードします。そして解凍し、適当な場所に配置してください。

次に、head要素内でプラグイン用のCSSとJS、それにライブラリとなるklassを取り込みます。

HTMLには、サムネイル画像と実画像へのリンクを並べます。サムネイルのスタイルについては、適当に。

この時、アンカーには data-ajax=”false” を指定するのを忘れないようにしてください。これが無いと、リンクをjQuery Mobileのフレームワークが引き受けてしまい、PhotoSwipeがハンドルできません。PhotoSwipeの公式ページにはここに rel=”external” を指定するよう指示しています。しかし、この指定は外部サイトへのリンクを意味するものです。結果的に「Ajaxによるページ遷移を行わせない」という意味では同じことですが、セマンティックな観点から data-ajax による指定を用いるのが正しいでしょう(実際にリンク先がFlickrなどの外部サイトである場合などは、external指定でも構わないかもしれませんが)。

次に、プラグインの呼び出しを行うコードを記述します。後述しますが、これはhead要素内のjQuery CoreとPhotoSwipeプラグインのJSを読み込んだ後、jQuery Mobileを取り込む前に記述してください。

公式のサンプルでは、$(document).ready()を使って処理をバインドしています。しかし、これは1つ前にリンクページが存在している複数ページテンプレートだから正常に動作する形であって、jQuery Mobileの典型的なパターンからは外れたスタイルです。この辺のことは日本語リファレンスにも記述してあるので、参考にしてください。

処理はプラグインの呼び出しとしては少し長くなっていますが、難しいことはしていません。ページが初期化された際にプラグインを適用し、ページが削除された際にはメモリを解放するようにしています。これも元のサンプルはpageshowとpagehideを使っていますが、キャッシュされている場合などに処理を無駄に繰り返すことになってしまうので、イベントの場所をpageinitとpageremoveに変えています。

基本的に、やるべきことはこれだけです。
jQuery Mobileと組み合わせずとも、単体で実績のあるプラグインですので、動作も安定しています。こうしたコンテンツを作る需要は高いと思いますので、積極的に活用できれば。

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

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

森直彦 (著)

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

新品￥2,709

[jQuery Mobile] ActionSheetプラグイン

nao58 — Mon, 19 Dec 2011 09:09:19 +0000

jQuery Mobile用プラグイン “jQuery Mobile ActionSheet Plugin” を試してみました。

これは、jQuery Mobileで iOS のアクションシート風のインターフェースを簡単に実装するためのプラグインです。

通常、フレームワークでダイアログを表示するには外部に別のページとして作る必要があります。あるいは同ファイル内にページを書くこともできますが、その場合は複数ページテンプレートにしなければなりません。そうした煩雑さを避け、なおかつマークアップだけで簡単にポップアップを実装できるのが、このプラグインの強みでしょう。

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

デモ

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

» ActionSheetプラグインデモ

このデモページには、全部で3つのアクションシートを含ませています。ひとつは、ヘッダ内右側の「設定」ボタン。あとの2つは、コンテンツ中にあります。JavaScriptコードを全く書かずに、マークアップだけでこうしたポップアップが実現可能になります。

実装方法

サイトのhead部分で、プラグイン用のCSSとJSを取り込みます。

ボタンをつくり、そこに表示するポップアップを作るには、次のようにマークアップします。

ActionSheetプラグインとは

  ActionSheetプラグインとは
  簡単なアクションシートを、マークアップだけで設定するプラグインです。
  閉じる

アンカーに data-role=”actionsheet” が指定されています。この時、href属性は指定されていません。ポップアップには、このリンク直後に置かれている要素が使われます。

別の方法としては、ポップアップ要素にidを指定し、data-sheet属性でそのidを参照することも出来ます。

ログイン

様々なコンテンツなどのマークアップ...

上の例では、アンカーに data-sheet=”login-form” が指定されています。そのため、直後の要素ではなく、別の場所にある id=”login-form” の指定された要素がアクションシートの中身になっています。

非常に簡易的なプラグインですが、手軽さが利点かなと思います。表示のされ方もポップで便利です。
動きやデザインも、CSSをいじることで変更可能です。

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

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

森直彦 (著)

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

新品￥2,709