2014/04/09に開催されたhtml5j – Webプラットフォーム部 勉強会 第1回の内容まとめです。

togetterは@unsoluble_sugarさんがまとめられたこの辺→http://togetter.com/li/653215
会場は品川の日本マイクロソフトさんでした。

あいさつ

html5j Webプラットフォーム部 部長のめこさん（@meco300）。

元々WebはPCのブラウザだけで動くだけのものだったが、今では車載（カーナビとかその辺）やサイネージなどで使われるようになったりしている。
端末依存は今も依然としてあるので、このWebプラットフォーム部 勉強会でノウハウを共有していきたい。
第1回は、各プラットフォームのエキスパートの方にお話しいただく。

HTML5で開発するWindows 8ネイティブアプリ

日本マイクロソフトの物江さん（@osamum_MS）。
HTML5の技術でWindows 8ネイティブアプリを作る方法について。

Windowsストアアプリ

Windowsストアアプリは、Windows 8の新しい環境で使うアプリ。

タッチデバイスに最適化されたUI。マウスとキーボードでも、100%同じことができるようになっている。
Windowsストアアプリは（従来のWindowsアプリと比べて）単純にUIが違うだけでなく、プラットフォームや動くプログラムが違う。例えるなら、MacにMac OSのアプリとiOSのアプリが載っているようなもの。

Windows 8からはARM（補足:CPUの種類）にも対応した。
今までのアプリはARMの上では動かないが、以前「Metro」と呼ばれていた「Windowsストアアプリ」は、デスクトップ上でもARMを積んだモバイル上でも動く。

お店検索の例。
「検索」を押して、「現在地から300m以内」と指定すると現在地点からの距離で絞り込める。これはHTML5のGeolocation API （http://www.w3.org/TR/geolocation-API/）を使っている。

ストアから検索する例。
ビデオのストアで目的のビデオを選択してプレビューを押すと動画が配信されるが、これはプラグインなしでvideoタグだけで動いている。

デバイス関連で、「bingトラベル」というアプリ。
パノラマ画像を表示できるが、端末がジャイロセンサーを持っていると、端末の向きに合わせて表示が動く。これはCSS3の3D Transformsを使っている。

アプリにしなくてもいいんじゃないか、という話があるが、アプリにすることでハードウェアが持つ様々なデバイスへアクセスできるメリットがある。
例えば名刺をカメラデバイス経由で読み込ませてサーバ側で解析したり、ニュースのテキストを音声で読み上げたり。

「bingレシピ」でハンズフリーモードにすると、画面に直接触らず手をかざすだけでページを変えることができる。

11種類のセンサデバイス、例えばBluetoothやNFCなどだが、アプリではこういうものが使える。

Windows 8.1では特定の機能だけ有効にすることができる。

HTML5を使ったWindowsストアアプリの構造

スライドの4ページ目〜。

PhoneGap（≒Apache Cordova、https://cordova.apache.org/）があるが、だいたいあのような構成。
OSがあって、HTMLのコンテンツがあって、それをネイティブがラップする。

アプリの内側にTrident（IEが持っているレンダリングエンジン）があり、これがマークアップを解釈する。これにはJavaScriptからアクセスできる。
並列でWinRTというWindows 8の機能にアクセスするためのランタイムがある。これもJavaScriptからアクセスできる。
もう一つ、HTML5のフレームワークとしてWinJS。これはOSSになった。（https://github.com/winjs/winjs）
これらの下にWWAHost.exeというのがあって、これはIEのスーパーセット。

Windowsストアアプリはネイティブなので、強い権限を持つ。アプリに対して通常のWebページと同じ権限を与えると悪意あるコードがデバイスに悪さをすることができてしまう。
このため、「（ローカルでなく）ネットワーク上のソースの参照」「スクリプトを含むinnerHTMLの書き込み」「iframe内のページとのやり取り」は禁止されている。

