JavaScript 開発環境の用意(Eclipse WTP/JSDT)

いわゆる業務系アプリをつくっている現場でも徐々にモダンな JavaScript の開発が導入されるようになってきました。もちろん今までもバリデーションやコントロールの制御に使われてきましたが、なんというかノリっていうか、Java プログラマーがその知識だけで、それとなく動くものをつくってきたように思います。

そのような昔ながらの JavaScript しかみていないと、jQuery などで使われている近代的な JavaScript 記述方法はもはや別の言語にも見えてしまいます(笑)

てなかんじで、そろそろちゃんと JavaScript を勉強しないといけないねって感じも含めて去年末にプログラムをかいたのが「バッタになりたい魔法使い」でした。

Web絵本|バッタになりたい魔法使い

wizard_ogp

内容の詳細はこちらを。:)

canvas と Web 仕掛け絵本 | hiromasa.another :o)

実際の実装ですが、絵本のコマに対して canvas タグを対応させ、CSS では canvas を display: block; してブラウザの描画領域を全て埋め、横幅、余白を含め全ての描画制御を JavaScript から行っています。たとえば、背景画像横幅が足りなければ CSS で真ん中にもっていくのではなく、”白”を画像の左右に描画しているイメージです。

さて、JavaScript は特に Java のような静的型付け言語しか知らない場合、非常に特異な言語に見えるかもしれません。プロトタイプベースのオブジェクト指向や、コンテキストの考え方など、一般的なプログラミング言語の常識が通用しない部分が多々あります。

またブラウザという実行環境についても知識が必要で、HTML/CSS の操作や、そもそもどこから言語の機能で、どこからブラウザの実装なのか分からなかったり、なかなか難儀なものです。

専門の人が現場にいればいいのですが、お客さんによってはそもそもこういったジャンルの仕事があると思っていない場合もあり、小技を持っている専門外プログラマーの英知をもって、ひどいものができるという惨状を目の当たりにし、ぼくはついに立ち上がった、、かどうかは分かりませんが、よくある Java の現場で JavaScript をかかねばいけなくなった時の環境の用意の仕方や、ちょっとしたテクニックを書いてみたいと思います。 🙂

良い仕事には良い環境から。

よくある Java の現場ってことで Eclipse を用いていますが、「バッタになりたい〜」でも Eclipse 使っています。この方法は普通に JS かく場合にも便利ですのでお試しを。

Eclipse に含まれる Web Tool Platform(WTP)には、JavaScript Development Tools(JSDT)が含まれており、おそらくみなさんがインストールしているであろう、Eclipse for  JavaEE Developer に最初から含まれています。

Eclipse から JS サポートをうけるには、使っているプロジェクトを「JavaScript プロジェクトに変換」してあげます。変換といっても、機能追加みたいなイメージなので、その他は現状通りです。

ここでは新規にプロジェクトをつくって変換しています。「JavaScript プロジェクト」を新規に作成することも出来るのですが、一般的によくやるワークスペース外の htdocs の下にプロジェクトを配置する操作を行うと、JavaScript リソースの設定がおかしくなるようなので、いったん別のプロジェクトから変換するというやり方をとっています。

130320-0001

jstest をプロジェクト名としました。

130320-0002

サンプル的にファイルを配置してみました。ここでは js フォルダの下にソースを置くとします。

130320-0003

プロジェクトを右クリックして、「構成 -> JavaScript プロジェクトへ変換」します。既存プロジェクトがある場合はここからの操作です。

130320-0004

この後、ソースファイルの配置などを決めるダイアログがでますが、そのままOKしてください。(どうもこの段階で設定などをすると JavaScript リソースがおかしくなるようです)

これでプロジェクトが次のようになると思います。

130320-0008

JavaScript リソースが追加され「ECMAScript ビルトイン・ライブラリー」と「ECMA 3 ブラウザー・サポート」が入れば成功です。補完などが効かなくなったら、この二つが正しく入っているかを確認します。(ここで書いている手順以外だと、ビルトインライブラリーが入らないパターンがあるようです。。)

