Node.jsベースのサーバを作ろう | Songle Sync 使い方チュートリアル

Playground

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

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

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

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

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

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

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

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

var Songle = require('songle-api'): Songle Syncの機能を利用できるようになります。
var player = new Songle.Player(options): プレイヤーを生成します。引数の内容はサンプルコードを見てみてください。
player.addPlugin(new Songle.Plugin.SongleSync()): Songle Syncの機能を有効化します。マスターとスレーブが正しく同期するためには、両方でこのプラグインが追加されている必要があります。
player.addPlugin(new Songle.Plugin.Beat()): ビート検出の機能を有効化します。他にもコード進行、サビ区間の検出機能を有効にするためのChord, Chorusというプラグインがあります。
player.useMedia(new Songle.Media.Headless(url)): 指定したURLの音楽をプレイヤーにセットします。

player.play(): 音楽の再生を始めます。
player.pause(): 音楽の再生を一時停止します。
player.seekTo(position): 音楽の再生位置を指定したところへ移動します。
player.position: 音楽の再生位置を取得します。
player.duration: 音楽の長さを取得します。
player.on('event', listener): 特定のイベントが発火したときの処理を指定します。利用できるイベントの種類は、これまでに有効化したプラグインの種類によって異なります。

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

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

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

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

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

Step. 1 Step. 2 Step. 3 Step. 4 Node.js IoT機器

GitHubリポジトリを作成中

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

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

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

1 Webサーバを開発する

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

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

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

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

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