こんにちは、ここのところ Strikingly 推しの僕です。
ウェブ作成からホスティングまでを簡単に行えるサービスはウェブ制作においてコーディングから開放してくれるのでコンテンツづくりに集中できます。
最近ではデザインもかなり洗練されてきているので、使いやすくなりました。
ところが、例えばイベント日程などの動的な情報でも手動で管理するのが基本なので更新忘れや内容の間違いといったことが発生しやすいのが悩みの種です。
そこで、カスタム HTML に Vue.js を導入し、手動での管理を不要にしようと思い立ったのがこの記事を書く動機です。
構成
- Google Calendar
- Microsoft Flow
- Vue.js
- Strikingly (Pro プラン)
Microsoft Flow は Google Calendar のデータを JSON 化して公開する API の役割として使っています。
こちらのやり方は先日書いた記事が役に立つかと思います。
Microsoft Flow を使って Spreadsheet で管理しているデータを JSON にして提供する - Qiita
Vue.js に関する部分は割愛。いい記事いっぱいあります。
ハマりポイント
DOMContentLoaded イベントで DOM を取れない
Strikingly でカスタムコードを使う際、思わぬ挙動でびっくりしました。
ページ内に挿入するカスタムコードのブロック内にある DOM が、DOM 読み込み直後だと取得できないんですね。。。
const init = () => {
// カスタム HTML の DOM を取得する処理
}
window.addEventListener('DOMContentLoaded', init);
これが動きません。
カスタム HTML 以外の DOM は取れるのでカスタムコードはレンダリングのタイミングが違うんでしょうか。
結局、カスタム HTML の中に HTML も JavaScript も記述するという方法で解決しました。
Vue.js を書けるのにわざわざ Strikingly を使う意味
Vue 書けるなら Strikingly 使わずスクラッチで作ればいいのではっていう意見が聞こえてきそうですが、SEO 関連の記述とか色の管理みたいなものを GUI でできるし、HTML のコンテンツではない部分のコーディングを省けるので Strikingly を使う意味は十分あると思います。
とにかく少しでもラクしたいんです、はい。
出来上がったページを掲載しておきますので、反応速度とか気になる方は見てみてください。
何かのタイミングで閉じるかもしれませんが、その際はご了承ください。