Category: JavaScript

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ハンズオンや機能の紹介など行い、 その後は、チーム分けしてハンズオンを行いました。  鈴木さんのLiveハンズオンは、とてもわかりやすく、全員、習得できたと思います!! 宇野さんのSencha Liveハンズオンは 、Senchaを初めてみて、よくできた、製品だと思いました! 佐川さんのAngularは、おお、Angularはノンプロミングでここまでできるんだとわかりました!! 自分は、VisualStudio+KnockoutJS+TypeScript+Office365+Cordovaでこういうことができますというのを説明させていただきました! 皆さまありがとうございました!! 主催をして頂きました。佐川さん司会、調整等ありがとうございました!! 勉強会twitterハッシュタグ #kjjug 勉強会風景 大阪Microsoft入口 受付嬢 始まりの挨拶、佐川さん 手を挙げる自分 懇親会 隣の部屋で開催していた人たちと、一緒の場所で懇親会!総勢39人 スライド/ブログ 鈴木様 日本語ドキュメントの紹介 本家のチュートリアルを使用した, Liveハンズオン 佐川様 Angular JSハンズオン@大阪 宇野様 Sencha Fiddleを使ったライブハンズオン https://fiddle.sencha.com/#fiddle/7ks 野呂資料 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もやります! /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 […]

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] 私のほうは、Office365+knockoutでどのように開発するのかを説明させていただきました。   皆さまありがとうございました!! 主催をやっていただきました。佐川さん司会、調整等ありがとうございました!!   勉強会風景 開催前の準備風景   スライド/ブログ 松崎様 Knockout.js の Utility や Plugin (programming, debugging, monitoring) #html5biz 野呂資料 Office365アプリ開発 KonockoutJS+TypeScript   Grapcity様の資料 確認中   タイトル KnockoutJSとVisual Studio/Office365のむふふな関係!? Wijmoも参戦します! 内容 [内容] Visual Studio and KnockoutJS – 松崎 剛(日本マイクロソフト株式会社) Office365 and KnockoutJS – 野呂 清二(株式会社エクシード・ワン) KnockoutJSを使用したアプリケーションの構築例 – 瀬川正和(グレープシティ株式会社-Wijmoプロダクトマネージャ)

まとめ:KnockoutJS

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

まとめ:TypeScript

整理中 Microsoft TypeScriptのメインページ TypeScriptのサンプルを実行できるサイト TypeScriptのサンプル(CodePlex) BuildInsider #2 youstream   Github JQuery, Angular, KnockoutJS等の型定義(*.d.ts)はここにある。 TypeScriptのDeclarationファイルを公開しているGitHubリポジトリ TypeScript-Knockoutjs   CreateJS TypeScriptとCreateJSで簡単にこんなのが作れるようです。 ClockMaker Labs KnockoutJS TypeScript + Knockout ES5 でさらにシンプルに Slideshare TypeScriptの基礎(buildinsider) TypeScriptセッションの全スライド&動画 TypeScript 1.0 オーバービュー(井上さまBuildInsider2での登壇内容) Nuget jqueryの定義を読み込む方法 Visual Studioで取り込む以下を取り込む  jquery.TypeScript.DefinitelyTyped   便利なツール TypeScriptとJavaScriptを2画面同時に表示する方法。 Visual StudioにWeb Essentialをインストールして設定からTypeScriptで設定する。 事例 神獄のヴァルハラゲート(Gree/株式会社グラニ)  サーバサイドC# クライアントサイド:TypeScript, KnockoutJS 開発ツール:Visual Studio モンスターハンター ロア オブ カード サーバサイドC# クライアントサイド:TypeScript, KnockoutJS 開発ツール:Visual Studio 日本全国花粉飛散マップ TypeScriptの本 TypeScriptリファレンス Ver.1.0対応   開発環境:IDE Visual Studio 開発環境までもWeb化?! Visual Studio Online “Monaco”機能徹底解説 WebStorm  

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

Cordovaについて最近セミナーとかで勉強した資料を集めました。 物江さま Visual Studio でCordovaを使ったHybridアプリについて触れている Visual Studio 2013 Update 2 での HTML5 関連の強化点 松崎さま Visual StudioでCordovaでOffice365を扱う方法 渡辺さま PhoneGap出始めるWindowsストアアプリ開発 川田さま PhoneGap とCordovaの歴史と概要をわかりやすく説明 佐川さま YEOMANでハイブリット開発 YEOMANでハイブリット開発(generator-cordova) andyさま  PhoneGapのAdobeとしての取り組み 田中さま Monacaでつくるハイブリッドアプリ PhoneGapに詳しい会社が MonacaというCordova/PhoneGapのクラウドでアプリが作れるサービスを展開してくれているまたかなり有益な資料をたくさん公開、onsenuiというクールなmobile向けCSSも展開 Senchaさま Sencha TouchでPhoneGapを活用する

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

はじめに Visual Studio 2013 Update2からApache Cordovaを使用して、 Android/iPhone/Windows Phoneで同一のHTML5ベースのプログラムで動作するローカルアプリを作成できます。 ローカルアプリなので、各モバイル端末のセンサー、カメラ等も使用できます。各種モバイル端末の差異はフレームワークが吸収してくれます。 さらに、Visual Studioなら強力なデバッガーとTypeScriptを使用して、JavaScriptをC#のように安全で簡単に開発できます。 ※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のアンインストールをする。 概念図   Building Multi-Device Apps with the New Visual Studio Tooling for Apache Cordova TechEd 2014 の紹介ビデオ iPhone/Android での写真やローケションアプリの作成や、VSだけでなくCordovaでできることがわかります。 Androidエミュレータでの実行結果 以下のようにAndroidアプリ(HelloWorld)がVisaulStudioで実行/デバックできます。 Cordovaの解説(MSDNより) HTML5だけではなく、何故ハイブリッドアプリが必要なのか?を分かりやすく書いてあります。 http://msdn.microsoft.com/ja-jp/magazine/hh975345.aspx Apache Cordova の概要 JavaScript と HTML5 コンテンツを備えたパブリックな Web ページを作成し、ユーザーをホスティング先の URL にリダイレクトすれば、HTML5 ベースのモバイル アプリを作成できます。しかし、この方法にはいくつか問題があります。最初の問題は、オンライン マーケットプレースやオンライン ストアを利用する配布モデルです。作成した Wep アプリをホストする URL […]

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人ぐらい 懇親会の風景 15人ぐらい スライド 松崎様 Visual StudioでKnockoutjsを使ってデータベースを使ったアプリの開発デモ、他のフレームワークについて等とても興味のある内容です。 (PDF) デモの内容 Knockout.js の依存の更新タイミングと rateLimit #html5biz ASP.NET SPA (JavaScript) の Web API 認証 (ASP.NET Identity) #html5biz 河内 様 プロジェクトにMVVMを適用する狙い 鈴木 様 Knockoutでグラフを描こう 野呂ハンズオン資料 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アプリのハンズオンを行うための資料です。 /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) […]

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

概要 足し算アプリのハンズオンを行うための資料です。 /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()); }); 参考 ´http://www.slideshare.net/tanago3/knockout-handson