TechEd NA 2014 の HOL で単体テストの実習

日本マイクロソフト株式会社 エバンジェリストチームのブログの「Visual Studio 2012 自習書シリーズを公開しています。」というエントリーで Visual Studio 2012 ですが、単体テストの Hands-On Lab が公開されています。ですが、 Premium あるいは Ultimate を要求されて、ぐぬぬってな感じ。うちのライセンスは Professional なので……。適当に VM たてて 90 日試用版を入れれば良いかもですが。

と思っていたら、 TechEd North America 2014 で同じような Hands-On Lab が行われていました。 Introduction to Unit Testing というのが、それです。 available online っていうことで、 Visual Studio 2013 Ultimate および教材ソースコード一式が入った VM にリモートログインして HOL を行うことができます。英語で、二時間の時間制限はありますけど、手元の環境を汚さずにできるのは嬉しいところ。

TechEd NA 2014 の HOL は、他にもオンラインで実行できるものが多くあるので (というか、全部?) 、 Virtual Lab をいろいろ試してみると面白いやも。多少、繋がりにくかったりもするのですけどね。

IntelliJ IDEA で TypeScript

IntelliJ IDEA の EAP (Early Access Program) 使っています。自分の場合、設定から何からまっさらにしたい気分になる時があります。その時のための自分用メモです。詳細は全て IntelliJ IDEA Web Help - TypeScript Support に書いてあります。この Web Help が Win 8.1 の IE11 でちょっと挙動不審になることが多いので……。

インストールして活かす必要があるプラグイン

JavaScript Support

最初から入っているはず。そして、 disabled にすることは、まずないけど。

NodeJS

TypeScript の transpiler は NodeJS 上で動くし。

Node.js それ自体のインストールはやっておく。 PATH も通しておく。 Windows だと C:\Program Files\nodejs と %APPDATA%\npm あたり。

npm install -g typescript しておく。必要ならば sudo をつけて。 IntelliJ の Settings... の中からでもできるけど、

File -> Settings... -> Node.js and NPM で Node interpreter に Node.js の実行ファイルを設定しておく。 PATH が通っていれば勝手に設定してくれるかな。

File Watcher

プラグインをインストールして、適当に *.ts ファイルを作ると、 "File watcher 'TypeScript' is available for this file. Description: 'Compiles .ts file into .js files" って言ってきてくれるので、 "Add watcher" すれば設定追加してくれる。らくちん。後から設定を変更するなら File -> Settings... -> File Watcher で。

結語的な何か

Node.js での TypeScript 開発環境ができていれば、結局のところ、プラグインをインストールだけでほぼ設定不要だったりします。

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 まで参戦すると収拾がつかなくなる?