Multi-Device Hybrid Apps for Visual Studio CTP1.1 を試す

Microsoft Visual Studio は Cordova をサポートしています。といっても、まだ CTP (Community Technology Preview) ですけど。というわけで、 Multi-Device Hybrid Apps (Preview) を試してみました。

モノは Multi-Device Hybrid Apps for Visual Studio CTP1.1 です。どうでもよいことですが、これは "Multi-Device Hybrid Apps for Visual Studio" の CTP です。最初、 "Multi-Device Hybrid Apps" for "Visual Studio CTP" なのかと思ってました。 Visual Studio 2014 CTP にしか使えないのかなーって。でもそんなことはなく Visual Studio 2013 で使えます。そんな勘違いするのは、まぁ居ないかもだけれど。

CTP 版ですが (だから?) 、 PDF で 59 ページのドキュメントが付いてきます。さらっとでも目を通しておいたほうが良いかと。

まず、 Windows 8.1 に Visual Studio 2013 Update 2 (Professional, Premium, Ultimate) をインストールしたものが必要です。また、 Visual Studio 2013 には、 "Tools for Maintaining Store apps for Windows 8" と "Windows Phone 8.0 SDK" もインストールしておく必要があります。入っていなかったら、コントロールパネルの「プログラムと機能」で、 Visual Studio の変更を実行すれば追加できるそうです。 Express 版では動かないのかしらー (未確認) 。

インストールするか聞かれる third party softoware

Node.js

既にインストールしているのであれば、再度インストーする必要はありません。 PATH は通しておく必要があります。 C:\Program Files\nodejs と %APPDATA%\npm あたり。 PATH の設定は、 Node.js のインストーラーがよろしくやってくれるたはずです。

Apache Ant

C:\apache-ant-1.9.3 あたりにインストールされ、環境変数 ANT_HOME にセットされます。

既にインストールしているのであれば、再度インストーする必要はありません。 PATH は通しておく必要があります。

Oracle Java JDK 7

32bit 版がインストールされます。

既にインストールしているのであれば、再度インストーする必要はありません。環境変数 JAVA_HOME を設定し、また PATH は通しておく必要があります。

Android SDK

%LOCALAPPDATA%\Android\android-sdk にインストールされます。要は Get the Android SDK の DOWNLOAD FOR OTHER PLATFORMS にある SDK Tools Only の installer_rxx.x.x-windows.exe が使われます。このインストールディレクトリーを環境変数 ADT_HOME にセットし、 %ADT_HOME%\tools と %ADT_HOME%\platform-tools を PATH に追加してくれます。

既にインストールしているのであれば、再度インストーする必要はありません。 tools と platform-tools には PATH を通しておく必要があります。

Google Chrome

既にインストールされている場合は、インストールされないようです。入っているのが Canary だったりすると、入るかも。

自分は dev channel の 64bit 版 Chrome を使っていますが、特に問題はないみたい。

Git Command Line

msysGit が入ります。

既にインストールしているのであれば、再度インストーする必要はありません。 PATH は通しておく必要があります。

SQLite for Windows Runtime

Visual Studio 用の SQLite がインストールされます。 Visual Studio の Tools -> Extension and Updates... で確認。

iTunes

iOS 版のバイナリーを Visual Studio から iOS デバイスにデプロイするのに使うらしいです。その予定がないのであれば、インストールする必要はありません。 iTunes 入れちゃうと Bonjour とか Apple Mobile Device Support とか Apple Application Support とかも入っちゃいますし。

最低限必要なもの

Android の開発環境が入っていて、 Git も普通に使っていて、 Node.js も普通に使っているのであれば、最低限 SQLite for Windows Runtime と Ant あたりを入れればよさそうです。

プロジェクトを作って、 F5

Visual Studio を起動して FILE -> New -> Project... すると、プロジェクトテンプレートの JavaScritp と TypeScript の下に Multi-Device Hybrid App というのが増えています。

使用している third party softoware の関係で、プロジェクトの path にスペースが含まれると怒られます。なので、 path にスペースが入っていないところにプロジェクトを作ります。

試してないけど、英字/数字以外が入っていると問題出るかも。ユーザーアカウントが日本語とか。

