はじめに
HTML/CSSを書くときは、一度コードを書いて後ブラウザで実行するという作業が必要です。
一連の流れについて、ウインドウを切り替えるのが煩わしい、という人もいるでしょう。
これを解消してみたいと思いました。
Progateをはじめとしたプログラム学習サイトでは、
コードを入力してボタンを押すと、プログラムが実行されます。
これを再現してみれば、一連の煩わしさが解消されると考えました。
本記事では、Ruby on railsを使用して、
HTMLのコードを書いてスイッチを押すと、その同じ画面にそのコードを元にしたビューが現れるプログラムのコードを紹介します。
非常にシンプルで、１００％当初の目標を実現できているわけではありませんが、
このコードを改良すれば目標達成できるものと思っています。
実行
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: 10vh 10vw;
}
#css{
height: 20vh;
width: 30vw;
margin: 5vh 10vw;
}
}
}
&__right{
height: 100%;
width: 50%;
background-color: blue;
&__window{
&__html{
background-color: white;
height: 40vh;
width: 30vw;
margin: 10vh 10vw;
}
}
}
}
最後にJavaScriptです。
ここでは、ボタンをクリックすると、フォームに入力していたコード通りのビューを表示させるようにします。
$(function(){
$(".btn").on("click",function(){
let html = $(".html").val();
$(".body__right__window__html").append(html);
})
});
この処理は大きく３つに分けられます。
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をコードとして挿入し、非同期でビューが変わるようになっています。
コメント