概要

Google I/O 2014のセッションの1つ「Making music mobile with the Web」のレポート記事です。Officialに公開されているYouTubeはこちらです。

OpenWeb 技術であるWebRTC、Web Audio APIは一度は耳にしたことのあると思います。この2つの技術、そして標準化が始まったばかりのWeb MIDI API（電子楽器とブラウザを直接接続するAPI）を利用した音楽制作アプリケーション「Soundtrap」。これらを使って、実際にセッションのオーディエンス、遠隔地の人とコラボレーションをして、Google I/Oのテーマ曲を作成するデモンストレーション中心のセッションでした。本レポートと合わせて映像もぜひご覧ください！

このセッションでは、主にモバイル端末（Nexus 7、Nexus 5）を使って進行されました。Webアプリといえば、JavaScriptでの構築を想像される方も少なくないので意外でした。しかしながら、「Soundstrap」はDartで開発されていたところでした。(開発言語にDartを選択した理由も、後ほど説明していきます)

それでは内容を見ていきましょう。

※2014/7/4にDartは、ECMA標準仕様として承認されたと発表がありました。

音楽制作

音楽制作にはいろいろな進め方がありますが、このセッションでは以下の順で録音が進められました。

1. リズムの選択 (1:49-)
2. Bass の録音 (3:02-)
3. Guitar(メロディー)の録音 (15:11-)
4. Keyboard(伴奏)シーケンスの作成 (16:28-)
5. Vocal の録音 (23:30-)
6. Mix Down (34:55-)

1. リズムの選択

曲のベースとなるリズムを決めます。Soundtrapにあらかじめ用意されているLoop素材を追加し、リズムを聴きながら「ん～」とか「もっとRockしてるのがいいな～」とかコメントしながら選択を終えました。

2. Bassの録音

Bassの音はあまり耳には聞こえませんが、実は曲の重要な土台となる低音パートです。 Bassの録音をすると、リズムしかなかった曲の輪郭がモヤっと見えてきます。

Bassを録音する様子

Media Capture APIの1つである、getUserMedia()を使って録音します。

getUserMedia()は、マイクからのInput、WebカメラからのビデオStreamを取得する時に使います。マイクからのInputを取得する時は、スピーカーからの出力をマイクが拾わないようにAEC(Acoustic Echo Canceling)、またマイクからのInputのレベルを保つために AGC(Auto Gain Control)を行うことが可能です。マイク以外の入力を取得する場合（Line入力：ギター、シンセサイザー等）は必要ないので、今回もOffにします。コードは以下のように書きます。

navigator.getUserMedia({audio:{echoCancellation: false}}).then((stream) {
  // 実際の処理をここに書きます
});

then() が見慣れない書き方かもしれませんが、これはDartに実装されている Futureという並列処理デザインパターンです。streamを得た時にどんな処理をするのかを、then()の中に書きます。

3. Guitar（メロディー）の録音

Guitarで主旋律パートを録音します。主旋律ですので向かう方向がハッキリします。

Guitarの録音をする様子

Bassの録音と同じく、getUserMedia()を使って録音します。

特にギターの場合、エフェクターという専用の信号処理機械を通して音を作ることが多いです。エフェクトの種類は音を遅らすDelay、音程を微妙にズラすことで複数でコーラスをしているかのようなハーモニーを作るChorus、音を歪ませることで音に角を付け、いわゆるエレキギターと聞いて想像する音を作るFuzz、Distortion、Overdriveがありますが、これらのエフェクトもブラウザで行ってしまいます。（セッション内でのデモ）

これらのエフェクトは、以下のように接続します。

Input(getUserMedia()からのAudioStream)をWebAudioで作成したEffectsを通し、WebAudioでの音声の出力口であるDestinationに接続します。

Delayエフェクトの接続方法を例にとって、実際に説明をします。

Guitarの音(Input)を直接Destination、またDelayに接続します。Delayで任意の時間遅らせて発音した音を、Gainに接続して音量を絞ります。最後にDelayで遅らせ、音量を絞った音をDestinationに接続します。結果としてギターで弾いた音は、山に向かって「ヤッホー」と叫びやまびこを楽しんでいる人の隣で聞いているかのような効果、つまりEffectが得られるのです。

この接続をコードにすると、以下のようになります。

var context = new AudioContext();

