ホーム » プログラミング » HTML5とか勉強会#30

HTML5とか勉強会#30

白石サンの主催するHYML5とか勉強会にお邪魔してきました。
これで2回目の参加ですが、懇親会まで参加できたのは初めてです。
そして、初めてのgoogleさんッ!!

session 1

jQuery.mobile

Quote …

jQuery Mobileは、デザイナもプログラマも構築しやすいようなFWを目指して作られた。

デメリット

  • 重厚長大
    => ルール付けや縛りが大きいのでカスタマイズが面倒くさい
  • 凝ったデザインのサイトを作成する場合は、難しい
    => ある程度の枠組みに沿って作成する為、細かな部分を修正するのは大変
  • デバイスによっては遅い
    => もっさりする場合もある

使いどころ

  • モックやプロトタイプ、業務アプリなどを、さくっと作りたいときには最適
  • そのために、オリジナルテーマやデザインをあらかじめ用意しておくとよい。

注意

デザインにこだわりを出したかったり、ハイパフォーマンス対応する場合は、
コストが倍増する可能性が高い。

参考サイトなど

  • 15VISION
     レスポンシブウェブデザインをjQueryMobileで実装している
  • ThemeRoller
     jQueryMobileのテーマが作成可能

総括

  • 簡単なので、まずはやってみることが大事
  • 案件によって、合う、合わないがある
  • ノウハウはいっぱい世の中に溢れてるので、ぐぐれかす。

Note …

  • 登壇者は、sublime textを使ってました。そういうツールをチェックするのも勉強会の醍醐味です。
  • 参考になりそうなスライドも併せてチェックすると理解が深まるかもしれない。
  • 業務用・・・と聞いて確かにな、と思いました。こくちーずも使ってると思うんですが、面白みが一切無いし、型が決まってることは諸刃の刃になるんだなと実感しました。全てに対応できるようなFWは現状存在しないということかもしれない。

session 2.

Sencha Touch by @naotori

Quote …

  • ライセンスは無償の商用ライセンスとGPL
  • Sencha Touch2は、前バージョンに比べて裏切られたと感じるくらい、ほぼ完全な作り直しとなっている。
  • 作成されたソースはjQuery Mobileに比べるとデザイナには取っつきにくい。
  • 構築方法としては、configオブジェクトを作ってそれが、画面になるイメージ。
  • ゲームを作るときは向いていない。
  • 業務アプリなどの堅いものを作るときに使うとよい。
  • app galary上には柔らかいものもあるけど、パソコンで使ってた業務アプリを、これでリプレイスすることが多い。つまり、使い慣れたMVCモデルで構築できるFWが求められ、このJSのFWが生まれた。
  • 比較対象は特になく、上記の理由で生まれたことからも、住み分けされている印象。

Note …

  • MacVim使いだった。こういうFWを使うときはいかにエディタと親しいかが勝負になるなと思いながら見てた。
  • jQuery Mobileと対象は似ているけれど、組み方や作成されたソースを考えると、より業務的な印象を受ける。ただ、こちらのほうがデザインで凝ろうとした時に難しそうな印象も受けた。

session 3.

dojo mobile by @yutaro_i ( from mixi )

Quote …

  • 全体的にイケてない。
  • コードを見ても、いくらでもダメ出しできる。
  • ちょっとHTML5のトレンドから外れたところがある。

Note …

  • 発表のために調べたということで、実践的に、どうなのか!がわからなかった。
  • この内容を聞いただけでは、使おうとも辞めようとも思わないけれど、新しい技術を使うときは、それがどのように組まれているかまで見る姿勢は見習いたい。

session 4.

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

Quote …

FW名 売り どう組むか コメント
Kendo UI Mobile プラットフォーム固有のルック&フィールをエミュレートする jQuery Mobileを知ってればすぐに作れる
=ほぼ同じ
  • jQuery Mobile とコンセプトはほぼ同じ
  • 会社が作ってるので、クオリティ高い
  • jQueryMobileよりも対象範囲が広いかも
  • ただ、お金がかかる
jQ.Mobi サイズが小さい(約 3/5) jQuery Mobileを知ってればすぐに作れる
=ほぼ同じ
jQuery Mobile とコンセプトはほぼ同じ
app-UI あのAdobeが紹介してた スタックにviewを積んで行くイメージ
  • 横にスライドする事に特化
  • 部分だけ欲しいというときに使える、かも
  • 開発自体はもう止まってるっぽい
  • 用途に特化している

