表題の通りですが、以前から作成していたWindowsストアアプリ、サークルタイマーがWindowsストアに公開されました。www.microsoft.com
このアプリは説明文の通り、Windows8.1にプリインストールされていた、タイマーアプリを模したタイマーアプリです。画面上に輪っかが表示され、制限時間までの経過具合がわかるようになっています。youtu.be
また、指定時間経過後超過時間タイマーを設定することができます。これで、時間を超過したときにそれから何分経過したのかを表示することができます。
作成動機
さて、自分は日本Androidの会横須賀支部のお題トークで、Windows8.1のタイマーを使用していました。当日のイベント動画などをみると1分タイマーにこれを使っているのがわかると思います。youtu.be
ただ、このタイマー。Windows10になって円のサイズが小さくなり、ボタンに線が表示されるだけになってしまいました。
もともとこのタイマーアプリ、お題トークでの利用に必要な1分超過後の経過時間表示などに対応していなかったので、もともといつかは自作アプリと差し替えるつもりでしたが、手持ちのPCが全部Windows 10になった今、いよいよ という形になります。
Apache Cordova
このアプリ、今回使った開発環境、Visual Studio 2015から搭載された、Visual Studio Tools for Apache Cordovaを使って作成されています。
そのため今回のプログラムは、ほとんどの部分はHTMLとJavascript、CSSだけで書きました*1。github.com
なぜCordovaか
なぜC#でのアプリ開発を覚えた後に、あえてCordovaを選んだかというと、理由は二つ
一つ目の理由は割とそのままですが、Windowsストアアプリで出したもののうち、とても反響がよかったものなど、場合によってはAndroid版など、クロスプラットフォームで展開する可能性があるものをいくつか考えています。
そういったものを作る上で、今の自分にはAndroidJavaやそれぞれのOSの癖、注意点などを覚えている暇がないであろう というのがあります。
そのため、それぞれの環境で最大の能力は発揮できないにしろ、ちゃんと動くアプリが作れる、HTML5ベースでアプリを作っていこう と思ったのです。
二つ目の理由について。実は自分は、今までにも少しだけWindowsストアアプリを作っています。www.microsoft.com
ここで感じたのは、とにかくアプリを複数のスクリーンサイズに対応させるのがめんどくさい ということ。
C#の場合、UIの作成にはXAMLという、HTML+CSSのようなフォーマットを使用します。
やっかいなのは、これがすべてのウィンドウサイズで一つしか指定できず*2、リサイズ時の動作はすべてXAML内に書き込まなければいけないということ。
そのかわりWindowsっぽいUIを簡単に設定できたり、簡単なアニメーションをBlendを使って定義できたりと、強力なことはできるのですが、ちょっと自分にとってはXAMLを扱うのが困難すぎる ということで、断念しました。
HTMLならいちおうおんぷ村の作成やそのほかサイト作成で何度もいじってるし、CSSもそこそこ理解しているのでたいていのことはできますし。
ライブラリ
また、ライブラリとして使用したものは、以下の二つ。
サークル部分はグラフィック作成用言語、ProcessingのJavascript版、Processing.jsを使って描画しています。このため描画処理やその周りは比較的容易に作成することができました。
また、UIライブラリとして使用したWinJSは、昔からあったWindows+Javascriptアプリ作成用のライブラリなのですが、バージョン3よりクロスプラットフォーム対応したということで、今回はUIライブラリとして使用することにしました。
作成に苦労した点
今回の作成でもっとも苦労したのは、Apache CordovaでWindowsストアアプリを作成するための独自設定周り。
Apache Cordova自体は割と昔からあったツールなので情報はそこそこ豊富にあるのですが、Windowsストアアプリを作成するための情報がとにかく少ない。そのため関連しそうな情報を集めてから試行錯誤することで、ようやく完成までこぎ着けたという感じです。ただ、苦労した点の多くは今後も応用が利きそうな部分なので、今後はもう少し楽にアプリを作れそう。
