license.SummaryCHIRIMENを使用したWoTサイネージの作成を通して、webGPIO/webI2Cの使い方を学ぶ。APIの取り扱い学習の目的:・ウェブAPIの使い方を学習し、物理的な操作とウェブAPIとの連携を行うことで、WoTの可能性を体感する。学習の成果:・MUST:サンプルプログラム通りにWikiPediaの記事を取得し、表示することができる。・SHOULD:JSONPによるWikiPedia記事取得の各処理の流れと必要性が理解できる。APIの使い方を理解し、任意の形式で記事を取得することができる。それらをGPIO、I2Cの処理と関連付けて制御することができる。part3の続きとなります。Part3が終了していない方はそちらから実施をお願いします。OrderWebAPIとの連携0CHIRIMENアプリはウェブアプリそのものなので、様々なWebAPIとの連携も簡単に行えます。ここでは、物理スイッチを押した時にWikipediaのWebAPIを使用して、ランダムで記事を取得・表示するように処理を書き換えてみます。OrderWebAPIの基礎知識0WebAPIについて簡単に説明します。CommentsWebAPIとは?0ウェブ上にはWebAPIという形で様々な情報やサービスが提供されています。WebAPIを使うと、天気予報の情報を取得したり、twitterに投稿したりと、ウェブ上の他の情報やサービスと連携することができます。最近のウェブサービスは様々なWebAPIをマッシュアップして作られているものがほとんどです。CommentsWikipediaAPI0WebAPIの代表的なものの一つにWikipediaの情報を取得するWebAPIがあります。APIはアカウントなどの登録をせずに使うことができるので、比較的簡単に利用することができます。OrderWikipedia記事をランダムで取得する0Wikipedia記事をランダムで取得する処理を記述していきます。CommentsJSONPでの情報取得0Wikipediaの記事はJSONPと呼ばれている方法で取得することができます。JSONPで情報を取得する方法を簡単に記述するため、part3でスクロールアニメーションのために使用したjqueryを使用します。Comments記事内容の取得0JSONPでWikipediaの情報を取得します。Wikipediaの記事内容を取得する処理をjsの最後に追記してください。getRandomWiki関数でWikipediaの記事タイトルをランダムで取得し、getWiki関数で取得したタイトルの記事内容をhtml形式で取得します。parseWiki関数で取得した記事内容を#contents要素へ反映します。CommentsWikipediaスタイルの反映0取得した記事にWikipediaのスタイルを反映するため、htmlの<head>タグにWikipediaのスタイルの1行を追記したください。Order物理スイッチの押下時にWikipedia記事を取得0物理スイッチの押下時にWikipedia記事を取得するように処理を記述していきます。Comments物理スイッチ押下時の処理の書き換え0物理スイッチを押下した時の処理を書き換えていきます。}内のif(!btnValue){}文内を以下のように書き換えてください。...という処理は不要なので、この行を削除します。いう処理も不要なので削除します。Commentsリンク先の書き換え0取得した記事内容を反映させるだけでは、記事内のリンクがうまく機能しないため、ここでは全てのリンクのリンク先をページトップへと変更します。addEventLink関数内でドキュメント内のaタグを全て取得した後に次の1行を追記してください。"#contents";Commentsこれまでのjsコード0これまでのjsコードはwikiapiのmain.jsのようになります。動作していれば、物理スイッチを押した時にランダムでWikipediaの記事を表示するようになります。Orderさらに先のステップへ0以上でWoTSingageの作成は終了です。これでCHIRIMENで物理的なモノをウェブと関連付けて制御する基本が学習できました。いろいろなモノを制御できるようになるため、以下の教材も学習してみましょう。CommentsいろいろなI2Cセンサの値を取得してみる0距離センサ以外にも様々なI2Cセンサが存在しています。version)を参考にして、いろんなセンサの値を取得してみましょう。Commentsサーボモータを動かしてみる0センサ以外にもI2Cでモータを動かすことも可能です。version)を参考にサーボモータを制御してみましょう。