Windows ストアアプリ “MeteorLine” 0.2.0.0 のソースコードを公開しました (アプリの多言語対応などの話)
MeteorLine (Windows ストアアプリ) のバージョン 0.3.0.0 のリリースをしたので、0.1.0.2 のソースコード公開 に引き続き、1 個前のバージョンである 0.2.0.0 のソースコードも GitHub で公開しました。
- MeteorLine のリポジトリ : nobuoka/win-store-MeteorLine · GitHub
オープンソースソフトウェアなライセンスのもとで公開しているわけではなく、あくまで Windows ストアアプリ開発者同士のノウハウ等の共有を目的にしたものです。 使用言語は JavaScript (HTML, CSS) です。
MeteorLine ってどんなアプリ?
タイムライン形式でいろんな web サービスその他の情報を並べて表示できるアプリです。 2013 年 2 月 21 日時点の最新のリリースバージョンである 0.3.0.0 では Twitter の Home timeline と Mentions timeline の表示にのみ対応しています。 詳しくは Windows ストアのページをご覧ください:
バージョン 0.2.0.0 のソースコードの見どころ
バージョン 0.2.0.0 における変更点は以下のとおりです。
- 多言語対応 (日本語と英語)
- アプリの背景画像を設定できるように
- ツイッターの Fav, RT, リプライなどができるようになったり表示方法を変更したり
ツイッター周りの変更点はまあ置いておくとして、多言語対応とアプリの背景画像を変更できるようにした部分はアプリ開発者の参考になるかもしれませんので書き残しておきます。
多言語対応
ソースコード見ても何のことやら、って感じかもしれませんが、
- 「既定の言語」 を 「日本語」 にしている
- MeteorLine/strings/ja-JP/resources.resjson で日本語のリソースを定義 (手入力で JSON を書いていく)
- MeteorLine/MultilingualResources/英語 (米国).xlf で日本語のリソースを英語に翻訳 (多言語アプリ ツールキット を使用)
という感じでやっています。 多言語アプリツールキットというのは、多言語対応するための便利ツールです。
多言語アプリツールキットを使う場合も使わない場合も、既定の言語については自分でリソースファイルを作って手で JSON を書く必要があります。 リソースファイルを作って UI 用の文字列をリソースファイルに記述する方法については下記ページに書いてありますので、多言語対応する場合はまず下のページを見ながら、既定の言語のリソースファイルを記述しましょう。
既定の言語以外のリソースファイルを同じ手順で作れば多言語対応ができるのですが、複数ファイルの JSON を管理するのは割と面倒です。 そこで多言語アプリツールキットの出番です。 多言語アプリツールキットを使えば、既定の言語のリソースファイルから指定の言語のリソースファイルを自動的に作ってくれます。 (もちろん翻訳した文字列は手で入力する必要がありますが、JSON を編集するよりは楽なはず。) 多言語アプリツールキットの使い方は下記ページを見てください。
ちなみに、多言語アプリツールキットを使う場合は、既定の言語を後から変更すると多言語アプリツールキットが参照するリソースファイルが変更になってしまって、全入力値がリセットされてしまって大変なことになる気がしました *1。 なので、既定の言語選びは慎重にした方が良さそうです。 *2
背景画像を設定できるように
重要な処理は下記の 2 つのファイルで行っています。
- 「アプリの設定」 のコントロール MeteorLine/pages/setting/appSetting.js で、背景画像選択のためのファイルピッカー呼び出しや画像表示位置の設定など
- ユーザーに対して設定用 UI を提供
- MeteorLine/js/vividcode/meteorline/BackgroundImageManager.js で背景画像の管理と実際の表示変更の処理
- Model の処理と View の処理の両方を担当
背景画像設定の流れ
まず、ユーザーがアプリ設定の 「背景画像を設定」 ボタンを押すと、アプリ設定のページコントロールの __setBackgroundImage メソッド が呼び出されます。 そこで、ファイルピッカーが呼び出されます。 ファイルピッカーについては下記ページ参照。
ファイルピッカーでファイルが選択されると、選択されたファイルを表す StorageFile オブジェクト が返ってくるので、それを vividcode.meteorline.BackgroundImageManager#setBackgroundImage メソッド に渡します。 BackgroundImageManager#setBackgroundImage メソッドは、渡された StorageFile オブジェクトの中身を読み込み、アプリのローカルストレージにファイルとして保存します。 アプリが扱える保存領域などについては下記ページをご覧ください。
- 状態の格納と取得の効率化 (JavaScript と HTML を使った Windows ストア アプリ) (Windows) (ローカルストレージに限らず、アプリが扱える保存領域全般の話)
- ApplicationData.LocalFolder | localFolder Property (Windows) (アプリのローカルストレージにファイルを保存するときに使用するクラス)
意見などあればください
こうした方がいいんじゃないかなどの意見があればください!
