この記事は Ableton Live を JavaScript でハックする方法を紹介したシリーズの、最初の記事です。このシリーズでは読者は Ableton Live 9 suite を持っていて、JavaScript にある程度慣れ親しんでいることを前提としています。

This is the 1st of a series of articles about hacking on Ableton Live with JavaScript. These articles assume you own Ableton Live 9 Suite and are comfortable coding JavaScript.

この記事では JavaScript を Live のないで実行するための準備について説明しています。

This article explains the setup to run JavaScript code inside Live.

その方法についてすでに知っている人は、この記事を飛ばして次の記事に進んでください。

If you are already familiar with this setup, you can skip ahead to the next article.

各手順の概要

Summary of Steps

  1. Max Midi Effect を Live プロジェクトに追加して、編集を開始する
  2. "js your-filename.js" オブジェクトを Max デバイス に追加する
  3. Max デバイスをロックしてから js オブジェクトをダブルクリックし、JavaScript editor エディターを開く
  4. JavaScript ファイルを保存する
  5. Max デバイスを JavaScript ファイルと同じ階層に保存する。
  6. 既知のバグ！ Max デバイスを一旦閉じてから、再度編集してください。このように再起動をしないと、Max デバイスがを認識しません。バグなので将来的には修正されるはずです。
  7. Max ウィンドウを開いてデバギング情報を確認します
  8. JavaScript のコーディングを開始します
  9. JavaScript ファイルをセーブすると、コードが実行されます
  1. Add a Max Midi Effect device and edit it
  2. Add a "js your-filename.js" object to the Max device
  3. Lock the Max device and double-click the js object to open the JavaScript editor
  4. Save the JavaScript file
  5. Save the Max device in the same folder as the JavaScript file
  6. Bug alert! Now close the Max device and edit it again. The Max device can't find the JavaScript file until we "reboot" like this. This bug should be fixed in the future.
  7. Open the Max Window for logging debug info
  8. Start coding
  9. Save the JavaScript file to run your code

各手順の詳細

Detailed Steps

LiveAPI を使って Live を操作していくので、これから作成する Max デバイスは入力信号を活用しません。こういう場合私は MIDI effect を使うことにしています。もちろん audio effect を使ってもかまいません。重要なのは MIDI/audio 入力信号は、そのまま MIDI/audio 出力に渡されるということです。この記事の解説では、MIDI effect のほうを使っていきます。

We're going to interact with Live directly through the LiveAPI, so our Max device will not alter the incoming signal. I usually use a MIDI effect in this situation, but you could use an audio effect. The important thing is the MIDI/audio input is passed directly to the MIDI/audio output. These instructions assume we're using a MIDI effect.

Live のブラウザから、Max for Live セクションの配下にある "Max Midi Effect" というフォルダを見つけてください。この中に "Max Midi Effect" というデバイスがあるので、これを MIDI トラックにドラッグして（管理のしやすさの観点からいって、専用のトラックを作ることをおすすめします。）、配置した後に edit ボタンを押します。すると Max が立ち上がり、しばらくして Max のエディターウィンドウが現れます。まずは Max JavaScript をデバイスに追加しましょう。

Find "Max Midi Effect" under the Max for Live section of the Live browser inside the "Max MIDI Effect" folder. Drag it to a MIDI track (I recommend using a dedicated track to stay organized), then click its edit button. Max will launch, and after a few moments the Max Editor window will appear. First we'll add a Max JavaScript object to the device.

Max エディターウィンドウ内の、何もないところでダブルクリックをすると、Max Object Explorer が現れます。（もしでない場合には、デバイスがアンロックになっているか確認してください。ブラウザ下左側に鍵のボタンがあります。サーチボックス内で JavaScript と入力します。すると "js" というカテゴリーが表示されます。（もしならない場合には、"Show ALL" を選択しましょう。）"js" オブジェクトをデバイスにドラッグして、さらにファイル名を入力します。結果として "js your-filename.js" のようなオブジェクトができているはずです。

