機材の準備

  • CHIRIMEN
  • microUSBケーブル
  • microHDMI-HDMIケーブル
  • ACアダプタ
  • HDMIディスプレイ
  • USBハブ
  • USB WiFi ドングル
  • USBマウス
  • CHIRIMEN Basic Shield

プロジェクトの開始準備

    • このプロジェクトはWoTsignage part3の続きとなります。Part3が終了していない方はそちらから実施をお願いします。

    WebAPIとの連携

    • CHIRIMENアプリはウェブアプリそのものなので、様々なWebAPIとの連携も簡単に行えます。
    • ここでは、物理スイッチを押した時にWikipediaのWebAPIを使用して、ランダムで記事を取得・表示するように処理を書き換えてみます。

    WebAPIの基礎知識

    • WebAPIについて簡単に説明します。

    WebAPIとは？

    • ウェブ上にはWebAPIという形で様々な情報やサービスが提供されています。
    • WebAPIを使うと、天気予報の情報を取得したり、twitterに投稿したりと、ウェブ上の他の情報やサービスと連携することができます。
    • 最近のウェブサービスは様々なWebAPIをマッシュアップして作られているものがほとんどです。

    WikipediaAPI

    • WebAPIの代表的なものの一つにWikipediaの情報を取得するWebAPIがあります。
    • Wikipedia APIはアカウントなどの登録をせずに使うことができるので、比較的簡単に利用することができます。

    Wikipedia記事をランダムで取得する

    • Wikipedia記事をランダムで取得する処理を記述していきます。

    JSONPでの情報取得

    • Wikipediaの記事はJSONPと呼ばれている方法で取得することができます。
    • JSONPで情報を取得する方法を簡単に記述するため、part3でスクロールアニメーションのために使用したjqueryを使用します。

    記事内容の取得

    • JSONPでWikipediaの情報を取得します。
    • Wikipediaの記事内容を取得する処理をjsの最後に追記してください。
    • getRandomWiki関数でWikipediaの記事タイトルをランダムで取得し、getWiki関数で取得したタイトルの記事内容をhtml形式で取得します。
    • parseWiki関数で取得した記事内容を#contents要素へ反映します。

    Wikipediaスタイルの反映

    • 取得した記事にWikipediaのスタイルを反映するため、htmlの<head>タグにWikipediaのスタイルの1行を追記したください。

    物理スイッチの押下時にWikipedia記事を取得

    • 物理スイッチの押下時にWikipedia記事を取得するように処理を記述していきます。

    物理スイッチ押下時の処理の書き換え

    • 物理スイッチを押下した時の処理を書き換えていきます。
    • btnPort.onchange = (btnValue) => { }内のif(!btnValue){}文内を以下のように書き換えてください。
    getRandomWiki();
    • var originalContents = ...という処理は不要なので、この行を削除します。
    • else{ ...} という処理も不要なので削除します。

    リンク先の書き換え

    • 取得した記事内容を反映させるだけでは、記事内のリンクがうまく機能しないため、ここでは全てのリンクのリンク先をページトップへと変更します。
    • addEventLink関数内でドキュメント内のaタグを全て取得した後に次の1行を追記してください。
    e.href = "#contents";

    これまでのjsコード

    • これまでのjsコードはwikiapiのmain.jsのようになります。
    • 正しく動作していれば、物理スイッチを押した時にランダムでWikipediaの記事を表示するようになります。

    さらに先のステップへ

    以上でWoTSingageの作成は終了です。これでCHIRIMENで物理的なモノをウェブと関連付けて制御する基本が学習できました。さらにいろいろなモノを制御できるようになるため、以下の教材も学習してみましょう。

    いろいろなI2Cセンサの値を取得してみる

    • 距離センサ以外にも様々なI2Cセンサが存在しています。
    • CHIRIMEN I2C sensor (task.js version)を参考にして、いろんなセンサの値を取得してみましょう。

    サーボモータを動かしてみる

    • センサ以外にもI2Cでモータを動かすことも可能です。
    • CHIRIMEN Servo (task.js version)を参考にサーボモータを制御してみましょう。