{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/2019-12-26-netlifycms-gatsby製ブログにシンタックスハイライトを導入する方法/","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"甲府駅から成田空港へ  朝の6時45分。13時30分発の飛行機に乗るため早起きです。 甲府駅からは成田空港までの直通バスが出ていて、それに乗っていきます。 一本遅らせると成田空港に13時30分着のバスになってしまうので仕方ありません。 事前に予約ができ、コンビニ支払いにするとコンビニで乗車券がもらえます。 ついでにコーヒーを買って飲みました（フラグ）。  途中で10分の休憩があります。石川。 この時点で早朝に飲んだコーヒーのせいか、尿意がすさまじかったです。 一応バスの中にもトイレはあるのですが、あれは緊急用。バスの中でトイレはしたくないでしょう？ バスをトイレの近くに止めてくれたので、迷うこともなくサッとすますことができました。 成田空港  成田空港第２ターミナル4Fのスターバックスにて出発の便まで待ちます。 時間帯のせいかコロナの影響かわかりませんが成田空港は静かでした。 2F…","id":"b7694056-4422-57ed-aad4-91b273fd623a","fields":{"slug":"/blog/2020-03-05-熊本出張旅行　day-1/"},"frontmatter":{"title":"熊本出張旅行　Day 1","templateKey":"blog-post","date":"March 05, 2020","featuredpost":false,"featuredimage":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAEDBAX/xAAWAQEBAQAAAAAAAAAAAAAAAAACAAH/2gAMAwEAAhADEAAAAcdIsJnQLf/EABoQAQACAwEAAAAAAAAAAAAAAAEAAgMSIgT/2gAIAQEAAQUC1smbmIEfRvBZ3Y//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAVEQEBAAAAAAAAAAAAAAAAAAAQEf/aAAgBAgEBPwGH/8QAHRAAAQQCAwAAAAAAAAAAAAAAAAECESISIVGBkf/aAAgBAQAGPwKdtYo22SHJZk9lUgScfD//xAAaEAEBAAMBAQAAAAAAAAAAAAABEQAhMZGx/9oACAEBAAE/IXWlJXmauQQAkyKR06OSvyDzIgiTi4Wr61j/2gAMAwEAAgADAAAAEKwf/8QAFhEBAQEAAAAAAAAAAAAAAAAAABEB/9oACAEDAQE/ELiv/8QAFxEAAwEAAAAAAAAAAAAAAAAAAAERMf/aAAgBAgEBPxBtpD//xAAdEAEBAAICAwEAAAAAAAAAAAABEQAhMcFRYXGh/9oACAEBAAE/EDkjKHx3MYIG8CPuacaR0KIP0yvCS0Qa52lwtHl5NJdd43NAlVDxn//Z","aspectRatio":1.3333333333333333,"src":"/static/b1c0ca3fce6ba35b7bbca8adae9b821a/bb41f/s__88080397.jpg","srcSet":"/static/b1c0ca3fce6ba35b7bbca8adae9b821a/d3f3e/s__88080397.jpg 30w,\n/static/b1c0ca3fce6ba35b7bbca8adae9b821a/9cab2/s__88080397.jpg 60w,\n/static/b1c0ca3fce6ba35b7bbca8adae9b821a/bb41f/s__88080397.jpg 120w,\n/static/b1c0ca3fce6ba35b7bbca8adae9b821a/eb15c/s__88080397.jpg 180w,\n/static/b1c0ca3fce6ba35b7bbca8adae9b821a/53d18/s__88080397.jpg 240w,\n/static/b1c0ca3fce6ba35b7bbca8adae9b821a/c1a81/s__88080397.jpg 4032w","sizes":"(max-width: 120px) 100vw, 120px"}}}}}},{"node":{"excerpt":"デモ Github 白い丸をドラッグすると移動させることができます。 CocosCreator HTML5ゲームを作成する上で最も簡単だと思われるゲームエンジンです。推しです。 詳細はこちら シーン Wall, Pack, Malletを配置。 PhysicsColliderComponentをアタッチ。 各種パラメーターを調整。 Malletのタグを１とした。 Pack ▼Pack.ts Mallet ▼Mallet.ts","id":"13eb331a-079d-55ba-b4b1-ab25b90ef6af","fields":{"slug":"/blog/2020-02-04【CocosCreator】physicsを使ってみる/"},"frontmatter":{"title":"【CocosCreator】physicsを使ってみる","templateKey":"blog-post","date":"February 04, 2020","featuredpost":true,"featuredimage":{"childImageSharp":null}}}},{"node":{"excerpt":"Github ダウンロード スクリプトファイルと実行ファイルがダウンロード可能です。 Clone or Download => Download ZIP からどうぞ。 動画","id":"af05d24e-30aa-5dab-87e4-d851ddac9c01","fields":{"slug":"/blog/2020-02-04【Unity】VRMファイルを読み込んでオリジナルの弾幕を張るゲーム開発中/"},"frontmatter":{"title":"【Unity】VRMファイルを読み込んでオリジナルの弾幕を張るゲーム開発中","templateKey":"blog-post","date":"February 04, 2020","featuredpost":true,"featuredimage":{"childImageSharp":null}}}},{"node":{"excerpt":"主張 Webゲーム開発に最適なのはcocoscreatorだと思います。\n特にUnity経験者に向いています。 なぜcocoscreatorなのか？ HTML5ゲームエンジンといえばいくつかあります。 PlayCanvas Phaser CocosCreator BabylonJS いずれも有名ですが、どれがディファクト開発環境かと聞かれて、即答できる人は少ないと思います。\nそこで今回は\"とっつきやすさ\"で比較していきたいと思います。  CocosCreator PlayCanvas Phaser BabylonJS 費用 〇 △ 〇 〇 学習コスト 〇 〇 △ × 3D △ 〇 × 〇 GUI 〇 〇 〇 〇 独断と偏見により各種ゲームエンジンの特徴を表にまとめました。 BabylonJSはNode.jsを立ち上げたりEditorの癖が強かったりして学習コストが高いです。 Phaser…","id":"c34a975c-cf9a-5f6d-b113-afa9eb9a1e52","fields":{"slug":"/blog/2020-01-23-【cocos-creator】web-html5-ゲーム開発に最適なゲームエンジン/"},"frontmatter":{"title":"【Cocos Creator】Web(HTML5)ゲーム開発に最適なゲームエンジン","templateKey":"blog-post","date":"January 23, 2020","featuredpost":true,"featuredimage":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAANABQDASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAAAAIBAwQF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAea1apoIF//EABgQAQADAQAAAAAAAAAAAAAAAAECEBEA/9oACAEBAAEFAlloypre/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAGBAAAwEBAAAAAAAAAAAAAAAAAAEhIDL/2gAIAQEABj8CjKzp4//EABwQAAICAgMAAAAAAAAAAAAAAAARATEhcUFRof/aAAgBAQABPyG8FswGPY5CVnMC9en/2gAMAwEAAgADAAAAEAwP/8QAFhEAAwAAAAAAAAAAAAAAAAAAEBEh/9oACAEDAQE/EFR//8QAFREBAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQIBAT8Qp//EAB0QAQACAQUBAAAAAAAAAAAAAAEAESExQWGB0bH/2gAIAQEAAT8QStExlLQXwdfYe6vs7EGmDcilZkf/2Q==","aspectRatio":1.59533527696793,"src":"/static/2ece7369fb8eba2bc148affbb8027baa/bb41f/cocoscreator.jpg","srcSet":"/static/2ece7369fb8eba2bc148affbb8027baa/d3f3e/cocoscreator.jpg 30w,\n/static/2ece7369fb8eba2bc148affbb8027baa/9cab2/cocoscreator.jpg 60w,\n/static/2ece7369fb8eba2bc148affbb8027baa/bb41f/cocoscreator.jpg 120w,\n/static/2ece7369fb8eba2bc148affbb8027baa/eb15c/cocoscreator.jpg 180w,\n/static/2ece7369fb8eba2bc148affbb8027baa/53d18/cocoscreator.jpg 240w,\n/static/2ece7369fb8eba2bc148affbb8027baa/0b7f5/cocoscreator.jpg 2736w","sizes":"(max-width: 120px) 100vw, 120px"}}}}}},{"node":{"excerpt":"prismjsとは Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.公式サイト 　ようするに、最新のめっちゃ軽いシンタックスハイライターです。 　公式サイトにいくつかテーマがあり、それをインポートすればかっこいいシンタックスハイライトが実現できます。 　もちろんcssをオーバーライドすればカスタマイズすることも可能です。 gatsby-remark-prismjsの導入 　コンソールで以下のコマンドを実行すれば、gatsby-remark-prismjsをインストールすることができます。 ▼コンソール 　次に、gatsby-config.jsでgatsby-remark-prismjsをgatsby-transformer-remark…","id":"d8545ee2-a7c7-50ab-b897-c28fe9e247b8","fields":{"slug":"/blog/2019-12-26-netlifycms-gatsby製ブログにシンタックスハイライトを導入する方法/"},"frontmatter":{"title":"NetlifyCMS  + Gatsby製ブログにシンタックスハイライトを導入する方法","templateKey":"blog-post","date":"December 26, 2019","featuredpost":false,"featuredimage":{"childImageSharp":null}}}},{"node":{"excerpt":"タップしている指の座標を取得する Input.touches :\n最後のフレーム間ですべてのタッチ情報のオブジェクトリストを返します（読み取り専用）[リファレンス] とあるので二本指の座標は以下のようにして取得することができます。 2点間をベクトルとして、1フレーム前のベクトルとのなす角を求める 　まず、最初のタッチでは前フレームのベクトル(_beforeVec)がないので、それを決定したらreturnで処理を終了するようにします。 Vector3.Angle : 2点間（ from と to ）の角度を返します\nVector3.Cross : 2つのベクトルの外積\n[リファレンス] とあるので、Vector3.Angleによって角度を求めた後に外積のzの値を用いて正負を決定します。 少し面倒ですがVector3.Angleは0～18…","id":"3021dc48-5ee2-534b-9a29-6bc1acbfe8ef","fields":{"slug":"/blog/2019-12-23-【unity】二本指でオブジェクトを回転させる方法/"},"frontmatter":{"title":"【Unity】二本指でオブジェクトを回転させる方法","templateKey":"blog-post","date":"December 23, 2019","featuredpost":true,"featuredimage":{"childImageSharp":null}}}},{"node":{"excerpt":"インスタンス化 → Destroy は重い 　Unityで安直にPrefab（弾）をインスタンス化し、それを発射してDestroy()をするとどうなるでしょうか。 　同時に発射する弾が少なければ問題はありませんが、弾幕を張ろうものなら……はい、処理落ち地獄ですね！ 　処理落ちの主な原因はインスタンス化（instantiate() ）です。したがって、インスタンス化を事前にしておき、それを使いまわすという方法が王道です。 オブジェクトプール 　事前にオブジェクトを用意することをオブジェクトプールといいます。 　具体的には、Start()やAwake()関数でインスタンス化を行なっておき、あとはgameObject.SetActive…","id":"bea9bd27-233f-57a1-af3b-151000d3c755","fields":{"slug":"/blog/2019-12-17-【unity】-低負荷で弾幕を処理-形成したい　【オブジェクトプール】/"},"frontmatter":{"title":"【Unity】 低負荷で弾幕を処理/形成したい　【オブジェクトプール】","templateKey":"blog-post","date":"December 17, 2019","featuredpost":true,"featuredimage":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAQDBQb/xAAVAQEBAAAAAAAAAAAAAAAAAAABAv/aAAwDAQACEAMQAAABdbzkl0+UoP8A/8QAGxABAAICAwAAAAAAAAAAAAAAAgEDERIABCL/2gAIAQEAAQUC3DjfFb7AyvKTU18//8QAFhEBAQEAAAAAAAAAAAAAAAAAABES/9oACAEDAQE/AYw//8QAFhEBAQEAAAAAAAAAAAAAAAAAABES/9oACAECAQE/AbW3/8QAGxAAAgEFAAAAAAAAAAAAAAAAAAExAhARISL/2gAIAQEABj8CboMshs50Tb//xAAaEAEAAgMBAAAAAAAAAAAAAAABACExUWGh/9oACAEBAAE/IaMVyBDVPVBM5K4wwtnLuE//2gAMAwEAAgADAAAAEGDf/8QAFhEBAQEAAAAAAAAAAAAAAAAAAAER/9oACAEDAQE/EK4f/8QAGBEBAQADAAAAAAAAAAAAAAAAAQARQXH/2gAIAQIBAT8QSOWei//EAB0QAQEAAgIDAQAAAAAAAAAAAAERACExUUFxgbH/2gAIAQEAAT8QS1XSVwdE5s3Nc+sq1MNpP3GwAdKY2tEIAjpfONn3P//Z","aspectRatio":1.7768115942028986,"src":"/static/1b9ea10da969bca125a05c46903b9c24/bb41f/danmaku.jpg","srcSet":"/static/1b9ea10da969bca125a05c46903b9c24/d3f3e/danmaku.jpg 30w,\n/static/1b9ea10da969bca125a05c46903b9c24/9cab2/danmaku.jpg 60w,\n/static/1b9ea10da969bca125a05c46903b9c24/bb41f/danmaku.jpg 120w,\n/static/1b9ea10da969bca125a05c46903b9c24/eb15c/danmaku.jpg 180w,\n/static/1b9ea10da969bca125a05c46903b9c24/53d18/danmaku.jpg 240w,\n/static/1b9ea10da969bca125a05c46903b9c24/d2e85/danmaku.jpg 1226w","sizes":"(max-width: 120px) 100vw, 120px"}}}}}},{"node":{"excerpt":"ある日、iPhoneで自分のブログを確認していたところ、細かい所ですが少しイラっとくる点に気づきました。 以下の画像を見てください。分かるでしょうか。 右側に僅かですが、謎の余白が生まれてしまっています。  これが原因で横スクロールできてしまい、ガクガクしてしまうときがありました。 　また、markdown のコード表示が非常に見づらいです。  これら修正します。 スタイルの追加 　軽く調べたところ、htmlとbodyに overflow: hidden を適用すればいいみたいです。 　なのでLayout.js とall.sass に以下のようなコードを追記しました。 　2019/12/25 追記：コードを見やすくするのには\"gatsby-remark-prismjs\"を導入するべきです。後日記事にしたいと思います。 ▼Layout.js　(Helmetタグ内) ▼all.sass…","id":"074fc5f9-43ab-5f1f-8cf2-dab117c65ebe","fields":{"slug":"/blog/2019-11-06-スマホページの横揺れ と markdownのコード表示のデザインを修正する/"},"frontmatter":{"title":"スマホページの横揺れ と markdownのコード表示のデザインを修正する","templateKey":"blog-post","date":"November 06, 2019","featuredpost":false,"featuredimage":{"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAkCAYAAACJ8xqgAAAACXBIWXMAAAsSAAALEgHS3X78AAAHmUlEQVRIx62WaVCUVxaGv1/za34kk2hVZtSorM3W0EAji7gbIRnFZDRijJrRSjlxNInLqGMy44LS4ACKyqIYRROliSCggk03CAKKW1TEaFxAWWQL0IosYukz5+sWR6umpuaHVL3c5Zzz3vece7u+o1RXV3Px4kVu375NXV2dDY2NjTx+/FjQx5MnT2hoaKCqqoquri76+/tttt7eXvr6enn06BE3b97EYrFQXl6O0tzcLCT11Nc3SmAj9+832VBTU2vbv3evzjbeunmbO3dqbT5379bR1NRCS0srzc0t4t/MjRu/2GxK3+N+fm3vpKPDSruM7TI2NbVSXFzC+Qs/YbYUceXKVSpOn6GsvEKyucS58xdpam61+be1tWN90MWly1W2w5XTFRWUlpRwqrSUslOnXqC8rMyGgflpIauQlNS1Opa/5FsmsSUnT3Lj+nUUjcMIvN1c8XB2RJ27jhz+3zHi3VfWmpF2X3cnB3w93Rky6C3WfbMWRatxIUTvR6CfDz4eGjSOI2xObk4j7XB8Fapd4zAcl5Hv4jR8KK6OwwkK8GXQm79l7ZpVKG4OTmhGOOAuo7ujMx4DcHLBU+Dl7IqXiwatq5tk4o6fxoMgb38ixoURHjKJz/4YybywWcwMncq+7Wko7g7ueL4ELwcPvBw90Dp54u3shY+LN74aH/zd/Anw0hPiE8iEgPFMH/MBn4bPISM6k5KUk+xevoPK/HNC6PgSmaPHC6iEWmc7qc7VG51Gh5+HL3qtlMd7FMG6QIJ9RzEn/BMMSzewIHweV4qvoHgJoXaAyEnmNni+UGhXqRVCUeqmQ+/hZ1MaLEpDfYMY5xfMpMCxTA0Kx2I8IZciKnwkSGuDOn+VyEbmak/bTwj93X0J8PRnlFYvtRzFaN9gxgthoLuexOhtKLaTJcDHBgl2eZ6iq/b5qJK9TPgf0kBVqbco1Y8Wu44EQzyKn1pwWejdfKXw4uwmgRo7Btb20Q69kKkIkNRVwiCvAJtKL8kodnMsyuTAcYTKKTqR7O0hcPdHq0LjJ0/Fxz6XG/Zy1eEle14usqfxlT0/vEWITpSG6ILkUj2IiYpBmffBbFZ8soT0UX+gdOwgCkMHYw55C/PYdygMc8Qc/DvMo9+mcOIwCscMpjDcmcLxv8c0YSgl7zuSFjxU0h6F50h3YjYahFCuO2lZItawwRA1Db7QwiJ3WC/zxM8h8h1YOxni5sLKUIidDYaPYfUEWBfGrZDfyBMKwmOkmxBGo6St3c6BZTtpjAykKWIIDdOG0T7DmdaPXWmY4UhnxFDqpw7h3p8cqBPbnbC3qZ3hwN2IYTRNeQNT0Jt2whFCuEEIS1KPEzP/H+xdlcq2v8SwNOJzUhZvJfXLbSyK+DNfz15C4pIopoe8x0TvUKYGhzNOF0ygp69ciJ5ArTwdtYY2hZKyZacJY7SRvNXxlK9JIH3+Yg4sWkn24m/JWLCUze9P53TcLgyz5rJyQhiZX6wiPnIhc/T+zNP78JGvTm45CG/5YcSqhKW7TORuz6Mz0hW+DoBlIbDARWrpA38bK/X0hNEKTBRMeD6OF4yxj7WT3iAseDI6Z2/iNm9BqdxTRG5sFldXr6TOEEVTvIGa9au4sWENd6LWcTNqPec+jaBs1nsUfTSR4plTuPTZTC4vnMWxKX4cmD6Z5ZFfEajRE2+IQ6k+eJa2ontU7q+kIq2cksQT5CUWkL4tD1PSSbI3HSF5w0FS/nmAvesy2bpsF/s2ZZERlc3WFUnMnDSXuEVRfDV9MakJySjXsi7Sc6uLa5llVCTlU5FawNndFk4lFVAssMQeofg7C6bdhVjkkKJkEylrkzAs/IbUFQns/Gss2ev2c058T+cUoZxJMXE18zQX0os4k1xEuVzSxe/lG5IkBDuOU7GvlJz4I+xbn45xs5HjhsMc2fgD3/09RdR/T35CPsZ1B8nduJ+qwgsop0SRJeZHzqZZqEw/Q0HiMYpE6bGYw5zfWyalkI9YspnC+BzytmSSvSGd3E2H2PPtHoyb9mM2ZJK1+SCpyxO5nH8W5Wh8BmXbjlKZVkrh1mPkJ+UKmRGzqKoUdaZ/ZXF8Sw7HJNAcfxhTQg4FcbnkGrIw7TFzzVjJdfPPFKcWUXOyGmX1/GWc2JFHRYqZs3uKqTKepWS71CO9AqMclhMjqqIyOLrFSGFCHuYdBRzbcpiyHSZOJVv46UAFlpQCjFEH+aX0Z5QPx09j45fRouoQpugMKfAP8ozkIuJOcEStjRDmbDzE4Q37KRbVmVGHsGw3U2D40VbL49FZVKYWk2/I5opFPgG1t2q4W1uHtc3KwxbpHO7/SmeLFWtjOw+aOrE2d9jQ0dBGV9tDWupbsTbJ3n2xtz0QW6fEWemUvUfWR8hzf71/ytOnT1Hx7Omz/wtP/5f92TMU9d/rxOtPWW0gnzzpl+axz9ZADjSU6lqd29dif9z/Yj2w9/K6p8++p1i7emju7KG3p1u60W56enpsXWl3d7egh77ebmpbe7jVbJ+rfq3iX93Qg/Xh8zjxq6rv5a74KV3dvbQ/tLe3apurQiUdmKtoe9BLq7X3RRvcIf41rb2osX2y193Ty/0O4RG/fwMIpred4HYHHQAAAABJRU5ErkJggg==","aspectRatio":0.5622188905547226,"src":"/static/548cc2b07f083b1addd67f9837c7a04e/c0382/img_6523.png","srcSet":"/static/548cc2b07f083b1addd67f9837c7a04e/5dcac/img_6523.png 30w,\n/static/548cc2b07f083b1addd67f9837c7a04e/6919b/img_6523.png 60w,\n/static/548cc2b07f083b1addd67f9837c7a04e/c0382/img_6523.png 120w,\n/static/548cc2b07f083b1addd67f9837c7a04e/8fd0d/img_6523.png 180w,\n/static/548cc2b07f083b1addd67f9837c7a04e/cca1d/img_6523.png 240w,\n/static/548cc2b07f083b1addd67f9837c7a04e/6065c/img_6523.png 750w","sizes":"(max-width: 120px) 100vw, 120px"}}}}}},{"node":{"excerpt":"今回はブログページの下部に前後のブログ記事のリンクをつくりたいと思います。\n記事の一覧ページはBlogRoll.jsに実装されていたのでそれを参考にします。 blog-post.js の編集 queryにBlogRoll.jsのqueryをコピペして追加します。 データの取得部分を以下のように追記 前後ページリンクの設置 確認 これで以下のように前後記事へのリンクを貼ることができました。  あとはデザインをなんとかしたいですね。","id":"37d9ab1d-1dbf-503b-9676-e11e619d5bb1","fields":{"slug":"/blog/2019-11-05-ブログページに前後のリンクをつくる/"},"frontmatter":{"title":"ブログページに前後のリンクをつくる","templateKey":"blog-post","date":"November 05, 2019","featuredpost":false,"featuredimage":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAYF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAdpHosEeP//EABgQAAMBAQAAAAAAAAAAAAAAAAACEQEg/9oACAEBAAEFArhVKvH/xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAYEAADAQEAAAAAAAAAAAAAAAAAATIgMf/aAAgBAQAGPwLqKRSx/8QAGBABAAMBAAAAAAAAAAAAAAAAAAER8cH/2gAIAQEAAT8hmeezQaClKf/aAAwDAQACAAMAAAAQjD//xAAVEQEBAAAAAAAAAAAAAAAAAAAAEf/aAAgBAwEBPxCI/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGhAAAgMBAQAAAAAAAAAAAAAAAAERUdHxof/aAAgBAQABPxB0fn04PTh9IUiFIhSP/9k=","aspectRatio":1.9638728323699421,"src":"/static/3a35e6183665d45e02f9b253bb535513/bb41f/zengolink.jpg","srcSet":"/static/3a35e6183665d45e02f9b253bb535513/d3f3e/zengolink.jpg 30w,\n/static/3a35e6183665d45e02f9b253bb535513/9cab2/zengolink.jpg 60w,\n/static/3a35e6183665d45e02f9b253bb535513/bb41f/zengolink.jpg 120w,\n/static/3a35e6183665d45e02f9b253bb535513/eb15c/zengolink.jpg 180w,\n/static/3a35e6183665d45e02f9b253bb535513/53d18/zengolink.jpg 240w,\n/static/3a35e6183665d45e02f9b253bb535513/b5765/zengolink.jpg 1359w","sizes":"(max-width: 120px) 100vw, 120px"}}}}}},{"node":{"excerpt":"GatsbyJs とは？ GatbyJsとは、Reactを使った静的サイトジェネレータのことです。 静的サイトジェネレーターは他にもHUGO、Hexo、Jekyllなどがありますが、GatsbyJsの大きな特徴は、リソースデータの取得にGraphQLを使っている点とReactを使っている点です。 Netlifyとは？ 静的サイトのホスティングサービスです。 GitHub / GitLab / Bitbucket のリポジトリと連携することができ、リポジトリを更新すると自動でデプロイしてくれます。 つくる Netlify CMSというものがあります。これはWeb上でMarkdownの記述ができ、そのまま更新ができるというものです。今回はそれを使用するテンプレートを使います。 以下のリンクからGitのリポジトリにそのテンプレートをfolkできます。 netlifycms.org/docs…","id":"9ec9ad6b-de40-507e-8e22-73417f80619f","fields":{"slug":"/blog/2019-11-01-GatsbyJs と Netlify でブログをつくる/"},"frontmatter":{"title":"GatsbyJs と Netlify でブログをつくる","templateKey":"blog-post","date":"November 01, 2019","featuredpost":true,"featuredimage":{"childImageSharp":null}}}}]},"markdownRemark":{"id":"d8545ee2-a7c7-50ab-b897-c28fe9e247b8","html":"<h1>prismjsとは</h1>\n<hr>\n<blockquote>\n<p>Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind.<br><br><a href=\"https://prismjs.com/\">公式サイト</a></p>\n</blockquote>\n<p>　ようするに、最新のめっちゃ軽いシンタックスハイライターです。</p>\n<p>　公式サイトにいくつかテーマがあり、それをインポートすればかっこいいシンタックスハイライトが実現できます。</p>\n<p>　もちろんcssをオーバーライドすればカスタマイズすることも可能です。</p>\n<h1>gatsby-remark-prismjsの導入</h1>\n<hr>\n<p>　コンソールで以下のコマンドを実行すれば、gatsby-remark-prismjsをインストールすることができます。</p>\n<p>▼コンソール</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">yarn add gatsby-transformer-remark gatsby-remark-prismjs prismjs</code></pre></div>\n<p>　次に、gatsby-config.jsでgatsby-remark-prismjsをgatsby-transformer-remarkのオプションとして設定します。</p>\n<p>　<a href=\"https://www.gatsbyjs.org/packages/gatsby-remark-prismjs/\">gatsby-remark-prismjs|GatsbyJS</a></p>\n<p>　で細かい設定項目が確認できます。以下はリンク先から引用したコードです。（一部翻訳）</p>\n<p>▼gatsby-config.js</p>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\">plugins<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n  <span class=\"token punctuation\">{</span>\n    resolve<span class=\"token punctuation\">:</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">gatsby-transformer-remark</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span>\n    options<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n      plugins<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n        <span class=\"token punctuation\">{</span>\n          resolve<span class=\"token punctuation\">:</span> <span class=\"token template-string\"><span class=\"token template-punctuation string\">`</span><span class=\"token string\">gatsby-remark-prismjs</span><span class=\"token template-punctuation string\">`</span></span><span class=\"token punctuation\">,</span>\n          options<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token comment\">// コードを含む &lt;pre> タグにつけるプレフィックス(接頭辞)</span>\n            <span class=\"token comment\">// デフォルト値は 'language-' (例： &lt;pre class=\"language-js\">).</span>\n            classPrefix<span class=\"token punctuation\">:</span> <span class=\"token string\">\"language-\"</span><span class=\"token punctuation\">,</span>\n            <span class=\"token comment\">// インラインコードの言語設定</span>\n            inlineCodeMarker<span class=\"token punctuation\">:</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">,</span>\n            <span class=\"token comment\">// 言語エイリアスの設定</span>\n\t    <span class=\"token comment\">// 例えば、{sh： \"bash\"} とすればbashをshとして利用できる</span>\n            aliases<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n            <span class=\"token comment\">//行番号の表示をコードと一緒にグローバルに切り替える</span>\n            <span class=\"token comment\">//使用するには\"prismjs/plugins/line-numbers/prism-line-numbers.css\"をimportする必要がある</span>\n            <span class=\"token comment\">//デフォルトはfalse.</span>\n            <span class=\"token comment\">//特定のコードブロックでのみ行番号を表示する場合は、</span>\n            <span class=\"token comment\">// falseのままにして、{numberLines：true}構文を使用する</span>\n            showLineNumbers<span class=\"token punctuation\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n            <span class=\"token comment\">//これをtrueに設定すると、パーサーはインラインを処理および強調表示しない</span>\n             <span class=\"token comment\">//インラインはマークダウン上では、`this`のようなコードをさす</span>\n            noInlineHighlight<span class=\"token punctuation\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n            <span class=\"token comment\">// This adds a new language definition to Prism or extend an already</span>\n            <span class=\"token comment\">// existing language definition. More details on this option can be</span>\n            <span class=\"token comment\">// found under the header \"Add new language definition or extend an</span>\n            <span class=\"token comment\">// existing language\" below.</span>\n            languageExtensions<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">[</span>\n              <span class=\"token punctuation\">{</span>\n                language<span class=\"token punctuation\">:</span> <span class=\"token string\">\"superscript\"</span><span class=\"token punctuation\">,</span>\n                extend<span class=\"token punctuation\">:</span> <span class=\"token string\">\"javascript\"</span><span class=\"token punctuation\">,</span>\n                definition<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n                  superscript_types<span class=\"token punctuation\">:</span> <span class=\"token regex\">/(SuperType)/</span><span class=\"token punctuation\">,</span>\n                <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n                insertBefore<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n                  <span class=\"token keyword\">function</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n                    superscript_keywords<span class=\"token punctuation\">:</span> <span class=\"token regex\">/(superif|superelse)/</span><span class=\"token punctuation\">,</span>\n                  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n                <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n              <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n            <span class=\"token comment\">// Customize the prompt used in shell output</span>\n            <span class=\"token comment\">// Values below are default</span>\n            prompt<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span>\n              user<span class=\"token punctuation\">:</span> <span class=\"token string\">\"root\"</span><span class=\"token punctuation\">,</span>\n              host<span class=\"token punctuation\">:</span> <span class=\"token string\">\"localhost\"</span><span class=\"token punctuation\">,</span>\n              global<span class=\"token punctuation\">:</span> <span class=\"token boolean\">false</span><span class=\"token punctuation\">,</span>\n            <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n            <span class=\"token comment\">// By default the HTML entities &lt;>&amp;'\" are escaped.</span>\n            <span class=\"token comment\">// Add additional HTML escapes by providing a mapping</span>\n            <span class=\"token comment\">// of HTML entities and their escape value IE: { '}': '&amp;#123;' }</span>\n            escapeEntities<span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n          <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n      <span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">]</span></code></pre></div>\n<h1>テーマの設定</h1>\n<hr>\n<p>　Layout.jsで<a href=\"https://github.com/PrismJS/prism/tree/1d5047df37aacc900f8270b1c6215028f6988eb1/themes\">テーマ</a>をインポートすれば全体に適応されます。</p>\n<p>▼Layout.js</p>\n<div class=\"gatsby-highlight\" data-language=\"js\"><pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">import</span> <span class=\"token string\">\"prismjs/themes/prism-tomorrow.css\"</span></code></pre></div>\n<p><br>　この段階だとall.sassの影響で数字の表示が崩れていたので</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 1106px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/ef154f6e7b6ae0a47aea19e7d5f07c48/e9141/bugcodehilght.jpg\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 20.795660036166364%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAEABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABzKhAH//EABcQAQADAAAAAAAAAAAAAAAAAAABAiP/2gAIAQEAAQUCWnN//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFxAAAwEAAAAAAAAAAAAAAAAAAAIQgf/aAAgBAQAGPwITZ//EABoQAAAHAAAAAAAAAAAAAAAAAAABEBFBUWH/2gAIAQEAAT8hcQBatP/aAAwDAQACAAMAAAAQc8//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAaEAEAAwADAAAAAAAAAAAAAAABABEhMVGR/9oACAEBAAE/EF3LzCTQN0cy3t9n/9k='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"bug\"\n        title=\"bug\"\n        src=\"/static/ef154f6e7b6ae0a47aea19e7d5f07c48/e9141/bugcodehilght.jpg\"\n        srcset=\"/static/ef154f6e7b6ae0a47aea19e7d5f07c48/ab422/bugcodehilght.jpg 512w,\n/static/ef154f6e7b6ae0a47aea19e7d5f07c48/1f853/bugcodehilght.jpg 1024w,\n/static/ef154f6e7b6ae0a47aea19e7d5f07c48/e9141/bugcodehilght.jpg 1106w\"\n        sizes=\"(max-width: 1106px) 100vw, 1106px\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p><br>　all.sassの最後に</p>\n<p>▼all.sass</p>\n<div class=\"gatsby-highlight\" data-language=\"css\"><pre class=\"language-css\"><code class=\"language-css\">.number\n  <span class=\"token property\">background-color</span><span class=\"token punctuation\">:</span> initial<span class=\"token punctuation\">;</span>\n  <span class=\"token property\">display</span><span class=\"token punctuation\">:</span> initial<span class=\"token punctuation\">;</span>\n  <span class=\"token property\">margin-right</span><span class=\"token punctuation\">:</span> initial<span class=\"token punctuation\">;</span>\n  <span class=\"token property\">font-size</span><span class=\"token punctuation\">:</span> initial<span class=\"token punctuation\">;</span>\n  <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> initial<span class=\"token punctuation\">;</span></code></pre></div>\n<p>を追加しnumberをオーバーライドします。</p>\n<p><br>以上になります。ありがとうございました。</p>","frontmatter":{"date":"December 26, 2019","title":"NetlifyCMS  + Gatsby製ブログにシンタックスハイライトを導入する方法","description":"NetlifyCMSのGatsbyテンプレートにgatsby-remark-prismjsを導入して、Markdownのコードが色分けされるようにする方法を紹介します。","tags":["Gatsby"],"featuredimage":{"base":"noimage.svg"}}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"d8545ee2-a7c7-50ab-b897-c28fe9e247b8"}}}