祝！最優秀賞！！！
— ながてち (@syobon_titech) 2017年7月15日
(※ 写真のブレは、喜び度を表しています。)
こんにちは。
HackU東工大2017チーム「Asutech」のtech部分を担当しました、nagatechです。
私たちは先日開催された「Hack U 東京工業大学 2017」にshowA,yasu,nagatechの3人でチームAsutechとして参加し、そこで「SnapRally」というAndroidアプリを開発・発表しました。
開発記を書いてたらいつの間にか長くなってしまっていたので、先に出来上がったアプリの紹介をしようと思います。
SnapRally
(画像は開発中のものです。)
タイトル画面です。
「すたーと」を押すと現在位置付近のマップが表示されます。「あるばむ」を押すと今まで撮った写真を見ることができます。
マップ上の地点を長押しすることで目的地を設定することができます。
目的地を設定した直後の画面です。
目的地を設定すると目的地までの途中(今回のハッカソンのテーマは「途中」)にピンがたちます。
このピンは人気のお店や施設の場所にたつようになっています。
ピンの近くに来ると写真が撮影できるようになります。逆にピンの近くまで来ないと写真が撮影できないようになっています。
写真を撮った直後の画面です。
ピンの色が変わってスタンプラリーでいうチェックポイントを通過したことになります。
一度写真を撮るとその場所ではもう一度写真を撮ることはできないようになっています。
これらを繰り返していき、最終的に目的地で写真を撮るとゴールです。
タイトル画面に戻ります。
開発記
それでは今回のハッカソンの開発記です。
7月4日(火)
開発スタート前の下準備として「どういうものを作るか」を話し合いました。
showAくんがAndroidアプリの勉強をしたいということだったので、作るのは「Androidアプリ」に決まりました。
とりあえず環境構築だということで、Android Studioをインストールしました。
7月5日(水)
HackU東工大2017、スタートです！
テーマは**『途中』**でした。なんて抽象的な...
とりあえず案出しスタート。
めっちゃ難航した
この時点で出た有力な案としてドライブ中に勝手に近くの名所をガイドしてくれるアプリの案がありましたが、調べたらすでにいくつかあったのでやめました。
その後、yahooの社員さんとかから案出しのコツとかを教えてもらいました。(自分として案を出すのではなく、もしも小学生だったら、お年寄りだったらって考えて案を出すと違う視点から案が出せて捗るらしい)
案出し再開
ここでテーマ『途中』が抽象的すぎるのがいけないんだという考えに至り、もっと具体的なテーマにしようとして**『途中』を『途中を楽しむ』にしました。**ここが良かったんじゃないかと思っています。
(字が汚くてごめんなさい...)
ここで「スタンプラリー」、「写真をキーに」という案が出ました。
yahooの社員さんがパパっと調べたらそんな感じのアプリはないらしい(新規性のアピール)かったので写真でスタンプラリーができるAndroidアプリを作ることにしました。
名前もスタンプラリーと写真からいい名前ができないかな～とか話し合ってたら写真→スナップという言い換えをすることで**SnapRally(スナップラリー)**といういい感じに韻を踏んだ名前を作ることができました。
7月6日(木)
この日は3人で集まり、全体の画面構成の仕様を話し合って決めました。
開発の分担も決めて、showAくんがカメラ、yasuくんが全体的なUI、僕(nagatech)がマップという分担になりました。
この日はマップをどうやって表示しようか、具体的に言うとGoogleマップをどうやって表示すればいいのかを考えていましたが、よく考えたらyahooのハッカソンだったのでYahoo! AndroidマップSDKを使うことにしました。
7月7日(金)
とりあえずyahooのマップをチュートリアルに従って起動してみようと努力しましたが「問題が発生したためSnapRallyを終了します」起動しませんでした。
原因が分からないままこの日は寝てしまいました。
7月8日(土)
前日のマップが起動しない問題の原因解明にいそしみました。
ググりforceを駆使していろいろ調べたら、どうやらマップを表示するための画像が入ったフォルダをいれる場所が間違っていたらしく、フォルダの場所を変更すると、無事にマップが表示されました。(思わずガッツポーズをしてしまった)
気分が良くなった僕はこっちの進捗を放り出して、Ichigojam第1期制作記 -explosion-というブログ記事を書きました。(読んで)
7月9日(日)
人生どうでも飯田橋で魔剤パーティー交流会に参加してました。(開発関係ない)
うっっわ pic.twitter.com/R2dHepgjCB
— ながてち (明日:☁|☀) (@syobon_titech) 2017年7月9日
大学の課題とかもやばかったので特に進捗はありませんでした。
7月10日(月)
Yahoo! AndroidマップSDKのチュートリアルにしたがって、現在位置が表示されるようにしました。
バイトとか大学の課題とかもあったので、その日の進捗はこれくらいでした。
7月11日(火)
そろそろ途中にピンがたつ機能が欲しいよな～ってなったので、Yahoo!ローカルサーチAPIを使うためにリクエストを投げる部分を作ろうと考えました。
いきなりやろうとすると挫折しそうだったので、まずは適当なサイトのソースコードが表示できるようにしようとしました。
しかし実行しようとすると...**「NetworkOnMainThreadException」**というエラーが発生しました。
ググったらこのエラーの原因がすぐ分かったのですが、簡単にいうと、Androidはメインスレッドからネットワーク処理を行うことを許していないらしく、非同期処理で行わないと取得できないらしいということが分かりました。
非同期処理の方法をググると、AsyncTaskを使う方法が一般的らしいということがわかり、使い方を調べましたが、いまいちよくわからず、2時間くらいふて寝してしまいました。
起きたらいろんなサイトを参考になんやかんややったらなんか実行できました。
水曜にみんなで進捗するために非同期処理用のデバッグ用画面とカメラ起動用のデバッグ用画面を作成して僕のその日の進捗は終わりました。
7月12日(水)
ひさしぶりにチズケ(図書館)で顔を合わせて進捗会。
ここでyasuくんにマップが起動しないという衝撃的な事実を聞かされました。
僕のスマホでは起動するのになんでだ～～～ってなってたらどうやらAndroidのバージョンが6.0以上だと位置情報を使うための許可をコードではなくスマホ側で決めるらしいということが分かりました。(僕のスマホはバージョン5.1.1だったので特に何もしなくともコード通りに動くというわけですね。)
なんか実装めんどくさそ～～うわ～～ってなってとりあえず無視！ｗすることにしました。(その後ちゃんと実装しました。)
僕は15時くらいから用事があったのでyasuくんとshowAくんにロゴ作ってほしいとかデバッグ用画面でカメラ起動できるようにしてほしいとかいろいろ指示を飛ばして僕の水曜の進捗は終わりました。
7月13日(木)
yasuくんが1日でタイトルロゴやアプリのロゴを作ってくれて神だと思いました。
この日はついにリクエストを投げて結果を解析する部分に着手しました。
最初はxml形式を解析しようと思ってたんですが、他のtraP部員から「解析するならjson形式がいいよ」というアドバイスをもらったので、json形式を解析することにしました。(結果的に正解でした、ありがとう。)
デバッグ用画面でおおおの近くのラーメン屋さんの情報を表示させたらこうなりました。
あとはこの情報をもとにマップにピンをたてるだけだったのでそんなに時間はかかりませんでした。(この時点で午前4時)
7月14日(金)
開発最終日
HackU開発最終日です！！！！！！！！！！！！！！！！ pic.twitter.com/hs3IQpdJI2
— ながてち (明日:☁|☀) (@syobon_titech) 2017年7月14日
魔剤おいちい
PM3:00
タイトル画面のUIを考えました。
なんかSnapっぽい画面がいいよね～って話になって、クリップボードに写真が張り付けられているイメージでタイトル画面作成をyasuくんにお願いしました。
PM4:00
ピンをタップするとお店の名前を表示して、撮影するかどうかをきくダイアログを作成しました。
ここでAPIでお店のジャンルを複数指定できることに気付いて、ラーメン屋以外で面白そうな施設を表示できるようにリクエストurlを更新しました。
PM6:00
あらかたピンまわりの作業がおわったので、いよいよ現在位置とたっているピンの位置関係でカメラが起動できるかできないか判定する機能の実装と調整に入りました。
おそとをぐるぐるまわって緯度経度を取得したり、実際に麵屋こころにピンをたててyahooの社員さん(女の人)と判定できるかな～とか言ってこころまで散歩したりしてました。
PM7:00
ここでshowAくんがカメラを起動できるようにしてくれました。
デバッグ用環境を参考に、マップ画面にカメラ機能を移植しました。
ここで、yahooの社員さんにそろそろ発表の概要を提出してほしいといわれました。
作品概要とかはパパっと書いたのですが、チーム名のよみがなだけ一向に決まりませんでしｔ。(チーム内で意見割れたし、yahooの社員さんでも意見が割れた)(いままでなんて呼んでたんだ)
このままではPM8:00までに決まらないのでTwitterに投げました。
Asutechの読み方
— ながてち (☁|☀) (@syobon_titech) 2017年7月14日
Twitterの投票の結果、チームのよみがなはあすてっくに決まりました。(すごくどうでもいい)
PM8:00
開発相談会終了
ひとりでチズケ2階に行ったらHackUの別チームである、チーム工学院の2人が進捗してたのでしれっとまざって進捗再開。
写真を撮るとピンの色が緑から紫になるようにしました。
PM9:00
図書館は閉館となりました(お知らせしないで)
仕方がないので3人でマックに行って続きをやることにしました。
PM10:00
目的地で写真を撮るとゴール画面が表示されるようにしました。
PM11:00
アルバム画面をぱぱっと作りました。
AM0:00
細かいところ(達成率の実装とか)をやりはじめました。
デバッグ用環境を消して、デモンストレーションモード(かっこいい)を実装するなど、本番のデモ用の準備をしました。
AM2:00
そろそろプレゼンテーション作らないとな～とか思ってた矢先にyasuくんがスライドのプロト版をあげてくれて本当に神だと思いましたありがとう。
いろいろ修正して、この日は5時に寝ました。
7月15日(土)
発表本番日
PM12:00
迷ったあげく、無事にyahoo本社に着きました。(yahoo本社、すごく広かったです。)
この時点で、SnapRallyはおおかた完成していたのですが、実は写真を保存するという機能はまだ完成していませんでした。
しかし、ぶっちゃけ僕の担当部分ではなかったのでshowAくんとyasuくんが頑張ってるなか、作品のアピールカードを書いたりして暇をつぶしていました。
PM1:00
ここでスライドを前日のうちにある程度作ったはいいが、未完成な上にアニメーションをつけてないことを思い出しました。
急ピッチで作成した結果、本番10分前に完成させました。
PM2:00
本番開始
発表練習を一回もせずに臨んだんですが、なぜか時間ぴったりに発表が終わりました。
yahooの社員さんからも、ゆっくりで聞き取りやすかった～とお褒めの言葉をいただきました。(ほんまか)
PM3:00
デモンストレーション開始
この時点でまだ保存機能は完成していませんでした。
僕がデモを一手に引き受けている間、yasuくんとshowAくんが必死に頑張った結果、デモ時間中に完成しました。
PM4:00
表彰式
最優秀賞に選ばれてしまいました。
ここらへんの記憶は正直あまりないです。
PM5:00
懇親会
yahooの社員さんのLT(Lightning Talks)を聞くことができました。
データベースの話はとても参考になりました。
そしてHackU東京工業大学2017終了。お疲れ様でした！！！！！
その後
HackUの発表スライドにこころ使ったら最優秀賞がとれたので、記念にこころで写真を撮りました pic.twitter.com/ZiZPfSU3iT
— ながてち (明日:☁|☀) (@syobon_titech) 2017年7月15日
反省・感想
今回の最優秀賞の一番の要因は「アイデアがよかったこと」だと考えています。審査委員の講評にもあったのですが、他のチームは時間的な「途中」を題材にしたものを作ったなか、うちのチームだけ空間的な「途中」を題材にしてアプリを作ったということが高評価だったようです。「途中」という抽象的なテーマを勝手に「途中を楽しむ」と少し限定的に解釈してアイデア出しをしたことが良かったと思います。
また、仕様を最初の方でほとんど固めて、3人のチームメンバーの役割分担をきっちりとして、それぞれの予定に合わせて開発できたのもよかったと思います。
最後に、この記事を書きながら思ったことなんですが、このAndroidアプリが実質スタンプラリーをするゲームだということに気付いたので、traPとしてゲームで最優秀賞をとれたことがとても嬉しいです。ありがとうございました。
