Awesome Hacks!

プログラミング初心者なので地道に勉強していきます。分からない人の立場から整理していきます。

オンラインエディタ_webサイトへのHTML,CSS,javascript埋め込み方法と初心者にもおすすめのエディタ

最近はHTML,CSS,javascriptの解説において、webサイトへのHTML,CSS,javascript埋め込みサービスを利用するのが主流となっている。
そこで、私もそちらを利用しない手はないと思い調べた。
 
主要なサービスについてgoogleにて調べたところ、検索順位は下記となった。
 
<私が目にした主要な&気になるオンラインエディタについての検索結果件数ランキング(2017.08.17現在)>

  1. JSFiddle 10,200,000
  2. CodePen 2,470,000
  3. JS Bin 1,080,000
  4. Html5 Snippet 624,000
  5. plunker 268,000
  6. jsdo.it 108,000
  7. CSSDeck 46,900
  8. Runstant 3,330

(単位:件)

 
今回、こちらに挙げたツールのうちいくつかを実際に使って試してみる。
 
 

はてブロへの埋め込み

参考:はてブロへの埋め込み公式記法

[(URL):embed]

テスト1:はてブロへのTwitter埋め込み

普通に可能


 

テスト2:JS Binのはてブロへの埋め込み

有料アカウントじゃないと埋め込みできなさそう。多分はてブロ以外も同じ。
約1万円/年、または1,300円/月の様子なので、見送ることにする


テスト3:JSFiddleを埋め込み

はてなブログの公式記法では表示できない

ポイントは、

[(URL):embed]

を使用せず、JSFiddleのサイトで生成されたコード「<script〜</script>」を素直に貼り付けるだけ
 


しかし、こちらの方法では、HTMLの内容が長く、CSSの内容が短いといった場合に、タブを切り替える度にJSFiddleパーツの高さが変動してしまうため使いづらい。
埋め込み用コードはiframe でも取得でき、そちらだとタグ内にwidthとheightを指定可能(デフォルトでwidth:100%、height: 300px指定)なため、iframeを利用したいところ。
 
例)iframeで埋め込み


 

テスト4:js.doit

できそう(以下他ブログでの使用例)
JavaScript および Web Audio API のはてなブログへの埋め込み - shingoushori's dialy

テスト5:codepen

参考:
【はてなブログ】CodePenをはてなに貼る方法 - のんびり猫プログラマの日常

ポイントは、

[(URL):embed]

を使用せず、codepenのサイトで生成されたコード「¥」を素直に貼り付けるだけ

See the Pen Test by Yoshinori Tamaki (@tamaking01) on CodePen.



 

テスト6:RUNSTANT

(埋め込みコードはiframeをdivで囲んだものであるが、divも含めて編集モードに直接貼り付けてよい様子)

 
※RUNSTANT Lite
 
上記から、Liteの方が即時に確認できるし見やすいためLiteの方が良さげ。
国産であり、かつタブを切り替えなくても確認できるため、少数派ツールとは言え個人的に一番使いたいと思った。
ただし、ネットに使い方の情報が少ないため、表示上の不具合について解決しづらい。
ここは一旦codepenで落ち着こうかと思った。
 
どれを選ぶかはネット上の情報量、デザイン、用途や拡張機能など、人によって好みが分かれるであろうため、
まずは気になるエディタを何点か試してみるべきであろう。