PR

青空文庫を検索して目的の作品を探すプログラムを作る

2013年5月17日(金)
薬師寺 国安

Windows ストア空白のページの作成(WorkShowPage.xaml)

VS2012のメニューの「プロジェクト(P)/新しい項目の追加(W)」と選択して、左に表示される項目からWindows ストアを選択します。
右に表示されるテンプレートから「空白のページ」を選択します。
「名前(N):」にはWorkShowPage.xamlと指定して、[追加(A)]ボタンをクリックします。作品名が表示されるページです。

コントロールの配置

ツールボックスからデザイン画面上にScrollViewerコントロールを1個配置し、その子要素としてGridViewコントロールを1個配置します。
マウスの右クリックで表示されるバーであるAppBarコントロールを配置します。
その子要素としてStackPanelコントロールを配置して、OrientaionプロパティにHorizontalと指定します。
さらにその子要素としてWinRTXAMLToolkitのコントロールである、WatermarkTextBoxコントロールを1個と「Yes」ボタンとなるButtonコントロールを1個配置します。WinRTXAMLToolkitのインストールについては、「アニメーションを伴った時刻表示」を参照してください。

次に、WebViewで、作品の内容を表示するプロジェクトに遷移する、Frameコントロールを1個配置します。

書き出されるXAMLをリスト3のように編集します。レイアウトは図5のようになります。

リスト3 書き出され、編集されたXAMLコード(WorkShowPage.xaml)

  • (1)WinRTXAMLToolkitのWatermarkTextBloxコントロールを、ツールボックスからデザイン画面上に配置すると、自動的にControlsという名前空間が追加されます。
  • (2)プロパティ要素内に、Key名がGridViewTemplateという要素を配置します。
    その子要素として要素を配置し、背景色にDarkCyanを、枠線の幅に3を、枠線の色にNavyを指定します。CornerRadiusに12を指定して四隅を丸めます。
  • 要素の子要素として要素を配置し、Textプロパティに「作品名」をバインドします。文字サイズは24、文字色はGoldとしています。ここで指定する名称はVBコードのクラス内で定義されたプロパティ名です。
  • (3)要素の子要素として名前がGridView1という要素を配置します。
    ItemTemplateに(2)で定義したGridViewTemplateをStaticResourceで参照させます。
  • (4)マウスの右クリックで表示される、名前がAppBar2という要素を配置します。
    その子要素として要素を配置し、OrientationプロパティにHorizontalを指定します。
    の子要素として、WatermarkTextBox1という名前のを配置し、WatermarkTextに「検索したい作品名を入力・・・・」と指定しておきます。この文言は、WatermarkTextBoxにフォーカスが移り、入力状態になると消えます。
    次にokButtonという名前の
  • (5)作品の内容を表示するプロジェクトに遷移する、名前がmyFrameという要素を配置します。
    作品の内容がWebView内に表示されます。
<Page
  x:Class="NovelSearch.WorkShowPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:NovelSearch"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:Controls="using:WinRTXamlToolkit.Controls"■(1)
  mc:Ignorable="d" Width="1346">
  <Page.Resources>■(2)
    <DataTemplatex:Key="GridViewTemplate">■(2)
      <Border Background="DarkCyan" BorderThickness="3" BorderBrush="Navy" CornerRadius="12" Width="450">■(2)
        <TextBlock Text="{Binding 作品名}" FontFamily="Meiryo UI" FontSize="24" FontWeight="Bold" Padding="10" Width="450" Foreground="Gold" TextWrapping="Wrap" />■(2)
      </Border>■(2)
    </DataTemplate>■(2)
  </Page.Resources>■(2)
  <Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}">
    <ScrollViewerHorizontalAlignment="Left" Height="758" Margin="10,10,0,0" VerticalAlignment="Top" Width="1346">■(3)
      <GridView Height="723" Width="1336" x:Name="GridView1" FlowDirection="LeftToRight" ItemTemplate="{StaticResourceGridViewTemplate}"/>■(3)
    </ScrollViewer>■(3)
    <AppBarx:Name="AppBar2" Background="DarkGreen" Height="100" Margin="53,0,0,668">■(4)
      <StackPanel Orientation="Horizontal">■(4)
        <Controls:WatermarkTextBoxx:Name="WatermarkTextBox1"  FontFamily="Meiryo UI" FontSize="30" FontWeight="Bold" Width="573" Margin="0,23,0,24" WatermarkText="検索したい作品名を入力・・・・"/>■(4)
        <Button x:Name="okButton" Style="{StaticResourceYesAppBarButtonStyle}" Margin="0,11,0,0"/>■(4)
      </StackPanel>■(4)
    </AppBar>■(4)
    <Frame x:Name="myFrame" HorizontalAlignment="Left" Height="771"  VerticalAlignment="Top" Width="1361"/>■(5)
  </Grid>
