ねこづきあゆむのブログ

今回、ブログとポータルサイトをPWA化しました。PCだとアドレスバー、スマホだとホーム画面に追加から、Webアプリとして実行できるあれです。そんなPWAを導入するにあたって、色々と覚え書きを書いておきます。NuxtjsでのPWAの導入導入はクソほど簡単。最初のyarn create nuxt-app <project-name>の中でPWAの選択項目があるので、それを選択して入れればとりあえずOK。モジュールが入ったら、nuxt.config.js に色々書き加えます。正直何が必須で何が任意かよくわからなかったので、適当に書きました。 pwa: { manifest: { name: 'ねころぐ', lang: 'ja', short_name: 'ねころぐ', description: 'ねこづきあゆむの過去ログ倉庫です。', display: 'standalone', start_url: '/', theme_color: '#7f7fff', background_color: '#EFEFFF', }, icon: { source: '/static/icon.png', fileName: 'icon.png' } },上から順にmanifestname: サイトの名前lang: 言語short_name: アプリの短縮名（ホーム画面に出てくる簡略化した名称）description: 概要文display: 実行モード（いろいろあるらしい）start_url: アプリのメインURLtheme_color: テーマカラーbackground_color: 背景色iconsource: アイコンの位置fileName: アイコンのファイルネームこれでとりあえず完了です。あ、開発環境で確認したい時は dev: trueをつけてください。キャッシュが残りすぎて記事が更新されない問題とりあえず実装したはいいものの、キャッシュ周りでごちゃごちゃし始めました...。PWAは仕様上、キャッシュ優先で拾ってくるので、記事が更新されていても表示上更新されていないように見えることになります。なので、workboxでキャッシュ時間を指定してあげるといいっぽいです。（ネットで拾ってきたものをそのままやってるのであまり理解してないので、今後理解したい） workbox: { dev: true, offline: false, skipWaiting: true, clientsClaim: true, runtimeCaching: [ { urlPattern: `/api_nicorepo/*`, handler: 'staleWhileRevalidate', method: 'GET', strategyOptions: { cacheExpiration: { maxAgeSeconds: 60 * 15, // 15分 }, cacheableResponse: { statuses: [200], }, }, }, { urlPattern: `/api_mc_nekolog/*`, handler: 'staleWhileRevalidate', method: 'GET', strategyOptions: { cacheExpiration: { maxAgeSeconds: 60 * 30, // 30分 }, cacheableResponse: { statuses: [200], }, }, }, { urlPattern: `/api_mc_nekozukime/*`, handler: 'staleWhileRevalidate', method: 'GET', strategyOptions: { cacheExpiration: { maxAgeSeconds: 60 * 60 * 3, // 3時間 }, cacheableResponse: { statuses: [200], }, }, }, { // デフォルト（最後に記述する） urlPattern: '/*', handler: 'networkFirst', method: 'GET', }, ], }あと、microCMSでWebhook投げれるので、microCMSで記事更新 → Vercelで受け取ってデプロイ させてます。とりあえず覚え書きでした。

どうも、猫月遥歩です。先日、ポータルサイト nekozuki.me をリニューアルしました。リニューアルの経緯や、各所に急に出てきた紫のねこについては、後日また告知(?)します。この記事では、リニューアルの時に触った @nuxtjs/axios についての覚え書き記事です。@nuxtjs/axios の Proxyまわりについて@nuxtjs/axios、ネット上にいろんな記事が出ていて、特にproxy周りで情報が錯綜しています。proxy: trueを入れるとか入れないとか。調べた感じ、公式ドキュメントがやはり一番っぽいので、ドキュメントベースで進めてみてください。いろいろ使ってみて、とりあえず 2022年1月現在で動作したものをここにメモしておきます。// nuxt.config.js // Axios module configuration: https://go.nuxtjs.dev/config-axios axios: { // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308 prefix: '/', proxy: true, }, proxy: { '/api_hoge/': { target: 'https://example.com', pathRewrite: { '^/api_hoge/': '/v1/example/' } }, },// pages/example.vue //基本的な使い方 $axios.$get("/api_hoge/"),axiosで複数箇所から取ってくる場合の最適化１ページで複数からaxiosで叩くと、ページのロードに時間がかかります。そのため、Promise.all でまとめて取得すると、時間がかからずに取得できます。 async asyncData({ $axios }) { let [hogea, hogeb, hogec] = await Promise.all([ $axios.$get("/api_hoge_a/v1/schedule"), $axios.$get("/api_hoge_b/"), $axios.$get("/api_hoge_c/v1/article"), ]) return { hogea, hogeb, hogec, }; },@nuxtjs/axios を動かしてると何故か microcmsのNuxtモジュールが動かないなぜかmicroCMSモジュールでエラーが出ます。なので、いっそのこと、microCMSもaxiosで取得しましょう。APIKEYについては、proxyの方に設定しておくと楽です。 proxy: { '/api_mc_nekozukime/': { target: 'https://hogehoge.microcms.io', pathRewrite: { '^/api_mc_nekozukime/': '/api/' }, headers: { "X-MICROCMS-API-KEY": process.env.MC_API_KEY }, }, },// queries なし $axios.$get("/api_mc_nekozukime/v1/schedule"), // queries あり $axios.$get("/api_mc_nekozukime/v1/makes?filters=type%5Bequals%5Dextentions&orders=createdAt"),クエリは、microCMS管理画面の APIプレビュー > cURLを選択して調節すると楽に書けると思います。

この記事は 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」というものを利用する形でリニューアルしました。こんな感じでブログが更新できるのでめっちゃ便利なのです。そんなこんなで、今後もブログ更新していくのでよろしくお願いします！