始めよう!Silverlight

第3回 メッセージカードアプリを作ってみよう

この記事を読むのに必要な時間:およそ 6.5 分

では,実行してみましょう。画面を立ち上げてボタンをクリックすると以下のようになります。

画像

無事にメッセージカードが表示されましたが,表示位置を指定していないため常に左上に表示されてしまっています。これでは入力域と重なってしまい何とも微妙な状態にです。表示位置をランダムに設定するように修正します。card.jsのcreateCardObject変数の関数を以下のように修正してください。

var createCardObject = function(plugin, suffix){
  var cardObject = 
    plugin.content.createFromXaml(cardXaml.replace(/{id}/g, suffix));
  //追加
  cardObject["Canvas.Left"] =
    Math.random() * (plugin.content.root.width - 200);
  cardObject["Canvas.Top"] = 
    Math.random() * (plugin.content.root.height - 150);
  plugin.content.root.children.add(cardObject);
  return cardObject;
}

XAMLを読み込んでオブジェクトを生成した後に,左からの距離と上からの距離をランダムに設定するコードを追加しています。画面からはみ出してしまわないように,カード自身の高さと幅を差し引いて調整を行っています。

index.htmを読み直して,再度メッセージカードを表示してください。今回は無事にさまざまな場所にカードが表示されています。

画像

タイトルとメッセージを表示する

では,最後の処理として入力されたタイトルとメッセージをカードに表示します。ボタンが押された時にHTMLのテキストボックスに入力されている値を,メッセージカードに設定します。

まずは,sample.cardにタイトルとメッセージのそれぞれを設定できる関数を用意します。[sample.card]の中の最後に以下のコードを追加してください。

this.setTitle = function(title){
  plugin.content.findName("cardtitle" + suffix).text = title;
};
this.setMessage = function(message){
  plugin.content.findName("cardmessage" + suffix).text = message;
};

findName関数によって,それぞれ対応するTextBlockを取得してtextプロパティに渡された値を設定しています。

続いて,HTMLから値を取得して,今作成した関数に値を渡すコードをindex.htm.jsのcreateNewCard関数に追加します。

function createNewCard(){
  var plugin = document.getElementById("agControl");
  var card = new sample.card(plugin);
  //追加
  card.setTitle(document.getElementById("titleTextBox").value);
  card.setMessage(document.getElementById("messageTextBox").value);
}

では,何かテキストボックスに値を入力して,メッセージカードを表示してみましょう。無事にメッセージカードに値が表示されます。

画像

文字の表示ですが,残念ながら現在のSilverlightのバージョンでは標準では日本語に対応していません。そのためHTMLのテキストボックスに日本語を入力しても,表示時には文字化けを起こしてしまいます。日本語を表示するためには対応したフォントをダウンロードしてTextBlockに設定するなどの手順が必要になります。詳しい手順は筆者のブログに過去に取り上げましたので,参照してください。

Silverlight2.0では日本語表示をサポートするとのことなので,こちらもリリースが待ち遠しいものです。

では,これでメッセージカードアプリはいったん完成ですが,何点か問題点もあります。パッと思いつくところをあげるとすると以下のようなものがあります。

  • 重なりが発生する
  • 作成したカードを修正できない
  • カードを保存できない

これらの機能を追加することで,よりよいアプリケーションになると思いますので,ぜひチャレンジしてみてください。サンプルとして重なりが発生しても大丈夫なようにカードをドラッグドロップで移動できるように拡張したものを作成しました。以下よりダウンロードできますので,ぜひ参考にしてください。

このサンプルではドラッグドロップもマウスを離した後に少し滑って止まるように実装しています。また,カードの表示方法もただ無機質に表示されるだけではなく,飛び出したように見えるアニメーションを追加して表示しています。

次回予告

今回はSilverlight1.0での開発を行いました。JavaScriptでの開発の感触を実感していただけたのであれば幸いです。

次回は,以前からの予告どおりにSilverlight1.1での開発を取り上げようと考えています。が,Silverlight2.0Betaのリリースが2008年の第1四半期とアナウンスされています。米国でMIX08というイベントが3/5から開催されるのですが,筆者の予想ではこの前後に何らかの発表があるのではないかと考えています。そのため,次回の掲載の前に発表された場合は,内容を変更してSilverlight2.0を取り上げようと考えています。お楽しみに。

著者プロフィール

丸山和秀(まるやまかずひで)

株式会社アークウェイ システムクリエイター。趣味はドラム。社会人になりたてのころは職業はドラマーだと豪語していたが,いつのまにかシステム開発の楽しさにのめりこみ,仕事内容が職業になっていた。パッケージベンダにて金融向けパッケージソフトの開発を行うSEを経て現職へ。現在は研究開発としてRIAに取り組み中。