まだプログラマーですが何か？

プログラマーネタ中心。たまに作成したウェブサービス関連の話も https://twitter.com/dotnsf

2018/03

インスタグラムの API を使うと、インスタグラムの写真を使ったアプリケーションを開発することができます。その開発例を準備段階から説明します。詳しくは後述しますが、今回はインスタグラム API の "SandBox" モードを使ったサンプルを紹介します。


【アプリケーション登録】
まず大大大前提としてインスタグラムのアカウントが必要です。こちらは取得済みとした上で以下を記載します。

インスタグラム API を使うには、インスタグラムデベロッパーであらかじめアプリケーションを登録しておく必要があります。これから API を使って作るアプリケーションを最初に登録しておく必要がある、という意味です。

というわけでまずは PC からインスタグラムデベロッパーにアクセスしてログインし、"Manage Clients" をクリックします：
2018032001


すると現在登録済みのアプリケーションの一覧が表示されます（まだ１つも登録していない場合は何も表示されません）。新たにアプリケーションを登録するにはこの画面で "Register a New Client" をクリック：
2018032002


新規登録画面ではまず最初に "Security" タブを選んで、"Disable implicit OAuth" のチェックを外しておきます：
2018032101


改めて "Details" タブに移動し、必要な項目を入力します。Application Name（アプリケーション名）は任意に指定できますが、"Instagram" や "Insta", "IG" といった文字列は使えない、という規約があるようです。後は Description（説明）を記入して、Company Name（会社名）は個人名でも空でもいいようです。大事なのは Website URL と Valid redirect URIs、ここはこの後の OAuth 認証で使うため、（アプリケーションとして動いていなくてもよいので）実在する URL を指定する必要があります。なおここで指定する値は後から編集することも可能です：
2018032102


すべて指定したら下にスクロールして「私はロボットではありません」の横をチェックします：
2018032103


自動化されたロボットでないことを証明するための質問に答えます。下の例では画像からお店を選べ、とのこと：
2018032104


まあこれとこれとこれ、、かな？？　という感じにチェックして確認ボタン：
2018032105


正しい選択ができているとロボットではないことが証明できて、"Register" ボタンがクリックできるようになります：
2018032106


無事にアプリケーションの登録が完了し、CLIENT ID が取得できました。ここに表示されている CLIENT ID の値はこの後に利用するので控えておいてください：
2018032107


【アクセストークン取得】
インスタグラムの API は「アクセストークン」と呼ばれる文字列を使って利用します。このアクセストークンは上記手順で指定した情報を知っている（指定できる）人だけが取得できます。なお今回対象としている SandBox モードの場合、１つの登録アプリケーションにつき、アクセストークンが取得できるユーザーは20人までという上限がありますが、以下で紹介するアプリケーションの場合は本人だけが使う想定なので問題ないと思っています。

ウェブブラウザで以下の URL にアクセスします：
https://instagram.com/oauth/authorize/?client_id=(Client ID)&redirect_uri=(Redirect URI)&response_type=token&scope=public_content

(CLIENT ID) 部分には上記で取得した CLIENT ID の値を、(Redirect URI) 部分には取得時に指定した Valid Redirect URI の値にそれぞれ置き換えて指定します。すると以下のような画面になり、Instagram の画像やプロフィール情報にアクセスすることを許可するか？という確認画面が表示されるので "Authorize" をクリックして許可します：
2018032108


するとブラウザ画面が切り替わり、Rediret URI で指定した URL に転送されます。この時の URL には acess_token=XXXXXX..XXXXXX という形でアクセストークンが付与されています：
2018032109


この値がアクセストークン値で、この文字列を使うことでインスタグラム API を利用することができるようになります。この値を控えておきます：
https://dotnsf-myphotos.us-east.mybluemix.net/#access_token=XXXXXX..XXXXXX


【サンプルアプリケーション実行】
インスタグラム API を使った Node.js のサンプルウェブアプリケーションをこちらに用意しておきました：
https://github.com/dotnsf/myphotos

2018032101


このコードをダウンロード＆展開するか、git clone して手元に用意してください。そして settings.js ファイルをテキストエディタで開き、exports.access_token の値を先程確認したアクセストークンの値に編集して保存します：
2018032101


2018032102


この状態のアプリケーションを指定した Redirect URI で動くように転送／コピー／デプロイします。これで準備は完了です。


実際の動作を確認するには（できればスマホで）Redirect URI にアクセスします。すると自分のインスタグラムの最新20件の画像／動画が確認できるアプリケーションが表示されます：
IMG_1999


次／前の画像を見るには左右に（フリックやマウスドラッグで）スライドさせます：
IMG_2001
　（↑伝わりにくいけど、右から左へスライド中の様子）


