Enviar búsqueda
Cargar
Knockout.js を利用したインタラクティブ web アプリケーション開発
•
8 recomendaciones
•
5,456 vistas
Daizen Ikehara
Seguir
2014 年 03 月 22 日に開催された MVP Community Camp 2014 名古屋会場で発表させていただいたセッション資料です。
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 43
Descargar ahora
Descargar para leer sin conexión
Recomendados
作って分かる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
Recomendados
作って分かる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
Más contenido relacionado
La actualidad más candente
ライオンでも分かる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
La actualidad más candente
(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 a 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 a 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開発合宿 プラグインセミナー
Más de 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
Más de 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 入門編
高速レポート アプリケーション開発
高速レポート アプリケーション開発
Último
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
Último
(9)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
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 こちらもよろしく!
Descargar ahora