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

第10回 html5 エンタープライズ ナイトセミナー「今夜、Webアプリの正しいUIテストの方法が決定されます」 に行ってきた

2014-05-27 に渋谷の DeNA で行われた第10回 html5 エンタープライズ ナイトセミナー「今夜、Webアプリの正しいUIテストの方法が決定されます」(録画1 録画2) に行ってきました。で、そのメモ的な何か。(書きかけ)

Oracle 榑松谷仁さんによる「Oracle の Testing Tools ご紹介」

(録画)

サイボウズの宮田淳平さんによる「kintone チームを支える Selenium テスト」

(録画)

株式会社ゼノフィの佐川夫美雄さんによる「UI テストをどうやるか」

(録画 スライド)

DeNA の沖田邦夫さんによる「Selenium in Mobage Platform」

(録画 スライド)

日本 IBM の金元隆志さんによる「モバイル・アプリケーションの品質向上に向けて」

(録画)

パネルディスカッション「事例から見えた、 UI テストの正しい姿」

(録画)

LT: スマーテックワークス株式会社の金晶さんによる「シナリオの組み立て & リプレイ方式の UI テスト自動化」

(録画)

以下雑感

「UI テスト」とはなんぞや、という点において、自分が期待していたものとは違いました。まぁ、それはそれで。

第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 っぽいアプリとか、そういう物になってしまうと、嬉しくないな。

Battery Status API

先日、横山さんのポストを拝見し、 Battery Status API なるものがあることを初めて知った次第。というわけで、どんなものなのかちょっと見てみました。

w3c のドキュメントを見ると、とてもシンプルです。 NavigatorBattery と BatteryManager という interface が定義され、 window.navigator.battery が BatteryManager を implement しているということのようです。

ただ、この Battery Status API 、今のところ Firefox でしか使えないようです。 ⇒ Mozilla のドキュメント

Battery Status API では充電中かどうかや、バッテリーの残量を見ることができますから、バッテリーが心もとない時にはがんばらないとかできそうなのですが。他の環境でも使えるようになるのかなー。

BatteryManager は read only の attribute を四つ持っています。

charging: boolean

充電中なら true

chargingTime: double

充電完了までの時間 (単位は秒)

dischargingTime: double

バッテリーの残り時間 (単位は秒)

level: double

満充電を 1.0 とした割合

また、個々の attribute に対応した event handler もあります。

onchargingchange

event type は'chargingchange'

onchargingtimechange

event type は 'chargingtimechange'

ondischargingtimechange

event type は 'dischargingtimechange'

onlevelchange

event type は 'levelchange'

で、簡単なサンプル。 chargingTime と dischargingTime にそれなりの値が表示されるまでには、充電 (あるいは放電) 開始してから多少の時間が必要です。ただ、これを Geeksphone PEAK でみてみると、 chargingTime と dischargingTime が取れていないようなんです。

ちなみに、 Firefix OS Simulator だと値がとれています。 Geeksphone PEAK 以外の、例えば Xperia Z 上の Firefox for Android でも、値を取得できています。 KEON でも取れないのかしらん。

『jQueryモバイルで簡単！ スマートフォンサイト作成』に参加しました

先週の水曜日、九日にアップルストア銀座で行われた、 jQuery Mobile のイベントに行ってきました。イベントというか、セミナーというか、 jQuery Mobile の紹介っぽいもの。allWebクリエイター塾というところの主催で、定期的に行われる SwapSkills という勉強会シリーズの第一回目だったようです。

いつもの調子でのこのこと出かけて行ったところ、なんか、超満員。少し早めについたので運良く座れましたが、立ち見も結構な人数ということで、サイトのスマートフォン対応への関心の高さが伺えます。 cssnite でも感じたことですけどね。

送信者 2011-02-09 jQueryモバイルで簡単！ スマートフォンサイト作成

内容は、吉川さんによる jQuery Mobile の紹介と、その後白石さんによるライブコーディングという感じで、気分は HTML5 とか勉強会 プチ。

先日の cssnite での取り上げられ方と、多少温度差を感じました。 jQuery Mobile は、スマートフォン向けの web サイト全般にというよりも、スマートフォン向けの web application に適しているということなのかな。

CSS Nite LP, Disk 13 reprise に参加しました

五日の土曜日、午後丸々つかったセミナー "CSS Nite LP, Disk 13 reprise" に参加してきました。

ウェブデザイナーやマークアップエンジニアといった方向けのセミナーなのかな。ほかの勉強会/セミナーと違い、女性の方が非常に多いという印象です。ノリも結構違うもんですねぇ。

今まで知らなかったのですが、最近はフロントエンドエンジニアという括りが出来ているのですね。 HTML5/CSS3/JavaScript を駆使して、 web application のサーバー側ではなくブラウザー側で開発を行う人ということでしょうか。

セミナーの内容自体は、スマートフォン対応するときの viewport や media query の話、 PhoneGap の話、などなど。有料イベントなので、資料等はしばらくの間公開されませんが、私が適当にとったメモは以下のとおり。これくらい雑なメモなら公開しても怒られないかな。誤字脱字間違いその他がおそらく含まれていますが、手直ししてません。あと、電源が確保できなかったので、最後の方はメモれなかったりしてます。

https://docs.google.com/document/pub?id=1gMo7AgVnDRf1IR9wcvDY1de5IxbvF9FhFMXVHmlobVE

今回は iPhone/iPad 対応を主題としたもので、 Android 関しては LP15 で取り合えるとのことです。

第14回 HTML5とか勉強会に参加しました

昨日 (2011-01-13) 、第14回 HTML5とか勉強会に参加してきたので、そのメモ。

スライド見ながら、話聞きながらのメモなので誤字、脱字、内容の誤り等あるかもしれないけど、とりあえず
そのまま。余裕があれば修正するかな。

https://docs.google.com/View?id=dgwhn5wk_3723x8k2dz

Titanius Mobile は、 html+css ではなく、 JavaScript でゴリゴリと書くということらしい。 Android 等のアプリケーションとして作られるパッケージの中に JavaScript インタープリターも入って、それで Titanium Mobile の JavaScript を動かすとか。 OS ネイティブの UI 部品を使うとか、 OS の機能の多くを使えるとか (Android だと Intent とかも) 、そのあたりうれしいかも。

Chrome Web Store は、 web application の showcase 的な使われ方をされるかもだけど、よりデスクトップアプリケーション的な web application の登場を促進するかも。

とかとか。

懇親会では、 Cr-48 をいじってみたりとか。