レポート

「第15回 HTML5とか勉強会」活動報告

この記事を読むのに必要な時間:およそ 3 分

初めまして,HTML5とか勉強会スタッフの吉川と申します。今回は,同スタッフの小松さんに代わりまして,勉強会のレポートをお届けします。第15回目となります本勉強会は,2月22日にGoogleのオフィスをお借りして開催しました。

今回の勉強会では,⁠開発者でなくても楽しめる」をテーマに,勉強会スタッフの一條さんがコーディネーターを努めました。SwapSkillsの菊池さんにもご協力いただき,デザイナーやマークアップエンジニアの方々にも広くご参加いただけるようセッションを決定しました。お二人には,この場を借りてお礼申し上げます。

気になる内容ですが,話題のモバイルアプリケーション用のフレームワーク「jQuery Mobile」と,スマートフォン版GREEの実際のHTML5活用事例を紹介した「GREEのHTML5対応」のセッションを2本とLTを5本で,合計7本の講演を行いました。今回のLTは,⁠HTML5 関連なら何でもあり」というお題で公募させていただいたもので,本勉強会では初の試みとなる制限時間5分厳守のドラつきのLTとなりました(ドラはGoogleよりお借りしました。ありがとうございます!)⁠

画像

「jQuery Mobile」

最初のセッションは,⁠jQuery Mobile」について筆者の吉川よりご紹介させていただきました。

jQuery Mobileは,モバイルアプリケーション向けのフレームワークで,人気のJavaScriptライブラリ「jQuery」のプラグインとして動作します。HTML,CSS,JavaScriptを使ってネイティブアプリケーションのようなユーザーインターフェースを構築することができます。jQuery Mobileの大きな特徴としては,iPhone/Androidに限らずWindows MobileやWebOS,Symbianなどの多くのスマートフォンで利用できることです。また,HTML5 のカスタムデータ属性(data-*)を用いることによってHTMLのマークアップだけで,ほとんどの設定が可能なことです。例えばa要素にdata-role="button"などと指定することにより,簡単にモバイル用のボタンを作成できます。

本講演では,jQuery Mobileの概要と基本的な使い方,各種ユーザーインターフェースの紹介からレイアウトやデザインのカスタマイズまでをサンプルをまじえて丁寧に説明しました。jQuery Mobileは,現在はまだα版となっていますが,3月の後半にはβ版がリリースされ,その後に正式リリースの予定です。テーマのカスタムツールが公式に提供されることや,Adobe Dreamweaver CS5でのプラグインが提供予定であることなど,今後も大きな動きがありますので目が離せません。

講演資料は,こちらで公開しています。この資料では,スクリプトやAPIの内容を省いてありますが,それらを使わなくても簡単にモバイルアプリケーションを作成できるということを感じていただければ幸いです。こちらでお試し可能なサイトを用意しましたので,興味を持っていただけた方は,是非触ってみてください。

画像

「GREEのHTML5対応」

続いて,⁠GREEのHTML5対応」について,グリー株式会社熊谷さんよりご講演いただきました。

2010年8月にリリースされたスマートフォン版GREEを作成するにあたって,苦労した点や実際に利用された技術などについて詳細に説明されました。最初に,Ajaxでコンテンツをロードする方法とスマートフォン向けに最適化されたHTMLを出力する方法を検討した結果,やはりCPUなどが低速なスマートフォンでは,Ajaxを利用するほうが早く感じるということで,画面遷移などをすべてAjaxで実装したそうです。また,モバイル用のライブラリなども開発時にはライブラリ自体が少なかったことや,使っているサイトが少なかったことから,すべてスクラッチで作成しているとのことでした。開発期間はなんと1ヶ月だそうです!

実際に利用されたHTML5のおすすめ機能ということで,1つ目にHTML Formsについて述べられました。HTML Formsでは,placefolderを使って入力ヒントを簡単に表示でき,画面を節約できることや,データ型を指定することによって入力方法が変化することなどが示されました。2つ目は,CSS3のgradationやborder-radiusなどを使ってボタンなどを装飾できることやanimationを使って画面遷移をなめらかにすることなどが示されました。また,iPhoneではtransform3dを使うことによってハードウェア支援が受けられることなどを詳しく説明されました。3つ目は,Web Storageを使って表示設定などをローカルに保存しているため,cookieと比べて扱いやすいことや余計な通信が行われないことなどが示されました。

最後に,AndroidではアニメーションGIFや絵文字に対応していないことやdevicePixcelRatioというHTML上のピクセルと表示上のピクセル数に差異があることなどについて注意点や対策方法などが詳しく説明されました。

講演資料は,こちらで公開されています。ここで述べた以外にも実際に作成する上での様々なTipsが紹介されていますので,是非ご覧ください。

著者プロフィール

吉川徹(よしかわとおる)

普段は,普通のSIer。Webからローカルアプリケーション,データベースからインフラ周りに至るまで,何でも担当する雑食系。主にHTML5開発者コミュニティ「HTML5-developers-jp」で活動中。同コミュニティ主催の「HTML5とか勉強会」のスタッフを務め,HTML5の最新動向を追っている。

コメント

コメントの記入