2015年3月18日水曜日

Processing + Twitter4j で OAuth 認証 - その2

前回の続きを見て行きましょう。今回は PIN コードを入力するフォームの作成や accessToken の取得など、大切なのは部分がいくつかあります。


  • getPIN() 関数

PIN コードを入力するためのテキストフィールドを表示する関数です。また、入力された文字列を一時的に保存します。

setLayout で null を引数にすると、レイアウトマネージャが無効になります。これにより、手動で指定した位置にテキストフィールドを置けるようになります。new でテキストフィールドオブジェクトを生成して、setBounds で位置や大きさを決めます。入力された文字は、add で inputLine に加えていきます。

参考1:テキストを入力しよう
参考2:Processing で日本語入力フォーム(Swingアプリケーション利用)

  • マウスをクリックした時の処理

マウスをクリックした時の処理を書いています。ちょっと長いですが、ひとつずつ確認していきましょう。

まずクリックの有効範囲を指定します。次に、inputLine に保持していた情報を String 型の変数 pin に代入し、この pin と requestToken を引数にして Twitter から accessToken を取得します。さらに accessToken オブジェクトから aToken と aSecret を取得しますが、この2つがはじめの変数の宣言で省略した accessToken, accessSecret に相当します。これで準備が整いました。setProperties() 関数でこれらの情報を使って Twitter にアクセスし、getTimeline() 関数でタイムラインの上位5つを画面に表示させます。今回も try - catch 構文を使いましょう。


  • setProperties() 関数、getTimeline() 関数

これまでのエントリで見てきた処理と同じ内容です。

Twitter にアクセスできる状態になった場合は、certificatoin を true にしておきましょう。そうしなければ、OAuth 認証が成功しても、draw() 関数で設定した認証ボタンがそのまま描写され続けてしまいます。その他に変更点はありません。


  • すべてのコード

長くなりましたが、全体としてはこんな感じです。createWriter()createReader() を使うと Twitter へのアクセス権を保存でき、次回から PIN コードの入略を省略することも可能になります。興味のある人は挑戦してみてください。

2015年3月16日月曜日

Processing + Twitter4j で OAuth 認証 - その1

ご無沙汰しております。卒論に追い回されたり虫垂炎の手術を受けたりで、気づけば3月もなかば。もう社畜へのカウントダウンが始まってるよ。春からはSEの卵として頑張りながらも、勉強したことをちょこちょこ書き留めていければいいな。

さて、今回は OAuth に挑戦です。OAuth の仕組みについては、参考で上げている解説ページにて分かりやすく説明されています。つまり、Twitter 側にリクエストを送って、特定のアカウントへのアクセスの許可をもらう仕組みですね。セキュリティを考慮して、PIN コードによる認証を使っていきたいと思います。そして最後に、タイムラインを画面に表示してみましょう。

参考:Java で Twitter を OAuth 認証して使える Twitter4J とは (1/3)
参考:OAuth 認証に WebView を使うのはやめよう

  • ライブラリをインポート&変数の宣言

前回までとは違って、とても多いですね。詳しく見ていきましょう。

まず、accessToken と accessSecret は指定しません。これらは認証に成功すると、Twitter から送られてきます。certification は、Twitter から認証されたことを判別する boolean 型の変数です。certification, iterations, displayGUI は繰り返しを制御するための変数ですが、細かいことは後ほど。TexeField は PIN を入力するためのテキストフィールドを扱う型で、入力された文字列を inputLine として保持し、最後に文字列の pin に代入します。


  • setup() 関数、draw() 関数

setup() 関数、draw() 関数をまとめて確認しましょう。

setup() 関数では、オブジェクトの代入や画像の読み込みを行います。当然ですが、はじめは Twitter へのアクセスの許可が得られていないので、doOAuth() を実行してリクエストを送ります。draw() 関数では、certification が false のときだけボタンを表示するようにしています。また、次回で解説する getPIN() の実行やテキストフィールドの表示も1回でいいので、displayGUI を false にして同じ処理が繰り返されないようにします。


  • doOAuth() 関数

認証画面へ遷移させます。

Twitter から認証されるまでは、accessToken は null です。requestToken は、try - catch 構文で取得します。例外に TwitterException を指定しないとダメみたいですね。その後、requestToken を使って認証画面のURLを発行し、ブラウザからアクセスします。アクセスは1回でいいので、iterations を false にします。そうしないと、この url に毎フレームアクセスし続けてしまい、ブラウザの新規タブが増えてパソコンが大変なことになります(経験者は語る)。

