<h2 id="hd28e9553ca">ダークモード</h2><p>一昨年あたりからwebデザインにおいてもトレンドになったダークモード。<br>「目に優しい」などのさまざまな効果がありますが今回はデモのようなダークモードとライトモードを切り替えるスイッチャーを作りたいと思います。</p><iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2Fwatataku8911%2Fembed%2Fpreview%2FNWzzPPG%3Fdefault-tabs%3Dcss%252Cresult%26height%3D600%26host%3Dhttps%253A%252F%252Fcodepen.io%26slug-hash%3DNWzzPPG&display_name=CodePen&url=https%3A%2F%2Fcodepen.io%2Fwatataku8911%2Fpen%2FNWzzPPG&image=https%3A%2F%2Fshots.codepen.io%2Fwatataku8911%2Fpen%2FNWzzPPG-512.jpg%3Fversion%3D1671265134&key=94335756f04b424b8ce3ce71cbe3de0a&type=text%2Fhtml&schema=codepen" width="800" height="600" scrolling="no" title="CodePen embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe><p><br></p><h2 id="hedbfa7dcce">スイッチを作る。</h2><p>では、早速ダークモードとライトモードを切り替えるスイッチを作っていきます。<br>スイッチを作るためにはHTMLでチェックボックスを用意する必要があります。</p><pre><code>&lt;form action="#"&gt;
    &lt;label class="switch"&gt;
      &lt;input type="checkbox" class="checkbox"/&gt;
      &lt;span class="slider"&gt;&lt;/span&gt;
    &lt;/label&gt;
&lt;/form&gt;</code></pre><p>これだけでは普通のチェックボックスがひとつできあがるだけです。<br>なのでCSSを適応させます。</p><pre><code>.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #33f321;
}

