Step. 3

Songle Syncアプリを作ろう

Songle Sync APIを使えば、音楽と連動するアプリを簡単に作ることができます。このページを読み終えると、Songle Syncを使ったWebブラウザベースのアプリケーションを開発できるようになります。

プログラマ向けチュートリアル

このページはJavaScriptが書けるプログラマ向けに書かれています。プログラミング不要でSongle Syncを体験してみたい方はStep 1Step 2を見てみるか、Twitterでアプリを検索してみましょう。

Webブラウザ(パソコン・携帯端末)以外のIoT機器を使ったアプリケーション開発の方法や、開発したアプリケーションの効果的な宣伝・公開方法については次のStep. 4をご覧ください。

Songle Syncアプリとは

ウェブ上の音楽➡音楽理解技術➡大規模音楽連動制御プラットフォームSongle Sync➡大規模音楽連動制御技術➡音楽が多様な機器の演出を駆動

チュートリアルStep 1Step 2で見てきたように、Songle Syncはウェブ上の音楽と連動する演出を楽しめるプラットフォームです。 Songle SyncはJavaScript用のAPIを公開しており、誰でも音楽と連動する演出を作ることができます。

このチュートリアルでは、Songle SyncのAPIを使ったWebアプリや機器用のプログラムを「Songle Syncアプリ」と呼んでいます。

Songle Syncアプリを作る手順

Songle Syncアプリは、次の3つのステップで簡単に作ることができます。

Songle API Webページ
アプリの情報を登録
APIでコーディング
Songle Syncアプリを作る手順:1/3

ユーザ登録

Songle APIのユーザ登録ページ利用規約をよく読み、同意できる場合「新規登録」ボタンからユーザ登録を行います。

必ず連絡の取れるメールアドレスを記入してください。

Songle Syncアプリを作る手順:2/3

トークン取得

Songle APIのWebページにログインした状態でユーザ情報ページへ行き、「アプリケーションの作成」ボタンをクリックします。

入力し終えたら「アクセストークン」と「シークレットトークン」が発行されます。ここで発行されたトークンは次で使うのでメモ(クリップボードにコピー)しておいてください。

入力できる項目は次のとおりです。

アプリケーションの名前この項目のみ入力必須です。
アプリケーションの説明アプリケーションの名前とともに、アプリごとに発行されるQRコードでアクセスできるアプリページに表示されます。
許可するIPアドレスアプリを実行する機器を制限したい場合に設定します。空欄で構いません。
許可するリファラーアプリを実行するWebページを制限したい場合に設定します。空欄で構いません。
アプリケーションのURLWebアプリの場合はそのURLを指定します。 IoT機器の場合はそのアプリの説明が記載されているWebページのURLを指定します。 アプリページのQRコードとリンクのジャンプ先となります。
トークンの共有範囲に注意

アクセストークンはアプリを利用する人が知る可能性のあるトークンですが、シークレットトークンは大抵の場合、アプリ開発者だけが知るトークンとなります。 このトークンが知られると、アプリを駆動する音楽を勝手に変えたり、再生・停止ができたりするため、とくに実世界で稼働する機器向けのアプリでは注意が必要です。不用意に他の人と共有しないように気をつけてください。

Songle Syncアプリを作る手順:3/3

プログラミング

「マスター」のプログラミング

トークンを発行できたら、いよいよJavaScriptを使ったプログラミングです。まずは、先ほど発行したトークンを下のコードエディタ内、コメントが書いてあるところに貼り付けて実行 ボタンをクリックしてみてください。

  • うまく動いたらHTMLファイルを保存 しましょう。
  • 公開 ボタンでGistを作成して、他の人に使ってもらうこともできます。(トークンが一般公開されます

このコードを実行したら音楽が流れましたか?まだ一台のパソコンが音楽に連動して動いただけですが、これでSongle Syncの機能の一端を試せたことになります。

Songle Syncは、Webページにapi.js を埋め込むだけで利用できます。

Songle Syncアプリを実行するブラウザや機器は、役割に応じて「マスター」と「スレーブ」と呼ばれます。

マスター音楽を再生したり停止したり、音楽のURLを設定したり、再生位置を変えたりできます。マスターとして動作するためにはシークレットトークンが必要です。
スレーブマスターに追従して連動します。アクセストークンさえあれば動作します。

上の例では、音楽のURL(//youtube.com/watch?v=xOKplMgHxxA)を設定し、player.play()で音楽の再生を開始しています。これは「シークレットトークン」を持つマスターにしかできないことです。

マスターは読み書き両用、スレーブは読み取り専用

マスターとスレーブは、それぞれSongle Syncサーバに対して読み書き権限を持っているものと、読み取り権限だけを持っているものというふうに区別すると理解しやすいかもしれません。

「スレーブ」のプログラミング

次に、マスターに追従して動作するスレーブをプログラミングしてみましょう。改めて、先ほど発行した「アクセストークン」を下のコードエディタ内、コメントが書いてあるところに貼り付けて実行 ボタンをクリックしてみてください。

  • うまく動いたらHTMLファイルを保存

    し、誰からでもアクセスできるところに置いてみてください。友達と一緒にスマートフォンなどでHTMLファイルにアクセスしてみて、全員の機器が同期して動作することを確認してみましょう。

  • GitHubアカウントを持っていれば公開 ボタンでGistを作成して、他の人に使ってもらうこともできます。

上のほうのマスターのアプリに追従して、再生位置の表示がリアルタイムに更新されていますか?もしマスターアプリの音楽再生がすでに止まっている場合は、マスター側を実行し直してみてください。

一台のために書けば何台でも動く

マスターとスレーブのプログラムは、どちらも複雑なことを何も考えずに書けたことと思います。

このように、今書いているマスターだけ、あるいはスレーブだけを一台制御することに集中すれば、あとはマスターとスレーブ間の同期制御を裏側で自動的に処理してくれるのがSongle Syncの大きな魅力です。

このページのまとめ / 次のステップに向けて

Songle Syncを楽しもう!

マスタースレーブのプログラミングはうまくいきましたか?おめでとうございます!これでSongle Syncの基本的な機能を試せたことになります。

以下のページにいろいろ参考になる資料が掲載されています。ぜひSongle Syncを活用して魅力的なアプリケーションを開発してみてください。

アプリを公開するときの注意点などを次のStep 4で説明しています。ぜひご一読ください。

Gistを作成中