SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

japan.internet.com翻訳記事

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

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

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

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ガジェットは、格納状態ではこんな風になり、

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
ギターチューナーの外観を作る(その1)

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
japan.internet.com翻訳記事連載記事一覧

もっと読む

この記事の著者

japan.internet.com(ジャパンインターネットコム)

japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.comEarthWeb.com からの最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

kirants(kirants)

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/1786 2007/11/07 14:10

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング