iPhoneから図書カードを作る

マロ。

子どもが本を読めるようになったのでより楽しんでもらおうと何かできないかなと考えていました。本を読んだ記録を残したいとは思ったものの、デジタルでは中々実感が湧きづらく、読書ノートは続かないかなと思ったので、図書カードを作ることにしました。

本を読み始める時にカードを作って渡してあげることで、本を読んでいる最中はしおり代わりに、読み終わったらちょっとした感想を書いてストックできるカードです。

カードをタイミングよく渡してあげたいので、いかに簡単に図書カードを作れるようにするかを試行錯誤してました。ふとiPhoneにはショートカットというアプリがあるからこれを使えばなんとかなるのではとチマチマ作り始め、途中何度か挫折しながらも何とか動く形になりました。

Amazonで本を検索した後に作成したショートカットを起動すると図書カードが画像として出来上がりますのであとはプリントするだけ。AirPrint対応のプリンタならL版の図書カードが出来上がります。

【ショートカットの作り方】

ショートカットの全体像はスクリーンショットの通りです。

1.新規ショートカットを作成して、右上の青丸（3点リーダー）をタップ。共有シートに表示をオンにして、共有タイプをSafariのWebページにします。

2.青+ボタンをタップして、Webを選択。Webページに対してJavaScriptを実行を選びます。スクリプトには後で示すものを入力します。

3.同様に今度は書類からテキストを選択します。テキストには後で示すものを入力します。
"JavaScriptの結果"はマジック変数を選択して設定します。

4.同じく書類からHTMLからリッチテキストを作成を選択。その次にPDFを作成を選択します。

5.次はメディアからイメージを変換を選択して、メタデータの保持のチェックを外します。

6.同じくメディアからイメージをトリミングを選択し、トリミングは、左上、幅　2455、高さ　1720に設定します。

7.同じくメディアから写真アルバムに保存を選択、次に写真からアルバム"最新の項目"を表示を選択します。

8.スクリプティングから待機を選択。待機時間を2秒程度にしておいて、最後に写真から最新の写真を表示を選択します。

順番に作っていくと以下のスクリーンショットのようになります。

【使い方】

SafariでAmazonにアクセスして本を検索して該当の本を表示した後に、下の共有ボタンから今回作成したショートカットを選ぶとショートカットが起動して図書カードが写真として表示されます。その後AirPrintでプリントするとL版のカードが出来上がります。

もっとこうした方がいいとかあるかもしれませんが、そこそこ使えるようになったので公開します。

画像1

画像2

画像3

画像4

ショートカットの入力に対してJavaScript実行の中身はこちら

var result = []; 
var imagecontainer = document.getElementById("imageBlockContainer");
if (!imagecontainer) var imagecontainer =document.getElementById("ebooksImageBlockContainer");
if (!imagecontainer) var imagecontainer =document.getElementById("image-block");
var image = imagecontainer.getElementsByTagName("img")[0];
var imageurl = image.getAttribute("src");
result=imageurl;
completion(result);

テキストの中身はこちら。"JavaScriptの結果"はマジック変数で設定。

<!DOCTYPE html>
<html lang="ja">
<head>
<title>BookCard</title>
<style type="text/css">
.note8{ width:20em; 
height:250px; 
padding: 0.3em 1em 2em 1em; float:left;
 }
.aimg{width:350px;}
 .bimg{ float:left; width:100%;} 
.sen8{
background-color: #fff;
   background-image:   linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 97.5%, #646464 100%); 
  background-size: 8px 100%,100% 4em;   
line-height: 4em;   
padding: 2em 1em 0.2em 1em;
 }
</style>
</head>
<body>
<div>
<div class="aimg">
<img class="bimg" src="JavaScriptの結果">
</div>
<div class="note8">
<div class="sen8">
<br><br><br><br><br><br><br>
</div>
</div>
</div>
</body>
</html>

出来上がりの図書カードはこんな感じ

画像5


この記事が気に入ったらサポートをしてみませんか？