余談になりますが、今回のエントリから文字が両端揃えになっています。WebKit系ブラウザでは文字の両端揃えが難しいということを紹介しているサイトもあって少しビビっていたのですが、<p align = "justify"></p> で問題なく表示できました。完全に整ってはいませんが、ずいぶん見やすくなりました。よかったよかった。こんなに更新頻度の低いブログでも、少しずつ進化しております。

参考:WebKit 系ブラウザ(Chrome / Safari)で両端揃えはできないの? jQuery で検証してみた

次回はPIN コードを入力するためのテキストフィールドを表示する関数や、マウスをクリックした時の処理を書き加えて、プログラムを完成させましょう。

2014年10月21日火曜日

Processing + Twitter4j でタイムラインを取得&表示してみる - その3

気がついたら秋。毎度のことながら、かなりご無沙汰してました。教育実習(1ヶ月)もなんとか乗りきり、プログラムにさわって遊ぶ時間が取れるようになったので、ぼちぼちと勉強のメモを再開していきます。

前回のエントリでは、text() で長文を描画するとウィンドウに収まりきらないという問題を残したままになっていました。そこで今回は、GUI を使ってきれいにTwitter のタイムラインを表示させてみたいと思います。

  • controlP5 のインポート

controlP5 というGUI ライブラリのお世話になります。jar ファイルをプロジェクトの中のcode フォルダに入れます。twitter4j のjar ファイルが置いてあるのと同じ場所ですね。

controlP5 のライブラリを扱うために、新しく変数を宣言しています。カンタンです。

  • setup() 関数


ここでも大きな変更はありません。先ほど宣言した変数のcp5 にオブジェクトを代入する部分を加えるだけですね。

  • keyPressed() 関数:処理の呼び出し


いずれかのキーを押したときに、タイムラインからツイートを取得するためのgetTimeline() 関数を、5回呼び出します。これで、最新の上位5つを取ってきます。

  • getTimeline() 関数:ツイートの表示


今回のメインといえる部分です。ループ回数を引数として受け取っています。

controlP5 オブジェクトを使って、テキストエリアをつくります。テキストエリアは固有の名前をもつみたいなので、ループ回数を利用して違うラベリングをしましょう。その後ろにツイート内容を取得するための処理を書きます。最後にテキストエリアの位置とサイズを指定します。
テキストエリアの背景や文字の色なども変更できます。フォントはMeiryo やMS-Gothic を使わないと、日本語は文字化けしますよ。テキストエリアについての詳しい情報は、Textarea を見てください。

  • すべてのコード


これでツイートをフレームアウトさせることなく、きれいに表示させることができます。注意していただきたいのは、ツイートを取得するためのリクエスト数に制限が設けられているらしく、あまり頻繁にアクセスすると一定時間は応答がなくなるということです。詳しくは、API Rate Limits を読んでください。

またキーを2回押すと、同じ名前のテキストエリアがつくられてしまって、コンソールにエラーが表示されます(ツイートは正しく表示されるけど)。なので、更新ボタンなどのGUI を加えていく場合は、一度テキストエリアを消去してつくり直すような処理にしないとダメかもしれません。

以下のページを参考にさせていただきました。では、ごきげんよう。
  1. Processing Library
  2. controlP5 Examples

2014年7月23日水曜日

Processing + Twitter4j でタイムラインを取得&表示してみる - その2

お待たせしました。今回はいろいろ寄り道をしたいので、前置きはせずさっそくコードを見ていきましょう。

  • getTimeline() 関数:コンソールに表示


void getTimeline(){

  try{
    statuses = twitter.getHomeTimeline();

    for(Status status : statuses){
      println(status.getUser().getName() + "\n" +
              status.getText());
    }
  }

  catch(TwitterException e){
    println(" Get timeline: " + e +
            " Status code: " + e.getStatusCode());
  }
}

たったこれだけ。まず、初めで宣言したコレクションに、Twitter から取ってきたTL の情報を代入します。その後for-each ループで、それぞれのオブジェクトについてユーザー名とツイートの内容を取得して、表示させています。例外時の処理も書かないといけないので、try-catch 構造を使います。これを実行すると、最新のツイートの上位20個がコンソールに表示されると思います。


  • getTimeline() 関数:テキストとして表示