// getUserMediaのAudioStreamをWebAudioに接続する
navigator.getUserMedia({audio:true}).then((stream){
  var guitar = context.createMediaStreamSource(stream);
  var speaker = context.destination;
  guitar.connect(speaker);
});

// Delayエフェクトの接続
var delay = context.createDelay();
guitar.connect(delay);

var gain = context.createGain();
delay.connect(gain);

// Delayエフェクトをかけた音を、出力口のSpeaker(Destination)に接続
gain.connect(speaker);

4. Keyboard(伴奏)シーケンスの作成

そして、Keyboardで伴奏パートのシーケンスの作成を行います。伴奏が入ると曲がハッキリし、各楽器通しでハーモニーが生まれます。

左下小窓がMoscone Center West、全体がGoogle San Francisco OfficeからWebRTC でStreamingしている様子

WebRTCを使って、上の画像のように遠隔地から行います。Google I/Oの会場であるMoscone WestとGoogleさんのSan Francisco Officeを接続し、シーケンスを直接Soundtrapに作成します。Keyboardの演奏はWeb MIDI APIを使い、Keybord（電子楽器）とブラウザを接続して演奏データはMIDI Messageの形式(音声データではなく、「どの音を、どの強さで鳴らせ/止めろ」というような指示を表現したメッセージ)で時間と一緒に記録（シーケンスの作成）を行い、再生する時には記録された時間通りにMIDI MessageをSoundtrap上にあるSoftwearシンセサイザーに送信して、Softwareシンセサイザーが音を出しています。

セッションの中で説明はありませんでしたが、Web MIDI APIを使って電子楽器とブラウザを接続するコードを以下に紹介させていただきます。

// 電子楽器と接続
navigator.requestMIDIAccess({sysex:true}).then(successCallback, errorCallback);
function successCallback(access){
　// 入力として利用可能な電子楽器のリストをConsoleに出力
　var inputs=access.inputs()
  console.log(inputs);

　// 入力として利用可能なindex=0の電子楽器から受信したMIDI MessageをConsoleに出力
  inputs[0].onmidimessage=function(event) {
    console.log(event.data);
  }

　// 出力として利用可能な電子楽器リストをConsoleに出力
  var outputs=access.outputs()
  console.log(outputs);

　// 出力として利用可能なindex=0の電子楽器にMIDI Messageを送信
  // A4(ラ：440hz、MIDI Key番号：0x45(69))を最大音量(7F(127)で発音させる例)
  outputs[0].send([0x90, 0x45, 0x7f]);
}
function errorCallback(msg) {
  // 何らかの問題で電子楽器との接続ができなかった場合、Consoleにエラーメッセージを出力
  console.log(msg);
}

※JavaScriptでの書式になります。 .then()に関して、書式はDartとJavaScriptで同じですが、Dartでは Futureという並列処理デザインパターン、一方JavaScriptではPromiseという並列処理デザインパターンですので、内容は正確にいうと異なりますのでご注意ください。

次に、WebRTCの接続についてです。WebRTCは、RealtimeにPeer to PeerでAudio、Video、Dataの3種類のStreamを使ったコミュニケションができるAPIです。接続には、PeerConnectionを使います。Soundtrapにてビデオチャットを行いながら音楽制作を行うためには、ビデオチャットを行うWebcam stream、音楽制作用に楽器のステレオ音声を送るStereo music streamが必要になります。

ビットレートはそれぞれStereo music Streamが128Kbps、Webcam streamがVP8 HD 2Mbpsで、PeerConnectionを使ってStreamしています。

5. Vocalの録音

録音の最後はVocalです。これで曲のメイン素材の録音、作成が完成です。

Nexus 5を片手に会場で歌声を録音する様子

Vocalの録音はNexus 5(携帯電話)を使用して、getUserMedia()を使って録音を行います。実際に歌うのはセッションのオーディエンスです！！（私の声も聞こえるかもです）マイクではなく、携帯電話をマイク代わりにして、Soundtrapに直接録音を行います。

6. Mix Down

「マスタリング」とも呼ばれ、各パート毎に音量の調節、音程の音量調節(Equalizing)、また残響(Reverb、Echo)の調節を行うことで各パートの音のバランスをとり、ハーモニーを深め、そして際立たせます。

