Playground

Node.jsでSongle Sync マスターサーバを作ろう

Step 1-4で満足できなかった方のために、このページではもう少し踏み込んで実践的にSongle Syncアプリの作り方を紹介します。とくに、このページではNode.jsを使ってSongle Syncのマスターとして動作するサーバを作る方法を紹介します。

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

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

Node.js + Express.js + pugを使ったプログラミング

1 Webサーバを開発する

  • 手始めに、Node.jsを使ったWebサーバを開発してみましょう。画面左側で実装を書き換えたら、 実行 ボタンをクリックしてサーバを再読み込みできます。
  • 画面右側に表示されているのは、Node.jsサーバに接続して内容を表示できるブラウザです。アドレスバーに /json/index.js などリクエストハンドラを実装したパスを入力することで、Node.jsサーバの機能が正しく実行されることを確認できます。
  • このチュートリアルでは、Node.jsを使ったWebサーバ開発でよく用いられているExpress.jsPugというライブラリを使います。それぞれ、サーバを簡潔に書ける機能と、HTMLを簡略記法で書ける機能があります。詳細は各ライブラリのWebサイトなどを読んでみてください。

Node.js, Express.js, Pugは以下の基本的な機能だけが実装されています。変数名は例なので好きなものに変えられます。さらに凝ったWebサーバを開発したくなったら保存ボタンからプロジェクトを保存するか、ページの下へスクロールしてGitHubリポジトリにコードを保存し、リポジトリをクローンして手元の環境で開発してください。

var express = require('express')
Express.jsの機能を使ってWebサーバを開始できるようになります。
var app = express();
Express.jsのサーバインスタンスを作成します。
app.set('view engine', 'pug')
Pug.jsの機能を使って簡単にHTMLを出力できるようになります。
app.listen(port)
指定ポートでHTTPリクエストを待ち受けます。このページでは port の値によらずエディタ脇のフレームと接続され、フレーム内でページを閲覧できます。
app.get('path', getRequestHandler)
pathへのリクエストをgetRequestHandlerで処理します。リクエストハンドラの引数は、一つ目がリクエスト、二つ目がレスポンス、三つめが次のリクエストハンドラです。
app.use(requestHandler)
requestHandlerでリクエストを処理します。
res.render('path', options)
views/path.pugの内容を使ってレスポンスを返します。optionsで指定したプロパティはPugファイルから参照できます。
res.json(json)
Use JSON.stringify(json) to render the response.

2 Webサーバをデプロイする

Node.jsサーバが正しく動くことを確認出来たら、PaaSプラットフォームを使ってWebサービスを一般公開してみましょう。通常なら手元のパソコンに git クライアントなどをインストールして様々な環境設定をしてからサービス公開する必要がありますが、このチュートリアルでは、以下のボタンをクリックするだけで同等のことができるようになっています。

このチュートリアルでは、いったんGitHubにコードを保存してから、Herokuにコードをデプロイするという流れになります。両方のユーザ登録が必要となるので、事前に取得しておいてください。

Node.jsサーバからSongle Syncを操作する

1 Node.jsサーバにSongle Sync「マスター」の機能を付与する

  • 基本的には上で試した例と同じです。画面左側で実装を書き換えたら、 実行 ボタンをクリックしてサーバを再読み込みできます。
  • 画面右側に表示されているのは、Node.jsサーバに接続して内容を表示できるブラウザです。アドレスバーに /json/index.js などリクエストハンドラを実装したパスを入力することで、Node.jsサーバの機能が正しく実行されることを確認できます。

さらに凝ったサーバを開発したくなったら保存ボタンからプロジェクトを保存するか、下のボタンでGitHubリポジトリにコードを保存し、リポジトリをクローンして手元の環境で開発してください。

var SW = require('songle-widget')
Songle Syncの機能を利用できるようになります。
var player = new SW.Player(options)
プレイヤーを生成します。引数の内容はサンプルコードを見てみてください。
player.addPlugin(new SW.Plugin.SongleSync())
Songle Syncの機能を有効化します。マスターとスレーブが正しく同期するためには、両方でこのプラグインが追加されている必要があります。
player.addPlugin(new SW.Plugin.Beat())
ビート検出の機能を有効化します。他にもコード進行、サビ区間の検出機能を有効にするためのChord, Chorusというプラグインがあります。
player.useMedia(new SW.Media.Headless(url))
指定したURLの音楽をプレイヤーにセットします。
player.play()
音楽の再生を始めます。
player.pause()
音楽の再生を一時停止します。
player.seekTo(position)
音楽の再生位置を指定したところへ移動します。
player.position
音楽の再生位置を取得します。
player.duration
音楽の長さを取得します。
player.on('event', listener)
特定のイベントが発火したときの処理を指定します。利用できるイベントの種類は、これまでに有効化したプラグインの種類によって異なります。

2 Webサーバをデプロイする

サーバが正しく動くことを確認出来たら、PaaSプラットフォームを使ってWebサービスを一般公開してみましょう。通常なら手元のパソコンに git クライアントなどをインストールして様々な環境設定をしてからサービス公開する必要がありますが、このチュートリアルでは、以下のボタンをクリックするだけで同等のことができるようになっています。

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

Songle SyncでいろいろなWebアプリを作ろう!

無事にSongle Syncの機能を活用したWebサーバを作ることができましたか?

これを応用すれば、例えば、みんなで曲を追加していけるインターネットラジオ局のようなものも作れるかもしれませんね。ぜひ、いろいろなアプリを作ってみてください。

GitHubリポジトリを作成中
作成したGitHubリポジトリをHerokuにデプロイ中