モバイルアプリケーションミーティング - Mobapps：jQuery mobile に参加してきた #mobapps

勉強会 jQuery


(写真：今回の勉強会で配られた資料各種。会社説明資料/デザイン＆開発プロセスのクリアファイル/Cloud Days Tokyo 2012の無料ご招待券)


『jQuery Mobile』という、最近ホットなテーマについての勉強会が開催されると言うことで今回は参加してきました。


開催場所はクラスメソッド株式会社 セミナールーム＠飯田橋。場所的には去年のCode Retreat in Tokyo以来になります。


興味深いキーワードではあり、個人的にも事前に幾らか勉強してから臨もうかな〜と思いつつも、実際のところは業務が忙しかったりであまり時間が取れず。jQuery Mobile自体の知識はあまり無い状態で今回はこの勉強会に臨んでみました。以下メモ。

開始挨拶・諸説明等

『クラスメソッドからのお知らせ』と題し、タケハラさんから以下の様な諸説明等がまず最初に行われました。

    • 4.クラスメソッドのブログと記事

セッション１：初めてのjQuery Mobile[初級編]

  • 講師：クラスメソッド株式会社 開発部　モバイルイニシアチブグループ クリエイティブ・ディレクター 山本一郎氏
jQueryもさわった事はないけど、話題のjQuery Mobileに興味津々。そんな開発者の方を対象に、基礎の基礎から教えちゃいます！
これであなたも今日からjQuery Mobilist！
初級編では、ライブラリのロード、ページ構成、ページ遷移の説明を中心に簡単なアプリケーションの開発を行います。
    • サンプルコード
      • 簡単なHTMLを書く。(サンプルコードは後日ブログで。)
    • ページの基本構成
      • ヘッダーエリア：ページタイトル、コントロールを配置する領域
      • コンテンツエリア：文章や画像など、コンテンツの配置にする領域
      • フッターエリア：メニューを配置する等
    • divタグの属性にdata-role="要素名"を追加すると、jQueryMobileがそれぞれの領域に役割を持たせてくれる。
    • 1つのHTMLの仲に複数のページを持たせる事が出来る。
      • data-role="page"
    • その他要素の説明・操作方法等。
      • ■ページ遷移
      • 遷移したいページにiD="ページID"を追加して、そのIDへのアンカーリンクを貼るだけでページ遷移が可能。
        • ＜a href="#page2"＞次ページ＜/a＞
        • 遷移時のエフェクトも勝手に付けてくれる。
      • ■ページ遷移：戻る
        • data-add-back-btn="true" → 自動的にヘッダーに[Back]ボタンが表示される。
      • ■ページ遷移３：
        • 参照先に別ファイルを指定して動的に読み込む事も出来る。
      • ■ページ遷移４：
        • 全く独立したHTMLファイルへ遷移したい場合はdata-ajax="false"で非同期処理を設定。
      • ■ボタンを作る
        • aタグにdata-role="button"を追記→ボタンらしい見た目になる。
      • ■リストを作る
        • ulタグにdata-role="listview"を追記。olタグ（番号付きリスト）にも使える。
      • ■リストを作る２
        • 上記に加え、更にaタグで括るとリンク付きリストに早変わり。それらしいアイコンも付く。
      • ■リストを作る３
        • さらにimgタグを追加：サムネイル画像が付く。Pタグを加えると説明文エリアが追加される。
      • ■リストを作る４
        • data-role="list-divider"を加えたliタグを挿入→リスト内では区切りとして表現される。
      • ■メニューを作る
        • フッター内のdivタグにdata-role="navbar"を与えると、メニューとして扱われる。アイテムはul+liタグでOK。
      • ■メニューを作る２
        • data-icon="アイコン名"でアイコンが追加。アイコンはデフォルトで18種類ほど用意されている。
      • ■見た目を変更する
      • 各要素にdata-theme="スウォッチ名"で見た目が変わる。
      • デフォルトテーマには5種類のスウォッチが用意されている。
      • data-divider-theme="c"：この要素だけは効かないらしいのでこういう記載方法。
  • ここまでのおさらい
    • data-role="*"等のカスタムデータ属性を追加すると、jQueryMobileが特定の役割（見た目や振る舞い）を自動的に与えてくれる。
    • 1ファイル内に複数ページを持たせる事が出来る。画面遷移時のトランジションも自動的に付いてくる。
    • テーマやアイコンも最初からある程度用意されているので、簡単にそれらしい見栄えを得る事が出来る。
  • もうちょっとアプリっぽくしたい。→jQueryMobile＋TwitterAPI
    • TwitterAPIでJSONデータを取得する
      • データの取得はjQueryのgetJSON()関数を利用。
    • HTML側の下準備をする
      • jsからアクセス出来るよう、要素（ul）に予めユニークIDを付けておく。リストの中身はjsで動的に生成。
    • 取得データからリストアイテムを生成
  • 個人的な感想
    • いいなと思ったポイント
      • マークアップ言語を知っていれば、使い方は非常に簡単。
      • 外観、視覚効果が用意されているので開発効率は高い。
      • コンパイルが必要ないので、コードを書いたらすぐプレビュー出来る。
      • ：
    • アレだなと思ったポイント
      • 自動化されている反面、UI的に細かなカスタマイズは難しい気がする
      • 動的にUIコントロールしたい場合は、Javascript/jQuery知識が必須。
      • UIゴリゴリ制御していると時々謎の不具合に見舞われる（だいぶ改善された？）
      • クロスブラウザを謳っているが、微妙に動作に差異があったりする。
      • デモならサクサク作れて楽しいが、実戦投入はまだ厳しいか。製造後期でハマりそう。
      • 処理能力の低いモバイル端末だとパフォーマンス的に厳しいかも。
      • ：

