便利でちょっと賢い Web フィンガーボード「iFRET」始めました

作ってみた コンピューティング Webサービス

いやー、昨日からうって変わって過ごしやすくなりましたねぇ。ギターやウクレレなんかを弾くのにちょうど良い気候になってきました... てな訳でw そんな時にちょっと役に立つ Web アプリケーションを作ってみました。「iFRET」といいます。今回はその紹介を。

iFRET とは? (開発動機等)

ギターなんかを弾くようになって30年以上経ちますが、私の場合、楽譜をそのまま弾くというよりは、気に入った曲を耳コピーしたり自分流にアレジンして弾いてみる、という楽しみ方が多いです。そんな時いつも思うのが「ここはこう押さえると思うんだけど、何のコードだろ?」というもどかしさです。指盤上の音やコードの構成音が全部頭に入っていれば直感的に分かるのでしょうが、万年素人の悲しさとでも言いましょーか orz また、最近はブルーズやハワイアン方面にも食指を伸ばしつつあるので、レギュラーチューニングではない調弦で弾くことも多く、そうなるとコードフォームがちんぷんかんぷんになってしまうのも困りモノです。

さて、プログラマとしてこんな状況を要求分析すると

  • 様々な楽器・チューニングに対応していて、構成音を特定ポジションだけじゃなく指盤全体で教えてくれる、万能コードブックが欲しいっ。
  • 判っている音からコードを類推してくれる「コード計算機」みたいなものがあればいーよね。

てなソリューションとなるのではないかと。iFRET はその具現化を企図した Web アプリケーションです(下図)。使い方なんかは About ページをご参照下さい。


開発メモ (使用したミドルウェア等)

上で書かなかった開発動機として「そろそろ HTML5 の目玉機能である Canvas 要素を本格的に試してみたいな」というスケベ心がありました。という訳で、指盤は Canvas 要素によるビットマップとして実装してあります。IE は ver.9 未満だと excanvas.js で動作させるしかなく、極端に遅くなってしまうのが困りものでしたが、そこは全て Micro$oft が悪いのじゃ、とゆーことにしてしまいます。ではいつものように、お世話になったミドルウェアや Web サービス等を明記しておきます。

  • 今回はプログラムの殆んどがフロントエンド側(つまり JavaScript + HTML + CSS)で実装されており、サーバサイドはこれといった役割を担っていませんが、いつものように CakePHP を使用してます。
  • Web ページのレイアウトには、これまたお決まりの Blueprint CSS を。
  • Canvas 要素プログラミング用のライブラリには jCanvaScript を選びました。
  • そしてこれが無いと何もできない体になっちゃった... の jQuery。
  • ページのカラースキームは、colorapi さんのズバリこれからw

今後

当初はコードだけじゃなくてスケール(各種音階)も機能に含めようと思っていたのですが、そこは省略してリリースを優先しました。私自身、スケールで悩むことはコードに比べて圧倒的に少ないですし。また、公開してみて、世間的にニーズがあるようだったら初めて Google AdSense なんかも導入してみようと思ってます。サーバ代くらいは稼ぎたいのでw

それでは弦楽器愛好家の皆様、よろしくおながいしますぅー。