KySSTweetプログラミングの前に前回は、俳句・川柳アプリ「一日一句」の企画から設計・デザインまでの作業について解説しました。今回は、実装について解説します。長いですが、アプリの中で値を渡して処理している関係上、該当する3つのページのコードを一気に解説しますので、気長にお付き合いください。サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。このアプリはマーケットプレイスで無料公開されています。Silverlightがあります。XNAはリアルタイムゲーム向けで、SilverlightはRIA向けです。本連載では、以前の連載の読者を対象に、実開発からマーケットプレイスへの公開までを解説しています。開発環境の構築と最初のプログラム」を参考に、開発環境を整備してください。Updateが発表されていますので、これもインストールしてください。7.1の環境で開発しましたが、7.1.1でも問題なく動作します。画面キャプチャのメニューは英語ですが、日本語版も手順は同じです。前回記事で述べたとおり、このアプリは4つのページで構成します(図1)。それぞれのページの名前は、図1中の青文字のとおりです。画像ボタンを配置し、季節を選択できるようにします。季節と月の対応は、おおむね、春(3月、4月、5月)、夏(6月、7月、8月)、秋(9月、10月、11月)、冬(12月、1月、2月)ですが、諸説あります。夏に冬の俳句を詠みたい場合や、8月31日23時59分に秋の句を詠むケースも考えられるため、ユーザーが自由に選択できるようにします。「?」ボタンを置き、ヘルプページにリンクします。bing検索)俳句と、ルビやコメントを入力できるようにします。児童の利用を考え、ひらがなのみの字あまり最大19文字まで入力可能とします。入力文字列は簡易縦書きで表示します。必須項目と全角半角を検証し、不備がある場合はメッセージを表示します。フォルダに保存します。このバージョンは国内向けであり、季語が意味を持つことから、俳句データは季節別のファイルに分けます。データ形式は、投稿のための選定や、句集の編集などに利用できるよう、再利用の容易なXMLです。「季語検索」ボタンがタップされた時、選択されている季節の季語を、bingで検索させます。「季節選択」ボタンがタップされた時、メインページに戻って季節を再選択できるようにします。「一覧」ボタンがタップされた時は、現在選択されている季節の値を表示ページに渡して移動します。表示ページ(俳句の簡易縦書き表示)選択されている季節の俳句が1句以上記録されている場合、俳句データを、簡易縦書きで巻物のように画面の右端から表示します(図2)。多数の俳句が記録されている場合でも、左フリックにより最後に保存された最新の句が表示されるため、確認が容易になります。「一句前へ」ボタンで一句ずつ巻き戻し、「一句目へ」ボタンで先頭の句にジャンプ、「一句後へ」ボタンで一句ずつ早送りします。「季節選択」ボタンがタップされた時は、メインページに戻って季節を再選択できるようにします。図2:季節の俳句データを簡易縦書きで巻物のように表示する(クリックで拡大)ヘルプページ(ヘルプ、ファイルの削除)アプリの説明と操作手順を記載します。各季節別の記録済み俳句ファイルを削除できるようにします。誤って削除することのないよう、この削除機能はヘルプの最終ページに置きます。値の渡し方メインページで選択した季節の値は、入力ページに渡して季語検索と保存処理に利用し、さらに表示ページに渡して、表示するために読み込むXML文書の特定に用います。「春」を選択した場合、入力ページでは春の季語を検索し、入力した俳句はspring.xmlに保存します。表示ページに移動した時は、spring.xmlのデータを表示するといった具合です。これらの処理は、図3のように値を受け渡すことで実現しています。新規プロジェクトの作成では、早速開発していきましょう。Application」を選択します。しておきます(図4)。7.1」かを選択します。図4:「DailyHaiku」プロジェクトを作成する(クリックで拡大)プロジェクト名を右クリックして表示されるメニューから「追加/新規フォルダ」を選択してフォルダを追加し、名前を「Image」としておきます。このImageフォルダを右クリックして表示されるメニューから「追加/既存のアイテム」を選択して、画像部品一式を追加しておきます(図5)。※画像ファイルは、ダウンロードできるプロジェクトの中に追加済みです。図5:Imageフォルダを作成し、アプリ内で使う画像を追加しておく(クリックで拡大)メインページのデザイン(MainPage.xaml)まず、背景色を設定しておきます。名前がLayoutRootのGridのBackgroundに“#FFFFFFFA”を指定します。PC用のマルチタッチディスプレイでは淡いベージュに見えるこの色も、実機では一見白にしか見えませんが、白と比べるとまぶしすぎず、落ち着いた感じになります。今回StackPanelは使わないので、その部分のコードはコメントアウトしておきます(図6)。図6:StackPanel部分のコードはコメントアウトしておく(クリックで拡大)次に、ツールボックスからImageコントロールを7個、ドラッグして配置します(図7)。4つのボタン、「ヘルプ」ボタン、開発者のロゴの画像を指定します(図9)。図7:ツールボックスから7個のImageコントロールを配置する(クリックで拡大)図8:Imageコントロールに名前を付ける(クリックで拡大)図9:それぞれのImageコントロールのプロパティを開き、Sourceに画像を指定する(クリックで拡大)全てのコントロールのマージンを調整し、完成したデザイン・コードは、リスト1になります。xaml.vb)レイアウトができたら、ソリューションエクスプローラー中のMainPage.xamlを展開して表示されるMainPage.xaml.vbの中に、処理を記述していきます。季節を代入する変数selectSeasonNameを宣言しておきます。「春」ボタンがタップされた時、変数selectSeasonNameに「spring」という文字列を代入し、inputHaikuプロシジャを実行します。「夏」ボタンがタップされた時は「summer]、「秋」ボタンでは「autumn」、「冬」ボタンでは「winter」をそれぞれ変数selectSeasonNameに代入して、inputHaikuプロシジャを実行します。inputHaikuプロシジャでは、変数selectSeasonNameに代入されている季節名を、入力ページ(createHaiku)に渡します。この値は、季語検索や保存するファイル名として利用するようになります。入力ページおよび表示ページから「homeに戻った」という情報が渡された時には、RemoveBackEntryで履歴を除去します(前回記事も参照)。これにより、メインページを表示する前に表示していた他のページがあった場合、実機の「戻る」ボタンを押しても以前のページには戻らず、アプリケーションは終了します。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。IT会員サービスの概要とメリットをチェック他にもこの記事が読まれています開発ツールイベントGitHub、エンタープライズ向けのイベントを国内で開催。VeloCloudが選ばれる理由SD-WANとはなにか。Linuxエンジニア育成への思いF5とNGINXの組み合わせで、サービス公開をよりセキュアに。ITがお届けするポッドキャストです。