ClovaでローカルマシンのMP3を再生させる #asciihack #linebootawards

#asciihackにて質問を受けたので書いています。

ClovaスキルでMP3ファイルを再生してみよう #asciihack #linebootawardsで書いた内容の補足です。

MP3ファイルなどは基本的にサーバーに置いていてそこにアクセスして再生させます。音声ファイルを変更した場合などに毎回サーバーにあげなおすのは大変なのでローカルマシンのMP3にアクセスさせたいケースがあります。

ngrokを使ってローカルPCのMP3にアクセスできるようにします

知ってる人からすると当たり前な話ですがngrokでトンネリングです。

ngrok http 3000

でトンネリングさせます。

https://xxxxxxxxxxx.ngrok.ioなどのURLが生成されてエンドポイントになります。
ただ、それだけではhttps://xxxxxxxxxxx.ngrok.io/myaudio.mp3などの形式でアクセスす流ことはできません。

express.static()を利用

ClovaのNode.js SDKのサンプルではExpressを利用しているのでルーティングがExpressの規則に則る形になります。

Express での静的ファイルの提供などみると分かりますが、express.static()を利用してpublicフォルダなどに静的ファイルを設置して利用できるようにします。

app.jsと同様の階層にpublicフォルダを作成し、その中にmp3ファイルを設置します。

チュートリアルコードの下部でapp.use(express.static(__dirname+'/public'));の宣言を追加します。

app.js

・
・
(省略)
・
・

const app = new express();
const port = process.env.PORT || 3000;

app.use(express.static(__dirname+'/public')); //←追記: publicフォルダにアクセスできるように

const clovaMiddleware = clova.Middleware({applicationId: 'YOUR_EXTENSION_ID'});
app.post('/clova', clovaMiddleware, clovaSkillHandler);

app.listen(port, () => console.log(`Server running on ${port}`));

これでサーバーを再起動するとpublicフォルダ内のファイルにそのままアクセスすることができるようになります。

これでhttps://xxxxxxxxxxx.ngrok.io/myaudio.mp3に直接アクセスできます。フォルダやpng画像やcssなどその他のファイルも同じようにアクセスできます。

• public/myaudio.mp3 -> https://xxxxxxxxxxx.ngrok.io/myaudio.mp3
• public/img/myimage.png -> https://xxxxxxxxxxx.ngrok.io/img/myimage.png

所管

Node.jsなどを利用している人だとルーティングに関しての規則は把握しているけど、他の言語で普段開発をしていてClovaを触ろうとする人はNode.jsサンプルが多いからやりはじめてみるけどこういうところでつまづくのかもなぁと思ったりしました。 Express周りの使い方も紹介していけると良さそうですね。