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

inoue
TIPS

【CSS + JS】テキストの無限ループアニメーション

inoue
TIPS

【Shopify】カートへの遷移を飛ばしてチェックアウトに進むボタンを設置する

inoue
TIPS

【JS】PhotoSwipe v5を使って画像をポップアップ表示する

inoue
TIPS

gulpでjpg・pngからAVIF画像を生成する

inoue
TIPS

【JS】MutationObserverでDOMを監視[PhotoSwipe(v5)+Swiper(v8)連携]

inoue
TIPS

【Google Sheets API】 スプレッドシートのデータをJSONで取得する

NEW POSTS

inoue
TRY

【WordPress】GA4連携の人気記事ランキング機能を自作プラグイン化してみた

inoue
TRY

【netlify】ビルドイメージを更新 [ Ubuntu Xenial 16.04 → Ubuntu Focal 20.04 ]

inoue
TIPS

【PHP】Google Business Profile APIを使ってクチコミを取得する

inoue
TRY

スクリーンショットのAPI「screendot」を使ってみた

inoue
TIPS

【window.matchMedia】メディアクエリでhoverが使えるデバイスを判定

inoue
TIPS

lax.jsの使い方【スクロール連動アニメーションの実装】

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