第5回 Plus Programming .net 勉強会 で共有する次の2つのアプリの、全ソースコードで使われている技術について紹介します。勉強会ではポイントを絞って技術を解説しますが、以下の内容が全て実装されていて、かつ、ストアアプリとして無事審査に通っていますので、これからアプリを作成する時の参考にしていただけると思います。
- 【公開中アプリのソースコードで実践！（Windows8開発を視野に入れた）本気の Windows Phone アプリ開発】 ~ 第5回 Plus Programming .net 勉強会 ~
- Transit Schedule ( Windows Phone ストアのページ )
- Anytime Photo Frame ( Windows Phone ストアのページ )
また、この二つは Windows Phone アプリケーション トライアスロン 2013 に応募して「完走賞」をいただきました。その応募のためにアプリを考えた時のエピソードも紹介します。参考まで。
目次
Transit Schedule
乗換案内の Webサイトで検索を行い、その結果を JavaScript で解析。フォーマットしたテキストを Live カレンダーに登録して、Windows Phone の予定として使用できるようにするアプリです。
トライアスロンへの参加 – アイディアは1年前に
トライアスロン 第1種目目 「Web の情報を取得して表示する機能を有する」と「アプリケーションの情報を Web に送信する機能を有する」のテーマに応募したアプリです。検索結果の表示と、Liveカレンダーへの登録がテーマの該当部分ですね。
このアプリは元々、最初に Windows Phone アプリを作ろうと思った時から作りたかったアプリです。しかし、肝心の「検索結果の解析」の部分をうまく作る方法がなかなかわからず、それで二の足を踏んでいました。半年ほどして会社でWindows 8 ストアアプリの仕事をしているときに偶然この方法がわかり、Windows Phone での実装と併せて、マイクロソフトの担当の方に「これ使ってイイ技術なんですか？」と確認したところ、「全然問題ありませんよ」とご回答をいただいたので、じゃぁ、あのアプリが作れるじゃないか！と。いつか作ろうと思っていました。
乗換案内検索アプリは他に作ってる人がいたり、自分も使わせてもらっていたりするので、どうしようか少し悩みましたが、自分が仕事で外出する機会が多くて、このカレンダに登録できる機能が欲しくてしょうがなくなった！というのと、ちょうどトライアスロンに応募できる内容でもある、というので作り始めました。
Transit Schedule の全機能
下記、* 印が付いているものが、勉強会で詳細に解説する予定です。それ以外は共有するソースコードで確認していただけます。
1. UserAgent の偽装（Webページの スマフォ表示）
乗換案内のページがスマートフォン専用表示に対応していたので、UserAgent を偽装して、iPhone などと同様の表示になるようにしました。
2. 検索入力～検索結果表示
第1・2回勉強会の 「○○検索」Aタイプの実装方法です。テキストボックスに入力したパラメータを GET で指定してページ遷移します。
3. 強力なJavaScript 実行 *
Windows 8 ストアアプリでも利用できる方法です。表示した Web ページで任意の JavaScript を実行します。ただ eval を実行するだけではうまくいかないページの解析など高度な処理を行うための実現方法を紹介します。
4. ページの解析 *
第1・2回勉強会で紹介できなかった「○○検索」Cタイプに応用できる技術です。強力な JavaScript 実行機能によって実現できます。画面の内容を解析して、C#から使用できるようにします。
5. Live カレンダーへのアイテムの追加 *
Windows Phone カレンダに直接アイテムを追加する方法が無いようなので、Live カレンダにアイテムを追加して、同期されることで、Windows Phone の予定を登録します。
6. クリップボードへのテキストのコピー
これは解説不要ですね。一応、全機能なので挙げました。Live カレンダでしか使えないのでは不便なので、機能的には大切な内容ですね。ただテキストをコピーするだけですが。
7. ホームへ戻る
ナビゲーションについては、Windows Phone も Windows 8 ストアアプリも悩むところです。このアプリでは、検索結果や予定を Live カレンダに登録する画面では戻るで前の検索条件の画面まで戻れますが、Live カレンダに登録する画面からはアプリバーのボタンで直接最初のホーム画面＝検索条件の画面まで戻れて、かつ、ナビゲーションの履歴を破棄しています。
8. 非アクティブ（破棄）からの復帰
Windows Phone ではアプリが裏に回って、他のアプリが利用されていくと、自動的にアプリのメモリが破棄されることがあります。その後、再び復帰すると、メモリーが破棄されているので、画面の内容が失われている場合があります。これに対応する実装方法です。
9. オンラインヘルプを開く
これは Web ページを IE に開いてもらうだけですね。
10. デザイン・テーマ対応
このアプリは女性に使ってもらいたくて、わりと真剣にデザインしました。それはいいとして、そのデザインが XAML でどうなっているのか？是非確認してもらいたいです。また、ユーザーが選択したテーマの 明るい背景、暗い背景に応じて表示も変更しています。
・・・
Anytime Photo Frame
写真をスタート画面のタイル（セカンダリタイル）からワンタッチで表示できるアプリです。日付と時計も表示されます。表示中は画面がロックされず、また他の編集操作等も出来ないので、安心なところがポイントです。
トライアスロン向けのアプリは別のアイディアだったが
トライアスロン 第2種目 「時計もしくは時計の機能を有するアプリケーション」ですね。写真に時計を表示する＝フォトフレームじゃん。ということで、「いつでもどこでもフォトフレーム」というアプリになりました。
実は最初に考えていたアイディアはもう一方の「カメラの生映像を表示する機能を持ったアプリケーション」でした。が、思いついたアイディアはとても間に合う気がしなかったので、早々と別の物にしました。カメラの発想から派生したので、写真。写真＋時計＝Anytime Photo Frame となりました。アプリの全体像は、参加しなかった昨年のトライアスロンの時に考えた内容でした。
アプリのアイディアのポイントはロックされないことだと思います。表示させると携帯の電池が無くなるまでずっと表示されたままになります。そんな機能標準にはありませんから。ていうか、携帯電話なので、そのまま表示させたまま置いておいたりしないで持ち歩くでしょ、ということで、アプリがアクティブな間中、ロックされずにずっと写真が表示されている物が欲しいと思いました。
また、タイルから一発起動と、他の操作ができないことも気に入っています。
IS12Tは防水なので私はお風呂で動画とか見たりしてたんですが、シャワーの水滴が当たると、動画が別の時間にジャンプするんですよね、タッチと誤認されて。こんなんじゃ、標準機能で写真を表示してたら、消えたり、他の人にメールやSNSで公開したり、事故が起きそうで怖くて使えない。
昔、学生時代に遠距離恋愛していた頃の自分なら、朝の新聞配達で冷え切った身体をシャワーで温めながら彼女の写真を見て元気を出したいだろうなぁ、とか考えてアプリの使い勝手を考えました。
Anytime Photo Frame の全機能
同じく下記、* 印が付いているものが、勉強会で詳細に解説する予定です。それ以外は共有するソースコードで確認していただけます。
1. 縦横画面対応
このアプリのホーム画面は、携帯を縦にしたときと横にしたときで違う動きをします。また、写真を表示する画面は、携帯の向きにかかわらず縦表示・横表示が適切に固定されます。
2. 分離ストレージにデータの保存・データバインドで画面表示 *
Windows Phone アプリでも、Windows 8 ストアアプリでも、WPF でのデスクトップアプリでも、もはや標準のデータバインドでの画面表示です。画像もバインドして表示します。
3. タイル風画面の作成 *
アプリに、スタート画面のタイル表示のような、タイルが並んだ画面を作成します。写真と文字、塗りつぶしで実現します。セカンダリタイルと同じデザインを目指します。
4. ホールド（長押し）でメニュー表示
タイル風画面で、タイルを長押しすると、「削除」や「スタート画面に追加」が選べるメニューが出ます。
5. スタート画面のタイル（セカンダリタイル）の作成 *
アプリのタイル風画面とほぼ同じタイルを、スタート画面に表示します。セカンダリタイルの作り方を紹介したサイトは多いですが、実際の写真を綺麗に保存する技は紹介されていません。たいした話ではありませんが、本気でやるなら結構重要なポイントになります。
6. タイル＆フォトフレーム用にリサイズした画像の保存 *
タイル風画面とスタート画面のタイルで使用する画像を、別の写真からリサイズ＆トリミングして保存する実装部分です。また、フォトフレーム画面も、元の写真からリサイズして保存しています。リサイズしてない元画像をそのまま表示させることも出来るけど、パフォーマンスが・・・。やはりリサイズして保存しておく方が早い。
7. カメラで撮影した画像が回転してしまう問題の対処
Windows Phone 7.5 のカメラで保存した画像は、そのまま使うと回転してしまうので、その対応を実装しています。
8. 時計表示
もちろん時計表示されます。これはトライアスロンのサンプルと同じかな。
9. Windows Phone をロックさせない
本アプリでは非常に大事な、表示したままロックや画面を非表示にさせない方法です。本来はゲーム用かな？
10. 全画面表示（上部の 電波・電池・時計 etc 表示を消す）
フォトフレームなので画面全体に写真を表示したいですよね。
11. Pictures とカメラから画像を選択 *
ChooserTask を使用しています。やってみればわかりますが、非常に大事なポイントがありましたので解説します。それさえわかれば簡単に使えます。知らないと画面設計を間違えて、後で変更することになります（なりました）。
12. People の顔写真を取得（未使用技術）
おまけで紹介するかもしれません。将来の機能追加のために調べたので。忘れてたらゴメンナサイ。
13. オンラインヘルプを開く
こちらも Web ページを IE に開いてもらうだけですね。
・・・
以上が、二つのアプリの全機能です。いかがでしょうか？
一部を除いて、ほとんどが一般的な技術の組み合わせで出来ていると思います。それらが実際にストアの審査を通って動いているコードとして見られることは、個別のサンプルコードより参考になるのではないかと思っています。
是非、第5回勉強会へご参加ください。よろしくお願いいたします。
コメント
