エディタの入力方法やプログラムの実行方法について簡単に説明します。
エディタ部分は、JavaScript、HTML、CSSの3つに分かれています。
「JavaScriptのみ」や「HTMLのみ」等、選択したテンプレートによってはエディタが1つもしくは2つの場合があります。
JavaScriptエディタにはJavaScriptのみを記述してください。<script>タグは不要です。
HTMLエディタにはHTMLを記述してください。<script>タグを用いてJavaScript、<style>タグを用いてCSSも記述可能です。
CSSエディタにはCSSのみを記述してください。<style>タグは不要です。
エディタ等の高さを変更する場合は、各表示エリア下部の「つまみ」をドラッグしてください。
プログラムを実行する場合は、画面右上の「実行」ボタンを押すか、キーボードの「Ctrl+Enter」キーを押してください。
また、「自動実行」を「on」に設定することでエディタの内容を変更するのと同時にプログラムが実行されるようになります。
プログラムを実行すると、「ブラウザプレビュー」「コンソール」に結果が表示されます。
「ブラウザプレビュー」や「コンソール」右下の「エディタへ」リンクをクリックするとエディタに戻ることができます。
また、キーボードの「Ctrl+Shift」キーを押してもエディタに戻ることができます。
ブラウザ単体で実行する場合は、「ブラウザプレビュー」右上の「ブラウザ単体実行」ボタンを押してください。
別ウィンドウ上でプログラムの実行結果を見ることができます。
Bootstrapなどのレスポンシブデザインの確認などでご活用ください。
無限ループ等を実行するとブラウザの反応が遅くなる場合があります。
その際は、コンソール右上の「プログラム停止」を押してください。
それでも、ブラウザの反応が遅い場合は、ブラウザ自体を終了させてください。
その他、使い方については、「こちら」を参照してください。
ログインが必要です。
※エディタの内容を初期状態にリセットします。
※画像ファイルをBASE64文字列に変換してimgタグに埋め込める形にします。
※作成したプログラムのウィジェットをブログなどで公開することができます。
※ダウンロードしたファイルはインポートすることで編集の続きができます。
※エディタを終了しTOP画面へ戻ります。