Tap Warp (タップワープ)は写真アップロードに特化したアプリです。Tap Warpは特定のウェブサイトに限定されず、どのサイトでも簡単に導入できます。Tap Warpを使えば、サイト毎にアップロード用のアプリを開発する手間は無くなります。サーバー側にデータ受付のAPIのみを用意するだけになります。開発のコストを大幅に削減できます。
Tap Warpの簡単な使い方については、デモンストレーションサイトからもご覧いただけます。
以下は典型的な流れを想定して、Tap Warpウェブサイトに導入する方法を説明してみます。
1. 設定を決めてJSONコードを作る
決めておきたい項目はいくつかあります。
写真の送信先(targetUrl)：HTTP/HTTPSのPOSTメソッドで写真のデータを受け取ります。詳細は後ほどで。
送信先の表示名(realm)：この表示名はユーザーが写真のアップロード先を取得する場合に、ユーザーに目視で確認される物です。短くて分かりやすい物を考えましょう。表示名を指定しなければ、送信先のホスト名は代用されます。
認証キー(authKey)：送信者はあなた(サイトの管理者)から提供された情報にしたがって写真を送っていることを確保するため、認証コードが必須です。これは半角英数で構成される64～128文字の乱数です。
上記のtargetUrlとauthKeyは必須項目です。
簡単ながら、下記のJSONコードに纏めます。
|
1 2 3 4 5 |
{ "authKey":"9378aed038a4e9b9ddda909ce1780b70734e88a1ba14f0c6dbfdcef76e423bb8", "realm":"Tap Warp Demo", "targetUrl":"http:\/\/twdemo.qaon.ofc\/demo001\/imageupload.php" } |
このJSONコードはターゲットコード(Target Code)と呼ばれます。
2. QRコードを作る
上記のJSONをQRコードに変換する。
お好きなツールを使いましょう。PHPの場合はphpqrcodeは簡単に使えます。
|
1 |
@QRcode::png(json_encode($target_Code_JSON_Text)); |
できたQRコードの一例は右のような物です。
このQRコードは送信先の全情報を保有しています。これをあなたのサイトに掲載してユーザーにスキャンしてもらいます。
3. 写真の受け取りAPIを整備する
Tap Warpが写真をあなたのサーバーに送信する場合は、HTTPのPOSTメソッドで送信してきます。リクエストのボディはJSONテキストです。詳細の仕様はAPIの説明書に記載されています。
Tap Warpからのデータの受信先として、適切なヘッダーを返す必要があります。
まずは、サーバーがHTTPのOPTIONSメソッドを処理するようにしましょう。これに関しては、各サーバーの設定ガイド等をググってみましょう。
OPTIONSメソッドとPOSTメソッドのリクエストに対して、下記のようにヘッダーを返してください。
|
1 2 3 4 |
header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Headers: Content-Type, Content-Length, Content-Transfer-Encoding'); header('Access-Control-Allow-Methods: POST'); header('Access-Control-Max-Age: 864000'); |
Access-Control-Allow-*ヘッダーを返さないと正常に受信できないので、ご注意ください。
POSTされてきたデータはJSONフォーマットのテキストなので、これを解析してデータの中身を取得しましょう。
authKeyを最初に確認すべきです。データは適正のユーザーから送信されてきたかをチェックします。このauthKeyはターゲットコードでユーザーに渡された物です。サーバー側のデータベースに照合するなりにして、不正ユーザーからのリクエスト排除します。
写真のフォーマットはformatプロパティに記載されます。「image/jpeg」になります。
写真のデータはdataプロパティにBase64エンコードされた状態で渡されます。
纏めて、簡単な受信APIは下記のコードを有します。ご参考ください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
header('Access-Control-Allow-Origin: *'); header('Access-Control-Allow-Headers: Content-Type, Content-Length, Content-Transfer-Encoding'); header('Access-Control-Allow-Methods: POST'); header('Access-Control-Max-Age: 864000'); if ($_SERVER['REQUEST_METHOD']!='POST') return; $content=file_get_contents('php://input'); $req=json_decode($content); if (!preg_match('%^[0-9A-Za-z]{64,128}$%',$req->authKey) || !validatedByDB($req->authKey)) { /* 不正アクセス */ echo '{result:"NG",message:"Invalid User"}'; die; } if ($req->format!='image/jpeg') { /* 画像フォーマットエラー */ echo '{result:"NG",message:"Invalid Image Format"}'; die; } file_put_contents($imagefilepath,base64_decode($req->data)); echo '{result:"OK",message:"Thank you!"}'; |
4. 纏め
「Tap Warp」は写真のアップロードを経常に必要としするウェブサイトにとって非常に有用なアプリです。ウェブサイトを製作する度にアップロード用のアプリを製作する手間とコストを省き、開発周期を短縮して、自社提案の魅力を向上させることが期待できます。ぜひ、導入の方をご検討ください。