はじめに
HTML/CSSを書くときは、一度コードを書いて後ブラウザで実行する
という作業が必要です。
一連の流れについて、ウインドウを切り替えるのが煩わしい、という人もいるでしょう。
これを解消してみたいと思いました。
Progateをはじめとしたプログラム学習サイトでは、
コードを入力してボタンを押すと、プログラムが実行されます。
これを再現してみれば、一連の煩わしさが解消されると考えました。
本記事では、Ruby on railsを使用して、
HTMLのコードを書いてスイッチを押すと、その同じ画面にそのコードを元にしたビューが現れるプログラムのコードを紹介します。
非常にシンプルで、100%当初の目標を実現できているわけではありませんが、
このコードを改良すれば目標達成できるものと思っています。
実行
HTMLは次のように書きます。(Ruby on railsを使用しているので、hamlで書いています。)
.header左にhtmlコードを入力してボタンを押せば、右にその結果が表示されるぞ
.body.body__left.body__left__form=text_area"object_name",{class: "html"},{id: "html"}.btn追加する
.body__right.body__right__window.body__right__window__html
左のフォームで入力して、右側に表示させるため、body
の中にleft
とright
のクラスを作成します。
cssは下記の通りです。
ここは好みになりますが、body
にdisplay: flex:
を入れて、left
とright
が横並びになるようにします。
.header{height:20vh;background-color:yellow;font-size:32px;color:blue;}.body{display:flex;height:60vh;&__left{height:100%;width:50%;background-color:red;&__form{#html{height:40vh;width:30vw;margin:10vh10vw;}#css{height:20vh;width:30vw;margin:5vh10vw;}}}&__right{height:100%;width:50%;background-color:blue;&__window{&__html{background-color:white;height:40vh;width:30vw;margin:10vh10vw;}}}}
最後にJavaScriptです。
ここでは、ボタンをクリックすると、フォームに入力していたコード通りのビューを表示させる
ようにします。
$(function(){$(".btn").on("click",function(){lethtml=$(".html").val();$(".body__right__window__html").append(html);})});
この処理は大きく3つに分けられます。
1.ボタンをクリックしてイベントを発火させる
2.フォームに入力してあるテキストを取得する
3.取得したテキストの通り、htmのビューを作成する
1.の部分は$(".btn").on("click",function()
で行ってます。btn
クラスをclick
すると発火する、という意味になります。
2.の部分はlet html = $("#html").val();
で行ってます。html
クラスの部分に入力してあるテキストをval()
を使って変数html
に代入しています。
3.の部分は$(".body__right__window__html").append(html);
で行ってます。body__right__window__html
クラスに、append
メソッドを使って、先ほどのhtml
をコードとして挿入し、非同期でビューが変わるようになっています。