2023 Jun 7

佐藤あゆみ

necco Note

さらなる外部連携やデザインカスタマイズが可能に – STUDIO の「カスタムコード」機能の活用方法

Web Development

ノーコードウェブサイト制作ツールの STUDIO で、サイト全体やページに対して自由にコードが記述できる「カスタムコード」がリリースされました。

まさかのノーコードツールでコードが書けるということで、全く予想していなかったリリースですが、コードを書くのが好きならば、これを使わない手はありません。
さっそく、活用例を考えてみました。

※この投稿は「コードを書きたい方」向けに書いています 🙇‍♀️

これまでの場合

これまでの STUDIO では、原則として CSS や JavaScript のコードを書けませんでした。

書きたい場合には、裏技的に iframe ボックスを挿入してそのなかに CSS を書いたり、あるいは Google Tag Manager 連携を経由してコードを挿入していました。

HTML の body 内に<style>タグを書くのは文法違反ですし（動きはしますが）、裏技ということで胸を張って使えるものではありませんでした。

また、Google Tag Manager 連携を経由してコードを挿入する場合は、STUDIO のエディターやプレビューでは状態を確認できず、ページを公開してから初めてうまく適用されているかどうかを確認できました。

注意：iframe ボックスの CSS 裏技はもう使えません

これまでは iframe ボックスを使用してページ内全域で有効になるCSS を書けましたが、今回のリリースにより、Embed ボックスに変更されたため、この裏技は使えなくなりました。

（Embed ボックスに書いた内容は強制的に iframe 内で展開されるようになったため、iframe の外となる呼び出し元のページには影響を与えられなくなりました。）

すでに iframe ボックスを使用している場合は、なにも触らなければそのまま裏技は有効のままです。しかしながら、コードを編集してしまうと、新しい Embed ボックスに変換されてしまい、今まで効いていた CSS が効かなくなる可能性があります。

カスタムコードとは

今回のカスタムコードのリリースは、大きく 2 種類の機能に分かれます。

Embed ボックス
<head>と<body>内へのコードの挿入

Embed ボックス

Embed ボックスは、今まで iframe ボックスだった機能の進化系です。
STUDIO の全てのプランで利用できます。

表示したい場所に Embed ボックスを挿入すると、そこに任意の HTML、CSS、JavaScript を 3 万字まで記述できます。

Embed ボックスに書いた内容は、エディター上にも表示が反映され、プレビューでも確認できます。
いままで挿入できなかった任意のサービスのコードを埋め込んだり、オリジナルのコードを書けるようになりました。

今までの iframe ボックスと比べると、新しく JavaScript が記述できるようになったため、より自由度が高くなっています。

ただし、今までとは異なり、Embed ボックスに書いた内容は強制的に iframe 内で展開されるようになりました。このため、iframe の外となる呼び出し元のページには影響を与えられなくなり、より安全性が高くなっています。

iframe の URL は
https://【プロジェクト ID】.studioiframesandbox.com/
となるようです。

実態としては iframe ではありますが、表示されるコンテンツに合わせて高さを自動調整する機能もついており、あまり iframe であることを意識させない作りになっています。

高さを自動調整したい場合は、Embed ボックスの縦を 1 flex に設定すると良いようです。

試した限りでは、コードに関して Undo 操作は効かないようです。
~~また、コード欄で切り取りをするために ⌘+X を押すと、Embed ボックスが消えてしまうようなので注意が必要です。~~アップデートで修正されました！（2023/06/08）

<head>と<body>内へのコードの挿入

<head>タグ内と、<body>閉じタグの直前に任意のコードを挿入できるようになりました。

この機能はSTUDIOの有料プランでのみ利用できます。

今までは Google Tag Manager を介してこれらの場所にコードを挿入していましたが、それらを介さずに直接 STUDIO 上でコードを管理できるようになりました。

サイト全体への挿入と、ページ単位での挿入が可能です。

1 つの設定欄につき 3 万字までコードを書くことができ、それぞれ10個までの設定欄を追加できます。

ページ内のほぼ全ての要素を操作可能にしますが、エディターやプレビュー上では適用されませんので、公開サイトを見て反映結果を確かめる形になります。

4つの活用例

Google カレンダーをオリジナルデザインで STUDIO ページに表示する

一番試してみたかったのは、Google カレンダーをオリジナルデザインで STUDIO ページに表示することでした。

STUDIO には営業日カレンダーの表示機能がありません。
一般的な Google カレンダーの iframe 埋め込みであればもちろん利用可能ですが、デザイン性に乏しく、いかにもただ Google カレンダーを埋め込んだだけという印象になってしまいます。

