「一日一句」完結編 〜リスト選択とソート表示の実装〜

2012年5月2日(水)
PROJECT KySS

削除ページの実装

削除ページのデザイン(DeleteFiles.xaml)

今度は、登録済み俳句ファイルの削除ページを作成します。ソリューションエクスプローラーのプロジェクト名を右クリックして表示される「追加/新しい項目」で、Portrait Pageを追加します。名前は、DeleteFiles.xamlとします。LayoutRootのGridのBackgroundに” #FFFFFFFA”を指定し、StackPanel部分をコメントアウトします。

ツールボックスから、Image、TextBlock、ListBoxの各コントロールを、図5のようにレイアウトします。

 図5:削除ページにコントロールをレイアウトする(クリックで拡大)

このページでは、削除したいファイルを選択した上で、削除処理を実行します。このファイル・リストを表示する処理は、入力ページで「一覧」ボタンをタップしてファイル・リストを表示した処理と、基本的に同じです。

ファイル・リストを表示するために、ListBoxのItemTemplateに、ItemTemplate="{StaticResource ListBoxTemplate_Del}" のように指定し、このテンプレートを、要素の中で指定しておきます。このテンプレートにはをレイアウトし、ファイル名の「年月」をバインドできるようにします。

各コントロールのマージン等のプロパティを調整し、完成したデザイン・コードは、リスト7のようになります。

リスト7 削除ページのデザイン・コード(DeleteFiles.xaml)

<phone:PhoneApplicationPage 
  x:Class="DailyHaiku_in_Japanese.DeleteFiles"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  SupportedOrientations="Portrait" Orientation="Portrait"
  mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480"
  shell:SystemTray.IsVisible="True" Language="ja-JP">
 
  <!--■俳句のファイル・リスト-->
  <phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="ListBoxTemplate_Del">
      <StackPanel Background="#e6e4d7" Margin="5">
        <TextBlock Text="{Binding 年月}" TextWrapping="Wrap" Width="440" Padding="2"/>
      </StackPanel>
    </DataTemplate>
  </phone:PhoneApplicationPage.Resources>
 
  <!--LayoutRoot is the root grid where all page content is placed-->
  <Grid x:Name="LayoutRoot" Background="#FFFFFFFA">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
 
    <!--ContentPanel - place additional content here-->
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="15,0,15,0">
      <Image Height="60" HorizontalAlignment="Left" Margin="0,15,0,0" Name="HaikuLogo60px" Stretch="Fill" VerticalAlignment="Top" Width="60" Source="/DailyHaiku_in_Japanese;component/Image/HaikuLogo60px.png" />
      <TextBlock Height="50" HorizontalAlignment="Left" Margin="105,22,0,0" Name="DeleteFilesPage" Text="ファイルの削除" VerticalAlignment="Top" Width="260" Foreground="#FF00004B" FontSize="32" TextAlignment="Center" /> 
      <TextBlock TextWrapping="Wrap" FontSize="22" Margin="0,100,0,601" Foreground="#FF333333">削除したい月のファイルをタップして選択してください。</TextBlock>
      <ListBox Height="580" HorizontalAlignment="Left" Margin="0,173,0,0" Name="DelMonthListBox" VerticalAlignment="Top" Width="450" FontSize="32" Foreground="#FF333333" Padding="10" BorderBrush="#FF00004B" BorderThickness="1" ItemTemplate="{StaticResource ListBoxTemplate_Del}" Background="White" />
    </Grid>
  </Grid>
</phone:PhoneApplicationPage>

削除ページのロジック(DeleteFiles.xaml.vb)

コントロールをレイアウトできたら、削除ページの処理を記述していきます(リスト8)。

(1) 削除対象ファイル名の年月を取得するクラスの作成

削除対象ファイル・リストのデータを取得するために、DelYearMonthクラスを作成します。

(2) この削除ページがロードされた時の処理

年月リストを表示する、ShowHaikuListプロシジャを実行します。

(3) 保存済み俳句ファイルの年月リストをListBoxに表示する処理

