自分のサーバーからiframeで呼び出して、STUDIOの拡張性を広げる方法

こんにちは、あきです。

オーストラリアのシドニーに留学、専門学校でマーケティング・コミュニケーションを専攻する傍ら、Webcamperという会社を立ち上げ、エンジニアとして働いております。

先日、「STUDIOとタグマネージャーを接続してJavaScriptを埋め込む方法」に関して投稿しましたが、今回はiframeタグを使ってJavaScriptを適用させる方法について解説します。

というのも、先日の記事では「ページ遷移先をPageではなくURLに直打ちすることで、タグマネージャーの安定性を上げる」という方法について解説しましたが、投稿後に「自分のサーバーにHTML等をホストしてiframeから読み込めば、URLを直打ちしなくてもできるんじゃないか」ということに気付いたので、それをまとめていこうと思います。

その際に起こるであろう「スマホ端末でウェブフォントがうまく読み込めない」という不具合の解決方法も同時に記載するので、ぜひご参考に。

自分のサーバーからiframeで呼び出して、STUDIOの拡張性を広げる方法

日本発のノーコードツール「STUDIO」は、非常に扱いやすいUIが特徴的の、ウェブサイトを作るためのノーコードツールです。

しかしながら、基本的にはHTML/CSS/JSなどを自由に書くことができず、コードを書き足すには少しコツが要ります。その方法を以前こちらで解説したのですが、今回はまた違う方法。

自分のサーバーにHTMLファイルなどをアップロードし、そのURLをSTUDIOのiframeタグから直接呼んでくるというものです。

この方法だとタグマネージャーを使う必要もないですし、ふわっとした気持ちの良いページ遷移を残したままにできます。つまり、STUDIOを有料プランにアップグレードしていなくても使えます。

しかし、そのファイルをホストするサーバーを自前で用意する必要があるので、やはり完全無料ではありませんね。

僕が使っているのはエックスサーバーで、価格もお手頃でオススメです。

もし「お名前ドットコム」などで取得したドメインをエックスサーバーとSTUDIOで使いたいという場合は、こちらの記事をご覧ください。

自前のサーバーデータをiframeから呼び出す方法

これは非常に単純で、そのページのURLをコピーしてSTUDIOのiframeタグのURLに貼り付ければOKです。

前回説明したように、heightは自動調整されないため、しっかりとブレイクポイント毎に調整する必要があります。

がっつりエディタを公開しているこのサイトは、僕の会社「Webcamper」のサイトです。以前はWordPressで作っていたのですが、今回、STUDIOでリニューアルしました。

これだけで、自分で書いたHTMLやJavaScriptが反映されました。簡単ですね。

エックスサーバーでのサブドメイン設定

さて、ここからはどのように自前のサーバーにホストするのかを解説します。

人によって環境は違うかと思いますが、僕は普段、お名前ドットコム・エックスサーバー・ノーコードツールを連携させることが多いです。今回のファイルも、エックスサーバーへホストします。

（本記事のドメインは「GoDaddy」で取得したものですが、基本的に仕組みは同じ）

独自ドメインを取得しているのですが、「webcamper.co」というメインドメインは、STUDIOと繋げてしまっているため、それとは別に、今回のファイルをホストするようにサブドメインを設定します。

サーバーパネルから、「ドメイン→サブドメイン設定」へ行き、設定したいドメインを選択、「サブドメイン設定追加」から、任意のサブドメイン名を設定します。

今回僕は、「hosting.」というサブドメインを用意しました。

念のため、「無料独自SSLを利用する」のチェックも忘れずに。

これでサブドメインの準備ができたので、あとはFTPソフトから操作しましょう。

実際にファイルをアップロード

僕が長く愛用しているFTPソフトは「Cyberduck」ですが、これはお好みで。

サブドメインの反映には数時間かかることがありますが、正常に完了すれば、public_htmlフォルダの中にサブドメイン用のフォルダができているはずです。

あとはここにHTMLなどのファイルをアップロードするだけで、サブドメインがウェブサイトとして機能するようになります。

（もちろん、サブドメインにWordPressをインストールして別サイトとして運用することも可能です。）

僕はその中に、今回のセクション用に新たに「nocode_tools」というフォルダを作り、それの中にHTMLやCSS、SCSS、JavaScriptなどをアップロードしています。

スマホ端末でウェブフォントが適用されない不具合を修正

この方法で無事、STUDIO内に自前のサーバーデータを引っ張ってこれたのですが、この状態だとスマホ端末ではiframe内のウェブフォントが適用されない不具合が起きることがあります。

これを回避するためには、フォント自体をダウンロードしてそれも一緒にサーバーへホストし、そのフォントを読み込めばOKです。

今回は「Lora」というフォントを使いたかった為、Google Fontページの「Download Family」ボタンよりダウンロードしました。

これをサーバーへホストします。先ほどのCyberduckのスクリーンショット内にある「Lora」というファイルが、このフォントファイルです。

CSSに「@font-face」を使ってこれらのフォントを読み込みます。url(”)内には先ほどアップロードしたフォントファイルのURLを。

そして、適用させたいところで「font-family」を指定すればOK。

今回はfont-weightが400と500のものを使いたかったので、RegularとMediumを読み込んでいますが、フォントは結構重いので、必要以外のファイルは読み込まないようにご注意ください。読み込むフォントは最小限に。

まとめ

先日の記事では、タグマネージャー連携のJavaScriptのパフォーマンスを上げるために「ページ遷移先をSTUDIOのURL欄に直打ちして、ふわっとしたページ切り替えを無効化する」というやり方を解説しましたが、今回の方法だと、ふわっとしたページ切り替えを残したままやりたかった動きを実装できました。

しかし、全ページに適用させたいJavaScriptはそのままタグマネージャーから読み込んでいます。が、なぜかこれはリロードしなくてもちゃんと動くのよなぁ。

なぜ一部の記述だけリロードしないと反応しなかったのかは謎のまま…ですが、この方法を使えばSTUDIOの拡張性も一気に上がりますね。

あー、もっと早くこの方法に気付いておけばよかった！