オンラインエディタ_webサイトへのHTML,CSS,javascript埋め込み方法と初心者にもおすすめのエディタ
最近はHTML,CSS,javascriptの解説において、webサイトへのHTML,CSS,javascript埋め込みサービスを利用するのが主流となっている。
そこで、私もそちらを利用しない手はないと思い調べた。
主要なサービスについてgoogleにて調べたところ、検索順位は下記となった。
<私が目にした主要な&気になるオンラインエディタについての検索結果件数ランキング(2017.08.17現在)>
- JSFiddle 10,200,000
- CodePen 2,470,000
- JS Bin 1,080,000
- Html5 Snippet 624,000
- plunker 268,000
- jsdo.it 108,000
- CSSDeck 46,900
- Runstant 3,330
(単位:件)
今回、こちらに挙げたツールのうちいくつかを実際に使って試してみる。
はてブロへの埋め込み
テスト1:はてブロへのTwitter埋め込み
普通に可能
Google各サービスの写真や動画などが簡単に紹介できる機能を追加しました。Picasaウェブアルバムの写真、ウェブカメラで動画を撮影して貼り付け、動画検索してYouTube貼り付けなど。Google Picker APIを利用しています http://t.co/qGE5pzAF
— はてなブログ (@hatenablog) 2012年2月23日
テスト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で落ち着こうかと思った。
どれを選ぶかはネット上の情報量、デザイン、用途や拡張機能など、人によって好みが分かれるであろうため、
まずは気になるエディタを何点か試してみるべきであろう。