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

Flatpickr
inoue
inoue
TIPS

Flatpickrで日時入力をカレンダー表示にする

BASE DESIGN THEME
inoue
inoue
TIPS

BASEテーマカスタマイズ【実践編】見出しの文言を変更できるようにする

BASE DESIGN THEME
inoue
inoue
TIPS

BASEテーマカスタマイズ【デザインオプション編】テーマに新しい機能を加える方法

BASE DESIGN THEME
inoue
inoue
TIPS

BASEテーマカスタマイズ【準備編】カスタマイズに必要な前提知識について

BACKGROUND VIDEO
inoue
inoue
TIPS

動画をWebページの背景に埋め込む時のテクニック

Google Apps Script
inoue
inoue
TIPS

【GAS】スプレッドシートからメールを送信する方法

NEW POSTS

Sass @import → @use
inoue
inoue
TRY

【Sass】@importを@useに置き換えてみる《FLOCSS対応》

Stripe Payment Links
inoue
inoue
TRY

コーディング一切不要のStripe Payment Linksで決済機能を試してみる

BASE Partners
inoue
inoue
COLUMN

【BASE Partners】有料テーマの無償提供特典について

BASE Partners
inoue
inoue
COLUMN

BASEオフィシャルパートナーに認定されました

BASE DESIGN THEME Q &A よくある質問
inoue
inoue
COLUMN

【BASEデザインテーマ】よくある質問まとめ

Drawer Menu
inoue
inoue
TIPS

CSSと簡単なJSでできるドロワーメニューの実装方法

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