このままだとJavaScript リソースがプロジェクト配下の全てのファイルを対象としてしまうので(特に問題はないですが)、ソースファイルの位置をプロジェクトの右クリック -> プロパティー -> JavaScript -> ソース -> フォルダの追加から指定します。(jstest/js にしました)

130320-0005

さて、これで準備完了です。ようこそ、JavaScript の世界へ。 🙂

統合環境はプログラム言語の勉強のよき先生です。特に、静的型付け言語の場合は、コンテンツアシストやインテリセンスといった補完機能やリアルタイムエラー出力などの IDE の強力な機能が、いろいろな手助けをしてくれます。

オブジェクト指向なんか統合環境ぽちぽちいじって、コード補完駆使してフレームワークのライブラリ呼んでるうちに覚えるもんじゃなかろうか、なんて思ったりしますがどうでしょうか。ぼくはそうでした(笑)

JavaScript の場合動的型付け言語なので、IDE は少し貧弱な先生になりさがってしまいますが、それでもあるとないのとではだいぶ違います。

まずは、プロジェクトに追加された JavaScript リソースを眺めるところから。これはコンテンツアシスト用の JSDoc になっています。

ECMAScript ビルトインライブラリー。これが JavaScript の言語としての実態になります。これで全部ですがほとんどなんもありません。

130320-0009

ECMA 3 ブラウザサポート。見たような名前が並んできましたが、これは全部表示しきれていません。まだまだあります。これらはブラウザが言語につっこんできているオブジェクトとなります。

130320-0010

この中で、Window オブジェクトを選択して JSDoc をみると次のような記載があるのが分かります。

/**
 * Object Window()
 * @super Global
 * @constructor
 * @since Common Usage, no standard
*/
function Window(){};
Window.prototype = new Global();
Window.prototype.self = new Window();
Window.prototype.window = new Window();
..略..
Window.prototype.document= new HTMLDocument();

Global は JavaScript 側のオブジェクトですが、これをプロトタイプにして Window オブジェクトが生成されています。こんな感じで ECMAScript とブラウザは、グローバルを介してつながっている感じです。ちなみに「@since Common Usage, no standard」の記述がもの悲しい・・・。

こんなのを眺めていれば、alert() や document.getElementById() なんかがなぜその記述で動くのかが分かるようになりますね。

ちなみに Eclipse がこれらの JavaScript リソースを使ってコード補完ができるのは、次の設定によります。「プロジェクト -> プロパティ -> JavaScript -> インクルードパス -> グローバルスーパータイプ」

なんだかちょっとバグっているのですが「フィールドおよびメソッドを継承する元の SuperType」のところがブラウザと同様「Window()」になっているのが分かります。”null 中の”ってなんだって感じですが(笑)

130320-0014

というわけで、コード補完をやってみます。

グローバルスコープ。

130320-0027

window。

130320-0011

String オブジェクト1。

130320-0012

String オブジェクト2。static のように。

130320-0013

Math。あれ。。。(バグ?)

130320-0022

という感じで、JSDoc みたり、補完に出てくる候補を見たり実際にブラウザでグローバル this の中身を表示していたりすると、JavaScript についての理解が進むのではないかと思います。

なおあんまり関係ありませんが、JSDT jQuery を導入すると jQuery の補完もできるようになります。

130320-0015

130320-0016

次の変数名の補完はなんかちょっと微妙です。this がからむと厳しいですね。 JSDoc の @memberOf は効くようなのですが、、@this タグが使えるとなんとかなるのかもしれませんが、この辺は動的型付けの難しさ。

ほほう!

130320-0019

無念。。

130320-0021

最後に、リファクタリングを。 あらかじめお断りしておきますと、ローカル変数名変更以外のリファクタリングはうまく動かない感じです。でも、これだけでもだいぶ違います。