でもね、せっかくウィンドウを作ったんだから、やっぱりそこにtext() を使ってTL を表示させたい。そういう訳で、上のコードを少し変更してみましょう。

void getTimeline(){

  int i = 1;

  try{
    statuses = twitter.getHomeTimeline();

    for(Status status : statuses){
      text(status.getUser().getName() + "\n" +
           status.getText(), 30, 40*i);
      i++;
    }
  }

  catch(TwitterException e){
    println(" Get timeline: " + e +
            " Status code: " + e.getStatusCode());
  }
}

int 型の変数を用意したのは、それぞれのオブジェクトごとにツイートの表示位置を変えるためです。text() では文字情報だけでなく、x, y の位置情報も引数として渡してあげなくてはなりません。なので、オブジェクトを処理するたびに1を加算してy 座標を変更することで、取得したツイートを縦に並べて表示できるようにしています。


  • おい、ところでfor-each ループって何だよ


ぐぬぬ・・・、気付かれないようサラッとやり過ごすつもりだったけど、やっぱりバレたか。コレね、実はぼくもよく分かっていない。小難しい英語のドキュメントなんか読んでも、分からないものは分からない。とりあえず、今回のプログラムに沿って書き換えてみました。

/** for-each ループを使ってコンソールにTL を表示 **/

statuses = twitter.getHomeTimeline();

for(Status status : statuses){
  println(status.getUser().getName() + "\n" + status.getText());
}


/** ふつうのfor ループに置き換えてコンソールにTL を表示 **/

statuses = twitter.getHomeTimeline();

for(int i = 0; i < 20; i++) {
  println(statuses.get(i).getUser().getName() + "\n" +
          statuses.get(i).getText());
}

これがfor-each ループとふつうのfor ループの書き換えのようです。後者では、コレクションの中で何番目のオブジェクトかを指定する添字を使って、get() により毎回それを引っぱってくる必要があります。この処理を簡略化したものがfor-each ループだということで、この問題は解決とさせて下さい(やっぱり逃げた)。

  • すべてのコード


Twitter のTL から最新のツイートを5つ取得して、テキストとしてウィンドウに表示するプログラムです。20個だとちょっと多いので、サンプルとして必要最低限の数ってことで。for-each ループではなく、ふつうのfor を使って書いていたものです。

import twitter4j.conf.*;
import twitter4j.*;
import twitter4j.auth.*;
import twitter4j.api.*;
import java.util.*;

String consumerKey = "xxxxx";
String consumerSecret = "xxxxx";
String accessToken = "xxxxx";
String accessSecret = "xxxxx";

Twitter twitter;
List<Status> statuses = null;

void setup(){

  size(480, 320);
  background(0);

  ConfigurationBuilder cb = new ConfigurationBuilder();
  cb.setOAuthConsumerKey(consumerKey);
  cb.setOAuthConsumerSecret(consumerSecret);
  cb.setOAuthAccessToken(accessToken);
  cb.setOAuthAccessTokenSecret(accessSecret);

  TwitterFactory tf = new TwitterFactory(cb.build());
  twitter = tf.getInstance();
}

void draw(){

}

void keyPressed(){
  getTimeline();
}

void getTimeline(){

  try{
    statuses = twitter.getHomeTimeline();

    for(int i = 0; i < 5; i++){
      text(statuses.get(i).getUser().getName() + "\n" +
           statuses.get(i).getText(), 30, 40*(i+1));
    }
  }

  catch(TwitterException e){
    println(" Get timeline: " + e +
            " Status code: " + e.getStatusCode());
  }
}

こんなエントリを読んでいらっしゃる暇な皆さんお気づきだと思いますが、text() は自動で改行してくれないのでツイートが長くなってしまうと、文字がフレームアウトして読むことができません。GUI ライブラリなんかでもっと見栄えよく仕上げたいとも思ったのですが、勉強不足のせいもあって、まだ形にもできず・・・。ControlP5 っていうのが有名なサードパーティによるライブラリみたいなのですが、これは日本語の表示に対応していないみたいで、文字化けしてしまいました(対処法があるのかもしれないけど、見つけられなかった)。

