以前に書いたレスポンシブ・コードは、取り込みたいコードを同じドメイン配下に置いておく必要があった。多くの場合、そういった断片のコードは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ファイルが変なものに差し替わったり、ウェブフォントが全部変なグリフに変わったり。チキンなので動作サンプルを載せるのはやめておいた。