適当すぎるローカル変数名リファクタ用サンプルコード。

130320-0023

とりゃ。 hoge -> moge 変更。

130320-0024

パチパチ。

130320-0025

その他、リアルタイムエラー申告も役立つことでしょう。

未使用変数申告と、セミコロン忘れ。どっちもやりがちで、プログラムは動いちゃうパターンです(8行目、10行目)。こういうのは IDE にお任せです。だいぶ助けられます。

130320-0018

というわけで、いろいろ見始めると深みにはまっていく JavaScript の世界。ついブラウザのソースコードまでダウンロードし始めてしまいましたが、、そろそろやめておきましょう。。

とりあえず、現場で JavaScript かかなければいけなかったりしたときに思い出していただければ!

XBMC 12.0 Frodo Android デタ!

かなり長い間使っているオープンソースのひとつ、XBMC の 12.0 Fdoro がリリースされました!

XBMC 12.0 – Frodo

The second new platform is XBMC for Android. The simple fact of the matter is, XBMC for Android might not exist as a working port right now if it weren’t for the decision of Pivos Technology to employ two XBMC Team members fulltime to make it happen. Of course, countless other Team Members and non-Team coders have contributed to the code base both before and after that initial decision, but it was Pivos who gave our developers the necessary man hours to make XBMC for Android a reality.

XBMC は元々初代 XBOX をハックして動作していたフル画面系のメディアプレイヤーアプリなのですが、ここ数年は対応プラットフォームを増やしていき、12.0 ではついに Android の初期サポートが加わりました。 😀

日本語化の仕方などは、BoozerBlog さんにて解説があります。 バッタになっちゃえ!(>_<)

XBMC 12.0 “Frodo” をAndroidに入れてみた

Ubuntu PCにはCandidateあたりからインストールしていたXBMC 12.0 “Frodo”のStable版が公開されたというので、唯一の手持ちのAndorid機GALAXY NEXUSにさっそくインストールしてしてみました。

さっそく、ICONIA TAB A700 にインストール。

[tegaki]これはやばい![/tegaki]

20130202_005518

10 インチで動かす XBMC for Android は初期サポートとはいうものの、 Python によるテーマエンジン、動画、音声フューチャーなどが PC と同様に動作し、これは完全に XBMC です。(ソース全然みてないですが、JNI で全てコンパイルして Java の部分追加しているのだろうか・・・)

おなじみメニュー画面。 メディア再生中でメニューに戻ってもバックグラウンドで動きます。

device-2013-02-02-002047

ICONIA TAB A700 はクワッドコア Tegra3。残念ながら CPU ステータスは隠れて 2 つまでしか見えません(笑) OpenGL ES のバージョンや GPU の温度なども表示されています。

device-2013-02-02-002327

PC 版と同じように DNLA 経由でサーバを見ていますが、漢字の表示など含めてうまく動いています。 動画も DVD クラスのビットレートでも平気で再生できました。

device-2013-02-02-002530

充実のデータソースの指定。 Windows ファイル共有や NFS、UPnP(DNLA)、その他 Android の内部のプレイリストも扱えるようです。 PC 版譲りですが、SMB 使える Android メディアプレイヤーは XBMC くらいでしょうか?

device-2013-02-02-002816

細かい設定も可能な動画再生機能。 Android にも ffmpeg ベースの動画再生アプリは結構ありますが、他では音がずれるような動画も XBMC では正常に再生できました。まだソフトウェアエンコードのようですが、Tegra3 だと問題なく再生できるようです。

device-2013-02-02-003028

XBMC は XBOX 時代から使っていますが(そしてまだうちでは XBOX 版も動きます)、ここまでこのアプリが化けるとは思いませんでした。 XBOX という特性上、テレビ表示、コントローラ操作であることと、XBOX の少ないリソースで動作させる必要があったため、この形の設計になったと思うのですが、テーマエンジンやモジュール構成などさすがとしか言いようがない感じです。