すると次／前の画像に切り替わります：
IMG_2002


表示されている画像をタップすると、インスタグラム上の同画像ページに移動し、タイトルやタグ、コメントも確認できます：
IMG_2003


インスタグラムの API を使って自分の画像をカルーセル表示する、というサンプルでした。実際に API が正しく動いて画像を取得できていることも確認できました。



【Sandbox モードについて】
Sandbox モードは誰でも気軽にインスタグラム API を使えるように 2016 年６月に用意されたモードです。アカウントと（上記の）アプリケーションの登録をするだけで使えるようになるというメリットがあります。

一方で、その利用には制約があります。使える API やその結果は限られたものだけです。私個人が確認した限りでは、ユーザー名からユーザー ID を検索する API は自分自身の ID については期待通りに動いたのですが、フォローしているユーザーや他のユーザーの検索はできませんでした（実行結果が空だった）。といった制約があり、この制約をなくすには Sandbox モードではなく、正式な API を利用する必要があり、そのためにはアプリケーションの申請が必要になります。個人的に正式な申請をした経験はないのですが、ウェブ上にはそういった情報もあるようです。１つだけ参照リンクを貼っておきます：
Instagram APIの審査を通した人に話を聞いてみた。

また Sandbox モードにおける制約等の（最新の）情報は公式ドキュメントを参照ください：
Sandbox Mode









タグ ：
#instagram
#api
#sandbox

Node-RED は GUI で便利にデータの流れを定義することができるビジュアルデータフローエディタです。HTTP(S) や MQTT など多くのプロトコルにも対応しており、これまでプログラミングを記述しないと実現できなかったようなデータの流れを、個別の機能を持ったノードを組み合わせることで、ほぼコーディングレスで実現できるという点が画期的なツールです。このブログでも何度か紹介してきました。

（このエントリで紹介した時のデータフロー。これだけでデータベース入出力を行うウェブアプリケーションを作ってます）
2018031301


さてそんな簡単で便利な Node-RED ですが、「Node-RED だと（一般的なプログラミングと比較して）処理が複雑になるケース」もあります。こういう視点で語られているドキュメントを目にすること-がなかったこともありますが、Node-RED がより多くの現場で使われていく上での適材適所を考える上では必要になってくると思っていることもあり、そんな例を紹介しようと思いました。

今回、Node-RED と比較するプログラミング環境はサーバーサイド JavaScript である Node.js とします。もともと Node-RED 自体が Node.js 上で動くアプリケーションであり、Node-RED の function ノード内では JavaScript を直接記述することもできるという点で、比較対象としては相応しいのではないかと思っています。

で、この「Node-RED での処理が複雑になるケース」の典型例の１つが if 分岐処理だと自分の拙い経験上で思っています。if 分岐はプログラミング言語を学ぶ中でのかなり早い段階で遭遇することになる基本的な処理ですが、Node-RED では必ずしも基本的とは言えない内容だと感じています。

例を挙げて説明します。例えばこんな処理を行うケース：
・気温(temp)と湿度(humid)という２つの変数値から「不快」か「不快ではない」かを判断する。
・気温が 30 以上で、かつ humid が 50 以上だと不快
・気温が 30 未満で、かつ humid が 80 以上だと不快
・それ以外は不快ではない

よくあるレベルのシンプルな分岐処理ですよね（湿度は％単位で与えられるものとします）。この処理を Node.js （や他の一般的なプログラミング言語）の if 分岐で行おうとすると、こんなシンプルな感じになると思います：
if( ( temp >= 30 && humid >= 50 ) || ( temp < 30 && humid >= 80 ) ){
  //. 不快と判断

}else{
  //. 不快ではないと判断

}

では同じ処理を Node-RED で実現しようとするとどうなるでしょうか？仮に msg.payload.temp と msg.payload.humid にそれぞれ温度と湿度の値が入っているという前提で作ることを考えてみます。

Node-RED で条件分岐を行うノードは "switch" ノードです。機能カテゴリ内にある switch ノードをキャンバスにドラッグ＆ドロップします：
2018031302


ドロップした switch ノードをダブルクリックして、処理内容を設定する画面に切り替えます：
2018031303


このノードでは温度(msg.payload.temp)に関する条件分岐を行うことにします。今回は30度以上か、30度未満かで処理を分岐する必要があります。というわけで、プロパティの値を (msg.)payload.temp にして、その条件を指定する部分では「30以上の数値」となるように指定します。またノードの表示用の名前を「温度」と設定します：
2018031304


今回の処理では温度が「30 以上の場合」と「30 未満の場合」の２つの条件に分岐する必要があります。前者は上記で指定したので後者を追加します。この画面内の「追加」ボタンをクリックします：
2018031305


