knockoutjs勉強会 – 2014/07/12 – Microsoft 大阪

感想

こんにちは、野呂です。
http://mvp.microsoft.com/ja-jp/mvp/Seiji%20Noro-5000492

大阪でknockoutjs勉強会にスタッフとして参加しました!!
KnockoutJS Japan User Group(KJJUG)

KnockoutJS と Angular + Sencha (ExtJS) についてLiveハンズオンや機能の紹介など行い、
その後は、チーム分けしてハンズオンを行いました。

  1.  鈴木さんのLiveハンズオンは、とてもわかりやすく、全員、習得できたと思います!!
  2. 宇野さんのSencha Liveハンズオンは 、Senchaを初めてみて、よくできた、製品だと思いました!
  3. 佐川さんのAngularは、おお、Angularはノンプロミングでここまでできるんだとわかりました!!
  4. 自分は、VisualStudio+KnockoutJS+TypeScript+Office365+Cordovaでこういうことができますというのを説明させていただきました!

皆さまありがとうございました!!

主催をして頂きました。佐川さん司会、調整等ありがとうございました!!

勉強会twitterハッシュタグ

#kjjug

勉強会風景

大阪Microsoft入口

ko_20140712_entrance

受付嬢

yu
始まりの挨拶、佐川さん

ko_20140712_indexMVVM_min

手を挙げる自分

ko_20140712_snoro2

懇親会

ko_20140712_drink1

隣の部屋で開催していた人たちと、一緒の場所で懇親会!総勢39人

ko_20140712_drink1_together

スライド/ブログ

鈴木様

日本語ドキュメントの紹介

本家のチュートリアルを使用した, Liveハンズオン

ko_20140712_livehandson

佐川様

Angular JSハンズオン@大阪

ko_20140712_angular

宇野様

Sencha Fiddleを使ったライブハンズオン

https://fiddle.sencha.com/#fiddle/7ks

ko_20140712_sencha

野呂資料

20140712 knockoutjs-hands-on-in-osaka


 

タイトル

初心者向けJavaScript入門からテラ・コーディングまで!JavaScriptフレームワークの主流、MVVMアーキテクチャパターンを採用しているKnockoutJSを堪能する!Sencha Ext JSのMVVMもやります!

[内容]

13:00-13:30 受付
13:30-14:30 ライトニングトーク
14:30-18:00 技術レベルに応じてグループ分け・ハンズオン
18:30-20:30 懇親会

[ハンズオングループ]
Aグループ:knockoutjsの基本的なチュートリアル
Bグループ:Visual Studioを使ってknockoutjs
Cグループ:knockoutjsコーディング
Dグループ:Sencha Ext JSコーディング

TypeScript+KnockoutJSアプリ (Visual Studio2013)

概要

TypeScript+KnockoutJSアプリのハンズオンを行うための資料です。

初心者向けJavaScript入門からテラ・コーディングまで!JavaScriptフレームワークの主流、MVVMアーキテクチャパターンを採用しているKnockoutJSを堪能する!Sencha Ext JSのMVVMもやります!

typescriptKnockout010


/index.cshtml

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <link rel="stylesheet" href="app.css" type="text/css" />
</head>
<body>
    <form data-bind="submit: save">
        <p>欲しいものリスト: <span data-bind="text: gifts.length"> </span> 点</p>
        <table data-bind="visible: gifts.length > 0">
            <thead>
                <tr>
                    <th>名前</th>
                    <th>価格</th>
                    <th></th>
                </tr>
            </thead>
            <tbody data-bind="foreach: gifts">
                <tr>
                    <td><input type="text" data-bind="value: name" /></td>
                    <td><input type="text" data-bind="value: price" /></td>
                    <td><a href="#" data-bind="click: $root.removeGift">削除</a></td>
                </tr>
            </tbody>
        </table>

        <button data-bind="click: addGift">追加</button>
        <button type="submit" data-bind="enable: gifts.length > 0">登録</button>
    </form>

    <script src="Scripts/knockout-3.1.0.js"></script>
    <script src="Scripts/knockout-es5.js"></script>
    <script src="app.js"></script>

</body>
</html>

 

/app.js

/// <reference path="scripts/typings/knockout/knockout.d.ts" />
/// <reference path="scripts/typings/knockout.es5/knockout.es5.d.ts" />

function bindMySelf(viewModel: any, functionNames: string[]): void {
    functionNames.forEach((functionName) => {
        viewModel[functionName] = viewModel[functionName].bind(viewModel);
    })
}

