SPIRALは、主にエンタープライズ向けのローコードプラットフォームになります。ローコードプラットフォームなので、プログラミング知識がなくともWebアプリケーションを開発できるのが魅力です。
SPIRALでは、自社のシステムや外部システムと連携する場合を想定して、APIが公開されています。今回は、そのAPIを利用して、画像をアップロードする流れを解説します。
注意点
SPIRALでは、SPIRAL内部で動作するアカウント内APIと、外部APIの2種類があります。アカウント内APIでは、簡単に操作できるPHP SDKがありますが、外部公開はされていません。そのため、今回はPHPの file_get_contents などを使ってAPI操作をしています。
準備
APIトークンの取得
SPIRALの管理画面で、APIトークンを作成します。ダッシュボードの開発メニュー内のAPIトークンにて、新しいAPIトークンを作成します。
作成後に入手できるAPIトークンと、APIトークンシークレットをメモしておきます。
データベースの作成
今回は、作成したのは通常DBになります。SPIRALでは、この他8種類のデータベースが利用できます。
データベースの名前は testdata としました。作成したフィールドは以下の通りです。
| フィールド名 | サンプル値 | 型 | 差し替えキーワード |
|---|---|---|---|
| 名前 | テキスト30文字前後 | テキストフィールド(64 bytes) | name |
| キー | 100 | 数字・記号・アルファベット(6 bytes) | itemKey |
| 画像 | 画像(100KB) | image |
なお、画像は最初に特殊フィールドとして作成します。
作成後、そのフィールドを追加します。
HTMLフォームの作成
画像をアップロードするためのHTMLフォームを作成します。以下のようなシンプルなフォームを用意します。
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>画像アップロードデモ</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="file" accept="image/*" required>
<input type="submit" value="アップロード">
</form>
</body>
</html>
コードについて
今回はPHPで作成しています。ファイル名は upload.php とします。
APIトークンの保存
APIトークンとシークレット、ログイン用のIDとパスワードは、環境変数に保存します。以下のように .env ファイルを作成し、トークンを保存します。
API_TOKEN=your_api_token
API_TOKEN_SECRET=your_api_token_secret
.env の読み込みは vlucas/phpdotenv を使っています。インストールは composer で行います。
composer require vlucas/phpdotenv
次に、PHPのコード内で .env を読み込みます。
require_once __DIR__ . "/vendor/autoload.php";
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__);
$dotenv->load();
APIリクエストURLの取得
APIでリクエストするURLは、以下の手順で取得します。
// スパイラルの操作画面で発行したトークンを設定します。
$TOKEN = $_ENV['API_TOKEN'];
$SECRET = $_ENV['API_TOKEN_SECRET'];
// -----------------------------------------------------------------------------
// ロケータ
// -----------------------------------------------------------------------------
// ロケータのURL (変更の必要はありません)
$APIURL = "https://www.pi-pe.co.jp/api/locator";
// API用のHTTPヘッダ
$api_headers = array(
"X-SPIRAL-API: locator/apiserver/request",
"Content-Type: application/json; charset=UTF-8",
);
// リクエストデータを作成
$parameters = array();
$parameters["spiral_api_token"] = $TOKEN; //トークン
// JSON形式にエンコードします。
$json = json_encode($parameters);
// POSTで送信します。
$stream = stream_context_create(
array('http' => array(
'method' => 'POST',
'protocol_version' => '1.0',
'header' => $api_headers,
'content' => $json
))
);
// レスポンスデータ読み込み
$response = file_get_contents($APIURL, false, $stream);
$response_json = json_decode($response, true);
// サービス用のURL
$APIURL = $response_json['location'];
この時のレスポンスは以下のようになっています。詳細はSPIRAL ver.1 API リファレンスにて確認してください。
{
"code": 0,
"message": "OK",
"location": "https://（APIサーバ）/api/service",
"default_version": 2,
"supported_version": [1, 2],
"use_client_crt": "f"
}
location にAPIサーバのURLが入っています。
画像のアップロード
画像のアップロード処理です。 database/insert/request を指定します。
// API用のHTTPヘッダ
$api_headers = array(
"X-SPIRAL-API: database/insert/request",
"Content-Type: application/json; charset=UTF-8",
);
そして、リクエストデータを作成します。ここでは、画像をアップロードするために、base64_encode を使って画像ファイルをエンコードしています。
// 送信するJSONデータを作成
$parameters = array();
$parameters["spiral_api_token"] = $TOKEN; //トークン
$parameters["db_title"] = "testdata"; //DBのタイトル
$parameters["passkey"] = time(); //エポック秒
// ファイルをBase64エンコードします
$encoded_file = base64_encode($_FILES['file']['tmp_name']);
$file_name = $_FILES['file']['name'];
$file_content_type = $_FILES['file']['type'];
// 主キーをランダムに生成します
$itemKey = bin2hex(random_bytes(5));
// データ作成
$parameters["data"] = array(
array("name" => "itemKey", "value" => $itemKey), //主キー
array("name" => "name", "value" => "Sample Item"), //文字列型フィールド
array("name" => "image", "value" => $encoded_file, "attribute" => array("img_name" => $file_name, "img_content_type" => $file_content_type)), //画像型フィールド
);
// 署名を付けます
$key = $parameters["spiral_api_token"] ."&" . $parameters["passkey"];
$parameters["signature"] = hash_hmac('sha1', $key, $SECRET, false);
// 送信用のJSONデータを作成します。
$json = json_encode($parameters);
var_dump($json);
// curlライブラリを使って送信します。
$curl = curl_init($APIURL);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_POST , true);
curl_setopt($curl, CURLOPT_POSTFIELDS, $json);
curl_setopt($curl, CURLOPT_HTTPHEADER, $api_headers);
curl_exec($curl);
if (curl_errno($curl)) echo curl_error($curl);
$response = curl_multi_getcontent($curl);
curl_close($curl);
$resdata = json_decode($response, true);
if ($resdata['code'] != "0") {
echo "Error: " . $resdata['message'] . "\n";
} else {
echo "Success: Data uploaded successfully.\n";
echo "Response: " . print_r($resdata, true) . "\n";
}
?>
これでファイルアップロードが完了します。
動作確認
ブラウザで index.html を開き、画像を選択してアップロードボタンを押します。アップロードが成功すると、以下のようなメッセージが表示されます。
Success: Data uploaded successfully.
そして、SPIRALの管理画面でデータベースを確認し、アップロードした画像が表示されていれば成功です。
まとめ
今回はSPIRALのAPIを利用して、画像アップロードを行う流れを紹介しました。画像アップロードはSPIRAL外部からの呼び出しも、内部での実行も可能です。ぜひシステム連携に役立ててください。
1分あたりのAPIのリクエスト数は、契約によって上限があります。ご注意ください（詳細はAPIのリクエスト数制限を知りたい SPIRAL ver.1 サポートサイトにて）。