今後は、フルスタック型と用途特化型のライブラリに分かれて行くことが予想されるため、用途に合わせて使いわけていくことが求められる。
たとえば、

納期重視=フルスタック
クリエイティブ重視=オリジナルUIとライブラリ

session 5.

パネルディスカッション

特に印象な箇所をピックアップします。

  • JS書けないマークアップエンジニアにモバイルFWは向いているとおもわれる。
  • PhoneGapがAdobeに買収された意味を考えよ。
  • マネタイズするときは、ネイティブで組むことが必須。
  • BaaSが面白くなってきており、今後はサーバサイドに対するバックエンドサービスが充実してくるかもしれない。
  • クリエイティビティが求められるページを作るときに、jQueryMobileを使うか?
    => 使わない。用途が違う
  • Sencha Touchは、結局遅いですか?
    => ページの遷移が遅い。組み合わせが悪いだけのこともあるので、頑張れば、少し早くなる。ただ、もちろん、向き・不向きはある。
  •  FWはクリエイティビティを薄める効果も見受けられる。つまり、見た目が全部同じになりがち。
  • 開発者はスライドさせることが好きで、これにより、体感的に早く見せているつもり。
  • 現状、iOSのJSアプリは仕様により、8倍遅い・・・。今後変わるかも。
  • ウェブはどんなデバイスでも同じように見られるのがよいのであって、それぞれのデバイスに特化した内容であれば、それはそもそもウェブではないと考えている。
    レスポンシブ・ウェブ・デザインは今後主流になってくると考える。
  • レスポンシブをjQueryMobileで行おうとすると、PCも同じように作らなきゃいけなくなり、失敗したことも (参考記事

懇親会

30周年ということで、特別なちらし寿司やケーキを横目に、会がスタートしました!

個人的に気になってたことがあったので、白石さんとSenchaの講師だった直島さんに直接お話させて頂きました。

白石さんとWindows Metroの話をふっかけて、Win8とはいえ、アプリなので、対応は必須ではない。
直島さんには、個人的にやりたい勉強会があったので、深堀をしたところ、

WebFWはHTML5の標準規約に載った機能しか対応できない。

と今更教わりました。現状は到底、ネイティブには適わない!

まとめ&考察 …

素早く作れるという点で、jQueryMobile然り、ブートストラップ然り、注目してました。

でも、今日の内容から考えなおしてみると、「早く作れる」は確かに満たせるけど、それ以上でも以下でもないのかなと。
見せかけだけ良い、どこかで見たようなものを一瞬で見せられたとして、本当にそれが望ましいのかわからなくなってきた、といいますか。

確かにすぐに動くものを作れればいいかもしれない。
でも、それはDreamなんちゃら使ったときに自動作成されるような糞コードと同様、一時しのぎに過ぎないわけです。本当にそれがしたいのか?と言われれば、 Noだなぁと思ったのです。
ケースバイケースといえど、複雑な気持ちになりました。

Windows Metroについては、アプリだということを考えると、けして流行っているように感じないMacのAppストアと位置が同じなのかな。としたら、一般的なユーザは基本的に使わないはず・・・? タブレットの使い勝手が、PCにも求められるかという予測は、そんなにすぐに行動に出てくるものなのかな。iPhoneでできたことが、Macでもできたらいいな?ん~、そもそも用途が違うし、イメージがつかない。でも、iPhoneに慣れると、小さい端末を触るときについ画面に触れたくなってしまうw たとえば、対応してないデジカメとか。人の欲望は尽きることないという観点で、PCも求められる時代になるのかな。日本はクレーマー大国で、もっともっと!をきっと欲しがってるのかもしれない。そういう目線を意識するとありうるのかもしれない。

本当は、白石さんにmobile firstの話を聞きたかったので、やや消化不良でした。懇親会では常に誰かに囲まれておりましたから!

クリエイティブを追求するのであれば、ネイティブ以外に方法はないようです。うまくできておる。そして、これからもHTML5の動向はチェックしなきゃいけないし、ネイティブスキルも同様に磨かなければならんのやー。

資料 …

動画

スライド資料

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中