CHIRIMEN WoTsignage Edu part4
Owner & Collaborators
License
CHIRIMEN WoTsignage Edu part4 by ChirimenEdu is licensed under the Creative Commons - Attribution-ShareAlike license.
Summary
CHIRIMENを使用したWoTサイネージの作成を通して、webGPIO/webI2Cの使い方を学ぶ。
Part4の内容：
・ウェブAPIについて
・WikiPedia APIの取り扱い
学習の目的：
・ウェブAPIの使い方を学習し、物理的な操作とウェブAPIとの連携を行うことで、WoTの可能性を体感する。
学習の成果：
・MUST：サンプルプログラム通りにWikiPediaの記事を取得し、表示することができる。
・SHOULD：JSONPによるWikiPedia記事取得の各処理の流れと必要性が理解できる。
・MAY：WikiPedia APIの使い方を理解し、任意の形式で記事を取得することができる。また、それらをGPIO、I2Cの処理と関連付けて制御することができる。
Part4の内容：
・ウェブAPIについて
・WikiPedia APIの取り扱い
学習の目的：
・ウェブAPIの使い方を学習し、物理的な操作とウェブAPIとの連携を行うことで、WoTの可能性を体感する。
学習の成果：
・MUST：サンプルプログラム通りにWikiPediaの記事を取得し、表示することができる。
・SHOULD：JSONPによるWikiPedia記事取得の各処理の流れと必要性が理解できる。
・MAY：WikiPedia APIの使い方を理解し、任意の形式で記事を取得することができる。また、それらをGPIO、I2Cの処理と関連付けて制御することができる。
Materials
Tools
Blueprints
Making
- CHIRIMENアプリはウェブアプリそのものなので、様々なWebAPIとの連携も簡単に行えます。
- ここでは、物理スイッチを押した時にWikipediaのWebAPIを使用して、ランダムで記事を取得・表示するように処理を書き換えてみます。
- WebAPIについて簡単に説明します。
- ウェブ上にはWebAPIという形で様々な情報やサービスが提供されています。
- WebAPIを使うと、天気予報の情報を取得したり、twitterに投稿したりと、ウェブ上の他の情報やサービスと連携することができます。
- 最近のウェブサービスは様々なWebAPIをマッシュアップして作られているものがほとんどです。
- WebAPIの代表的なものの一つにWikipediaの情報を取得するWebAPIがあります。
- Wikipedia APIはアカウントなどの登録をせずに使うことができるので、比較的簡単に利用することができます。
- WebAPIについて簡単に説明します。
- Wikipedia記事をランダムで取得する処理を記述していきます。
- Wikipediaの記事はJSONPと呼ばれている方法で取得することができます。
- JSONPで情報を取得する方法を簡単に記述するため、part3でスクロールアニメーションのために使用したjqueryを使用します。
- JSONPでWikipediaの情報を取得します。
- Wikipediaの記事内容を取得する処理をjsの最後に追記してください。
- getRandomWiki関数でWikipediaの記事タイトルをランダムで取得し、getWiki関数で取得したタイトルの記事内容をhtml形式で取得します。
- parseWiki関数で取得した記事内容を#contents要素へ反映します。
- JSONPでWikipediaの情報を取得します。
- 物理スイッチの押下時にWikipedia記事を取得するように処理を記述していきます。
- 物理スイッチを押下した時の処理を書き換えていきます。
- btnPort.onchange = (btnValue) => { }内のif(!btnValue){}文内を以下のように書き換えてください。
- var originalContents = ...という処理は不要なので、この行を削除します。
- else{ ...} という処理も不要なので削除します。
- 取得した記事内容を反映させるだけでは、記事内のリンクがうまく機能しないため、ここでは全てのリンクのリンク先をページトップへと変更します。
- addEventLink関数内でドキュメント内のaタグを全て取得した後に次の1行を追記してください。
- 物理スイッチの押下時にWikipedia記事を取得するように処理を記述していきます。
- 以上でWoTSingageの作成は終了です。これでCHIRIMENで物理的なモノをウェブと関連付けて制御する基本が学習できました。さらにいろいろなモノを制御できるようになるため、以下の教材も学習してみましょう。
References
Usages
Project comments
Comments