ツールバーで、 Debug Target: Ripple - Nexus S, Solution Configurations: Debug, Solution Platforms: Android あたりを選択して F5 実行。初回実行時に、 Node.js のパッケージがぞろぞろとダウンロード/インストールされるので、じっくり待ちます。ほどなく、新しく Chrome が立ち上がって Ripple Emulator が起動します。 Visual Studio の DOM Explorer　で中を覗くことができます。

Debug Target で Android Emulator を選べば、 Ripple ではなくの Android の普通のエミュレーターも使えます。同じく DOM Explorer で覗けたりします。

Android ではなく iOS でも、ってなこともできますが、 OS X Maveriks が乗った Macintosh が必要です　(あとデバイスで動かすなら iOS Developer Program のアカウントも必要)。 Xcode 5.1 入れて、 Xcode command line tools 入れて、 Node.js 入れて、 npm で vs-mda-remote 入れて、 npm で ios-sim 入れて、リモートビルドができます。が、リモートデバッグは (現時点では) できないようです。

他に、 Solution Platforms で Windows を選ぶと、 Windows Store アプリ版のビルド/デバッグが可能になります。 Windows Phone を選ぶと、何やらエラーが出ちゃうんですが、原因は調べてませんです。ドキュメントに何か書いてあったっけか。

結語的な何か

ともあれ、 Visual Studio で Cordova ベースのアプリ開発がさっくり行えるのはうれしいかも。

「120 分聞けばドヤ顔で語れる Apache Cordova スーパー勉強会」に行ってきた

2014-06-10 に神保町の IIJ で行われた「120 分聞けばドヤ顔で語れる Apache Cordova スーパー勉強会」に行ってきました。

川田さんの「5 分でわかる "Apache Cordova" がなぜアツいのか?」

(録画 スライド)

歴史(?)的な話を絡めての Adobe PhoneGap と Apache Cordova の立ち位置的な話。

Andy さんの「PhoneGap とハイブリッド開発」

(録画 スライド)

PhoneGap / Cordova は、しばらくフォローしていなかったのだけれど、知らないうちにえらく環境が整ってきている雰囲気。

Adobe PhoneGap Build は、基本無料で使えるし、簡単に試せるし。

田中さんの「Apache Cordova の話」

(録画 スライド)

田中さんの話はキレがあって良いよね。

PhoneGap も Cordova も Cordova-lib を使っているということで、コアとなるのは Cordova-lib なのですね。 ionic も同じ流れらしい。

しばらく前にハイブリッドアプリ全般の勉強会がありましたが、その時にもやもやしていたことが多少見えてきた感じで、ちょっとすっきり。

あとは、ハイブリッドアプリでは問題になる、プラットフォームの WebView の類とその代替物の話も。

佐々木さんの「IBM Worklight Studio」

(録画 スライド)

IBM Worklight は知らなかったのですが、かなり手厚い環境だなぁ。近々にハンズオン・セミナーもあるのね。

暗号化や通知、デバイス管理とか熱い。

LT: ひらとりさんの「Cordova アプリの実態調査」

(録画 スライド 関連記事)

超力作の調査報告です。ハイブリッドアプリのメリットとして、マルチプラットフォーム開発が容易になるということが言われることがあります。しかし、マルチプラットフォームじゃなくても Cordoba/PhoneGap を使われている例が調査の結果かなりの数見つかったというのは、面白い。 web 技術でアプリを作れるっていうことが、マルチプラットフォーム云々以上にメリットがあるのかもです。

あと、印度!

LT: 海老原さんの「僕の Cordova 体験談」

(録画 スライド)

WebView の機種による差異は (特に古めの Android) はなかなかにしんどい話。

HTML/JavaScript/CSS 等のアセットをアプリケーション内に持つか、あるいはリモートサーバー上に持つか。あるいは、リモートサーバー上に置くが、通常はキャッシュされたものをローカルに持ちそちらを利用するか。リモートサーバーに置く場合は、クライアント側のアプリケーションをアップデートしても、すべてのユーザーがストアから新しいものを拾ってくれるとは限らない。クライアントバージョンの混在も考慮する必要がある。

LT: 神原さんの「Cordova 利用アプリ開発経験談」

(録画 スライド)

プラグイン書いちゃえばネイティブ機能もオッケーですね。ネイティブで実現する部分は別として、プラグインそれ自体は簡単に書ける。

LT: Ally さんの「Cordova WebGL App in 5 minutes」

(録画 スライド)

