「（9/7～9/13）１週間でWebサービスを作るイベント - お題「2」」の投稿 - Crieit

神経衰弱♪大遅刻の２作品目ですにゃ。お題が「2」ってことで、２枚のカードを揃えて取る定番のカー...

2020-10-13T22:19:20+09:00

神経衰弱♪
大遅刻の２作品目ですにゃ。お題が「2」ってことで、２枚のカードを揃えて取る定番のカードゲーム（ボードゲーム？　テーブルゲーム？）を作りましたにゃ。３０枚のカードで遊ぶシンプルな神経衰弱で、いちおうルール設定とかレベル別のコンピュータとか、いろいろあるんですけど、実はゲーム本体より、おまけで付いてくる「猫でも作れる神経衰弱♪」っていうただ長いだけで中身のにゃい駄文のほうがメインだったりしますにゃ。ここをクリックすると遊べますにゃ

※この記事の内容は、他のところ（あほげー、その他）でも発表する場合がありますにゃ。ご了承くださいにゃ。

2を作るゲーム

2020-09-20T16:16:27+09:00

web2weekになってしまったけれど供養のために投稿。

どんなアプリ？

相手よりも早く答えが２になる数式を作ることを目指す、一対一のオンライン対戦アプリです。

https://two-apps.vercel.app/　（AWSで動かしているので数日で消します）

使っている技術

フロントエンドは Next.js + Typescript で実装。Vercelでホスティングしています。

バックエンドは AWS です。APIGateway + Lambda (Go) で WebSocket 通信を実装しました。対戦相手のマッチングやゲーム情報の記録には、SQS、DynamoDBを使っています。

https://github.com/uu64/two-apps

感想

せっかくだから新しい技術触りたいなと思い WebSocket と Go を使ってみた。
１週間では終わらなかったけれどいろいろと学びがありました。ありがとうございました。

ワン、ツーの2を打ち込むボクシングゲーム

2020-09-18T03:25:03+09:00

大変時間をオーバーしてしまいました。。
今回3度目の参加です！

ちなみに過去2回の参加のやつです。
https://crieit.net/boards/web1week-202003/ff735b2ea9df14e5ba6b89e7e7ee4f73
https://crieit.net/boards/web1week-202005/LIEK

今回のテーマは2。
2がテーマということで、最初に聞いた時は2〜〜〜〜？どうしよ〜〜〜？と思い、
2。。。
1.2...
1.2...
と考えてる時に、浮かんだのがボクシングの1.2でした。
はじめの一歩やらホーリーランドやら好きなせいだと思います。

というわけで、左を制するものは世界を制するとかありますけどやっぱ左だけで倒せるのはリカルドマルチネスとか覚醒したヤンキー狩りくらいなので、1.2の右です。
2.つまり右でフィニッシュをしようというゲームを作ることに決めました。

ヒットザツー（今のとこPC画面専用です！）

https://naosaga.com/hitthe2/

最近よく触ってるcanvasを使いました。
これは開催前から最初から使おうと考えてました。
この連載をめちゃくちゃ参考にしつつ、ある程度カスタマイズしました。
https://qiita.com/doxas/items/9debec7e1f0c19bc8daa

あとはちょっとjqueryとかsass使ってます。
絵はフォトショ（無駄遣い）とノートに書いたの写真撮ってます。

ーーーーーーーーーーーーーーーーーーー

ゲームの流れ

タイトル画面。エンターでスタートします。

次の画面で対戦相手が出て、もっかいエンターで試合が始まります。
最初だけなんかやたら自分と相手の絵の表示に時間かかるかも。

トレーナーのジーちゃん（鴨川リスペクト）がなんか色々いうんでぜひ見てみてください。

HPぶん殴って0になったらfinishシーンになるので、画面の条件に従って右を打ち込んでください。必殺の右（いくつか種類があります！）が決まれば試合終了です。
間に合わないと逆にやられます。

やりたかったこと、気になること

・パンチの速度とかHPは変えれるので、アイテム取ったり合間のトレーニングとかで強くなる、とか。