SoundtrapはCloud型の音楽制作Webアプリケーションですので、インターネットに接続できる環境があればどこからでも音楽制作に参加することができます。もちろん、Mix Downをすることも可能です。セッションでは、Keyboard を弾いていた場所(GoogleさんのSan Francisco Office内で、セッションはMoscone Westです)でMix Downが行われました。

SoundTrap上に各パートが録音された状態

その結果、Google I/Oのテーマ曲はこのように仕上がりました。（下の画像をクリックすると視聴できます）

波形をWebGL表示した背景と共に再生されました

こちらは Soundtrap内に保存されている音源をそのまま視聴できます 。試聴する

開発言語にDartを選択した3つの理由

冒頭に、Soundtrapの開発にDartが採用されたことに触れました。以下の3点が、Dartを選択した理由だそうです。

親しみやすさ(Familiarity)

Dartはとにかく簡単に学べるようにと考えられて作られいて、Class や単一継承にセミコロン、中括弧を使うところがJavaScriptや、Java、C++にとても似ているので開発者にはとても親しみやすい。

拡張性(Scalability)

Webアプリの開発はとても小さなスクリプトから開始し、それが成長して大規模で複雑なアプリになっていく。従って大規模になった時のことを考えると、スケールアップができる環境で開発を開始することが望まれる。DartではそれをLibrary、またPackageという形で実現している。

Soundtrapの開発は、これらのDartの拡張性によってアプリが大規模になった時でも、開発のスピード（生産性）を落とすことなく進めることができたそうです。

生産性(Productivity)

Dartで開発する時は、Dart Editorを使うことができます。このEditorではコードを静的監視しているので生産性がとても高いです。例えば、静的監視されているので、アプリを動作させなくても、Unitテストを走らせなくても構文エラーをリアルタイムに知ることができるのできます。つまりDart Editorは、世の中にある熟れたIDEと同じような機能が搭載されているツールになっているので、不自由はなく、生産性高く進めることが可能です。

まとめ

Soundtrapは、OpenWeb技術であるMedia Capture、Audio Processiong、Real-time CommunicationのAPIの紹介にはとてもよいアプリケーションです。今回はChrome上で動作させて紹介しましたが、これらの技術はOpenWeb技術ですので、デスクトップ、モバイル環境にある別のブラウザでも動作させることが可能です（可能になるでしょう）。また、これらの技術を使うことのできる世の中のデバイス数は、以下の通りです。

• Web Audio 20億のデバイス（10億がモバイル）
• WebRTC 15億のデバイス（3億がモバイル）

そして Android LのWebViewではChrome V36相当になりますので、Web Audio、WebRTCがほぼすべてのAPIをサポートされた形で使えるようになります。30日でのアクティブユーザ数が10億のAndroidという環境ですので、ものすごく多くのユーザーに対して、これらを使ったアプリケーションの提供が可能になるため、そのインパクトは絶大です。

Q&Aで質問が出た項目

Q. Android LでのAudioのLatencyについて教えてください。

A. 数値の約束はできないが、改善に向けて真剣に取り組んでいる。ICS、JB、Kitkatで20msまでLatencyを短縮することはできた。しかしながら、我々としてもまだまだ満足はしていないので改善していくだろう。

Q. MIDIのサポートについてどこまで進んでいるのか教えてください。

A. Web MIDI APIはOpenWebStandardとして標準化が始まったばかりで、Chromeは先行して実装を行った。次期、またはその次のVersionでは全ての機能の実装を行い、さらにFlagの設定なしでの動作させる予定です。セッション内でSoundtrapで利用しましたが、もちろんセッション内だけなく、Soundtrap内ではMIDIの接続も利用することが可能です。
Chrome以外のブラウザでのサポートに関しては、現状様子見を行っています

Q. Mix Downはクライアントサイドで行っているのか、サーバーサイドで行っているのか教えてください。

A. 音源はクラウド上のサーバー側にあって、再生をクライアントで行っています。サーバサイドはJavaとScalaで利用可能なPlay Frameworkを使っています。クライアント側で再生する時は、サーバー側でMix DownしたMP3ファイルを作成し、それをSoundtrapというクライアントアプリ側で再生をするという仕組みになっています。

セッションを終えて感じたこと

Before Web Audio/MIDIの時代では、DAW（音楽制作用ソフトウェア）を購入し、Audio I/F、キーボード、マイク等のハードウェアを揃えながら満足できる音楽制作の環境を整えるまでには、いささか道のりが長く時間がかかるのが常識で、またそこを楽しむこともありました。

