「第30回　HTML5とか勉強会～モバイルUIフレームワーク」活動報告

6月12日、第30回を迎えた「HTML5とか勉強会」は、Googleのオフィスをお借りして開催しました。今回は前回のテーマであったフレームワーク特集の続編として、モバイルUIフレームワークにフォーカスを当てたセッションが行われました。

本稿では、今回のイベントについてレポートします。

レポートに入る前に、開催30回という節目を迎えた本勉強会のこれまでを簡単に振り返ってみます。

これまでのスピーカーや参加者の人数、会場は次のとおりです。

多くの人と企業の協力のもとに開催してきました本勉強会ですが、30回という節目を記念して国内外の方々からたくさんのメッセージをいただきました。これらのメッセージは後日、html5j.orgで公開予定ですので、ぜひご覧ください。

編注: gihyo.jpでは、本勉強会の第7回より、スタッフの方にレポートをご寄稿いただいております。こちらのページで一覧できます。

jQuery Mobile

ここからメインセッションの紹介です。

はじめに、CAモバイルの吉川さんより、jQuery Mobileの良い所や悪いところ、ツールやプラグインについて紹介していただきました。

jQuery Mobileはモバイル向けのJavaScriptフレームワークです。jQueryを普段利用している人にとってはとても簡単にモバイル向けのサイトを作ることができます。

jQuery Mobileは基本的な設計のほとんどをマークアップで作ることができるので、デザイナーさんでもデベロッパーさんでも簡単にモバイルサイトを作ることができます。jQuery モバイルの大きな売りはプログラムが苦手な人、デザインが苦手な人が簡単にモバイルサイトを作れることだそうです。

jQuery Mobileのメリット・デメリットとして次の点を挙げていました。

メリット

とても簡単にモバイルサイトが作れる
クロスブラウザに対応できる
開発が活発で情報が多い

デメリット

フレームワークが大きく、ルール付けや縛りが多い
ある程度のデザインが決まっているためカスタマイズが難しい
DOM操作が多いため、デバイスによっては動作が遅い

このメリットとデメリットを考慮したjQuery Mobileの使いどころとして、モックやプロトタイプ、業務アプリなどスピードが求められる場面には最適であるとのことです。また、デザインをこだわる場合や、ハイパフォーマンスを求める場合にはそれなりのコストがかかると述べていました。

jQuery Mobileはページ遷移にajaxを利用しているため、同一ドメイン上に信頼できないリソースがある場合はセキュリティに注意する必要があるとのことです。詳しくは吉川さんのブログ記事をご覧ください。

講演では他にもjQuery Mobileを使った様々なデザインが見れるギャラリーや、ツールの紹介がありました。詳しくは講演動画や講演資料をご覧ください。

Sencha Touch 2

つぎに、Ext Japan, LLCの直鳥さんにSencha Touchの特徴や、開発ツールについて紹介いただきました。

Sencha TouchはWebkit向けのHTML5フレームワークで、ネイティブアプリの見た目と操作性をWebアプリで実現することができます。ライセンスは無償の商用ライセンスとGPLライセンスが用意されているとのことです。

今年新たにExt JS 4をベースとしたSencha Touch 2がリリースされました。Sencha Touch 2ではパフォーマンスの改善、開発環境Sencha Architect 2によるサポート、ネイティブへのパッケージングなどがあると紹介しました。

Sencha TouchはJavaScriptにコンフィグを書き込んでいくことでUIを構築していきます。そのためjQuery Mobileと比べた場合、デザイナーさんには扱う敷居が高くなっているかもしれないと述べていました。

Sencha Touchには次のような開発を支援するツールがあると紹介しました。

Sencha Architect 2

Sencha Touch 2とExt JS 4用の開発環境
有償（30日間の使用期間）
Mac/Windows/Linuxで動作する

Sencha SDK Tools

コマンドラインツール
MVCプロジェクトの自動作成
プロジェクトのBulid
ネイティプパッケージング
Microloader（Webアプリのローディングを早くする仕組み）

Sencha Touchはゲームなどには向いていないが、業務向けアプリとして使われてきたという流れがあります。MVCという使い慣れたアーキテクチャを取り入れて、チーム開発により適した方向へとSencha Touchは進化していると述べていました。

講演動画や講演資料も合わせてご覧ください。講演中のデモで使われたソースコードがこちらで公開されていますのでお試しください。(要Sencha Architect)

Dojo Mobile + その他のUIフレームワーク3選

つぎに、Dojo Mobileとその他3つのフレームワークについて、本勉強会スタッフの井原さんと白石さんに紹介いただきました。

Dojo Mobile 使ってみた

