PR

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

2012年5月1日(火)
PROJECT KySS

前回は、マーケットプレイスで無料公開している、俳句・川柳アプリ「一日一句 投稿対応版 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のコードに、要素の子として、

リスト2 App.xaml内に追加する、「削除」ボタンのスタイル設定(App.xaml)

  <!--Application Resources-->
  <Application.Resources>
 
    <Style x:Key="DeleteFileButtonStyle" TargetType="Button">
      <Setter Property="Template">
        <Setter.Value>
          <ControlTemplate TargetType="Button">
            <Grid>
              <Image x:Name="DeleteFileIconImage" Source="/DailyHaiku_in_Japanese;component/Image/DeleteFileButton.png" Stretch="Fill"/>
            </Grid>
          </ControlTemplate>
        </Setter.Value>
      </Setter>
    </Style>
   
  </Application.Resources>

メインページのロジック(MainPage xaml.vb)

メインページのレイアウトができたところで、ソリューションエクスプローラー中のMainPage.xamlを展開して表示されるMainPage.xaml.vbの中に処理を記述していきます(リスト3)。

ページがロードされた時に、俳句ファイルの保存先とする「DailyHaiku_in_Japanese_Data」フォルダがなければ、あらかじめ生成しておきます。このため、仮想ファイルシステムを作成するための型が含まれている、System.IO.IsolatedStorage名前空間を、あらかじめインポートしておきます。また、俳句が詠まれてファイルが存在する場合は、「削除」ボタンの色を濃くして、使用可としておきます。

タイトルロゴがタップされた時は「CreateHaiku.xaml」に移動させます。

「ヘルプ」ボタンがタップされた時は「DailyHaikuHelp.xaml」に、「設定」ボタンがタップされた時は「Preferences.xaml」に、「削除」ボタンがタップされた時は「DeleteFiles.xaml」に、それぞれ移動させます。

リスト3 メインページのロジック・コード(MainPage.xaml.vb)

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

Partial Public Class MainPage
  Inherits PhoneApplicationPage
  
  ' Constructor
  Public Sub New()
    InitializeComponent()
  End Sub

このページがロードされた時の処理

  Private Sub MainPage_Loaded(sender As Object, e As System.Windows.RoutedEventArgs) Handles MyBase.Loaded
    '●「DailyHaiku_in_Japanese_Data」フォルダがなければ生成しておく
    Dim HaikuStorage As IsolatedStorageFile = IsolatedStorageFile.GetUserStoreForApplication
    If HaikuStorage.DirectoryExists("DailyHaiku_in_Japanese_Data") = False Then
      HaikuStorage.CreateDirectory("DailyHaiku_in_Japanese_Data")
    End If
 
    '●俳句ファイルがあれば削除ボタンを使用可とする
    Dim HaikuFilePath As String = Path.Combine("DailyHaiku_in_Japanese_Data", "*.xml")
    Dim HaikuFileList() As String = HaikuStorage.GetFileNames(HaikuFilePath)
    If HaikuFileList.Length <= 0 Then
      DeleteFileIcon.Opacity = 0.3
      DeleteFileIcon.IsEnabled = False
    Else
      DeleteFileIcon.Opacity = 1.0
      DeleteFileIcon.IsEnabled = True
    End If
  End Sub

タイトルロゴがタップされた時の処理

  Private Sub LogoIcon_Tap(sender As System.Object, e As System.Windows.Input.GestureEventArgs) Handles LogoIcon.Tap
    NavigationService.Navigate(New Uri("/CreateHaiku.xaml?Name=", UriKind.Relative))
  End Sub

「ヘルプ」ボタンがタップされた時の処理

  Private Sub HelpIcon_Tap(sender As System.Object, e As System.Windows.Input.GestureEventArgs) Handles HelpIcon.Tap
    NavigationService.Navigate(New Uri("/DailyHaikuHelp.xaml?Name=", UriKind.Relative))
  End Sub

「設定」ボタンがタップされた時の処理

  Private Sub PreferencesIcon_Tap(sender As System.Object, e As System.Windows.Input.GestureEventArgs) Handles PreferencesIcon.Tap
    NavigationService.Navigate(New Uri("/Preferences.xaml?Name=", UriKind.Relative))
  End Sub

「削除」ボタンがタップされた時の処理

  Private Sub DeleteFileIcon_Tap(sender As System.Object, e As System.Windows.Input.GestureEventArgs) Handles DeleteFileIcon.Tap
    NavigationService.Navigate(New Uri("/DeleteFiles.xaml?Name=", UriKind.Relative))
  End Sub
End Class
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会員サービスのご案内

関連記事