Submit Search
Upload
Knockout.js を利用したインタラクティブ web アプリケーション開発
•
8 likes
•
5,457 views
Daizen Ikehara
Follow
2014 年 03 月 22 日に開催された MVP Community Camp 2014 名古屋会場で発表させていただいたセッション資料です。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 43
Download now
Download to read offline
Recommended
作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月
Takuya Ueda
KnockoutJSを使用したアプリケーションの構築例
KnockoutJSを使用したアプリケーションの構築例
masakazusegawa
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
Toshihiro Kawachi
20140517 knockoutjs hands-on
20140517 knockoutjs hands-on
Seiji Noro
Webアプリ開発のトレンドとUIライブラリ開発事情(仙台Geek★Night #1)
Webアプリ開発のトレンドとUIライブラリ開発事情(仙台Geek★Night #1)
masakazusegawa
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
Seki Yousuke
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
normalian
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
Recommended
作って分かるKnockoutJS@ALM11月
作って分かるKnockoutJS@ALM11月
Takuya Ueda
KnockoutJSを使用したアプリケーションの構築例
KnockoutJSを使用したアプリケーションの構築例
masakazusegawa
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
KnockoutJS勉強会 プロジェクトにmvvmを適用する狙い
Toshihiro Kawachi
20140517 knockoutjs hands-on
20140517 knockoutjs hands-on
Seiji Noro
Webアプリ開発のトレンドとUIライブラリ開発事情(仙台Geek★Night #1)
Webアプリ開発のトレンドとUIライブラリ開発事情(仙台Geek★Night #1)
masakazusegawa
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
クライアントサイドMVVMアーキテクチャとVue.jsをまとめたよ
Seki Yousuke
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
基礎から見直す ASP.NET MVC の単体テスト自動化方法 ~ Windows Azure 関連もあるかも~
normalian
AngularJSを浅めに紹介します
AngularJSを浅めに紹介します
nkazuki
ライオンでも分かるVuejs
ライオンでも分かるVuejs
lion-man
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
React.js + Flux
React.js + Flux
dsuke Takaoka
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
Windows ストアアプリのgrid viewを入門してみた
Windows ストアアプリのgrid viewを入門してみた
一希 大田
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
Vue.js入門
Vue.js入門
Takuya Sato
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Akira Inoue
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
Yuki Ishikawa
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
normalian
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
Akira Inoue
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
Takahiro Maki
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
貴志 上坂
はじめてのVue.js
はじめてのVue.js
kamiyam .
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
Makoto Chiba
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
leverages_event
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
T35 ASP.NET MVCを使ったTDD入門
T35 ASP.NET MVCを使ったTDD入門
normalian
「エクストリームエンジニアへの道(Swift編)」
「エクストリームエンジニアへの道(Swift編)」
tech-arts
Azure で Serverless 初心者向けタッチ&トライ
Azure で Serverless 初心者向けタッチ&トライ
Masanobu Sato
More Related Content
What's hot
ライオンでも分かるVuejs
ライオンでも分かるVuejs
lion-man
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
小川 昌吾
React.js + Flux
React.js + Flux
dsuke Takaoka
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
yoshioka_cb
Windows ストアアプリのgrid viewを入門してみた
Windows ストアアプリのgrid viewを入門してみた
一希 大田
React を導入したフロントエンド開発
React を導入したフロントエンド開発
daisuke-a-matsui
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Shohei Okada
Vue.js入門
Vue.js入門
Takuya Sato
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Akira Inoue
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
Yuki Ishikawa
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
normalian
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
Akira Inoue
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
Takahiro Maki
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
貴志 上坂
はじめてのVue.js
はじめてのVue.js
kamiyam .
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
Makoto Chiba
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
leverages_event
20160927 reactmeetup
20160927 reactmeetup
Naoki Kurosawa
T35 ASP.NET MVCを使ったTDD入門
T35 ASP.NET MVCを使ったTDD入門
normalian
What's hot
(20)
ライオンでも分かるVuejs
ライオンでも分かるVuejs
チュートリアルではじめるVue.js
チュートリアルではじめるVue.js
React.js + Flux
React.js + Flux
RailsでReact.jsを動かしてみた話
RailsでReact.jsを動かしてみた話
Windows ストアアプリのgrid viewを入門してみた
Windows ストアアプリのgrid viewを入門してみた
React を導入したフロントエンド開発
React を導入したフロントエンド開発
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話
Vue.js入門
Vue.js入門
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
Featuring Project Silk & Liike: 楽しい "モダン" Web 開発のちょっとディープなお話
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
( ゚∀゚)o彡° Flux! Flux!
( ゚∀゚)o彡° Flux! Flux!
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
ASP.NET MVC と jQuery で実践する標準志向 Web 開発
簡単AngularJS(関西AngularJS勉強会)
簡単AngularJS(関西AngularJS勉強会)
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
Moq & Fakes Framework を使った実践的ユニットテスト - BuildInsider
はじめてのVue.js
はじめてのVue.js
翻訳から始めるVue.js 入門
翻訳から始めるVue.js 入門
株式会社インタースペース 清水様 登壇資料
株式会社インタースペース 清水様 登壇資料
20160927 reactmeetup
20160927 reactmeetup
T35 ASP.NET MVCを使ったTDD入門
T35 ASP.NET MVCを使ったTDD入門
Similar to Knockout.js を利用したインタラクティブ web アプリケーション開発
「エクストリームエンジニアへの道(Swift編)」
「エクストリームエンジニアへの道(Swift編)」
tech-arts
Azure で Serverless 初心者向けタッチ&トライ
Azure で Serverless 初心者向けタッチ&トライ
Masanobu Sato
scala+liftで遊ぼう
scala+liftで遊ぼう
youku
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
Shotaro Suzuki
進化する Web ~ Progressive Web Apps の実装と応用 ~
進化する Web ~ Progressive Web Apps の実装と応用 ~
Microsoft Azure Japan
iOS WebView App
iOS WebView App
hagino 3000
Mvpvm pattern
Mvpvm pattern
Mami Shiino
Selenium webdriver使ってみようず
Selenium webdriver使ってみようず
Oda Shinsuke
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
インフラジスティックス・ジャパン株式会社
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
Shohei Okada
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
佐藤 俊太郎
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
codeal
RIAアーキテクチャー研究会 第3回 セッション4 Mvpvm pattern
RIAアーキテクチャー研究会 第3回 セッション4 Mvpvm pattern
Mami Shiino
Building React, Flutter and Blazor development and debugging environment with...
Building React, Flutter and Blazor development and debugging environment with...
Shotaro Suzuki
Next2Dで始めるゲーム開発 - Game Development Starting with Next2D
Next2Dで始めるゲーム開発 - Game Development Starting with Next2D
Toshiyuki Ienaga
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Shotaro Suzuki
T119_5年間の試行錯誤で進化したMVPVMパターン
T119_5年間の試行錯誤で進化したMVPVMパターン
伸男 伊藤
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
Yuki Takei
Ec cube開発合宿 プラグインセミナー
Ec cube開発合宿 プラグインセミナー
Ayumu Kawaguchi
Similar to Knockout.js を利用したインタラクティブ web アプリケーション開発
(20)
「エクストリームエンジニアへの道(Swift編)」
「エクストリームエンジニアへの道(Swift編)」
Azure で Serverless 初心者向けタッチ&トライ
Azure で Serverless 初心者向けタッチ&トライ
scala+liftで遊ぼう
scala+liftで遊ぼう
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
XAML と C# を使った Windows ストアアプリ(LOB)構築のためのtips Prism 4.5 & Kona project 等のご紹介
進化する Web ~ Progressive Web Apps の実装と応用 ~
進化する Web ~ Progressive Web Apps の実装と応用 ~
iOS WebView App
iOS WebView App
Mvpvm pattern
Mvpvm pattern
Selenium webdriver使ってみようず
Selenium webdriver使ってみようず
Webに今求められているレベル: HTML5 コントロールを利用した開発
Webに今求められているレベル: HTML5 コントロールを利用した開発
はじめよう Backbone.js
はじめよう Backbone.js
PHP 2大 web フレームワークの徹底比較!
PHP 2大 web フレームワークの徹底比較!
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
サーバサイドで動的にhtml生成していたりjQueryをガッツし使っている既存プロジェクトにAngularJSを部分的につっこんでみた @jscafe21
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
20150207コデアルエンジニア学生向けハッカソン就活イベント発表資料
RIAアーキテクチャー研究会 第3回 セッション4 Mvpvm pattern
RIAアーキテクチャー研究会 第3回 セッション4 Mvpvm pattern
Building React, Flutter and Blazor development and debugging environment with...
Building React, Flutter and Blazor development and debugging environment with...
Next2Dで始めるゲーム開発 - Game Development Starting with Next2D
Next2Dで始めるゲーム開発 - Game Development Starting with Next2D
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
Let's build a simple app with .net 6 asp.net core web api, react, and elasti...
T119_5年間の試行錯誤で進化したMVPVMパターン
T119_5年間の試行錯誤で進化したMVPVMパターン
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
自作node.jsフレームワークとnginxを使ってラジオサイトを作ってみた
Ec cube開発合宿 プラグインセミナー
Ec cube開発合宿 プラグインセミナー
More from Daizen Ikehara
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
Daizen Ikehara
クラウドサービス、AWS/Azure/GCP それぞれの Text to Speechを比べてみた
クラウドサービス、AWS/Azure/GCP それぞれの Text to Speechを比べてみた
Daizen Ikehara
Communications Platform as a Service (CPaaS) 入門
Communications Platform as a Service (CPaaS) 入門
Daizen Ikehara
DevRel Meetupのおかげで転職した話
DevRel Meetupのおかげで転職した話
Daizen Ikehara
エンジニア?のキャリアと英語を考える
エンジニア?のキャリアと英語を考える
Daizen Ikehara
開発者向けカンファレンス出展に向けて考えるべきこと
開発者向けカンファレンス出展に向けて考えるべきこと
Daizen Ikehara
オンラインIDEで爆速オンボーディングと、サンプルコード共有
オンラインIDEで爆速オンボーディングと、サンプルコード共有
Daizen Ikehara
コントロールベンダー視点での Command line interface (CLI)
コントロールベンダー視点での Command line interface (CLI)
Daizen Ikehara
Xamarin 対応開発ツールで効率良くクロスプラットフォーム開発
Xamarin 対応開発ツールで効率良くクロスプラットフォーム開発
Daizen Ikehara
ベストタイムは 23 時? グローバル開発チームとの付き合い方
ベストタイムは 23 時? グローバル開発チームとの付き合い方
Daizen Ikehara
手戻り ゼロ を目指して
手戻り ゼロ を目指して
Daizen Ikehara
Ignite ui 2012 最新情報 jQuery UI 編
Ignite ui 2012 最新情報 jQuery UI 編
Daizen Ikehara
Net advantage 2012 volume2 最新情報 Windows Forms / ASP.NET 編
Net advantage 2012 volume2 最新情報 Windows Forms / ASP.NET 編
Daizen Ikehara
Netadvantage 2012 volume2 最新情報 Reporting 編
Netadvantage 2012 volume2 最新情報 Reporting 編
Daizen Ikehara
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Daizen Ikehara
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Daizen Ikehara
Windows8 の UX
Windows8 の UX
Daizen Ikehara
IgChart 入門編
IgChart 入門編
Daizen Ikehara
IgGrid 入門編
IgGrid 入門編
Daizen Ikehara
高速レポート アプリケーション開発
高速レポート アプリケーション開発
Daizen Ikehara
More from Daizen Ikehara
(20)
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
13-E-7 クラウドサービスとゲーミフィケーション: 「TwilioQuest 3」を用いた開発者オンボーディング
クラウドサービス、AWS/Azure/GCP それぞれの Text to Speechを比べてみた
クラウドサービス、AWS/Azure/GCP それぞれの Text to Speechを比べてみた
Communications Platform as a Service (CPaaS) 入門
Communications Platform as a Service (CPaaS) 入門
DevRel Meetupのおかげで転職した話
DevRel Meetupのおかげで転職した話
エンジニア?のキャリアと英語を考える
エンジニア?のキャリアと英語を考える
開発者向けカンファレンス出展に向けて考えるべきこと
開発者向けカンファレンス出展に向けて考えるべきこと
オンラインIDEで爆速オンボーディングと、サンプルコード共有
オンラインIDEで爆速オンボーディングと、サンプルコード共有
コントロールベンダー視点での Command line interface (CLI)
コントロールベンダー視点での Command line interface (CLI)
Xamarin 対応開発ツールで効率良くクロスプラットフォーム開発
Xamarin 対応開発ツールで効率良くクロスプラットフォーム開発
ベストタイムは 23 時? グローバル開発チームとの付き合い方
ベストタイムは 23 時? グローバル開発チームとの付き合い方
手戻り ゼロ を目指して
手戻り ゼロ を目指して
Ignite ui 2012 最新情報 jQuery UI 編
Ignite ui 2012 最新情報 jQuery UI 編
Net advantage 2012 volume2 最新情報 Windows Forms / ASP.NET 編
Net advantage 2012 volume2 最新情報 Windows Forms / ASP.NET 編
Netadvantage 2012 volume2 最新情報 Reporting 編
Netadvantage 2012 volume2 最新情報 Reporting 編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
Net advantage 2012 volume2 最新情報 xaml プラットフォーム編
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Windows8 の UX
Windows8 の UX
IgChart 入門編
IgChart 入門編
IgGrid 入門編
IgGrid 入門編
高速レポート アプリケーション開発
高速レポート アプリケーション開発
Recently uploaded
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
atsushi061452
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
NTT DATA Technology & Innovation
【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow
Sony - Neural Network Libraries
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
ssuserbefd24
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
iPride Co., Ltd.
20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf
Ayachika Kitazaki
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
atsushi061452
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
yassun7010
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
CRI Japan, Inc.
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
keikoitakurag
Recently uploaded
(10)
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
論文紹介: Exploiting semantic segmentation to boost reinforcement learning in vid...
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
YugabyteDB適用に向けた取り組みと隠れた魅力 (DSS Asia 2024 発表資料)
【AI論文解説】Consistency ModelとRectified Flow
【AI論文解説】Consistency ModelとRectified Flow
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
2024年5月25日Serverless Meetup大阪 アプリケーションをどこで動かすべきなのか.pptx
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
MPAなWebフレームワーク、Astroの紹介 (その2) 2024/05/24の勉強会で発表されたものです。
20240523_IoTLT_vol111_kitazaki_v1___.pdf
20240523_IoTLT_vol111_kitazaki_v1___.pdf
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
論文紹介: Offline Q-Learning on diverse Multi-Task data both scales and generalizes
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
2024年度_サイバーエージェント_新卒研修「データベースの歴史」.pptx
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
LoRaWAN 4チャンネル電流センサー・コンバーター CS01-LB 日本語マニュアル
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Amazon Cognitoで実装するパスキー (Security-JAWS【第33回】 勉強会)
Knockout.js を利用したインタラクティブ web アプリケーション開発
1.
Knockout.js を利用した インタラクティブ Web アプリケーション開発 池原
大然 デベロッパー エバンジェリスト インフラジスティックス・ジャパン株式会社 dikehara@Infragistics.com
2.
アジェンダ セッションの動機など Knockout.js の特長 カスタム バインディングを利用した拡張 まとめ
3.
セッションの動機
4.
自己紹介 池原 大然(いけはら だいぜん) インフラジスティックス・ジャパン株式会社 デベロッパー
エバンジェリスト Microsoft MVP for Development Platforms Client App Dev 2010/04 – 2014/03 @Neri78 Blog
5.
開発ツール製品
6.
そもそものセッションの動機 • もともと XAML
が好きだった –いちおう XAML 系の MVP • 仕事柄 jQuery 対応コンポーネントについても 理解を深めないといけない • JavaScript でバインディングときいて • “コントロール” に関係のあるセッションをしたい
7.
ゴール 1. Knockout.js の概要をおさえる 2.
カスタムバインディングの概要をおさえる
8.
Knockout.js の 特長
9.
すべてはここから http://knockoutjs.com
10.
ライブラリの参照 <head> <script type='text/javascript' src='knockout-3.1.0.js'></script> </head> js
ファイルの参照 <head> <!-- 次のうちいずれか --> <!-- Microsoft CDN knockout.js version 3.0.0 --> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js" ></script> <!– CDNJS knockout.js version 3.1.0 --> <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script> </head> CDN の利用
11.
キーコンセプト 宣言型 バインディング 自動 UI 更新 依存関係の トラッキング テンプレート 機能
12.
Demo 基本的な機能の確認
13.
宣言型バインディング var person =
{ lastName: ‘池原’, firstName: ‘大然’, photo: ‘/Images/Daizen2011.png’ }; HTML 姓: <input id="lastName" data-bind="value: lastName" /> <br /> 名: <input id="firstName" data-bind="value: firstName" /> <br /> <img style="height:300px; width:400px" data-bind="attr: { src: photo }" /> <br /> <label id="fullName" data-bind="text: '氏名: ' + lastName + firstName"></label> html にデータの値を宣言できる この例では value, attr, text バインディングを使用 バインディングを実行 ko.applyBindings(person);
14.
標準で提供されているバインディング テキストおよび外観 のコントロール •text •html •css •style •attr コントロール フロー •foeach •if •ifnot •with 入力フィールド関連 •click •event •submit •enable •disable •value •hasFocus •checked •options •selectedOptions •uniqueName テンプレート •template
15.
自動 UI 更新 var
person = { lastName: ko.observable(‘池原’), firstName: ko.observable(‘大然’), photo: ko.observable(‘/Images/Daizen2011.png’) }; HTML 双方向での値のやり取り が可能 データ更新 → UI 更新 UI 更新 → データ更新
16.
Observable / ObservableArray •
ko.observable – シングル プロパティ用 • 宣言: propertyName = ko.observable(初期値) • Read: propertyName() • Write: propertyName(新しい値) • ko.observableArray – 配列用 • 宣言: arrayName = ko.observableArray(配列) • Read: arrayName()[0] • Add/Remove: arrayName.push (), arrayName.remove()
17.
依存関係のトラッキング var viewModel =
{ lastName: ko.observable(‘池原’), firstName: ko.observable(‘大然’), photo: ko.observable(‘/Images/Daizen2011.png’) }; viewModel.fullName = ko.computed(function () { return viewModel.lastName() + ' ' + viewModel.firstName(); }, viewModel); fullName は lastName と firstName に依存しており、 どちらかが変更されると自身の値も更新される。
18.
テンプレート機能 • 指定した DOM要素を追加、特に繰り返しの処理などに有用 </head> <!--
テンプレート --> <script type="text/html" id="person-template"> <tr> <td><span data-bind="text: lastName"></span></td> <td><span data-bind="text: firstName"></span></td> <td><img style="width: 200px; height:100px" data-bind="attr: { src: photo}" /></td> </tr> </script> </head> <body> <table> <thead> <tr> <th>氏</th> <th>名</th> <th>画像</th> </tr> </thead> <tbody data-bind="template: { name: 'person-template', foreach: people}" > </tbody> </table> </body>
19.
さらに詳しく… http://shiba-yan.hatenablog.jp/category/Knockout.js 丸投げ
20.
カスタム バインディング の利用
21.
標準で提供されているバインディング テキストおよび外観 のコントロール •text •html •css •style •attr フローの コントロール •foeach •if •ifnot •with 入力フィールド関連 •click •event •submit •enable •disable •value •hasFocus •checked •options •selectedOptions •uniqueName テンプレート •template HTML 要素に対しては非常に有用
22.
問題:コンポーネントと組み合わせる場合 • jQuery UI
ProgressBar コントロールの値とラベルの 値の同期 標準のバインディングでは難しい…
23.
カスタム バインディング • 独自のバインディングを構築することで コントロールに手を入れずに
Knockout.js に 対応させることが可能 • 下記のようなバインディング方法を想定 <div id="progress" style="width:300px" data-bind="jQUIprogressBar: progressValue"></div>
24.
構文 ko.bindingHandlers.jQUIprogressBar = { init:
function ( element, valueAccessor, allBindings, viewModel, bindingContext) { // バインディングの初期化処理 // progressBar は 1 方向(データ → UI ) で完結するのでシンプル }, update: function ( element, valueAccessor, allBindings, viewModel, bindingContext) { // バインディングの初期化時および値の変更時に行う処理 } };
25.
パラメーター • element – バインディングの対象となる
DOM 要素 • valueAccessor – バインディングに使用される値を呼び出すことができる JavaScript 関数。 ko.unwrap を利用することで observable、非 observable の値を取得できる • allBindings – バインディング対象にバインドされているすべての値 • allBindings.get(名前)で値の取得(存在しない場合は undefined)、allBindings.has(名 前) で存在の確認 • viewModel – 3.0 から廃止、代替手段として bindingContext.$data または bindingContext.$rawData を 利用する • bindingContext – このバインディングにおいてアクセスできる bindingContext
26.
シンプルな拡張
27.
初期化の例 ko.bindingHandlers.jQUIprogressBar = { init:
function ( element, valueAccessor, allBindings, viewModel, bindingContext) { // progressBar は 1 方向(データ → UI ) で完結するのでシンプル // プログレスバー var pbar = element; // バインドされた値 var progressValue = ko.unwrap(valueAccessor()); // ここでプログレスバーを初期化、View 側のコードでは呼び出さない $(pbar).progressbar({ value: progressValue}); }, };
28.
値の変更時の例 ko.bindingHandlers.jQUIprogressBar = { update:
function ( element, valueAccessor, allBindings, viewModel, bindingContext) { // プログレスバー var pbar = element; // 更新された値 var progressValue = ko.unwrap(valueAccessor()); // 更新を反映 $(pbar).progressbar("option", "value", progressValue); } };
29.
考えられるシナリオ(1) • 複数の値を渡したい場合は? – progressBar
に value と max を渡したい <div id="progress" style="width:300px" data-bind="jQUIprogressBar2: { value: progressValue, max: maxValue}"> </div> propgressbar の初期化値と 同じ形式にしておく
30.
考えられるシナリオ(2) • バインディングが 2
方向に渡る場合は? – 例: jQuery UI Slider の value は 2 方向で利用される可能性がある – Slider の値変更イベントを extension 側で制御 <div id="slider" style="width:300px" data-bind="jQuerySliderValue: progressValue"></div>
31.
複雑な拡張
32.
初期化の例 ko.bindingHandlers.jQUIprogressBar2 = { init:
function ( element, valueAccessor, allBindings, viewModel, bindingContext) { // プログレスバー var pbar = element; // バインドされた値 var options = ko.unwrap(valueAccessor()); // 値の取得を試行 var max = ko.unwrap(options.max); if (max !== undefined) { options.max = max; } // 値の取得を試行 var value = ko.unwrap(options.value); if (value !== undefined) { options.value = value; } // ここでプログレスバーを option 付きで初期化 例: { value: 10, max: 100} というような形式になる $(pbar).progressbar(options); }, };
33.
値の変更時の例 ko.bindingHandlers.jQUIprogressBar2 = { update:
function ( element, valueAccessor, allBindings, viewModel, bindingContext) { //// プログレスバー var pbar = element; // バインドされた値 var options = ko.unwrap(valueAccessor()); // 値の取得を試行 var max = ko.unwrap(options.max); if (max !== undefined) { $(pbar).progressbar("option", "max", max); } // 値の取得を試行 var value = ko.unwrap(options.value); if (value !== undefined) { $(pbar).progressbar("option", "value", value); } } };
34.
2 方向のサポートの実装例 ko.bindingHandlers.jQuerySliderValue =
{ init: function ( element, valueAccessor, allBindings, viewModel, bindingContext) { // Slider var slider = element; // バインドされた値 var value = ko.unwrap(valueAccessor()); if (value !== undefined) { // ここでプログレスバーを初期化 $(slider).slider({ value: value, change: function (event, el) { if (value != el.value) { // 値をバインディングソースに書き戻す valueAccessor()(parseInt(el.value)); } } }); } }, update: function ( element, valueAccessor, allBindings, viewModel, bindingContext) { var el = $(element); var value = ko.utils.unwrapObservable(valueAccessor()()); if (value !== el.val()) { el.slider("value", value); } } };
35.
http://jp.igniteui.com
36.
Ignite UI コンポーネント jQuery jQuery
UI jQuery Mobile jQuery Mobile ベース コントロール jQuery ベース データ コンポーネント jQuery UI ベース コントロール
37.
収録コンポーネント:一覧 • データ グリッド –
Grid – Hierarchical Grid • OLAP ピボット – Pivot Data Selector – Pivot View – Pivot Grid • データ ビジュアリゼーション – Data Chart – Bullet Graph – Pie Chart – Linear Gauge – Doughnut Chart – Map – Funnel Chart – Barcode – Radial Gauge – Zoombar – Sparkline • レイアウト – Layout Manager – Tile Manager – Splitter • エディター – Combo Box – Editors – Date Picker – HTML Editor • フレームワーク – Infragistics Loader – Data Source – Templating Engine – Infragistics Excel* – Infragistics Word* – Infragistics Document* • 操作 – Tree – Popover – Dialog Window – Rating – File Upload – Video Player • モバイル – List View – Rating – Button – Check Box – Check Box Group – Collapsible – Collapsible Set – RadioButton Group – SelectMenu – Slider – Toggle Switch – TextBox – Page – PageContent – PageFooter – PageHeader – Popup – Link – NavBar *ASP.NET 用サーバー側コンポーネント • jQuery ベース • jQuery UI ベース • jQuery Mobile ベース 併せて ASP.NET MVC 用ラッパークラスも提供
38.
Knockout.js 対応 • 下記コントロールで一部のプロパティに対して Knockout.js
対応済み – Grid – Chart – Combo – Editor – Tree
39.
http://jp.igniteui.com 少しだけ紹介 – Knockout.js
対応を中心に
40.
まとめ
41.
まとめ • Knockout.js を利用することで、画面実装者は 楽をできる可能性が! –標準
html タグ ベースの UI では適用範囲が広い • ただし、共通部品部隊や標準化部隊は大変かもしれない –ベンダーが対応できない or しない時など
42.
リソース 公式サイト http://knockoutjs.com 非公式日本語ドキュメント http://kojs.sukobuto.com/ しばやん雑記 – かなりの情報が公開されています http://shiba-yan.hatenablog.jp/category/Knockout.js jQuery,
XAML 対応製品を中心に紹介しているブログ http://blogs.jp.infragistics.com/blogs/dikehara/
43.
http://jp.igniteui.com こちらもよろしく!
Download now