すると条件部分が１行追加され、もう１つの条件を指定できるようになりました。ここでは「 30 未満の数値」となるような条件を指定します（下図のようにするか、または後述のように"otherwise"（その他）という選択肢でも同じ結果になります）。　これで msg.payload.temp の値が 30 以上であれば１へ、30 未満であれば 2 へ行く、という分岐処理が定義できたことになります。ここまでできていることを確認して「完了」ボタンをクリック：
2018031306


すると switch ノードに指定した名前が表示されるのと同時に、ノード右側の出口が２つに増えていることが分かります。上側の接続子が１、下側の接続子が２を意味しており、ここから条件を分岐して処理できるようになりました：
2018031307



続けて湿度の条件を追加します。温度 switch ノードの①に別の switch ノードを追加して接続します：
2018031308


追加した switch ノードをダブルクリックして編集ダイアログを出し、以下のように設定します。　名前は「湿度」、プロパティは湿度の値である (msg.)payload.humid 、ここは温度が 30 度以上の場合に処理されるノードなので、分岐の条件は「 50 以上の数値」か「otherwise（それ以外）」として、最後に「完了」をクリックします：
2018031309


この時点でキャンバス上は以下のような２つのノードが設定されているはずです。③は温度が30度以上で、湿度は50以上なので「不快」、④は温度は30度以上ですが、湿度は50未満なので「不快ではない」という分岐がされたことになります：
2018031310


では続けて②のノードの続きの処理を追加します。更にもう１つの switch ノードをキャンバスに追加し、温度 switch ノードの②と接続します。そしてノードの設定内容を以下のようにします。先程の湿度ノードに近い内容ですが、このノードは温度が 30 度未満の場合に処理されるので、湿度が 80 以上だった場合に不快、それ以外であれば不快ではないと分岐するノードにしています：
2018031301


ここまでの作業でキャンバスには以下のように３つの switch ノードが用意されているはずです。そして③と⑤が不快、④と⑥が不快ではない場合の処理を行う流れになります：
2018031302


後はこの分岐した条件にあわせて処理を繋げていけばよいので、例えばこんなフローになっていくんでしょうかね：
2018031303


というわけで、目的の条件分岐を Node-RED で実現することはできました。　ただ Node.js では以下のような超シンプルな分岐処理だった割にはフローが複雑になってしまっている面は否めません。これが更に複雑な分岐処理だった場合、Node-RED ではどれだけ switch ノードを並べないと行けなくなるのか・・・：
if( ( temp >= 30 && humid >= 50 ) || ( temp < 30 && humid >= 80 ) ){
  //. 不快と判断

}else{
  //. 不快ではないと判断

}

原因というわけではないのですが、Node-RED の switch ノードは単一のプロパティに対する条件分岐しか行えないため、複数の値を元に条件を分岐するようなケースではどうしてもノードを多用する必要が出てきてしまいます。この部分だけを切り取って結論にはできないと思いますが、Node-RED では if 文による分岐処理は必ずしも簡単ではないということだと思います。



タグ ：
#nodered
#node-red

Chart.js は棒グラフや折れ線グラフなどの各種グラフやチャートを描画するための JavaScript ライブラリです。グラフを描くだけならかなり簡単に使うことができて便利です。また MIT ライセンスが採用されており、商用を含めた柔軟な利用が可能になっています。

今回はこの Chart.js を使って「ポーラーチャート」を作る例を紹介します：
ogp


ポーラーチャートは円グラフやドーナツグラフに似ています。円グラフやドーナツグラフでは円全体を 100% と見なして、その中の割合を（色別などに）分類表示する、というものです。　一方ポーラーチャートでは量が多いほど大きな面積で表示されます。存在している要素が全て同じ角度を持ったパイの形で表示されるため、仮に特定の要素の値がゼロでもゼロであることがわかりやすくなっている（※）という特徴があります。

※上図の例だと左上に紫色っぽい部分がほんの少しだけ存在しています。量が少なくてグラフ上ではほぼ見えていないのですが、ここに空間ができることで少なくともここにデータが存在していることが明確になっています。


このポーラーチャートを Chart.js で表示するには以下のようなコードを記述します。Chart 作成時の type 属性に 'polarArea' を指定することでポーラーチャートを描画します：
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>

  :
  :

<canvas id="myChart"></canvas>

  :
  :

<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart( ctx, {
  type: 'polarArea',
  data: {
    labels: [ "Red", "Yellow", "Green", "Cyan", "Blue", "Magenta" ],
    datasets: [{
      backgroundColor: [
        "#ff0000",
        "#ffff00",
        "#00ff00",
        "#00ffff",
        "#0000ff",
        "#ff00ff"
      ],
      data: [ 150, 100, 20, 80, 40, 5 ]
    }]
  }
});
</script>

  :
  :