こんなまとめサイトもあるので、これから少しずつ他のライブラリにも探りを入れていって、感想でも書ければなあ・・・と思います。参考にさせてページは、以下のとおりです。ほな、さいなら。

  1. Twitter4j コードサンプル
  2. Processing Forum : get the timeline from a user with twitter4j (英語)

2014年7月20日日曜日

Processing + twitter4j でタイムラインを取得&表示してみる - その1

気づいたら半年もブログを更新してませんでした。まあ、就活とか忙しかったからね・・・って自己完結したところで、今回もだらだらと独り言を書き留めていきたいと思います。

前回に引き続き、Processing + Twitter4j で遊んでいきますよ。作ってみるのは、Twitter のタイムラインを取得して画面に表示させるプログラムです。Java ではなく、Processing でこれを実装する解説がされた日本語のページって、意外と少ない。「つぶやく」方はけっこう充実してるのに。Processing そのものがJava に近くて、もはやコードをコピペすれば動くんじゃないかくらいの勢いなので、当然といえば当然かもしれないけど。なので今回は、そのニッチなところに踏み込んでいきます。

  • 準備

よく見るとTwitter4j のバージョンがかなり更新されてるので、以前に紹介したリンク先から持ってきたものではなく、今回は本家のTwitter4j のサイトからZip をダウンロードして使用します(これを書いてる今はVer.4.0.2)。jar ファイルを置く場所などは前と同じです。ソースコードであるpde ファイルがある場所にcode フォルダを作って、その中に入れるんでしたよね。忘れてしまった人はぐぐるなり、前々回の記事を参照してくださいね。

プログラムを新しく作る場合は、Twitter のDeveloper ページで改めてアプリの登録をし、いろんなkey を入手した方がいいと思います。

  • import と変数の宣言


import twitter4j.conf.*;
import twitter4j.*;
import twitter4j.auth.*;
import twitter4j.api.*;
import java.util.*;

String consumerKey    = "xxxxx";
String consumerSecret = "xxxxx";
String accessToken    = "xxxxx";
String accessSecret   = "xxxxx";

Twitter twitter;
List<Status> statuses = null;

はじめの部分です。前回と違うところがありますが、そんなに大したものではないです。まず、setup 関数の中で行っていたkey の入力を簡単にするため、ここで変数にしています。そして、取得したTL の内容を格納するためのリストを宣言し、null で初期化しています。

  • setup() 関数


void setup(){

  size(480, 320);
  background(0);

  ConfigurationBuilder cb = new ConfigurationBuilder();
  cb.setOAuthConsumerKey(consumerKey);
  cb.setOAuthConsumerSecret(consumerSecret);
  cb.setOAuthAccessToken(accessToken);
  cb.setOAuthAccessTokenSecret(accessSecret);

  TwitterFactory tf = new TwitterFactory(cb.build());
  twitter = tf.getInstance();
}

ウィンドウサイズと背景色を指定します。それ以下の部分には変更なしです。Twitter のアカウントにアクセスしていろんな操作をできるようにするため、key を読み込ませたりしているものと思われます(ぶっちゃけ、よく分かっていない)。

  • draw(), keyPressed() 関数


void draw(){

}

void keyPressed(){
  getTimeline();
}

たったこれだけ。draw 関数には何も書きません。ここは「毎フレーム実行される処理」を指定する部分だからです。1秒間に30回もTwitter に情報を取りに行くなんてメモリの無駄ですからね。なので、何かのキーを押したときだけgetTimeline() の処理を実行するようにしています。

  • ここまでのコード


import twitter4j.conf.*;
import twitter4j.*;
import twitter4j.auth.*;
import twitter4j.api.*;
import java.util.*;

String consumerKey    = "xxxxx";
String consumerSecret = "xxxxx";
String accessToken    = "xxxxx";
String accessSecret   = "xxxxx";

Twitter twitter;
List<Status> statuses = null;

void setup(){

  size(480, 320);
  background(0);

  ConfigurationBuilder cb = new ConfigurationBuilder();
  cb.setOAuthConsumerKey(consumerKey);
  cb.setOAuthConsumerSecret(consumerSecret);
  cb.setOAuthAccessToken(accessToken);
  cb.setOAuthAccessTokenSecret(accessSecret);

  TwitterFactory tf = new TwitterFactory(cb.build());
  twitter = tf.getInstance();
}