・敵キャラ何人か作る、とか（当初の構想は3人でした。それぞれ動きや飛んでくる攻撃変えるとか。（クラスで敵キャラオブジェクト作ってるので、気が向いたらそんなに時間かけずにやれるかも！）

・あとED画面とかOPでじじいと主人公（名前適当すぎて忘れました）の出会いシーンとか、ゲーム説明の画面も入れたかった。
EDは途中から間に合わなさそうだったのでリングにかけろの「未完」のパロディをやるとこまで考えてたけどその画面さえ未完でした。

・フットワークを交互に踏む絵とか、殴る時の絵とか用意したんですが、canvasがどうもうまくコントロールできずいったん断念。

色々あるんですが明らかにまだまだ時間かかりそうで、
2がテーマとはいえ1週間の2倍かけてもまだできなさそうだったので、一旦公開します！

ーーーーーーーーーーーーーーーーーーー

やりたいことはまだまだありますが、やっと一区切り！
全然他の方の見れてないので、ゆっくりみます！

数字が順番に表示されますので・2の二乗の倍数・2が含まれる数のときにアホになってください。ナベ...

2020-09-15T07:02:15+09:00

数字が順番に表示されますので

・2の二乗の倍数
・2が含まれる数

のときにアホになってください。
ナベアツに気を取られないようにしてください。

（スピード選択、称号などはあとで更新します。取り合えず骨組みだけアップしています。）

【URL（SSLではありません）】
http://ryoma-do.com/web1week/sample01/

Close to 2

2020-09-14T23:55:27+09:00

遅刻で失礼します。
今回のお題は「２」ということで、「２」に一番近い式をあてるゲームを作りました。

作品：Close to 2

概要

４択の中から、計算結果が「２」に一番近い式をあてるゲームです。
初級、中級、上級で遊べて、難易度が高いほど長い式になり、30秒で何問正答できるかな？というゲームです。

自分で作っておいてなんですが、よほど暗算が得意じゃないと無理ゲーじゃねーかと思いました(笑)

余談

元々は「２」に関するクロスワードを作ろうとしていたのですが、「２」縛りで問題を考えるのがしんどいの極みだったので変えました（しかも土曜...）
その時点ですでに投稿されていた方（特に、きらぷかさんとDE-TEIUさん）の作品を見て、シンプルなゲームでも十分面白いものが作れるんだなぁと思い、今回の作品に至りました。
（他の方の作品を参考にさせていただきましたが、丸パクリレベルになってしまわないよう気を付けたつもりです）

前回参加時にはできなかった、TwitterシェアボタンとOGP設定もやっつけではありますがやりました。
よければシェアしてやってください。
~~(すみません、投稿後に、携帯でやるとシェアボタンが反応しないというバグを早速見つけてしまいました…)~~

バタバタとしましたが、とりあえず形にできてよかったです。
ありがとうございました！

そのうち、また別にレポート記事を書こうと思いますー。

２つのボタンであたたたたたたたたた！！！

2020-09-14T13:21:28+09:00

打ち込め！あたたたたた！！

Firebase＋Vueで初めてプロジェクト作成からデプロイまでやってみました

https://atatata-test-app.web.app

よかったら遊んでください！

とりあえずやってみた

・Vue3でプロジェクトを作ってみた
・値の受け渡しとか、表示切り替えしてみた
・Firebaseにデプロイしてみた！

ほんとに何もインストールしてなくて、node.jsインストールするところから始めたので、何も作れないかと思いましたが、なんとか作り切りました！

できなかったこと

・Twitterに投稿するボタンがつけれなかった
・ランキングとかDB系の操作まで辿りつかなかった
・終了後、最初から始めるのがつけれなかった（ので、リロード）

とにかく、時間がなかったので、適当です！

さいごに

合間時間での作業ですが、次回も何か作れたらいいな♪

[wip] Salmon-run 本当にやりたかったことを二度（ふたたび）始めるアプリ

2020-09-14T04:46:55+09:00

http://salmon-run.net/

「産まれた川に戻る」という夢を持つシャケの切り身と一緒に、本当にやりたかったことをもう一度始めるコーチアプリです。

これまでの経緯

コーチアプリ作りたい気持ちがあった
ちょうど今週木曜から夏休みだな？？？　と夢が広がる
amplify + typescript + react(hooks) でなんか作りたい気持ちがあってキャッチアップ
夢が広がりすぎて木曜日くらいまでコンセプト設計やる
金曜に要約実装が始まりこれ1週間で終わらないやつだな？　とこの辺りで気づく
一旦デザイン諦めて動くモックアップ作る事に専念
実装 & 実装
シャケの切り身の日記をコンテンツ作るのに実装と同じくらい時間がかかる事に気付いてとりあえず最初7日分だけ動くものを作る。
そのチュートリアルも作る途中で力尽きる
俺たちの戦いはこれからだ

2番じゃダメですか？

2020-09-14T00:40:45+09:00

web1weekはお題駆動のイベントなのでね。
ジャンル被りは問題無いのですよ。
ただ・・・

クイズ2位じゃダメなんですか！？（NoCodeアプリ）

ネタ被りはキツい！！！

作ったもの

2位じゃダメなんですか？

ランキングから2位を当てるクイズサイトです。
クイズの登録機能もあります。
まだ問題数が少ないので何か登録して貰えると嬉しいです！

使った技術

Nuxt.js
TypeScript
Tailwind CSS
Firestore
vercel

リポジトリはpublicにしています。
https://github.com/kin-mi/second-place
vercelを使ってみたくて作りました。

所感

Netlifyの上位互換っぷりが凄い。
ホスティングしか使ってないけど、簡単・早い・直感的。
まぁNetlifyも簡単で直感的なのだけれど、とにかく早い（デプロイ、表示速度）
どう使い分ければ良いのだろう・・・。

おわり

人生で初めてNoCodeに敗北を喫しました。
コード書いて遊んでる場合じゃなかった。
次はNoCodeチャレンジやってみたいです。

天使と悪魔で対立する２つを表現しました！

2020-09-13T23:59:09+09:00

天使と悪魔ジェネレーター！

https://angels-and-demons.vercel.app/

できました！

鏡文字ジェネレーター

2020-09-13T23:56:26+09:00

初めまして、なっきーと申します。
楽しそうだったので、イベントに参加しました！
ぎりぎり滑り込みで投稿してますw

２といえば、、、

いろいろ考えました。作り始めては、ほかの方のアプリと似ていたので変えたり、面白くないと気づいて辞めたりと、そもそも開発するまでに五日過ぎてましたw

最終的にこじつけみたいになってしまいましたが、こういう流れです。

「２」　→　「対、ペア」　→　「鏡」　→　「鏡文字」、、、それだっ！！

それだっ！！

作ったもの

というわけで、つくったものがこちらです。

https://naokifukuyori.github.io/mirror_generator/

このアプリは、「入力した文から左右や上下反転した文の画像を作れる」、というアプリです。

こんな感じの画像が簡単に作れます！

挑戦したこと

素のJavaScriptをもっと極めたい！！と思ったので、フレームワークを使わずに実装したこと（結局、そんなに書かなかったけども）
htmlを画像化するために、JavaScriptライブラリ「html2canvas」を初めてしたこと(苦戦したところもあるけど、基本的には使いやすくて良きだった)

使用した技術

html
css
JavaScript
html2canvas
githubPages

改善点

まだまだ改善したいところが山積みです～、ぴえん。

改行, 半角空白に対応していない
レスポンシブデザインになってない
ファビコンを設定してない
webフォントファイルの軽量化
コードをリファクタリングをしたい

やる気を失ってなかったら、改善していきたいと思います。ギブミーヤルキー！

あ、あと今回はコードをgithubで公開しているので（こちら）、もしよければアドバイスなどがありましたら、ぜひお願いします！

まとめ

色々書きましたが、なんにしてもとりあえずデプロイまで持っていけたことがうれしいです！！！

ぜひ、このアプリを使って色々な画像を作って遊んでみてください！！
画像を投稿するときに「#鏡文字ジェネレーター」のハッシュタグをつけていただけたら、僕がめっちゃ喜んでいいね１００回押しますので、よろしくお願いします。

では、ありがとうございました！

上の句と下の句のマッチングサイト「hook2hook（ホック・トゥー・ホック）」を作りました。

2020-09-13T23:45:43+09:00

「hook2hook（ホック・トゥー・ホック）」は下の句を読むと誰かが上の句を作ってくれる「短歌のマッチングサイト」です。

https://hook2hook.emomie.com/

こまけぇことは後だ！

ちゃんと書きます

コンセプト

上の句と下の句をマッチングさせるサイトです。短歌という文化に疎かったのですが、付け句という提示されたお題に対して短歌を完成させる、という遊びを目にして「めっちゃエモい……」となってしまったので作りました。
お題に対する「2」は言わずもがな2つの句をマッチングさせることでクリアしました。

もう少し詳しく

めっちゃエモい短歌があって、なんだこれ……とみてみたら「下の句が提供され、それにいろんな人が上の句をつけて遊んでいる」という現場に遭遇したことがあるか？　私はあったので作りました。こいつを見てくれ。エッモ……

お前が世界を滅ぼしてくれ短歌
https://togetter.com/li/1588443

ちょっと調べたんですが、既存の短歌サイトは縦書きだったりフォントが和風だったり、本当に純粋に短歌を楽しむ人にすごくフォーカスしていて、1週間で作るカジュアルサービスなんか足元にも及ばないな……といったんは考えたのですが、自分が一緒に楽しみたいと思っているユーザは、自分の世界感を確立し、完成しているタイプのユーザではないのかもしれない、とも思い至りました。
下の句だけで世界観を共有したり、ファンフィクの一形態としての短歌に必要なのは、縦書きや和風フォントではなく（あるに越したこととはないと思う）pixivやポイピクと同様のUGC化、シェア、評価や数字の可視化では……幸いなことにそこのフォーカスしたサービスはまだなかったため、着手とあいなりました。そのためhook2hookではシェア、リテンションに力を入れたサービスになっています（評価はこのあと機能で付けます……）

使った技術

php7系
ロリポップレンタルサーバ
mysql
cakephp3系

実家のような安心感。とにかく短期間でのリリースを目指すなら慣れた技術でやるのが絶対必要ですが、OGP画像の動的生成は別の作ろうとしていたサービスからソースを引っ張ってこれたので、普段から無駄に素振りしてるとこういう時に飛距離が伸びるな……と思いました。
だからって締め切りまで3時間切ったら「どうしてもOGP画像がほしいんじゃ！」などと強行突破しないでいったんちゃんと工数確認したほうがいいと思う。

できること

上の句を作ってシェアする

誰かが投稿した「下の句」に自分で考えた「上の句」をつけてツイートすることができます。

下の句を作ってシェアする

下の句を投稿すると誰かが上の句を考えてくれます

このあとできるようになること（多分）

ログインして「hook2hookにも投稿」を行うと、「hook2hookでマッチングした短歌」に表示されます。
上の句がログインして投稿されると、マッチングして完成した短歌が表示されます
- マッチングした短歌に「エモい」を送れます
- マッチングした短歌の数が表示されます
- タグを登録することができます
- 下の句やマッチングした短歌をタグで検索することができます

所感

楽しかったです！

息子と2人で遊ぶゲーム

2020-09-13T23:30:08+09:00

めちゃくちゃこじつけですが,息子と｢2｣人で遊ぶゲームです。
https://web1week-kohe.netlify.app/

カウントを交互に減らしていって0にした人が負けです。

フレームワーク使わずにPureJSを使うという個人的なテーマもあり,HTML + CSS + JavaScript というシンプルな作りにしました。

1週間ってあっという間ですね。
JSよりもHTMLとCSSに苦戦しました。。。

にゃんにゃん時計（22時計）

2020-09-13T23:07:29+09:00

すごくどうでも良い情報

良い感じのアイデアが全く思い付かないまま何やかんやで木曜日までが終わる。
金曜日に知人に助けを求め良い感じのアイデアをもらう。秒で採用する。
「規模感的に土日あればいけるっしょ！」→ 何もしないまま土曜日がほぼ終わる。
土曜日の夜中にようやく着手する。
何とか間に合ったっぽい。 ← いまここ

アイデアの概要

2 → にゃん。
22 → にゃんにゃん。
バックエンド中心でいきたい。→ 特にGolang書いてみたい
フロントエンドは控えめに。→ 時計表示ぐらいで良いです

にゃんにゃん時計（http://tak-dev.tk/22clock.html）

背景にランダムな猫の画像（可愛い）が表示されるだけの時計アプリ。
20秒ごとに猫の画像（可愛い）が更新される。
クライアントからのインタラクション機能はない。

構成

バックエンド
- 基盤：さくらVPS
- OS：CentOS8
- Webサーバ：nginx
- 言語：Golang
- FW：未使用
- API詳細：Yahoo画像検索結果をスクレイピングする → JPGファイルのURLを30個抽出する → それをJSONで返す
  - 検索キーワード：「猫可愛い」
- Google画像検索じゃないの？：Googleはスクレイピングを禁止しているようです
フロントエンド
- 言語：HTML / CSS / JavaScript
- FW：未使用
- 動作詳細：前述のAPIを呼び出してJSONを取得し、JPGファイルのURLをランダムに1つ選択し、背景画像に設定する（ページ表示時＆20秒ごと）

最後に

楽しかったです。
良い企画をありがとうございました。

Google Mapでまとめられていたデータを使って「東京固めプリンマップ」のサイトをGlideで作ったよ

2020-09-13T22:37:23+09:00

こんにちは！ @nabettuです。

今回のWeb1WeekではNoCodeでサイトを作ってみました！それが表題の「東京固めプリンマップ」です。

こちらはへんてこグルメガイド（矢崎/ヤザキング）@asobikikaku さんの以下のツイートがありまして、

こちらのマップの利用許可を頂いてデータを使わせて頂き（ありがたや〜🙏）、Glideで文字列検索などをできるようにしたものになります。

Glideの無料枠なので地図データがたまに出なかったりするんですが、「品川区」などで検索するとその住所やキーワードにヒットする固めプリンが食べれるお店が出てきます。

サイトの作りかた Step1 マイマップ→Spreadsheet

まず元のデータですが、Google Mapのマイマップ機能を使って作られています。

これをGlideで使えるようにSpreadsheetに直したいと思います。

まずはMapを使えるデータにエクスポートするのですが、形式がKMLというものに限られています。

そしてダウンロードしたKMLファイルを次のサイトを使ってCSVに変換します。

Googleマップ KML/CSV相互変換というサイトを使います。

そしてCSVをSpreadsheetで読み込めば、一旦元データの変換は完了です。

サイトの作りかた Step2 データ成型(緯度経度→住所)

さぁ出来上がったCSVですが、次のような形式になっています。

index
名前
説明文
緯度
経度

Glide上で正しく場所を表示するには住所が必要です。ということで緯度経度から住所を作っていきます。

使わせて頂いたのはこちらのサービス
郵便番号／住所／緯度経度データ変換サービス

こちらのAPIを使って、住所を緯度経度から割り出していきます。

まずはAPI用のURLを作ります。

="http://geoapi.heartrails.com/api/xml?method=searchByGeoLocation&x=" & G2 & "&y=" & H2

という感じで設定すればxmlが取得できるようになりますので、このURLで一つカラムを作成します。(G2,H2とかはカラムデータの取得)

するとこんな値が入るようになります。

