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）
01 | <phone:PhoneApplicationPage |
02 | x:Class="DailyHaiku_in_Japanese.Preferences" |
05 | xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" |
06 | xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" |
09 | FontFamily="{StaticResource PhoneFontFamilyNormal}" |
10 | FontSize="{StaticResource PhoneFontSizeNormal}" |
11 | Foreground="{StaticResource PhoneForegroundBrush}" |
12 | SupportedOrientations="Portrait" Orientation="Portrait" |
13 | mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480" |
14 | shell:SystemTray.IsVisible="True" Language="ja-JP"> |
16 | <!--LayoutRoot is the root grid where all page content is placed--> |
17 | <Grid x:Name="LayoutRoot" Background="#FFFFFFFA"> |
19 | <RowDefinition Height="Auto"/> |
20 | <RowDefinition Height="*"/> |
21 | </Grid.RowDefinitions> |
23 | <!--ContentPanel - place additional content here--> |
24 | <Grid x:Name="ContentPanel" Grid.Row="1" Margin="15,0,15,0"> |
25 | <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" /> |
26 | <TextBlock Height="50" HorizontalAlignment="Left" Margin="83,22,0,0" Name="Settings" Text="facebookへの投稿設定" VerticalAlignment="Top" Width="344" Foreground="#FF00004B" FontSize="32" TextAlignment="Center" /> |
28 | <TextBlock FontSize="22" Margin="0,100,0,592" Foreground="#FF333333" TextWrapping="Wrap">facebookへの投稿機能をお使いになるには、この設定が必要です。</TextBlock> |
30 | <TextBlock FontSize="22" Margin="0,180,0,551" Foreground="#FF333333">facebook投稿時のタイトル</TextBlock> |
31 | <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" /> |
32 | <TextBlock FontSize="22" Margin="0,300,0,0" Foreground="#FF333333" Height="66" VerticalAlignment="Top">タイトルからのリンク先のアドレス<LineBreak/>（句会のWebサイトやブログなどのURI）</TextBlock> |
33 | <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" /> |
34 | <Button Content="投稿を設定" Style="{StaticResource SetPreferencesButtonStyle}" Height="100" HorizontalAlignment="Left" Margin="100,450,0,0" Name="SetPreferencesButton" VerticalAlignment="Top" Width="100" Background="#FF00004B" IsEnabled="True" /> |
35 | <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" /> |
37 | <TextBlock FontSize="22" Margin="0,600,0,128" Foreground="#FF333333">※この設定は、いつでも変更できます。</TextBlock> |
40 | </phone:PhoneApplicationPage> |
このページでレイアウトしたButtonコントロールのスタイル設定については、リスト5 のコードをApp.xaml内の要素の子として追加します。
リスト5 App.xaml内に追加する、「設定保存」「投稿不要」ボタンのスタイル設定（App.xaml）
01 | <Style x:Key="SetPreferencesButtonStyle" TargetType="Button"> |
02 | <Setter Property="Template"> |
04 | <ControlTemplate TargetType="Button"> |
06 | <Image x:Name="SetPreferencesButtonImage" Source="/DailyHaiku_in_Japanese;component/Image/SetPreferencesButton.png" Stretch="Fill"/> |
13 | <Style x:Key="DelPreferencesButtonStyle" TargetType="Button"> |
14 | <Setter Property="Template"> |
16 | <ControlTemplate TargetType="Button"> |
18 | <Image x:Name="DelPreferencesButtonImage" Source="/DailyHaiku_in_Japanese;component/Image/DelPreferencesButton.png" Stretch="Fill"/> |
投稿設定ページのロジック(Preferences.xaml.vb)
この投稿設定ページでは、リスト6のようなXML形式の投稿設定ファイルを生成して、「DailyHaiku_Preferences」フォルダ内に「MyPreferences.xml」というファイル名で保存します。
設定が変更された時は、要素を追加し、「投稿不要」ボタンがタップされた時には、この設定ファイルを削除します。
このようなXMLデータの処理にLINQ to XML を使うため、「プロジェクト／参照の追加」からSystem.Xml.Linq を追加しておきます。
リスト6 facebookへの投稿設定ファイル（MyPreferences.xml）の構造
1 | <?xml version="1.0" encoding="utf-8"?> |
4 | <Title>リンク先タイトル（句会の名称など）</Title> |
5 | <LinkUri>リンク先URI（句会のWebサイトなど）</LinkUri> |
このページの処理は次のとおりです（リスト7）。
まず、ローカルストレージに設定ファイルを保存するためにSystem.IO.IsolatedStorage名前空間を、XMLデータを処理するためにSystem.Xml.Linq名前空間をインポートしておきます。
(1)設定ページがロードされた時の処理
この設定ページがロードされた時、設定ファイルの保存先となる「DailyHaiku_Preferences」フォルダがなければ生成しておきます。設定ファイルは、このフォルダ内に「MyPreferences.xml」というファイル名で保存させるようになります。
既に設定ファイルがある場合は、LINQ to XMLを用いて、前掲リスト6にある
要素と<linkuri>要素を取得して、TextBox内に表示しておきます。
<h4>(2)「設定保存」ボタンがタップされた時の処理</h4>
<p>「設定保存」ボタンがタップされた時、入力ボックス内のデータをそれぞれ変数に代入しておきます。<br />
リンク先URIのデータについては大まかな検証を行い、正しくない場合は入力ボックスの背景色を黄色にして注意を促します。入力されていない場合も、メッセージを表示します。<br />
リンク先のタイトルが入力されている場合は、設定ファイルの生成処理を実行します。設定ファイルが存在しない場合は新規生成し、既にある場合は<facebook>要素を生成して追加します。<br />
タイトルが入力されていない場合は、メッセージを表示します。</facebook></p>
<h4>(3)「投稿不要」ボタンがタップされた時の処理</h4>
<p>「投稿不要」ボタンがタップされた時、既存の設定ファイルがある場合は、これを削除します。削除できたら、リンク先のタイトルとURIをデフォルトの「一日一句」と「http://www.」に戻しておきます。</p>
<h4>リスト7 投稿設定ページのロジック・コード（Preferences.xaml.vb）</h4>
<pre class="brush: plain" type="syntaxhighlighter">Option Strict On
Imports System.IO.IsolatedStorage
Imports System.IO
Imports System.Xml.Linq
Partial Public Class Preferences
Inherits PhoneApplicationPage
Public Sub New()
InitializeComponent()
End Sub
'●投稿の可否に関わらず使う変数
Dim Storage_Pre As IsolatedStorageFile
Dim FilePath_Pre As String
</pre>
<h4>(1)設定ページがロードされた時の処理</h4>
<pre class="brush: plain" type="syntaxhighlighter"> Private Sub Preferences_Loaded(sender As Object, e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
Storage_Pre = IsolatedStorageFile.GetUserStoreForApplication
'●「DailyHaiku_Preferences」フォルダがなければ生成する
If Storage_Pre.DirectoryExists("DailyHaiku_Preferences") = False Then
Storage_Pre.CreateDirectory("DailyHaiku_Preferences")
End If
'●設定ファイルは、「DailyHaiku_Preferences」フォルダ内の「MyPreferences.xml」とする
FilePath_Pre = Path.Combine("DailyHaiku_Preferences", "MyPreferences.xml")
'●設定ファイルがあれば、facebook要素のTitle要素とLinkUri要素を取得、TextBox内に表示
If Storage_Pre.FileExists(FilePath_Pre) = True Then
Dim MyStream_Pre As IsolatedStorageFileStream = Storage_Pre.OpenFile(FilePath_Pre, FileMode.Open, FileAccess.Read)
Dim Reader_Pre As StreamReader = New StreamReader(MyStream_Pre, System.Text.Encoding.UTF8)
Dim ReadXmldoc_Pre As String = Reader_Pre.ReadToEnd
Dim ItemDoc_Pre As XDocument = XDocument.Parse(ReadXmldoc_Pre)
Reader_Pre.Close()
MyStream_Pre.Close()
Dim MyDataQuery_Pre As IEnumerable(Of XElement) = From c In ItemDoc_Pre.Descendants("facebook") Select c
For Each MyResult_Pre In MyDataQuery_Pre
LinkTitleText.Text = MyResult_Pre.<Title>.Value
LinkURIText.Text = MyResult_Pre.<LinkUri>.Value
Next
End If
End Sub
</pre>
<h4>(2)「設定保存」ボタンがタップされた時の処理</h4>
<pre class="brush: plain" type="syntaxhighlighter"> Private Sub SetPreferencesButton_Tap(sender As System.Object, e As System.Windows.Input.GestureEventArgs) Handles SetPreferencesButton.Tap
'●入力ボックス内データを、生成するXMLのテキストとする
Dim LinkTitle As String = LinkTitleText.Text
Dim LinkUri As String = LinkURIText.Text
'●入力ボックス内データの検証。Uriの形式が正しくなければ、入力ボックスの背景色を黄色にして注意を促す
If LinkUri <> String.Empty Then
If System.Text.RegularExpressions.Regex.IsMatch(LinkUri, "(ht|f)tp(s?)\:\/\/([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?", System.Text.RegularExpressions.RegexOptions.IgnoreCase) Then
LinkURIText.Background = New SolidColorBrush(Colors.White)
Else
MessageBox.Show("正しいURIが指定されているかどうか確認してください。")
LinkURIText.Background = New SolidColorBrush(Colors.Yellow)
Exit Sub
End If
Else
MessageBox.Show("投稿機能をご利用になるには、リンク先アドレスを入力する必要があります。")
Exit Sub
End If
'●設定ファイルの生成。既存ファイルがない場合は新規生成し、既にある場合はfacebook要素を追加していく。
'●俳句の保存時には、最後のfacebook要素の内容を、最新設定として取得して、投稿する。
If LinkTitle <> String.Empty Then
Try
If Storage_Pre.FileExists(FilePath_Pre) = False Then
Dim Xmldoc_Pre As XDocument = <?xml version="1.0" encoding="utf-8"?>
<Preferences>
<facebook>
<Title><%= LinkTitle %></Title>
<LinkUri><%= LinkUri %></LinkUri>
</facebook>
</Preferences>
Using MyStream_Pre As IsolatedStorageFileStream = New IsolatedStorageFileStream(FilePath_Pre, FileMode.Create, FileAccess.Write, Storage_Pre)
Xmldoc_Pre.Save(MyStream_Pre)
MessageBox.Show("俳句保存時にfacebookに投稿できるようになりました。")
End Using
Else
Dim AddStream_Pre As IsolatedStorageFileStream = Storage_Pre.OpenFile(FilePath_Pre, FileMode.Open, FileAccess.Read)
Dim Reader_Pre As StreamReader = New StreamReader(AddStream_Pre)
Dim ReadXmldoc_Pre As String = Reader_Pre.ReadToEnd
Dim AddDoc_Pre As XElement = XElement.Parse(ReadXmldoc_Pre)
Dim AddXml_Pre As XElement = <facebook>
<Title><%= LinkTitle %></Title>
<LinkUri><%= LinkUri %></LinkUri>
</facebook>
AddDoc_Pre.Add(AddXml_Pre)
AddStream_Pre.Dispose()
Using Stream_Pre As IsolatedStorageFileStream = New IsolatedStorageFileStream(FilePath_Pre, FileMode.Create, FileAccess.Write, Storage_Pre)
If Storage_Pre.FileExists(FilePath_Pre) = True Then
AddDoc_Pre.Save(Stream_Pre)
Reader_Pre.Dispose()
MessageBox.Show("facebookへの投稿方法を設定しました。")
End If
End Using
End If
Catch
Exit Sub
End Try
Else
'●必須のタイトルが空の場合は、メッセージを表示
MessageBox.Show("投稿機能をご利用になるには、タイトルとリンク先のアドレスの両方が必要です。")
Exit Sub
End If
End Sub
</pre>
<h4>(3)「投稿不要」ボタンがタップされた時の処理</h4>
<pre class="brush: plain" type="syntaxhighlighter"> Private Sub DelPreferencesButton_Tap(sender As System.Object, e As System.Windows.Input.GestureEventArgs) Handles DelPreferencesButton.Tap
'●設定ファイルを削除。既存設定ファイルがある場合は、フォルダは残したままファイルを削除する
If Storage_Pre.DirectoryExists("DailyHaiku_Preferences") = True And Storage_Pre.FileExists(FilePath_Pre) = True Then
Dim MyStream_Pre As IsolatedStorageFileStream = Storage_Pre.OpenFile(FilePath_Pre, FileMode.Open, FileAccess.Read)
Using Reader_Pre As StreamReader = New StreamReader(MyStream_Pre, System.Text.Encoding.UTF8)
Dim DeleteDoc_Pre As String = Reader_Pre.ReadToEnd
Dim DelXml_Pre As XElement = XElement.Parse(DeleteDoc_Pre)
MyStream_Pre.Close()
End Using
Storage_Pre.DeleteFile(FilePath_Pre)
LinkTitleText.Text = "一日一句"
LinkURIText.Text = "http://www."
MessageBox.Show("facebookへの投稿設定情報を削除しました。")
Else
MessageBox.Show("投稿情報は設定されていません。")
End If
End Sub
End Class
</pre>
</linkuri> 
