カメラ & ギャラリー

端末のカメラまたはフォトギャラリーから画像を選択してウェブページに渡します。

概要

カメラで撮影するか、ギャラリーから画像を選択すると、SDK が結果を JS コールバックに渡します。カメラ撮影画像の EXIF 方向情報は自動的に補正されます。

機能	Android	iOS
カメラ撮影	✓（Android 7.0+）	✓
ギャラリー選択	✓（Android 7.0+）	✓

対応プラン: Basic 以上

事前準備

Android

AndroidManifest.xml ではカメラ権限がコメントアウトされた状態で配布されます。カメラ撮影を使用するにはコメントを解除してください。（ギャラリー選択はシステムのドキュメント選択ツールを使用するため、追加の権限は不要です。）

<uses-permission android:name="android.permission.CAMERA" />

iOS

Info.plist に次の権限の説明を追加する必要があります。

<key>NSCameraUsageDescription</key>
<string>写真撮影のためにカメラへアクセスします。</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>画像選択のためにフォトライブラリへアクセスします。</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>撮影した写真を保存するためにフォトライブラリへアクセスします。</string>

ファイル選択のリクエスト

unveilyBridge.openFileSelector(cb) はコアメソッドです。cb は結果を受け取るコールバック関数名の文字列です。省略するとデフォルトの 'onFileResult' が使用されます。

// カメラ / ギャラリー選択ダイアログを開く
window.unveilyBridge.openFileSelector("onFileResult");

第 2 引数に画像処理オプションを JSON 文字列として渡せます。

window.unveilyBridge.openFileSelector("onFileResult", JSON.stringify({
  maxDimension: 1600,     // 長辺の最大ピクセル（超過時はアスペクト比を保って縮小）
  quality: 0.8,           // JPEG 圧縮品質（0–1）
  maxBytes: 2000000       // 最大ファイルサイズ（バイト）
}));

オプション	型	説明
`maxDimension`	`number`	長辺の最大ピクセル。超過時はアスペクト比を保って縮小
`quality`	`number`	JPEG 圧縮品質（0–1）
`maxBytes`	`number`	生成される画像の最大バイトサイズ

unveilyBridge は WebView に自動的に注入されます。初期化不要で即座に使用できます。

コールバックの処理

選択が完了すると、SDK が位置引数 (base64OrUri, isSuccess) の形式でコールバック関数を呼び出します。第 1 引数は画像データ（Android では Base64 文字列）、第 2 引数は成功可否です。

function onFileResult(base64OrUri, isSuccess) {
  if (!isSuccess) {
    console.log("選択失敗またはキャンセル:", base64OrUri);
    return;
  }

  // すでに URI / データ URI ならそのまま、純粋な Base64 なら data URI で包んで表示
  const src = /^(https?:|file:|content:|data:)/.test(base64OrUri)
    ? base64OrUri
    : `data:image/jpeg;base64,${base64OrUri}`;

  document.getElementById("preview").src = src;
}

コールバックのパラメーター

パラメーター	型	説明
`base64OrUri`	`string`	成功時は画像データ（Android では純粋な Base64）、失敗時はエラーメッセージ
`isSuccess`	`boolean`	選択が成功したかどうか

カメラで撮影した画像の EXIF 方向情報は SDK が自動的に補正します。縦向きで撮影した画像も、90 度回転することなく正しい向きで渡されます。

エラー処理

isSuccess === false のとき、第 1 引数には状況に応じたメッセージが含まれます。

状況	`isSuccess`
ユーザーがキャンセルした	`false`
カメラ/ギャラリーの権限が拒否された	`false`
画像の処理に失敗した	`false`

サーバーへの画像アップロード

Android でコールバックが受け取る値は、data URI プレフィックスのない純粋な Base64 文字列です。サーバー側で前処理なしにそのままデコードできます。

function onFileResult(base64OrUri, isSuccess) {
  if (!isSuccess) return;
  fetch('/api/upload', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ base64: base64OrUri })
  });
}

const sharp = require('sharp');

app.post('/api/upload', async (req, res) => {
  const { base64 } = req.body;
  const buffer = Buffer.from(base64, 'base64');

  const filename = `${Date.now()}.jpg`;
  await sharp(buffer).resize(800).jpeg({ quality: 85 }).toFile(`uploads/${filename}`);

  res.json({ url: `/uploads/${filename}` });
});

[HttpPost("upload")]
public async Task<IActionResult> Upload([FromBody] UploadRequest request)
{
    var bytes = Convert.FromBase64String(request.Base64);
    var filename = $"{Guid.NewGuid()}.jpg";
    var path = Path.Combine("wwwroot/uploads", filename);

    await System.IO.File.WriteAllBytesAsync(path, bytes);
    return Ok(new { url = $"/uploads/{filename}" });
}

@PostMapping("/api/upload")
public ResponseEntity<?> upload(@RequestBody UploadRequest request) {
    byte[] bytes = Base64.getDecoder().decode(request.getBase64());

    String filename = UUID.randomUUID() + ".jpg";
    Path path = Paths.get("uploads/" + filename);
    Files.write(path, bytes);

    return ResponseEntity.ok(Map.of("url", "/uploads/" + filename));
}

<?php
$data = json_decode(file_get_contents('php://input'), true);
$imageData = base64_decode($data['base64']);

$filename = uniqid() . '.jpg';
file_put_contents('uploads/' . $filename, $imageData);

echo json_encode(['url' => '/uploads/' . $filename]);

<%
Dim base64Data, filename
base64Data = Request.Form("base64")

' Base64 デコード（MSXML を使用）
Dim xmlObj
Set xmlObj = CreateObject("MSXML2.DOMDocument")
xmlObj.LoadXML "<root>" & base64Data & "</root>"
Dim base64Node
Set base64Node = xmlObj.selectSingleNode("root")

filename = "uploads/" & Replace(CStr(Now), ":", "-") & ".jpg"
' ファイルの保存処理（Scripting.FileSystemObject などを利用）

Response.ContentType = "application/json"
Response.Write "{""url"": ""/uploads/" & filename & """}"
%>

カメラ & ギャラリー

On this page