PR

翻訳と、facebookへの投稿処理の実装

2012年5月1日(火)
PROJECT KySS

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にある

要素と<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>
Think IT会員限定特典
  • 「一日一句 投稿対応版 Ver.1.0」プロジェクトファイル

四国の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のWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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