ねこづきあゆむのブログ

お前しょっちゅうリニューアルしてんなって言われそうな気がしてます、猫月遥歩（ねこづきあゆむ）です。この記事を見に来て、大半の人が気づいてると思いますが、（初めて見に来た人がいたらごめんね）このブログをリニューアルしました。びふぉーあふたーびふぉーあふたーリニューアル後の変更点開発言語を Nuxt(Vue) から Nextjs(React) に変更しました各種情報を、ページにアクセスしてから都度取得ではなく、ブログ記事が公開されたタイミングの情報を拾ってくるようになりました。そのため、閲覧スピード（ページ間移動時のレスポンス）が上がりました。UI、デザインをリニューアルしました元のアイコン（ゆかりさん）から、新しいねこづきのバーチャルアバターをベースに、配色し直しましたサムネイル画像サイズを小さくし、可読性を上げました各種UIサイズを調整しました広告を減らしました（サイドバーにあるやつだけになったよ）Twitterタイムラインウィジェットを削除しました新機能と今後追加したいなって思ってる機能たち新機能目次機能をリリースしましたPC版で右サイドバーに出てきます技術系ブログでよく使うと思います今後追加したいなって思ってる機能コメント機能丸2年ぶりぐらいにDisqus復活させます。TOPICS機能ポータルサイト（nekozuki.me）のTOPや、生放送の配信画面下に出てくるTOPICS・お知らせをブログにも表示させたいなって思ってますついでに、ニコ生配信中の時に自動でWEBに「配信中！」みたいな表示を出したいな〜って軽く思ってますが、どっかからAPI探してこないとなので、時間かかる気がします。ニコ生の埋め込みプレーヤー、あれ使ってもいいんだろうか...限定公開記事機能・課金機能Pixiv FANBOXみたいな記事ごとや月払いの課金制の記事を出せるようにしたいなって思ってますFANBOX更新忘れるので、自分のサイトにデータがあった方が楽というかなんというか....w使ってるCMSの規約周りとか諸々確認が必要なのでこれも結構先になると思いますざっとこんな感じでやりたい機能みたいなのを書いてみました。まぁ当分、1年ぐらいはリニューアルはしないと思いますが、ちょくちょく機能追加とかしていったり、もちろん記事も書いていきますのでぜひ、今後ともねころぐをよろしくお願いします！次回更新はたぶん、配信画面・素材について、動画化してそれの補足的な記事を上げると思いますーではでは〜

どうも、ねこづきあゆむです。タイトル通り、このブログ、以下の更新をしました。公開日時と改訂日時を分けて表示「技術部」タグを整理サムネがない記事のOGPがちゃんと表示されるようにしました公開日時と改訂日時を分けて表示しました元々、公開日時だけ表示してたのを、とあるタイミングから改訂日時だけ表示するようにしていました。ですが、このブログ、過去のWordPressとかブロマガで書いていた記事を移行してきた都合上、改訂日時＝移行日の日付になってしまってました。その為、その記事がいつ公開されたのかわからない状態でした。なので、以下のように、公開日時と改訂日時を分けて表示するように改修しました。カレンダーマークが公開日時、鉛筆マークが改訂日時です。これで色々楽になるよ！やったね！「技術部」タグを整理しましたもともと、「技術小話」というタグだったものを「技術部」タグに直して、技術関連の記事は全てここに纏まるようにしました。このブログ自体、自分がただ記事を書いて個人ブログとして運用していたのですが、色々と技術系の記事も流すようになり、まとまっていた方が色々楽だなと気づいたので、タグでまとめました。そのうちカテゴリも再編すると思います。サムネがない記事のOGPがちゃんと表示されるようにしました（当記事みたいに）サムネを設定してない記事をTwitterに共有した際になぜかOGP画像がFaviconになって見た目的にもSEO的にもよろしくなかったので、ちゃんとOGPが設定されるようにしました。元々設定していたはずなんですが、なぜか、meta_imgにどこかのタイミングでfaviconが代入されるらしく...まぁ治せたので良かったです

