Archive for 2012年4月15日

Windows Phone 7 で、ストーリーボードを手書き

2012年4月15日

Canvas のTranslateY をストーリーボードでアニメーションする際の注意です。


<Canvas Name=”canvas” >
    <Canvas.RenderTransform>
        <CompositeTransform>
            <CompositeTransform.TranslateY>100

            </CompositeTransform.TranslateY>
        </CompositeTransform>
    </Canvas.RenderTransform>
・・・とRenderTransform を定義しておくか、コードで
canvas.RenderTransform = new CompositeTransform();
のように、RenderTransform を追加しておかないと、ターゲットが存在しないため、

ArgumentException “パラメータが正しくありません” というわけのわからない例外になります。


それから、SetTarget で、canvas を指定しただけだと、ターゲットの指定が不十分でアニメーションが動きません。次のように、canvas.RenderTransform まで指定する必要があります。

Storyboard.SetTarget(daukf1, canvas.RenderTransform);


Storyboard sb1 = new Storyboard();

canvas.RenderTransform = new CompositeTransform();

DoubleAnimationUsingKeyFrames daukf1 = new DoubleAnimationUsingKeyFrames();

LinearDoubleKeyFrame ldkf1 = new LinearDoubleKeyFrame();
ldkf1.KeyTime = KeyTime.FromTimeSpan(new TimeSpan(0, 0, 0));
ldkf1.Value = 0;

LinearDoubleKeyFrame ldkf2 = new LinearDoubleKeyFrame();
ldkf2.KeyTime = KeyTime.FromTimeSpan(new TimeSpan(0, 0, 10));
ldkf2.Value = -1300;

daukf1.KeyFrames.Add(ldkf1);
daukf1.KeyFrames.Add(ldkf2);

Storyboard.SetTarget(daukf1, canvas.RenderTransform);
Storyboard.SetTargetProperty(daukf1, new PropertyPath(CompositeTransform.TranslateYProperty));

sb1.Children.Add(daukf1);
sb1.RepeatBehavior = RepeatBehavior.Forever;
sb1.Begin();

広告

画面のローカライズ

2012年4月15日

アプリケーションをローカライズするには

UX-TV: 3/7放送分 の大西さんの放送を見るのがわかりやすいです。

  1. プロジェクトにアセンブリ リソース ファイルを追加する
    image
    日本語リソース AppResources.resx を追加
    image
    同様に英語リソース AppResources.en-US.resx を追加
    image
    同様にスペイン語リソース AppResources.es-ES.resx を追加

    [アクセス修飾子] を "Public" に設定すること。この設定を忘れると、次のコンパイルエラーになります。

    アクセシビリティに一貫性がありません。プロパティの型 ‘Timer.AppResources’ のアクセシビリティはプロパティ ‘….LocalizedStrings.LocalizedResources’ よりも低く設定されています。 

  2. ニュートラル言語の確認
    プロジェクトのプロパティ→[アプリケーション]→[アセンブリ情報]より、ニュートラル言語が日本語になっていることを確認する
    image
  3. プロジェクトにリソースを追加する
    [プロジェクト]→[プロジェクトのアンロード]
    image
    [ソリューションエクスプローラ]→[プロジェクト]を右クリック→[編集]
    image

    SupportedCulturesに、サポート言語を追加する。
    <SupportedCultures>
        en-US;es-ES;
    </SupportedCultures>
    image
    [ソリューションエクスプローラ]→[プロジェクト]を右クリック→[プロジェクトの再読み込み]
    image

  4. クラスの追加より、LocalizedStrings.cs を追加
    image
    次のコードを追加。

    namespace PhoneApp123
    {
        public class LocalizedStrings
        {
            private AppResources localizedresources = new AppResources();
            public AppResources LocalizedResources { get { return localizedresources; } }

        }
    }

  5. ローカライズのファイルが多い場合
    Resources というフォルダーを作成して、その下にまとめるとすっきりします。その場合、LocalizedStrings.cs に、using で次のように名前空間を指定するだけで、対応することができます。

    using PhoneApp123.Resources;

  6. App.xaml
    xmlns:local=”PhoneApp123” 参照を追加する。
    image
    App.xaml のApplication.Resources に次のリソースを追加する。

    <Application.Resources>
         <local:LocalizedStrings x:Key="LocalizedStrings" />
    </Application.Resources>

  7. 画面要素にデータバインドする

    <StackPanel x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <TextBlock Name="textBlock1" Text="{Binding Path=LocalizedResources.Greeting, Source={StaticResource LocalizedStrings}}" FontSize="40" />
        <TextBlock Name="textBlock2" Text="{Binding Path=LocalizedResources.Farewell, Source={StaticResource LocalizedStrings}}" FontSize="40" />
    </StackPanel>

  8. ApplicationMenu のローカライズ
    ApplicationMenu, ApplicationBar のローカライズで、データバインドを行うと、XamlParseException 例外が発生し、次のようなエラーメッセージが表示されます。
    Set property ‘Microsoft.Phone.Shell. ApplicationBarIconButton. Text’ threw an exception.

    これは、ApplicationMenu, ApplicationBar がデータバインドに対応していないためです。

    対応としては、たとえば次のように、動的に追加することにより、ローカライズすることができます。

    public MainPage()
    {
        InitializeComponent();
        LocalizeApplicationBar();
    }

    private void LocalizeApplicationBar()
    {
        ApplicationBarMenuItem appBarMenuItemHTP = new ApplicationBarMenuItem(AppResources.HowToMenu);
        appBarMenuItemHTP.Click += new EventHandler(ApplicationBarMenuItemHowTo_Click);
        ApplicationBar.MenuItems.Add(appBarMenuItemHTP);
    }

    private void ApplicationBarMenuItemHowTo_Click(object sender, EventArgs e)
    {
        var res = MessageBox.Show(AppResources.HowToPlay, AppResources.Title,
            MessageBoxButton.OK);
    }

Windows Phone ローカリゼーションのベスト プラクティス

  • 文字列の長さが、英語に必要な長さよりも約 40% 長いのが目安です。
  • 文字列 "The {0} could not be synchronized" のようなパラメータは使用しない。
  • 文字列を再使用しない

    など、一度目を通しておいたほうが良いです。

方法: Windows Phone のアプリケーション タイトルをローカライズする 

この方法だと VC++ が必要になってしまいますが、http://bit.ly/wploctool を使用すると、簡単にタイルのローカライズができます。

  1. リソースの作成
    image
  2. リソースを組み込む
    ツールで作成した AppResLib.dll.* をプロジェクトへコピー
  3. *.mui のビルドアクションを[コンテンツ]に変更
  4. WMAppManifest.xml の変更
    <App …中略… Title="@AppResLib.dll,-100" …後略
    <Title>@AppResLib.dll,-200</Title>
  5. ビルドして完成

imageAppTile

imageAppTileString

C# のコードから使用するには、AppResources.Designer.cs に実装されているAppResources クラスに文字列が定義されており、例えばAppResources.Greetings でアクセスできます。