チュートリアル：WindowsストアアプリをAngularJSで作ってみる（Part 2）

Windows Store Tutorial Part 2

AngularJSを使ってWindowsストアアプリを作ってみる このチュートリアルは、AngularJSを使ってWindowsストアアプリを使って作ってみます。 Part 1では、HelloWorld!を、Microsoft独自のJavaScriptのライブラリを実装したWinJSだけで作ってみました。 Part 2では、同じアプリをAngularJSで作ってみます。 チュートリアル（Part 2） Part 1のチュートリアルでは、Microsoftが出している HelloWorld!の事例をもとに、Microsoftが提供するWindowsストア用のJavaScriptライブラリ、WinJSだけでアプリだけで作ってみました。見かけはAngularJSっぽい動きにしましたが、ソースコードはAngularJS抜きで実現しました。 こんどは、早速、AngularJSで同じWindowsストアアプリに挑戦してみます。 最初のAngularJS＋Windowsストアアプリ：「ハローワールド！」 MicrosoftのHelloWorld!の事例は、ユーザーが名前をInputフィールドに入れてボタンをクリックすると、Inputフィールドの下に「Hello ○○!」と表示されるものです。 そこの部分をAngularJSに置き換えて、Inputフィールドに何かを入力するたびに、Inputフィールドの下に入力した文字列を表示するようにしました。 完成したAngularJSでのHelloWorld!は次のような感じです： default.htmlの中身 default.htmlは、Part 1と比べて、3点ほど違いがありますが、ここでは default.html ... Read more »
5 years ago

チュートリアル：Windows ストアアプリをAngularJSで作ってみる（Part 1）

Windows Store Tutorial Part 1

AngularJSを使ってWindowsストアアプリを作ってみる このチュートリアルは、AngularJSを使ってWindowsストアアプリを使って作ってみます。 Part 1では、HelloWorld!を、Microsoft独自のJavaScriptを実装した、WinJSだけで作ってみます。 Part 2では、同じアプリをAngularJSで作ってみます。 チュートリアル（Part 1） 最近Windowsストアアプリに挑戦する機会があって、AngularJSで作ってみたいと思いました。 もし皆さんも同じことを考ていたら、このチュートリアルを参考に是非試してみてください。 このPart 1では、Microsoftが出している HelloWorld!の事例をもとに、Microsoftが提供するWindowsストア用のJavaScript、WinJSだけでアプリを作ってみます。 最初のWindowsストアアプリ：「ハローワールド！」 MicrosoftのHelloWorld!の事例は、ユーザーが名前をInputフィールドに入れてボタンをクリックすると、Inputフィールドの下に「Hello ○○!」と表示されるものです。 そのコードを若干手直しして、Inputフィールドに何かを入力するたびに、Inputフィールドの下に入力した文字列を表示するようにしました。 完成したHelloWorld!は次のような感じです： default.htmlの中身 このWindowsストアアプリは、default.html、default.js、default.cssからなりたっています（これらのコードの説明は、HelloWorld! ... Read more »
5 years ago

サンドボックス評価：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 »
5 years ago

チュートリアル：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

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

Sandbox for MEAN Development

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