WebGL を使った物もさっくり Cordova でアプリ化しちゃうよ、という話。 phonegap-plugin-wizCanvas というプラグインを使用してました。

結語的な何か

いつの間にか Cordova / PhoneGap および関連ツール/環境は、えらい進化してた。第48回 HTML5 とか勉強会「ハイブリッドアプリ開発最新動向」に参加したときのもやもやが、 Cordova を通して見ると少しすっきりしてきたかも。

第2回 html5j Webプラットフォーム部ナイトセミナー「HTML5 開発ツール天下一武道会 (IDE+α編: 初夏の陣)」に行ってきた

2014-06-09 に品川のマイクロソフトで行われた第2回 html5j Webプラットフォーム部ナイトセミナー「HTML5 開発ツール天下一武道会 (IDE+α編: 初夏の陣)」 (長い……) に行ってきました。

佐川夫美雄さんの Yeoman の話

(録画 スライド)

最近 Yeoman さんはいろいろといじっているので、それなりに知っている話ではありました。 generator は AngularJS のくらいしかまともには使ってないので、 ThreeJS とか楽しそうという粉蜜柑。

ところで、 Yeoman さんのヘルプって味気なくはないっすかね。 `yo angular:view -h` とかやると寂しい気持ちになったりします。

サーバーサイドの API のモックとして、 grunt-easymock, grunt-stubby が紹介されていました。他に、 stubcell がいいよという話も。

内輪向けに書いた資料 (書きかけ) があるので、晒しておいてみましょう。突っ込み希望。

物江修さんの Visual Studio の話

(録画 スライド)

Visual Studio は常用しているので、それなりに知っている話ではありました。といっても、 Professional ですけど。 Ultimate が欲しいけど、お高い万円なので。

Windows 8.1 等の話で、 JavaScript でアプリ (not ウェブアプリ) を書いた場合は、コンパイルされるので四倍くらい早くなるよとのこと。

Cordova サポートの話は聞いていたのですが、 Multi-Device Hybrid Apps (Preview) の事を把握してませんでした。 TechEd North America 2014 に Building Multi-Device Apps with the New Visual Studio Tooling for Apache Cordova というセッションがあったので、つらつら観てみたりしています。

山本裕介さんの WebStorm の話

(録画)

