12月13日、神谷町のウフル社にて第9回 Apache Cordova勉強が開催されました。今回はAngular2チームの来日を記念して開催されました。こちらはそのレポート記事になります。

Onsen UI 2について by アシアル 田中 正裕

Onsen UIはHTML5/ハイブリッドアプリのUIフレームワークです。WebコンポーネントをベースとしておりAndroid 4.0以上およびiOS8以上、Windows 10でもEdgeなら動きます。オープンソースでAngular2、1両方に対応しています。

ネイティブの場合はUIフレームワークが含まれているので、開発者はUIフレームワークが裏で何をやっているのか気にせずすぐにアプリを開発し始められます。ハイブリッドアプリはその辺りが開発者任せになっています。そこでハイブリッドアプリでもネイティブのようなUI/UXを提供したいという思いでOnsen UIの開発がはじまりました。

Onsen UIでは様々なコンポーネントを持っています。例えば無限スクロール、ナビゲーター、タブバー、スライディングメニューなどです。内部的にパフォーマンスチューニングを行なっているため高速に動作します。

CSSコンポーネントとしてデザインが作られており、複数のデザインを持っています。AndroidならAndroidらしく、iOSならiOSらしく表示されます。各プラットフォームで最適な表示を可能にしています。

Onsen UI CoreはWebコンポーネントのカスタムエレメンツを使っています。外部フレームワークへの依存性がありませんのでjQueryでも使えます。HTMLを記述するだけでUIを構築できます。

新しいバージョン2になって様々なフレームワークに対応しました。Angular/Reactにも対応しています。Vue2への対応を進めています。各フレームワーク向けにバインディングを用意しているので、各フレームワークのお作法に沿ってOnsen UIを簡単に使えます。

Onsen UIは開発者がアプリ開発者にフォーカスできるのを目指しています。せっかくクロスプラットフォームで素敵なアプリケーションを作りたいと思っても、Webブラウザごとの違いやチューニングに時間がかかるようでは実現できません。Onsen UIで抽象化できるところを増やしていきたいと考えています。

その他の特徴として日本製なので日本語ドキュメントもばっちり揃っています。現状、日本からのアクセスは約20%で圧倒的に海外からのアクセスが多いです。

開発事例も色々でてきています。例えばGiro d'Italiaはイタリアの自転車系アプリです。その他、B2CでもB2Bでも実例が出てきています。

TypeScriptとVisual Studio Code by 日本マイクロソフト 井上 章さん

JavaScriptを使った大規模な開発になると色々な問題があります。JavaScriptはWebのアセンブリ言語だとScott Hanselmanがいっています。テストの工数、実行するまでエラーが分からない、メンテナンスが大変になるという辛さがあります。そういう点を踏まえてTypeScriptが出てきました。

2014年04月にバージョン1.0がリリースして以来、現在は2.1がリリースされています。TypeScriptはコンパイラがJavaScriptを生成する、altJSの一つになります。

特徴としては静的型付け、クラス、モジュールをサポートしています。ECMAScript2015をベースとしていて、現在はECMAScript 2017の仕様も取り込んでいます。基本形として*.tsと.d.ts（型定義ファイル）を使ってコンパイラを通してJavaScriptが生成されます。コンパイラはNode.jsまたはWSHで実行できます。一番大きいのは静的型付けができることです。JavaScriptの曖昧さを排除し、安全性、可読性、生産性を向上させます。

型はよく使うものとしてはString、Number、Booleanなどがあるでしょう。インタフェースやクラス（継承含む）、名前空間もサポートされています。ジェネリクス、アロー関数式などもあり、コード量を減らせます。クラスではget/setアクセサ構文もサポートされています。

今回はもう一つ、Visual Studio Codeを紹介します。これもTypeScriptで作られています。Visual Studio Codeでは補完であったり、関数の引数をリアルタイムでチェックして警告を出したり、さらにタスクランナーを生成できます。さらにブレークポイントを入れてステップ実行も可能です。

拡張機能の中にはAngular2のスニペットも用意されていますのでぜひ一緒に使ってみてください。

Progressive Web Apps With Angular by Angular Developer Advocate Rob Wormaldさん

Angular2はWebアプリケーションフレームワークで、最近1から2へバージョンアップしました。一から書き直されています。Web 1.0の時代にはWebブラウザはサーバへアクセスして、返ってきた結果をHTMLをレンダリングする仕組みでした。今はSPA（シングルページアプリケーション）になっています。Ajaxでリクエストして、JSONが返ってくる仕組みです。AngularはSPAに最適な仕組みを提供していました。

現在、ページを表示する際に多くのJavaScriptを読み込まなければならないという問題が出ています。今回はこれを解決するProgressive Web Appsという開発法を紹介します。Webアプリケーション開発にあたってのベストプラクティスになります。プログレッシブアプリはネイティブアプリのようなユーザ体験を提供します。

アプリとは、パフォーマンス/信頼性/没入感がキーになります。第一印象が大事で、3秒で読み込みが終わらなかったら50%のユーザが離れてしまうと言われています。なので、何か動いているというのを見せないといけません。その後、ダイナミックなコンテンツを表示する状態に移行します。

Angular1の場合はWebブラウザのみを対象としていました。Angular2ではAngular Core とレンダラーに分かれています。レンダラーが切り離されたことでNode.jsでもWebブラウザでも動かせるようになりました。Expressのレンダリングエンジンとして使うこともできます。サーバレンダリングでも使えることでパフォーマンス、SEO、シェアできるといったメリットが生まれます。

次の特徴はLazy loading routesです。前述のバンドルが拡大している問題に対する答えです。アプリケーションが肥大化すれば読み込みに時間がかかります。そこで、ファイルを後回しに読み込めるようになりました。必要になったタイミングで読み込むようになっています。もう一つ、サービスワーカーを紹介します。サービスワーカーを使うとアプリケーションがプリフェッチできるようになるので、サーバコンテンツの読み込みがさらに速くなります。

次の問題はコンパイルです。Angular1ではテンプレートの展開をWebブラウザが毎回行っていました。これが処理速度を低下させていました。Angular2ではAOTという機能によってWebPackを使ってあらかじめコンパイルした結果をバンドルできるようになりました。Webブラウザ側のライブラリのコード量が少なくなります。一例でコンパイル前が118KB、コンパイルすれば35Kまで減らせます。

ネイティブのアプリではインターネット接続がないと言った表示は出てきません。Webアプリの場合はインターネット接続がない場合も考えられます。圏外になることもあります。ユーザはオフラインのエラーを見てしまったら、もうサイトを使わなくなってしまうでしょう。サービスワーカーは新しいAPIで一種のプロキシです。アプリケーションからサーバに対してリクエストする時、その接続をフックしてローカルにあるキャッシュを返してくれます。

ここからは補足情報です。Google Chromeで動くLighthouseを使うとプログレッシブWebアプリが適用できているか測れるようになります。Lighthouseで良いスコアが取れていると、AndroidのChromeで「ホームスクリーンに追加する」が表示されるようになります。FirebaseではWebプッシュ通知をサポートしています。ごく短いコードで書けます。

まだまだフィードバックを必要です。ぜひ皆さんのサイトをプログレッシブに対応してください。