進化が止まらないstudio。
https://studio.design/ja
ノーコードでホームページが作成できるので大人気のようです。
今時のかっこいいホームページが作れます。
クラウドなのでレンタルサーバーも必要なしです。
しかし「なんでもできる」までは到達していないでしょう。
そこで現れたのが「カスタムコード」です。
公式：カスタムコード
https://studio.design/ja/whats-new/customcode
<body>や<head>へのscript記述やcssを差し込めます。（Starterプラン以上で可能）
上の公式記事を見ると、簡単にすごくスピーディに仕込めるように見えるアニメーションがあります。
簡単そうですね！
ノーコードだけでは再現できなくて諦めていた動作を可能にできるかもしれない、表現の自由度を高められると期待です。
しかし、そう簡単にいかなかったんですぅ。
【注意事項】
Freeプランでは動作しません。
ライブプレビューでは動作しません。
ページ遷移から戻るとイベントが働かない？
studioでのミッションは以下の3つ、そんなに難しくない実装です。
- モーダルにスライダー（某有名ライブラリ）を入れたい。
- スクロールすると、ある部分でsecondヘッダーをニョキっとfixedで出したい。
- stikyスティッキーcssで止めたいところがある。
cssは難なくstiky実装できました。
いける！
スライダーやヘッダも、jQueryやライブラリjsをcdnで仕込んで実装できました。
いいじゃん！
と思っていました。
思っていた？ダメだったんですか。
はい。
最初の読み込みでは発火して動作したスライダーは、他のページを見に行って、また戻ってくると動作していない。
スクロールのfixedヘッダーも同様です。
うまく行ってたものがうまくいかないのでイライラも2倍です。
あなたのコードが変なのでしょｗ
見慣れないエラー。見たくない。
【結論】外部からの読み込ませはやめ
まず、外部からの読み込ませはやめました。そういうエラーのようです。
分かったことや諦めたことは以下です。
- css関係は問題なく使用できる
- スライダーは公式の方法でする
- fixedヘッダーはバニラjsにする
※studioコミュニティー
https://community-ja.studio.design/c/editor/head-style
似た事象に悩む人はやはりいらっしゃるようです。
運が良ければ有志の方の返答をいただけるようです。監視すればいい？
jQueryをjavascriptに変換をAIに頼んで変換してもらいます。
fixedヘッダー用のjsで、idをつけてスクロールでonのclassを付けたり消したりします。ページ遷移から戻ってきても動作したものを共有です。
<script>
window.addEventListener("scroll", function() {
var secondSection = document.getElementById("second");
var topSecondHeader = document.getElementById("header");
function toggleHeaderVisibility() {
var scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
var secondSectionOffset = secondSection.offsetTop;
if (scrollPosition >= secondSectionOffset) {
//console.log("addClass on！");
topSecondHeader.classList.add("on");
} else {
//console.log("removeClass on！");
topSecondHeader.classList.remove("on");
}
}
toggleHeaderVisibility();
});
</script>ポイントはすごくシンプルでないとアレなのかも、動かないということだと思います。
進化が止まらないstudioなので、いずれは近いうちに改良されることでしょう。
無駄なゴミ記事になるのかなぁ。
参考サイト置き場
参考にさせていただきました。ありがとうざいます。
公式：カスタムコードライブラリ
https://community-ja.studio.design/c/customcode_library/
参考：The Learning Canvas
https://the-learning-canvas.com/2024/01/08/studio-customcode/