はじめに

もういくつ寝るとマチ★アソビ。

マチ★アソビ

当ブログでもしばしば話題にしている、徳島で行われる年2回のガチイベント。

僕が徳島を好きな理由として、このイベントがあることは理由の1つとして挙げられると思います。 （他にもちょっと常軌を逸した県民性とかも好きですがまぁそれはそれとして）

こうどなじょうほうせん

マチ★アソビは、とにかく情報戦が激しいのです。 イベントが近づいてくる今現在のところ、まだイベントの情報開示は半分も終わってないと思います。 そういう情報をすぐさまキャッチするために、Twitterなどのツールを使って情報を集めなければなりません。

情報を集めて整理すること

集めた情報は整理しなければなりません。 具体的には・・・

  • どこで何が行われるのかを把握する
  • それを一覧管理する
  • そのなかで行きたいものをピックアップする
  • 当日には節度を守り体調管理を充分に行いイベントを楽しむ

ぶっちゃけ上記2点はマチ★アソビのフライヤーが公開されればOKなのですが、そのフライヤーの情報は、場所ごとのイベントが列挙されているだけ(これだけでも価値ある情報です！)となります。 まぁ慢性的なリソース不足だったりで難しいのは知っていたので仕方ない感じです。

ともあれ、僕がずっと欲しかったのは、「このイベントの裏番組なんだっけ」を一望できることでした。 そんなわけでマチ★アソビvol11くらいから色々思案していたものがやっと形になったので公開します。

マチ★アプリ

「ないものは作れ！」の精神で制作しました。構想2年、制作2週間。

現在は評価段階のベータ版として公開しています。 そのため、表示されている情報は「マチ★アソビ vol.11」の内容です。 マチ★アソビの前夜祭が24日ごろに行われるので、そのあたりからvol.12モードに切り替えようと思います。

マチ★アプリでできること

  • イベントの日別表示
  • 左にスワイプ(画面左上の[三]をタップ)して表示される表示ON/OFFパネルを切り替えることで、会場ごとのイベントの表示/非表示を切り替えることができます
  • 例えばボードウォークは興味ないね！って人はチェック切れば消えるので可視性UP
  • 公式Twitter、ハッシュタグの確認
  • 画面右上の鳥アイコンをタップすると表示されます
  • 画面下部のタブを切り替えて表示を切り替えます
  • ハッシュタグページでは、画面下部の入力ボックスみたいなのをタップするとツイートできるっぽいです

実装したいなーって思ってるもの

以下はまだ実装してないのですが、なんとか頑張って実装したいですね。。

  • イベントをふぁぼる
  • 行きたいイベントをタップしてお気に入りに追加
  • お気に入りに追加したイベントだけを表示する機能
  • ふぁぼを集計して人気のあるイベントとか事前に確認できたら楽しそうだけど、一気にめんどくさくなる雰囲気 is ある

技術的統括

苦労した点

画面を左から右にスワイプすると、カレンダーの表示ON/OFFスイッチが出てきます。このスイッチの切替でカレンダー部分のデータが切り替わるロジックがけっこうきつかったです。 使用しているカレンダーライブラリがデータをチェックしているのですが、そのチェックをすり抜けるようなデータ操作をすると想定外の動きをします。 なので、データ操作する部分は気をつけて（そして時にまわりくどいような）データ操作を行うようにしました。 これに気がつくのに結構かかった。。。

OnsenUIについて

いわゆるモバイルUIフレームワークとしてOnsenUIを採用しました。

最近はIonic Frameworkが結構人気っぽいのですが、あえてOnsenUIを選んだのは、まぁAndroid Bazzar and Conferenceで色々とお話を聞いたからという。

使い勝手に関して、割と素直ではあるのですが、CSSとして提供されているけどComponentがないケース(ButtonBarとか)があって、そこはやや苦労しました。 あと基本的にDirectiveのコードは読まないと何やってるか理解できなかったり、うまくUIを構築できなかったりしますね。。 あんま良い考え方ではないですしOnsenUIに限った話ではないですが、せっかく楽するためにフレームワーク選んでいるのに、なんかあった時に実装まで掘るの、ちょっと手間だなぁとは思います。

色々言ってますが、HTMLで実装できるくせに(とあえて書く！)サクサク動くのは時代の進歩すげーなぁと思いました。

(ちなみにカレンダー部分は重い、これは仕方ないね)

github

PullRequestやご意見などあればどうぞー。

まとめ

マチ★アソビ楽しみですね