void draw(){

}

void keyPressed(){
  getTimeline();
}


void getTimeline(){

  /** 次回のエントリで作っていきます **/

}

getTimeline() が今回のプログラムで一番大事な部分になります。その詳しい内容とコードは、次回の記事で見ていくことにしましょう。遅くなりましたが、Processing のバージョンは2.2.1 です。参考にさせていただいたページは以下のとおりです。
  1. Processing2.0 とTwitter4Jで、Processing からTweet してみる

2013年12月14日土曜日

Twitter4j でProcessing からつぶやく - その2

季節と同じように、心も乾燥して冷たくなる時期ですね。(あれ、ボクだけ?)
... ということで、前回に続きProcessing からツイートするプログラムの作成です。今回で完成させてしまいましょう。

  • setup() 関数の完成

以下の内容をsetup 関数に追加してください。{ から } の間に入れるということです。

size(300, 350);
setLayout(null);
TB = loadImage("*****");
TB_ = loadImage("*****");

inputLine = new TextArea("type your tweet");
inputLine.setBounds(45, 45, 200, 140);
add(inputLine);

前半では、プログラムを起動させた時のウィンドウサイズを指定したり、ツイートボタンの画像を読み込んだりしています。***** の部分には、画像ファイルの名前を入れてください。後半には、テキストボックスの生成とサイズの指定、キーボードからの文字入力を受け付けるようにするおまじないを書きます。

  • draw() 関数

draw 関数はその名のとおり、どんな描写をするかを指定する部分です。以下のように記述します。

void draw(){
 background(0);
 image(TB, 60, 245);
 if(mouseX > 60 && mouseX < 220 && mouseY > 245 && mouseY < 302){
  image(TB_, 60, 245);
 }
}

background で背景の色を指定しています。if ではマウスの位置を判定して、ボタンの位置と重なったときに色を変えたボタンの画像に置き換えるようにしています。

  • tweet() 関数

実際につぶやく処理を行う部分です。以下のように記述します。

void tweet(){
 try{
  Status status = twitter.updateStatus(iLine);
  System.out.println(status.getText());
 }
 catch(TwitterException te){
  System.out.println("Error: " + te.getMessage());
 }
}

twitter.updateStatus() メソッドでツイートできます。そのあと、println() でツイートをコンソールにも表示させます。catch() の部分には、try() で指定した処理がうまく実行できなかった、例外時の処理を書きます。

  • mouseClicked() 関数

お待たせしました。最後にマウスをクリックした時のイベントハンドラを書いていきましょう。

void mouseClicked(){
 iLine = inputLine.getText();
 if(mouseX > 60 && mouseX < 220 && mouseY > 245 && mouseY < 302){
  tweet();
 }
}

キーボードから入力した内容をString 型の文字列に置き換えます。if() でクリックされた位置を判定し、ボタンの上であればtweet() 関数を呼び出して、コメントを投稿します。

  • すべてのコード

import twitter4j.conf.*;
import twitter4j.*;
import twitter4j.auth.*;
import twitter4j.api.*;
import java.util.*;

import java.awt.*;
import javax.swing.*;

PImage TB, TB_;
Twitter twitter;
TextArea inputLine;
String iLine;

void setup(){
 size(300, 350);
 setLayout(null);
 TB = loadImage("*****");
 TB_ = loadImage("*****");

 ConfigurationBuilder cb = new ConfigurationBuilder();
 cb.setOAuthConsumerKey("*****");
 cb.setOAuthConsumerSecret("*****");
 cb.setOAuthAccessToken("*****");
 cb.setOAuthAccessTokenSecret("*****");

 TwitterFactory tf = new TwitterFactory(cb.build());
 twitter = tf.getInstance();

 inputLine = new TextArea("type your tweet");
 inputLine.setBounds(45, 45, 200, 140);
 add(inputLine);
}

void draw(){
 background(0);
 image(TB, 60, 245);
 if(mouseX > 60 && mouseX < 220 && mouseY > 245 && mouseY < 302){
  image(TB_, 60, 245);
 }
}

void tweet(){
 try{
  Status status = twitter.updateStatus(iLine);
  System.out.println(status.getText());
 }
 catch(TwitterException te){
  System.out.println("Error: " + te.getMessage());
 }
}