「DailyHaiku_in_Japanese_Data」フォルダ内のXMLファイルのリストを取得します。
ListBox表示用の年月リストを生成し、このページの冒頭に記述しているDelYearMonthクラスを用いて、ファイル名の拡張子を除く部分をリストに追加します。年月の追加されたリストを、ListBoxに適用して、ファイル・リストを表示します。

(4) ListBoxから、削除したい月が選択された時の処理

DelYearMonthクラスを用いて、選択されたファイルの年月を変数DelMonthNameに代入します。
削除を実行する前には、確認メッセージを表示します。削除が「OK」の場合は、選択された年月名に拡張子.xmlを追加して削除対象ファイル名とし、そのファイルがあれば削除処理を実行します。削除実行後には、ListBox内の表示を更新します。一方、削除対象ファイルがない場合は、メッセージを表示します。

削除を中止した場合、同じ年月の再選択による削除を実行できるように、ListBoxに年月を再バインドします。

リスト8 削除ページのロジック・コード(DeleteFiles.xaml.vb)

Option Strict On
Imports System.IO.IsolatedStorage
Imports System.IO
Imports System.Xml.Linq

(1) 削除対象ファイル名の年月を取得するクラスの作成

Public Class DelYearMonth
  Property 年月 As String
End Class

Partial Public Class DeleteFiles
  Inherits PhoneApplicationPage
 
  Public Sub New()
    InitializeComponent()
  End Sub

