ノーコードツール「STUDIO」にJavaScriptを埋め込む方法
お久しぶりです、あきです。
オーストラリアのシドニーに留学、専門学校でマーケティング・コミュニケーションを専攻する傍ら、Webcamperという会社を立ち上げ、エンジニアとして働いております。
久しくブログを更新しないうちに、今年も上半期が終わってしまいました。早い。
シドニーは寒くなってきましたよ。もう冬です。電気毛布が手放せません。
最近、STUDIOで自社サイトをリニューアルしていたのですが、そこで気付いた「STUDIOにJavaScriptを埋め込む方法とその不具合」について、今日はまとめていきます。
ついでに、HTMLとCSSの書き方も。
STUDIOの標準機能じゃやりたいことができない、どうしてもコーディングしたい！って方は、ぜひご参考にしてみてください。
ノーコードツール「STUDIO」にJavaScriptを埋め込む方法
STUDIOは日本発の、ウェブサイトを作るためのノーコードツールです。
非常に使いやすいUIが特徴的なのですが、STUDIOは基本的には完全なノーコードツールであり、「標準機能じゃ難しいなぁ」という場面でも、コードを書き足すのには少しコツが要ります。
HTML、CSSから順を追って見ていきましょう。
HTML、CSSの書き方
HTMLとCSSは、「iframe」エレメントの中に書けば基本的にはOK。
僕は、全ページに適用させたいCSSは「Additional CSS」というシンボルを作り、それを絶対配置にしてZ-indexを下げ、他エレメントに影響がないようにしています。
htmlを書くときは、書きたい位置にiframeエレメントを置いて中に書けばOKです。が、widthとheightは自動調整されないので、自分で指定する必要があります。
例えばブラウザ幅が縮んだ時にもiframeのheightは変わらないため、しっかりとブレイクポイント毎にheightを調整していかないと、レスポンシブはうまくいきません。
widthに関しては、iframeは100%にしておいてCSSで調整すればOKだと思います。
今回のサイトでいうと、画面中央の「NoCodeTools」のセクションは全てHTMLとCSSを書いています。
ちなみに、iframeエレメントはiframeをペーストされることが前提な為なのか、直接書き込むと、Enterで書き込みが確定してしまいます。
Shift+Enterで改行できるのですが、かなり効率が悪いので、普段使い慣れているエディタで書いたものをコピーペーストするようにしましょう。
JavaScriptの書き方
残念ながら、iframeエレメントにはscriptタグを埋め込むことはできません。
ではどうするのかというと、Google Tag Managerとの連携が必須です。
この方法は、STUDIO公式のQandAに記載されているので、こちらを参考に進めてみてください。
ちなみに、タグマネージャーとの連携には有料プランにする必要がありますが、独自ドメインを設定する時点で有料プランにしているはずなので、この辺はあまり問題ないかなと思います。
ということで、今回やりたかったものの完成形がこちら。
各ツールのアイコンをホバーすると、背景画像と説明文が表示されるというものです。
今回デザイナーからこのデザインが上がってきたとき、「うおーSTUDIOで実装できるかなぁ」と思っていたのですが、普通に無理だったので、HTML/CSSとJavaScriptを書くことにしました。
先ほど「NoCodeTools」の部分をコーディングしたのは、ホバーしたアイコンを動き続けさせたかったのと、この部分をJSで操作する必要があったからです。
タグマネージャーでのJS導入に発生する不具合
さて、ここからが僕の躓いたところ。
タグマネージャーと連携してJSを適用して、ちゃんと動作したのはいいものの、別ページに遷移してから元ページに戻ってくると、先ほどの部分が動作しません。
リロードすればうまくいくのですが、別ページから戻ってくると、また動きません。
かなり頭を悩ませましたが、試行錯誤の結果、ページ遷移がふわっと行われるSTUDIOの特性が原因である、と結論づけました。
STUDIOはひとつのプロジェクト内でページ遷移するとき、画面を全てリフレッシュさせずに、headやbodyに変更のある部分のみを書き換えて、ロード時間を短縮しています。
このときに、JSがうまく動かなくなる、ということが分かりました。
（しかし、ソースコードを見るとちゃんとタグマネージャーのJSは読み込まれていました。）
解決方法
今回、ふわっとしたページ遷移を無効にするために、リンクの設定を「Page」ではなく、全て「URL」に直打ちしました。
すると、一般的なウェブサイトのようにページ遷移ごとに画面が全て読み込まれるため、うまく動くようになりました。
…とはいえ、実はこれも完ぺきではありません。20回に1回くらいの確率で、別ページから遷移してきたときに、やはり手動でリロードしないとうまく動かないことがあります。
この解決法までは特定できなかったため、今回は諦めました…。発生確率がかなり低いので、ご愛嬌、ということで😭
意外とシンプルな解決方法でしたが、ここに至るまではかなり試行錯誤を繰り返しました。
タグマネージャーでもデプロイしまくったので、バージョンは現在46です。笑
試したこと
さて、ここからは僕がどんな仮定を立てて検証していったのかを記していきます。
Turbolinksを無効化
「Turbolinks」というJavaScriptのライブラリは、画面遷移を高速化させるためのもので、Rails4からは正式に導入されているそうです。
STUDIOの画面遷移も、これなのか？と思って、こちらのサイトなどを参考にTurbolinksを無効化したのですが、結果は変わらずでした。
jQueryが読み込まれてない？
今回の動きを実装するのには、JavaScriptのライブラリであるjQueryを使用しています。
もしや、jQueryのロードがうまくいってない？と思って、全て素のJavaScriptに書き換えてみましたが、それでも変わらず。
3.x系のjQueryを読み込んでいたので、ならば！と思い、バージョンを2.x、1.x系に下げてみましたが、関係なし！！
というか、リロードするとjQuery3.xでも動作しているので、これが原因な訳はないか…。
タグマネージャーのトリガーが適切じゃない？
タグマネージャーには、それをいつ発火させるのかを決めるトリガーを設定できます。
これを「ウィンドウの読み込み」に設定していたのですが、これが適切ではないのかな？と思い、色々と別のトリガーを試しました。
一番「これかな」と思ったのが、「リンクをクリックしたとき」というやつです。
別ページから遷移するには、ロゴまたはホームボタンをクリックする必要があるので、その瞬間をトリガーにすればしっかり動くかな？
と思いましたが、これは動かずでした。というかSTUDIOのふわっとページ遷移のときにはscriptタグはリセットされず、リンクをクリックするごとにscriptが何重にも読み込まれてしまい、逆に安定しなくなってしまいました。
色々なトリガーを試しましたが、結局は最初に設定していた「ウィンドウの読み込み」に落ち着きました。
レンダリングが間に合っていない？
もしかすると、ページ中央部分に配置しているエレメントなので、まだロードされる前にJSが適用されて、「そんなエレメントは無い」という判断になっているのかな。
と思って、iframeエレメント自体をページの一番上に移動させてみましたが、変わらず。
STUDIOがどのような仕組み・順番で要素をレンダリングしているのかまでは分かりませんが、これが原因ではなさそう。
ならば、強制リロードだ！
ということで、特定のページにいるときのみ、強制リロードさせてみることに。やり方は、JavaScriptで現在のURLを取得し、それがそのページならばリロード。
としてしまうと、そのページになったときに無限ループに陥ってしまいました (当たり前)。
なので、特定のページの場合のみ、同ページに’?index’というパラメータを足して遷移させるようにすると、ちゃんと毎回リロードされてJSも動くようになりました。
が、一度そのページに行って強制リロードは、イライラする…。ユーザビリティが悪すぎるので、この案は却下です。
一応コードはコメントアウトで残していますが、タグマネージャーでのコメント部分は、実際のページにはコメントとしても反映されないみたいですね。
ちなみに、タグマネージャーではアロー関数「=> ()」が使えないので、function()に書き換えるようにしましょう。
結論
これら様々な仮説を検証していったので、タグマネージャーのバージョンは46となりましたが、結局はSTUDIO内で「URLを直打ちするのが最適だ」というシンプルな結論に至りました。
bubbleは同じノーコードツールでも、HTMLやJavaScriptをかなり自由に書き足せるので、それと比べてしまうとどうしても自由度が低いなと感じてしまう部分がありますね。
（bubbleはアプリ制作用のツールなので、柔軟性は違って当然なのですが。）
ノーコードツールは僕の仕事の基盤であり、技術革新であることは間違いないのですが、やはりコードを書き足す自由度が低いと、痒い所に手が届かないままになってしまいますね。
ただ、STUDIOは最近大規模なアップグレードを発表したところなので、これに結構期待しています。
日本発のノーコードツール、世界に広がれー！！