IntelliJ IDEA は使っているので、それなりに(以下略。

spy-js はいじるべきだなと思った次第。って、 spy-js の中の人と WebStorm の中の人は、ってな話も。

仲尾毅さんの Dreamweaver の話

(録画)

Creative Cloud 道場場外乱闘編といった感じ。 Edge tools を含めて adobe の html5 ツール群が紹介されました。

CC は使っているので、(以下略。でも Dreamweaver はほとんど使ってなくて、もっぱら Edge tools だったりします。 Edge Code は IDE ではなく、 Editor の括りになるのかしら。

結語的な何か

というわけで、次は第3回 html5j Webプラットフォーム部ナイトセミナー「HTML5 開発ツール天下一武道会 (エディタ 編 : 海開きの陣)」らしいですわよ、奥様。 Sublime Text やら、 Edge Code (Brackets) やら、 Atom やらの話になるのかしらん。 vim や Emacs まで参戦すると収拾がつかなくなる?

第48回 HTML5 とか勉強会「ハイブリッドアプリ開発最新動向」に行ってきた

2014-05-26 に六本木の Google で行われた第48回 HTML5 とか勉強会「ハイブリッドアプリ開発最新動向」(録画) に行ってきました。で、そのメモ的な何か。(書きかけ)

1. 白石さんから「はじめに & 5jcup の宣伝」

(録画)

5jcup を盛り上げようという話。そして、 htmlday も盛り上げようという話。

2. アシアル株式会社の久保田光則さんによる「はやわかり HTML5 ハイブリッドアプリ開発事情」

(録画 スライド)

3. 株式会社ニューフォリアの畠田善丈さんによる「ハイブリッドアプリ開発フレームワーク アプリカンの紹介」

(録画)

4. 金井健一さんによる「ionic -- AngularJS ベースのハイブリッドアプリ開発フレームワーク」

(録画 スライド)

5. 吉川徹さんによる「Chrome Apps for mobile 概要」

(録画 スライド)

6. 懇親会とパネルディスカッション

Famo.us って何の話の時に出てきたんでしたっけ。

以下雑感

ネイティブアプリは Java や Objective-C 等で書く必要がありました。ハイブリッドアプリでは、 web 技術を使ってアプリを書くことができます。一つのプラットフォーム内で、 web 技術の適用範囲が広がったものです。

他方、 web 技術を使って書かれたハイブリッドアプリには、マルチプラットフォームへの期待というのもあります。

web 技術をつかって iOS あるいは Android のアプリが作れるのが嬉しいのか、あるいは web 技術を使って書けば iOS と Android で動くように (移植性) できるのが嬉しいのか。割合の過多はあるでしょうが、どちらもでしょうね。移植性/マルチプラットフォームということだけで web 技術にこだわらないのであれば、他の解もありますし。

いずれにせよ、純然たる web アプリならまだしも、ハイブリッドアプリとして作成するのであれば UI 振る舞い部分に関しては、プラットフォームに個別対応するのが望ましいでしょう (要件依存ですが) 。以前よくあった (今もある?) iOS っぽい Android アプリとか、とっても jQuery Mobile っぽいアプリとか、そういう物になってしまうと、嬉しくないな。

plusone.js あれこれ

Google I/O 2013 も (行けなかったけど) 終了して、早一週間。セッションのビデオも一通り公開されたのかな。字幕はまだ自動認識のものが多いようですが、そのうちすべて人の手による字幕が付くでしょう。セッション資料はまだ上がっていないようですが、こちらもそのうち公開されるはず。

三日目に行われた CodeLab は、ビデオは存在せず、また公式には資料も公開されません。しかし、一部の CodeLab の資料は入手可能になっています。 ⇒ Google I/O 2013 CodeLab materials summary #io13

資料が公開された CodeLab の一つに "From Zero to Hero: Integrating Google+ Sign-In on Android and Web in Less Than Three Hours" があります。この資料を見ていたところ以下のような記述を見つけました。

<script>
// Async load Google API scripts
(function() {
  var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
  po.src = 'https://apis.google.com/js/auth:plusone.js?onload=startApp';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

定番の記述ですが、 "auth:plusone.js" というのは見たことがない。 Google+ Platform の JavaScript API を見ても "pluson.js" と "client:plusone.js" というのはあるけど、 "auth:plusone.js" というのはない。先生にお伺いを立てても、 Google+ Platform の PhotoHunt sample app しか引っかからない。

というわけで、 Google+ で質問してみました。結果、 "client:plusone.js" は Google+ Platform の JavaScript API に加えてフルセットの Google APIs Client Library for JavaScript がロードされ、一方 "auth:plusone.js" は Google+ Platform の JavaScript API に加えて The standalone auth client のみがロードされるということだそうです。

まとめると、 "https://apis.google.com/js/" 以下に指定する js とロードされるものは以下の通り。

指定する JS	ロードされるもの
plusone.js	Google+ Platform JS API
client.js	Google APIs Client Library
auth.js	Standalone Auth Client
client:plusone.js	Google+ Platform JS API と Google APIs Client Library
auth:plusone.js	Google+ Platform JS API と Standalone Auth Client

また、 "plusone:client.js" は "client:plusone.js" と同じで、 "auth:plusone.js" は "plusone:auth.js" と同じです。つまり "foo:bar.js" の foo と bar の順序に意味はないということです。ついでに、 "client:auth.js" とか "client:auth:plusone.js" とかやってもエラーは出ませんが、 auth は client の subset なので特に意味はありません。

具体的には、 client を指定すると gapi.client 、 gapi.auth がロードされ、 auth を指定すると gapi.auth がロードされます。 plusone を指定すると gapi.signin 、 gapi.plusone 、 gapi.plus 、はたまた gapi.savetodrive 等々がロードされます。そしてそれらを ":" で区切って (https://apis.google.com/js/client:plusone.js のように) 指定すると、指定したものに対応するものが併せてロードされることになります。

というわけなのですが、実のところ "plusone.js" だけの指定でも gapi.auth や gapi.client がロードされたりもします。たとえば、 Google+ Sign-In ボタンを使用すると (class="g-signin" の要素を作るとか gapi.signin.render() するとかした場合) 、 gapi.client および gapi.auth が自動的にロードされます。自分の場合、この振る舞いに惑わされて、 "client:plusone.js" 、 "auth:plusone.js" 、 "plusone.js" の差異がわからないでいました。わかってしまえば何ということもないことでした。