チュートリアル：jsFiddle + AngularJS

jsFiddle and AngularJS Tutorial

jsFiddleで「ハローワールド！」のコード・スニピットを作ってみる このチュートリアルは、jsFiddleのチュートリアルを参考に、日本語版にしたものです。コードの事例は、AngularJSとBootstrapを使っています。 チュートリアル jsFiddleは、簡単でわかりやすく使えるようになっています。 このチュートリアルは、jsFiddleを使って「ハローワールド！」の作り方をお見せします。HTML、CSS、JavaScriptの経験は必要ありません。 最初のFiddle：「ハローワールド！」 ここで、jsFiddleを使って、簡単な「ハローワールド！」を作ってみましょう。 その後に、Bootstrapのスタイルシートを付け足します。 jsFiddleを開きましょう まず、jsFiddleをブラウザーで開きましょう。まっさらなjsFiddleのスクリーンが開きます。 ここに４つのパネルがあります。そのうち３つはHTMLとCSSとJavaScriptの編集用です。最後のResultパネルは、編集したコードを実行したときに表示される結果です。 パネルの上にあるメニューは、現在編集しているFiddle(注1)の詳細を設定するためのものです。 [新しいFiddleのページ] AngularJSのフレームワークを選びます ページの左側に「Frameworks & Extensions」のドロップダウンメニューがあります。これをクリックして、 ... Read more »
5 years ago

サンドボックス評価：jsFiddleとAngularJS

jsFiddle and AngularJS

jsFiddle + AngularJSの全体評価：☺☺☺ プラス点・マイナス点： （＋）jsFiddleは、JavaScriptを使ったフロントエンド開発を支援するために提供されているサンドボックスのクラウド・サービスです。AngularJSもJavaScriptで、フロントエンド開発向けなので、用途は合致しています。jsFiddleはAngularJSのライブラリをドロップダウン・リストから簡単に選択させるなどのサポートをしています。 （−）jsFiddleの最新のアップデートが2013年1月、サイトのコピーライトが2010年となっている様子からみて、システムそのものが現状維持になっているように思われます。さらにGithubのアカウントを使ってユーザ登録ができませんので、Githubとの連動もできない様子です。jsFiddleでは、<head></head>タグの内容を直接編集できません。 サービス名とバージョン jsFiddle バージョン：α0.5a2 AngularJSとの相性 ☺☺☺☺ ドロップダウン・リストでAngularJSの最新のライブラリを簡単に選択できるなどサポートしています。現在、AngularJSのバージョン1.1.1と1.2.1のライブラリが選択可能です。それ以外のバージョンは、HTMLの本体から<script& ... Read more »
5 years ago