モバイルWebアプリのこれまでとこれから。

バタバタしていて遅れましたが、先日とあるセミナーでお話しさせて頂きました。

すみません、最初にお詫びします。「Sencha Touch VS jQuery Mobile」というタイトルですが、その内容は一部しか出てきません(--;
別件で調査していた内容を盛り込むでいくと、どんどんそっちが膨らみ、「モバイルWebアプリのこれまでとこれから」という壮大な内容になってしまいました。副題がメインを喰ってしまった!しかも、無駄に枚数膨らんで全部で186p!w

(主題の方を知りたい方は以前作ったスライドのほうをどうぞ)

スライドに盛り込めなかったフレームワークはまだまだ沢山あって、いつかまとめて書いてみたいです。

また、最後の BassS と Webサービスのリベンジ というところ、全く私の勝手な妄想ですが皆さんはどうお考えでしょうか??まだ全然詰め切れてないですが、もう少し考えてみるべき面白そうな議題と思っています。ぜひコメントなど頂けると嬉しいです!

jQuery Mobile & Sencha Touch ハンズオンやりました

昨日、こちらのハンズオンイベントで講師させて頂きました。

AITC第2回勉強会「jQuery MobileとSencha TouchでWebアプリを作ってみよう!」~ 2大スマホ向けWebアプリフレームワークを使いながら比較 ~

猛暑の中、30名近い参加者にお越し頂き、ありがとうございました。

IT関連ではない会社や、マーケティング部などの非エンジニアの方々や、遠方よりこのために参加頂いた方々、学生さんなどなど、多種多様な方に参加頂きました。

資料のまとめは前回のエントリで。
jQuery Mobile & Sencha Touch ハンズオン資料まとめ

ある程度予想はしていましたが、やはり環境構築が鬼門でした。今回、node.js+express や、ruby + compass など非エンジニアの方には馴染みが無いツールを使う演習のため、本質的では無いところで時間がかかってしまったのがやや残念です。

とりあえず勉強会として、良かった点、改善すべき点などをまとめてみます。

良かった点

jQuery Mobile と Sencha Touch を同時に扱うというテーマはなかなか面白かった

同時に見比べられるので、非常に違いが分かりやすいと好評を得ました。1回で両方できるお得感はあったので申し込んだ、欲張りすぎるww などの声も頂きました。

実は、当初は3つにするとか、もっとオープンデータを使うだとか、かなり要望は膨らんでいましたw
なんとかコンパクトにして、あのボリュームでした^^;

どちらも一通りの流れを、順を追ってできた

段々機能を追加していき、完成度を高めていくようなサンプルが良かった、という声も。
当初は完成形だけ用意して、部分コピペで進めていこうかと思ったのですが、初心者が多そうだという事前情報から、前日に段階的にできるサンプルに作り替えました。進める側からも、これはやっておいて良かった。あの状況だと部分コピペで進めるのはかなり厳しかったでしょう。。。

コピペでもとりあえず手元で動かせた

なんとか全員環境を構築できたので、手元で動かせる環境が作れて良かったです。
とりあえずは演習資料をそのままコピーでも、動かせる環境が手に入った、というの大きかったのでは、と思います。これできたので、あとはサンプルをちょこちょこいじりながら自分で勉強することもできます。あと、エディタも今回初めて Sublime Text を使ってみたけど良かった、という方も。

反省・見直しが必要な点

環境構築はアナウンスとかやりかたをもっと考える必要あり

今回演習の中でそれぞれ環境準備を20〜30分ほど予定を入れていたのですが、全然足りませんでした。演習の中に、特に最初に入れてしまうと、全体の進行が止まってしまうため、あまりうまい方法ではなかったですね。

インストールできてない方は早めにきてセットアップしてもらうとか、出来ている人は演習を進められるような流れにすれば良かった、という反省があります。そうすれば、進められる人は自分でコードをカスタマイズしたりして理解をもっと深められたかなぁ、とも思いました。

また、事前インストールの件があまり告知しきれてなかった問題もあります。イベント告知や申込が色々と分散されたのも情報共有漏れが起きる原因の一端ですね。この辺りは運営側の事前準備不足でご迷惑をおかけしました。

全体的にやはり詰め込みすぎ

環境構築もさることながら、演習内容もかなり詰め込み過ぎた感はあります。特に後半は早すぎて理解が追いつかない、とか自分でコードを書く暇が無かった、ということに。もっと自由にコードを書いてもらう時間を作りたかったですね。。

2つ同時にやるというテーマ自体は評価されたのですが、ハンズオンとするとどこまで踏み込むか悩ましいところです。コピーしてなんとなく動いた、というだけじゃ面白くないですし、どこまで解説するか難しい。

Sencha Touchが難しい印象を与えてしまったかも。。

みんなに言われたのが、Sencha Touchが難しすぎる、と^^;;
これは私の伝え方が良くなかったです。すみません。。言い訳するとちょっと時間がなさ過ぎた。。。ま、参加者の半数くらいは聞いたことない、というので仕方ないところも。しかし、JavaScriptに馴染みが無い人に言われるのは仕方ないですが、JS書く人にも言われたのはややショック。Sencha Touchを簡単に教える方法教えてください・・・・

その他

・アンケート出し忘れた。。 参加者の方には後日Webアンケートの案内をお送りします。
・後半、自分がだいぶ息切れして、ちょっとテンション落ちてしまってた^^;
・教室の温度がちょっと暑かったかな

総評

反省すべき点も多々ありますが、一応予定していた内容を全て時間内に終わらせ、参加者の皆さんにも開発環境とコードというお土産を渡せることができたので、まずは良かったんじゃないでしょうか。
私自身も大変勉強になりました。
参加者の皆様、スタッフの皆様、長時間お付き合いいただき、ありがとうございました!お疲れ様でした!

このカリキュラムをもうちょっと改善して、またリベンジしたいですね!w

jQuery Mobile & Sencha Touch ハンズオン資料まとめ

いよいよ明日に迫ったAITC第2回勉強会「jQuery MobileとSencha TouchでWebアプリを作ってみよう!」

半日でどっちも触ってアプリ作るという無謀な企画です。なんとか資料作成間に合いました。
とりあえず Slideshare に上げたのですが、バラバラとなってしまったので、こちらでまとめます。


最初の資料


まずは jQuery Mobile概要から


jQuery Mobileのハンズオン資料

続いて、Sencha Touch概要


Sencha Touchハンズオン資料


まとめ


なお、サンプルコードはこちら。Sencha Touch を含んでいるためGPLとなってます。


全部合わせると、総ページ数 91枚とかなってた。。
どおりで終わらないわけだw

しかし、これどこまでできるのだろうか。。。
戦々恐々です。