白石さんの無茶ぶりで講演＆Dojo Mobileを調査をすることになったという井原さん、「⁠Dojo Mobileはあまり好きになれません」と歯に衣着せぬ感想を述べていました。

Dojo MobileはiOSやAndroid、Blackberryに対応したJavaScriptフレームワークで、Dojo Toolkitのコンポーネントの一つです。対象は主にエンタープライズ向けで、Javaに似た概念を取り入れてるためチーム開発がしやすいのではないかと紹介しました。

Dojo Mobileの良い点・悪い点として次の点を挙げていました。

良い点

用意されたコンポーネントが綺麗
Dojo Toolkitを使ってる人は同じように使える
ライブラリの非同期ロードが可能＋事前コンパイルでまとめることができる

悪い点

ドキュメントが整備されていない
サンプルコードの書き方が古いままの物がある
学習コストが他のフレームワークに比べて高い

まとめとして、他のフレームワークと比べて癖が強いため積極的に使う気にはなれないとのことです。

講演資料や動画もあわせてご覧ください。

その他のUIフレームワーク3選

白石さんは「その他」のUIフレームワークとしてKendo UI Mobile、jqUI、app-UIの3つを紹介しました。

それぞれのフレームワークの特徴として次の点を挙げていました。

Kendo UI Mobile

jQuery Mobileとコンセプトが似ているので使いやすい
一つのソースでプラットフォーム固有のルック&フィールをエミュレートできる
パフォーマンスも悪くない
MVCフレームワークやテンプレートエンジンが統合されている

jqUI

jQ.Mobiを使用している
jQuery Mobileよりサイズが小さい
動作が軽い
プラットフォームが限られている

app-UI

用途特化型のマイクロフレームワーク
横にスライディングするページ遷移実現に特化している
Adobeの開発者サイトで紹介されている
スマートフォン向けとタブレット向けの異なるビューが用意されている

まとめとして、今後のモバイルUIフレームワークはフルスタック型と用途特化型のライブラリの2つに分かれていくのではないかとのことです。

納期を重視するならフルスタック型を、クリエイティブを重視するならオリジナルUI＋ライブラリといったように、どちらが良いということではなく、要件に合わせて使い分けられると良いのではないかと述べていました。

講演動画や講演資料もあわせてご覧ください。

座談会

さいごに、講演者の方々による座談会が行われました。モデレータは小松健作さんに務めていただきました。本稿ではいくつかのテーマと発言をピックアップして紹介します。

テーマ：「フレームワークの使用状況は前と比べてどう変わったか」

直鳥さんは今年に来て大手の会社さんからの問い合わせが増えていると言います。Androidのフラグメント問題などで手を焼いている人たちがHTML5やブラウザーに注目していて、フレームワークの選択肢としてSencha Touchを視野に入れてくれることが増えたのではないかと発言しました。

吉川さんは、みんながHTML5に期待しているけれども、1から全部書けるひとはそんなに多くない。そういった中で広く使えるフレームワークを求めてjQuery Mobileなどのモバイルフレームワークを使う人が増えてきているとのことです。

テーマ：「End of Native?」

白石さんは今後ネイティブからWebアプリへ移行すると言われることが多いが、フレームワークのネイティブ対応など、むしろネイティブ化の方向に進んでいるのではないかと疑問を投げかけました。

それに対して直鳥さんは、ネイティブアプリはマネタイズを考えたときにどうしても重要なものだけれども、進んでる方向はあくまでもWebアプリだと答えました。ハイブリッドアプリなどもあるが、それはアプリストアに並べるためのもので、基本的にはWebへと進んでいると述べていました。

座談会では他にも様々なテーマでお話していただき、ぶっちゃけトークなどもありました。是非講演動画でご覧ください。

30回記念記念撮影＆記念料理！

30回の節目を記念して今回の勉強会では参加者とスタッフ全員での記念撮影がありました。さらに懇親会ではGoogleさんからサプライズの記念料理がありました。どれもこれも食べるのがもったいほどの料理でした（美味しかったです⁠）⁠。

今回の勉強会で改めて、たくさんの人に支えられている勉強会だと感じることができました。

これからも「HTML5とか勉強会」ならびにhtml5j.orgをよろしくお願いいたします。

最後に

レポートに対する感想や、勉強会に対する希望・意見・取り上げて欲しいテーマなどがありましたら、twitter（@nakajmg）まで気軽につぶやいていただければと思います。

本勉強会は、毎月第3水曜日、または第3木曜日に開催していますので、興味を持たれた方はぜひ参加ください。ただし、会場や講演者スケジュールの都合などにより、開催日程が前後することがあります。開催のアナウンスはhtml5j.orgのMLで行われますので、こちらをご確認ください。また、コミュニティサイトhtml5j.orgも公開していますので、ぜひこちらもご覧ください。