void mouseClicked(){
 iLine = inputLine.getText();
 if(mouseX > 60 && mouseX < 220 && mouseY > 245 && mouseY < 302){
  tweet();
 }
}

一部、順番を入れ替えていますが、これでProcessing からつぶやくことができると思います。参考にさせていただいたページは下にあります。

  1. Codasign
  2. Hello API
  3. yoppa.org

2013年12月11日水曜日

Twitter4j でProcessing からつぶやく - その1


気がつけば12月。就活もスタートしましたが、ボクは意識が低いので今回もProcessing 遊びのログを書いていきます。非公式ライブラリであるTwitter4j を使ってProcessing からツイートしてみるプログラムを、今日から2回に分けて作っていきますよ。(記事を分割して投稿数を稼ぐという、ちょこざいな方法を会得したようだ。)

  • 準備



まずは準備。Twitter4j for Processing のページからライブラリをダウンロードします。そして展開したjar ファイルをsketchbook\プロジェクト名\code\ に移動しましょう。初期状態ではcode ディレクトリがないので、自分で作ってくださいね。


次にTwitterのDeveloperページで新規アプリの登録を行って、"Consumer key", "Consumer secret", "Access token", "Access token secret" を取得してください。SettingsタブにあるApplication Type では、Read and Write を選択しておきましょう。Application Details にあるWebsite はアプリを紹介するページのURLで、何でもOKです。ローカルで動かすだけならhttp://127.0.0.1/ と入力しましょう。


また今回は、それっぽい雰囲気を出すためにツイートボタンに画像ファイルを使用します。カーソルを合わせたときボタンの色が変わるように、2種類のものを作成してsketchbook\プロジェクト名\data\ に移動します。このdata ディレクトリも自分で作成します。GIMP などを使って、好きなボタンを作ってみましょう。

  • import と変数の宣言

ではいよいよ、実際にコードを書いていきましょう。はじめは以下のように書きます。

import twitter4j.conf.*;
import twitter4j.*;
import twitter4j.auth.*;
import twitter4j.api.*;
import java.util.*;

import java.awt.*;
import javax.swing.*;

これは「ライブラリを読み込んでね」という命令です。最後のjava.util パッケージは、今回は不要ですが一応加えておきます。awt, swing パッケージはつぶやきを入力するテキストボックスの生成に使います。

Twitter twitter;
String iLine;
TextArea inputLine;
PImage TB, TB_;

ほかにも宣言しなければいけません。iLine は入力した文字列を格納する変数、PImage はProcessing で画像ファイルを取り扱うときの型です。プログラミングがはじめてという人も、すぐに理解する必要はありません。そのまま書いてくださいね。

  • setup 関数

変数の宣言をしたあとに、以下の内容を書いていきます。

void setup(){
 ConfigurationBuilder cb = new ConfigurationBuilder();


 cb.setOAuthConsumerKey("*****");
 cb.setOAuthConsumerSecret("*****");
 cb.setOAuthAccessToken("*****");
 cb.setOAuthAccessTokenSecret("*****");


 TwitterFactory tr = new TwitterFactory(cd.build());
 twitter = tf.getInstance();
}

{ から } までで、1つのまとまりになります。これはプログラムを動かすとき、はじめに一度だけ行われる初期化の作業です。ここにおまじないを書いていきます。「このプログラムからのツイートを許可します」という権限を与える作業だと思ってください。***** の部分にはDeveloperページで取得したキーを入力していきます。

ここまでの作業をまとめると、以下のようになります。

import twitter4j.conf.*;
import twitter4j.*;
import twitter4j.auth.*;
import twitter4j.api.*;
import java.util.*;

import java.awt.*;
import javax.swing.*;


Twitter twitter;
String iLine;
TextArea inputLine;
PImage TB, TB_;


void setup(){
 ConfigurationBuilder cb = new ConfigurationBuilder();


 cb.setOAuthConsumerKey("*****");
 cb.setOAuthConsumerSecret("*****");
 cb.setOAuthAccessToken("*****");
 cb.setOAuthAccessTokenSecret("*****");


 TwitterFactory tf = new TwitterFactory(cd.build());
 twitter = tf.getInstance();
}

これだけではまだ動かないので、次回からちゃんと肉付けをしていきます。参考にさせていただいたページは下にあります。ではでは。
  1. Codasign
  2. Hello API