こんにちは。
春休みになり、2年生の初めから始めた塾講師のアルバイトも授業がぱったりと入らなくなったので、何か作りたいなと思いました。
ちょうど諸般の事情でNext.jsを勉強しなければいけなかったので、Next.jsと今話題のヘッダレスCMSでブログサイトでも作ってやろうかなと思ったのがちょうど1か月前くらいの出来事です。テキトウにやれば三日間くらいで完成するかなという甘すぎる見積もりから大きく逸れ、構想から1か月ようやく公開してもいいかなという感じの出来になりました。
まだまだ改善点はあるのですが、全て直してからにしようと思うと、いつものようにGoogle Driveのマリアナ海峡くらい深い階層に追いやられ、日の目を見ることなく忘れ去られるまで完成しないと思ったので、修正点はおいおい直していくことにして、ひとまず最初の記事を書き始めました。
このサイトは何なのか?
ブログではない
いきなり第一段落と矛盾するのですが、このサイトはブログではありません。
ポートフォリオサイトです。
ブログというと、ビュー数を稼いで広告はったり、アフィリエイトしたりするイメージ(偏見)があるのですが、そうではなく自分が作った作品を公開したり、勉強した内容をアウトプットできる場になればいいなと思い開設しました。ですので、「SAMRモデルをまとめなおす。」等といった記事ではなく、「【簡単】学生ができる副業10選!」とかいう記事が公開され始めたら、急いで電話してください。「お前、初心忘れるなよ」と。
アウトプット・公開の場
上にも書きましたが、このサイトは作品の公開や勉強した内容のアウトプットの場にしたいと考えています。Next.jsやNextronなどの技術系の内容の他に、高校の情報科教育法などについての勉強のモチベーションになればいいなと思っています。
これは高校時代から一貫して言っていることなのですが、サービスとかアプリとか、何らかの形で公開し、一般の人が使える状態(実際使われるかどうかはおいておいて)にすることが重要だと思います。だからこそ、実際に売られていたり、世界中で使われている商品やアプリの細部までをマネする盛大なおままごとをしているわけです。何かしらの出力というか成果物を作るところまでもっていくことが大切で、本当に重要なのはその過程で得るものなのかもしれませんが、それはその時にはわかりません。兎にも角にも成果物までもっていくという考えがしっくりと来ます。
あと、普通に文章書くの上手になりたいなって思っています。この記事みたいに回りくどい文章ばかり書いてしまうのはいい加減卒業したいです。
このサイトの紹介
構成
このサイトは、MicroCMSでコンテンツ管理をして、Next.js(JavaScript)でフロント部分を作りました。JavaScriptにしたのは、単純なサイトを作るだけなのに型とか意識する必要あるんか??という浅はかな考えからです。サイト程度であれば特に不都合も起きにくいし、無理してTypeScriptを採用するメリットも少ないかなとは感じますが、どうなんですかね。
ページルーター構成にしましたが、これはアップルーターとどっちがいいんだ?と悩んだ末にYouTubeで検索したところ、単純なサイトくらいならページルーターの方がこれまでの文献とかも参考にできるしいいのでは?と言っている海外の方の動画がヒットしたからです。せっかく作るならアップルーターに慣れる意味でも、そちらを選択するべきでした。普通に後悔しています。
大変だったポイント
どんなサイトにもあるような何の変哲もないような機能でも、自分で実装するとなると結構難しかったものがあります。
お問合せフォーム
お問合せフォームどうするのか問題はありますよね。以前から静的サイトを作る機会があったのですが、お問合せフォームを付けようとするとサーバーサイドの処理がどうしても必要となり、相応のサーバーを借りる必要が出てしまいます。こうした問題への最適解だと私が信じているのが、Google Formにフォーム内容を送るという力技で、GAS等と組み合わせることで自動返信メール等も送れ、本格的なフォームを提供することができます。
しかしながら、リダイレクトを抑制するなどの処理を書かなければいけないこと、Google Formの公式の使い方ではないので、規約違反とまではいかないにしても、何らかの仕様変更で動かなくなることも予想され、あくまでも最終手段感が否めません。
今回は、元々Vercelでホストするつもりだったので、Google Form裏技を使わないで、正攻法で作ろうと考えました。Nodemailerを使って管理アドレスにお問合せメールを送信するとともに、入力されたメールアドレスにお問合せ完了メールを送信するようにプログラムしました。フォームのバリデーションチェックを実装する過程でuseStateなどにも触れることができたので、悪くない選択だったとは思いますが、丸一日くらいかかりました。
サムネイル生成
QiitaとかZennとかのように、OGP画像(SNSに挙げた時などに表示されるサムネイル画像)を自動生成する機能を付けたいと考えました。世界中には同じようなことを考えている人が何億人といるそうで、調べたところnext/ogのImageResponseなるものを使うと簡単に作れることが分かりました。ただし前述の通り、ページルーターを選んでしまったので、このサイトからしか呼び出さないのにAPIとする必要があり、なんか無駄だなと感じました。
基本的にはHTML, CSSでデザインしたOGPカードを画像ファイルに出力してくれるので難しいことはないのですが、VercelのEdge Functionはバンドルサイズが1MB以下である必要があり、僕が使いたかったNoto Sans JPは常用漢字等にのみサブセット化したとしても600KB程度あるため、この制限を満たすのがとても大変でした。結局は、Google Fontをリンクで呼び出す方法が紹介されていたので、そちらを採用して解決しましたが、ごにょごにょするのに三日間くらいかかりました。
たぶん、このサイトの中で一番時間かかりましたが、記事を書くたびにサムネイルを手動で作るなど想像を絶する面倒くささなので、無事実装出来て良かったです。
カスタムクラス
HackMDなどで使える装飾が、このサイトでもつけるといいかなと思い、カスタムクラスを設定しました。
情報追加情報などはこのブロック
文章の中のコード部分や単語強調などは、<h1>Hello, world !</h1>として表示できるようにしました。
最後に
普段から感じていることですが、春休みになっていろいろな人と話すと特に感じることがあります。「僕ってなにも話せることがないな」と。もちろん大学に通っていて、テスト前には勉強しているわけですから、全く知識がないわけではないですが、テスト勉強のための知識というか、何か聞かれてるとすぐ「それはわからないなぁ」という境地に達してしまうわけです。これが俗にいうテストのための勉強しかしない大学生の問題点で、勉強している内容が体系的な知識にはなっていないのです。
春休みだからこそ、自分でテーマを見つけて勉強し、このサイトにまとめていけたらなと思っています。
これが最後の記事にならないことを祈って。