『AR + HTML5』HTML5名古屋 #1 で発表した話
HTML5名古屋について
昨年の2012年12月に名古屋を中心としたHTML5勉強会の『HTML5名古屋』が発足し、2月8日に『HTML5名古屋 #1』が行われました。
今回はそのレポートとなります。
イベントのtogetterはこちら
HTML5でいろいろ作ってみた紹介 @sugimoto1981 さん
- Canvas APIやCSS3 Animationを用いてHTML5でWindows8のMetro UIを再現。
- GAMEPAD APIなどを用いてドラクエ風のインターフェースをPlayStationのゲームパッドで動かす。
など、今までHTML4では表現出来なかったようなインターフェースをHTML5で実現したサンプルをいくつか紹介するお話でした。
GAMEPAD APIは存在を知らなかったけど、Webサイトをゲームパッドで動かせるというのは素敵ですね、これは今後触ってみます。
英語ですが、GAMEPAD APIのわかりやすいチュートリアルがありました。
http://www.html5rocks.com/en/tutorials/doodles/gamepad/
CSSについては、最近頻繁に参加するようになった、全国的にも活発な活動を展開しているCSS Niteなどを中心に今とても話題に上がっている分野だと考えています。
現状だと未だブラウザ依存が強いですが、特にアニメーションや特殊効果などのCSS3によるリッチな表現。
例えば、こういうのとか（webkitブラウザでご覧ください）↓
http://html5-demos.appspot.com/static/css/filters/index.html
さらに、SassなどのPreprocessorに関する人気も本当に高まってきています。
そろそろモダンなCSS表現に関するコアな話がメインの勉強会なんかもあるといいですね。
AR + HTML5 @eiji_sm
ブログの右上にも出ているARサービスと、HTML5を絡めてお話をさせて頂きました。
ここではその内容のまとめの一つについて少し言及したいと思います。
多くの場合、サービスを作ることにおいて、Webブラウザ上の技術で解決できる問題というのはそれほど多くありません。
それは当然、HTML5というWebブラウザ上の新しい技術にも言えることで、ニーズを満たすサービスというのは、そのほとんどが現実世界の物理的な解決になります。ITに絞っても、最近ではスマートフォンのネイティブアプリケーションによるサービスのインタフェースというのは需要が非常に高まっていますし、ARサービスもその部類に入ります。
HTML5というキーワードを出すと、それが魔法の言葉であるかのように、なんでもHTML5で解決できるのではないか、と言った論調になることを最近頻繁に目にしますが、そんな万能なものじゃないよ、と。
一方で、スマートフォンデバイスの普及によって、場所を選ばずインターネットへのアクセスが可能になった。
今までWebと切り離されていた事が多かったサービスでも、そのサービスにおけるニーズを満たすために、Web上での問題解決が今まで以上に試みられることになっていくことは間違いないでしょう。
全てをWeb上で、つまりHTML5によって完結することは非常に難しい。しかし、ある程度の部分は、確実にWebの力で解決するのが望ましい部分があるはず。そこを見つけ出し、多種多様なHTML5 APIの何を用いて、どのような問題の解決に当たるか。
そこを考えていくことが非常に重要となっていくはずだと考えています。
HTML5時代の動画コンテンツ 基礎の基礎 @mypacecreator さん
ご本人upによるスライドはこちら http://sample.ozonenotes.jp/html5nagoya130208/
Video要素と各ブラウザの動画形式に対する対応状況、それから動画を扱う場合に便利なJSライブラリの紹介など、
普段JavaScript書かないよって方にも、とてもわかり易いように纏められてます。
上記スライドぜひご覧ください。
あとは会場では回線の問題で見れませんでしたが、オススメのライブラリという、
Popcorn.jsとそのデモはこちら。 http://popcornjs.org/
まとめ
既に勉強会#2が募集始まってますね。 http://www.zusaar.com/event/539004
名古屋ではまだ、勉強会に参加される方の多くはHTML5のAPI（JavaScript）ゴリゴリ触っているという方はそれほど多くないので、あと数回は技術の基本や概念的な話が多くなるかと思われます。
が、こういう基本的な部分を地道に積み上げていけば、勉強会もしっかりと今後長く存続していけることになると思うので、僕も含めてみんなで勉強会を作っていけたら、とか思ってます。
CSS Nite LP, Disk 26「CSS Preprocessor Shootout」参加した話
CSS Preprocessorとは
CSS Preprocessor、いわゆるCSSのメタ言語、中間言語とも呼ばれるこの技術は、CSSをさらに簡易に記述可能で、しかも変数や関数などが使える。
うまく用いてやれば、CSSの記述量削減や、コードの可読性アップに繋がる。
現在Sass（SCSS）、LESS、Stylusの３つの知名度が高いが、僕はSassが好きで普段でも業務で利用している。
CSS Nite LP, Disk 26「CSS Preprocessor Shootout」に参加して
というわけで2013年1月12日に東京でCSS Nite LP, Disk 26「CSS Preprocessor Shootout」に参加してきました！（遅）
セッションタイトルは以下の通り
- CSSの設計
- パフォーマンスから考えるSass/Compassの導入・運用
- LESS is MORE: CSSプリプロセッサをシンプルに使う
- Stylusが目指す"CSSプリプロセッサ"
- CodeKitで始める次世代Web制作
- 新世代エディタで作る、プリプロセッサー環境構築術
- 環境に合わせて快適コンパイル生活
- GREEを支える技術フロントエンド版
- 毎日の料理のためのSass
- CSSプリプロセッサーの登場・発展から考えるCSSデザインの過去・現在・未来
どのセッションも非常に聞き応えのある内容でした。
個人的にこの勉強会で聞きたかった内容は、Sassのモジュール構成が我流だったため、これから社内のコーディングガイドラインを策定して行くに従って、他社がどうのような構成を取っているのか、でした。
結果としては、他社も大体似たような感じだった。それが確認できただけでも収穫。
タイムリーな話題として、クックパッドの池田さんによる『毎日の料理のためのSass』がコーディングガイドの話をされていたので、参考にさせていただこうと思っています。
以下、気づき
AngularJSについて 〜AngularJS ハッカソン#1に参加してきました〜
AngularJSとは
AngularJSはグーグル製のJavaScript MVCフレームワークです。
僕はこれまでJavaScriptのフロントエンドMVCフレームワークとしてBackboneJSを愛用していました。BackboneJSは現在最も人気のあるフロントエンドMVCフレームワークです。MVCによるクラス分離はもちろん、柔軟な書き方とUnderscoreJSに支えられた便利な制御構文メソッド、そしてデータバインディングなどが特徴的です。
しかし、BackboneJSを触っているとデータバインディングをもっとスマートに書けないかな、と思うことがしばしば。
そこで最近注目度急上昇しているのが、このAngularJSだったりするわけです。
AngularJSの最も特徴的なこととしては双方向性のデータバインディングが挙げられます。
サンプル
<!doctype html> <html ng-app> <head> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script> </head> <body> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </body> </html>
これはAngularJS公式サイトのトップに載っているサンプルですが、htmlタグにおまじないを付け、それからbody内のタグなどにmodelを埋め込みます。
このサンプルの場合だとyourNameがmodelとなります。
h1には出力用のコードが埋め込まれています。{{ }}での出力表現はテンプレートエンジンのMustacheを連想する方も多いのでは。
inputの値を変更すると、同期的にh1タグ内が書き換えられます。
ng-modelの値はJavaScriptコードとも同期しており、HTML、JavaScript問わず値がすべて書き変わります。
この双方向性のイベントハンドラを利用することで、特にWebアプリケーションの構築などにおいて、これまで沢山のコードを書かなければいけなかったのが、AngularJSを用いることで劇的な改善が見込めると思います。
ハッカソンについて
Google製のプロダクトということもあり、東京のGoogleがイベント会場でした。名古屋勢は僕だけだったのかな？
実際のイベントレポートとしてはFumi's TravelblogさんによるAngular.js ハッカソン #angularjsがとても詳しくレポートされていますのでそこを見ていただければ。
ハッカソンでは少人数のグループをいくつか作り、それぞれAngularJSによるWebアプリケーションを短時間で開発しました。
僕のチームではYoutubeのサンプラーを作成しました。シュールな成果物については、上記ブログでのレポートを見ていただければ (；´∀｀)
さて、成果物について語るのは置いておくとして、ハッカソンでは普段とは違う開発体制ということでいろいろと気づいたことも多かったです。
ハッカソンではDropboxを使うと良い。というのが最近の通説らしい
実際にはGithubを使えるのであればそちらを使うべき。と感じました。
AngularJSはJavaScript（ロジック）がHTML（ビュー）から綺麗に分離されています。それはテストが非常にしやすいというメリットがあるのですが、一方でHTML（ビュー）はJavaScript（ロジック）に深く依存していると感じています。
AngularJSの場合、ハッカソンなどの少単位のプロジェクトにおいては、メインのHTMLファイルを複数人が編集することになると思います。なのでDropboxでの管理は非常に厄介。Dropboxを使うのであれば、一番はじめにきちんと設計を詰めて、各自モジュール単位での開発を徹底しないと厳しい。そしてこれは普段の開発にも通ずるところがあると感じました。
実際に業務で導入する前にこういうちょっとしたトラブルを経験できたのはありがたいです。逆に言ってしまえば、より厳密なモジュール単位での開発がしやすくなるフレームワークであると言えるので、とても興味深い。
まとめ
AngularJSでのインタラクティブなWebアプリケーション実装はとてもうつくしーです。
これまで非常にめんどくさいなーと思いながらFLASHライクな数々のWebアプリケーション実装を高速に開発できそうで今からとても楽しみです。
AngularJSについてのTIPSも今後どんどん溜めていきたいですね。
jQueryUIのsortableで、ソート可能な要素のfilterを指定する
jQueryUIのsortableで、ソート可能な要素のfilterを指定するには以下のように書く
$(sortParent).sortable({items: '.ableSort'});
