facebookへの投稿設定ページの実装

facebookへの投稿設定ページの実装

俳句の入力処理を実装する前に、facebookへの投稿設定機能を実装します。

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

投稿設定ページのデザイン(Preferences.xaml)

まず、MainPage.xaml同様、LayoutRootのGridのBackgroundに”#FFFFFFFA”を指定し、StackPanel部分をコメントアウトしておきます。

ツールボックスからImageコントロールを1個、TextBlockコントロールを4個、TextBoxコントロールを2個、Buttonコントロールを2個、ドラッグしてレイアウトします。

これらのコントロールに名前を付けて（図3）、Image のSourceには、アプリの小さいロゴを指定します。この小さいロゴは、他のページについても同じ場所にレイアウトします。

図3：投稿設定ページにコントロールをレイアウトする（クリックで拡大）

図3のようにレイアウトした各コントロールのプロパティを調整し、完成したデザイン・コードは、リスト4になります。

リスト4　投稿設定ページのデザイン・コード（Preferences.xaml）

<phone:PhoneApplicationPage 
  x:Class="DailyHaiku_in_Japanese.Preferences"
  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">

  <!--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="83,22,0,0" Name="Settings" Text="facebookへの投稿設定" VerticalAlignment="Top" Width="344" Foreground="#FF00004B" FontSize="32" TextAlignment="Center" />
 
      <TextBlock FontSize="22" Margin="0,100,0,592" Foreground="#FF333333" TextWrapping="Wrap">facebookへの投稿機能をお使いになるには、この設定が必要です。</TextBlock>
    
      <TextBlock FontSize="22" Margin="0,180,0,551" Foreground="#FF333333">facebook投稿時のタイトル</TextBlock>
      <TextBox HorizontalAlignment="Left" Margin="-9,210,0,311" Name="LinkTitleText" Text="一日一句" Width="468" BorderBrush="#FF00004B" Foreground="#FF333333" BorderThickness="1" Height="75" VerticalAlignment="Top" Padding="5" FontSize="24" />
      <TextBlock FontSize="22" Margin="0,300,0,0" Foreground="#FF333333" Height="66" VerticalAlignment="Top">タイトルからのリンク先のアドレス<LineBreak/>（句会のWebサイトやブログなどのURI）</TextBlock>
      <TextBox HorizontalAlignment="Left" Margin="-9,360,0,218" Name="LinkURIText" Text="http://www." Width="468" BorderBrush="#FF00004B" Foreground="#FF333333" BorderThickness="1" Height="75" VerticalAlignment="Top" Padding="5" FontSize="24" />
      <Button Content="投稿を設定" Style="{StaticResource SetPreferencesButtonStyle}"  Height="100" HorizontalAlignment="Left" Margin="100,450,0,0" Name="SetPreferencesButton" VerticalAlignment="Top" Width="100" Background="#FF00004B" IsEnabled="True" />
      <Button Content="投稿しない" Style="{StaticResource DelPreferencesButtonStyle}"  Height="100" HorizontalAlignment="Left" Margin="250,450,0,0" Name="DelPreferencesButton" VerticalAlignment="Top" Width="100" Background="Gainsboro" IsEnabled="True" Foreground="#FF00004B" BorderBrush="#FF00004B" BorderThickness="1" />
 
      <TextBlock FontSize="22" Margin="0,600,0,128" Foreground="#FF333333">※この設定は、いつでも変更できます。</TextBlock>
    </Grid>
  </Grid>
</phone:PhoneApplicationPage>

このページでレイアウトしたButtonコントロールのスタイル設定については、リスト5 のコードをApp.xaml内の要素の子として追加します。

リスト5　 App.xaml内に追加する、「設定保存」「投稿不要」ボタンのスタイル設定（App.xaml）

    <Style x:Key="SetPreferencesButtonStyle" TargetType="Button">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="Button">
            <Grid>
              <Image x:Name="SetPreferencesButtonImage" Source="/DailyHaiku_in_Japanese;component/Image/SetPreferencesButton.png" Stretch="Fill"/>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
    
    <Style x:Key="DelPreferencesButtonStyle" TargetType="Button">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="Button">
            <Grid>
              <Image x:Name="DelPreferencesButtonImage" Source="/DailyHaiku_in_Japanese;component/Image/DelPreferencesButton.png" Stretch="Fill"/>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>

投稿設定ページのロジック(Preferences.xaml.vb)

この投稿設定ページでは、リスト6のようなXML形式の投稿設定ファイルを生成して、「DailyHaiku_Preferences」フォルダ内に「MyPreferences.xml」というファイル名で保存します。

設定が変更された時は、要素を追加し、「投稿不要」ボタンがタップされた時には、この設定ファイルを削除します。

このようなXMLデータの処理にLINQ to XML を使うため、「プロジェクト／参照の追加」からSystem.Xml.Linq を追加しておきます。　

リスト6　 facebookへの投稿設定ファイル（MyPreferences.xml）の構造

<?xml version="1.0" encoding="utf-8"?>
<Preferences>
  <facebook>
    <Title>リンク先タイトル（句会の名称など）</Title>
    <LinkUri>リンク先URI（句会のWebサイトなど）</LinkUri>
  </facebook>
  ～<facebook>要素繰り返し～
</Preferences>

このページの処理は次のとおりです（リスト7）。

まず、ローカルストレージに設定ファイルを保存するためにSystem.IO.IsolatedStorage名前空間を、XMLデータを処理するためにSystem.Xml.Linq名前空間をインポートしておきます。

(1)設定ページがロードされた時の処理

この設定ページがロードされた時、設定ファイルの保存先となる「DailyHaiku_Preferences」フォルダがなければ生成しておきます。設定ファイルは、このフォルダ内に「MyPreferences.xml」というファイル名で保存させるようになります。
既に設定ファイルがある場合は、LINQ to XMLを用いて、前掲リスト6にある