【片手操作】写真をタップ操作で範囲指定して切り取るiPhoneショートカットレシピ

// ========= 設定 =========
const shortcutName = "ImageTap"

// ========= 画像 =========
let img = args.images && args.images.length ? args.images[0] : null

if (!img) {
  Script.complete()
  return
}

const base64 = Data.fromPNG(img).toBase64String()

// ========= HTML =========
const html = `
<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin:0;
  font-family:-apple-system;
  touch-action:none;
  overflow:auto;
}

.notice {
  background:#ffecec;
  color:#c00;
  padding:6px;
  font-size:13px;
  text-align:center;
}

img {
  width:100%;
  max-height:70vh;
  object-fit:contain;
}

.button-row {
  display:flex;
  gap:6px;
  padding:6px;
}

button {
  flex:1;
  height:40px;
  font-size:14px;
}
</style>
</head>

<body>

<div class="notice">
⚠ closeは使わないでください（下のボタンで終了）
</div>

<img id="img" src="data:image/png;base64,${base64}">

<div style="padding:6px;text-align:center;font-size:14px">
タップ①：開始位置 → タップ②：終了位置
</div>

<div class="button-row">
<button onclick="save()">保存</button>
<button onclick="ocr()">文字起こし</button>
<button onclick="cancel()">終了</button>
</div>

<script>
let points = []

const imgEl = document.getElementById("img")

imgEl.addEventListener("click", function(e){

  const rect = imgEl.getBoundingClientRect()

  const x = (e.clientX - rect.left) * (imgEl.naturalWidth / rect.width)
  const y = (e.clientY - rect.top) * (imgEl.naturalHeight / rect.height)

  points.push({x,y})

  if(points.length > 2) points = [points[1]]

})

function crop(addMargin=false){
  if(points.length < 2) return null

  const p1 = points[0]
  const p2 = points[1]

  let x = Math.min(p1.x, p2.x)
  let y = Math.min(p1.y, p2.y)
  let w = Math.abs(p1.x - p2.x)
  let h = Math.abs(p1.y - p2.y)

  if(addMargin){
    const margin = 20
    x -= margin
    y -= margin
    w += margin * 2
    h += margin * 2

    if(x < 0) x = 0
    if(y < 0) y = 0
  }

  const canvas = document.createElement("canvas")
  const ctx = canvas.getContext("2d")

  canvas.width = w
  canvas.height = h

  ctx.drawImage(imgEl, x, y, w, h, 0, 0, w, h)

  return canvas.toDataURL()
}

function save(){
  const data = crop(false)
  if(data){
    window.result = JSON.stringify({type:"save",data:data})
  }
}

function ocr(){
  const data = crop(true)
  if(data){
    window.result = JSON.stringify({type:"ocr",data:data})
  }
}

function cancel(){
  window.result = "NO_SAVE"
}
</script>

</body>
</html>
`

// ========= WebView =========
let wv = new WebView()
await wv.loadHTML(html)
wv.present(true)

// ========= 結果待ち =========
let result = null

while (true) {
  await new Promise(resolve => Timer.schedule(0.2, false, resolve))

  try {
    result = await wv.evaluateJavaScript("window.result", false)
  } catch(e) {
    break
  }

  if (result) break
}

// ========= 分岐 =========
if (result === "NO_SAVE") {

  Pasteboard.copyString("NO_SAVE")

  try { wv.dismiss() } catch(e) {}

  Safari.open(
    "shortcuts://run-shortcut?name=" + encodeURIComponent(shortcutName)
  )

  Script.complete()
  return
}

if (!result) {
  try { wv.dismiss() } catch(e) {}
  Script.complete()
  return
}

// ========= JSONそのまま渡す =========
Pasteboard.copyString(result)

try { wv.dismiss() } catch(e) {}

Safari.open(
  "shortcuts://run-shortcut?name=" + encodeURIComponent(shortcutName)
)

Script.complete()

// ========= 設定 =========
const shortcutName = "ImageTap"