セッション２：初めてのjQuery Mobile[中級編]

  • 講師：クラスメソッド株式会社 開発部　友田翼氏
jQueryの基礎は分かった。でもどんな事が出来るのかもっと知りたくなった！そんな開発者の方を対象に、プラスアルファの内容を紹介します。
中級編では、より細かい設定の仕方や、陥りがちな罠、PhoneGapを使ったiOS用のアプリケーション開発の仕方についてお話しします。
  • 自己紹介
    • おさらい
      • html5のdata-属性を使って、独自の機能を提供している→言い換えると、HTML5で作る必要がある。
      • data-role, data-theme, data-icon等が良く使われる
      • 今回はボタンとリスト表示
    • アイコンいろいろ
      • data-iconで指定可能なアイコンは18個
        • 矢印系/演算子系/アクション系/情報系
    • ボタンいろいろ
      • data-iconposでアイコンの位置を変えられる
      • ledft, right, top, buttom, notext
      • 通常は画面一杯使って表示してしまう。data-inline="true"を指定すると程良い大きさに
      • data-role="contrrolgroup"でボタンのグループ化が可能。
      • data-type="horizontal"で横並び表示が可能に。
    • リストいろいろ
      • ul. Liなどの要素とdata-role="listview"を用いる
      • liの中に2つのa要素を持つとリストが分割される。
      • data-split-iconで右側アイコンを変えられる。
      • インデックス表示も可能にlist-divider
      • ＜span class="ui-li-count"＞{数}＜/span＞でカウントバブルを表示出来る。
    • CSS（テーマ、スウォッチ）
      • jQueryMobileではa〜eの5つのテーマが用意されている
      • f-zに独自のテーマを割り振る事も可能
      • ただし、設定出来る項目は膨大なので1から作るのは心が折れる･･･
      • 既存a-eをベースにするか、テーマローラーを使う。
      • cssの中を覗くと、/* Swatches */ と始まるセクションの中に各A-Eのテーマの定義があるので、それを流用。
        • 詳細な説明は無し。苦労するかも･･･
        • テーマローラー：ツール。
    • スクリプトで一括設定
      • ローカライズや共通設定は起動時に一括でやってしまう。
      • jQueryMobileが実行されると、documentオブジェクトのmobileinitイベントが呼び出されるのでその中で処理をする
      • htmlでのタグ順序に気を付ける。
      • （ローカライズの設定例）
        • jquery本体の読み込みとjQueryMobileの読み込みの間に右記のスクリプトを走らせる。
        • 戻るボタンを全画面で出したい場合の対応
        • ajax制御等など。
        • configuring_defaults 日本語
  • jQueryMobileはどんな仕組みなのか
    • htmlの中にdiv data-content="page"として記述：jQueryMobileのフレームワークが勝手にモバイル用に変換、表示
    • 複数ページを設定可能
    • pageを分ける
      • 実際どうするのが良いのだろうか？
      • 状況によりhtmlを分ける：1つのhtmlの中にpageを何個も作っていたらサイズが大きくなる
      • htmlをひとまず分けてみる
      • 分けたものを実行するとどうなるのか
        • 遷移後、ボタンを押下してもアラート窓が出ない
        • どうも、スクリプトが動いていない？
        • ブラウザのデバッグ機能を使ってコードの挙動を確認
          • 上手く情報の取り込みが行ってない模様･･･。
          • data-content="page"の部分だけ読み込んでおり、スクリプトの部分は読み込まれていない。
        • 選択肢：
          • 無理矢理スクリプトを読み込ませるようにする→あまり美しくない。
          • ajaxロードを回避→全体的な対応／部分的な対応が可能
          • ※どちらを選択するかは設計等々の条件による
  • jQueryMobileの事例を見てみる
    • jQuery Mobile Gallery
      • 山ほど事例あり。
      • ただ、実装方法が良いかどうかは別の話。
      • 日本語：MiseDas
    • 事例をみて分かること
      • pageはどう分けるか
      • jQueryMobile標準の部品はどうするか
      • PCサイトとモバイルサイトをどうするか
      • 『戻る』ボタン対応
  • jQueryMobileの課題とこれから
    • jQueryMobileの不便なところ
      • 冗長な記述
      • いじろうと思うとそれなりに大変
      • 不安定なヘッダ・フッタの固定や表示・非表示機能
      • 便利なような便利じゃないような機能達
      • 重さ
    • jQueryMobileの便利なところ
      • 開発は早く出来る
      • モックを作るには便利
      • デザイナーとの協業にはもってこい
      • ユーザー（とユーザー予備軍）の多さ
  • まだまだ進化途中のフレームワークなので、欠点を把握しつつ、使える範囲で使って行くのが良さそう。
    • 次期のバージョンでどうなるか
      • 春までに1.0.1（済）→1.1→1.2とバージョンアップ予定。
        • 1.1：2月中旬・下旬
        • 1.2：3月〜4月位？
        • 今後に期待！
  • jQueryMobileとPhoneGapとを一緒に使ってみる(各種解説を交えて)
    • Phone Gapって？
      • カナダのnitobi社が開発。
      • 2011/10月にadobe社により買収
      • 最新バージョンは1.3.0
      • jQueryMobileはPhoneGapをサポートしている。
    • 開発環境構築(iOS)
    • 開発準備
    • ファイルの配置
    • ホワイトリストの作成、設定
    • カメラロールから写真を撮ってみる
  • まとめ
    • htmlとjsが分かっていればネイティブアプリが作れるというのは嬉しい
    • ネイティブアプリと同じ操作感を出すのには苦労するかも
    • 標準で用意されているプラグインでは足らず、独自にプラグインを作らないとアプリ作成は難しい
    • デバッグ大変。
    • 既にWeb版のアプリがあってそれに端末固有の機能を使いたいからネイティブアプリ化する、というのはアリかも。

