2018年夏のMasala

どうも、大学を卒業した身ですが東京工科大学CreApp主催のハッカソンMasalaに参加してきました。

今回のMasalaのテーマはrainでした。

rainについて考えてみる

ブレインストーミング

チームは新卒1年生の僕と学部1年生の高橋君の2人です(途中で助っ人が何人か増えました)左端に少し写っているのが僕です。

rain → 雨をテーマにブレインストーミングしました。

候補に挙がっていたのはこんな感じです。

【アプリ作成案候補】

・カエルが雨の中障害物をよけながら進むゲーム(画像中央下辺り)

・花嫁を育てる育成ゲーム(画像左下辺り)

・蜘蛛の巣に雨を付着させるアプリ(イラストなし)

候補は3つの案が上がったのですが、どれもしっくり来ませんでした。

全体の話をして雨=憂鬱という意見が挙がっていたので、憂鬱をなすくアプリについて考えました。

雨の日には基本的に外で遊ぶことはできません、そのため雨の日に楽しくなるようなタスクをこなすタスクアプリを作成することになりました。

通常のタスクアプリでは、決められた日にタスクを消化します。

このアプリでは雨が降ったら登録したタスクが現れます。

晴れの日はタスクを登録するだけでどんなタスクを登録したのかも見ることができません(タスクがたくさんあると憂鬱になるので)。

雨の日だけタスクをこなすようにすればいつやるか決まっていないので気が楽です。

しかし、雨の日でもタスクをこなすのがどうしても嫌な時もあります…

そんな時は雨に流して憂鬱な気分を取り去ります!やらなくていいんです!雨に流して忘れましょう。

画面遷移

今回のあぷりは画面遷移図についてかなり悩みました。

初期に考えていた遷移図は画像のように遷移の多いものでした、説明があり、タスク一覧を確認でき登録したタスクの編集もできる…などなど

ブログに載せるつもりじゃなかったので綺麗じゃないですが初期の画面遷移図はこんな感じです。

初期の画面遷移図

ユーザのためわかりやすく!便利に!と考えて暴走していました。ユーザのためと言いつつ自分の意見を押し付けていた気がします。

本当に実現したいのは

雨の日にタスクをやる!やらなくてもいい。

これだけでした。シンプルにシンプルにと修正を行った結果3つの画面に収めることができました。

画面遷移図修正版

処理の流れ

1.OpenWetherMapから天気情報を取得

2.雨だったらタスク登録されている場合タスクを表示
2.晴れだったら晴れの画面を表示

3.タスクが登録されたらアプリ内に保存する

3.流されたら削除する

こんな流れです。言葉だとすごいわかりにくい…

今回苦しんだのはOpenWetherMapからデータを取得する部分でした。どれくらい苦しんだかというと13時間苦しんでいました

OpenWetherMapから天気情報を取得

無料天気予報APIのOpenWeatherMapを使ってみるこの記事を参考にしてOpenWetherMapのキーの取得などを行いました。

今見ると、JSONへの変換もこのサイトでやってくれているようなのでそれを参考にすれば天気情報を取得できそうですが、ハッカソン中の私は頭が回らず苦しんだ末JSONでの取得はせず文字列でデータを取得をしました。

let myhtml = getHtmlData(url:"http://api.openweathermap.org/data/2.5/weather?q=Hachioji&appid=取得しAPIキー" )
        
        //openweathermap()
        if(myhtml.contains("rain")){
            setRain()
        }else{
            setSunny()
        }

rainと言う言葉は天気の部分にしか入ってこないことがわかったので雑ですが、文字列で判定を行なっています。

地域が八王子固定なのもハッカソンなので許してください…

はれのひ

晴れ画面
タスク追加画面

晴れの時の画面はすごくシンプルです。

真ん中に追加ボタンがあるだけでタスクの追加以外の処理はできません。

タスク追加画面は晴れの日も雨の日も共通でテキストと画像が保存できるようになっています。

あめのひ

雨の日画面
タスク追加画面

雨の日は登録しておいたタスクをが表示されます。

画面上の3つのボタンの機能はこんなかんじ

・リロード

・雨に流す

・追加

雨の日の機能紹介動画

いい感じの画像がなくてしどろもどろしていますが、画像ライブラリが開いているのは画像の追加ボタンを押しているからです。

あとリロードだけ取り忘れてました。

icon作ってもらった

インドネシアの大学にゲームのハッカソンをしに行っている先輩にiconを作ってもらいました。(忙しいところありがとうございます。)

候補の案を4つ出してもらいましたが、左上のシンプルな傘のアイコンを採用することにしました。アプリもアイコンもシンプルに!!

ソースコード

ソースコードはgithabにあげているので、よかったら動かしてみてください

ソースコード