</Page>
図5:各コントロールを配置した(クリックで拡大)

Windows ストア空白のページの作成(WebBrowserPage.xaml)

VS2012のメニューの「プロジェクト(P)/新しい項目の追加(W)」と選択して、左に表示される項目からWindows ストアを選択します。右に表示されるテンプレートから「空白のページ」を選択します。「名前(N):」にはWebBrowserPage.xamlと指定して、[追加(A)]ボタンをクリックします。WebView内に作品の内容が表示されるページです。

コントロールの配置

ツールボックスからデザイン画面上に、WebViewコントロールを1個配置します。名前はWebView1としています。WebViewコントロールは、アプリケーション内のHTMLコンテンツをホストするUI要素を提供するコントロールです。

書き出されるXAMLは省略します。レイアウトは図6のようになります。

図6:WebViewコントロールを配置した(クリックで拡大)

モジュールの作成

VS2012のメニューから、「プロジェクト(P)/モジュールの追加」と選択して、Module1.vbを作成します。リスト4のように宣言しておきます。全てのプロジェクト内で共通に使用したい変数を宣言します。

リスト4 (Module1.vb)

パブリックなブール型変数PageFlagを宣言します。どのページで戻る(←)アイコンがタップされたかの判定に使用します。

Module Module1
  Public PageFlag As Boolean = False
End Module

次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト5のコードを記述します。

ロジックコードを記述する

リスト5 (MainWindow.xaml.vb)

Option Strict On

コンテキストメニューおよびメッセージダイアログのサポートを提供するクラスの含まれる、Windows.UI.Popups名前空間をインポートします。

Imports Windows.UI.Popups

NovelInfoクラス内に文字列型の「著者名」というプロパティを定義します。

Public Class NovelInfo
  Public Property 著者名 As String
End Class
Public NotInheritable Class MainPage
  Inherits Page

NovelInfoクラス型の新しいリストである、メンバ変数myNovelInfoオブジェクトを作成します。

  Dim myNovelInfo As New List(Of NovelInfo)

XMLの要素を表すXElementクラス型のメンバ変数xmldocを宣言します。

  Dim xmldoc As XElement

文字列型の新しいリストである、メンバ変数myWriterListオブジェクトを作成します。

  Dim myWriterList As New List(Of String)
  Dim myAuthor As String

ページがアクティブになった時の処理

PCの解像度を取得し、横と縦のサイズをmyWidthとmyHeight変数に格納します。
解像度が1024×768の場合は、GridViewの幅を1000にFrameの幅を980、高さを720に設定します。何も設定しないでおくと、1024×768の解像度では、表示される内容が切れて表示されますので、注意が必要です。
XElement.LoadメソッドでXML文書(Novel.xml)を読み込みます。
Descendantsメソッドで全ての子孫要素に対して、その要素の内容をresultに格納しながら、以下の処理を行います。
NovelInfoクラスの「著者名」プロパティに要素の値を指定して、AddメソッドでリストであるmyNovelInfoに追加していきます。また、myWriterListオブジェクトにもAddメソッドで要素の内容を追加していきます。
GridViewのItemsSourceプロパティにmyNovelInfoオブジェクトを指定します。これで、著者名の一覧が表示されます。

  Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
    Dim myWidth = CInt(Window.Current.CoreWindow.Bounds.Width)
    Dim myHeight = CInt(Window.Current.CoreWindow.Bounds.Height)
    If myWidth = 1024 AndAlsomyHeight = 768 Then
      GridView1.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Left
      GridView1.Width = 1000
      myFrame.Width = 980
      myFrame.Height = 720
    End If

    xmldoc = XElement.Load("Novel.xml")
    For Each result In From c In xmldoc.Descendants("著者名") Select c.Value Distinct
      myNovelInfo.Add(New NovelInfo With {.著者名 = result})
      myWriterList.Add(result)
    Next
    GridView1.ItemsSource = myNovelInfo
  End Sub
  • 青空文庫を検索して目的の作品を探すプログラム

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています