1週間で初技術を使ってサービスを作った話
今回は初めて触った技術たちを使用して1週間でサービスを作ったので、その技術とサービスの説明を行います。
サービスの紹介
こちらが今回作成したサービスです：
このサービスは、イベントまでの残り時間を簡単にシェアできるツールです。SNSで「〇〇まであと何分！」といった投稿を手軽にシェアできるようにするために開発しました。
使い方と機能
SNSで「〇〇まであと何分！」といった投稿をよく見かけますが、そんな投稿をもっと簡単にシェアできるサービスがあれば便利だと思い、このサービスを作りました。
このサービスでは、タイトルと終了時間を設定するだけで、残り時間が表示されるページが作成されます。作成したページをX（Twitter）に投稿するためのボタンも用意しており、簡単に残り時間とともにシェアできます。
実際の使用例
まず、右上の作成ボタンを押すことで次のような作成画面に飛び必要なデータを入力することができます。
そして、作成をするとダイアログが表示され、投稿が公開されているリンクと、今後編集をしたくなったときに使用するためのリンクが教えられます。
ユーザーにアカウントを作らないで投稿が出来るようにしたく、更に編集したいことがあったときに編集できるようにこのような形を取りました。
投稿ページを見に行くと、次のようにタイトルと終了までの時間が毎秒変わっていくように出来ています。
そして、各シェアボタンは押したタイミングの残り時間を使用してシェアが出来るようになっています。
実際にXでポストしている様子が次になります。
ぜひ、サービスを試してSNSでシェアしていただけると嬉しいです！
技術スタックと開発過程
技術スタック
私は高専に通う5年生で、過去にWebサービスの開発はありましたが、Next.jsとSupabase、Cloudflareを使ったことはありませんでした。
Xでよく流れてくる技術スタックだったので私も使えるようになりたいと思い、簡単なサービスですが頑張って開発しました。
触ってみてNext.jsのライブラリの豊富さ、Supabaseのデータベース管理の簡便さ、Cloudflareでのドメイン取得や公開の手軽さに感動しました。
開発過程
まず、技術スタックの流れを把握するために、以下のYouTube動画を参考にしました
非常にわかりやすかったです。ここに出てきたshadcn/uiもサービスに組み込みました。
最初はNext.js特有のServer ActionやuseState、useEffectに混乱しましたが、有名なフレームワークということで情報が豊富で、なんとか形にすることができました。
Supabaseとの接続も数行で出来て、感動しました。
個人的お気に入りポイント
本アプリのシステムには、日付と時間を選択できるDataTimerPickerが必要でした。既存のPickerには日付や時間を選ぶものはあっても、それらを統合したデザインのものが見つからなかったため、自分で作成しました。海外のAM,PMと違い、日本では24時間制が一般的なため、シンプルで見やすい24時間制対応のPickerをデザインしました。
また、全体的に見た目にこだわり、シンプルながらも情報がきれいに並べているようなサイトになるようにこだわりました。
苦労した点
一番苦労したのはCloudflareでした。
サービスがほぼ完成し、デプロイと細かい修正に進むためにアカウントを作成し、デプロイを試みました。すると、いくつかの小さなエラーが発生しましたが、比較的簡単に修正できました。しかし、SSR実行のために使用するCloudflare WorkersのPages Functionsの容量が1MiBに制限されており、どの部分が多くの容量を消費しているかを調査する必要がありました。@next/bundle-analyzerを使って確認したところ、投稿画面でのOGP生成が多くの容量を占めていることが判明しました。
Next.jsに元からあるnext/ogを使っていたのですが、それでも容量が多いらしく取り敢えずOGP機能は削除しました。
解決策
削除したところデプロイが完了したので、動的にOGPを生成するのではなく、画像をそのまま表示する方式に変えました。課金すれば10MiBに増えて動作するらしいのですが、学生でお金がないため完全無料にこだわり泣く泣く削除しました。
しかし完全無料で簡単にある程度サービスとして形になるものを作れて非常に嬉しいです。
最後に
完全無料で一定の機能を持ったサービスを形にできたことに非常に満足しています。
Nuxt.jsやPHPと比べて開発速度が大幅に向上し、この技術スタックを気に入ったので、今後もこの技術で開発を続けていくつもりです。
ぜひ、残り時間をSNSでシェアする際にはこのサービスを活用していただけると嬉しいです。
また、Xもやっているので、ぜひフォローしていただけると幸いです。
Discussion