沼・太田プロジェクト2020

大学生グループが「探検」を楽しめる旅コンテンツ「旅すごろく~n通りの旅~」を作成に取り組んでいます

#34 活動記録 アプリ制作

活動日:2020年10月14日(水) 10月16日(金)

活動場所:Discord,Miro

今回の担当:むらた

 

最近は部屋の中でも寒さを感じることが多く、ヒーターを回して過ごしています。

 

記事を見ていると技術班は今何をやっているのだろう?と思われそうだと感じたので、今回は技術班の進捗を中心にお伝えできればと思います。

 

その前に全体で行われたことを少し触れていきます。

f:id:numapro2020:20201019150012p:plain

2020/10/16 盤面イメージ

デザイン班から盤面はどのようなデザインが良いのか?と全体に向けて発信されました。

個人的には左下が好きですが、どれを取ってもアプリ上でコマを表示させるとしたら相当大変になりそうです。(ゴリ押しする方法も考えついてはいます。)

 

 

技術班のアプリ制作について

企画班・デザイン班からの画面の要望(イメージ?)は現在このようになっています。

 

f:id:numapro2020:20201019143235p:plain

画面遷移のイメージ

コードの流れは何となくイメージできているので、恐らく作れると思います。

 

私が今取り掛かっているのは、中心の「サイコロを振る」部分です。

 

サイコロを振っている描写をどのようにすれば良いのだろう、ということに関してはgif動画だったり、コードで瞬時に切り替えていくなど、どれが良いのかで悩みました。現在はコードで瞬時に切り替えていく方法で作っています。

 

また、アプリの制作に関しては大きな変更点がありました。

10月9日以前まではpythonをずっと使っていたのですが、サイコロのポップアップやアラート画面を出そうと思ったときに、javascriptの方が作りやすいのでは?と直感で感じたため、

10月14日、企画・デザイン班そして技術班のかとう君にも内緒でjavascriptで作ってみることにしました。

 

直感は割と当たっていて、web上で見つかったこともあり、サイコロ自体はかなり安易に持ってくることができました。

(後述しますが、その後のポップアップと連動させるのに苦悩しました。)

 

f:id:numapro2020:20201019144551p:plain

2020_10_19_サイコロ1

サイコロの画面です。とりあえずは機能だけを優先しています。 

f:id:numapro2020:20201019144631p:plain

2020_10_19_サイコロ2

20回ほどサイコロのシャッフルが行われます。

f:id:numapro2020:20201019144855p:plain

2020_10_19_サイコロ3

サイコロが止まった後、数秒してから画像がポップアップされます。このタイミングで現在のマス数が更新されます。

(ここはお題のカードなどに変わる予定です)

f:id:numapro2020:20201019145129p:plain

2020_10_19_サイコロ4

ポップアップを消すと、現在のマス数+クリアしました!の表示がでます。

最終的には「現在のマス数:(お題の内容)クリアしました!」となる予定です。

f:id:numapro2020:20201019145248p:plain

2020_10_19_サイコロ5

現在地が更新されていることがわかります。

 

14日と16日(それと+4時間くらい)で一応イメージしていたくらいまでにはなりました。

一番の難所は「 サイコロを振る→(サイコロが止まってから)ポップアップ表示 」の流れを作ることでした。

色々試してもサイコロを振った瞬間にポップアップ表示がされるばかりで、調べていくうちに「 jQueryにも手を出すべきか...?」と悩みました。(when, thenやpromiseなどがそれにあたるらしいです)

最終的にはsettimeout関数というもので連動ではないものの、表面的には連動して動いているように見せることができるようになりました。

 

現在の所感

独断ではありますが、結構うまくいったなという実感もあるのでどこかのタイミングでお休みしたいな...なんて思ったりします。「うまくいったな」というのは僕の中では他の人に目に見える形で提供できたという意味です。

(技術班に関しては、今回みたいに実際に目に見えないと今日は何をやったんんだろう?と思われがちだと思うので...。)

 

お休みしたいなというのは「90分でコードを書いてまた数日後に続きを書く...」だと何をしていたかを思い出さないといけない、調べ物をしていたならばそのページを開き直さなければならないなど、その時間が少しもったいないと。

それならばまとめて180分やってしまえば良いという考えによるものです。多分そのほうが効率が良いと思うのです。多分。

サービス残業4時間はやったので...フレックスタイム...) 

 

 また、技術班は大体孤立して活動しており企画班・デザイン班の進捗を全て把握できるわけでもないので、ブログ記事に関してはその人の所属していることを中心に書けば書きやすいのかなと思ったこの頃です。