class ItemViewModel {
    constructor(public name: string, public price: number) {
        ko.track(this); // プロパティ (name, number) を監視できるようにする
    }
}

class GiftSetViewModel {
    constructor(public gifts: ItemViewModel[]) {
        ko.track(this);
        // メンバ関数を View 公開できるようにする
        bindMySelf(this, ['addGift', 'removeGift', 'save']);
    }

    addGift(): void {
        this.gifts.push({
            name: "",
            price: 0
        });
    }

    removeGift(gift: ItemViewModel): void {
        this.gifts.remove(gift);
    }

    save(): void {
        alert('次のようにサーバに送信できます:' + ko.toJSON(this.gifts));
    }
}

ko.applyBindings(new GiftSetViewModel([
    new ItemViewModel('高帽子', 39.95),
    new ItemViewModel('長いクローク', 120.00)
]));

 

 

参考

knockoutjs勉強会 – 2014/06/24 – Microsoft 品川

感想

こんにちは、野呂です。
http://mvp.microsoft.com/ja-jp/mvp/Seiji%20Noro-5000492

東京でknockoutjs勉強会にスタッフとして参加しました!!
KnockoutJS Japan User Group(KJJUG)

松崎さんのKnockoutのデバック方法やVisual Studioのサポート等知らないことをたくさん勉強できました。

恥ずかしながら [knockout.Mapping][knockout Viewmodel plugin]知りませんでしたが、簡単に概要を説明していただき、便利そうなので次回、使用しようと思いました。

グレープシティさんは、Wijmo+knockoutでどのように実装するのか、教えていただきました。
※Cordovaに対応してそうなのがわかったので、ぜひ組み込んでテストしてみたいと思いました。ちなみにNugetも以下のように存在しています。[Knockout Wijmo]

knockoutwijmo

私のほうは、Office365+knockoutでどのように開発するのかを説明させていただきました。

 

皆さまありがとうございました!!

主催をやっていただきました。佐川さん司会、調整等ありがとうございました!!

 

勉強会風景

開催前の準備風景

knockout-study2

 

スライド/ブログ

松崎様

Knockout.js の Utility や Plugin (programming, debugging, monitoring) #html5biz

野呂資料

Office365アプリ開発 KonockoutJS+TypeScript


 

Grapcity様の資料

確認中

 

タイトル

KnockoutJSとVisual Studio/Office365のむふふな関係!? Wijmoも参戦します!

内容

[内容]

  1. Visual Studio and KnockoutJS – 松崎 剛(日本マイクロソフト株式会社)
  2. Office365 and KnockoutJS – 野呂 清二(株式会社エクシード・ワン)
  3. KnockoutJSを使用したアプリケーションの構築例 – 瀬川正和(グレープシティ株式会社-Wijmoプロダクトマネージャ)

まとめ:KnockoutJS

作成中

  1. Wijmo
    1. Get Started with Wijmo(Visual Studio+KnockoutJS+Wijmoの開発解説)
    2. Download Wijmo Professional
    3. Wijmo 2013 v1: Mobile, Data, and SpreadJS
      WijmoはJquery Mobile+KnockoutJS対応とな、なるほど、Visual Studioで開発がみれる。
  2. Knockout日本語ドキュメント
  3. KnockoutJS Japan User Group(KJJUG)
  4. Knockout.js 3.2 Preview : Components
  5. Durandal Single Page Apps Done Right
  6. Architecting large Single Page Applications with Knockout.js
    Microsoft Azure+Single Page Application
    Visual Studio+TypeScript+KnockoutJS3.2

まとめ:TypeScript

整理中

Microsoft

  1. TypeScriptのメインページ
    1. TypeScriptのサンプルを実行できるサイト
  2. TypeScriptのサンプル(CodePlex)
  3. BuildInsider #2 youstream

 

Github

  1. JQuery, Angular, KnockoutJS等の型定義(*.d.ts)はここにある。
  2. TypeScriptのDeclarationファイルを公開しているGitHubリポジトリ
  3. TypeScript-Knockoutjs

 

CreateJS

  1. TypeScriptとCreateJSで簡単にこんなのが作れるようです。
    1. ClockMaker Labs

KnockoutJS

  1. TypeScript + Knockout ES5 でさらにシンプルに

Slideshare

  1. TypeScriptの基礎(buildinsider)
  2. TypeScriptセッションの全スライド&動画
  3. TypeScript 1.0 オーバービュー(井上さまBuildInsider2での登壇内容)

