【Microsoft Student Partners アプリ開発録】「EventReader」 by MSPフェロー 西脇雄基

こんにちわ、MSPフェローの西脇です。
開発録って何書けばいいんだろう？って感じの西脇ですがもしよかったら少しの間お付き合いください。

まずアプリ開発の話をする前に、
Window ストアアプリってなんだろう？JSとHTMLで作れるらしいけどイメージ湧かないな〜って思う人が多いと思うんですけど。
そういう人はまず「https://msdn.microsoft.com/ja-jp/library/windows/apps/br211385.aspx」ここの３つのセクションを読んで実際に作ってみてください。この３つのセクションを終えたら JS や HTML に精通していない人でも Window ストアアプリがどんなもんか分かると思います。

 

 続いて、今回私が作ったアプリの話に移りたいと思います。
まずどんなアプリを作ったのかっていう話から
簡単に言うとイベント情報を取得するアプリです。
今までのイベント検索ではイベント情報を自発的に検索する必要がありました。
例えば、Ruby, Python, Windows8 この３つのイベントを検索するときは、３回検索を実行しないといけません。それに、検索するたびにそれらを入力しなければなりません。
しかし、このアプリでは、あらかじめ興味のあるキーワードを登録しておくことで、それらに関するイベントを探して表示してくれます。

つまり、このアプリを開くとすでに興味のイベント情報に出会えるってことですね。いや〜便利ですね。

次に
アプリ開発の期間ですが、ロジック１日、デザイン３週間ぐらいです。
まぁロジックといっても大したことはしてないですけどね、
キーワードでイベントの API を叩く
↓
取得結果を List に詰める
これだけです、たったこれだけでも少し工夫すれば、アプリになるんですね。

またグリッドテンプレートを使っているので data.js のところにロジックを実装すればこれだけでも一通り動作するアプリができます。
ただ、やはりこれだけではいろいろと不都合があるのでいろいろと変更が必要になりますがこれだけでも作る喜びは感じられるのではないでしょうか。
ロジックの実装で少し苦労したのは Promise の扱いですね、非同期プログラミングをあまりしたことがなかったので理解するのに少し苦労しました。
ロジックが出来たあとは、ひたすらビュー（HTML,CSS）の仕様を読み解いていました。
ListView を使っているとき実際に生成されている HTML を見てみたいということが多々あります、そんなとき VisualStudio の DOM Explorer を使うと確認できるので、今でも非常によく使っています。
デザインに関しては、テンプレートを使ってどれだけ個性を出せるかというところは結構工夫をしました。

スナップビューのときにどの情報を削りどの情報を残すか、フルで表示されているときとスナップビューのデザインとの互換性など、
フルで表示されているときとスナップビューの互換性とは、フルで表示されている時のデザインとスナップビューのデザインがガラっと変わってしまってはユーザーに同じ情報と感じさせにくいと思うので出来る限りそこに気をつけました。
またスナップビューのときすべての情報を載せようとするとどうしても、見づらくなってしまうのでどの情報を削るかなどに気を配りました。

役に立ったリソースに関しては、みなさんと同じで
デベロッパー センター https://msdn.microsoft.com/ja-jp/windows/apps/default
非常によくまとまっています。
ただ、情報が非常に多いので目的のものを探しだすのに時間がかかることがあるので、興味のあるページを見つけたら自分なりの注釈を付けてURLを保存したりすることをオススメします。
私は、これからも見に行きそうなページはノートにまとめています。こうするだけでも後で見返すのが非常に便利になりました。

以下ノート抜粋。

グリッドレイアウト（CSS3)について
https://msdn.microsoft.com/ja-jp/library/ie/hh673533(v=vs.85).aspx
リストビュー
https://msdn.microsoft.com/ja-jp/library/windows/apps/hh465449.aspx
グリッドレイアウトテンプレート(リストビュー）
https://msdn.microsoft.com/ja-jp/library/windows/apps/hh770105.aspx
テンプレート関数
https://msdn.microsoft.com/ja-jp/library/windows/apps/jj585523.aspx    
ライブタイル
https://msdn.microsoft.com/ja-jp/library/windows/apps/hh465439.aspx
ライブタイル、使用可能テンプレート一覧    
https://msdn.microsoft.com/ja-jp/library/windows/apps/windows.ui.notifications.tiletemplatetype.aspx
定期的なタイルの更新
https://msdn.microsoft.com/ja-jp/library/windows/apps/hh761476.aspx
タイルのプッシュ通知に関する記事
https://msdn.microsoft.com/ja-jp/library/windows/apps/hh465435.aspx
タイル定期的な更新（ポーリング）
https://blogs.msdn.com/b/windowsappdev_ja/archive/2012/04/24/10297318.aspx

今後のアップデートは、複数のイベントサイトに対応させたいと思います。
このイベントサイト対応させてなどご要望があればぜひお聞かせください。

最後に
今まで Windows のアプリを作るというとやっぱり「難しそう」とかそういうイメージが強かったと思います。
しかし、Windows ストアアプリはそんなことはありません。本当に簡単に作れます。
Javascript と HTML の基礎知識だけでも十分作れますし、API が非常に充実しているのでコントラクトの実装なども数行付け加えるだけで実装できます。
まずは Windows ストアアプリ開発にハードルを感じる方も
「https://msdn.microsoft.com/ja-jp/library/windows/apps/br211385.aspx」この３つのセッションから初めて Windows ストアアプリを一緒に開発しましょう！

  

開発者の紹介

自己紹介 芝浦工業大学３年 ハッカソンやら勉強会が好きなので結構いろんな所に出没します！！ もし見かけたら、気軽に声かけてください。 Facebook : https://www.facebook.com/uki.nishiwaki Twitter: @ukinau

 

アプリ種別	Windows ストア アプリ
アプリ名	EventReader
ストアURL	https://apps.microsoft.com/webpdp/ja-JP/app/eventreader/d48ba964-b9fd-4fd1-b1c4-de88b8902aaf
概要	ブログフィードリーダのようにイベント情報を管理するアプリ「EventReader」
想定ユーザー	イベントに積極的に参加する人
開発言語	Javascript+HTML	開発日数	2〜3週間