しかし、Webブラウザで、デスクトップはもちろん、モバイルデバイス上での制作、さらには遠隔地とつないで、誰でも手軽に音楽制作に手を伸ばすことのできる時代（味見も含めて）なのだなと改めて感じました。制作はもちろんですが、ツールの作成、エフェクトの作成等、少し頑張れば、かゆいところに手の届くいわゆるオレシステムを作り上げることもそこまでハードルは高くないと思います。

今やアマチュアバンドとはいってもホームページを持ち、そこには自ら制作した楽曲、さらに自らで制作したであろう、とはいえクロリティの高いプロモーションビデオまでも揃えて公開する時代。昔はインスピレーションを得たらその場でフレーズやパターンの作成ができ、モバイルできる音楽制作専用ハードが流行した時もありました。

これからはインスピレーションを得たらポケットからさっとモバイルな汎用デバイスを取り出し、ブラウザを立上げDAWのURLに接続をし、その場でフレーズのみならず全体の流れを録音し楽曲にまとめることも容易になるでしょう。そして、遠隔にいる友人にバッキング、Mix Downしてもらい、その場でプロモーションビデオまで制作する一連の流れを即興でできてしまう、なんていうアマチュアでもプロ顔負けの音楽制作環境を持てる、素晴らしい時代が確実に来るだろうと感じました。同時に、これらの音楽制作に欠かせない技術と他のOpenWeb技術を連携させることでどのような新しい表現方法、また価値、文化が生まれるのかワクワクを膨らませてきた次第です。

W3Cの一員として標準化を進めているWeb MIDI API。今回は少しだけ登場し、スライドとしての説明はありませんでしたが、音楽を制作をする上ではコアになる技術です。標準化までこぎつけられるように強く推進をしていかねばとも感じました。

紹介されたURL等

• Soundtrap：デモで使われたOpenWeb上に構築された音楽制作環境
• Getting Started with WebRTC：WebRTCのチュートリアル（英語）
• Getting Started with the Web Audio API：Web Audio APIのチュートリアル(日本語)
• Get Started with Dart：Dartのチュートリアル（英語）

2010年前後からこれらを解決する手段として、JavaScriptを生成する中間言語が登場してきました。これらはJavaScriptの代替ということで「altJS」と呼ばれています。altJSの言語の多くはクラス機構のサポートなどJavaScriptの抱える問題の多くを解決しており、スマートにコードを書くための仕組みが用意されており、開発効率を大幅に向上させることができます。本記事では前後編の2回でaltJSの5種類の言語を比較します。

はじめに

altJSとしてよく知られているのが次の5つの言語です。これらの複数の選択肢から、どの言語を選択するかは悩みどころです。例えば静的型情報やコンパイル時の型チェックの有無、パフォーマンス、既存JSとの相性、記述を要するコード量、開発環境の充実度など、言語を採用するには様々な観点からバランスよく選択することが重要になってきます。

本記事では各言語の基本的な文法や特徴、開発環境、筆者が考えるメリット・デメリットについて紹介します。

※いずれの言語もマルチプラットフォームであり、Windows, Mac OS Xともにどちらでも利用することができます。

比較対象のサンプル

サンプルとしてシンプルなスライドショーのWebコンテンツを用意しています。それぞれの言語でどのように記述して実装するのか、また生成されたJavaScriptがどのようなものであるか確認していきましょう。このサンプルでは言語の特性を紹介するために、実用的な要素として「クラス構造の利用」「既存JSライブラリの利用」「ユーザー操作」を含めています。

• デモを開く

「Change Photo」ボタンをクリックすると写真が切り替わります。CSS3の3D TransformsをjQueryを用いて制御します（確認の際には、CSS3の3D Transformsが利用できるブラウザをご利用下さい）

TypeScript

概要

TypeScriptはマイクロソフトが開発するオープンソースの言語です。TypeScriptはJavaScript/ECMAScript 5を拡張した設計となっており、型情報やクラス、インターフェース、module、アロー関数式、列挙型、ジェネリクスといった言語機能が搭載されています。また既存のJavaScriptに僅かな修正を加えるだけでTypeScriptとして動作させることも可能です。いつくかの構文はECMAScript 6の案をベースとしたものになっています。

出力されたJavaScriptコードはとても読みやすく、TypeScriptのコードと基本的に1対1対応しています。またコメントも含めてJSに出力されるためデバッグが容易です（ソースマップを利用したデバッグも可能です）。

