SlideShare a Scribd company logo
1 of 10
© 2013 IBM Corporation06/04/13
IBM Worklight デモ環境とサンプルコー
ド
© 2013 IBM Corporation
2
Empowering the IBM ecosystem
06/04/13
デモ環境 その1
IBM Worklight Server
アプ
リ
デバイス
IBM developerWorks (RSS)
アダプ
ター
アダプ
ター
HTTP で RSS(XML) を取得し、
JSON に変換して、アプリケーションに渡
す。
<?xml version=“1.0”?>
<rss version=“2.0”>
<channel>
<title>IBM developerWorks 日本語版 </title>
:
JSON データを HTML5 内の
JavaScript で扱う
© 2013 IBM Corporation
3
Empowering the IBM ecosystem
06/04/13
アダプターの定義内容
(定義ファイル内)
:
<connectivity>
<connectiionPolicy
xsi:type=“http:HTTPConnectionPolicyType”>
<protocol>http</protocol>
<domain>www.ibm.com</domain>
<port>80</port>
</connectionPolicy>
:
:
</connectivity>
<procedure name=“getStories”/>
:
( .js ファイル内)
:
function getStories(interest){
path = ‘/developerworks/jp/views/’ + interest +
‘/rss/libraryview.jsp’;
var input = {
method: ‘get’,
returnedContentType: ‘xml’,
path: path
};
return WL.Server.invokeHttp( input );
}
:
http://www.ibm.com/ 以下のフィードを取得する、
と宣言
変数を使ってパスを生成し、 get メソッドを実行
( RSS なので)取得データは XML を想定。
JavaScript 関数としては getStories を使うことを宣言
© 2013 IBM Corporation
4
Empowering the IBM ecosystem
06/04/13
JavaScript でアダプターを呼び出す
(アダプターを呼び出す箇所の JavaScript )
:
var invocationData = {
adapter: ‘dWFeedsAdapter’,
procedure: ‘getStories’,
parameters: [ theme ]
};
WL.Client.invokeProcedure( invocationData, {
onSuccess: loadFeedsSuccess,
onFailure: loadFeedsFailure,
invocationContext: {}
} );
:
(呼び出しが成功した時のハンドラ)
function loadFeedsSuccess( result ){
:
var items =
result.invocationResult.rss.channel.item;
var n = items.length;
for( I = 0; I < n; I ++ ){
var item = items[i];
:
}
}
アダプターと関数、パラメータを指定
成功時、失敗時のハンドラを指定して invoke
成功時の処理(非同期)
© 2013 IBM Corporation
5
Empowering the IBM ecosystem
06/04/13
デモ環境 その2
IBM Worklight Server
アプ
リ
デバイス
IBM Domino データベース
アダプ
ター
アダプ
ター
HTTP で JSON を取得し、
アプリケーションに渡す。
[ {
“@href”:http://******,
“@link”: { “rel”: “document”, “href”: http://******” },
“@entryid”: “1-*********************”,
:
JSON データを HTML5 内の
JavaScript で扱う
© 2013 IBM Corporation
6
Empowering the IBM ecosystem
06/04/13
アダプターの定義内容
(定義ファイル内)
:
<connectivity>
<connectiionPolicy
xsi:type=“http:HTTPConnectionPolicyType”>
<protocol>http</protocol>
<domain>XXX.XXX.com</domain>
<port>80</port>
</connectionPolicy>
:
:
</connectivity>
<procedure name=“getStories”/>
:
( .js ファイル内)
:
function getStories(interest){
path = interest + ‘/api/data/collections’;
var input = {
method: ‘get’,
returnedContentType: ‘plain’,
path: path
};
return WL.Server.invokeHttp( input );
}
:
http://XXX.XXX.com/ 以下に対して JSON を取得する、
と宣言
変数を使ってパスを生成し、 get メソッドを実行
取得データは plain text を想定。
JavaScript 関数としては getStories を使うことを宣言
© 2013 IBM Corporation
7
Empowering the IBM ecosystem
06/04/13
JavaScript でアダプターを呼び出す
(アダプターを呼び出す箇所の JavaScript )
:
var invocationData = {
adapter: ‘DDSAdapter’,
procedure: ‘getStories’,
parameters: [ ‘/testdb.nsf” ]
};
WL.Client.invokeProcedure( invocationData, {
onSuccess: loadDbSuccess,
onFailure: loadDbFailure,
invocationContext: {}
} );
:
(呼び出しが成功した時のハンドラ)
function loadDbSuccess( result ){
:
var objs =
JSON.parse( result.invocationResult.text );
var n = objs.length;
for( I = 0; I < n; I ++ ){
var obj = objs[i];
:
}
}
アダプターと関数、パラメータを指定
成功時、失敗時のハンドラを指定して invoke
成功時の処理(非同期)
(ほぼ先程の例と同じ)
Plain Text を parse
© 2013 IBM Corporation
8
Empowering the IBM ecosystem
06/04/13
デモ環境 その3
IBM Worklight Server
アプ
リ
デバイス
リレーショナルデータベース
アダプ
ター
アダプ
ター
JDBC で JSON を取得し、
アプリケーションに渡す。
+---------+---------+
| pcode | pref |
+---------+---------+
| 01 | 北海道 |
| 02 | 青森県 |
:
JSON データを HTML5 内の
JavaScript で扱う
© 2013 IBM Corporation
9
Empowering the IBM ecosystem
06/04/13
アダプターの定義内容
(定義ファイル内)
:
<connectivity>
<connectiionPolicy xsi:type=“sql:SQLConnectionPolicyType”>
<dataSourceDefinition>
<driverClass>com.mysql.jdbc.Driver</driverClass>
<url>jdbc:mysql://XXX.XXX.com:3306/sampledb</url>
<user>username</user>
<password>password</password>
</dataSourceDefinition>
</connectionPolicy>
:
:
</connectivity>
<procedure name=“procedure1”/>
:
( .js ファイル内)
:
var prodecure1Statement =
WL.Server.createSQLStatement( “select * from testdb” );
function procedure1(param){
return WL.Server.invokeSQLStatement({
preparedStatement: procedure1Statement,
parameters: [param]
});
}
:
JDBC の接続先を指定
SQL 文を指定して実行
JavaScript 関数としては procedure1 を使うことを宣言
© 2013 IBM Corporation
10
Empowering the IBM ecosystem
06/04/13
JavaScript でアダプターを呼び出す
(アダプターを呼び出す箇所の JavaScript )
:
var invocationData = {
adapter: ‘SampleDb’,
procedure: ‘procedure1’,
parameters: []
};
WL.Client.invokeProcedure( invocationData, {
onSuccess: p1Success,
onFailure: p1Failure,
invocationContext: {}
} );
:
(呼び出しが成功した時のハンドラ)
function p1Success( result ){
:
var items =
result.invocationResult.rss.channel.item;
var n = items.length;
for( I = 0; I < n; I ++ ){
var item = items[i];
:
}
}
アダプターと関数、パラメータを指定
成功時、失敗時のハンドラを指定して invoke
成功時の処理(非同期)

More Related Content

What's hot

Solr meeting in Japan 2011
Solr meeting in Japan 2011Solr meeting in Japan 2011
Solr meeting in Japan 2011
Takahiko Ito
 
Spring3.1概要 データアクセスとトランザクション処理
Spring3.1概要 データアクセスとトランザクション処理Spring3.1概要 データアクセスとトランザクション処理
Spring3.1概要 データアクセスとトランザクション処理
土岐 孝平
 
Handlersocket 20140218
Handlersocket 20140218Handlersocket 20140218
Handlersocket 20140218
akirahiguchi
 
Performance and Scalability of Web Service
Performance and Scalability of Web ServicePerformance and Scalability of Web Service
Performance and Scalability of Web Service
Shinji Tanaka
 
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsugSpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
Y Watanabe
 
[Alfresco]ドキュメントライブラリのUIカスタマイズ
[Alfresco]ドキュメントライブラリのUIカスタマイズ[Alfresco]ドキュメントライブラリのUIカスタマイズ
[Alfresco]ドキュメントライブラリのUIカスタマイズ
Jun Terashita
 
Webサーバ勉強会03
Webサーバ勉強会03Webサーバ勉強会03
Webサーバ勉強会03
oranie Narut
 

What's hot (20)

Metaspace
MetaspaceMetaspace
Metaspace
 
Clrh 110716 wcfwf
Clrh 110716 wcfwfClrh 110716 wcfwf
Clrh 110716 wcfwf
 
第1回Webサーバ勉強会 - 212-223 ブラウザマッチ処理
第1回Webサーバ勉強会 - 212-223 ブラウザマッチ処理第1回Webサーバ勉強会 - 212-223 ブラウザマッチ処理
第1回Webサーバ勉強会 - 212-223 ブラウザマッチ処理
 
Solr meeting in Japan 2011
Solr meeting in Japan 2011Solr meeting in Japan 2011
Solr meeting in Japan 2011
 
Spring3.1概要 データアクセスとトランザクション処理
Spring3.1概要 データアクセスとトランザクション処理Spring3.1概要 データアクセスとトランザクション処理
Spring3.1概要 データアクセスとトランザクション処理
 
Hyper-V を Windows PowerShell から管理する
Hyper-V を Windows PowerShell から管理するHyper-V を Windows PowerShell から管理する
Hyper-V を Windows PowerShell から管理する
 
20120117 13 meister-elasti_cache-public
20120117 13 meister-elasti_cache-public20120117 13 meister-elasti_cache-public
20120117 13 meister-elasti_cache-public
 
Heap statsfx analyzer
Heap statsfx analyzerHeap statsfx analyzer
Heap statsfx analyzer
 
Using Windows Azure
Using Windows AzureUsing Windows Azure
Using Windows Azure
 
Handlersocket 20140218
Handlersocket 20140218Handlersocket 20140218
Handlersocket 20140218
 
Webサーバのチューニング
WebサーバのチューニングWebサーバのチューニング
Webサーバのチューニング
 
Performance and Scalability of Web Service
Performance and Scalability of Web ServicePerformance and Scalability of Web Service
Performance and Scalability of Web Service
 
What's New in MySQL 5.7 Optimizer @MySQL User Conference Tokyo 2015
What's New in MySQL 5.7 Optimizer @MySQL User Conference Tokyo 2015What's New in MySQL 5.7 Optimizer @MySQL User Conference Tokyo 2015
What's New in MySQL 5.7 Optimizer @MySQL User Conference Tokyo 2015
 
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsugSpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
SpringMVCとmixer2で作るWebアプリのキホン 2013-01-24 Spring勉強会 #jsug
 
20110708 dist_study okuyama
20110708 dist_study okuyama20110708 dist_study okuyama
20110708 dist_study okuyama
 
Norikraで作るPHPの例外検知システム YAPC::Asia Tokyo 2015 LT
Norikraで作るPHPの例外検知システム YAPC::Asia Tokyo 2015 LTNorikraで作るPHPの例外検知システム YAPC::Asia Tokyo 2015 LT
Norikraで作るPHPの例外検知システム YAPC::Asia Tokyo 2015 LT
 
[Alfresco]ドキュメントライブラリのUIカスタマイズ
[Alfresco]ドキュメントライブラリのUIカスタマイズ[Alfresco]ドキュメントライブラリのUIカスタマイズ
[Alfresco]ドキュメントライブラリのUIカスタマイズ
 
Mysql casial01
Mysql casial01Mysql casial01
Mysql casial01
 
CakePHP2でMySQL Replication
CakePHP2でMySQL ReplicationCakePHP2でMySQL Replication
CakePHP2でMySQL Replication
 
Webサーバ勉強会03
Webサーバ勉強会03Webサーバ勉強会03
Webサーバ勉強会03
 

Viewers also liked

マンホールサミット2014資料
マンホールサミット2014資料マンホールサミット2014資料
マンホールサミット2014資料
K Kimura
 
IoTデバイスと簡単に連携できる統合開発&配信環境 Bluemix を使ったゲーム開発
IoTデバイスと簡単に連携できる統合開発&配信環境 Bluemix を使ったゲーム開発IoTデバイスと簡単に連携できる統合開発&配信環境 Bluemix を使ったゲーム開発
IoTデバイスと簡単に連携できる統合開発&配信環境 Bluemix を使ったゲーム開発
K Kimura
 

Viewers also liked (20)

FlashAir x Bluemix アイデアソン
FlashAir x Bluemix アイデアソンFlashAir x Bluemix アイデアソン
FlashAir x Bluemix アイデアソン
 
Mn4
Mn4Mn4
Mn4
 
IDCF クラウドから Yahoo! デベロッパークラウドを使う
IDCF クラウドから Yahoo! デベロッパークラウドを使うIDCF クラウドから Yahoo! デベロッパークラウドを使う
IDCF クラウドから Yahoo! デベロッパークラウドを使う
 
マンホールサミット2014資料
マンホールサミット2014資料マンホールサミット2014資料
マンホールサミット2014資料
 
Osc2010 Domino
Osc2010 DominoOsc2010 Domino
Osc2010 Domino
 
マンホールナイト5講演資料 #mhn5
マンホールナイト5講演資料 #mhn5マンホールナイト5講演資料 #mhn5
マンホールナイト5講演資料 #mhn5
 
IDCF クラウド meets Node-RED !
IDCF クラウド meets Node-RED !IDCF クラウド meets Node-RED !
IDCF クラウド meets Node-RED !
 
マンホールナイト6用発表資料
マンホールナイト6用発表資料マンホールナイト6用発表資料
マンホールナイト6用発表資料
 
ねっぴ On IDCF
ねっぴ On IDCFねっぴ On IDCF
ねっぴ On IDCF
 
ノーツ資産を活用した自動分類システム
ノーツ資産を活用した自動分類システムノーツ資産を活用した自動分類システム
ノーツ資産を活用した自動分類システム
 
IoTデバイスと簡単に連携できる統合開発&配信環境 Bluemix を使ったゲーム開発
IoTデバイスと簡単に連携できる統合開発&配信環境 Bluemix を使ったゲーム開発IoTデバイスと簡単に連携できる統合開発&配信環境 Bluemix を使ったゲーム開発
IoTデバイスと簡単に連携できる統合開発&配信環境 Bluemix を使ったゲーム開発
 
IBM版Hadoop - BigInsights/Big SQL (2013/07/26 CLUB DB2発表資料)
IBM版Hadoop - BigInsights/Big SQL (2013/07/26 CLUB DB2発表資料)IBM版Hadoop - BigInsights/Big SQL (2013/07/26 CLUB DB2発表資料)
IBM版Hadoop - BigInsights/Big SQL (2013/07/26 CLUB DB2発表資料)
 
Watson Analytic
Watson AnalyticWatson Analytic
Watson Analytic
 
Watson による性格分析 API を使ってみた
Watson による性格分析 API を使ってみたWatson による性格分析 API を使ってみた
Watson による性格分析 API を使ってみた
 
PepperとWatson音声関連API
PepperとWatson音声関連APIPepperとWatson音声関連API
PepperとWatson音声関連API
 
Watson analytics ご紹介
Watson analytics ご紹介Watson analytics ご紹介
Watson analytics ご紹介
 
Watson Explorerを使ったテキストマイニング
Watson Explorerを使ったテキストマイニングWatson Explorerを使ったテキストマイニング
Watson Explorerを使ったテキストマイニング
 
IBM Bluemix + Watson(MS) + Eagle Eye で行う 表情認識システム
IBM Bluemix + Watson(MS) + Eagle Eye で行う 表情認識システムIBM Bluemix + Watson(MS) + Eagle Eye で行う 表情認識システム
IBM Bluemix + Watson(MS) + Eagle Eye で行う 表情認識システム
 
アプリ屋もDockerをドカドカ使おう ~ Docker入門
アプリ屋もDockerをドカドカ使おう ~ Docker入門アプリ屋もDockerをドカドカ使おう ~ Docker入門
アプリ屋もDockerをドカドカ使おう ~ Docker入門
 
IBM Watson Content Analytics: Discover Hidden Value in Your Unstructured Data
IBM Watson Content Analytics: Discover Hidden Value in Your Unstructured DataIBM Watson Content Analytics: Discover Hidden Value in Your Unstructured Data
IBM Watson Content Analytics: Discover Hidden Value in Your Unstructured Data
 

Similar to Ibm worklight デモ環境とサンプルコード

Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
Hideki Hashizume
 
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSエンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
Ayumi Goto
 
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
 
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
linzhixing
 

Similar to Ibm worklight デモ環境とサンプルコード (20)

Java EE8 Report
Java EE8 ReportJava EE8 Report
Java EE8 Report
 
Apache Torqueについて
Apache TorqueについてApache Torqueについて
Apache Torqueについて
 
Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19Pro aspnetmvc3framework chap19
Pro aspnetmvc3framework chap19
 
PHPからJavaへ乗り換えた。そんな昔話をしよう
PHPからJavaへ乗り換えた。そんな昔話をしようPHPからJavaへ乗り換えた。そんな昔話をしよう
PHPからJavaへ乗り換えた。そんな昔話をしよう
 
Seasarプロジェクト徹底攻略
Seasarプロジェクト徹底攻略Seasarプロジェクト徹底攻略
Seasarプロジェクト徹底攻略
 
エンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJSエンタープライズ分野での実践AngularJS
エンタープライズ分野での実践AngularJS
 
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
 
for Developer、 Microsoft Edge とInternet Explorer で 新しくサポートされるAPI
for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI for Developer、Microsoft Edge とInternet Explorer で新しくサポートされるAPI
for Developer、 Microsoft Edge とInternet Explorer で 新しくサポートされるAPI
 
Gwt1
Gwt1Gwt1
Gwt1
 
OSC2014.Enterprise Zabbix-JobScheduler連携ツールHyClopsJobMonitoringによる運用システムOSS化の実現
OSC2014.Enterprise Zabbix-JobScheduler連携ツールHyClopsJobMonitoringによる運用システムOSS化の実現OSC2014.Enterprise Zabbix-JobScheduler連携ツールHyClopsJobMonitoringによる運用システムOSS化の実現
OSC2014.Enterprise Zabbix-JobScheduler連携ツールHyClopsJobMonitoringによる運用システムOSS化の実現
 
JavaOne2015報告会 Java EE アップデート #j1jp
JavaOne2015報告会 Java EE アップデート #j1jpJavaOne2015報告会 Java EE アップデート #j1jp
JavaOne2015報告会 Java EE アップデート #j1jp
 
Amazon ElastiCacheのはじめ方
Amazon ElastiCacheのはじめ方Amazon ElastiCacheのはじめ方
Amazon ElastiCacheのはじめ方
 
Inside mobage platform
Inside mobage platformInside mobage platform
Inside mobage platform
 
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
Alfresco勉強会20120829: やさしいShareダッシュレットの作り方
 
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...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...
 
How to Make Own Framework built on OWIN
How to Make Own Framework built on OWINHow to Make Own Framework built on OWIN
How to Make Own Framework built on OWIN
 
Hybrid serverless architecture using open whisk ibm cloud functions and istio...
Hybrid serverless architecture using open whisk ibm cloud functions and istio...Hybrid serverless architecture using open whisk ibm cloud functions and istio...
Hybrid serverless architecture using open whisk ibm cloud functions and istio...
 
Selenium webdriver使ってみようず
Selenium webdriver使ってみようずSelenium webdriver使ってみようず
Selenium webdriver使ってみようず
 
Groovyで楽にSQLを実行してみよう
Groovyで楽にSQLを実行してみようGroovyで楽にSQLを実行してみよう
Groovyで楽にSQLを実行してみよう
 
UnityのLambda API を Dynamo DB APIっぽく使う
UnityのLambda API を Dynamo DB APIっぽく使うUnityのLambda API を Dynamo DB APIっぽく使う
UnityのLambda API を Dynamo DB APIっぽく使う
 

More from K Kimura

IBM Watson IoT を用いた遠隔ゲームコントローラーと Node-RED による簡易カスタマイズによる実現
IBM Watson IoT を用いた遠隔ゲームコントローラーと Node-RED による簡易カスタマイズによる実現IBM Watson IoT を用いた遠隔ゲームコントローラーと Node-RED による簡易カスタマイズによる実現
IBM Watson IoT を用いた遠隔ゲームコントローラーと Node-RED による簡易カスタマイズによる実現
K Kimura
 

More from K Kimura (20)

ThinkPad を自慢できると聞いてやってきました
ThinkPad を自慢できると聞いてやってきましたThinkPad を自慢できると聞いてやってきました
ThinkPad を自慢できると聞いてやってきました
 
IBM FamilyDay 2022 - 帰ってきた LINE 手描きスタンプ
IBM FamilyDay 2022 - 帰ってきた LINE 手描きスタンプIBM FamilyDay 2022 - 帰ってきた LINE 手描きスタンプ
IBM FamilyDay 2022 - 帰ってきた LINE 手描きスタンプ
 
「プライベート版 Heroku」の "dokku" は Cloud Foundry 代替としてどこまで使えるか?
「プライベート版 Heroku」の "dokku" は Cloud Foundry 代替としてどこまで使えるか?「プライベート版 Heroku」の "dokku" は Cloud Foundry 代替としてどこまで使えるか?
「プライベート版 Heroku」の "dokku" は Cloud Foundry 代替としてどこまで使えるか?
 
LINE お絵描きスタンプが NFT 対応するかも
LINE お絵描きスタンプが NFT 対応するかもLINE お絵描きスタンプが NFT 対応するかも
LINE お絵描きスタンプが NFT 対応するかも
 
ICFO2021 コロナ時代のオンラインハンズオン体験
ICFO2021   コロナ時代のオンラインハンズオン体験ICFO2021   コロナ時代のオンラインハンズオン体験
ICFO2021 コロナ時代のオンラインハンズオン体験
 
IBM Family Day 2020 - LINE で手描きスタンプに挑戦!
IBM Family Day 2020 - LINE で手描きスタンプに挑戦!IBM Family Day 2020 - LINE で手描きスタンプに挑戦!
IBM Family Day 2020 - LINE で手描きスタンプに挑戦!
 
マンホールマップ10周年 20200725
マンホールマップ10周年 20200725マンホールマップ10周年 20200725
マンホールマップ10周年 20200725
 
MashupAward6 Manholemap(2010)
MashupAward6 Manholemap(2010)MashupAward6 Manholemap(2010)
MashupAward6 Manholemap(2010)
 
スライドパズルハンズオン資料
スライドパズルハンズオン資料スライドパズルハンズオン資料
スライドパズルハンズオン資料
 
ユーザー投稿型位置情報プロットシステム - マンホールマップ
ユーザー投稿型位置情報プロットシステム - マンホールマップユーザー投稿型位置情報プロットシステム - マンホールマップ
ユーザー投稿型位置情報プロットシステム - マンホールマップ
 
Scratch でゲームプログラミング
Scratch でゲームプログラミングScratch でゲームプログラミング
Scratch でゲームプログラミング
 
空耳アワーマシーンを作ってみた
空耳アワーマシーンを作ってみた空耳アワーマシーンを作ってみた
空耳アワーマシーンを作ってみた
 
生まれ変わるマンホールマップ
生まれ変わるマンホールマップ生まれ変わるマンホールマップ
生まれ変わるマンホールマップ
 
地図データでレースゲームを作って遊ぼう!
地図データでレースゲームを作って遊ぼう!地図データでレースゲームを作って遊ぼう!
地図データでレースゲームを作って遊ぼう!
 
AI先生と外国語会話を練習しよう!
AI先生と外国語会話を練習しよう!AI先生と外国語会話を練習しよう!
AI先生と外国語会話を練習しよう!
 
IBM Watson IoT を用いた遠隔ゲームコントローラーと Node-RED による簡易カスタマイズによる実現
IBM Watson IoT を用いた遠隔ゲームコントローラーと Node-RED による簡易カスタマイズによる実現IBM Watson IoT を用いた遠隔ゲームコントローラーと Node-RED による簡易カスタマイズによる実現
IBM Watson IoT を用いた遠隔ゲームコントローラーと Node-RED による簡易カスタマイズによる実現
 
「テトリスを作ってスマホで振って遊ぼう!」ハンズオン資料
「テトリスを作ってスマホで振って遊ぼう!」ハンズオン資料「テトリスを作ってスマホで振って遊ぼう!」ハンズオン資料
「テトリスを作ってスマホで振って遊ぼう!」ハンズオン資料
 
LINE お絵描きアプリハンズオン 20190519
LINE お絵描きアプリハンズオン 20190519LINE お絵描きアプリハンズオン 20190519
LINE お絵描きアプリハンズオン 20190519
 
LINE お絵描きハンズオン 2019.04.26
LINE お絵描きハンズオン 2019.04.26LINE お絵描きハンズオン 2019.04.26
LINE お絵描きハンズオン 2019.04.26
 
Hyperledger Hands-on 2019-03-30 @ Singularity HIVE
Hyperledger Hands-on 2019-03-30 @ Singularity HIVEHyperledger Hands-on 2019-03-30 @ Singularity HIVE
Hyperledger Hands-on 2019-03-30 @ Singularity HIVE
 

Ibm worklight デモ環境とサンプルコード

  • 1. © 2013 IBM Corporation06/04/13 IBM Worklight デモ環境とサンプルコー ド
  • 2. © 2013 IBM Corporation 2 Empowering the IBM ecosystem 06/04/13 デモ環境 その1 IBM Worklight Server アプ リ デバイス IBM developerWorks (RSS) アダプ ター アダプ ター HTTP で RSS(XML) を取得し、 JSON に変換して、アプリケーションに渡 す。 <?xml version=“1.0”?> <rss version=“2.0”> <channel> <title>IBM developerWorks 日本語版 </title> : JSON データを HTML5 内の JavaScript で扱う
  • 3. © 2013 IBM Corporation 3 Empowering the IBM ecosystem 06/04/13 アダプターの定義内容 (定義ファイル内) : <connectivity> <connectiionPolicy xsi:type=“http:HTTPConnectionPolicyType”> <protocol>http</protocol> <domain>www.ibm.com</domain> <port>80</port> </connectionPolicy> : : </connectivity> <procedure name=“getStories”/> : ( .js ファイル内) : function getStories(interest){ path = ‘/developerworks/jp/views/’ + interest + ‘/rss/libraryview.jsp’; var input = { method: ‘get’, returnedContentType: ‘xml’, path: path }; return WL.Server.invokeHttp( input ); } : http://www.ibm.com/ 以下のフィードを取得する、 と宣言 変数を使ってパスを生成し、 get メソッドを実行 ( RSS なので)取得データは XML を想定。 JavaScript 関数としては getStories を使うことを宣言
  • 4. © 2013 IBM Corporation 4 Empowering the IBM ecosystem 06/04/13 JavaScript でアダプターを呼び出す (アダプターを呼び出す箇所の JavaScript ) : var invocationData = { adapter: ‘dWFeedsAdapter’, procedure: ‘getStories’, parameters: [ theme ] }; WL.Client.invokeProcedure( invocationData, { onSuccess: loadFeedsSuccess, onFailure: loadFeedsFailure, invocationContext: {} } ); : (呼び出しが成功した時のハンドラ) function loadFeedsSuccess( result ){ : var items = result.invocationResult.rss.channel.item; var n = items.length; for( I = 0; I < n; I ++ ){ var item = items[i]; : } } アダプターと関数、パラメータを指定 成功時、失敗時のハンドラを指定して invoke 成功時の処理(非同期)
  • 5. © 2013 IBM Corporation 5 Empowering the IBM ecosystem 06/04/13 デモ環境 その2 IBM Worklight Server アプ リ デバイス IBM Domino データベース アダプ ター アダプ ター HTTP で JSON を取得し、 アプリケーションに渡す。 [ { “@href”:http://******, “@link”: { “rel”: “document”, “href”: http://******” }, “@entryid”: “1-*********************”, : JSON データを HTML5 内の JavaScript で扱う
  • 6. © 2013 IBM Corporation 6 Empowering the IBM ecosystem 06/04/13 アダプターの定義内容 (定義ファイル内) : <connectivity> <connectiionPolicy xsi:type=“http:HTTPConnectionPolicyType”> <protocol>http</protocol> <domain>XXX.XXX.com</domain> <port>80</port> </connectionPolicy> : : </connectivity> <procedure name=“getStories”/> : ( .js ファイル内) : function getStories(interest){ path = interest + ‘/api/data/collections’; var input = { method: ‘get’, returnedContentType: ‘plain’, path: path }; return WL.Server.invokeHttp( input ); } : http://XXX.XXX.com/ 以下に対して JSON を取得する、 と宣言 変数を使ってパスを生成し、 get メソッドを実行 取得データは plain text を想定。 JavaScript 関数としては getStories を使うことを宣言
  • 7. © 2013 IBM Corporation 7 Empowering the IBM ecosystem 06/04/13 JavaScript でアダプターを呼び出す (アダプターを呼び出す箇所の JavaScript ) : var invocationData = { adapter: ‘DDSAdapter’, procedure: ‘getStories’, parameters: [ ‘/testdb.nsf” ] }; WL.Client.invokeProcedure( invocationData, { onSuccess: loadDbSuccess, onFailure: loadDbFailure, invocationContext: {} } ); : (呼び出しが成功した時のハンドラ) function loadDbSuccess( result ){ : var objs = JSON.parse( result.invocationResult.text ); var n = objs.length; for( I = 0; I < n; I ++ ){ var obj = objs[i]; : } } アダプターと関数、パラメータを指定 成功時、失敗時のハンドラを指定して invoke 成功時の処理(非同期) (ほぼ先程の例と同じ) Plain Text を parse
  • 8. © 2013 IBM Corporation 8 Empowering the IBM ecosystem 06/04/13 デモ環境 その3 IBM Worklight Server アプ リ デバイス リレーショナルデータベース アダプ ター アダプ ター JDBC で JSON を取得し、 アプリケーションに渡す。 +---------+---------+ | pcode | pref | +---------+---------+ | 01 | 北海道 | | 02 | 青森県 | : JSON データを HTML5 内の JavaScript で扱う
  • 9. © 2013 IBM Corporation 9 Empowering the IBM ecosystem 06/04/13 アダプターの定義内容 (定義ファイル内) : <connectivity> <connectiionPolicy xsi:type=“sql:SQLConnectionPolicyType”> <dataSourceDefinition> <driverClass>com.mysql.jdbc.Driver</driverClass> <url>jdbc:mysql://XXX.XXX.com:3306/sampledb</url> <user>username</user> <password>password</password> </dataSourceDefinition> </connectionPolicy> : : </connectivity> <procedure name=“procedure1”/> : ( .js ファイル内) : var prodecure1Statement = WL.Server.createSQLStatement( “select * from testdb” ); function procedure1(param){ return WL.Server.invokeSQLStatement({ preparedStatement: procedure1Statement, parameters: [param] }); } : JDBC の接続先を指定 SQL 文を指定して実行 JavaScript 関数としては procedure1 を使うことを宣言
  • 10. © 2013 IBM Corporation 10 Empowering the IBM ecosystem 06/04/13 JavaScript でアダプターを呼び出す (アダプターを呼び出す箇所の JavaScript ) : var invocationData = { adapter: ‘SampleDb’, procedure: ‘procedure1’, parameters: [] }; WL.Client.invokeProcedure( invocationData, { onSuccess: p1Success, onFailure: p1Failure, invocationContext: {} } ); : (呼び出しが成功した時のハンドラ) function p1Success( result ){ : var items = result.invocationResult.rss.channel.item; var n = items.length; for( I = 0; I < n; I ++ ){ var item = items[i]; : } } アダプターと関数、パラメータを指定 成功時、失敗時のハンドラを指定して invoke 成功時の処理(非同期)