[http://geoapi.heartrails.com/api/xml?method=searchByGeoLocation&x=139.5955947&y=35.7092688](http://geoapi.heartrails.com/api/xml?method=searchByGeoLocation&x=139.5955947&y=35.7092688)

そのXMLのデータをインポートするための命令がSpreadsheetにあるので、それを利用してカラムに入れます。

=IMPORTXML(J3,"/")

すると

" 港区 みなとく 西新橋一丁目 にししんばし1ちょうめ 139.753077 35.668116 89.19496353533386 東京都 
1050003  港区 みなとく 西新橋二丁目 にししんばし2ちょうめ 139.751867 35.667002 93.81633499427977 東京都 
1050003  港区 みなとく 虎ノ門虎ノ門ヒルズビジネスタワー３０階 とらのもんとらのもんひるずびじねすたわー30かい 139.750062 35.667986 
191.29710881449762 東京都 1056430  港区 みなとく 虎ノ門虎ノ門ヒルズビジネスタワー３５階 とらのもんとらのもんひるずびじねすたわー35かい 139.750062 35.667986 
191.29710881449762 東京都 1056435  港区 みなとく 虎ノ門虎ノ門ヒルズビジネスタワー３階 とらのもんとらのもんひるずびじねすたわー3かい 139.750062 35.667986 
191.29710881449762 東京都 1056403  港区 みなとく 虎ノ門虎ノ門ヒルズビジネスタワー３４階 とらのもんとらのもんひるずびじねすたわー34かい 139.750062 35.667986 
191.29710881449762 東京都 1056434  港区 みなとく 虎ノ門虎ノ門ヒルズビジネスタワー４階 とらのもんとらのもんひるずびじねすたわー4かい 139.750062 35.667986 
191.29710881449762 東京都 1056404  港区 みなとく 虎ノ門虎ノ門ヒルズビジネスタワー５階 とらのもんとらのもんひるずびじねすたわー5かい 139.750062 35.667986 
191.29710881449762 東京都 1056405  港区 みなとく 虎ノ門虎ノ門ヒルズビジネスタワー６階 とらのもんとらのもんひるずびじねすたわー6かい 139.750062 35.667986 
191.29710881449762 東京都 1056406  港区 みなとく 虎ノ門虎ノ門ヒルズビジネスタワー３３階 とらのもんとらのもんひるずびじねすたわー33かい 139.750062 35.667986 
191.29710881449762 東京都 1056433 "

というデータがカラムに入ってきます。このままだと使いづらいので、

=SPLIT(K3," ",true,true)

でバラしていくと別々なカラムにスペースで区切られた内容が入るので、

杉並区 すぎなみく   西荻北四丁目  にしおぎきた4ちょうめ 139.596547  35.708441   126.1002605 東京都 1670042 杉並区 すぎなみく   西荻北五丁目  にしおぎきた5ちょうめ 139.599946  35.709907   399.6782071 東京都 1670042 杉並区 すぎなみく   西荻北三丁目  にしおぎきた3ちょうめ 139.598557  35.706513   407.1976297 東京都 1670042 杉並区 すぎなみく   善福寺一丁目  ぜんぷくじ1ちょうめ  139.598386  35.712448   434.6331725 東京都 1670041 武蔵野市    むさしのし   吉祥寺東町四丁目    きちじょうじひがしちょう4ちょうめ   139.592693  35.705914   456.3604124 東京都 1800002 杉並区 すぎなみく   善福寺二丁目  ぜんぷくじ2ちょうめ  139.591476  35.711792   466.3581414 東京都 1670041 武蔵野市    むさしのし   吉祥寺東町三丁目    きちじょうじひがしちょう3ちょうめ   139.589047  35.706186   684.1543641 東京都 1800002 杉並区 すぎなみく   西荻北二丁目  にしおぎきた2ちょうめ 139.603286  35.706947   741.7175361 東京都 1670042 杉並区 すぎなみく   上荻四丁目   かみおぎ4ちょうめ   139.604281  35.710003   789.3953431 東京都 1670043 杉並区 すぎなみく   松庵三丁目   しょうあん3ちょうめ  139.596458  35.701977   815.462034  東京都 1670054

それの1,3個目を結合して

杉並区西荻北四丁目

というカラムが出来ました。これで一応はお店の住所になりますが、丁目までしか入っていないので、正確な場所を出すために、これにお店の名前を追加したものを住所として登録しておくと、無事に地図で場所を表示することができるようになりました。（表示する住所とマップで利用する住所は別にしておきます。）

サイトの作りかた Step3 サイトの表示設定

あとは出来上がったデータを使って、Glideでどのように表示していくかを設定します。

今回はマップの他にリストと、

その詳細画面を作ってみました。（instagramの一部の写真の利用許可も頂いたので、こちらは手動でURLを取得しました）

下にタブを増やして、謝辞と元ツイートへのリンクも設定しています。

最後にサイトの名前やアイコンを設定して、公開すれば出来上がりです。

まとめ

こういうまとまったデータをサイト化するのにGlideは本当に楽ですね。

ホントはプリン店にお気に入りできる機能を付けたかったのですが、Glideの有料機能が必要（約月$49）だったので断念しました。

むしゃくしゃしたときには、このマップを見て固いプリンを食べに行きましょう。

「東京固めプリンマップ」

あ、お題の「２」ですが、今回は「GoogleMap2Site」な事例ということでご勘弁をｗ

以上です！今回もWeb1week参加できてよかったです！

打線組んだｗｗメーカーを作った

2020-09-13T22:36:00+09:00

web1weekで「打線組んだｗｗメーカー」をつくりました！

打線組んだｗｗメーカーを作りました！

投稿にあたり他の方と完全にネタ被りをしてしまったのですが、使っている技術周りは違ったので臆せず投稿しようと思います。笑

(OGPも含めきれいに実装されていた方の打線メーカーはこちら)
https://crieit.net/boards/web1week-202009/1dd1b99ee139f324c20408ce24eecec0

作った経緯

今回のテーマが「2」ということで、現代野球は2番打者に強打者を置くか、いぶし銀な打者を置くか、采配が分かれることに注目し、なんJでおなじみの「打線組んだｗｗ」を簡単に作れるWebアプリを作りました。

使った技術

Next.js
TypeScript
Vercel
Cloud Functions
Cloud SQL (MySQL)

今回はNext.js v9.5で正式に導入されたStatic Generation(段階的な静的再生成)が使いたく、試してみました！
ビルドされたページは静的ページとして配信されるのですが、投稿されると新しい静的ページを実行時に登録することができます。

また、今回はFire StoreのようなNoSQLではなくRDBSが使いたかったので、Cloud　SQLとCloud Functionsを繋げてサーバレスバックエンドの構築を目指しました。

学び

Static Generation
Next.jsのStatic GenerationはgetStaticPathsとgetStaticPropsを対象のページに記述すると、静的ページとしてビルドされるだけでなく、getStaticPathsのfallbackパラメータをtrueにするだけで実現できました！
参考) https://qiita.com/thesugar/items/73a169c4d23e4bd91554#安定版としての段階的な静的再生成