この記事は N・S高等学校 Advent Calendar 2021 6日目の記事です。はじめにどうも、N高卒業生（21年3月卒）の猫月遥歩（ねこづきあゆむ）です。現在専門学生なのですが、うちの学校にはアドカレのような文章としてアウトプットしようみたいな取り組みが少ない（というか無い）ので、今年もN高のアドカレに参加させていただいてます。さて、今回は、今みなさんがこの記事を読んでいる個人ブログ「ねころぐ」を最近リニューアルしたので、その話をしようと思います。動機リニューアル前は、静的サイトジェネレーター「Hexo」× Netlify で構築していました。Markdownで記事を書ける等のメリットから利用していたのですが、使っていくうちにいくつかの問題が出てきました。ローカル環境が破損しやすいテーマ（デザイン系）リポジトリとHexoのメインリポジトリが別なので、デザイン修正するには行ったり来たりして修正しないといけない画像周りの管理がめんどいこれに合わせて、ニコニコで活動する上での情報をまとめるのに利用していた「ユーザーブロマガ」がサービス終了したこともあり、ブログのリニューアルを行うことにしました。必要用件ブログ記事更新がしやすいブログ記事で利用する画像の管理がしやすいNuxt.js で作成できる以上の観点から良さげなものを探した時に、友人から「これおすすめだよ〜」と教えてもらったのが microCMSでした。なぜmicroCMSなの？調べていくうちに、目的と合致すること以外にも、ドキュメントが整理されている公式ブログに言語ごとのチュートリアル的なものがたくさん上がっているので、とっかかりしやすい等のメリットがあったため、利用することにしました。いざ、実践！といっても、8割方、公式ブログ通りなので、以下の関連リンクから調べてみてくださいmicroCMS + NuxtでJamstackブログを作ってみよう(microCMS公式ブログ)microCMSのNuxt.js用モジュールを公開しました(microCMS公式ブログ)デザインは、BootstrapVueを利用しながら、Hexo時のデザインを踏襲しつつ作成しました。この記事では、つまずいたことをメインに書いていこうと思います。① Nuxt-linkで移動するとOGPが死ぬNuxt-link とは、aタグ同様、リンクを移動する時に使うやつです。クリックすると、設定したそのページに飛びます。Vueを知る人は、router-link に似るものといえばわかると思います。aタグとの違いは、移動先がNuxt.jsの内部ページであれば圧倒的にパフォーマンスが良いという点です。今回何が問題だったかというと、パフォーマンスが良い代わりにOGPが死にます。正確には、移動前のページのOGPをそのまま受け継いでしまい、Twitterなどへの共有ボタンが機能しなくなるという点です。解決法、知る方いれば教えてください。（今回は諦めて、aタグで妥協しました）② Jamstack化するとOGPが死ぬOGP、おまえ、いっつも死んでんな....先ほど紹介した記事通り、最初は作っていたのですが、一通り作り終え、試しにgenerateすると、なんということでしょう！全ての記事のOGPが、とある１つの記事になっているではありませんか！！なんで...？こちらも、結局解決策がわからず、Jamstackを諦め、SSRで構築しています。③ nuxt-highlightjsで特定のテーマが利用できないこれは大丈夫です。解決済みです。Nuxtで構築するにあたって、便利そうなものをもろもろと入れています。その中にHighlightjsもあります。Highlightjsとは、以下のようにコードを書くと、ハイライトをかけてくれるライブラリです。var message = "Hello world"; console.log(message);nuxt-highlightjsで、テーマ「GitHub Dark」が利用できませんでした。色々試しましたが、正攻法では利用できず、結果、テーマのSCSSを nuxt.config.js で直読みしています。 css: [ '~/assets/icomoon_fonts/icomoon-style.css', 　//オリジナルsvgフォントファイル '~/assets/style/github-dark.scss', //HighlightJS テーマ '~/assets/style/main.scss' ],感想約２週間の突貫工事だったため、まだ色々と足りていない部分があります。先ほどあげたつまづきも、力技でなんとかしているだけなので、いつかちゃんとした解消法を見つけて直していきたいです。今後について今後は、ページ移動時のレスポンスの遅さを解消Disqusの再導入あたり進めていきたいなと思っています。おわりにいかがでしたでしょうか。作っていて楽しかったです。みなさんもぜひ、Nuxt.js × microCMSでブログを作ってみてはいかがでしょうか。N・S高等学校 Advent Calendar 2021 、明日以降もまだまだ続きますので、ぜひ、引き続きご覧ください。以上、猫月遥歩（ねこづきあゆむ）でした。Thank you for Reading!

どうも、お久しぶりです。猫月遥歩です。ブログ、更新止まっててすいません。まぁ動画の更新も止まってるんですが。色々と、某組織の生放送を作ったり、某フェスのWebサイトを作ったりとか。いろいろ裏方のお仕事をがんばってます。今月末から「近況報告」再開しようと思うので、またよろしくお願いします。さて、ブログをリニューアルしたお話です。今回はただの報告ですが、後日また詳しい構成や作った時のポイント等話そうと思います。なぜリニューアルしたかというと、更新がめんどかったからです。というのも、前のブログシステム（Hexo）は、記事データをMarkdownで書き、それをGitHubに上げると更新されるというめんどくさいものでした。しかもデザインファイルが詰まったリポジトリと、記事データ・構成データのリポジトリが別になっていたのでそれはそれで面倒。ということで「microCMS」というものを利用する形でリニューアルしました。こんな感じでブログが更新できるのでめっちゃ便利なのです。そんなこんなで、今後もブログ更新していくのでよろしくお願いします！