自分一人で使う分には適当なレンタルサーバにPHPファイルなどを置いてiframeで表示すればよいのですが、それができない方々のために、小さなサービスを立ち上げようかと思っていたほどには、営業日カレンダーの表示機能が欲しかったのです。

今回のリリースされたEmbed ボックスを使い、Google カレンダーの API とカレンダー表示ライブラリの FullCalendar を連携させることで、好きなデザインで営業日カレンダーを表示できるようになりました。

注意点としては、JavaScript で動作させるため、この手法を使うと API キーがページ上に露出してしまいます。このため、API キーを他のウェブサイトで使われてしまう可能性があります。もちろん対策は可能です。Google の認証情報の編集画面にて、特定のドメインのウェブサイトからのみ API キーを利用できるように変更することをお勧めします。

具体的な手順やコードは下記を参照ください。

GoogleカレンダーをオリジナルデザインでSTUDIOページに表示する

※ Google カレンダー API は無料で利用できますが、利用には上限があるようです…が、具体的な上限値は不明です。ご存知の方がいらっしゃいましたら教えてください。

このように、Embed ボックスを使えば、お好きなライブラリを CDN 経由で読み込んだり、外部の API を呼び出してデータを取得、加工できます。

Embed ボックスの中では STUDIO CMS のプロパティやページの URL などの値を変数として挿入できるため、外部の API にそれらを渡すことも可能です。記事に対するリアクションボタンを作成する、QR コードを動的に表示する、独自のフォームを送信させるなどもできそうですね。

注意点として、Embed ボックスは iframe で囲まれるため、Embed ボックス内から a タグでリンクを貼る場合は、target="_top"/target="_blank"を属性に加える必要があります。これを忘れると、リンクをクリックしても正しく遷移しません。

さて、APIと聞いてピンと来る方もいらっしゃるかと思いますが、STUDIOにはAPI連携機能があります。この連携機能を用いて営業日カレンダーを表示できないだろうかと考えたこともありますが、どうしてもデータをカレンダーの形状へと動的に整形することがSTUDIOの機能ではできませんでした。将来的には、このAPI連携機能＋柔軟なノーコードレイアウトで営業日カレンダーを実現できるようになればもっと手軽になるだろうと思います。

データの加工を必要とせず、グリッドやリスト状に表示するだけの用途であれば、API連携機能のみで実現できます。

STUDIOのAPI連携を使って、特定アカウントの最新Instagram投稿一覧を表示してみよう

CMS のカバー画像をメイソンリーレイアウトで表示する

もう一つ、小さなサービスを作ってでも実現したいと密かに思っていたのは、CMS の画像をメイソンリーレイアウトで表示することでした。

私が思う、メイソンリーレイアウトの便利なところは、内容物をカットせずに表示できるところです。トリミングしたりして情報を削らなくてもきっちりと並べて表示できるので、見た目の「映え」と情報量を両立させられます。

画像を一定のアスペクト比に自動でトリミングする場合、投稿者が文字入りの画像を投稿するなど、思わぬところで「切れて欲しくない部分が切れてしまう」ことが起きがちです。しかし、メイソンリーレイアウトならそれは起きません。

どんなアスペクト比の画像が投稿されるか分からないような状況において、メイソンリーレイアウトは、画像を自動トリミングさせずに表示できる安心安全便利な方法といえます。
※ただし、画像の表示順序を気にしなければならないケースを除く

Embed ボックスと、CMS の RSS 配信機能、そしてメイソンリーレイアウトを手軽に実現できる Macy.js を利用すれば、CMS 記事のカバー画像（アイキャッチ）に設定してある画像をメイソンリーレイアウトで表示できます。

RSS の XML ファイルを JavaScript で読み込み、その中から画像の URL を取得し、HTML を生成しつつ、Macy.js に渡してメイソンリーレイアウトを実現しています。

具体的な手順は下記を参照ください。

CMS のカバー画像をメイソンリーレイアウトで表示する

試してみて分かったのは、仕組み上、どうしても表示が遅延してしまうということでした。

ページが読み込まれてから XML ファイルを取得して、その中から画像の URL を取得し、フルサイズの画像をダウンロードして表示する…という一連の流れが必要になるためです。

RSS配信はこのような目的のために作られた機能ではないため、XML ファイル自体のレスポンスもやや遅いようです（アクセスの都度、サーバーで動的に生成している？）

もしかすると、Embed ボックスを使わずに、STUDIO のエディター内で画像のリストを生成して ID を振っておき、そのリストに対して body 末尾のスクリプトでメイソンリーレイアウトを適用する方が、表示が早くなるかもしれません。CMSデータの取得が完了したことを検知するのはそれはそれで一癖ありそうですが。