既にあちこちのセットトップボックスでも利用されているようですが、マルチウィンドウが重視されなくなってきた今、今後ますます伸びるアプリケーションの気がします。

Android 版はまだ初期サポートということで、これからも継続して良くなると思うととても楽しみです。 がんばれ XBMC 😀

Android タブレット ICONIA A700 購入

忙しくてたまりたまったブログネタ・・・。 少しずついきましょう。 🙂

去年の出来事になってしまいますが、Android 10インチタブレット ICONIA A700 を購入しました。どうしても NVIDIA Tegra3 をみてみたかったというのが理由で、、10インチなのにフルHD 液晶がついているいわゆる HiDPI 機です。

らいらい、と。 :) ブラウザの devicePixelRate は 1.5、Android OS のピクセル密度でいうと hdpi になると思われます。

電池の持ちもよく、内蔵スピーカも非常にうまく鳴って、動画を寝ながら見るのにとてもマッチする機械でした。Hulu 見るとか枕元マシーンとして活躍してくれることでしょう。

さて、NVIDIA Tegra3 は 1.3GHz のクワッドコア。ここまでくるともう一昔前の PC と同じスペックです。というわけで、別になにするわけでもないのですが、Microsoft の bluethoth キーボードをつないでみました。

マイクロソフト Wedge Mobile Keyboard というやつですが、for Business という段ボール版?がでていてこちらだと、4700円弱で買えるようです。知らなくて 8000円弱のリテール版買ってしまいました。とほほ(笑)

ジャストサイズでお気に入りです。日本語キーボードとして認識させるために、”日本語106/109キーボードレイアウト“をインストールし、キーボード接続後、設定の「言語と入力」の物理キーボードからレイアウトをアサインします。Android 4.1 で良かった。:) ATOK は付属ではなく、機能の多いパスポート版を利用しています。

ほとんどのソフトで問題なく日本語入力が出来ますが、一部ダイアログの表示なので画面のフォーカスが外れると日本語入力できなくなる場合もあるようです。右下にでているキーボードアイコンが消えるパターンです。この際はちょっと面倒ですが、画面の入力エリアをタッチすれば直ります。(付属の Office はこれがよく起きるので使うのが厳しいです)

さて、せっかくキーボードつなぎましたので便利なアプリをいくつか。

まずはテキストエディタ”Jota+

Dropbox に直接つないでファイル保存できるプラグインがあって、メモ書きになかなか便利です。

次はターミナルエミュレータ。 これがとても強力! “VX ConnectBot

これで UNIX につなげば、どんなプログラムでもつくれます(笑 エディタもお好みのモノを。ほ〜んのちょっと描画が遅いので、vim がいいかもしれません。

キーボードをつないだ場合は、次の設定をすると PC からつないだのと同じ操作になります。 カスタムキーマップ -> Full hardware keyboard

漢字入力も UNIX 側でやれば完全に同期環境です。便利ですね。 🙂

Android のお楽しみはいろいろな USB 機器がつながること。残念ながら手持ちの USB オーディオは動きませんでしたが、元々音が悪くないのでここはOK。じゃー、USB コントローラを。

ソニック1,2 が 100円だったので買ってみました。ちゃんとコントローラで動きます。回転面だけタブレット持ってやってください。もれなく肩がおかしくなります(笑)

ソニックはキャラが 3D で描かれていますので、存分に Tegra3 で HiDPI のゲームを楽しめます。HDMI もでてますので、テレビで遊んでみるのも面白いかもです。

今年は PC よりタブレットのほうが出荷するんじゃないかという予測もあるそうで、Web もタブレットアクセス全盛になるのが遠からずくるかもしれませんね。PC もスリープ状態などがタブレットに歩み寄りを見せ、タブレットは性能が PC 並に上がりで、まぁなにがなんだかって部分もありますが、ぽちぽち遊んで妄想したいと思います。(何をだ