node-Karaoke-Slideというのを作って結婚式の余興で使ってみた
なにそれ
結婚式でみんなで乾杯を生演奏で歌いたくなる状況ってよくあると思うのですが、その時に写真をスライドショーにして、そこに歌詞を表示出来たら素敵だなぁと思って作って使ってみた話です。
ムービーを作って流せばよさそうですが、生演奏なのでタイミングをあわせる必要があるのでうまくいきません。
なのでスライドショーを作ってパソコンを操作すればいいのですが一緒に歌いたい!
Keynoteなど使えばスマートフォンからリモートで操作できるのですが、以前node.jsとsocket.ioを使って同じようにリモートで操作出来るスライドを人のを真似して作ったことがあったので、今回はそれをベースに勉強がてらイチから書いてみました。
(たいしたコードではないですが...)
構成
node.js、socket.io、expressを使っています。(node.jsはnodebrewで入れました)
(しばらく使っていなかったのでexpressのインターフェイスが変わっててオッと思いましたが。。)
使い方
スマートフォンかPCで操作することを想定しているので←→かスワイプでページ送り出来ます。
作り方
歌詞は、lyricsに入れて、画像はファイル名を指定してもいいし、配列のindexをファイル名として置いても大丈夫です。
(0.JPG, 1.JPG....)
あと微妙に上下に歌詞をだし分けることもできます。
var sentences = [ { lyric: ['曲名 ', 'アーティスト'], class: "upper" }, { lyric: ['これは上に', '表示されます'], class: "upper" }, { lyric: ['これは下に', '表示されます'], class: "bottom" }, ],
とりあえず今は必要だった機能しかいれてないので、出来ることは少ないのですが。。。
CSSの調整とページ送りの工夫はしたいなぁとは思ってます。
使い方2
これでパソコンでnode app.jsしてサーバー立ち上げて、スマートフォンでそこにアクセスすれば離れた位置からスワイプで操作出来るのでみんなで一緒に歌えます!
あと、node.js使えないという状況のために、index.htmlを開くだけでも動くようにしてあります。その場合は当然リモート操作は出来ないですが。
(jQueryが入っているのはインターネットにつながらない時にも動かせるようにです)
https://github.com/koba04/node-Karaoke-Slide
友だちのためにウェブの技術を使えてよかった!
Nodeビギナーズブックがいいという話
http://www.nodebeginner.org/index-jp.html
ちょっと前に話題になっていたので紹介するまでもないのですが、実際にやってみてわかりやすかったので紹介したいと思います。
丁寧に説明されているので最近のJSはよくわからんと思っている人でも、順番に理解しながら進められると思います。
いいと思ったところ
- 流れが丁寧
- Hello Worldから一歩ずつゆっくりとコードとそれに対する説明が丁寧に入るので置いていかれることはないと思います。
- また、あえて回り道をすることでどうしてこの実装がいいのかという説明がされていたりと構成がとてもわかりやすいです。
- WAFについての理解も深まる
- 単純なウェブアプリケーションを用いた例ではあるものの、特にnode.jsにおいてのウェブアプリケーションの構成についての理解が深まると思います。実際に何か作るときはexpressなどのWAFを使うと思うのですが、Server、Router、RequestHandlerといった構成要素について説明されているので、WAFを使うときも理解が進みやすいんじゃないかと思います。
- イベント駆動コールバック
- Node.jsの特徴であるシングルスレッドでイベントループを走らせていることによる注意点(ブロッキングしないよう)についても説明されていて、他の言語でウェブアプリケーションを作っている人も理解しやすいんじゃないかと思います。
- モジュールの使い方
- urlモジュールなどはもちろん、外部モジュールであるformidableの使いかたも紹介されていて、外部モジュールを使えば簡単にウェブアプリケーションを作れそうな気にさせてくれるのもいいなと思いました。
と、なんかただ誉めているだけで特に内容のないエントリになっていますが、node.jsに興味を持っていてまだ手を付けていない人は一度やってみるといいんじゃないかと思って紹介してみました。
そして、何気に文章が読みやすいのもいいですね。
※POST文字列を表示するところでそのままだと日本語が文字化けすると思うので、その場合は下記のように文字コード指定すると文字化けしないと思います。
response.writeHead(200, {"Content-Type": "text/plain; charset=UTF-8"}); response.write("You've sent: " + postData);