チュートリアル:jsFiddle + AngularJS

jsFiddle and AngularJS Tutorial

jsFiddleで「ハローワールド!」のコード・スニピットを作ってみる

このチュートリアルは、jsFiddleのチュートリアルを参考に、日本語版にしたものです。コードの事例は、AngularJSBootstrapを使っています。


チュートリアル

jsFiddleは、簡単でわかりやすく使えるようになっています。

このチュートリアルは、jsFiddleを使って「ハローワールド!」の作り方をお見せします。HTML、CSS、JavaScriptの経験は必要ありません。


最初のFiddle:「ハローワールド!」

ここで、jsFiddleを使って、簡単な「ハローワールド!」を作ってみましょう。

その後に、Bootstrapのスタイルシートを付け足します。


jsFiddleを開きましょう

まず、jsFiddleをブラウザーで開きましょう。まっさらなjsFiddleのスクリーンが開きます。

ここに4つのパネルがあります。そのうち3つはHTMLとCSSとJavaScriptの編集用です。最後のResultパネルは、編集したコードを実行したときに表示される結果です。

パネルの上にあるメニューは、現在編集しているFiddle(注1)の詳細を設定するためのものです。

[新しいFiddleのページ]

New Fiddle Screen


AngularJSのフレームワークを選びます

ページの左側に「Frameworks & Extensions」のドロップダウンメニューがあります。これをクリックして、「AngularJS 1.2.1」を選びます。

ほかのオプションは、今気にする必要がありません。

[ドロップダウン・メニュー]

Frameworks and Extensions Dropdown

[フレームワークの選択]

AngularJS Framework Select

[AngularJSが選択されたのを確認]

AngularJS Framework Selected


「ハローワールド」のHTMLを作りましょう

最初に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パネル]

Create HTML

このコードで、一つの<div></div>タグの中に、AugularJSのコードが作成されます。


Fiddleを動かしてみましょう

さぁ、次に、この最初のFiddleを動かして見ましょう。

jsFiddleの左上に「❯ Run」のボタンがあります。このボタンをクリックして、今のFiddleを動かしてみてください。

[jsFiddleの「❯ Run」ボタン]

jsFiddle Run Button

jsFiddleが、HTML、CSS、JavaScriptを読み込んで、結果を「Result」パネルに表示します。

[Fiddleの結果表示パネル]

jsFiddle Result Pane

おめでとうございます!

最初のFiddleができあがりました!


スタイル(CSS)を使ってみましょう

ウェブデザイナーで無くても、簡単にきれいなスタイルを実現できることで、AngularJSのコードに、TwitterのBootstrapのスタイルを使うのが一般的になってきています。ここで、このFiddleにも、BootstrapのCSSを使ってみましょう。

FiddleでCSSを使う場合、2通りの方法があります:

  1. 右上のCSSパネルに直接CSSのスタイルを書き込む
  2. 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のリンクを記入する]

Add Bootstrap CSS

このスタイルの結果を実際に見るためには、再度「❯ Run」のボタンをクリックしてください。

[jsFiddleの「❯ Run」ボタン]

jsFiddle Run Button

すると、「Result」パネルが、次のようにかわるはずです:

[Bootstrapを使う前]

Before Bootstrap CSS

[Bootstrapを使った後]

After Bootstrap CSS

若干見かけがかわりましたね。
これでBootstrapのスタイルが使われていることが確認できました。


作ったFiddleを共有しましょう

では、最後に、今作ったFiddleを、他の人たちと共有しましょう。

jsFiddleでは、自分が作成したFiddleを、5つの方法で共有することができます:

  1. リンクを共有する
  2. Resultパネルに表示された結果を、ウェブページに埋め込む
  3. Fiddleの編集画面を、ウェブページに埋め込む(HTML, CSS, JavaScript, Resultのタブも含む)
  4. Twitterで共有する
  5. Facebookで共有する

いずれの方法も、jfFiddleの上のメニューの「Share」オプションから選びます。

[Fiddleの共有メニュー]

Share Fiddle

1. リンクを共有する方法

「Share」のメニューから「Share link」に含まれているURLをコピーします。それを、<a></a>タグの中に、次のように記載します。

<a href = "http://jsfiddle.net/terumi/m2tuZ/">  Fiddleはこちらです</a>

結果は次のとおりです:

Fiddleはこちらです

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は、lightpresentationから選べます(デフォルトは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での共有を試してみてください。


もっと知りたい!


注釈

(注1):Fiddleは、jsFiddleで書くコード・スニピットを意味します。

(注2):Bootstrap CSSの参照URLは、Bootstrap CDNから最新バージョンが取得できます。