いなかソンin南島原のときにOnsenUIで作ったアプリについて

シェアする

この記事は『Onsen UI Advent Calendar 2016』の4日目の記事として書いております。

ジャスティス岡本です

先日、長崎県の南島原市が主催する『いなかソンin南島原』というアイディアソン・ハッカソンイベントがありました。渡航費と宿泊費が無料で各3日間、合計6日間も南島原に行ける、大変お得なイベントだったのでOnsenUIで何か作りたいと思い参加しました。

%e3%83%95%e3%83%aa%e3%83%bc%e3%82%bd%e3%83%bc%e3%83%a1%e3%83%b3%e5%8d%97%e5%b3%b6%e5%8e%9f%e3%83%bbjst_%e3%82%b5%e3%83%a0%e3%83%8d%e3%82%a4%e3%83%ab

アプリ名:ジャスト・ソーメンタイマーJST

ソーメンをゆでるための時間をカウントダウンできる夢のアプリです。ソーメンは他の麵に比べてゆで時間が短いのですが、おまけにメーカーによってゆで時間が異なるという事情がありました。そこでメーカーに応じた適切なゆで時間をAPI取得してカウントできるタイマーを作ることにしました。

短いのはソーメンのゆで時間だけじゃない!ハッカソンの時間も短いのだ

OnsenUIのタブバーを使うことでアプリの見た目はすぐに用意することができたのですが、プログラミングの時間が思いのほか割けずに苦労しました。一番の原因は発表を通常のプレゼンスタイルではなく『ショートムービー』つまり動画にしたことです。『ジャバスクリプト』を書きたいのに『動画のスクリプト(台本)』を書くはめになったわけです。

小さいアプリの開発はVue.jsでスピードアップ

そういった混乱の中で急いで作品を作らなければならないとしても、生のJavaScriptだけでデータを扱うのは大変なのでフレームワークとしてVue.jsを使いました。Vue.jsならデータバインディングができるので、タイマーの時間をAPIで取得したりカウントダウンしつつ画面に表示するといったときに、考えることを減らせるので効果的でした。

ハッカソンでOnsenUIとVue.jsを使おう!

OnsenUIでアプリの見た目を作ってVue.jsで機能を作りこむというのはハッカソン向きだと思います。フレームワークを使うと通常はフレームワークの学習コストが高くつくので短い期間の開発やハッカソンのようにメンバーのスキルにバラツキがある場合には導入しにくいですがすがVue.jsなら数時間さわれば何とか使えるので、ハッカソンでも導入が可能です。OnsenUIに関しても他のメンバーがMonacaのチーム共有機能から入ってCSSを勝手にちょっと弄って体裁を整えるようなことが可能だったので効率は良かったと思います。

Monacaはハッカソンのツール協賛をしています

Monacaはハッカソンイベントのツール協賛を行っているのでお気軽にお問い合わせください(審査あり)。

Onsen UI Advent Calendar 2016

『Onsen UI Advent Calendar 2016』の参加者を募集しておりますのでお気軽にご参加ください!

12月5日はrururu3さんの記事『OnsenUI一ヶ月ほど触った感想をつらつらと』が公開されました。