input:focus + .slider {
  box-shadow: 0 0 1px #33f321;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

.slider {
  border-radius: 34px;
}

.slider:before {
  border-radius: 50%;
}</code></pre><p>少し長いかもですがこれで切り替え用のスイッチができました。<br>ですが、このままでは何も変化しない普通のスイッチです。ですのでスイッチをオンにするとダークモードに切り替え、オフるとライトモードに切り替わるようにします。</p><h2 id="hd148c32f21">JavaScript</h2><p>まず、必要になってくるのは「今、スイッチがオンなのかオフなのか」の状態を知らなければいけません。<br>その情報をとってくるには下記コードで取得可能です。</p><pre><code>const element = document.querySelector(".checkbox");
element.addEventListener("change", myfunc);

function myfunc() {
  if (element.checked) {
     console.log("スイッチがオンになりました。");
  } else {
     console.log("スイッチがオフになりました。");
  }
}</code></pre><p>無事チェックボックス(スイッチ)の状態を取得することができました。</p><h2 id="hcfd88cd66f">ダークモードにする</h2><p>ではいよいよダークモードにします。<br>以下のコードでダークモードにできます。</p><pre><code>document.documentElement.setAttribute("data-theme", "dark");</code></pre><p><br>ちなみにダークモードを解除、即ちライトモードにする方法は下記コードです。</p><pre><code>document.documentElement.removeAttribute("data-theme");</code></pre><p><br>従ってスイッチがオンの時にダークモードにオフの時ライトモードにするには</p><pre><code>const element = document.querySelector(".checkbox");
element.addEventListener("change", myfunc);

function myfunc() {
  if (element.checked) {
    document.documentElement.setAttribute("data-theme", "dark");
  } else {
    document.documentElement.removeAttribute("data-theme");
  }
}</code></pre><p>これでスイッチがオンの時にダークモードにオフの時ライトモードに切り替わりましたがまだ何も変わりません。<br><br>最後にCSSでダークモードならこの色、ライトモードならこの色を適応させるようにすれば終わりです。</p><pre><code>:root {
  --bgColor: #fff;
}

[data-theme="dark"] {
  --bgColor: #101010;
}

body {
  background-color: var(--bgColor);
}</code></pre><p>これで完成!!<br><br><br></p>

ダークモードとライトモードを切り替えるスイッチャーを作りました。

<p>こんにちは。<br>今回は題名にもありますが、突然Vercelにデプロイできなくなってしまったので私がどのように解決したのかダラダラやっていきます。</p><h2 id="h3a5ddd2120">ログを確認しろ！！</h2><p>当たり前ですが「ログを確認しろ！！」です。<br>ログにはエラーの原因が必ず書いています。(英語なので読む気が失せますが。。。)<br><br>自分の場合も遠回りしましたがログを見ました。<br>その内容がこれです。</p><pre><code>[16:53:54.204] Cloning github.com/watataku8911/watataku-blog (Branch: develop_ver.14, Commit: 7200375) [16:53:54.952] Cloning completed: 748.213ms [16:53:55.338] No Build Cache available [16:53:55.375] Running "vercel build" [16:53:55.851] Vercel CLI 28.2.5 [16:53:56.135] Detected `package-lock.json` generated by npm 7+... [16:53:56.143] Installing dependencies... [16:54:20.016] [16:54:20.016] added 824 packages in 24s [16:54:20.017] [16:54:20.017] 133 packages are looking for funding [16:54:20.017] run `npm fund` for details [16:54:20.044] Detected Next.js version: 12.0.7 [16:54:20.052] Running "npm run build" [16:54:20.346] [16:54:20.347] &gt; build [16:54:20.347] &gt; next build [16:54:20.347] [16:54:22.229] Attention: Next.js now collects completely anonymous telemetry regarding usage. [16:54:22.230] This information is used to shape Next.js' roadmap and prioritize features. [16:54:22.230] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL: [16:54:22.230] https://nextjs.org/telemetry [16:54:22.230] [16:54:22.245] Browserslist: caniuse-lite is outdated. Please run: [16:54:22.245] npx browserslist@latest --update-db [16:54:22.245] [16:54:22.245] Why you should do it regularly: [16:54:22.245] https://github.com/browserslist/browserslist#browsers-data-updating [16:54:22.286] info - Checking validity of types... [16:54:27.983] info - Creating an optimized production build... [16:54:28.045] &gt; [PWA] Compile client (static) [16:54:28.045] &gt; [PWA] Auto register service worker with: /vercel/path0/node_modules/next-pwa/register.js [16:54:28.046] &gt; [PWA] Service worker: /vercel/path0/.next/sw.js [16:54:28.046] &gt; [PWA] url: /sw.js [16:54:28.047] &gt; [PWA] scope: / [16:54:28.214] Browserslist: caniuse-lite is outdated. Please run: [16:54:28.215] npx browserslist@latest --update-db [16:54:28.215] [16:54:28.215] Why you should do it regularly: [16:54:28.215] https://github.com/browserslist/browserslist#browsers-data-updating [16:54:28.238] &gt; [PWA] Compile server [16:54:38.048] Failed to compile. [16:54:38.048] [16:54:38.048] Please check your GenerateSW plugin configuration: [16:54:38.048] [WebpackGenerateSW] 'pwa' property is not expected to be here. [16:54:38.048] [16:54:38.048] [16:54:38.048] &gt; Build failed because of webpack errors [16:54:38.075] Error: Command "npm run build" exited with 1</code></pre><p>見てるだけで吐き気を起こしてしまいます。<br>でも、よく見るとエラーの原因が書いてありました。</p><pre><code>Browserslist: caniuse-lite is outdated. Please run: [16:54:28.215] npx browserslist@latest --update-db</code></pre><blockquote>Browserslist: caniuse-lite は古くなっています。npx browserslist@latest --update-dbを実行してください。</blockquote><p>とりあえず指示通りに書きコマンドを実行しました。</p><pre><code>$ npx browserslist@latest --update-db</code></pre><p>実行後、デプロイできました。良かった良かったw</p><h2 id="ha214098e44">まとめ</h2><p>ログを見ろ！！以上。さすれば解決できる。</p><h2 id="h7605dc6208">参考文献</h2><ul><li><a href="https://dev.classmethod.jp/articles/asked-to-update-the-browserslist-when-building-react-app/" target="_blank" rel="noopener noreferrer">アプリのビルド時にBrowserslistの更新を要求されるので対処してみる</a></li><li><a href="https://mutter.monotalk.xyz/posts/0e47ac7712c43f814af104b7161672e7" target="_blank" rel="noopener noreferrer">Browserslistをdbを更新しろというエラー</a></li></ul>

ぴえん。。。突然Vercelにデプロイできなくなったよ〜。。。

<p>従来、スクロールに合わせて要素を操るには&nbsp;<code>scroll</code>&nbsp;というイベントを利用していました。ただ、それだと画面サイズが変わったら再計算しないといけなかったり、スクロールするたびに関数を呼び出すので、パフォーマンスへの悪影響が懸念されていました。<br>それを解決するが本日紹介する<code>IntersectionObserver</code>です。</p><h2 id="h64f1545640">IntersectionObserverって？</h2><p>IntersectionObserverとは、<code>Intersection：交差　, Observer：観察者</code>という意味があります。つまり、<em>特定の要素が指定領域内に入ったかどうかを検知するAPI</em>のことです。なので、スクロールイベント等を実装するときに使用するAPIです。<br><a href="https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API" target="_blank" rel="noopener noreferrer">https://developer.mozilla.org/ja/docs/Web/API/Intersection</a><a href="https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API" target="_blank" rel="noopener noreferrer"><em>Observer</em></a><a href="https://developer.mozilla.org/ja/docs/Web/API/Intersection_Observer_API" target="_blank" rel="noopener noreferrer">API</a></p><h2 id="hfb33a5fbbe">IntersectionObserverの基本的な使い方</h2><p>基本的には&nbsp;<code>IntersectionObserver</code>&nbsp;を呼び出して、第1引数に実行したい関数、第2引数にオプション設定を記述します</p><pre><code>const options = {
&nbsp;&nbsp;root: document.querySelector('#scrollArea'),
&nbsp;&nbsp;rootMargin: '0px',
&nbsp;&nbsp;threshold: [0.2, 1.0]
}
&nbsp;
const observer = new IntersectionObserver(callback, options);</code></pre><p><code>options</code>&nbsp;オブジェクトは、以下のフィールドがあります:</p><h3 id="h1907563bc5">root</h3><p>ターゲットとなる要素が見えるかどうかを判定するためのベース部分を指定します。デフォルトはブラウザのビューポートです。</p><h3 id="h0e63ef043f">rootMargin</h3><p>交差を計算する際は、実際は基準要素の領域にここで指定した余白値を足した領域が計算基準となる。つまり例えばここに正の値を指定すれば、実際に見える前に交差していると判定させることができる。デフォルトは&nbsp;<code>0px</code>&nbsp;です。</p><h3 id="hf6a8a7bf34">threshold</h3><p>関数を実行するタイミングを 0〜1 の間で記述します。コールバックを実行する交差の閾値リスト。交差の割合が閾値を上回るか下回ったときのみコールバック関数が実行される。<em><code>[0, 0.5, 1]</code></em>&nbsp;のように配列形式でも記述できます。上の例でいうと、見えている割合が20％および100％を上回るか下回ったときにコールバックが実行される。デフォルトでは<code>0</code>&nbsp;です。</p><h2 id="h870778ef3e">IntersectionObserverの設定</h2><p>では、実際に<code>IntersecftionObserver</code>を設定し、要素の監視をしてみましょう。</p><pre><code>// 交差を監視する要素の取得
const boxes = document.querySelectorAll(".box");