Nuget

  1. jqueryの定義を読み込む方法 Visual Studioで取り込む以下を取り込む
    1.  jquery.TypeScript.DefinitelyTyped

 

便利なツール

  1. TypeScriptとJavaScriptを2画面同時に表示する方法。
    1. Visual StudioにWeb Essentialをインストールして設定からTypeScriptで設定する。

事例

  1. 神獄のヴァルハラゲート(Gree/株式会社グラニ) 
    1. サーバサイドC#
    2. クライアントサイド:TypeScript, KnockoutJS
    3. 開発ツール:Visual Studio
  2. モンスターハンター ロア オブ カード
    1. サーバサイドC#
    2. クライアントサイド:TypeScript, KnockoutJS
    3. 開発ツール:Visual Studio
  3. 日本全国花粉飛散マップ

TypeScriptの本

  1. TypeScriptリファレンス Ver.1.0対応

 

開発環境:IDE

  1. Visual Studio
  2. 開発環境までもWeb化?! Visual Studio Online “Monaco”機能徹底解説
  3. WebStorm

 

まとめ:PhoneGap と Cordova について資料

Cordovaについて最近セミナーとかで勉強した資料を集めました。

  1. 物江さま
  2. 松崎さま
  3. 渡辺さま
  4. 川田さま
  5. 佐川さま
  6. andyさま
  7. 田中さま
    • Monacaでつくるハイブリッドアプリ
    • PhoneGapに詳しい会社が MonacaというCordova/PhoneGapのクラウドでアプリが作れるサービスを展開してくれているまたかなり有益な資料をたくさん公開、onsenuiというクールなmobile向けCSSも展開
  8. Senchaさま

Visual Studio 2013でCordovaでHelloWorldを作ってみよう。 (Multi-Device Hybrid Apps)

はじめに

Visual Studio 2013 Update2からApache Cordovaを使用して、

Android/iPhone/Windows Phoneで同一のHTML5ベースのプログラムで動作するローカルアプリを作成できます。

ローカルアプリなので、各モバイル端末のセンサー、カメラ等も使用できます。各種モバイル端末の差異はフレームワークが吸収してくれます。

さらに、Visual Studioなら強力なデバッガーTypeScriptを使用して、JavaScriptC#のように安全で簡単に開発できます。

※HTML5ベース開発なので、HTML+CSS(Twitter Bootstrap等), JavaScript(JQuery等)使用できます。

※実行するまでに、AndroidのパスやAndroid SDKのインストール等ですこしはまりました!!

 

注意 (2014/07/06):プロジェクトがクラッシュしてVisual Studioが再起動する場合

現在Hybrid App CTP1.1がプレビューなので、しかたないのですが。ツールの相性などがあるようです。

Visual Studio 2013 Pro Update2 + Multi-Device Hybrid Apps (Preview)に

Web Essentials 2013 for Update 2をインストールするとCordovaプロジェクト起動時にVisual Studioがクラッシュして再起動します。

以下の人と同じ症状

Crash in the CTP when opening “Blank App (Apache Cordova)” with Web Essentials for Update 2

対策

とりあえず、現時点では、Web Essentail アンインストール

[Visaul Studio2013][menu][Extensions and Updates] ※英語Verのメニュー

Web Essentialsのアンインストールをする。

WebEssentail

概念図

Cordova0020

 

Building Multi-Device Apps with the New Visual Studio Tooling for Apache Cordova

TechEd 2014 の紹介ビデオ

iPhone/Android での写真やローケションアプリの作成や、VSだけでなくCordovaでできることがわかります。

Androidエミュレータでの実行結果

以下のようにAndroidアプリ(HelloWorld)がVisaulStudioで実行/デバックできます。

  • Cordova0110

Cordovaの解説(MSDNより)

HTML5だけではなく、何故ハイブリッドアプリが必要なのか?を分かりやすく書いてあります。

http://msdn.microsoft.com/ja-jp/magazine/hh975345.aspx

Apache Cordova の概要

