前提
この記事はペパボアドベントカレンダーの9日目の記事です。Gitについて何か書くと宣言していましたが、個人的に面白かったネタが降ってきたので急遽変更して、iOSのショートカットAppを使ってみた記事を書くことにしました。
ショートカットAppって？
iOS13から標準搭載になったアプリです。iOSの挙動をある程度自動化できるスクリプトを組めます。今回はこれを使ってWebページのスクショを取って写真に保存する、ということをやっていきたいと思います。
ショートカットAppの概要
ビジュアルな感じでスクリプトを組めるアプリです。
アクションと呼ばれるパーツを組み合わせていって、やりたいことを実現します。
基本的にアクションには入力と出力があり、入力をアクションによって変化させ出力にし、その出力を他のアクションの入力に渡すことで更に変化をさせ、といった感じで普通なら何手順もかかる作業を自動化していきます。
注意するべきところは出力されたファイル形式と入力として受け付けているファイル形式が一致しているかどうかです。
そのアクションがどんな入力を受け付けていてどんな出力を出すのかはインフォメーションのアイコンをタップすれば表示されるので、それで確かめましょう。
いろいろできそう
また、ファイル形式は結構多彩なものがあって、画像や動画のほか、json（辞書と呼ばれているのがそれです）があったり、ファイルのBase64エンコードがあったりします。更にWeb->WebリクエストというカテゴリにURLの内容を取得するというアクションがあるのですが、GET以外（POSTとかPUTとか）が扱えたりヘッダがいじれたりします。
そして、それらを効率よく扱うために、スクリプティングというカテゴリの中には変数もあります。
あとは、わかるな？
まぁこの辺りつつくと面白いんだけど適当な題材がわからなかったので次行きます。
Webページのスクショを撮りたい！
って、このくらいはアクションに用意されてるでしょ？と思ったら用意されていませんでした。。。。なので、Webページのスクショを撮るショートカットを作ります。
スクショくらいショートカットするもんでもないのでは？とお思いのみなさま、このスクショはただのスクショではございません。Webページの全体がjpegで保存されるという不思議なスクショでございます。そんなに不思議でもないかもしれませんが、普通にiOSのスクショを使っていると撮ることのできないスクショにございます。というわけで、ちょっとお付き合いいただけると嬉しいです。
具体的レシピ
【追記】ここで解説しているレシピとはだいぶ違ういい感じのショートカットが出来たので追記しました。一番下のスクリーンショットを見ていただくのが早いです。ここからの文章は、アクションを設置したりする手順の参考になるかと思って残しておきますが、それが分かってるのなら追記だけ読んでいただけたらと思います。
さて、まずは左上にあるカテゴリから、Webを選択します。
そしたらWebリクエストというサブカテゴリに、『Webページの内容を取得』というものがあるので、それを右側のステージにドラッグします。入力という欄が空欄ですが、そこをタップすると下の方に変数、クリップボード、ショートカットの入力、毎回尋ねる、現在の日付などという入力に使えるリソースが表示されますので、今回は毎回尋ねるを設定します。
次に、Safariのサブカテゴリにある『Webページを表示』を選択し右にドラッグします。そこの入力には、上で取得したWebページの内容を設定しましょう。ちなみにこの『Webページを表示』をしないで直接取得したWebページの内容を次のPDF作成に回すと、JavaScriptで展開されるDOMとかが表示されないのでご注意です。
次に、トップに戻って左上の書類カテゴリから、プリントというサブカテゴリにある『PDFを作成』を選び右にドラッグします。入力は、Webページの内容です。
そうしたら、今度はメディアカテゴリからイメージというサブカテゴリの中の『イメージを変換』を選択し、PDFをJPEGに変換します。Webページの内容にもよりますが、PDFになった時点で数ページ分に別れたものになっています。それをJPEGにしてもやっぱり数ページ分に別れたものになってしまっているので、次にそれらを結合します。
今度はメディア->イメージ編集カテゴリ内の、イメージを結合を選択します。入力は変換済みのイメージで、縦方向に結合します。
最後に、メディア->写真カテゴリの『写真をアルバムに保存』で、結合済みのイメージを最近の項目に保存することで、スクショが写真に保存されるようになります。
完成したら、右下に小さくある実行ボタンを押してみましょう。無事に動くと思います。
完成したスクショはこちら
縮小してあります。
一つ難点を述べるとしたら、PDFで数ページ分に別れたものを結合しているので、一番下にページの余白ができてしまうことです。
うまいこと計算してこの余白を削除できたらなー、と思います。
あと、『Webページのを表示』するときにいちいち完了ボタンを押さなくてはならないのも自動化できないかなぁと。
それと、一番最初にURLは毎回尋ねるようにしてありますが、ここもお好みで変更したらもっと便利になると思います。
まとめ
これでWebページ全体がJPEGになっているという不思議なスクショが撮れました。iOS実機でのWebページのスクショを撮りたい！という需要がどれだけあるかはわかりませんが、最初の方にも書いた通りJSONやらPOSTやらも使えるくらい強力なアクションがまだまだ埋もれていますので、いい感じなショートカットはいくらでも作れるのではないかと思います。
Enjoy!
追記
https://codeday.me/jp/qa/20190628/1124103.html
こちらのページにある方法を使うと、Safariで共有ボタンを押したときにこのショートカットを表示することができます。
編集中のショートカットの上部にある名前の横に丸…ボタンがあるので、そこをタップすると詳細設定欄が出てきます。そこから共有シートに表示ボタンをオンにして、共有シートタイプは選択を全て外してからSafariのWebページのみ選択します。
そうすると、変数にショートカットの入力というものが使えるようになりますので、そこからPDFを作成するとログイン状態も保持したスクリーンショットが取れます。
最終的なショートカットは以下になります。
ちなみに、スクリーンショット下部の余白を削除するというやつですが、Webページ上でJavaScriptを実行してコンテンツの高さなどを取得してなんとかできないかと試行錯誤していたのですが、RetinaディスプレイだとJavaScriptで得られるコンテンツの高さと実際の解像度が別物なので、苦戦しています。
ここら辺知見のある方いらっしゃいましたら、コメントいただければ幸いです。
また、全体的なユーザガイドはこちらになります。
https://support.apple.com/ja-jp/guide/shortcuts/welcome/ios
ちゃんと日本語に翻訳されてる！