const options = {
  root: null, // 今回はビューポートをルート要素とする
  rootMargin: "-50% 0px", // ビューポートの中心を判定基準にする
  threshold: 0 // 閾値は0
};
const observer = new IntersectionObserver(doWhenIntersect, options);

// それぞれのboxを監視する
boxes.forEach(box =&gt; {
  observer.observe(box);
});

/**
 * 交差したときに呼び出す関数
 * @param entries
 */
function doWhenIntersect(entries) {
  entries.forEach(entry =&gt; {

    // --------------------- この構文が肝 ------------------------------
　　　 // 交差検知をしたもののなかで、isIntersectingがtrueのDOMにactiveクラスを付与。そうでなければ、activeクラスを取り除く
    if (entry.isIntersecting) {
      entry.target.classList.add("active");
    } else {
      entry.target.classList.remove("active");
    }
    // ---------------------------------------------------------------------

  });
}</code></pre><p><br></p><pre><code>.box {
  option: 0;
}
.box.active {
  option: 1;
}</code></pre><p>最後までお読みいただきありがとうございました。<br>参考になれば幸いです<br><br><span style="color:#cf3e51">※</span><strong style="color:#cf3e51">閾値(しきいち)</strong><span style="color:#cf3e51">とは、境界となる値。</span></p>