Double click in some empty space in the Max Editor window, and the Max Object Explorer will appear (if it doesn't, make sure the device is unlocked by using the lock button in the lower left). Type "javascript" into the search box of the Object Explorer. Under the languages category we see "js" (if not, select "Show All"). Drag "js" into your device and type in a filename, so we have an object that looks like "js your-filename.js".

プロの助言：Max のキーボードショートカットを覚えましょう。アンロック状態のデバイス内で "n" と入力すると、オブジェクトを追加することができます。その状態で "js your-filename.js" と入力しエンターを押すと、js オブジェクトが作成されます。

Pro tip: Learn Max keyboard shortcuts. If you type "n" in an unlocked device, it will add an object. Then you can type "js your-filename.js" and hit enter to create a js object.

次にデバイスをロックします。そのためには画面下左側のロックボタンを押します。その後、js オブジェクトをダブルクリックして JavaScript エディターを開きます。

Lock the device with the lock button in the lower left. Double-click the js object to open the JavaScript editor.

コーディングを始める準備ができましたが、まずはファイルに名前をつけて保存することにしましょう。こうすることで他のファイルをコーディングした後に、このファイルへ戻ってくることが簡単になります。いつも通り Menu から File => Save をするか、もしくは command + S で保存しましょう。（Windows の場合には ctrl + S です。）

At this point we could start coding, but let's take the time to choose a name for our files and save them. This way we can easily come back later for another coding session. Use the usual File → Save menu, or hit command+S (ctrl+S on Windows).

JavaScript の save ダイアログが表示されたら、Max オブジェクトに入力したものと同じファイル名で保存をしましょう。この Max オブジェクトに入力したファイル名と、この JavaScript ファイルの名前は同じである必要があります。保存する場所は Live library の "Max MIDI effect" フォルダの中にするのがいいでしょう。もちろん、この下に JavaScript プロジェクトのためのサブフォルダを作ってもいいでしょう。

The JavaScript save dialog prefills the your-filename.js that you typed into the Max object. The filenames need to match, so go ahead and save it with that name. The save location will probably be the "Max MIDI effect" folder of your Live library. This is fine, but you may want to create a subfolder for your JavaScript projects.

JavaScript ファイルを保存したら、JavaScript エディターを閉じます。そして Max デバイスも保存します。Max デバイスファイル (.amxd) は JavaScript ファイルを保存した場所と、同じところに保存しないといけません。その際、Max デバイスと JavaScript ファイルのどちらも同じ名前にすることをおすすめします。どのデバイスと JavaScript ファイルがセットなのかわかりやすいからです。

Once you've saved the JavaScript, close the JavaScript editor and save the Max device. The Max device (.amxd) file needs to be saved to the same folder as the JavaScript. I suggest you use the same filename for both files, so you know which devices and scripts go together.

ここで Max デバイスエディターを閉じて、再度これを開きます。これは Max のバグに対処するために必要です。（そうしないと Max は先ほど作った JavaScript ファイルを認識できません。）Max エディターを再度開いたら、デバイスをロックしてから js オブジェクトをダブルクリックして JavaScript エディターをもう一度開きます。

Now we need to close the Max device editor and reopen it to workaround a bug in Max (otherwise Max can't locate the JavaScript file we just created). Once the Max Editor is open again, lock the device and double click the js object to open the JavaScript editor again too.

最後に Max ウィンドウを開きます。メニューの Window => Max Window にあります。debug 用情報を print すると、この画面に表示されます。

Finally, open the Max window via the Window → Max Window menu. When we print out debugging info, it will appear here.

うまくいっているかテストする

Testing it Out

Max の JavaScript エディターで保存するたびに、実行されます。さしあたってテスト用に次のプログラムを実行してみましょう。

Every time you save the code in Max's JavaScript editor, it will run. As a quick test, try this simple program

初めての JS in Max
post("Hello World!");

次のように Hello world と表示されれば成功です。

You should see Hello World! in the Max window, like in this screenshot:

次のステップ

Next Steps

さあ、JavaScript プログラムを Ableton Live の中で書く準備ができましたね！次の記事では、コードをでバグするにあたって便利なコードの書き方を説明していきます。

Alright! Now you're ready to write JavaScript programs inside Ableton Live. In the next article, we'll learn how to set some useful utility code to help us debug our scripts.