Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
謎コイン
Search
ようかん(YosukeInoue
August 25, 2023
Programming
0
93
謎コイン
ようかん(YosukeInoue
August 25, 2023
Tweet
Share
More Decks by ようかん(YosukeInoue
See All by ようかん(YosukeInoue
Stripe Agent Toolkitを試してみた
inoue2002
0
57
今から始めるLINEBot入門
inoue2002
0
120
未来の投げ銭箱
inoue2002
2
94
LINEでAI占い師に相談できる “AI占いくん”の開発/改善の過程
inoue2002
0
340
LINEトークルーム広告v1
inoue2002
0
76
レシピ保存くん
inoue2002
0
540
初めてのServiceMessage
inoue2002
0
130
トーク履歴を分析してみる
inoue2002
0
22k
LINEで使えるAIチャットBot “AIチャットくん”とLINEAPI
inoue2002
0
110
Other Decks in Programming
See All in Programming
S3静的ホスティング+Next.js静的エクスポート で格安webアプリ構築
iharuoru
0
200
今から始めるCursor / Windsurf / Cline
kengo_hayano
0
110
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
2
1.1k
PHPによる"非"構造化プログラミング入門 -本当に熱いスパゲティコードを求めて- #phperkaigi
o0h
PRO
0
1.1k
体得しよう!RSA暗号の原理と解読
laysakura
3
540
신입 안드로이드 개발자의 AI 스타트업 생존기 (+ Native C++ Code를 Android에서 사용해보기)
dygames
0
510
SLI/SLOの設定を進めるその前に アラート品質の改善に取り組んだ話
tanden
2
730
新卒から4年間、20年もののWebサービスと 向き合って学んだソフトウェア考古学
oguri
8
6.9k
Develop Faster With FrankenPHP
dunglas
2
2.7k
Firebase Dynamic Linksの代替手段を自作する / Create your own Firebase Dynamic Links alternative
kubode
0
180
Boost Your Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
200
Compose Navigation実装の見通しを良くする
hiroaki404
0
180
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
A designer walks into a library…
pauljervisheath
205
24k
Music & Morning Musume
bryan
46
6.4k
Agile that works and the tools we love
rasmusluckow
328
21k
The Language of Interfaces
destraynor
157
24k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Documentation Writing (for coders)
carmenintech
69
4.7k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
102
18k
Transcript
謎コイン チーム名
メンバー 井上 陽介(いのうえ ようすけ) フロントエンド担当 LINEBot大好き 大阪からきました
岩田 理央(いわた りおう) バックエンド担当 臼井 陸(うすい りく) フロントエンド担当 太田 圭祐(おおた けいすけ) バックエンド担当 村松 侑(むらまつ ゆう) フロントエンド担当
誰に向けたものか? ・”地元民と旅行客” 地元の人のみが投稿できる口コミサー ビスです アプリケーション概要 ・自分の地元について投稿できる (マップピンで表示) ・地元について質問できる (ex.
旅行客が訪れたとき) 作ったもの「じもとコイン」
まずはぜひ触って見てください!
成果物のデモ
・地元ボイスチャンネルのグループのため,地元色強めで ・地元の課題 → 人口減少 ・最終目標は移住 ・今回は地元の魅力を伝えることに着目 ・地元民は地元の良さを再認識できる(イイねされると気分がいい!) 作ろうと思った背景
まちのコイン ・イベント参加,ゴミ拾い,フードロス削減などに貢献することで コインがもらえる,いろいろ使い道がある(ex. 超高級肉の抽選)! じもとコイン ・「おすすめスポットの投稿」,「投稿にいいね!される」, 「質問に回答する」とコインがもらえる
・コインを使うことで地元について質問できる 類似サービスとの比較
移住支援・地方創生 簡単にその目標は達成できないので、今回はその一歩手前である 「移住するかもしれないになるはじめてのアクション」を設計する 目指すところはただの承認欲求で動くサービスではない → あえていいね数やコイン数のランキングは実装していない →地元から連想される暖かさ、故郷への思いをメインパワーにしたい 私たちが目指す最終目標
作った機能について ・おすすめスポット投稿機能(タイトル,本文,画像) ・イイね機能 ・マップ機能 ・プロフィール機能 ・コイン機能
謎コイン コインを貯めても特に何もない → 貯めるのが楽しい → 行動につながる じもとコインでは… ・もらえる条件 「おすすめスポットの投稿」、「投稿にいいね!される」「質問に回答する」 ・消費方法
コインを使うことで地元について質問できる
コインの分配方法の仮説実装について • 質問回答してxコイン貰える • 質問に答えると何人目に答えたかによってもらえるコインが変動する • もらえるコインの下限は1コイン • 100コイン貰える質問 ◦
1人目: 100コイン ◦ 2人目: 100/2 = 50コイン ◦ … ◦ n人目: 100/n コイン • 貰えるコインが変動することでインフレを防ぐ • 質問に早く答えることに意味を持たせる • 最初は少なめから設定することでインフレを防ぎつつ、市場を調節したい。
使った技術や構成 バックとフロントでリポジトリを分けた バックのapiをフロントで呼び出す 使用技術 フロントエンド ・ TypeScript,React, Vercel, Mapbox GL
JS, PRTIMES API バックエンド ・PHP(Laravel), ClearDB(mysql), LINE API(ログイン)
こだわったポイント フロントエンド ・FireBaseによる画像管理 ・ ・Mapbox GL JSを使用してマップピンを表示 etc… バックエンド ・herokuにデプロイ ・LINE認証
etc…
チャレンジしたこと ・バックからS3へ画像保存(apiでまとめた方がきれい,時間決めて粘った) → 最終的にはフロント側でFirebase Storageに直接アップロードして解決した ・LINE Login (LIFF)を用いたIdToken検証でAPIとのやり取りを実現 ・なぜかわからないけど触りたい、コインを集めたいと思わせる体験設計 ・野良参加メンバー(初対面)での開発でどこまでのアプリを作ることができるか
→ デザインファイルの90%ぐらいは作れた(!?) ・みんなで仲良く、どうすればスムーズに開発できるのかをみんなで考えた
今後の展望 ・コイン機能をもっと検証して、ユーザーが投稿&回答したくなるような バランスを研究していきたい ・APIのレスポンスを早くしたい ・実際に使われるサービスになるように改善と広報を進めていきたい
個別発表: 井上 陽介(いのうえ ようすけ) • デザインファイルの作成 • チームのタスク管理 • フロントエンド
x LINE API の連携 • React App x TypeScript の開発 • Laravel APIの開発のお手伝い “悩みこまずアウトプット 一番テンションが上がるものから作る” “行動者発になるサービスが作れて良かっ た”
None
None
個別発表: 岩田 理央(いわた りおう) 達成した点・こだわった点 ・herokuへのデプロイ(データベース構築) ・apiの作成(/user, /favorite) --[初めて]-- ・方針のすり合わせ(仕様,役割分担,引き際)
感想 ・初ハッカソン ・スピード感 ・初チーム開発(frontとback) debag できること,できないことわかった メンターさん
個別発表: 臼井 陸(うすい りく) 達成した点・こだわった点 • 顔出しでのミーティング、ハッカソンの事前の関係性の構築 • TypeScriptでの本格的な開発への初挑戦 •
複数のコンポーネントで使うことのできるコンポーネントの作成 • MUIの導入によるわかりやすく使いやすいUI 感想 • ハッカソンへの初挑戦 • 自身の課題
個別発表: 太田 圭祐(おおた けいすけ) 達成した点・こだわった点 ・APIの作成(/question, /answer, /report) ・LaravelのMiddlewareを使ってLINE認証プロセスを実装 感想
・Laravelを使うのは初めて ・自身の開発速度を上げたい
個別発表: 村松 侑(むらまつ ゆう) 達成した点とこだわった点 ・MUIを利用したフロント作成 ・ユーザーが使いやすいデザインとなるように意識しました 感想 ・本格的なバックエンドがある環境でフロントを作ることが初めてだったで 認証周りを含めて良い経験が出来ました。
質問タイム 井上 陽介 github.com/inoue2002 岩田 理央 github.com/Rio-Rf
臼井 陸 github.com/Ricccck 太田 圭祐 github.com/melon0658 村松 侑 github.com/Murayu0225