既存JSライブラリの使用方法

TypeScriptでは定義ファイル（拡張子は.d.ts）と呼ばれるインターフェースを定義したファイルを用意します。TypeScriptではreferenceタグという記述で定義ファイルを参照します。有名なJSライブラリの定義ファイルはborisyankov/DefinitelyTypedでまとまっているので、ここからダウンロードすると良いでしょう。

:javascript:
/// 

コード例

TypeScriptのコード(v0.9.1.1)

基本的な文法は既存のJavaScriptと同じです。変数には「:」キーワードで任意に型情報を記述することができ、クラスではアクセス修飾子の「private」を利用することで外部から参照することのできないメンバー変数や関数を用意することができます（カプセル化が可能）。

:javascript:
///     
window.onload = ()=> {
    var countManager:CountManager = new CountManager();

    $("#btn").click(()=> {
        // カウントを更新
        countManager.addCount();
        // CSSの角度を計算
        var rot:number = countManager.getCount() * 90;
        // エレメントに適用
        $("#effect").css("transform", "rotateX(" + rot + "deg)");
    });
}

class CountManager {
    private _count:number = 0;
    constructor() {
    }
    addCount() {
        this._count++;
    }
    getCount() {
        return this._count;
    }
}

TypeScriptをコンパイルして生成したJavaScriptのコード

生成されたJavaScriptがオリジナルのTypeScriptの原型をとどめたまま出力されているのがわかります（日本語を含むコメントアウトまで出力されてます）。

:javascript:

///     
window.onload = function () {
    var countManager = new CountManager();

    $("#btn").click(function () {
        // カウントを更新
        countManager.addCount();

        // CSSの角度を計算
        var rot = countManager.getCount() * 90;

        // エレメントに適用
        $("#effect").css("transform", "rotateX(" + rot + "deg)");
    });
};

var CountManager = (function () {
    function CountManager() {
        this._count = 0;
    }
    CountManager.prototype.addCount = function () {
        this._count++;
    };
    CountManager.prototype.getCount = function () {
        return this._count;
    };
    return CountManager;
})();
//# sourceMappingURL=main.js.map

• TypeScript版デモを再生する

開発環境

コンパイラを無償でダウンロードできるので、基本的にエディターは選びません。開発環境としてはVisual StudioやWebStorm/IntelliJ IDEAが対応しており、これらのソフトでコード補完やリファクタリング機能を利用することができます。既存のJavaScriptと比べて型指定や型推論も利用できるため、エディターによっては強力なコード補完の恩恵を受けることが可能です。

Visual StudioでTypeScriptを開発している様子

筆者が考えるTypeScriptのメリットとデメリット

メリットとしてはJavaScriptを習熟した人であれば、差分を学習するだけで利用できる学習コストの低さや、型情報や数多くの機能が言語に搭載されており、安全かつ効率的に開発できる点です。出力するファイルを分割することも一つにまとめることもでき、柔軟な開発スタイルが提供されています。またECMAScript 6の案を先行実装している点からも、将来標準になる言語を学習している安心感があります。

デメリットとしてはコンパイルが遅いことと、クラスのメンバー参照で必ずthisを記述しないといけない点、モジュールを利用した場合の名前空間の記述が煩雑になる点です（import修飾子が使えるものの根本的な解決になってはいない）。こういったメリット・デメリットから、JavaScriptエンジニアが中・大規模な開発プロジェクトに利用するのに向いているのではないかと考えています。

CoffeeScript

概要

CoffeeScriptはJavaScriptに比べてシンプルに記述できるため、コード量が少なくなり可読性の高いコードを記述できる言語です。クラス機構をサポートしているほか、配列内包やパターンマッチを利用することができます。構文はRubyライクでもあり、Ruby on Rails 3.1でも正式にサポートされています。

既存JSライブラリの使用方法

どのJSライブラリでも、基本的には設定を要せず利用することが可能です。TypeScriptやHaxeのような定義ファイルを用意する必要はありません。

コード例

CoffeeScriptのコード （v1.6.3）

インデントやシンタックスシュガーを利用する文法の恩恵もあり、他のaltJSのサンプルと比べて最も少ないコード量となっています。TypeScriptと同様にアロー関数式を使うことができたり、「@」キーワードを使えることでthisの指し示すスコープがわかりやすいのが特徴でしょう。またパターンマッチングが利用できるため、①の箇所のように、文字列の中に変数を埋め込むことが可能です。

