LoginSignup
9
12

More than 5 years have passed since last update.

書籍検索 Slash Commandsを作る

Last updated at Posted at 2015-10-16

はじめに

SlackのIntegrateまわりを使う演習としてまとめています。
Slach CommandsとWebHooksの連携まわりは
楽天ブックス書籍検索APIと連携した簡易な構成です。

環境

  • 楽天API
  • Slack
    • Slash Commands
    • Incoming WebHooks
  • 外部APIを呼ぶためのWebサーバ

手順

楽天APIでのアプリID発行

デベロッパー登録後にアプリIDを発行します

スクリーンショット 2015-10-16 8.56.30.png

APIテストフォーム:楽天ブックス書籍検索API
https://webservice.rakuten.co.jp/explorer/api/BooksBook/Search/

Slack - Slash Commands

スクリーンショット-2015-10-16-9.31.35.gif

Slack - Incoming WebHooks

スクリーンショット 2015-10-16 7.53.20.png

スクリーンショット 2015-10-16 7.53.44.png

設定したアイコン画像はこちらから使わせてもらいました
http://dojin-shi.info/?p=2966

Webサーバ上にスクリプトを置く

  • SlackのSlashCommand経由で投げられたリクエストを受ける
    • Slash Commandsから受けたtokenでのフィルタリング
    • 設定されたパラメータの設定有無
  • リクエストに含まれるタイトル名を条件に楽天APIから書籍データを取得する
    • 取得データの数の制限など
  • JSONで受け取った内容から必要なパラメータ抽出
  • SlackのWebHookへ投げる
    • SlackのPayloadのフォーマットに整形
    • POSTでリクエストを送信

phpで書いてみました。

index.php
<?php

require_once('settings.php');

if ($_POST['token'] != $TOKEN_SLACK_COMMAND){
    echo 'ERROR';
    return;
}

 /**
  * @see https://webservice.rakuten.co.jp/api/booksbooksearch/
  */

$data_post_rakuten = array();
$data_post_rakuten['format']='json';
$data_post_rakuten['booksGenreId']='001';
$data_post_rakuten['applicationId']= $APPLICATIONID;
$data_post_rakuten['sort']='-releaseDate';
$data_post_rakuten['size']=9; //comic only
$data_post_rakuten['hits']=10;

if ($_POST['text'] != ""){
    $data_post_rakuten['title'] = $_POST['text'];
}

$response = post_data($URL_RAKUTEN_BOOKSEARCH, $data_post_rakuten);
$result = json_decode($response,true);

//書籍data
$attachments = array();
for($itm = 0; $itm < count($result['Items']); $itm++){
    $info =  $result["Items"][$itm]["Item"];

    $attachment = array();
    $attachment["title"] = $info["title"];
    $attachment["title_link"] = $info["itemUrl"];

    $attachment["thumb_url"] = $info["largeImageUrl"];

    $attachment["fields"][0]["title"]= "発売日";
    $attachment["fields"][0]["value"]= $info["salesDate"];
    $attachment["fields"][0]["short"]= "true";

    $attachment["fields"][1]["title"]= "作者";
    $attachment["fields"][1]["value"]= $info["author"];
    $attachment["fields"][1]["short"]= "true";

    //iconだけの出力できなかった
    //$attachment["author_name"] = "楽天Webサービス";
    $attachment["author_icon"] = 'http://webservice.rakuten.co.jp/img/credit/200709/credit_7052.gif';

    $attachments[$itm] = $attachment;
}

//postdata全体
$itemInfo = array();
$itemInfo['attachments'] = $attachments;
$itemInfo['text']=  "検索:" .$_POST['text'];
$encode = json_encode($itemInfo);

$send_data = array();
$send_data["payload"]= $encode;

$response = post_data($URL_SLACK_WEBHOOK, $send_data);

echo $response;


exit;

 /**
  * @param string $url
  * @param mixed[] $data
  *
  * @return response data
  */

function post_data($url, $data){
    $postString = http_build_query($data, '', '&');

    $ch = curl_init($url);

    curl_setopt($ch, CURLOPT_POST, 1);
    curl_setopt($ch, CURLOPT_POSTFIELDS, $postString);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

    $response = curl_exec($ch);

    curl_close($ch);

    return $response;
}

?>
settings.php

<?php
$APPLICATIONID ='';
$URL_RAKUTEN_BOOKSEARCH = 'https://app.rakuten.co.jp/services/api/BooksBook/Search/20130522';
$URL_SLACK_WEBHOOK = 'https://hooks.slack.com/services/XXXXXXX/XXXXXX/XXXXXXXXXXX';
$TOKEN_SLACK_COMMAND= 'XXXXXXXXXXXXXXXXXXXXXXXXX'

?>

slackへ出力

テキスト

画像を出すつもりが・・・
yome.gif

リンクのみになってしまっているので、あとで調整します。検索結果が一件だけならでましたが・・・。

WebHookに返すpayloadにattachmentsを追加すると複数件ヒットした場合も画像を出すことができます。

attachmentsを使ってレイアウト

例1:image_url

スクリーンショット 2015-10-17 8.37.42.png

例2:thumb_url

スクリーンショット 2015-10-17 8.42.09.png

例3:fieldsとthumb_url

スクリーンショット 2015-10-17 8.48.25.png

参考

SENDING POST DATA FROM PHP
http://www.madebymagnitude.com/blog/sending-post-data-from-php/

SlackのIncoming Webhooksのメッセージをカスタマイズ
http://qiita.com/m-nakada/items/643909ca14f306a74999

json_decode()先輩、引数渡せば連想配列になるんすね
http://d.hatena.ne.jp/ariteku/20120415/p2

Formatting
https://api.slack.com/docs/formatting

クレジット表示方法と注意
https://webservice.rakuten.co.jp/guide/credit#usage

さいごに

タイトルでの検索が固定でよければ、直接楽天APIを叩くようSlashCommandに書くのが簡楽です。
自前のWebサーバを使う今回のような場合は

  • あまり使わない言語レベルでのはまり(phpは4以来かもとか)
  • サーバの設定(SSLを使いたいとか)
  • コード上の調整(tokenでリクエストの制限など、なんか汚い)

これらが実装のネックになりました。
おもったよりは、お手軽でした。

9
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
12