チュートリアルプログラマ向けチュートリアル
このページはJavaScriptが書けるプログラマ向けに書かれています。プログラミング不要でSongle Syncを体験してみたい方はStep 1やStep 2を見てみるか、Twitterでアプリを検索してみましょう。
Step. 3
Songle Syncアプリを作ろう
Songle Sync APIを使えば、音楽と連動するアプリを簡単に作ることができます。このページを読み終えると、Songle Syncを使ったWebブラウザベースのアプリケーションを開発できるようになります。
Songle Syncアプリとは
チュートリアルStep 1とStep 2で見てきたように、Songle Syncはウェブ上の音楽と連動する演出を楽しめるプラットフォームです。 Songle SyncはJavaScript用のAPIを公開しており、誰でも音楽と連動する演出を作ることができます。
このチュートリアルでは、Songle SyncのAPIを使ったWebアプリや機器用のプログラムを「Songle Syncアプリ」と呼んでいます。
Songle Syncアプリを作る手順
Songle Syncアプリは、次の3つのステップで簡単に作ることができます。
Songle Syncアプリを作る手順:1/3
Songle Syncアプリを作る手順:2/3
トークン取得
Songle APIのWebページにログインした状態でユーザ情報ページへ行き、「アプリケーションの作成」ボタンをクリックします。
入力し終えたら「アクセストークン」と「シークレットトークン」が発行されます。ここで発行されたトークンは次で使うのでメモ（クリップボードにコピー）しておいてください。
入力できる項目は次のとおりです。
| アプリケーションの名前 | この項目のみ入力必須です。 |
| アプリケーションの説明 | アプリケーションの名前とともに、アプリごとに発行されるQRコードでアクセスできるアプリページに表示されます。 |
| 許可するIPアドレス | アプリを実行する機器を制限したい場合に設定します。空欄で構いません。 |
| 許可するリファラー | アプリを実行するWebページを制限したい場合に設定します。空欄で構いません。 |
| アプリケーションのURL | Webアプリの場合はそのURLを指定します。 IoT機器の場合はそのアプリの説明が記載されているWebページのURLを指定します。 アプリページのQRコードとリンクのジャンプ先となります。 |
Songle Syncアプリを作る手順:3/3
プログラミング
「マスター」のプログラミング
トークンを発行できたら、いよいよJavaScriptを使ったプログラミングです。まずは、先ほど発行したトークンを下のコードエディタ内、コメントが書いてあるところに貼り付けて実行 ボタンをクリックしてみてください。
このコードを実行したら音楽が流れましたか？まだ一台のパソコンが音楽に連動して動いただけですが、これでSongle Syncの機能の一端を試せたことになります。
Songle Syncは、Webページにapi.js を埋め込むだけで利用できます。
Songle Syncアプリを実行するブラウザや機器は、役割に応じて「マスター」と「スレーブ」と呼ばれます。
| マスター | 音楽を再生したり停止したり、音楽のURLを設定したり、再生位置を変えたりできます。マスターとして動作するためにはシークレットトークンが必要です。 |
| スレーブ | マスターに追従して連動します。アクセストークンさえあれば動作します。 |
上の例では、音楽のURL（//youtube.com/watch?v=xOKplMgHxxA）を設定し、player.play()で音楽の再生を開始しています。これは「シークレットトークン」を持つマスターにしかできないことです。
「スレーブ」のプログラミング
次に、マスターに追従して動作するスレーブをプログラミングしてみましょう。改めて、先ほど発行した「アクセストークン」を下のコードエディタ内、コメントが書いてあるところに貼り付けて実行 ボタンをクリックしてみてください。
上のほうのマスターのアプリに追従して、再生位置の表示がリアルタイムに更新されていますか？もしマスターアプリの音楽再生がすでに止まっている場合は、マスター側を実行し直してみてください。
このページのまとめ / 次のステップに向けて
Songle Syncを楽しもう！
マスターとスレーブのプログラミングはうまくいきましたか？おめでとうございます！これでSongle Syncの基本的な機能を試せたことになります。
以下のページにいろいろ参考になる資料が掲載されています。ぜひSongle Syncを活用して魅力的なアプリケーションを開発してみてください。
- Songle APIドキュメント ... Songle Syncで使える関数の一覧と簡単な説明が読めます。
- Songle サンプルプログラム ... Songle Syncを使って書かれたプログラムのソースコードを閲覧できます。
アプリを公開するときの注意点などを次のStep 4で説明しています。ぜひご一読ください。
Gistを作成中
Gistを作成しました
The URL to share is generated thanks to a freeCDN named raw.githack.com that caches the Gist data and returns the content with appropriate Content-Type headers.