【STUDIO】コードを書く方法

2023年6月7日2023年7月1日

こんにちは、最近の暑さでへばっているキクチウェブのキクチです。

今日はSTUDIOでコードを書く方法を共有したいと思います。
おそらくSTUDIOでの仕様が以前とは変わって、ノーコードツールでありながら、コードを書ける環境が少しずつ備わってきている印象です。

STUDIOでコードを書く方法は2つあって、<iframe>タグを使う方法とGoogle Tag Managerを使う方法があります。
<iframe>タグを使う方法が更に使いやすくなったので、こちらを重視して説明していきたいと思います。

以前までだと、<iframe>タグを使用した場合はJavaScriptコードは書けなかった気がします。
なのでその時はCSSに絞ってこちらの記事を書きました。

<iframe>タグでコードを書く方法

私は後述するGoogle Tag Managerを使用する方法よりも<iframe>タグを使用する方法を推奨しています。

理由としましては、

ライブプレビュー機能で公開前から確認が可能な点、
無料プランでも使用できる点

が挙げられます。

是非<iframe>タグを使った方法を覚えていただければと思っております。

<iframe>タグを用意する

まずは、何はともあれ<iframe>タグを用意します。

STUDIOの「デザインエディタ」から

こちらから<iframe>タグを画面上に配置します。
扱いやすい大きさにサイズ変更をお願いします。

<iframe>タグにコードを書く

さて、いよいよコードを書いていきます。
先ほどもお伝えしたとおり、決して実用的なコードではないので、あくまでもSTUDIOでコードを使う感覚を掴んでいただくためのものになっております。

感覚を掴んだら適宜、ご自身で色々触ってみてください。

では、<iframe>タグを選択した状態で
画面中央右側の三本線から

赤枠で囲ったこちらにコードを記述していきます。

コードを書くと先ほどまで「iframe」だったところが
「sandbox」に変化します。

コードはこちらです。

<div class="cover">
</div>
<button class="toggle-button" onclick="toggleColor()">ボタン</button>

<style>
  .cover {
    width: 100%;
    height: 100px;
    background-color: blue;
  }
  .toggle-button {
    padding: 5px;
    width: 50%;
    margin: 10px auto 0;
  }
</style>

<script>
  function toggleColor() {
  var box = document.querySelector('.cover');
  var currentColor = box.style.backgroundColor;

  if (currentColor === 'red') {
    box.style.backgroundColor = 'blue';
  } else {
    box.style.backgroundColor = 'red';
  }
}
</script>

とてもシンプルなコードなので、コードの解説については軽くだけ触れておきます。
<button>をクリックすると、<button>タグにあるonclick=”toggleColor()”が作動して、<script>のtoggleColor()という関数が動くようになっていて、その関数内ではif文によって色を切り替える処理をしています。

もし、もっと詳しく知りたい方はChatGPTに質問してみるのも良いかもしれませんね。

コードの構造は上から

「HTML」のコード
「CSS」の<style>タグ
「JavaScript」の<script>タグ

とブロック単位で分かれているのが確認できると思います。

これで完成です。