Technology

第15回「HTML5とか勉強会」に参加してきました

2011-11-27Event

場所はGoogleの東京オフィス。Googleは何回か行ったことがありますが、Googleらしさをいつも感じています。この前行ったのは4か月ほど前でしたが(Google 日本語入力の技術講演会に参加)、勉強会に使われる部屋の前にそれまでなかった電飾をあしらった看板があるなど、Googleらしいと思いました。ほかの勉強会でもGoogleの東京オフィスが使われるので設置したのかな。

twitterのハッシュタグは#html5j、 Ustreamはhttp://www.ustream.tv/channel/html5jです。

1. jQuery Mobile [基礎編]

Speaker : スタッフ 吉川さん(@yoshikawa_t)

jQuery MobileはモバイルWebアプリケーションのフレームワークの一つである。モバイルWebアプリケーションのフレームワークについてはhttp://ascii.jp/elem/000/000/569/569140/を参照すると良いと思います。

モバイルの特徴としてCPUやメモリがpoorという点が挙げられ、jQuery Mobileはライブラリのサイズが17KB、CSSのサイズが7KBとなっています。 → Download | jQuery Mobile http://jquerymobile.com/download/

jQuery Mobileの話は前々から聞いていたので、個人的に面白いと思った点を何点か。

  • – クロスプラットフォーム。過去3年間に発売されたデバイスに対応予定(対応表http://jquerymobile.com/gbs/)
  • data-icon属性をつけると、ボタンにアイコンを付与してくれる。18種類くらい用意されているみたい。便利。
  • fieldsetタグでボタンをグルーピングすると、ボタングループとして表示させてくれる(validなHTMLを書こう)
  • テーマは5種類用意されているし自分で作ることも可能
  • DOM変換される場合もあるので、確認しながら使う。
  • Dreamweaver CS5のプラグインも提供予定らしい

2. GREEのHTML5対応

Speaker:GREE 熊谷さん(@ku)

HTML5のおすすめ機能とハマりどころとAndroid事情。

2010年8月9日にリリースされた、スマートフォン向け(iOS+Android)ウェブサイトの構築についてのお話。http://t.gree.jp

開発期間は1か月程度しかなかった。

  • Full ajax vs HTML : HTMLはレンダリングに時間がかかるので待たされる、ajaxのほうが早い。なので、Full ajaxを選択。Full ajaxだと画面の更新がないから、メモリリークがどんどんたまっていってしまうという問題があるが、とりあえず現状では問題になっていない。GCがうまい具合に働いているのかも…?
  • Server-side rendering vs Client-side rendering : 時間がなかったためあまり検討できず？
  • ライブラリ : iUiとかjQuery MobileとかjQTouchとかあるけど、AndroidでiPhoneっぽいのもどうかと思ったので自作

おすすめ機能

  • HTML Forms : placefolder属性、type属性。画面の節約、キー入力の煩わしさをある程度解決。iOS4.0未満はtextareaのplaceholderがきかない、Android1.6だと挙動がおかしい。Androidだとパスワードを覚えてくれないみたいなバグがあるみたい…？
  • CSS3 : transform-3dはiPhoneではGPUのサポートがあるのでぬるぬる動く。JSでアニメーションさせるのに比べて高fps、低ジッター
  • Web-Storage : ドメインごとのKey-Value store。JSから扱いやすいし、サーバには必要のないデータを送らずに、端末内にとどめておける。1回だけ表示させるようなもののステータスを入れておくのに便利。

Android事情

  • Animation GIFがうまく表示されない → Canvasで描くか、JSを使えば…、とG社の人に言われたみたい
  • Device Pixel Ratio : 指定したピクセルと、端末上でのピクセルが一致しない。なので画像がぼやけて表示される。解決策は(1) 2倍のサイズの画像を縮小して表示する。(2) meta属性を付与する(viewport)
  • 絵文字が使えない。グリフがたりない。

LT-1 iGoogle風のポータルページ by HTML5+OpenSocial+Raptor

Speaker:東京工科大学大学院 井原さん(@yutaro_i)

HTML5+Shindig+Raptorを使って、iGoogleっぽい(ガジェットを自由に配置できる)ページを作るというお話。OpenSocialについてはhttp://code.google.com/intl/ja/apis/opensocial/が詳しいかも。

Shindigのキャッシュに関することと、Drag and Drop APIに引っ掛かりがあったとのこと。

LT-2 HTML5で実務iPadアプリケーション

Speaker:GENOVA 山崎さん

http://genova.co.jp/news/110126/(日本経済新聞に、当社の新サービスである、「iPadを活用した歯周病検査支援サービス」が掲載されました。)に関連したお話、なのかも。

Webアプリを操作しているとき、不意なリロードをしてデータが消えてしまうのを、WebStorageを使って解決した話など、APIがいろいろ使えるよというお話。

LT-3 WebSocketで椅子取りゲーム

Speaker:坂本さん(株式会社東雲)

Node.jsを使ったサーバとWebSocketでやりとりするデモとして、椅子取りゲームの発表。

LT-4 e-LearningフレームワークMeSH

千葉工業大学　須田さん(@suda_hiroshi)

MeSH日記より

MeSHは、Multimedia e-Learning based on Simulator for Higher educationの略です。シミュレータをベースとしたe-Learning環境構築のためのフレームワークを開発しています。

MeSHはWebブラウザを通じて提供する、e-Learningシステム。

業界のiPadに対する反応は、教科書を何冊も持ち歩けるなあ程度。理工系の学習として、たとえば、シミュレータのパラメータを変えてどうなるかを見せて、授業で使いたいと考えている。それを実現させるための枠組み。

Nylonというキーワードベースのモジュール刊通信制御モジュールを使っているみたいですが、詳細不明…。私の聞き間違いかも…。

3. Titanium Mobile Apps

Speaker:Appcelarator 増井さん(@masuidrive)

Titaniumは”タイタニウム”と読む。Titanum Mobileを使ったアプリの紹介。

Bookmark this on Hatena Bookmark

Topic