サンドボックス評価:PlunkerとAngularJS

Plunker and AngularJS

Plunker + AngularJSの全体評価:☺☺☺ プラス点・マイナス点: (+)Plunkerは、jsFiddleと同様に、JavaScriptを使ったフロントエンド開発を支援するためのサンドボックスのクラウド・サービスです。Plunkerは新規のコード・スニピットを作成するときのAngularJSの初期テンプレートを提供しています。さらにAngularJSのライブラリをパッケージ化して簡単にコード・スニピットに追加できるようになっています。Plunkerでは、<head></head>タグの内容を直接編集できます。 (−)PlunkerのドキュメンテーションはGithub上とPlunkerの内部に散らばって提供されている様子です。コード・スニピットの共有はURLの属性を手動で設定するなど煩雑な面があります。 サービス名とバージョン Plunker バージョン:0.7.23 AngularJSとの相性 ☺☺☺☺ 新規コード・スニピットを作成するときのAngularJSのテンプレートがあり、ワンクリックでAngularJSの準備ができます。その他にも、パッケージという形で、最新のAngularJSのライブラリや、Bootstrapのスタイルなどを追加することができます。現在提供されているAngularJSのバージョンは、1.2.15を含むそれ以降のバージョンです(2014年3月30日時点で、AngularJSの安定したライブラリはバージョン1. ... Read more »

チュートリアル:jsFiddle + AngularJS

jsFiddle and AngularJS Tutorial

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

サンドボックス評価: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 »

サンドボックスとSNSでMEANを学ぶ

Sandbox for MEAN Development

MEANを学ぶために欠かせないサンドボックスと開発者向けソーシャルネットワーク このブログの紹介でも書きましたが、私がMEANを学ぶ上で欠かせないのがオンライン上で見つけた多くのチュートリアルやアドバイスです。その中でも、実際のコーディングのサンプルを使って丁寧に説明してくれる方々には、本当に感謝しています。 今日は、このコーディングのサンプル(これをサンドボックス(英1) (注1)と呼んでいます)と開発者向けソーシャルネットワークのサービスを紹介をします。 動いているサンプルコードを参考にする プログラムでとっても時間がかかるのが、トラブルシューティングじゃないですか? ちゃんと書いているはずのコードが、ちゃんと動いてくれない。こんなときに、ちゃんと動いているコードが参考にできると、本当に助かります。 これらのコーディングのサンプルは、スニピット(英2)と呼ばれるもので、プログラムコードの一部を切り取って見せるものです。さらに、見せるだけではなく、実際にプログラムとして動かせるのが、オンライン系のサンドボックスです。 例えば、Angularの一番簡単なプログラムのスニピットをサンドボックスで見ると、こんな感じになります(ここではjsFiddleというサンドボックスのサービスを使っています): コードのスニピット コードの結果画面 どうしても分からない場合は、開発者向けソーシャルネットワークで質問してみよう チュートリアルやオンラインのドキュメンテーションでも分からないときは、オンライン上のソーシャルネットワーク(英3)を使うのも手です。特に開発者向けのものは、大半ちゃんとした回答が戻ってくるので助かります。そして大体の場合は、スニピットもつけてくれるので、すぐに自分で試してみることもできます。 開発者向け質疑応答サイト(英4)の代表は、 ... Read more »