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

前回は、マーケットプレイスで無料公開している、俳句・川柳アプリ「一日一句 投稿対応版 Ver.1.0」の実装内容について解説しました。今回と次回では、プログラムについて解説します。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

このプログラムを利用するには、第7回で解説したApplication IDをコード中に指定する必要がありますので、今回の記事を一読した上で指定してください。

開発環境の整備や、今回開発するアプリの概要、マーケットプレイスへの申請方法などについては、前回までの過去記事を参照してください。このアプリは、Silverlightアプリケーションで、開発言語はVisual Basicです。

なお、今回のアプリは、画面レイアウトがシンプルであるためにVisual Studioのみで開発しています。しかし、デザインが複雑な場合は、Expression Blendでレイアウトする方が作業効率はよいでしょう。

さて、前回記事で述べたとおり、このアプリは6つのページで構成します。図1のうち、今回は、赤い枠で囲まれた部分の処理について解説します。これは、ユーザーから見れば、俳句を作る作業にあたります。俳句が作られた後の作業については、次回に解説します。

図1：このアプリのページ構成と今回解説する処理（クリックで拡大）

メインページ（メニュー選択）の実装

新規プロジェクトの作成

では、早速開発方法を見ていきましょう。

「ファイル/ File 」「新規/ New 」「プロジェクト/ Project…」を選択し、開発言語として「Visual Basic」を選択、「Silverlight For Windows Phone」「Windows Phone Application」を選択します。プロジェクト名は、「DailyHaiku_in_Japanese」 としておきます。「Windows Phone 7.1」を選択します。

プロジェクト名を右クリックして表示されるメニューから「追加/新規フォルダ」を選択してフォルダを追加し、名前を「Image」としておきます。このImageフォルダを右クリックして表示されるメニューから「追加/既存のアイテム」を選択して、アプリの部品の画像ファイル一式を追加しておきます。

※ダウンロードできるプロジェクト中には、画像ファイルは追加済みです。

メインページのデザイン（MainPage.xaml）

まず、背景色を設定しておきます。名前がLayoutRootのGridのBackgroundに” #FFFFFFFA”を指定します。今回もStackPanelは使わないので、その部分のコードはコメントアウトしておきます。

次に、ツールボックスからImageコントロールを4個と、Buttonコントロールを1個、ドラッグしてレイアウトします。これらのコントロールに名前を付け、ImageコントロールのSourceには、アプリのロゴ、ヘルプ、設定、開発者のロゴの各画像を指定します（図2）。

図2：このページにレイアウトするコントロール（クリックで拡大）

すべてのコントロールのプロパティを調整し、完成したデザイン・コードは、リスト1になります。

リスト1　メインページのデザイン・コード（MainPage.xaml）

<phone:PhoneApplicationPage 
  x:Class="DailyHaiku_in_Japanese.MainPage"
  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"
  mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  SupportedOrientations="Portrait" Orientation="Portrait"
  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="12,0,12,0">
      <Image Height="300" HorizontalAlignment="Left" Margin="80,110,0,0" Name="LogoIcon" Stretch="Fill" VerticalAlignment="Top" Width="300" Source="/DailyHaiku_in_Japanese;component/Image/DailyHaiku_J_Logo300.png" />
      <Image Height="50" HorizontalAlignment="Left" Margin="180,650,0,0" Name="DeveloperLogo" Stretch="Fill" VerticalAlignment="Top" Width="100" Source="/DailyHaiku_in_Japanese;component/Image/SeinDesignLOGO_T100.png" />
      <Image Height="80" HorizontalAlignment="Left" Margin="80,450,0,0" Name="HelpIcon" Stretch="Fill" VerticalAlignment="Top" Width="80" Source="/DailyHaiku_in_Japanese;component/Image/DailyHaiku_J_Help.png" />
      <Image Height="80" HorizontalAlignment="Left" Margin="190,450,0,0" Name="PreferencesIcon" Stretch="Fill" VerticalAlignment="Top" Width="80" Source="/DailyHaiku_in_Japanese;component/Image/PreferencesButton.png" />
      <Button Height="80" Style="{StaticResource DeleteFileButtonStyle}"  HorizontalAlignment="Left" Margin="300,450,0,0" Name="DeleteFileIcon" VerticalAlignment="Top" Width="80" IsEnabled="False" />
    </Grid>
  </Grid>
</phone:PhoneApplicationPage>

リスト1のうち、「削除」ボタンについては、俳句のファイルが存在しなければ削除できないわけですから、最初はIsEnabled="False"、つまり使用不可としておき、俳句が詠まれて俳句のファイルが生成されたら使用可とします。そのため、Imageではなく、Buttonコントロールを使っています。

この「削除」ボタンのスタイルを設定するには、リスト2のように、App.xamlのコードに、要素の子として、