IntersectionObserverを使ったスクロールイベント実装

<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんは。<br>Watatakuです。<br>突然ですが、<code>$ npx creat-react-app</code> ができなくなりました。</p><pre><code>$ npx create-react-app my-app
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0).

We no longer support global installation of Create React App.

Please remove any global installs with one of the following commands:
- npm uninstall -g create-react-app
- yarn global remove create-react-app

The latest instructions for creating a new app can be found here:
https://create-react-app.dev/docs/getting-started/</code></pre><p><br>は？<br></p><h2 id="h5d27caa348">とりあえず、指示通りやる</h2><pre><code>$ npm uninstall -g create-react-app

up to date, audited 1 package in 237ms

found 0 vulnerabilities</code></pre><p><br>無理。。。<br></p><h2 id="h7e60ca8c44">ちょっと待て・・・！！</h2><pre><code>Need to install the following packages:
  create-react-app</code></pre><p><br>あっ・・・<br>ちゃんとエラー見よな。。。<br></p><h2 id="h141087ae17">解決法</h2><p>キャッシュクリアする。</p><pre><code>$ npx clear-npx-cache</code></pre><p><br></p><h2 id="h3de35099b3">参考</h2><p><a href="https://qiita.com/kurab/items/6c6056d06d053631b596" target="_blank" rel="noopener noreferrer">npx create-react-app できない時</a><br></p>

$ npx create-react-appができなくなってしまった。。。

<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんわ。<br>Watatakuです。<br>今回の書いていく内容は「Next.js における環境変数の基本的な設定方法」です。<br><br><code>env</code>&nbsp;ファイルの基本的な使い方の参考になれば幸いです！</p><h2 id="hdad28025e6">環境変数の基本的な設定方法</h2><p>バージョン 9.4 以上の Next.js から、環境変数のサポートが組み込まれています。<br><br>環境変数を設定する基本的な方法は以下の通りです。</p><ul><li>基本的には&nbsp;<code>.env.local</code>&nbsp;に環境変数を定義（詳細は後述）</li><li>設定した環境変数を呼び出すときは&nbsp;<code>process.env.環境変数名</code>&nbsp;とする</li><li>ブラウザで環境変数を使用したい場合は、先頭の文字を&nbsp;<code>NEXT_PUBLIC_</code>&nbsp;とする</li></ul><pre><code>// .env
API_KEY=abcdefghijk</code></pre><p><br></p><pre><code>// pages/index.tsx
import { GetStaticProps } from 'next';

// サーバー側で実行
export const getStaticProps: GetStaticProps = async () =&gt; {
  console.log(process.env.API_KEY);
  ...
};

// クライアント側で実行
export default function Index(): JSX.Element {
  return (
    &lt;&gt;
      {process.env.API_KEY}
    &lt;/&gt;
  );
}</code></pre><p>Next.js では&nbsp;<code>env</code>&nbsp;ファイル名に応じて、<strong>開発 / 本番環境で切り替えることができます</strong>。具体的なルールは以下の通りです。<br></p><ul><li><code>.env</code>：常に読み込み</li><li><code>.env.development</code>：開発環境</li><li><code>.env.production</code>：本番環境</li><li><code>.env.local</code>：常に読み込み</li><li><code>.env.development.local</code>：開発環境</li><li><code>.env.production.local</code>：本番環境</li></ul><p><br>基本的にシークレットな値は&nbsp;<code>.env*.local</code>&nbsp;で定義を行い、<code>.gitignore</code>&nbsp;でリポジトリから除外します。<br>一方で、<code>.env</code>&nbsp;/&nbsp;<code>.env.development</code>&nbsp;/&nbsp;<code>.env.production</code>&nbsp;は、リポジトリに含めます。<strong>URL や企業名などデフォルト値などを定義するときに使いましょう</strong>。<br></p><h2 id="h7605dc6208">参考文献</h2><p><a href="https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/environment-variables" target="_blank" rel="noopener noreferrer">https://nextjs-ja-translation-docs.vercel.app/docs/basic-features/environment-variables</a><br><a href="https://fwywd.com/tech/next-env" target="_blank" rel="noopener noreferrer">https://fwywd.com/tech/next-env</a><br></p>

Next.jsにおける環境変数の設定方法。

<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんは。Watatakuです。<br>今回のお話はこのサイトに「目次をつけた」ってお話です。<br><br>目次をつけたいけどどうやってつけるかわからなかったのですが<br>調べると意外と簡単につけれたのでご紹介したいと思います。<br></p><h2 id="h1eea724d7c">必要パッケージのインストール</h2><p>以下のパッケージをインストールしてください。</p><pre><code>$ npm install cheerio</code></pre><p>これは、<u>データクロール用の非常に強力なJavaScriptライブラリ</u>です。<br><br>また、今回はTypescriptを扱うのでこちらの方もインストールします。</p><pre><code>$ npm install --save @types/cheerio</code></pre><h2 id="h6957ba1257">目次を作る</h2><p>インストールしたパッケージを読み込む。</p><pre><code>import cheerio from "cheerio";</code></pre><p><br><code>getstaticProps()</code>内に以下のコードを追加してください。</p><pre><code>export const getStaticProps = async (
  context: GetStaticPropsContext&lt;{ id: string }&gt;
) =&gt; {
  const data = await fetch( ・・・ ); // ブログデータ取得
  
// ---------------------------追加----------------------------------
  const $ = cheerio.load(data.body);　// data.bodyにはブログの記事情報が入っている。

  const headings = $("h1, h2, h3, h4, h5").toArray();

  const toc = headings.map((data: any) =&gt; ({
    text: data.children[0].data,
    id: data.attribs.id,
    name: data.name,
  }));
// ---------------------------追加----------------------------------


  return {
    props: {
      toc,
    },
  };
};</code></pre><p><br>目次を表示する。</p><pre><code>&lt;ul id="lists"&gt;
  {toc.map((toc, index) =&gt; (
    &lt;li id={"list" + toc.name} key={index}&gt;
        &lt;a href={"#" + toc.id}&gt;{toc.text}&lt;/a&gt;
    &lt;/li&gt;
  ))}
&lt;/ul&gt;</code></pre><h2 id="ha214098e44">まとめ</h2><p>以上。<br>意外と簡単にできましたね。<br>もし目次の付け方がわからない人はご参考に。</p>

Next.jsで作成したこのブログに目次をつけたい

<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんは。<br>Watatakuです。<br><br>今回の記事はこのブログにシンタックスハイライトをつけた話です。<br>では、やっていきます。<br></p><h2 id="h9404e7a89f">必要モジュールをインストールする</h2><p>まずは下記コマンドで必要なモジュールをインストールします。</p><pre><code>$ npm install highlight.js cheerio</code></pre><p><br>typescriptをお使いの方は下記も一緒に。</p><pre><code>$ npm install --save @types/highlightjs @types/cheerio</code></pre><p><br></p><h2 id="h0ff70c627e">実装する</h2><p>下記コードを<code>getStaticProps</code> に追加してください。</p><pre><code>import cheerio from "cheerio";
import hljs from "highlight.js";
import type {
  InferGetStaticPropsType,
  GetStaticPropsContext,
  NextPage,
} from "next";

type Props = InferGetStaticPropsType&lt;typeof getStaticProps&gt;;

export const getStaticProps = async (
  context: GetStaticPropsContext&lt;{ id: string }&gt;
) =&gt; {
  const data = await client.get({
    endpoint: "blog",
    contentId: context.params?.id,
  });

  const $ = cheerio.load(data.body); // data.body はブログの本文が入っていると思ってください

// ------------------------------------------ 追加 ------------------------------------------
  $("pre code").each((_, elm) =&gt; {
    const result = hljs.highlightAuto($(elm).text());
    $(elm).html(result.value);
    $(elm).addClass("hljs");
  });
// ------------------------------------------ 追加 ------------------------------------------
  return {
    props: {
      highlightedBody: $.html(),
    },
  };
};

const Detail: NextPage&lt;Props&gt; = ({ highlightedBody }) =&gt; {
    return (
        &lt;div dangerouslySetInnerHTML={{ __html: highlightedBody }} /&gt;
    )
};
export default Detail;
 </code></pre><p><br>なお、このページに、</p><pre><code>import 'highlight.js/styles/hybrid.css';</code></pre><p>を追加して、見た目を修正しています。<br>これで、このブログのようにソースコードのシンタックスハイライトが実現できました。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>技術ブログを作るにあたり、シンタックスハイライトをつけたい方のご参考に<br>なればと思います。</p><ul><li><a href="https://qiita.com/cawauchi/items/ff6489b17800c5676908" target="_blank" rel="noopener noreferrer">参考</a></li><li><a href="https://www.blogchin.net/blogs/p9f3s1x5k5yb/" target="_blank" rel="noopener noreferrer">参考２</a></li></ul><p><br></p>

ソースコードにシンタックスハイライトをつける方法

<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんは。<br>Watatakuです。<br>今回の記事は題名にもなっていますが、公式ページからnode.jsをダウンロードするよりnodebrewでインストールしましょう<br>という記事になります。<br><br>その理由は、もちろん公式のサイトからnode.jsをダウンロードすれば簡単にお持ちのPC にインストールされますが、<br>node.jsのバージョンの管理がめちゃめちゃ大変になります。<br>経験を積んでいくとプロジェクトにより、node.jsのバージョンのハシゴをしないといけないこともあるでしょう。<br>公式サイトからダウンロードをしていればその度にnode.jsのダウンロード先に行ってインストーラを削除し、必要なバージョンを入れ直さなければなりません。めんどくさいですよね。<br>なので、<code>nodebrew</code> を使いましょうってことです。<br><br>ここからは実際に<code>nodebrew</code>の使い方からインストール方法を見ていきましょう。<br></p><h2 id="hd8d793506b">インストール</h2><p><code>nodebrew</code>は<strong>Homebrew</strong>を使ってインストールします。<br>Homebrewのインストール方法は<a href="https://qiita.com/zaburo/items/29fe23c1ceb6056109fd" target="_blank" rel="noopener noreferrer">こちら</a><br>※nodebrewは別にHomebrewをインストールしなくてもいいのですが、<br>今後、Homebrewを扱う機会がいっぱいあると思うのでこの機会に。。。<br><br>もしHomebrewインストールしたくないよって方がいれば<a href="https://github.com/hokaccha/nodebrew" target="_blank" rel="noopener noreferrer">こちら</a>を<br><br>インストールが完了すれば下記コマンドを入力してください。</p><pre><code>$ brew install nodebrew</code></pre><p><br>インストールが完了すれば下記コマンドで確認を入力してください。</p><pre><code>$ nodebrew -v</code></pre><p><br>確認後、環境変数を追加します。<br>下記コマンドを入力します。</p><pre><code>$ vi ~/.bash_profile</code></pre><p><br>この中に下記を追加してください。</p><pre><code>export PATH=$HOME/.nodebrew/current/bin:$PATH</code></pre><p><br>追記後<code>コロン + w + Enter</code>を入力し、<code>コロン + q + Enter</code>を入力してください。<br>※場合によっては<span style="color:#ff357f;font-family: Monaco, Courier New, monospace">コロン + w or q + ! + Enter</span><br><br>入力後、下記コマンド類を入力し<code>nodebrew</code>のセットアップが完了です。<br>お疲れ様でした。<br></p><h2 id="h970533ad80">nodebrewを使ってnode.jsをインストールする。</h2><p>インストールする前に下記コマンドを入力し、インストール可能なバージョンを確認しましょう。</p><pre><code>$ nodebrew ls-remote</code></pre><p>計り知れないバージョンがインストールできますね。<br><br>ver.17.0.0をインストールしてみましょう。</p><pre><code>$ nodebrew install-binary v17.0.0</code></pre><p><span style="color:#c7243a">※　nodebrew installでインストールするとスゴイ時間がかかるので、上記のコマンドが良いらしい。</span><br><br>インストールされたかどうかの確認は下記コマンドで確認します。</p><pre><code>$ nodebrew list or $ nodebrew ls</code></pre><p>正確にいうとインストールされているバージョンの一覧です。<br>因みに、<code>current</code>の値が現在使用しているnodeのバージョンです。</p><h2 id="h9a0715d8cd">node.jsのバージョンの切り替え</h2><p>下記コマンドでnode.jsのバージョンを切り替えます。</p><pre><code>$ nodebrew use vバージョンNo</code></pre><p>ex)v15.11.0に切り替える</p><pre><code>$ nodebrew use v15.11.0</code></pre><p><br>切り替え後、$ nodebrew ls を入力し<code>current</code>の値が変わっていればOKです。<br>変わらなければ、過去に公式サイトからインストーラーをダウンロードしちゃっているので、そいつが悪さしています。<br>インストーラーを uninstall すれば大丈夫です。<br></p><h2 id="ha214098e44">まとめ</h2><p>以上。node.jsのインストールにはnodebrewを使いましょうと言うお話でした。</p>