Googleマップのように外とのやり取りが必要な場合は、？？（聞き逃した）やpostMessage等を使って外部のライブラリを使う（情報を取得する）。

開発ツール

Windowsストアアプリの開発ツールはVisual Studio 2013。（https://www.microsoft.com/ja-jp/dev/default.aspx）
有償版の他に無償版のExpress Editionもある。
また、Blend for Visual Studioというデザインツールも使える。

ライブコーディング。

最初に「新しいプロジェクト」で空のプロジェクトを作る。
htmlやJavaScriptが初期生成される。

default.htmlのh1タグの中身を書き換えてから「実行」ボタンを押すと、もうアプリが動く。

既存のWebアプリを移植してみる。
これから登壇するメンバ（物江さんを含む3名）は同じコードを各プラットフォームへ移植する。
スペースイン○ーダーっぽい何か。これはenchant.js（http://enchantjs.com/ja/）で作っている。

cssやimg等のリソースをエクスプローラからD&Dでプロジェクトにコピーする。
あとは、自動生成されたdefault.htmlのbodyタグの中身等をコピペするだけで動作するものになる。

シミュレータ

シミュレータでは、画面の解像度等を変えて表示を確認したりできる。
解像度によって見た目が変わるので、いわゆるレスポンシブデザイン等のやり方で対応してほしい。

シミュレータでは、拡大縮小や回転のタッチや、GPSのエミュレーション、ネットワークのエミュレーション等もできる。
MacBook Pro（等）を使っていてタッチパネルがない場合はエミュレーションの機能を活用してほしい。

まとめ

Windows 8アプリは、HTML＋JavaScriptで開発する事ができる。
あと、今回はストアのマネタイズの話はしないが、結構儲かるので作ってみてほしい。

質疑応答

（質問1）ホットペッパーのAPIでデモをされていたが、これの半径とかはホットペッパーAPI側の仕様？

（回答1）Yes。
　「Windows 8 開発体験テンプレート」というキーワードで検索すると実際にホットペッパーAPIを使ったサンプルがあるので参照してほしい。（http://msdn.microsoft.com/ja-jp/jj556277.aspx の「ホットペッパーAPIを学習するテンプレート」）

（質問2）MSではTypeScriptを使うことを推奨しているか？

（回答2）推奨はしていないが、使うことはできる。
　今は非対応だが、もうすぐ出るアップデートを当てるとTypeScriptでWindowsストアアプリを作ることができるようになる。
　アドインでCoffeeScriptを使うこともできるようになる。

Basis of Firefox Apps

Mozilla Japanの浅井さん。（@dynamitter）

来週京都でFirefoxのお祭りをするので、来てほしい。

Firefox OSの概要

昨年は3種類の端末が出た。ZTE Open、ALCATELのFire、LGのFireweb。今年はもっといっぱい出る。
タブレットも予定されていたり、ファーウェイも端末を予定していたり、パナソニックがテレビを用意していたり。
（12ページ右下）時計の絵は、そういうことを話されていた人がいたので載せた。あくまでイメージ。

ハードウェアメーカ以外に、マーケットプレイスにもディズニーやLINEなどが参入している。
国内からも楽天やリクルートがマーケットにアプリを提供したり、いろんな人がアプリを作ったりアプリを開いたり、一緒に勉強会を開いたり。

これからFirefox OSがどうなるか。

2.0ですっきりしたデザインに生まれ変わる。（17ページ）
UIがスッキリしたり、一番上にURLバーがあるようなUIになったりなど。

ユニバーサルサーチ。
常に上にバーがあって、URLもアプリも横断的に検索したり、そのままアプリをダウンロードしたりできる。

Firefox OSの話は、詳しくは京都で。

Web Apps

Firefox OSのアプリはWebアプリ。
だから当然、Firefox OSのアプリはネイティブのように動くし、最近ではアプリをapkに変換してAndroidに入れることもできるようになっている。

Epicが作っているUnreal Engine。（26ページ）
PSやWiiとかでも使われている。

