ブログで Webフォント・音声・JS・CSS などを読み込みたいときのファイル置き場として...
Google のアカウントがあればはじめることのできる Firebase の ホスティング サービスを使って、アップロードした Webフォント 等を Blogger 側から読み込むときにはfirebase.jsonの設定を書き換える必要がありました。
Firebase Hosting の使い方については、前回の記事をご覧いただければと思います。
また、このページでは、パブリックドメインのフリーフォントであるmilkjf16 Boldを Firebase にアップして使わせてもらってます。
Access-Control-Allow-Origin を設定しないと Webフォント を Firebase から読み込めない
firebase initしたときに Firebase の作業用フォルダに作成されたfirebase.jsonにAccess-Control-Allow-Originを設定しないと Blogger などの外部のサイトから Webフォントを読み込むことができませんでした。
firebase.json を書き換え
firebase.jsonファイルをテキストエディタなどで開くと、以下のようになっていると思います。
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
これを以下のように書き換えてAccess-Control-Allow-Originを設定します。
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"headers": [ {
"source" : "**/*",
"headers" : [ {
"key" : "Access-Control-Allow-Origin",
"value" : "*"
} ]
} ]
}
}keyの下のvalueを"*"ではなく、"https://www.example.com"のような値にすると、https://www.example.com のみに 読み込みを許可する設定となります。
特定のサイトのみに許可することで、Hosting の データ転送量節約 に多少はつながるかも。
書き換えが終わったら、firebase deployをして設定を反映させましょう。
補足：Access-Control-Allow-Origin の有無が問題にならないケース
<audio src="https://example.com/hoge.mp3"></audio>のようにHTMLタグのsrcやhref属性からリソースを読み込む場合は、Access-Control-Allow-Originが許可されていてもいなくても、関係なしに 外部サイトのファイルを読み込むことができました。
Access-Control-Allow-Origin の有無が問題 となるのは CSS や JS のスクリプト の文中で、自分のドメイン外のリソースを参照して 読み込もうとする場合でした。
