barba.jsを使ったサイトに
Gistを埋め込む方法

はじめに

今回はGithubが提供している断片コードの共有サービス「Gist」を使って、非同期画面遷移が簡単にできるJSライブラリ「barba.js」で作ったこのブログのようなサイトにコードを埋め込む方法をメモ。

barba.jsを使ったサイトだと若干ややこしい処理が必要だったので備忘録として残しておくことにしました。

barba.jsについて

非同期画面遷移が簡単にできるJSライブラリとしてこのブログでも使っています。詳しくは過去記事がありますのでご覧ください。

barba.js v2で簡単に非同期画面遷移を取り入れてページ高速化！

Gistを埋め込む方法

Gistでブログに埋め込みたいコードを作成して生成された埋め込みコードを貼り付けるだけです。（Gistそのものの使い方についてはここでは説明を省略します。）

https://gist.github.com

実際にGistを使って埋め込んでみたコードはこちら。

埋め込むときは「Embed」という所に記載されている埋め込みコードを貼り付けます。こんな形のscriptタグになります。

<script src="https://gist.github.com/inos3910/1b88cffb7a8f804f67296f74959393c9.js"></script>

これを普通に埋め込むだけだと、検索や直リンクで直接このページに来た場合はGistが展開されてコードが表示されるのですが、サイト内の他のページからbarba.jsでシームレスにページ遷移した場合にコードが展開されず表示されなくなってしまいます。（*このブログはbarba.jsを使っていますがすでに対応済みなので表示されます）

なぜbarba.jsでGistが展開されないのか

barba.jsは非同期なので「document.write()」が書かれていると無視される仕様です。「document.write()」はいろいろと動きが特殊ですし、あまり使わない方が良いと昔からけっこう言われていますので、よくJSを書く人は普通は使わないと思いますが、Gistは内部的にdocument.write()を使ってDOMを展開する仕組みになっています。上記埋め込みコードの中身がこちら。

これはどうしたもんかなぁ・・・と悩んでいたのですが、こんな記事を見つけました。

iframe上で一旦展開したコードを親フレームで受け取る。
こんなんよく思いつくな！と思いながらすぐに採用させていただきました。
めちゃくちゃニッチな内容ですが有用な記事をありがとうございます。

実際に書いてみたコード

参考記事ではbarba.jsがv1でしたのでv2の書き方にしました。
1番重要なiframeからコードを受け取る部分はまるまる使わせていただきました。

参考記事では生JSとjQueryが混ざって気持ち悪いって書かれていましたが、個人的には別に混ざるのは気持ち悪くはないと思います。そのサイトでjQueryを元から読み込ませているなら問題ないですし、わざわざこの処理のためだけにjQuery追加で読み込ませるなら「ちょっと一回考えよっか」ってなりますが。僕ですね。笑

僕のような人のために一応ネイティブに書き直したものも書いておきます。

これでbarba.jsで非同期遷移してもGistが展開されるようになりました！

おわりに

barba.jsって簡単でめっちゃオススメなんですけど、細かく制御するのに意外と手間がかかります。今回の件は日本語の参考記事がなかったら検索の仕方も難しいしたぶんお手上げでした。

barba.jsで手間がかかると言えば、「Locomotive Scroll」という海外製の慣性スクロールや・パララックスエフェクトが手軽に使えるライブラリとの連携方法が公式ドキュメントに書いてありますが、それも基本的な導入の仕方しか書いていないので応用しようと思うとけっこうめんどくさかったりします。また時間があればそのことも記事にしようと思います。