Q&A(パネルディスカッション)

ここからは、事前に回収されていたアンケート回答にあった質問に対し、今回のスピーカーお二人に加えて、福田 寅成氏(TwitterID:@cronoloves)もパネルディスカッションに併せて参加されていました。各種質問に山本氏・友田氏・福田氏のお三方が回答される、という形です。尚進行についてはタケハラさんがつとめて居られました。ビアバッシュを交えての質疑応答タイムです。

    • Q：PhoneGapを使用した際に苦労したこと。
      • ぶっちゃけ言うと、案件で使うのを検討はしたけどボツになった。らしい
      • お客さんがネイティブの動きを求める＝無理だな、という判断に。
      • iPhoneのリストの動きをHTMLで求められてしまう。
    • Q：様々なツールがあるが、実際に開発出使ったもの、またその際に感じた得意、不得意な事などを教えてください。
      • PhoneGap, TitaniumMobile
      • PG：WebViewの中で頑張る
      • Titanium：jsで作ったモノがネイティブに変換される
      • 開発の思想が違う。
      • 速度が違う。
      • PG：HTMLはネイティブ風にはなるけれどネイティブにはならない。
    • Q：1：細かなレイアウトカスタマイズの方法について、2：多言語（PHPやJava）との親和性について。
      • 1：デザイン
        • フルカスタマイズはやったことない。テーマローラーや既存資産を使いながら進めるのが賢い方法。
        • 細かい注文をこなすための余計な工数が掛かる可能性があるのでは？
      • 2：サーバとの連携
        • jQueryMobileを使って行くと、Flex/デスクトップアプリ等のように疎結合の作りが可能。
        • サーバ側の言語はあまり気にせず作れる。
    • Q：非力な端末には処理が重すぎると聞いたが本当か？Webサービスと一体的に開発する時のノウハウがあれば伺いたいです。
      • 処理が重い、トランジションの動きがお客様の求めている形で再現するのは難しい場合がある。
      • サーバ側はAPIサービスの形にして、クライアントから通信を行う方法（疎結合）の方がベター。
      • 相互に影響の無い形・構成にするのが良いのでは。
    • Q：ガラケーではFlash,スマホではHTML5/CSS3により同じようなアニメーションを作成するとした場合、どういった事に気をつけて仕様を決めますか？
      • Adobe Edgeはまだヌルヌル動くよ。これからキーになっていくのでは？
      • 色々なプラットフォームに吐き出すツールが出てくるのでは。
    • Q：スマホ上でHTML5/CSS3を使ってアニメーションを作成する際のベストプラクティスがあったらお伺いしたいです。
      • ツールがあまり出ていない。ツールがないと頑張ってプログラムするしかない。
      • 実案件クオリティのツールがあるかと言われれば厳しい。Edgeが有望視されてはいるが･･･

所定の質疑応答が完了した後は、追加で(その場で)質問を受け付け、ディスカッションが続く形となりました。

冒頭で述べたように、jQueryMobile自体の予習は殆どせずに臨んだ今回でしたが、2セッション共に非常に分かり易い解説、説明でお話を聞くことが出来ました。普通にHTML/CSS/Javascriptが読み書き出来るのであれば全然問題無く扱えるのでは、という印象です。

ただスピーカー陣の方々も仰られていたように、まだまだ十分な本番実用に足りうるレベルには達していない部分もあるようです。今後のバージョンアップで改善・向上される事を願いつつ、現状は用途に応じて選択していく、という形が吉なのかな〜と言うのが個人的な感想でもありました。

この辺りはライブラリもそうだし、開発環境的にも色々試してみたい(Eclipseの他にもWebStorm等で)部分もあるので、簡単なサンプルアプリ程度のものでもサクッと試して見たいところ。


また、今回行われたこの『Mobapps』はシリーズとして今後も続いていくようです。次回以降の内容にも期待したいですね。