先月出たUnreal Engine 4がWebで動く。ネイティブと比べて7割ぐらいの速度で動作する。
3Dで派手なことをしなくても、2Dのゲームも作れる。

WebでUnityも動くようになっている。（27ページ）

Webアプリということでたまに誤解されていることがある。
調査会社に「Firefox OSはダウンロード型のアプリがないので」と書かれたときは切れそうになったが、ダウンロード型もある。（30ページ）

動作確認は実機やシミュレータを使う。

アプリマネージャ。Firefoxの最近のバージョンを使っているのであれば、既に開発ツールの下に入っている。（[ツール]-[アプリ開発]-[アプリマネージャ]）

シミュレータの中で、マーケットだろうがなんだろうが普通に動く。

LINEもインストールして動かすことができる。
LINEアプリを起動すると、位置情報確認の表示が出る。OSの設定であれば、日本語だったらアプリのUIも日本語になる。

アプリ情報ファイル。
jsやcssに加えてmanifest.webappを書く。
通常の権限以上のこと、例えばどこのサイトでもアクセスできる権限とかがほしかったらそのことを宣言する。

アプリの課金。paypalやGoogleや…自由な課金APIを使っていい。Mozillaも用意している。

ライブコーディング

manifest.webappを作成する。
マニフェストのテンプレートをコピーして貼って、launch_pathやアイコンファイルパスを記入する。

それからアプリマネージャに戻って、Add Hosted Appで先ほどのManifestのパスを指定するとインストールできる。

（実際に動いた状態）
自機が画面下に見切れていて見えないとかはviewportとかで調整する。

質疑応答

（質問）Firefox OSでBluetoothやBLEのサポートは行われるか？

（回答）すべてのプロファイルではないが順次対応している。ハード的に対応していて、OS側で現時点で未対応のもある。

Chrome Apps 概要

Google Developer Experts(Chrome)の吉川さん。（@yoshikawa_t）

Chrome Appsの概要

今のChromeは、インストールすると「アプリランチャ」も入る。
そこからアプリ（Packaged Apps）を起動すると、ブラウザっぽくない（ネイティブっぽい）ガワのUIでアプリが起動する。

Packaged AppsにはUSBやBluetoothやSerialにアクセスするような独自APIが用意されている。

またアプリケーションでなくChromeブラウザ自体を機能拡張するための「Extensions」もあるが、今日は割愛する。

ライブコーディング

侵略者ゲーム（仮）のChorme Appsへの移植。
Chromeでの手順も他のプラットフォームと基本的に同じ。

manifest.jsonを作る。
「backgroud:」でbackgroundプロセスで動作させるjsを指定する。

（中略）

作成したアプリは、Chromeの「拡張機能」からインストールする。（Chromeの[環境設定]の画面内にある[拡張機能]、またはchrome://extensions/）

別のプラットフォームのネイティブアプリへの変換

コマンドラインで、Chrome AppsからAndroidアプリやiOSアプリを生成できる。（参考: http://www.publickey1.jp/blog/14/googlechromeiosandroidapache_cordovanodejs.html）

Chrome Appsの補足

CSP（Content Security Policy）。Chrome Appsでは、CSPに独自に準拠している。
外部リソースの読み込み禁止、インラインスクリプトの禁止、eval（文字列の評価関数）も禁止。

localStorageの制限。Chromeでは、chrome.storageを利用する。
chrome.storageは非同期API。

バックグラウンドプロセスは長時間操作がないと自動的にシャットダウンされる。これを回避するために、setTimeoutやsetIntervalでなくchrome.alarmsを使う。

Chrome Apps API。（17ページ以降参照）

アプリ内課金の仕組み（Chrome In-App Payments）もある。（25ページ）

最後に宣伝。
Chrome本（「開発者のためのChromeガイドブック」）を出しているので、よかったら買ってほしい。
困ったことがあったら、Chrome API Develpers JPコミュニティで聞いてほしい。

質疑応答

