CodeZine(コードジン)

特集ページ一覧

Silverlightで作るVistaガジェット「ギターチューナー」

Silverlightでギターの音色を奏でる

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/11/07 14:00

Silverlightを使ってギターチューナーを作ります。XAMLとJavaScriptによって作成しますが、デザインも含め特別なツールを使わずに、すべてテキストエディタだけを使って完成させます。最後に、できあがったSilverlightアプリケーションをVistaガジェットに変換します。

目次

はじめに

 そのとき、神は「光(Silverlight)あれ。」と言われた。すると光(Silverlight)があった。――さて、この「Silverlight」とは何なのでしょうか。Silverlightは、一言で言えば、Web向け次世代双方向コンテンツを作るためのMicrosoft流ソリューションです。XAMLとJavaScriptを使い、メディアを多用して双方向性を生かしたキラーアプリケーションを作ることができます。現在は、WPFのサブセットです。Silverlightの長所は、この開発フレームワークがクロスブラウザだという点です。プラグインをインストールするだけで、どこででも開発することができます。Macromedia(現Adobe Systems)のFlashに似ていますが、Silverlightの場合、アプリケーションを動かす実体(XAML)は完全なテキストですから、対検索エンジンでは有利です。

 Silverlight(バージョン1.0)は、以前は「WPF/e」と呼ばれていました。現在はMicrosoftのWebサイトからダウンロードすることができます。なお、Microsoftは既にバージョン1.1のベータ版を開発者向けにリリースしています。

 この記事の趣旨に従い、ここではバージョン1.0 RCを使います。

概要

 この記事では、Silverlightを使って気の利いた小さなガジェットを作ります。その制作を通して、Silverlightでよく使われるパーツやテクニックを実際に体験していただこうというのがこの記事の目的です。したがって、ここではSilverlightを深く掘り下げたり、サイドバーガジェットを詳細に説明したりすることはしません。それでは、準備として何を揃えておく必要があるのでしょうか。嬉しいことに必要なものはわずかで、次の3つだけです。

 実際、ガジェットが関係してくるのは最後の段階だけで、そのわずかな作業を除けばVistaさえ不要です。作業のほとんどはファイルを編集することとブラウザの再読み込みだけですから、XPがあれば十分なのです。

ギターチューナー

 私はギターが大好きです。そこで、ギターチューナーを作ることにしました。この記事を読む人の中にギターファンが大勢いるとは思えませんが、ギターチューナーはとても簡単でVistaガジェットにはうってつけです。

 ギターチューナーをご存じない方のために、ここで簡単に説明しておきましょう。ご存じの方は、ここを飛ばして次の節に進んでください。さて、ギターは弦楽器です。通常、6本の弦があり、それぞれ演奏しやすいように特定の音程に調整されます。ですから、それぞれの弦を弾くとその弦に固有の音が鳴ります。6本の弦は、普通、標準の音程に調整されますが、この作業を「調弦」(調律、チューニング)と呼んでいます。調弦は基本的に弦の発する音の相互関係であり、標準やDrop Dなどいくつかの種類があります。演奏者は演奏に先だってまずギターを調弦し、自分が演奏する際の舞台を整えます。調弦されていない弦からは雑音しか聞こえてきませんが、調弦された弦から紡ぎ出された音符は楽しげに響きます。ギターチューナーはこの調弦に使う道具です。6本の弦のそれぞれが鳴らすべき音を出し、演奏者は弦を弾きながらその音に合わせて弦を調整します。すべての弦がチューナーの音に合っていることを「ギターは調弦されている」と言います。今では、ほとんどの演奏者はノートパソコンを使ってポピュラーソングをオンラインで調べ、好みの歌を聴き、自分の曲を録音していますから、パソコン上にギターチューナーがあれば便利です。というわけで、このガジェットを作ろうと思いついたのです。

完成図

 下の図のようなガジェットを作るのが目標です。

 どうです、ギターに見えませんか? ギターのように6本の弦があり、中央にはサウンドホールがあります(これがあるとギターっぽく見えますね)。必要な作業は次のとおりです。

  • ギターのボディーと弦を描きます。これには、XAMLのShape要素や描画機能などを使います。
  • 弦がクリックされたらと、その弦に対応する音を鳴らします。また、鳴っている弦がわかるように要素を点滅させます。これには、XAMLのイベント処理、アニメーション、メディア(サウンド)などを使います。
  • クリックされた弦の音は継続して鳴らす必要があります。ギターのヘッドにあるペグ(糸巻き)を回してチューナーの音と一致させるには時間がかかるからです。これには、メディア要素とそのプロパティを使います。
  • 赤いボタンがクリックされたら鳴り止むようにします(調弦が終わったら普通は音を止めたいはずなので)。

 以降では、実際にXAMLのいろいろな機能と若干のJavaScriptを使い、それらを組み合わせてギターチューナーを作っていきます。

 完成したVistaガジェットは、格納状態ではこんな風になり、

 サイドバーから出すとこんな風になるはずです。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:japan.internet.com翻訳記事

もっと読む

著者プロフィール

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5