しかしながら、head や body 末尾にカスタムコードを挿入する場合はエディターやプレビューで適用されないという制約があるため、適用前後で大きくレイアウトが変わってしまうような場合には不向きだと考えています。プレビューは本公開時と同じ表示になるように構築する方が、利用者にとっては分かりやすいです。

CSS で規定の挙動をカスタマイズする

その他、STUDIO の規定の挙動を少しだけカスタマイズする CSS を試してみました。

head タグ内に CSS を挿入して、ページの読み込み時に適用されるようにしています。

これらのカスタマイズはエディターやプレビュー上で動作しなくても、それほど違和感がありません。

また、head タグ内には meta タグも挿入できます。
これを利用して、スマートフォンの通知領域の色を変更する方法を Masakazu Ikeda さんが投稿しています。

meta theme-color（通知領域の色の変更）の指定

その他のお試し

Embed ボックスを使って、Amazon アソシエイトの商品画像＆リンクを埋め込めることを確認しました。

Amazonの商品画像＆リンクがSTUDIOエディター内に表示されている。埋め込みコードが赤枠で囲まれている。

CMS 本文内の Embed ボックスでも同様に動作するはずですので、商品紹介記事を書きたい方には嬉しいアップデートと言えそうです。

試したけどできなかったこと

Embed ボックスを利用して、Gist や Cacher のコード埋め込みを表示出来るか試しましたが、表示されませんでした。

script タグで呼び出している外部の JavaScript 内で document.write が使用されており、非同期の外部スクリプトからは document.write が利用できないという制約があるため表示できないようです。

このように、何もかもが埋め込めるわけではないので、注意が必要です。Embed ボックスは全てのプランで利用できますので、これは使えるかな？と疑問に思ったらまず試してみるのが早そうですね。

コードは書けるほうがいい

全体として、動的な要素の追加は Embed で行ない、デザインの微細なブラッシュアップや STUDIO で実装できないような動きの追加は head/body 末尾で、とすると使いやすくまとまるのではないかと思いました。

例えば、見出しに対して何か特殊な装飾をしたい場合は、「Embed ボックスで見出しそのものを追加して装飾する」と「見出しはSTUDIOエディターで文字として挿入して、特殊な装飾は head や body内で行なう」の2通りが考えられますが、この場合は後者を選んだほうが、運用しやすくなるはずです。前者の場合は見出しの内容を変えたい場合に Embed ブロックの中でコードを書き換えなければなりませんが、後者であれば、エディター上でほかの文章と同じように「見たまま編集」できます。

いっぽう、営業日カレンダーの例のように、要素そのものをSTUDIOで生成できない場合は、Embed ブロックを使う方がよいでしょう。STUDIO上で div タグに id を振っておき、head/bodyにスクリプトを書いて、その中にコンテンツを生成する…という手段もとれますが、この場合はエディターやプレビュー上で該当箇所が空欄になってしまうため、公開後のページの仕上がりを予想しにくくなってしまいます。

私は、STUDIO でコードを書ける日が来るとは全く考えていませんでした。JavaScript を利用できるようにするとしても、コードではなく何らかの GUI で構築できるようにするのではないかと思っていました。

いままでの「コードを書かなくても自由なデザイン表現を実現できる」「直感的に更新できる」方向性をこれからも保ってほしいです。

しかし、そうは言っても、どうにもしがたい場面もありますので、例外的にコードを書けるようにするというのは、とても良い判断だと思いました。

ノーコードツールは、常にコード（フルスクラッチ）でできることの後追いになる宿命を持っているとは思います。しかしながら、ほとんどの人々の「ウェブページ」としての需要から見れば、すでに充分な機能を備えています。

今回のアップデートで、最先端の部類、あるいはニッチな要望をカスタムコード機能である程度がカバーできるようになり、STUDIO の活用機会がグッと広がったと感じています。

参考ページ

📮 お仕事のご依頼やご相談、お待ちしております。

お仕事のご依頼やご相談は、お問い合わせからお願いいたします。

🤝 一緒に働きませんか？

下記の職種を募集中です。より良いデザイン、言葉、エンジニアリングをチームで追求していける方をお待ちしております。詳細は採用情報をご覧ください。

デザイナー
アシスタントデザイナー
フロントエンドエンジニア
アシスタントフロントエンドエンジニア

🗒 会社案内資料もご活用ください。

弊社のサービスや制作・活動実績、会社概要、ご契約など各種情報をまとめた資料をご用意しています。会社案内資料からダウンロード可能ですので、ぜひご活用ください。

（2024年10月時点）