2014-06-17

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 をいろいろ試してみると面白いやも。多少、繋がりにくかったりもするのですけどね。

2014-06-16

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 開発環境ができていれば、結局のところ、プラグインをインストールだけでほぼ設定不要だったりします。

2014-06-14

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 ベースのアプリ開発がさっくり行えるのはうれしいかも。

2014-06-11

「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 を通して見ると少しすっきりしてきたかも。

2014-06-10

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