tag:crieit.net,2005:https://crieit.net/users/k_urtica/feed CrieitでユーザーK@個人開発バックエンドエンジニアによる最近の投稿 2021-12-27T23:20:34+09:00 https://crieit.net/users/k_urtica/feed tag:crieit.net,2005:PublicArticle/17895 2021-12-27T23:20:34+09:00 2021-12-27T23:20:34+09:00 https://crieit.net/posts/Web-61c9cbb273b27 <h2 id="はじめに"><a href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">はじめに</a></h2> <p>「日本踏破図🗾」というWebサービスをNuxt × Vuetifyで個人開発しました！</p> <p><a target="_blank" rel="nofollow noopener" href="https://traverse-japan.dev/">日本踏破図🗾</a></p> <h2 id="どんなWebサービスか"><a href="#%E3%81%A9%E3%82%93%E3%81%AAWeb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%8B">どんなWebサービスか</a></h2> <p>踏破した都道府県を日本地図でチェックすることができ、自分が今までに日本をどれだけ踏破したかをみんなにシェアできます👍<br /> 以下のように日本地図上で都道府県をチェックできます。これをシェアボタンでシェアすると・・・<br /> <a href="https://crieit.now.sh/upload_images/c21a19f689e6b03b8fd32ed155a13cc561c9c9f546005.gif" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/c21a19f689e6b03b8fd32ed155a13cc561c9c9f546005.gif?mw=700" alt="cap3.gif" /></a></p> <p>以下のようなOGP画像でシェア可能です！地図のカラーも好きな色に変更することができます。<br /> <a href="https://crieit.now.sh/upload_images/c96a5c5d12e327a1c82680dd58a2f4c261c9c899adde1.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/c96a5c5d12e327a1c82680dd58a2f4c261c9c899adde1.png?mw=700" alt="cap2.png" /></a></p> <h2 id="使用したフレームワーク・インフラなど"><a href="#%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%BB%E3%82%A4%E3%83%B3%E3%83%95%E3%83%A9%E3%81%AA%E3%81%A9">使用したフレームワーク・インフラなど</a></h2> <ul> <li>NuxtJS（Nuxt Bridge）</li> <li>Vuetify</li> <li>vuex（vuex-module-decorators）</li> <li>PWA</li> <li>Vercel（Serverless Functions）</li> </ul> <p>主なものになります。多機能なWebサービスではないのでそんなに色々使ってはいません。<br /> よく使うNuxtとVuetifyでフロントを構築して、Nuxtの<a target="_blank" rel="nofollow noopener" href="https://v3.nuxtjs.org/concepts/server-engine/">Nitroエンジン</a>を使ってVercelのServerless Functionsへデプロイしています。</p> <p>当初はSSRにするつもりはなかったのですが、動的OGPを実装するために色々試行錯誤した結果SSRにしました。ただ、Nuxt3／Nuxt Bridgeから使えるようになったNitroエンジンのおかげで高速&ゼロコンフィグでVercelを利用できます。</p> <h2 id="苦労したところ"><a href="#%E8%8B%A6%E5%8A%B4%E3%81%97%E3%81%9F%E3%81%A8%E3%81%93%E3%82%8D">苦労したところ</a></h2> <h3 id="動的OGPをどう実装するか"><a href="#%E5%8B%95%E7%9A%84OGP%E3%82%92%E3%81%A9%E3%81%86%E5%AE%9F%E8%A3%85%E3%81%99%E3%82%8B%E3%81%8B">動的OGPをどう実装するか</a></h3> <p>正確に言うと「いかに簡単かつ無料で実装するか」に苦労しました。<br /> 検索するとfirebaseを使ってmetaだけSSRしたものを返してリダイレクトさせる等々、実現方法自体は色々でてきます。</p> <p>ただ、正直なところこの規模・機能のWebサービスにそこまでしたくなかったんですね（できるだけシンプルな作りにするということも最初に決めていました）</p> <p>最終的に実装した方法は以下です。</p> <ol> <li>OGP画像を生成して画像を返すServerless Functionsを用意する</li> <li>Functionsへ画像生成に必要な情報(チェック済みの都道府県、地図カラー)を渡す</li> </ol> <p>必要な情報をURLパラメータに持ち、それを利用してmetaタグのog:imageのエンドポイントを作っています。<br /> そのためサービス自体はSSRする必要がありますがVercelを使えば十分な無料枠でServerless FunctionsでSSRできます。</p> <p>個人的には下手にhackyな方法をとるよりも、SSRが必要な場面ではおとなしくSSRしておいた方が良い気がします🤔<br /> （結局のところTwitter・Facebookのクローラーのためだけにあれこれやりたくない）</p> <p>ちなみにNetlifyに<a target="_blank" rel="nofollow noopener" href="https://docs.netlify.com/site-deploys/post-processing/prerendering/">Prerendering</a>という機能があるのですが、これを有効にすることで事前レンダリングされたHTMLを返すことができます。<br /> SPA構成にしてPrerenderingを試してみたのですが、どうもPrerenderingの対象はUserAgentを見ているだけらしくTwitterクローラーであればNetlify Functionsのエンドポイントも問答無用でPrerenderingされるみたいでした。<br /> なのでOGP画像を返すはずのFunctionsがTwitterクローラーの時はPrerenderingされてHTMLを返すようになってしまい、OGP画像が表示されず使えませんでした。。</p> <p>まぁ、NetlifyのPrerenderingはキャッシュ時間(24〜48時間)もコントロールできないし、なによりBETAなのでまだ実用的ではないですね。。</p> <h3 id="サイトデザイン"><a href="#%E3%82%B5%E3%82%A4%E3%83%88%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">サイトデザイン</a></h3> <p>デザインというのはセンスだと思っています。つまるところ、それを磨くためには多大な時間・努力が必要ということです😉<br /> 私はデザイナーではないのでそこについて時間をかけて勉強するのは得策ではありません。<br /> 悩み・試行した結果、全体的にカードベースのデザインになりました。</p> <p>また、根本のデザインはいわゆるUIフレームワークに頼るわけですが今回はよく使うVuetifyを利用しました。Vuetifyのコンポーネントを使うことで何も考えずそこそこきれいなサイトができあがります。</p> <p><a target="_blank" rel="nofollow noopener" href="https://vuetifyjs.com/ja/">https://vuetifyjs.com/ja/</a></p> <p>ただ、今回は個人的にやってみたいと思っていたGlassmorphism（グラスモーフィズム）チックなデザインを実装しました。<br /> これが間違いで、Vuetifyはマテリアルデザインを実装するフレームワークなんですね。それに対してマテリアルデザインからかけ離れるようなものを実装すると色々と歪みが生じます🙃</p> <p>importantを使ってVuetifyのcssを上書きして実装しましたが、こういうことをする場合はTailwind CSSを利用するべきでした。。</p> <p><a target="_blank" rel="nofollow noopener" href="https://tailwindcss.com/">https://tailwindcss.com/</a></p> <h2 id="運営コストについて"><a href="#%E9%81%8B%E5%96%B6%E3%82%B3%E3%82%B9%E3%83%88%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">運営コストについて</a></h2> <p>現状、ドメイン代オンリーです。<br /> 上の方でも少し書いていますが個人開発においては<strong>無料で運営できること</strong>にこだわっています。</p> <p>まぁ、お金はかからないに越したことはないし、お金がかかってくるとちゃんとメンテしなくちゃとか、マネタイズ考えないと！とか思ってしまうわけですが無料であればひとまず放置で問題ないですからね。</p> <p>ちなみに、このWebサービスでは最初からマネタイズは一切考えていません。機能的にサービス自体がマネタイズにつながるものでもないですがアドセンス等の広告等も一切はらないと決めて開発をスタートしました。</p> <h2 id="サイトパフォーマンスについて"><a href="#%E3%82%B5%E3%82%A4%E3%83%88%E3%83%91%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%B9%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">サイトパフォーマンスについて</a></h2> <p>使っている技術からもわかるかと思いますが、パフォーマンスは問題なく良いです。<br /> 特にSSRするとやっぱり初期描画のパフォーマンスがすごいです（コールドスタート時以外）</p> <p>いくら無料のインフラにこだわっているかといってパフォーマンスを犠牲にしたらお話にならないですからね😉</p> <p><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/271387/b46f5426-3ef1-c2d9-327f-071178f7d3b2.png" alt="image.png" /></p> <h2 id="機能の説明"><a href="#%E6%A9%9F%E8%83%BD%E3%81%AE%E8%AA%AC%E6%98%8E">機能の説明</a></h2> <p>日本踏破図🗾でできることを改めて説明させていただきます。</p> <h3 id="日本地図で踏破した都道府県をチェック"><a href="#%E6%97%A5%E6%9C%AC%E5%9C%B0%E5%9B%B3%E3%81%A7%E8%B8%8F%E7%A0%B4%E3%81%97%E3%81%9F%E9%83%BD%E9%81%93%E5%BA%9C%E7%9C%8C%E3%82%92%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF">日本地図で踏破した都道府県をチェック</a></h3> <p><a href="https://crieit.now.sh/upload_images/8bd592eed3b0970775e45c8493e1361161c9ca82b4032.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/8bd592eed3b0970775e45c8493e1361161c9ca82b4032.png?mw=700" alt="image.png" /></a></p> <p>日本地図上の都道府県を選択することができます。選択状況した数によって日本をどれくらい踏破したかがわかります。<br /> また、シェアボタンから踏破した都道府県をシェアすることができます❗</p> <h3 id="日本地図のメニュー"><a href="#%E6%97%A5%E6%9C%AC%E5%9C%B0%E5%9B%B3%E3%81%AE%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC">日本地図のメニュー</a></h3> <p><a href="https://crieit.now.sh/upload_images/8bd592eed3b0970775e45c8493e1361161c9ca9f1b976.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/8bd592eed3b0970775e45c8493e1361161c9ca9f1b976.png?mw=700" alt="image.png" /></a></p> <p>地図メニューから、それぞれの機能を利用できます。</p> <ul> <li>地図をリセットする（都道府県の選択状態・色をリセットする）</li> <li>地図の色を変える（日本地図の色を変更できます）</li> <li>日本を踏破する（すべての都道府県を選択状態にします）</li> <li>コピー（日本地図をクリップボードへコピーします）</li> <li>ダウンロード（日本地図をpng画像としてダウンロードします）</li> </ul> <h3 id="チェックボックス"><a href="#%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9">チェックボックス</a></h3> <p><a href="https://crieit.now.sh/upload_images/8bd592eed3b0970775e45c8493e1361161c9cab5eba93.png" target="_blank" rel="nofollow noopener"><img src="https://crieit.now.sh/upload_images/8bd592eed3b0970775e45c8493e1361161c9cab5eba93.png?mw=700" alt="image.png" /></a></p> <p>日本地図上から都道府県を選択する以外に、チェックボックスでも選択することができます。チェックボックスで選択すれば連動して日本地図上の都道府県も選択状態になります。</p> <h2 id="ソースコード"><a href="#%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89">ソースコード</a></h2> <p>日本踏破図🗾のソースコードはMITライセンスで公開しています👉</p> <p><a target="_blank" rel="nofollow noopener" href="https://github.com/k-urtica/traverse-japan">https://github.com/k-urtica/traverse-japan</a></p> <h2 id="さいごに"><a href="#%E3%81%95%E3%81%84%E3%81%94%E3%81%AB">さいごに</a></h2> <p>登録ログイン不要で使えるのでぜひ使ってみてください。<br /> よろしくおねがいします！</p> <p>🌐 サイト：<a target="_blank" rel="nofollow noopener" href="https://traverse-japan.dev/">https://traverse-japan.dev/</a><br /> 👀 開発：<a target="_blank" rel="nofollow noopener" href="https://twitter.com/k_urtica">K</a><br /> 🚩 ソース：<a target="_blank" rel="nofollow noopener" href="https://github.com/k-urtica/traverse-japan">https://github.com/k-urtica/traverse-japan</a></p> <h2 id="おまけ"><a href="#%E3%81%8A%E3%81%BE%E3%81%91">おまけ</a></h2> <p>Web ToolBoxというブラウザで無料で使えるツール集を公開しています。<br /> こちらもよろしくおねがいします。</p> <p><a target="_blank" rel="nofollow noopener" href="https://web-toolbox.dev/">https://web-toolbox.dev/</a></p> K@個人開発バックエンドエンジニア