JavaScript と HTML5 コンテンツを備えたパブリックな Web ページを作成し、ユーザーをホスティング先の URL にリダイレクトすれば、HTML5 ベースのモバイル アプリを作成できます。しかし、この方法にはいくつか問題があります。最初の問題は、オンライン マーケットプレースやオンライン ストアを利用する配布モデルです。作成した Wep アプリをホストする URL をマーケットプレースへ提出することはできません。そのため、このアプリから収益を上げる方法が問題です。もう 1 つは、スマートフォンのハードウェアにアクセスする方法が問題です。スマートフォン上の連絡先、通知、カメラ、センサーなどにアクセスするための幅広いサポートを提供するブラウザー API はありません。Apache Cordova (以下、簡潔にするため Cordova とします) は、こうした問題を解決する無償のオープン ソース フレームワークです。

Helloworldを作ってみよう。

1. インストール

2. とりあえず新規にTypeScriptプロジェクトを新規作成してみる。

※JavaScriptのプロジェクトでもよい。

  • menu-[ファイル]-[新規作成]-[プロジェクト]
  • [テンプレート]-[TypeScript]-[Multi-Device Hybrid Apps]
  • Cordova0030

3. 実行してみる。(F5を押してもよい)

  • 赤枠の[Ripple – Nexus(Galaxy)]をクリックして実行する
  • Cordova0040

4. なぜか以下のエラーになる

  • コマンド “”C:\Users\snoro\AppData\Roaming\npm\node_modules\vs-mda\vs-cli” prepare –platform Android –configuration Debug –projectDir . –projectName “BlankCordovaApp1″” はコード
  • C:\Users\snoro\.cordova\lib\android\cordova\3.4.0\bin\create.bat: Command failed with exit code 8
  • An error occurred while listing Android targets
  • Cordova0050

5. Androidのパスを通す

Androidのパスを通せとみつけたので、通してみる

  • JAVA_HOME(わたしの環境は既に自動的に設定済みでした)
    • C:\Program Files (x86)\Java\jdk1.7.0_55
  • ADT_HOME
    • C:\Users\snoro(自分のPCにあわせてください)\AppData\Local/Android/android-sdk
    • Cordova0060
  • ANT_HOME(わたしの環境は既に自動的に設定済みでした)
    • C:\apache-ant-1.9.3
  • PATH: 環境変数(Sypstem Path)を編集する。
    • ;%ADT_HOME%\tools;%ADT_HOME%\platform-tools
    • Cordova0070

6. パソコンを再起動する。

7. 再度、実行してみる。(F5を押してもよい)、

エラー内容が変わった。

  • コマンド “”C:\Users\snoro\AppData\Roaming\npm\node_modules\vs-mda\vs-cli” prepare –platform Android –configuration Debug –projectDir . –projectName “BlankCordovaApp2″” はコード 8 で終了しました。
  • Please install Android target 19 (the Android newest SDK). Make sure you have the latest Android tools installed as well. Run “android” from your command-line to install/update any
  • C:\Users\snoro\.cordova\lib\android\cordova\3.4.0\bin\create.bat: Command failed with exit code 8
  • Cordova0080

8. Android SDKのインストールする。

Please install Android target 19 (the Android newest SDK)」とあるのでAndroid SDK(API 19)インストールする。

  • Android SDK Managerを起動する。
  • パスが通っているので、コマンドラインから [Android]とすると起動してくる。
  • Android SDK(API 19)をインストールする。
  • Cordova0090

9. 再々度、実行してみる。(F5を押してもよい)、

  • VIsual Studio でうまくコンパイルがされて実行される。
  • Windows ファイアーウォールで通信がブロックされるので、アクセス許可をする。
  • Cordova0100
  • HelloWorldが表示されました!!
  • Cordova0110

参考文献

knockoutjsハンズオン勉強会 – 2014/05/17 – Microsoft 品川

感想

  • こんにちは、野呂です。
    http://mvp.microsoft.com/ja-jp/mvp/Seiji%20Noro-5000492
  • 今回、東京でknockoutjs勉強会にスタッフとして参加しました!!
  • 大阪でハンズオンされた方と、今回knockout日本語ドキュメント会の方も参加され日本のknockoutjsのトップの方々と会えて、とても勉強になりました!!
  • LTやハンズオンの内容も素晴らしく、とても楽しい勉強会になりました!!
  • 私はVisual Studio 2013でハンズオン15人ぐらいで、「足し算アプリ」「Todoアプリ」を作成したのですが、次は、データベースにデータ保存するハンズオンをしてほしいと3人に言われました。
  • Knockoutjsを会社に持ち帰り広めたいと言っている参加者もいました。
  • Visual Studioのハンズオン以外では、Yomenも使っているようでした!!
  • Visual Studioのオープンソース化や、Knockoutjsと他のフレームワークのシェア等、知らないことばかりで、とても勉強になりました!!