node.jsは公式サイトからダウンロードするのではなくnodebrewでインストールせよ。

<h2 id="h8d027c8ed3">はじめに</h2><p>おはようございます。こんにちは。こんばんは。<br>Watatakuです。<br>今回の記事はこのサイトをPWAにしたよと報告と<br>Next.jsでのPWAの仕方を書いていきます。</p><h2 id="hc4fc4a6bbf">PWAとは</h2><p><span style="color:#333333">P</span>WAはプログレッシブウェブアプリ(Progressive web apps)の略で、<br>ウェブアプリをネイティブアプリのように使えるようにする仕組みのことです。</p><h2 id="h467bf686e0">実際にやっていく</h2><p>以下のコマンドを用いて、<a href="https://www.npmjs.com/package/next-pwa" target="_blank" rel="noopener noreferrer">next-pwa</a>をインストールします。</p><pre><code>$ npm install next-pwa</code></pre><p><br>インストール後、<code>next.config.js</code>に以下を記述。</p><pre><code>const withPWA = require("next-pwa");

module.exports = withPWA({
  pwa: {
    dest: "public",
  },
});</code></pre><p><br>PWA実装に必要なものは</p><ul><li>アイコン</li><li>App Manifest（manifest.json）</li><li>Service Worker</li></ul><p>他にもWEBサイトのURLが<code>https</code>でないといけないなど様々な条件があります。詳しくは<a href="https://flxy.jp/article/628" target="_blank" rel="noopener noreferrer">こちら</a>。<br><br>そこで便利なのがこちらの<a href="https://ao-system.net/favicongenerator/" target="_blank" rel="noopener noreferrer">様々なファビコンを一括生成。favicon generator</a><br>こちらでアイコンとApp Manifestなどが作られるので、全て<code>publicディレクトリ</code><br> に格納してください。<br><br>格納後、manifest.jsonを編集します。<br>※下記マニフェストはこのサイトでのマニフェストです。</p><pre><code>{
  "name": "Watataku's ブログ",
  "short_name": "ブログ",
  "description": "",
  "start_url": "/",
  "display": "standalone",
  "orientation": "any",
  "background_color": "#fff",
  "theme_color": "#fff",
  "icons": [
    {
      "src": "/android-chrome-36x36.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-48x48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-96x96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-128x128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-152x152.png",
      "sizes": "152x152",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}</code></pre><p><br>編集後、src/pagesディレクトリに<code>_document.tsx</code>を作成し、<br>以下のように<code>Head</code>のなかでアイコン、manifest.jsonなどを読み込んでいきます。</p><pre><code>import Document, {
  Html,
  Head,
  Main,
  NextScript,
} from "next/document";

class MyDocument extends Document {
  render() {
    return (
      &lt;Html lang="ja-JP" dir="ltr"&gt;
        &lt;Head&gt;
          {/* windows */}
          &lt;meta
            name="msapplication-square70x70logo"
            content="/site-tile-70x70.png"
          /&gt;
          &lt;meta
            name="msapplication-square150x150logo"
            content="/site-tile-150x150.png"
          /&gt;
          &lt;meta
            name="msapplication-wide310x150logo"
            content="/site-tile-310x150.png"
          /&gt;
          &lt;meta
            name="msapplication-square310x310logo"
            content="/site-tile-310x310.png"
          /&gt;
          &lt;meta name="msapplication-TileColor" content="#000" /&gt;


          {/* safari */}
          &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
          &lt;meta name="apple-mobile-web-app-status-bar-style" content="#000" /&gt;
          &lt;meta name="apple-mobile-web-app-title" content="myapp" /&gt;
          &lt;link
            rel="apple-touch-icon"
            sizes="180x180"
            href="/apple-touch-icon-180x180.png"
          /&gt;
          {/* 一般 */}
          &lt;meta name="application-name" content="myapp" /&gt;
          &lt;meta name="theme-color" content="#000" /&gt;
          &lt;link rel="icon" sizes="192x192" href="/icon-192x192.png" /&gt;
          &lt;link rel="icon" href="/favicon.ico" /&gt;
          &lt;link rel="manifest" href="/manifest.json" /&gt;
        &lt;/Head&gt;
        &lt;body&gt;
          &lt;Main /&gt;
          &lt;NextScript /&gt;
        &lt;/body&gt;
      &lt;/Html&gt;
    );
  }
}

export default MyDocument;</code></pre><p><br></p><h2 id="h6fd83e2648">PWAの確認</h2><p>localhostで開き、デベロッパーツールを見るとServiceWorkerが登録されていることがわかります。<br>一回読み込んでしまえば、オフラインにして再読み込みしてもちゃんと読み込まれます。これでオフラインで動作する事は確認はできました！<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/0b9672f5988e442996efd52a44599be5/Watataku_s_%E3%83%95%E3%82%99%E3%83%AD%E3%82%AF%E3%82%99-3.png" alt=""><br>また、右上に以下のダウンロードボタンも確認できます。<br><img src="https://images.microcms-assets.io/assets/2679e05ff37441a18a78cb51394b1a4a/0449632c209e4c12a7f703963bcccd4d/Watataku_s_%E3%83%95%E3%82%99%E3%83%AD%E3%82%AF%E3%82%99-2.png" alt=""></p><h2 id="he88af0846d">追記(2022.01.27)</h2><p>PWAになっていない問題。<br><a href="https://qiita.com/take_3/items/fe178568498d4589453b" target="_blank" rel="noopener noreferrer">この記事</a>で解決できました。</p><h2 id="hdd6c10bcaf">追記(2023.06.11)</h2><p><code>next-pwa</code>の設定が方法が<strong>5.6</strong>から変わっていました。<br>下記のように<code>next.config.js</code>を書き換えてください。出ないとエラりますw</p><pre><code> /** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')({
  dest: 'public'
})

module.exports = withPWA({
  reactStrictMode: true
});</code></pre><h2 id="ha214098e44">まとめ</h2><p>以上がNext.jsでのPWAの仕方です。<br>もし、Next.jsのPWAの仕方がわからない方へのご参考になればと思います。<br><br></p>