■
まえがき
FUN AdventCalendar 2021 12/18 adventar.org
おはようございます。うらたです。プロジェクト学習で得た知見で何か書きたかったので、書きます。
昨日は、タキガワ先生の最後のお言葉でした。
自己紹介
私のことを知らない人のために念のため自己紹介。知っている人は読み飛ばしていいよ
技術垢ではAtaruという名前でやってます。逆から読んだらUrataです。つまりうらたです。
所属は公立はこだて未来大学 システム情報科学部 情報アーキテクチャ学科 情報システムコースの3年。2年の時に必修落としたため、いけそうだったICTへの道を閉ざしました。みんな単位とろうね。
普段はRubyやRailsを触っています。Rubyで開発したWebで動く簡単なゲームもあるので良ければ触ってみてください(スマホ非対応)
プロジェクトではAndroidアプリの開発をしていましたが、去年のハッカソンでしか触ったことがない初心者。kotlinナニモワカラン - 去年のハッカソンの様子はこちら
趣味は酒を造ること。飲むこと。夏は釣り。冬はスノーボード。とにかく楽しいことが大好物。
人生エンジョイ勢
以上。
本題
さて、本題に入りましょう。 皆さんは何かを作るとき、開発するとき、どのように実装を進めますか？ 私は、実装したい機能と言語やフレームワークで検索をします。 例えばAndroidでMap機能を実装したいと思ったときは『Android kotlin マップ』などと調べたりします。
たいていのことは『機能 言語/フレームワーク』で調べたいことを調べることができるのです。
つまり重要なのは機能の名前がわかること、というわけです。
そんな中、プロジェクト中に困った機能がありました。それが、こいつ。google mapの周辺スポットが表示されている部分。
誰もが見たことあるであろう、下からにゅっとするやつ。
当然このように調べたとて、欲しい情報を得ることはできません。
皆さんはこいつの名前、知っていますか？
Bottom Sheet
Bottom Sheet それが、今回私を苦しめた下からにゅっとするあれの名前です。
google mapのようにしたから少し出た状態で、MAPが操作できる。さらに画面いっぱいに広げることができるものが通常のもの。
下から出てきて少し暗くなるものをモーダル型といいます。
モーダルに関しては下から出てくるものだけではなく、画面中央に表示されるポップアップなども含まれます。
最後に
実装したいものがあるのに名前がわからない！今回は私が困らされた下からにゅっとするアレについて紹介しました。
皆さんも開発するとき、名前がわからなくて詰まることもあるでしょう。調べ方を変えてみたり、同じ実装をしているものについて調べてみたり、色々とアプローチしてみてはいかがでしょうか。
今回はUIコンポーネントというものについて調べ、bottom sheetというものを知ることができました。
皆様の今後の開発に役立てることができれば幸いです。
Funlocks 備忘録
Funlocks参加しました。
Funlocksという公立はこだて未来大学で行われた学内ハッカソンに参加しました。 備忘録を残しておきます。
FunLocks 概要
日時
12月13日~12月19日の１週間で行われました。開催前にも今回の開発で使うことが推奨(?)されているGit/Githun, Andoroid, iOS, ビーコンの勉強会も行われました。
テーマ
今年のテーマは
「コロナ禍に大学などで使いたいプロダクト」
今年一年私たちを苦しめてきたCOVIT-19。その感染拡大が止まらない中、『大学など「人が多く集まる場所」の問題を情報技術で解決するようなプロダクトを開発する。』というのが今回のテーマでした。
集まれ小人共
正直なところ、私はこのハッカソンにでるつもりがなかった。というか、このテーマを見たときに出るのを敬遠してしまっていました。 しかし、チームリーダーYの声掛けにより、ハッカソンに参加し、よい経験を積むことができました。
そんな前置きはさておき。私は、
小人-19
- 小人Y(リーダー)
- 小人T
- 小人K
- 小人S(自分)
この４人で今回の開発をしました。 チーム名の由来は、読めばきっとわかるはず。 (以下、小人略)
Amabie Project
アイデアソン
今一度、今回のテーマを再確認しておきましょう。
「コロナ禍に大学などで使いたいプロダクト!」
COVID-19など感染症の拡大を踏まえ、私達はインドア・ロケーション（屋内位置測位）技術に着目しました。現在学内に設置されているQRコードや、BLEビーコン、Wi-Fi CERTIFIED Locationなどのインドア・ロケーション技術をヒントに、大学など「人が多く集まる場所」の問題を情報技術で解決するようなプロダクトを開発してください。引用：FunLocks
重要なのは
- 密を回避すること。
- 大学などで使いたいということ
何を作るのか。どんなものを作るのかという時に、小人共が出した答えは『アマビエ』でした。
キャラクターで親しみやすく
コロナ禍で一躍有名となったアマビエを知らない人もいると思います。
アマビエとは疫病を防ぐことができると言われている日本の妖怪のことです。
アマビエを用いて親しみやすく。そして、カジュアルに使えるソーシャルディスタンス喚起アプリ。それが、、、
Amabie Project
です!!!
開発技術
今回の開発で用いたのは
- Kotlin
- Android Studio
- Altbecon
- Live2D Cubism
の４つ
チームメンバーは誰もAndroidの開発はしたことがなく、ビーコンについてもよくわかっていない。勉強会で少し触ったことがあるくらいの初心者でした。
こだわりぬいたユーザーインターフェース
下の画像が今回私たちが開発したAmabie Projectの画面です。
このUIをYと私で行い、要ともいえるアマビエはすべてKによる手書きで作り上げました。 このUI、特にアマビエは多くの人たちの心をつかんだと思います。発表したときの盛り上がりからそれを感じました。
なにしろこのアマビエ、動くんです。しかもヌルヌルと。この後説明するこのアプリの機能によって、表情を変えたり、タップすると跳ねたりするというとても愛くるしい仕草を見せてくれるのです。
アマビエの周りにある各種ボタン、テキスト、それを囲うものもこのアプリから全く浮くことなく親和しています。 古風なアマビエが浮かないように。逆にアマビエが薄れてしまわないように、それぞれに配置する素材を考え、作成しました。
その結果、このアプリはUIデザイン賞に選ばれました!!! 本当にありがとうございます!
機能
UIが大変すばらしいAmabie Projectですが、機能面も優れています。 このアプリは、このアプリをインストールしているほかのスマートフォンを感知し、その距離を計測。さらに、近くにいる人数、その合計をカウントしてくれます。(要ともいえる機能のほとんどをTが開発してくれました。マジで感謝!)
距離が近ければアマビエは怒ります。
距離が程よく離れていれば注意喚起をします。
周りに人がいなければ喜びます。
密を回避することでアマビエが喜ぶわけです。某COC〇Aなんかは、感染者と接触したら通知をするというものであり、行政機関が開発したものなのでお堅いイメージがあります。親しみも持ちにくく、積極的に使いたいとは正直思えないでしょう。
しかし、このアプリならば、親しみを持つことのできるアマビエの表情の変化を楽しみながら、密の回避につながります。
近くにいる人数と一日で接触した人数の可視化によって、より密回避に努めるようになるのではないかと思います!
共有機能では、自分のアマビエの様子をTwitterにシェアすることができます。このアプリを使っているユーザーだけではなく、使っていないユーザーも思わず使いたくなってしまうわけですね！
そして、今回私が開発した設定機能。 設定できるのは自宅や学校を登録する地点登録。登録した地点についたときに手洗いうがいを促す通知をする機能の2点です。
地点登録では、google mapのAPIを使用して地図を表示、位置情報を取得し、自分の指定した座標に名前を付けて保存できるようにしました。 通知機能は上で書いた通りですね。他に追記することはありません。
感想
今回初めてのAndroid開発を行いました。普段はWebアプリの開発しかしていないので、スマホ系アプリの開発をしたのは約１年前にiOS開発をしていたのが最後でした。
もちろん、iOSとAndroidとでは全く勝手が違うため、知らない技術を１から学び、そして形にできたことはとてもいい経験になりました。タスクの管理をしっかりと行い、ある程度区切りをつけて開発をすることができて、とても楽しい開発期間でした。
アプリを完成までもっていって最優秀賞、優秀賞、企業賞のいずれももらうことはできず、正直悔しかったです。ですが、特別賞のUIデザイン賞をもらえたことをとてもうれしく思います。このアプリが認められたという気がしました(完成させたことも評点に入れて欲しかった)
改めて、今回誘ってくれたY、および小人-19のメンバー。今回のハッカソンを運営していた大都皆様、本当にありがとうございました！そして、お疲れさまでした!
次回は運営側もやってみたいな。・・・なんてね。
初めてのハッカソン～I will give you all my code～
2019年12月7日～15日まで行われた学内ハッカソンに参加したので、書いていきます！
参加したもの
今回、私はp2hacksという育成型ハッカソンに参加してきました。 1チーム３名～5名程度、全部で12チームが参加しました。 育成型ということで、私も友達2人とチームを組み、チーム開発の経験を得ることにしました。
ハッカソンのテーマ
この時期にハッカソンが行わられるということは、、、そう！
"クリスマス"でした！
クリスマスをテーマにアプリケーションを開発するというのが、今回のハッカソンです。
つくったもの
いろいろな要素がある『クリスマス』の中で、私たちが注目したのは、ズバリ『クリスマスツリー』！
読者の皆様の中にも、押し入れからツリーを取り出して家族とともに飾りつけをした。そのような経験をお持ちの人もいるのではないでしょうか。みんなで１つのツリーを装飾する。楽しかったですよね？ね？
しかし、歳を重ねるにつれて、そんなこともしなくなりますよね。ましてや、一人暮らしの大学生がツリーを買うこともないでしょう。
けど、私たちにはインターネットという文明の利器があるのです！
と、いうわけでだいぶ前置きが長くなりました。私たちが開発したのはこちら！
僕らにはインターネットがある・・・！
ということで、私たちが開発したのは、”オンライン上で一つのツリーをみんなで飾りつけをする”アプリケーションです。（完成には至らなかったので、以下こうしたかった！という理想が含まれます)
まず、リンクを開くと1枚目の画像が表示されます。 ツリーが２つありますね？２つのうち、ユーザーが編集するのは右側のツリー。左側のツリーは、他のユーザーが編集した最新のツリーが表示されているのです！ ツリーの編集方法はいたって簡単。"セーブ"ボタンの下にある青いボタンをクリックすると
好きなデコレーションを一つクリックして、左側のツリーのすでにデコレーションされておる場所をクリックすると、装飾できます。
最後に、ツリーの下にあるセーブボタンを押すと、この編集がデータベースに保存されて右側に保存される。 大事なことなのでも一度書きますが、ツリーの下にあるボタンを押すとデータベースに保存されます。 右側のセーブボタンは、残念ただのダミーさ、、、。
と、まぁ、個人で編集したツリーを集めようというアプリです。
実装できたのは、デコレーションをデータベースに保存するところまででした。
つまり、右側のツリーはいつまでたってもベルが飾りつけられたまま変わらない！
開発まわり
React? js? Firebase? ナニモワカラン。
メンバーのうち２人がフロントエンド、私がバッグエンドを担当しました。 Reactを主として使い、データベースや本番環境へのデプロイはfirebaseを使いました。 両方とも今回のハッカソンで初めて触ったので、ナニモワカランの連続。 『画像をデータベースに保存して、保存された情報を左側の木に表示する』 説明するのは簡単なんですが、その機能の実装だけができませんでした。辛い。 時間も足りず、完成までたどり着けなかったのはとても悔しいです。 事前知識なしで開発に挑むのはさすがに無謀すぎました。
反省点
計画性
これがまるでなかったのが今回の反省ですね！ 何を作るのかを決めた段階で、技術検証を行い、何が適しているのかをしっかり決めることが必要に感じました。 と、言っても何が最適なのかわかるほどの知識がなかったため、今回はしょうがなかったのかなぁ。。。タスク管理
いつまでに何をするのか。これを明確化できず、同じようなことをいつまでも繰り替えしてしまいました。 ハッカソンそのものの締め切りとは別に、タスクごとの期限を設けて危機感を持たせる必要があると思いました。
全体を通しての感想
初めてハッカソンに参加して、チーム開発についても学ぶことができました。チーム内でわからないところは教えあい、高めあうことができるというのは、チーム開発のいいところだなって思いました。githubの使い方や、React, js, Firebaseといった触ったことのない技術に触れたことはとてもいい経験になりました。 分からないことだらけではあったけど、調べる力もに着けることができたし、今後の開発に役に立てることができそうです！
