MENU CLOSE

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

barba.js + Gist
barba.js + Gist

はじめに

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

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

barba.jsについて

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

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

記事一覧

RELATED

WebP
inoue
inoue
TIPS

Gulpを使ってWebP画像を生成する方法【Gulp4】

howler.js
inoue
inoue
TIPS

howler.jsの使い方[音声ファイルの再生・停止]

object-fit
inoue
inoue
TIPS

【CSS】object-fitの使い方[IE11対応]

nuxt + netlify
inoue
inoue
TIPS

Nuxt.js + Netlifyで問い合わせフォームを作る方法【自動返信あり】

WordPress Theme Customizer
inoue
inoue
TIPS

【WordPress】テーマカスタマイザーを作成する

Dropdown Menu
inoue
inoue
TIPS

レスポンシブなドロップダウンメニューをつくる

ブログ記事一覧
  • HOME
  • TIPS
  • barba.jsを使ったサイトにGistを埋め込む方法