はじめに
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: 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); }) });
この処理は大きく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
をコードとして挿入し、非同期でビューが変わるようになっています。
コメント