RawGitを利用したレスポンシブ・コード

RawGit

以前に書いたレスポンシブ・コードは、取り込みたいコードを同じドメイン配下に置いておく必要があった。多くの場合、そういった断片のコードはGistなりに置いたものを取り込みたいはずなので、その点でかなりイマイチなものだった。先ごろ知ったCodeGrabberというコード貼り付けライブラリでは、RawGitのCDN版がAccess-Control-Origin: *なことを利用してドメイン越えをしていた。レスポンシブ・コードでもこれを利用すると良さそうだ。

レスポンシブ・コードのJavaScriptライブラリの実装は変える必要なく、リンクとして参照するURLをRawGit経由でGistやGitHubのファイルにするだけで良さそう。

Gistが提供する貼り付けウィジェットがゴツすぎることとGitHubのコードは貼り付ける術が用意されていないことから、CodeGrabberの目の付け所はすごく良い。しかしpre要素へのdata-src属性を使って行うという実装は良い手段とは思えない。何かしらの事情でうまく動かなかった時にHTMLとして破綻するし、ドキュメントとしても破綻する可能性が高い。まずはa要素を使ってリンクとして参照しておいて、必要に応じて展開するという方が良いはずだ。


RawGitのCDN版は便利といえば確かにそうなんだけど、GitHub PagesがCDN経由になった今となってはイマイチ……というイメージだった。しかしこのAccess-Control-Origin: *であるという点は結構なメリットだなと見直した。GitHub Pagesでウェブフォントのホスティングもできるかも!とか考えてた(り無責任にも他人に薦めてた)けど、Firefoxでウェブフォントはドメイン越えできないので、RawGitのCDN版は有力な解ではありそう。

ただしドメインがアレでアレしたら、影響範囲が広くて悲惨そうだなとも思う。JavaScriptファイルが変なものに差し替わったり、ウェブフォントが全部変なグリフに変わったり。チキンなので動作サンプルを載せるのはやめておいた。