<h3 id="hd2c91c24e4">経緯</h3><p>勉強ついでに<a href="https://nextjs.org" target="_blank" rel="noopener noreferrer">Next.js</a>と<a href="https://microcms.io" target="_blank" rel="noopener noreferrer">microCMS</a>を使ってブログを作ってみましたが、そういえば使い方をちゃんと考えていませんでした。<br></p><h3 id="h51c34d5345">決めたこと</h3><p>僕は自分のTwitterを公開日記として利用していますが、Twitterでは書きづらいことが結構あります。なので、ここでは技術記事の他にTwitterでは書きづらい普段考えてることや他人と共有したいことも記録してみようと思います。<br><br>おわり</p>

このブログの使い方を考えた

<p>2020年12月28日に<a href="https://pigu-ryu.web.app" target="_blank" rel="noopener noreferrer">pigu</a>という僕が所属している琉球大学の学生向け情報共有サイトをリリースしました。大学に関する様々な情報を学生同士で共有し、効率的な情報収集を実現するためのサイトです。<br><img src="https://images.microcms-assets.io/assets/3c1fa25360b2455ab94fa433bfcfb496/d1c6f14949174f3e97f1e31f9198a59f/4D88B476-B729-432F-9B6B-8718504E22FE.png" alt=""><br></p><h2 id="hbfcfc70a17">作ったきっかけ</h2><p>履修登録の時期になると僕のTwitterのタイムラインが「授業の登録ってどうやるの？」「おすすめの授業教えてください！」といったツイートで溢れていたので、これをWebサイトと言う形で一箇所にまとめれば便利そうだなと思ったのがきっかけです。<br></p><h2 id="h30d3a3acf4">開発期間</h2><p>2020年10月頃から開発を始め、約2ヶ月でリリースしました。その後も2021年5月頃までは頻繁に機能追加を行っていました。リリース後に追加した主な機能には画像投稿機能、通知機能、検索機能などがあります。サイトのUIもかなり変化しました。</p><h2 id="h7d2fabe872"><br>よかったこと・嬉しかったこと</h2><h3 id="hfc6d69391d">意外と反応があった</h3><p>最初はユーザー0人も覚悟していましたが、Twitterでリリースの報告をしたところ、いいね数がそこそこ伸びました。2021年8月現在では200人近くの登録ユーザーがおり、投稿数は150を越えました。piguをリリースする前まではWebサービスの開発など、実績と呼べるものが何も無い状態だったため、多少は自信がつきました。<br></p><h3 id="h200dd9f1e0">技術力の向上に繋がった</h3><p>このサイトは<a href="https://reactjs.org" target="_blank" rel="noopener noreferrer">React</a>と<a href="https://firebase.google.com" target="_blank" rel="noopener noreferrer">Firebase</a>を使って構築しました。<a href="https://qiita.com/tyoukan__/items/e4582c6774748b7f96cd" target="_blank" rel="noopener noreferrer">Vanilla JS</a>から<a href="https://www.typescriptlang.org" target="_blank" rel="noopener noreferrer">TypeScript</a>への移行、Cloud Firestoreのデータ設計、canvasやCloud Functionsを使った動的OGPの生成、Cloud Firestoreと<a href="https://www.algolia.com" target="_blank" rel="noopener noreferrer">Algolia</a>を利用した全文検索機能の実装など、開発を通して様々な知見が得られました。<br></p><h3 id="h8240835f5f">「プログラミングしてる人」として認知されるようになった</h3><p>このサイトを作ったことがきっかけで、Twitterでは「プログラミングしてる人」として認知されるようになりました。大学では初対面の人がpiguの存在を知っていた or 使ってくれていたということも何度かありました。一部で色々と勘違いされて歯痒い思いもしましたが、工学部の知能情報コース（情報工学専攻）のLT会に登壇させていただいたり、他の学生からWeb開発の依頼をいただいたりと、結果的には良かったと思っています。<br></p><h2 id="h16a1555b40">後悔したこと・苦労したこと</h2><h3 id="h6c86d31640">技術選定</h3><p>リリース当時はここまでサービスの運用が続くことを想定していなかったため、今までに使用した経験のあるVanila JSとReactでUIを構築し、Sassでスタイリングを行いました。しかし今ではキャッチアップのための学習でリリース時期が数ヶ月伸びてでもTypeScript, <a href="https://github.com/css-modules/css-modules" target="_blank" rel="noopener noreferrer">CSS Modules</a>, <a href="https://tailwindcss.com" target="_blank" rel="noopener noreferrer">Tailwind CSS</a>, <a href="https://nextjs.org" target="_blank" rel="noopener noreferrer">Next.js</a>などの技術を導入するべきだったと後悔しています。Vanilla JSからTypeScriptへの移行はなんとかできましたが、Next.jsやTailwind CSSへの移行は時間的に厳しそうです。今後またWebサービスを作る際は特に気をつけたいところです。<br></p><h3 id="h88d7e66110">質問への対応</h3><p>サービスに関する意見や要望を集めたかったので、サイトとは別に質問箱 (<a href="https://peing.net/ja" target="_blank" rel="noopener noreferrer">Peing</a>) を設置しました。しかし、質問箱に届いたものは本来ならpiguに投稿して欲しかった大学関連の質問がほとんどでした。もちろん、このような質問に回答するとpiguへの投稿はさらに減ってしまうのですが、当時は「質問を無視するとサービスを使ってもらえなくなるかもしれない」とか余計なことを色々と考えてしまい、すぐに対策を講じることができませんでした。最終的にはサービスに関する質問以外には答えないことにしました。<br></p><h3 id="hc70adb36da">考えるべきことの選択</h3><p>一時期はTwitterで大学についての質問をする新入生を見るたびに「この人はどうしたらpiguを使ってくれるんだろう…」と考えては結局何も答えが出せず、ひたすら落ち込んでいました。当然そんなことは本人に直接理由を聞くか、自分なりに仮説を立てて色々試してみない限り何もわからないままですが、ただ考え続けたところで答えが出ない問題であるということに気付き、その行為をやめるまでに時間がかかりました。<br></p><h2 id="h099ddba583">今後の予定</h2><p>サービスの運用をいつまで続けるかはまだ未定ですが、当分の間は続けます。そこで問題になるのは公式Twitterアカウントの運用です。公式アカウントでの投稿の共有がないと閲覧数がなかなか伸びないため、piguに投稿するメリットが弱くなってしまいます。そのため、Twitterでの投稿の共有は不可欠です。しかし、現在は全て手動でツイートしいて、投稿のURLを共有するまでにボタンを何回も押さないといけないため、正直かなり面倒です。他にも様々な問題はありますが、まずはこの問題を解決するためのシステムを構築する予定です。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>運用のことで悩んでつらい時期もありましたが、それ以上に良いことがたくさんありました。サイトの発展に貢献し、応援してくれた方々にはとても感謝しています。これを糧にして今後もサービスの開発などに励みたいと思います。この記事が誰かのお役に立てれば幸いです。</p>