export const getStaticPaths: GetStaticPaths = async () => {
  const response = await axios.get('')
  const data = await response.data
  const paths = data.map((data) => `/post/${data.postId}`)
  return { paths, fallback: true }
}

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const id = params.id
  const response = await axios.get('', {
    params: { postId: id },
  })
  const data = await response.data
  return {
    props: {
      data,
    },
    revalidate: 1,
  }
}

Cloud SQLのマシンスペック
特にマシンスペックを指定せずMySQLを立てていたのですが、立てて2日間で400円以上かかっていることが判明し、一番低いスペックまで落としました。
Cloud SQLはインスタンスが立ち上がっている間従量課金になるので、初期段階で自分の開発規模に見合うスペックに設定することが大事ですね。
　クラウド破産にならなくてよかったw(もう1年分の無料期間は過ぎていたので...)

やりたかったけどできなかったこと

OGP画像の生成
Vercel Functionsを使えば実現できるらしいのですが、画像のデザインや実装が時間切れで間に合わず...
コメント機能
投稿された打順について「これは首位打者狙える」「上位打線屈強なのにこの下位打線は草」「これは万年Bクラス采配ですわ」なんて書き込めるようにしたかったのですが時間切れ
打順の背景色
パワプロ準拠で投手：ピンク、捕手：水色、内野手：黄色、外野手：緑にCSSの振り分けをしたかったのですがこれも時間切れ
画像出力とテキスト出力
テキスト出力できればそのままなんJに貼れて良いかもなーと思った次第でしたがこれも(以下略)
入力フォームの順序入れ替え
1番打者に入力したけど6番くらいの方があうなーとなったときに、入力値入れ替えができたら良いかなと思ったものの実装する時間が(以下略)

まとめ

まさかの同イベントで同じネタの方がいらっしゃるとはwなアプリになってしまいました笑

もっと足したい機能があるので、今回のイベントではプロトタイピングと位置付けて、サービスの拡大ができたら面白いかなーと思います。

打線組んだｗｗメーカーはこちら