Windows Phoneでスクレイピングして秀和システムの新刊情報アプリを作ろう(1)

By | 2013/11/19
Pocket

Expression BlendでのサンプルデータとListBoxコントロールでのカスタムスタイルの編集と、HTMLページのスクレイピングを行うサンプルアプリケーションの作成を通して学習しましょう。

スクレイピングとは、スマートフォンアプリケーションではよくある技術で、ウェブサイトのデータ(HTMLページ)から必要な情報を抽出して、アプリケーション上のデータソースとして使用します。ここでは、スクレイピングの対象として、秀和システム社の新刊情報を利用してみましょう。

## 秀和システムの新刊情報ページ

秀和システムのウェブサイトには、新刊情報が掲載されているページがあります。このページをスクレイピングしてみましょう。

* [http://www.shuwasystem.co.jp/newbook.html](http://www.shuwasystem.co.jp/newbook.html)

## 秀和新刊アプリケーションのプロジェクトの作成

Visual Studioを起動してプロジェクトを作成します。新しいプロジェクトダイアログで、Windows Phone アプリケーションを選択します。名前は「ShuwaShinkan」と付けます。

新刊情報を表示するためのリストと情報を取得するためのボタンを作成します。UIデザインを編集したいので、ソリューションエクスプローラーで、MainPage.xaml を選択した状態で、右クリックしメニューから[Expression Blendを開く]を選択します。

アプリケーション名とページ名を入力しておきましょう。もし名前がアルファベットの場合は、アプリケーション名部分はすべて大文字、ページ名部分はすべて小文字で小文字にするとWindows Phoneアプリケーションとして統一感が出ます。

ページ名を表示しているフォントが綺麗な漢字ではありませんが、後述する方法にて日本語にマッチしたフォントに変更する事が可能です。新刊情報の取得に、アプリケーションバーを使いたいので、あらかじめコメントアウトされている部分を外します。

デザインプレビューの右側にタブがあり、XAMLタブに切り替えます。XAMLウィンドウでは緑色に表示されている``から``までのコメントアウト部分を外します。

コメントアウトを外すと、以下の様なXAMLが表示されます。

デフォルトでApplicationBarIconButton(アプリケーションバーに表示されているボタン)が2つと、ApplicationBarMenuItem(文字だけのメニューアイテム)が1つ用意されています。

    <!--ApplicationBar の使用法を示すサンプル コード-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
            <shell:ApplicationBar.MenuItems>
                <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
                <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
            </shell:ApplicationBar.MenuItems>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

右側のデザインタブをクリックして、デザイン画面に戻ります。

更新ボタンは1つで構わないのでApplicationBarIconButtonを1つ残して、他は削除してしまいましょう。

Controlキーを押しながら`ApplicationBarMenuItem`と`ApplicationBarIconButton`を選択します。選択した状態でDeleteキーを押せば、コントロールが削除されます。

現状だと何も表示されない円のままですので、1つ残した`ApplicationBarIconButton`にアイコンとテキスト入力してみましょう。プロパティウィンドウにて設定を変更することができます。

名前をbtnIconRefreshに変更して、IconUriを選択します。Expression Blendの場合は、Windows Phone SDKに付属するアイコンであれば、アイコンを見ながら選択することが出来ます。

イベントタブをクリックして、イベントに切り替えます。Clickの部分が空欄になっていますので、ダブルクリックしてイベントハンドラを追加します。

ダブルクリックするとソースコードが表示されます。とりあえずここでは何もソースコードには実装しません。

ここでは、Expression Blend上でソースコードを弄らないのでMainPage.xaml.csタブを閉じます。そして、再度MainPage.xamlタブを開いて下さい。新刊情報を表示するリスト以外のUIが整いました。