:javascript:
window.onload = ->
  countManager = new CountManager

  $("#btn").click ->
    # カウントを更新
    countManager.addCount()
    # CSSの角度を計算
    rot = countManager.getCount() * 90
    # エレメントに適用
    $("#effect").css("transform", "rotateX(#{rot}deg)") #①

class CountManager
  _count: 0

  addCount: ->
    @_count++

  getCount: ->
    return @_count

CoffeeScriptをコンパイルして生成したJavaScriptのコード

CofeeScriptもオリジナルのコードが素直にJavaScriptとして出力されています。回避策はありますが、関数の最後の行がreturnステートメントで返されているところは少し戸惑うかもしれません。

:javascript:
// Generated by CoffeeScript 1.6.3
(function() {
  var CountManager;

  window.onload = function() {
    var countManager;
    countManager = new CountManager;
    return $("#btn").click(function() {
      var rot;
      countManager.addCount();
      rot = countManager.getCount() * 90;
      return $("#effect").css("transform", "rotateX(" + rot + "deg)");
    });
  };

  CountManager = (function() {
    function CountManager() {}

    CountManager.prototype._count = 0;

    CountManager.prototype.addCount = function() {
      return this._count++;
    };

    CountManager.prototype.getCount = function() {
      return this._count;
    };

    return CountManager;

  })();

}).call(this);

• CoffeeScript版デモを再生する

開発環境

コンパイラを無償でダウンロードできるので、基本的にエディターは選びません。開発環境としてはVisual StudioやWebStorm/IntelliJ IDEAが対応しています。

WebStormでCoffeeScriptを開発している様子

筆者が考えるCoffeeScriptのメリットとデメリット

メリットとしては、圧倒的なコード記述量の少なさです。JavaScriptのシンタックスシュガーと呼ばれるように、最小限のタイピングでどんどんコードがかけていく魅力があります。またインデントを利用する言語であることから、コードの可読性が必然的に高くなるのもメリットの一つです。

デメリットとしては型情報がないことによる、静的型チェックが無いことや開発環境でのコード補完利用の限界です(型情報がないとコード補完にノイズが入りがちになります)。こういったメリット・デメリットから少人数・小規模な体制でスピーディに開発する場合に向いているのではないかと考えています。

Haxe

概要

Haxe（ヘックス）は静的型付け（ただし動的型も使用可能）のオブジェクト指向言語です。汎用プログラム言語でありJavaScriptの他にも、ActionScript、C++、C#、Java、PHPへのソースコードの変換が可能です。

Haxeは文法としては標準化が中止されたECMAScript 4に類似しており、Flashの開発言語ActionScript 3.0に似ているのが特徴です。数多くの機能を言語レベルで備えており、クラス/パッケージ機構、型推論、ジェネリクス、インライン関数、パターンマッチング、配列内包表記、構造的サブタイピング、高機能な列挙型（詳しくは[公式サイトの説明]を参照ください）等の機能を持ち合わせています。コンパイラがOCamlという言語で開発されており、コンパイルが高速です。言語としての硬さ（厳密な型のチェック）やコンパイル速度の面から、大規模開発においてメリットがあります。

既存JSライブラリの使用方法

Haxeでは、Externと呼ばれるインターフェースを定義したファイルを用意します。Externファイルは自分で作成することも可能ですが、Haxe専用のパッケージ管理ツール「haxelib」を使うことで著名なJSライブラリのExternファイルをインスントールすることができます。

例：CreateJSのインストール方法 haxelib install createjs

コード例

Haxeのコード （Haxe 3.0）

HaxeはJavaScriptだけがターゲットの言語ではないため、JSのwindowオブジェクトにアクセスするには、Browserクラスのwindowプロパティを参照します。JavaScriptのオブジェクトを呼び出す際にはこういったラッパークラスを経由して呼び出す必要があります。jQueryを利用する場合は「new JQuery()」という形でインスタンスを作成して利用します。使い方は大きく異ならないもののHaxeの言語文化にあった形にライブラリのAPIが整理されている場合があるので注意が必要です。

:javascript:
package ;
import js.Browser;
import js.JQuery;

class Main {    
    static function main() {
        new Main();
    }

