jsFiddleで「ハローワールド!」のコード・スニピットを作ってみる
このチュートリアルは、jsFiddleのチュートリアルを参考に、日本語版にしたものです。コードの事例は、AngularJSとBootstrapを使っています。
jsFiddleは、簡単でわかりやすく使えるようになっています。
このチュートリアルは、jsFiddleを使って「ハローワールド!」の作り方をお見せします。HTML、CSS、JavaScriptの経験は必要ありません。
ここで、jsFiddleを使って、簡単な「ハローワールド!」を作ってみましょう。
その後に、Bootstrapのスタイルシートを付け足します。
まず、jsFiddleをブラウザーで開きましょう。まっさらなjsFiddleのスクリーンが開きます。
ここに4つのパネルがあります。そのうち3つはHTMLとCSSとJavaScriptの編集用です。最後のResultパネルは、編集したコードを実行したときに表示される結果です。
パネルの上にあるメニューは、現在編集しているFiddle(注1)の詳細を設定するためのものです。
[新しいFiddleのページ]
ページの左側に「Frameworks & Extensions」のドロップダウンメニューがあります。これをクリックして、「AngularJS 1.2.1」を選びます。
ほかのオプションは、今気にする必要がありません。
[ドロップダウン・メニュー]
[フレームワークの選択]
[AngularJSが選択されたのを確認]
最初にFiddleの左上のHTMLパネルで作業します。
HTMLのパネルをクリックして、次のコード・スニピットを入力してください:
<div ng-app="">
<h2>
AngularJSのハローワールドのスニピットです。
</h2>
テキストボックスに何か書き込んでください:
<input type="text" ng-model="name" ng-init=" name = 'World' " />
<h1>Hello {{ name }} !!</h1>
</div>
[FiddleのHTMLパネル]
このコードで、一つの<div></div>タグの中に、AugularJSのコードが作成されます。
さぁ、次に、この最初のFiddleを動かして見ましょう。
jsFiddleの左上に「❯ Run」のボタンがあります。このボタンをクリックして、今のFiddleを動かしてみてください。
[jsFiddleの「❯ Run」ボタン]
jsFiddleが、HTML、CSS、JavaScriptを読み込んで、結果を「Result」パネルに表示します。
[Fiddleの結果表示パネル]
おめでとうございます!
最初のFiddleができあがりました!
ウェブデザイナーで無くても、簡単にきれいなスタイルを実現できることで、AngularJSのコードに、TwitterのBootstrapのスタイルを使うのが一般的になってきています。ここで、このFiddleにも、BootstrapのCSSを使ってみましょう。
FiddleでCSSを使う場合、2通りの方法があります:
- 右上のCSSパネルに直接CSSのスタイルを書き込む
- HTMLの<head></head>タグの中に、外部のCSSファイルの参照URLを書き込む
ここでは、BootstrapのCSSへの外部リンクを、<head></head>タグの中に書き込む方法を試してみましょう(注2)。
一般的には、<head></head>タグの中に、次のようなコードを書き込みます:
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
ただし、jsFiddleで、直接<head></head>タグの中に書き込むことはできません。この制限を回避するためには、FiddleのCSSパネルに、次のように記入します:
/*
jsFiddleの<head></head>タグを変更する方法
一旦スタイルを閉じる
*/
</style>
<!-- ここにCSSのリンクタグを挿入 -->
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- 再びスタイルを開く -->
<style>
[FiddleのCSSパネルにBootstrapのリンクを記入する]
このスタイルの結果を実際に見るためには、再度「❯ Run」のボタンをクリックしてください。
[jsFiddleの「❯ Run」ボタン]
すると、「Result」パネルが、次のようにかわるはずです:
[Bootstrapを使う前]
[Bootstrapを使った後]
若干見かけがかわりましたね。
これでBootstrapのスタイルが使われていることが確認できました。
では、最後に、今作ったFiddleを、他の人たちと共有しましょう。
jsFiddleでは、自分が作成したFiddleを、5つの方法で共有することができます:
- リンクを共有する
- Resultパネルに表示された結果を、ウェブページに埋め込む
- Fiddleの編集画面を、ウェブページに埋め込む(HTML, CSS, JavaScript, Resultのタブも含む)
- Twitterで共有する
- Facebookで共有する
いずれの方法も、jfFiddleの上のメニューの「Share」オプションから選びます。
[Fiddleの共有メニュー]
1. リンクを共有する方法
「Share」のメニューから「Share link」に含まれているURLをコピーします。それを、<a></a>タグの中に、次のように記載します。
<a href = "http://jsfiddle.net/terumi/m2tuZ/"> Fiddleはこちらです</a>
結果は次のとおりです:
2. Resultパネルに表示された結果を、ウェブページに埋め込む方法
「Share」のメニューから「Share full screen result」に含まれているURLをコピーします。それを、<iframe></iframe>タグの中に、次のように記載します。
<iframe width="100%" height="300" src="http://jsfiddle.net/terumi/m2tuZ/embedded/result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
結果は次のとおりです:
ここでは実際に動いているコードが表示されるので、「World」が書かれているインプットボックスに、ご自分の名前を入力してみてください。
3. Fiddleの編集画面を、ウェブページに埋め込む方法
「Share」のメニューから「Embed on your page」に含まれているURLをコピーします。それを、ページに埋め込みたい箇所に、次のようにペーストします。
<iframe width="100%" height="300" src="http://jsfiddle.net/terumi/m2tuZ/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
結果は次のとおりです:
ここでは上にFiddleのメニューがJavaScript, HTML, CSS, Resultの順に表示されています。
私たちは、JavaScriptのパネルに何も記入しなかったので、空白になっています。HTML、CSS、Resultのメニューをクリックすると、記載している内容と、結果の表示が出てきます。
メニューの順番を変えたい、又は、あるメニューは非表示にしたい場合は、URLの /embedded/
の後に、見せたいメニューを、見せたい順番に記載していきます。
メニューのオプションは、js, html, css, result, resources
です。ここで、js
は、JavaScriptのパネル、html
は、HTMLのパネル、css
は、CSSスタイルのパネル、result
は、結果のパネル、そしてresources
は、外部のデータなどを使ったときに表示されます。
それでは、先ほどの埋め込みコードを編集して、JavaScriptを非表示にして、HTML、CSS、Resultの順にメニューを表示してみます。埋め込みコードは次のように記載します。
<iframe width="100%" height="300" src="http://jsfiddle.net/terumi/m2tuZ/embedded/html,css,result/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
結果は次のとおりです:
埋め込みするURLのもう一つのオプションとして、「skin」があります。skinは、表示される内容の色合いです。現在、skinは、light
とpresentation
から選べます(デフォルトはlight
です)。
では、先ほどの埋め込みコードを編集して、skinを、presetation
に変えてみましょう。埋め込みコードは次のように記載します。
<iframe width="100%" height="300" src="http://jsfiddle.net/terumi/m2tuZ/embedded/html,css,result/presentation/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
結果は次のとおりです:
表示の文字が大きめになりましたね。
あとは、ご自分で、TwitterとFacebookでの共有を試してみてください。
もっと知りたい!
-
jsFiddleのサンドボックスとしての評価を書いたブログはサンドボックス評価:jsFiddleとAngularJSです。
-
stackoverflow で、jsFiddleに関係した質疑応答は、stackoverflowの検索結果をクリックして見てください。
-
最後に、jsFiddleの機能をもっと使いこなしたい方は、jsFiddleのドキュメンテーションを参考にするか、これから追加していくチュートリアルを楽しみにしてください。
注釈
(注1):Fiddleは、jsFiddleで書くコード・スニピットを意味します。
(注2):Bootstrap CSSの参照URLは、Bootstrap CDNから最新バージョンが取得できます。