(2) この削除ページがロードされた時の処理。

    '●年月リストの表示処理を実行する
  Private Sub DeleteFiles_Loaded(sender As Object, e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
    ShowHaikuList()
  End Sub

(3) 保存済み俳句ファイルの年月リストをListBoxに表示する処理

  Private Sub ShowHaikuList()
    '●指定フォルダ内のXMLファイルのリストを取得
    Dim HaikuStorage_Del As IsolatedStorageFile = IsolatedStorageFile.GetUserStoreForApplication
    Dim HaikuFilePath_Del As String = Path.Combine("DailyHaiku_in_Japanese_Data", "*.xml")
    Dim HaikuFileList_Del() As String = HaikuStorage_Del.GetFileNames(HaikuFilePath_Del)
 
    '●ListBox表示用の年月リストを生成
    Dim HaikuMonthList_Del As New List(Of DelYearMonth)
  
    '●ファイル名の拡張子を除く部分を取得、このファイルの冒頭に記述しているDelYearMonthクラスを使い、リストに追加
    For Each MyXmlFileName In HaikuFileList_Del
      HaikuMonthList_Del.Add(New DelYearMonth With {.年月 = Path.GetFileNameWithoutExtension(MyXmlFileName)}) 'ファイル名を取得
    Next
    '●年月の追加されたリストを、ListBoxに適用
    DelMonthListBox.ItemsSource = HaikuMonthList_Del
  End Sub

(4) ListBoxから、削除したい月が選択された時の処理

  Private Sub DelMonthListBox_SelectionChanged(sender As System.Object, e As System.Windows.Controls.SelectionChangedEventArgs) Handles DelMonthListBox.SelectionChanged
    Try
      '●このファイルの冒頭に記述しているDelYearMonthクラスを使い、選択されたファイルの項目名(○年○月)を変数DelMonthNameに代入
      Dim DelMonthName As String = DirectCast(DelMonthListBox.SelectedItem, DelYearMonth).年月
 
      '●削除確認メッセージを表示
      Dim CheckRemove As MessageBoxResult = MessageBox.Show("ほんとうに削除してもよいですか?この操作を実行すると、この月の俳句データはすべて失われます。", DelMonthName & "の俳句ファイルを削除しますか?", MessageBoxButton.OKCancel)
 
      Select Case CheckRemove
        '●削除OKの場合の処理
        Case MessageBoxResult.OK
  
        '●選択された月名に拡張子.xmlを追加して削除対象ファイル名とする
        Dim DelMonthXml As XElement
        Dim Storage_Del As IsolatedStorageFile = IsolatedStorageFile.GetUserStoreForApplication
        Dim FilePath_Del As String = Path.Combine("DailyHaiku_in_Japanese_Data", DelMonthName & ".xml")
 
        '●指定フォルダと当該ファイルが存在すれば、削除処理を実行
        If Storage_Del.DirectoryExists("DailyHaiku_in_Japanese_Data") = True And Storage_Del.FileExists(FilePath_Del) = True Then
 
          Dim MyStream_Del As IsolatedStorageFileStream = Storage_Del.OpenFile(FilePath_Del, FileMode.Open, FileAccess.Read)
          Using Reader_Del As StreamReader = New StreamReader(MyStream_Del, System.Text.Encoding.UTF8)
            Dim ReadDeleteXmldoc As String = Reader_Del.ReadToEnd
            DelMonthXml = XElement.Parse(ReadDeleteXmldoc)
            MyStream_Del.Close()
          End Using
 
          Storage_Del.DeleteFile(FilePath_Del)
          MessageBox.Show(DelMonthName & "の俳句ファイルを削除しました。")
          '●削除実行後、ListBox内の年月表示を更新する
          ShowHaikuList()
        Else
          MessageBox.Show(DelMonthName & "の俳句ファイルはありません。")
          Exit Sub
        End If
 
        Exit Select
      Case Else
        '●削除しない場合の処理。ListBoxに年月を再バインド。この処理がなければ、同じ年月の再選択による削除が実行できない。
        ShowHaikuList()
        Exit Sub
      End Select
    Catch
      Exit Sub
    End Try
  End Sub
End Class

開発が終わったら

以上の基本機能の開発が完了したら、ヘルプページを作成します。これは、前バージョン同様、Panoramaで作成します。

ソリューションエクスプローラーのプロジェクト名を右クリックして表示される「追加/新しい項目」でPanorama Pageを追加します。名前は、DailyHaikuHelp.xamlとします。

このページの作成方法については、前バージョンの開発方法を述べた「第7回 ヘルプ作成・テスト・バージョンアップの準備」を参照してください。ただし、第7回で解説した前バージョンのアプリでは、ヘルプページ内に削除機能を実装していたのに対し、今回は、削除機能は前述のとおり別のページとして作成しているところが異なります。このバージョンでは、ヘルプページは静的な操作説明に過ぎず、丁寧に手順を記述していくだけです。

すべてのページを作り終えたら、エミュレーターと実機の両方でテストを行い、申請に備えます。

本連載第5回~今回までで解説してきた、俳句アプリ「一日一句 Ver.0.8」および、そのバージョンアップ版「一日一句 投稿対応版 Ver.1.0」はリジェクトなく認定され、現在もクラッシュなく公開中です。

プログラミング後、月日がたって見直してみると、改善したい点もいくつかありますが、それは今後のバージョンアップの中で取り入れることとします。本稿には、認定されたプログラムをそのままの状態で掲載しています。

本連載で俳句アプリを取り上げたのは、文芸分野のツール開発を促すためではありません。データ処理、検索、翻訳、リスト表示と選択、画面レイアウトなどの要素が、的を絞ったコンパクトなビジネスアプリ開発に活かせると考えるからです。

さて、「一日一句」アプリの開発は今回で終了ですが、実際にアプリを開発してみていかがだったでしょうか。ダウンロードしたプロジェクトを触ってみて、皆さんのアプリ作りに役立てていただければ幸いです。

次回からは、英語版アプリを取り上げます。ただし、この俳句アプリの英語版ではありません。今回の連載のために開発した別のアプリです。Windows Phoneの加速度センサーとサウンドを組み合わせた「Sound Clinometer Ver.0.8」について解説していきます。

【関連リンク】

開発に役立つリンク集を紹介します。

開発者向け技術情報サイト MSDN
全ての情報は、ここから。
App Hub / Windows Phone マーケットプレイス Windows Phone フォーラム
App Hub の利用や Windows Phone マーケットプレイスに関する話題や情報交換の場です。
UX-TV
アプリケーション開発に関する情報をエバンジェリストの方々が定期的に発信しています。Windows Phone開発に関する番組が充実しています。
Windows Phone公式サイト(Microsoft)
Windows Phone 開発者向け技術情報
facebook 公式 Fan Page「Windows Phone Japan」
Windows Phone 関連ブログ
コミュニティ: Windows Phone Arch

<リンク先最終アクセス:2012.04>

四国のSOHO。薬師寺国安(VBプログラマ)と、薬師寺聖(デザイナ、エンジニア)によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

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

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

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

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