    function new () {
        Browser.window.onload = init;
    }

    function init(e:Dynamic){
        var countManager:CountManager = new CountManager();

        new JQuery("#btn").click(function():Void {
            // カウントを更新
            countManager.addCount();
            // CSSの角度を計算
            var rot:Int = countManager.getCount() * 90;
            // エレメントに適用
            new JQuery("#effect").css("transform", "rotateX(" + rot + "deg)");
        });
    }
}

class CountManager {
    private var _count:Int = 0;
    public function new () {
    }
    public function addCount():Void {
        _count ++;
    }
    public function getCount():Int {
        return _count;
    }
}

Haxeをコンパイルして生成したJavaScriptのコード

Haxeでは、ECMAScript 5相当のJavaScriptを出力します。比較的読みやすいコードが出力されますが、下記の例ではBrowserオブジェクトやJQueryオブジェクトなど、ラッパーオブジェクトがそのままJavaScriptとして出力されています。出力されたコードは手を加えるのはあまり向いていないと言えるでしょう。

:javascript:
(function () { "use strict";
var Main = function() {
    js.Browser.window.onload = $bind(this,this.init);
};
Main.main = function() {
    new Main();
}
Main.prototype = {
    init: function(e) {
        var countManager = new CountManager();
        new js.JQuery("#btn").click(function() {
            countManager.addCount();
            var rot = countManager.getCount() * 90;
            new js.JQuery("#effect").css("transform","rotateX(" + rot + "deg)");
        });
    }
}
var CountManager = function() {
    this._count = 0;
};
CountManager.prototype = {
    getCount: function() {
        return this._count;
    }
    ,addCount: function() {
        this._count++;
    }
}
var js = {}
js.Browser = function() { }
var $_, $fid = 0;
function $bind(o,m) { if( m == null ) return null; if( m.__id__ == null ) m.__id__ = $fid++; var f; if( o.hx__closures__ == null ) o.hx__closures__ = {}; else f = o.hx__closures__[m.__id__]; if( f == null ) { f = function(){ return f.method.apply(f.scope, arguments); }; f.scope = o; f.method = m; o.hx__closures__[m.__id__] = f; } return f; };
var q = window.jQuery;
js.JQuery = q;
js.Browser.window = typeof window != "undefined" ? window : null;
Main.main();
})();

• Haxe版デモを再生する

開発環境

コンパイラを無償でダウンロードできるので、基本的にエディターは選びません。開発環境としてはFlashDevelopの対応が特に充実しており、非常に強力な「あいまい補完」と言われるコード補完や、コード生成機能を利用することができます。

FlashDevelopでHaxeを編集している様子

筆者が考えるHaxeのメリットとデメリット

メリットとしては、数多くの機能を言語レベルで搭載している点や、コンパイルが高速である点です。JavaScriptの名前空間の煩雑さやthisのスコープの苦労がなくなるのも大きなメリットの一つです。

デメリットとしては、言語が厳密過ぎる点です。基本的に型指定は必須ですし、暗黙的な型変換が利用できないので、慣れないうちはコンパイルエラーに苦労するでしょう。また出力されるJSファイルが一つにまとまることから、モジュール開発(JSライブラリ開発)には向いていないでしょう。

こういったメリット・デメリットから、大規模もしくはゲームや全画面Canvasのコンテンツなど、複雑なコンテンツを安全に開発する場合に向いているでしょう。 　

まとめ

私がaltJSを選ぶ際に必要と考えるのは、プロジェクトへの適正と、エンジニア/クリエイターのバックグラウンドだと考えています。それぞれのaltJSに影響を受けた言語があるように、開発に従事するエンジニアのバックグラウンドによって、言語のとっつきやすさに差があると思います。具体的にはRubyユーザーにはCoffeeScriptが、FlashユーザーにはHaxeが向いている傾向があるでしょう。利用するユーザーが様々なのでaltJSがどれか一つの言語に収束することはなく、勢力分布の変化はあれど基本的にはaltJSのユーザー数は並行して進化していくと筆者は考えています。

次回の後編では、altJS言語としてDartとJSXを紹介します。

参照

• altJS勉強会「Haxeすごいからみんな使え！」
• altJS 勉強会で CoffeeScript について喋ってきました
• HTML5デモ「日本全国花粉飛散マップ」を作って分かったCreateJSとTypeScriptでの効率的な開発手法 – ICS LAB