SwiftUI100行サンプルチャレンジ 企画をはじめるにあたってGitHub Gistを導入した。GitHub Gistに記述したswiftのソースコードをBlog文中に行数付きで埋め込むことができた。
GitHub Gist: Githubが提供しているテキストベースの内容を公開するためサービス。Webページ用の埋め込みスクリプトを提供しており、プログラミングでの用途としてはソースコードの参考先として利便性が高い。
以下導入の経緯についてのメモ。
1) Gist提供のスクリプトがGatsbyJSでは利用できない
GitHub GistにはWebページへの埋め込み用スクリプトが提供されているがBlogで使用しているGatsbyJSではそのままでは利用できない。理由としてはGatsbyJSではコンテンツ部分へスクリプトを導入してもスクリプト内容は無視(エスケープ)されてしまう。
GatsbyJSのscriptタグの振る舞いについては以下のBlogに内容が参考になった。
2) プラグインの導入 - gatsby-remark-embed-gist
GatsbyJSではGatsbyJSのGist用のプラグインを導入する。
gatsby-remark-embed-gist | Gatsby
プラグインの導入自体はa. npmでpluginパッケージを導入、b. gatsby-config.jsにplugin設定を追加する。gist埋め込み用の構文が有効となるので、GatsbyJS Cli上からbuild,develop,serverのそれぞれでGitHub Gistから参照されたコードがBlogに埋め込まれた結果が得られる。
`gist:notoroid/40663ec56c55fa296ea4b36eea8dbfc5`gist: 直後はgithubユーザー名でgatsby-config.js上でユーザー名を事前に指定しておけば省略することも可能となる、。
3) 導入に際して注意点
導入に際して3点の注意点があった。
最初の注意点はGatsbyJSはプラグイン内プラグインを許容しているので、設定ファイル(gatsby-config.js)上のプラグイン設定記述位置を間違えない様にする。今回はgatsby-transformer-remarkプラグインにgatsby-remark-embed-gistを追加する。
もう2つ目の注意点は導入に際しての注意点はプラグインの競合が起きる場合がある点で、今回はBlog投稿内容に記述できるコードブロックを装飾する際に利用するPrismJSと競合が起きる。対処方法はプラグイン設定をPrismJSよりも前に記述すると競合を回避できる。
プログラミングのソースコードを表示する際に、GitsとPrismJSを併用することが多いためか、プラグイン導入方法文末にプラグイン開発者の注釈が用意してあった。
Notes
The order of the plugins only matters when used in conjunction with gatsby-remark-prismjs, because this plugin transforms the inline code blocks, so add gatsby-remark-embed-gist somewhere above this plugin.
3点目はgistにgistを指定する際に指定できるファイル名を指定できるがファイル名は変更可能なのでa.gistでファイル名変更、b.gatsbyでビルドするとエラーが発生する場合がある。
まとめ
- GatsbyJSではGitHub Gistのスクリプト埋め込みはそのままでは利用できない
- gatsby-remark-embed-gistプラグインを導入することでGitHub GistをBlogを埋め込むことができる
- プラグイン導入に関して、設定ファイル上の設定記述位置と、プラグイン同士の競合に注意する
GatsbyJSはセキュリティの都合上scriptタグで簡単機能埋め込みを許していないデメリットはあるが、著名なサービスであれば該当するプラグインを見つけて導入できるので不便さは感じないだろうし、scriptタグを不用意に埋め込むことを嫌うのであればメリットしかないだろう。
反面著名ではないサービスをBlogに埋め込んで使おうとするとGatsbyJS向けに自作pluginを作るしか解決しない可能性はある。
