実家の家業で営業広報活動用にwebサイトをNotionとFruitionで立ち上げて、細かい部分の修正を行ったので備忘録も兼ねて残しておく。
"PAGE_TITLE"を入力しているとページが表示されない問題
Fruitionのサイトでjsのコードを自動生成してくれるが、その際にPAGE_TITLEを入力していざcloudflareのworkerにコピペしてみて、webサイトをPCのブラウザで見る分には何ともないのだが、手持ちのiPhoneのブラウザから見ると
「こんにちは。お客様のiOSアプリに問題が発生したようです。このアプリを削除して、AppStoreから再インストールしてください。」
と表示されて何もできなくなってしまう。
対処方法としては、以下の部分をコメントアウトするなり削除することでとりあえずこの問題から回避できる。
if (element.tagName === 'title') {
element.setInnerContent(PAGE_TITLE);
}
faviconやlogo-iosの設定ができない問題
Fruitionを使って生成されたjsのコードをcloudflareのworkerにコピペしているだけなので、ドメインルート以下にfaviconやlogo-iosの画像が無いのは「それはそう」としか言えないのだが、無理やり何とかする方法はある。
fetchAndApplyの関数の中で以下のif文を作ってしまい、あたかもドメインルート以下に画像が存在するかのようにしてしまえば良い。
（処理の書き方についてはいろんな所からのコピペの継ぎ接ぎなので許してください…）
if (url.pathname.endsWith('favicon.ico')) {
const headers = {
'Content-Type': 'image/x-icon',
'Access-Control-Allow-Origin': '*',
};
const binaryImage = atob(favicon_base64Image);
const bytes = new Uint8Array(binaryImage.length);
for (let i = 0; i < binaryImage.length; i++) {
bytes[i] = binaryImage.charCodeAt(i);
}
const blob = new Blob([bytes.buffer], { type: 'image/x-icon' });
return new Response(blob, { headers });
}
favicon_base64Imageの変数にはfaviconやらの画像をbase64の文字列に変換させたものをソースコード内に行数は喰うが文字列の定数なりで記載しておけば良い。
（logo-iosについてもurl.pathname.endsWith('/images/logo-ios.png')と変えれば同様の処理でなんとかなる）
metaタグの修正
Fruitionで生成したwebサイトの状態のままだとmetaタグに関してがNotionの情報のままだったりと手が入っていないようなので以下のif文をMetaRewriterクラスに追記して修正した。もちろん関係無いif文であれば自己判断で消してください。
（正直なところ「これが正解」だとは思っていないので、本来はこうするべきだーなどがありましたらご指摘いただけると嬉しいです）
if (element.getAttribute('property') === 'og:image'
|| element.getAttribute('name') === 'twitter:image') {
element.setAttribute('content', 'いいかんじのがぞうURL');
}
if (element.getAttribute('name') === 'twitter:site') {
element.setAttribute('content', '@から始まるXのアカウント名');
}
// 主が日本語で、英語のページも存在するのでalternateの要素も追加
if (element.getAttribute('property') === 'og:locale') {
element.setAttribute('content', 'ja_JP');
element.setAttribute('og:locale:alternate', 'en_US');
}
最後に
Fruition本家githubの更新もそんなに活発ではないように見えますし、日本語の情報もサイト立ち上げについての情報くらいしか見当たらなかったので、私の行った修正が誰かの助けになればと思います。
立ち上げたサイト自体もドメインで年額25$くらい、Notionの課金もiOSからパーソナルProの課金で年額5000円、cloudflareは100,000件/日以上のアクセスが無ければ無料枠で運用できているので、まぁ安い方でしょう。と勝手に思っている。
追記: 2024/11/04
もうFruition本体の更新も3,4年止まっていてNotionの更新に追いつかない部分もちょいちょい出てきているように見えます。
標準出力されるコードをそのままコピペで動くか、というと上手く動かないみたいなので気を付けてください。