個人開発で大学の学生向け情報共有サイトを作った話

<h2 id="hfe5a8eaaf7">実行環境</h2><p>nodeのバージョンはv14.17.2を使用しています。</p><pre><code>$ node -v
v14.17.2</code></pre><h2 id="h384b2ddcf8">ランダムな文字列を生成する</h2><p>今回は<a href="https://github.com/pvorb/node-crypt" target="_blank" rel="noopener noreferrer">crypt</a>というnpmパッケージを使用します。</p><h3 id="hf031c5e696">実装方法</h3><p>まず、<code>require('crypto').randomBytes()</code>で任意の長さのランダムバイトの配列を生成します。</p><pre><code>$ node -e "console.log(require('crypto').randomBytes(64));"
&lt;Buffer 41 2f 2e 28 55 0c 43 fa 02 07 65 52 c4 ed dc 26 a4 0a f3 12 79 2f e4 dd 7b a0 5b 2d 75 e5 98 1b 21 44 92 18 0c 06 ae 01 26 1a be 54 0d 93 a3 da 70 f0 ... 14 more bytes&gt;</code></pre><p>これを<code>toString()</code>で文字列に変換することでランダムな文字列の生成が実現できます。<br><br>以下の例では64byte<span style="color:#252525">のランダムバイトの配列を</span>生成した後、16進数の文字列に変換しています。</p><h3 id="hcd47fad4c8">実行例</h3><pre><code>$ node -e "console.log(require('crypto').randomBytes(64).toString('hex'));" 
ac6d26b6b4f9edf72ec669a03d01a1fee25672b0508db26ddc57861a9909418a8dcd2aba6fbfe27e2ebc9ab377cee840e22a87ac5f765208fcd3b15fe3971d43</code></pre>