（質問）
Chrome ApssはNaClやPNaCl（http://ja.wikipedia.org/wiki/Google_Native_Client）をサポートしていると思うが、Googleとしては推奨しているか？

（回答）
詳しくないが推奨していないはず。ストアは基本的に審査がないが、NaClを使っているとストアが審査が発生する。

パネルディスカッション

ストア

（めこさん）ストアの手数料は？

（物江さん）Windowsストアアプリは、公開するときに必ずストアに公開しなければならない。
　企業用は高い。個人は1840円。日本ではWindows Phoneの新しい端末が出ていないが、Windows Phone用のアプリも公開できる。
　アプリの売上げは30%がストアに徴収されて70%が提供者へ。5万ドル以上の場合だと80%が提供者へ。広告型の場合は一銭も徴収しない。

（浅井さん）Firefox OSはどのストアを使ってもらってもいい。Firefoxで標準で用意しているのは無料だが、マーケットによって異なる。
　サイドローディングや、デスクトップだろうがAndroidだろうが自由にインストールできる。

（吉川さん）Chromeのストアは5ドル。無料だとHello Worldとかの登録が大量に来た。

（会場からの質問）Firefoxのマーケットの対象はFirefoxアプリとFirefox OSアプリのどっち？

（浅井さん）Firefox OSアプリもFirefoxアプリもどちらでもよい。あまり用語として統一されていない。

UIガイドライン

（めこさん）UIガイドラインはそれぞれどうなっているか？　例えばWindowsストアアプリは厳しい？

（物江さん）タイルベースで、例えば指でタッチできないとか操作困難なものはストアで却下される。

（浅井さん）Firefoxのマーケットプレイスも、パソコン版のそのままだとリジェクトされる。
　Hello Worldのような明らかに役に立たないものもリジェクトされる。
　UIについては制約はない。

（吉川さん）
　Chromeについては特に制約はない。世の中が変わればUIも変わっていくので。
　UIガイドラインは、参考にしたいものがあれば他のものを参考にしてもらえればと思う。

アプリ開発時の注意点

（めこさん）アプリを作る時に、ここだけは注意してほしいと思うものは？

（物江さん）アダルトコンテンツや公序良俗に反するものは出せない。
　あとはアプリサイズの容量制限について2GBの上限が緩和されたが、2GB以上のものがそうあるかというと……。

（浅井さん）アダルトがダメというのはFirefoxも同じ。勝手にマーケットを作って、そこでやる分にはいい。
　容量は、メモリが2GB積んでいないものでは当然2GBのコンテンツはダウンロードできない。
　アプリの審査はどちらかというとアドバイザ的な位置付け。mozillaの人だけでなく外の人も参加することができる。

（吉川さん）
　Chromeは，NaClが入っていたり，特定のAPI、例えばWeb Blocking APIを使っていたりすると審査が入る可能性がある。
　Extensionで問題が出たりフィッシングに使われたり、そういうもの。

（会場からの質問）Google PlayとChromeのマーケットの棲み分けは？

（吉川さん）Googleから情報が出てこないのでわからない。
　ただ、ChromeアプリがAndroidに入ってきたりしているので、何らかの動きはあるかもしれない。

（会場からの質問）「うちならではの特色」とか、逆に「うちのはここがちょっと」とかいうのはあるか。

（物江さん）Windows 8は11種類のデバイスAPIを提供していて、デバイスの機能がWebで使えるのがいい。
　気に入らないところは今のところない。

（浅井さん）Firefoxの方は、ドキュメントの整備状況は気になる。
　ハードウェアの機能がWebで使えるようになっていて、Samsungの人がAPIを整備してくれたり一緒にしたりというのもある。ライブデモをやってもそうだったが、Webのものをほぼそのまま持ってきても引っかからなくなった。