この内容を実際にこのページ内に埋め込むと以下のようになります：


縦や横の積み上げ式の棒グラフに近い用途で使え、かつ最小値が小さくて、積み上げた時に潰れてしまうようなケースでもデータとしての存在を明確にできる、という特徴を持ったチャートだと思っています。
タグ ：
#chart
#chart.js
#polarchart

Chart.js は棒グラフや折れ線グラフなどの各種グラフやチャートを描画するための JavaScript ライブラリです。グラフを描くだけならかなり簡単に使うことができて便利です。また MIT ライセンスが採用されており、商用を含めた柔軟な利用が可能になっています。

今回はこの Chart.js を使って円グラフを作る例を紹介します：
2018030900


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>

  :
  :

<canvas id="myChart"></canvas>

  :
  :

<script>
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart( ctx, {
  type: 'pie',
  data: {
    labels: [ "Red", "Green", "Blue" ],
    datasets: [{
      backgroundColor: [
        "#ff0000",
        "#00ff00",
        "#0000ff"
      ],
      data: [ 150, 100, 20 ]
    }]
  }
});
</script>

  :
  :

キャンバスの 2D コンテキストを取得し、グラフ種類、ラベル、色、そして数値データを指定して描画しています。上記コードの "pie" という部分が円グラフを指定しており、ここを変更することで円グラフ以外のチャートを作ることもできます。

この内容を実際にこのページ内に埋め込むと以下のようになります： 




なんとなく直感的にというか、 ウェブで簡単に使えるグラフ描画ライブラリだと思ってます。

タグ ：
#chart
#chart.js
#javascript

拙作マンホールマップの隠し（？）機能でも使っている手法の１つを紹介します。

マンホールマップで特定のマンホール画像を表示すると、このような画面になります（PC版の場合）：

http://manholemap.juge.me/page.jsp?id=1125001 の例
2018030401


http://manholemap.juge.me/page.jsp?id=157009　の例
2018030402


注目していただきたいのは地図部分ではなくマンホール画像部分です。画像が色の付いた枠（上は青枠、下は赤枠）で囲われていることにお気づきでしょうか？

これ、実は画像全体の色味を表しています。つまり上の画像は「全体的に青っぽい」、下の画像は「全体的に赤っぽい」ことを自動判断して表示しているのです。なんとなく合ってます（よね）。実際のアプリケーションでは赤、青、緑、黄、紫、そしてマジェンタの６種類のいずれかと判断しています。

これをどうやって実現しているか、というのが今回のネタです。


マンホールマップは Java で開発していて、特にこの部分は Java の拡張クラスである ImageIO (javax.imageio.ImageIO)を使っています。具体的にはこのようなコードです：
	    :
  public String GetImageColor( byte[] img ){
    String r = null;
      :

    if( img != null ){
      BufferedImage image = null;

      try{
        InputStream is = new ByteArrayInputStream( img );
        image = ImageIO.read( is );
      }catch( IOException e ){
      }

      if( image != null ){
        //. 画像の大きさをチェック
        int w = image.getWidth();
        int h = image.getHeight();

        //. １ピクセルずつ色を取り出す
        for( int x = 0; x < w; x ++ ){
          for( int y = 0; y < h; y ++ ){
            //. 特定ピクセルの RGB 情報を取り出す
            int rgb = image.getRGB( x, y );

              :						
          }
        }
      }else{
      }
    }

    return r;
  }

    :

この例では画像バイナリのバイト配列（ byte[] img ）を引数として受け取る GetImageColor() 関数を定義しています。その中でまず ImageIO.read を使って、画像の BufferedImage を取り出します。

正しく取り出すことができたら、画像の幅と高さをピクセル単位で取得し、２重の for ループ内で１ピクセルずつ BufferedImage.getRGB 関数を実行し、RGB 値を取り出す、という処理を実行しています。これで１ピクセル毎の RGB 値を取り出すことができます。

あとはこの結果から、赤、青、緑、黄、紫、そしてマジェンタのどの色が多く使われているか、、、を調べるわけですが、そのあたりの細かなアルゴリズムは秘密（というか面倒なので省略）、ということで（苦笑）。


ちなみに白と黒が含まれていない理由は「マンホールの色が黒（または白）」というのは「普通過ぎてつまらないから、黒と白を除いて近い色を探す」という工夫をしているからでした。


この方法を応用することで、色んな画像の色情報（RGB値）を１ピクセル毎に取り出して判断することができるようになります。


タグ ：
#java
#imageio
#manholemap

このページのトップヘ