【片手操作】写真をボタン操作だけで少しずつ削って自動で微調整してくれるiPhoneショートカットレシピ

// ========= 画像 =========
const img = args.images[0]
const base64 = Data.fromPNG(img).toBase64String()

// ★ 自分のショートカット名
const shortcutName = "ImageCropFlow"

// ========= HTML =========
const html = `
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
body { margin:0; text-align:center; font-family:-apple-system; }

.notice {
  background:#ffecec;
  color:#c00;
  padding:8px;
  font-size:14px;
}

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

button {
  width:90%;
  margin:3px;
  padding:8px;
  font-size:14px;
}

input {
  width:60px;
  font-size:14px;
}

.notice {
  padding:6px;
  font-size:13px;
}
body {
  touch-action: manipulation;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
</style>
</head>

<body>

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

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

<div>
削り値(px): <input id="stepInput" value="20">
</div>

<div>
<button onclick="cutDir('right')">➡ 右</button>
<button onclick="cutDir('left')">⏪ 左</button>
<button onclick="cutDir('top')">🔼 上</button>
<button onclick="cutDir('bottom')">🔽 下</button>

<button onclick="undo()">↩ 戻す</button>
<button onclick="reset()">🔙 リセット</button>

<button onclick="save()">💾 保存</button>
<button onclick="finish()">🛑 終了</button>
</div>

<script>
let original = new Image()
original.src = document.getElementById("img").src

let cut = {l:0,t:0,r:0,b:0}
let history = []

original.onload = () => draw()

function getStep() {
  let val = parseInt(document.getElementById("stepInput").value)
  if (isNaN(val) || val <= 0) return 20
  return val
}

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

  const w = original.width
  const h = original.height

  const newW = w - cut.l - cut.r
  const newH = h - cut.t - cut.b

  if (newW <= 0 || newH <= 0) return

  canvas.width = newW
  canvas.height = newH

  ctx.drawImage(original, -cut.l, -cut.t)

  document.getElementById("img").src = canvas.toDataURL()
}

function saveHistory() {
  history.push({...cut})
}

function undo() {
  if (history.length === 0) return
  cut = history.pop()
  draw()
}

function reset() {
  cut = {l:0,t:0,r:0,b:0}
  draw()
}

function cutDir(dir) {
  saveHistory()
  const step = getStep()

  if (dir==="left") cut.l += step
  if (dir==="right") cut.r += step
  if (dir==="top") cut.t += step
  if (dir==="bottom") cut.b += step

  draw()
}

function save() {
  window.result = document.getElementById("img").src
}

function finish() {
  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.3, 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
}

// ========= 保存 =========
Pasteboard.copyString(result)

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

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

Script.complete()

// ★ 自分のショートカット名
const shortcutName = "ImageCropFlow"