（吉川さん）Chrome OSもほぼ同じ。
　ChromeはAPIも割と豊富にいろいろあって、センサ系はあまり使えるものがないが、USBやシリアル通信等で外部のガジェットを使えるのは大きい。コントローラを使ったり、ラジコンをChromeから操作したり等。
　言いたいことはいろいろあるが、例えばCSPの制限がきつすぎるとか。evalを使っているライブラリが使えなかったりするといったところ。CSP自体は重要な概念で、あって良いが。Googleとしては、Appsではいろいろなことができるのでセキュリティを保護しないといけない。
　あとは、Chromeストアはいろんな言語で公開できるようになっているが、設定をミスると日本語のストアで検索できないとか。

（会場からの質問）デスクトップ（Windows）にFirefoxアプリを入れた後でFirefoxをアンインストールしたらどうなるか？

（浅井さん）exeからGeckoエンジンを呼び出しているので、動かなくなる。

（会場からの質問）開発ツールの補完周りはどうか？

（物江さん）VisualStudioでは、IntelliSenseでWinJSとかは補完が効くし、自分で作ることもできる。

（浅井さん）特に標準のエディタはないので、エディタ次第。

（吉川さん）Chromeも公式にそうしたものを提供していない。

（たぶん会場サポートをされていたにしむねあさん）物江さんはVisualStudioを使われているとして、浅井さんと吉川さんはどんなエディタを使っているか？

（吉川さん）Sublime Text（http://www.sublimetext.com/）を使っている。ただ、Chrome Appsのサジェストができるかは調べたことがない。

（浅井さん）Teminalでvimで見たり、あるいはFirefoxからコードを見たり。重くなってきたらCoda（Macのエディタの一種。https://itunes.apple.com/jp/app/coda-2/id499340368?mt=12）が出てきたりSublimeが出てきたり。

（めこさんか会場からかメモし損ね）ローカライズの仕組みは？

（浅井さん）Firefoxはローカライズの仕組みを持っている。

（物江さん）WindowsストアアプリはVB等でも作れて、そちらのほうは多言語化の仕組みがある。しかしJSのほうはリソースを？？（聞き逃し……）、ちょっと面倒。
　ストアでは「市場」を選ぶことができて、地域と言語毎に（バイナリを？）指定できる。

（吉川さん）Chromeにはchrome.i18nというのがあって、そちらで対応できる。

アプリの雛形

（めこさん）アプリケーションを実装しようとしたとき、雛形があると便利だと思うが簡単に使えるものはあるか。

（物江さん）Visual Studioでアプリを作る時に、「テンプレート」と呼ぶ雛形がある。また「Windows開発者テンプレート」があって、例えばブロック崩しのテンプレートとかも提供している。（https://win8apptemplate.codeplex.com/）

（浅井さん）Firefox OSの方はバッテリー情報とかを見るようなサンプルコードもあるし、Unity用のテンプレート等もある。

（吉川さん）Chromeのほうはテンプレートはないが、アプリのコードが多く公開されているのでAPIで検索すると出てくる。

（にしむねあさん？）Yeoman用のテンプレートは？

（物江さん）Yeoman用のテンプレートは得意な人が作っているが、MSとしては提供していない。

（浅井さんの回答メモし損ね……）

（吉川さん）YeomanはGoogleが作っているので、ある。

まとめ

（めこさん）WebやWebプラットフォームがどう変わっていくか？　担当しているPFが今後どういう方向性に行くか？

（吉川さん）Chrome Appsで作ればどのプラットフォームでも動くというのが未来。冷蔵庫とかそういうところもWebアプリで開発者が、という未来もあると思う。

（浅井さん）Webで何でもできることから新しい世界を切り開いていきましょう、FirefoxがWebとアプリの分断を一つに戻すきっかけになればと。

（物江さん）Windows 8.1でUniversal Appというのが出てくる。電話でもPCでも同じソースで、一つのプロジェクトで複数のデバイスの開発ができる。
　Webについては個人の私見だが、Webプラットフォーム/HTML5のいいところはクロスプラットフォームの開発に向いているところで、様々なデバイスの開発に使われていくのではと思う。