国安Tweet今回紹介するサンプルプログラムは、楽天で取り扱う商品から、自分のほしい商品カテゴリを表示して検索ができるようにする、オンラインショッピングに役立つ内容です。画面が表示されると商品のカテゴリ一覧が表示されます(図1)。カテゴリを選択して、画面の上方でマウスの右クリックをすると、検索項目の入力欄が表示されます。検索項目を入力して「Yes」アイコンをタップします(図2)。検索項目に該当する情報がタイルで一覧表示されます(図3)。任意のタイルを選択すると、詳細情報がブラウザ内に表示されます(図4)。ブラウザの画面から、前の画面に戻るには、マウスカーソルを左隅上に移動し、表示される小さな画面をタップします。図1:商品のカテゴリが表示されている。「本、雑誌、コミック」のカテゴリを選択し、画面情報でマウスの右クリックをする(クリックで拡大)図2:検索項目にタッチと入力して「Yes」ボタンをタップした(クリックで拡大)図3:「タッチ」に関するコミックの情報がタイルで一覧表示されている(クリックで拡大)図4:「タッチ」に関するコミックの詳細情報がブラウザで表示されている(クリックで拡大)実際に動かした動画は下記のようになります。スマホで撮影した動画のため、見難い点はご了承願います。サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。2012のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。「名前(N)」に任意のプロジェクト名を指定します。ここでは「RakutenSearch」という名前を付けています。ソリューションエクスプローラー内のRakutenSearchプロジェクトの配下に、カテゴリ名を記録した、リスト1のXML文書ファイル(RakutenGenreId.xml)を取り込んでおきます。今回は楽天のAPIを使用します。詳細については下記のURLを参照してください。楽天商品検索APIApplicationIDが必要になりますので、下記のURLより「会員登録」をして、表示される画面の指示に従って、必要項目を入力し、ApplicationIDの取得を行ってください。developerId)が表示されていますので、これをメモしておいてください。このApplicationIdをプログラム内で使用します。図5:筆者のApplicationIdが表示されている(クリックで拡大)コントロールの配置ツールボックスからデザイン画面上にScrollViewerコントロールを1個配置し、その子要素としてGridViewコントロールを配置します。情報をタイルで表示するプロジェクトに遷移するためにFrameコントロールを1個、戻る(←)ボタンとなるButtonコントロールを1個配置します。マウスの右クリックで表示されるバーのAppBarコントロールを1個配置し、その子要素としてStackPanelコントロールを1個配置します。Marginには5を指定して余白を設け、OrientationプロパティにはHorizontalを指定して、オブジェクトのスタック方向を水平方向とします。StackPanelコントロールの子要素として、TextBlockコントロールを1個配置し、Textプロパティに「検索項目」と指定します。次に、コントロールを1個配置します。次に「Yes」ボタンとなるButtonコントロールを1個配置します。書き出されるXAMLコードをリスト2のように編集します。レイアウトは図6のようになります。書き出されたXAMLコード(MainPage.xaml)(1)プロパティ要素内に、Key名がGridViewTemplateという要素を配置しています。子要素として要素を配置し、枠線の幅に3、CornerRadiusに12を指定して四隅を丸め、背景色にGold、枠線の色にCrimsonを指定します。子要素として要素を配置します。Textプロパティにtitleをバインドし、文字色にNavyを指定します。ここでTextプロパティにバインドする名称は、VBコードのクラス内で定義するプロパティ名です。(2)要素の子要素として、名前がGridView1という要素を配置します。ItemTemplateプロパティにStaticResourceで(1)で定義したGridViewTemplateを参照させて、指定します。(3)情報がタイルで表示されるプロジェクトに遷移する、名前がmyFrameという要素を配置します。(4)名前がbackButtonという要素を配置します。StyleプロパティにStaticResourceでBackButtonStyleを参照します。このBackButtonStyleは、Commonフォルダー内のStandardStyles.xaml内に定義されています。大部分がコメントアウトされて使用できないようになっていますので、VS2012のメニューの「編集(E)/検索と置換(F)」と選択して、「Back」という名前で検索して、BackButtonStyleが定義されているStyleを見つけてください。コメントアウトされている場合はコメントを外します。←アイコンが表示されます。(5)名前がAppBar1という要素を配置します。このバーはマウスの右クリックで、表示、非表示を切り替えられます。(6)要素の子要素として要素を配置します、OrientationプロパティにHorizontalを指定して、オブジェクトのスタック方向を水平とします。(7)さらに、要素の子要素として、Textプロパティに「検索項目」と指定した要素を配置します。次に、名前がsearchTextBoxという名前の要素を配置し、検索項目の入力欄とします。最初の状態ではReadOnlyにTrueを指定して編集不可としています。最後に、名前がokButtonという要素を配置します。最初の状態では、IsEnabledにFalseを指定して、使用不可としておきます。StyleプロパティにStaticResourceでYesAppBarButtonStyleを参照します。このYesAppBarButtonStyleは、Commonフォルダー内のStandardStyles.xaml内に定義されています。大部分がコメントアウトされて使用できないようになっていますので、VS2012のメニューの「編集(E)/検索と置換(F)」と選択して、「Yes」という名前で検索して、YesAppBarButtonStyleが定義されているStyleを見つけてください。コメントアウトされている場合はコメントを外します。「Yes」アイコンが表示されます。プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。