皆さまありがとうございました!!

勉強会風景

LTの風景 50人ぐらい

knockoutjs-study0010

knockoutjs-study0020

懇親会の風景 15人ぐらい

knockoutjs-study0030

スライド

松崎様

Visual StudioでKnockoutjsを使ってデータベースを使ったアプリの開発デモ、他のフレームワークについて等とても興味のある内容です。

(PDF)

knockoutjs-study0040

デモの内容

河内 様

プロジェクトにMVVMを適用する狙い


鈴木 様

Knockoutでグラフを描こう

knockoutjs-study0050

野呂ハンズオン資料

KnockoutJS Hands-On Visaul Studio


その他、LT資料/ハンズオン資料はは近日UPします

タイトル

初心者向けJavaScript入門からテラ・コーティングまで!

JavaScriptフレームワークの主流、MVVMアーキテクチャパターンを採用しているknockoutjsを堪能する!

ATND予約サイト

http://atnd.org/events/50026

内容

13:00-13:30 受付
13:30-14:30 ライトニングトーク
JavaScript入門            – 酒巻 瑞穂
ASP.NETの変遷とKnockout.js     – 松崎 剛
プロジェクトにMVVMを適用する狙い - 河内 俊浩
Knockout でグラフを描こう!View を極める MVVM 考 – 鈴木 健太
(タイトル未定)            – 田中 豪
14:30-18:00 技術レベルに応じてグループ分け・ハンズオン
18:30-20:30 懇親会
※ 懇親会は3,500円飲み放題コースを予定しています

[ハンズオングループ]
Aグループ knockoutjsの基本的なチュートリアル
Bグループ Visual Studioを使ってknockoutjs
Cグループ knockoutjsテラコーティング

Knockout.js でTodoアプリ (Visual Studio2013)

概要

Todoアプリのハンズオンを行うための資料です。

knockout-todo


/Views/Home/ index.cshtml

@{
    ViewBag.Title = "Knockout_Todos";
}

<h2>knockout - Todo</h2>
<div class="container">
    <div class="col-lg-12">
        <div class="input-group">
            <input type="text" class="form-control" data-bind="value: title"/>
            <span class="input-group-btn">
                <button class="btn btn-info" data-bind="click: addTask">Add</button>
            </span>
        </div>
    </div>

    <div class="col-lg-12"><h3>Task List</h3></div>

    <div class="col-lg-12">
        <ul class="list-group" data-bind="foreach: tasks">
            <li class="list-group-item">
                <span data-bind="text: title"></span>
                <a href="#" data-bind="click: $parent.deleteTask" class="pull-right">
                    delete
                </a>
            </li>
        </ul>
    </div>
</div>

@section scripts{
    <script type="text/javascript" src="~/Scripts/knockout-3.1.0.js"></script>
    <script type="text/javascript" src="~/Scripts/test.js"></script>
}

/Scripts/ test.js

$(function () {
    function Task(title) {
        this.title = title;
    }

    function ViewModel() {
        var self = this;
        self.title = ko.observable("");

        self.tasks = ko.observableArray([]); //配列の変更を検知する
        self.addTask = function () {
            var task = new Task(self.title());
            self.tasks.push(task);
            self.title("");
        };

        self.deleteTask = function (task) {
            self.tasks.remove(task);
        }
    }
    ko.applyBindings(new ViewModel());
});

参考

Knockout.js で足し算アプリ (Visual Studio2013)

概要

足し算アプリのハンズオンを行うための資料です。

knockout-caluculate


/Views/Home/ index.cshtml

@{
    ViewBag.Title = "Knockout_Caluculate";
}

<h2>knockout - Caluculate</h2>
<div class="container">
    <p>
            <input data-bind="value:value1" type="text" />
            +
            <input data-bind="value:value2" type="text" />
            =
            <span data-bind="text:result"></span>
    </p>
</div>

@section scripts{
    <script type="text/javascript" src="~/Scripts/knockout-3.1.0.js"></script>
    <script type="text/javascript" src="~/Scripts/test.js"></script>
}

/Scripts/ test.js

$(function () {

    //Modelを定義
    function ViewModel() {
        var self = this;
        self.value1 = ko.observable(0);
        self.value2 = ko.observable(0);
        self.result = ko.computed(function () {
            return parseInt(self.value1()) + parseInt(self.value2());
        });
    }

    //binding (View - VIewMode)
    ko.applyBindings(new ViewModel());
});

参考