JAPANESEENGLISH

越川によるADC MEETUP ROUND 07–MAX RETWEET参加レポート-株式会社スカイホビット

[2013/06/22(Sat)]

越川です.こんにちは.

AdobeのイベントADC MEETUP ROUND 07 – MAX RETWEETに行ってきました. 会場は目黒の目黒雅叙園.和室の会場で,靴を脱いで座布団に座ってのセミナー聴講でした. 和室でのセミナーなんて弊社だけ(3年前に豊洲文化センターの和室でイベントを開催しています)と考えていたのですが, Adobeも和室でとは,驚きました.

要はCreative Cloudの宣伝イベントですが, 技術的に強く感じたのはJavaScript(EcmaScript)の進化,もはやスクリプトではありません. JavaScriptも仕様の拡張やクロスコンパイラの充実により,中〜大規模なシステムも書きやすくなってきています. かつてデザイナー系の技術のメインストリームがDirectorからFlashに移行したように, いままさにFlashからHTML5・JavaScriptへの移行が進行しており, タブレットやその先の新たなユーザーインターフェイスへの対応とともに, 大きなビジネスチャンスが広がっています. 一方のFlashも,SCOUT CCの充実など,まだまだ進歩していると感じました.

セミナー後の抽選会で,Adobe Creative Cloudの 3ヶ月分の権利が当たりました.Adobeの皆様ありがとうございました.

前回にAdobeのイベントに参加したのは2009年1月のAdobe MAX Japan 2009.当時の参加レポートを振り返ると,IT業界の日進月歩を感じます.

以下,私が聴講したセミナーの紹介です.1コマ目の大雅さんのセミナーはpreタグのコピペで恐縮ですがメモを公開します.

●1コマ目 JavaScript 実践講座:フレームワーク,ツール,パフォーマンス

講師:廣畑 大雅さん

MAXのセミナーのプレゼンを日本語で解説

2013/06/28追記:ADC MEETUP ROUND 07 発表資料

2013/06/28追記:オリジナルの動画

詳しくはググってください. 問題 一貫性のないブラウザ IE8以前,IE9以降,AttachEventから,AddEventListener 解決策 Polyfills 古いブラウザでもモダンブラウザと同等の機能を提供 ライブラリ html5shiv / html5shim selectivizr es5-shim Mozilla Developer Network samples(これはライブラリではなくサンプル集) JavaScript Library テスト用のライブラリ 特徴点検出 moderinizr (zとrの間にeは入らない) 条件分岐をするのに使う YepNope Ease of library use Library bundles たとえば,HTML5 Boilerplate Package Managers たとえば,Bower Scaffolding generators たとえば,Yeoman 将来 ブラウザの改善 古いブラウザは駆逐されるでしょう. これまで以上に早く近代化している. ブラウザのシェア www.w3counter.com/trends 問題 スパゲッティコードの改善 RequireJS 解決 Modules in ES6(Ecma Script 6) Harmony(コードネームはHarmony) モジュール機能で解決デキる. 問題 非同期コード 非同期プログラムは難しい. 解決 ライブラリ:Promises 非同期処理完了のリスニングをしてくれるライブラリ リスナーにはオブジェクトが返される. Promise chainingでは,無名関数のコールバックによるピラミッド型プログラムを回避できる.すばらしい! 将来 ES6 Harmonyでは "yield"という修飾子があり,非同期を同期的に書ける.task.jsと併せて使うとさらに効率的. 問題 限定的なUI更新 手作業によるスパゲッティ化が進んでしまう. 解決策 テンプレート機能や,MVCのフレームワークを使おう. Viewは, Underscore テンプレート Mustache 多くの言語で使えるテンプレートエンジン Handlebars JavaScript用のテンプレートエンジン Model Backbone.js モデルはBackbone.jsを使うと良いのではないか. Controller Knockout MVVMのフレームワーク.データのバインディングやUIの自動更新,テンプレート機能,依存の解決. Batman 普通のMVCフレームワーク.データのバインディングなど. Ember これは,作っていた会社がFacebookに買収された. Angular 最近人気があるらしい. Knockback これはKnockoutとBackboneのいいとこ取り. GitHubによる最近の人気JSフレームワークは, BackBoneがずっと1位だが,Angularが急に伸びてきて2位. ES5にはGetters / Settersがある. Ember, Backboeでも綺麗に書ける.Knockoutでも.Serenadeでも. 問題 サーバのログ 従来のWeb1.0では,サーバとクライアントを常に往復しまくっていた. サーバのクラッシュや,サーバ上の遅延が起きると問題. モダンアプリはクライアント処理が主流だが,どのようにクライアント端末上のクラッシュや遅延を知ればよいか? 解決 ログ機能を使おう window.onerror = function( などとして,5000ミリ秒単位で送ろう. 将来 フルスタックトレースになるのではないかな? Toolについて. 問題 シートベルトなし運転 素のJavaScriptは, 型チェック無し,変数の型が動的に変更可能,暗黙の型変換,構造化が不足,繰り返される決まり文句の表記. 解決 統合解析 / Linting コンテキスト スニペット ヒントを超えた情報.ソースを遷移して移動するのではなく,見ているエディタに別のエディタが開かれる機能. 完全にインタラクティブな編集 型推論 エディタの補完機能が進化している.勝手に変数の型を変えられることがなくなるんじゃないか. クロスコンパイラ 素のJavaScriptなんて書かない. TypeScript, CoffeScript, HAXE, DARTなどから,JSを書く. HAXE推し.クロスコンパイラの考え方はは良い. ソースマップ 書き出す前のコードと書き出した後のソースを対比させて表示させる. 繰り返しのデバッグが良い. デモ Create.jsを使ったライブラリ. HAXEを使っている. HAXEは,JavaScriptを吐き出す前のコードで,トレースデバッグできる.enable source mapの機能を有効にすると使える. 問題 パフォーマンスの評価が難しい. CSSや色々のロード時間の評価が難しい. パフォーマンスツール Chromeのツールで,Timeline panelとのツールがある.パフォーマンスツールを動かすためのデモがある. FPS counter ブラウザの右上に小さなウィンドウが出て,fpsを表示する. (chrome://flags で使える.大雅さんのPCでは,消えなくなってしまったとのこと.) CSS selector profiling Repaint rectangles Render layer borders これらはWebDev2 セッションで詳しく解説 将来 W3Cが,プログラマ向けAPIを作る予定 Resource Timing ページの各リソースの読み込みタイミング Async Scroll スクロールのパフォーマンスをテストする. Display Performance フレームレート関連API.

●2コマ目 Scout CC / 誰でもできる Flash パフォーマンスチューニング

講師:Andy Hallさん

FlashプロファイラのScout CCについて.ビジュアルな機能なのでテキストでの議事録は略します.

講師のブログのAdobe Scout CCの新機能紹介が参考になると思います.

●3コマ目 明日から使える!プログラマーのための HTML5 詳解

講師:野村 政行さん

丁寧なスライドでわかりやすかった.スライドは近日公開予定とのことで,メモは略します.

プレスリリース・ニュース

トップページ