はじめに
Instagramの写真や動画を保存できるサイト(Instadownloderなど)は存在しますが、投稿リンクをコピーしてサイトに貼り付けて、実行ボタンを押して、表示された画像をダウンロードといった手順が煩わしいと感じたためショートカットAppでの作成に取り掛かりました。このショートカットでは、投稿リンクをコピーして実行ボタンを押すだけで写真や動画のダウンロードまで行ってくれることを目指しました。
成果物
実際に作成したショートカットはこちらからダウンロードできます。
ダウンロードしたショートカットを使用するためには、設定から「信頼されていないショートカットを許可」を有効にする必要があります。
設定方法は、「設定>ショートカット>信頼されていないショートカットを許可」から行うことができます。尚、なんらかのショートカットを事前に一度実行させていないと信頼されていないショートカット許可を有効にできない仕様みたいなので、既存のショートカットを一度実行してから行うことをおすすめします。
このショートカットでできること・できないこと
| できること | できないこと |
|---|---|
| - Instagramの公開アカウントの写真・動画・リールの保存 - 保存したいファイルの選択 |
- 非公開アカウントの写真・動画・リールの保存 - instagram以外のサイトのファイルの保存 |
ショートカットAppとは
iPhoneやiPadの複数の機能や操作を自動化してくれるiOSアプリのことを指します。
例えば、現在聴いている曲の内容を取得して、ワンタップでtwitterの文章を作成してくれたり、再生回数の多かった上位25曲のプレイリストを作成してくれたり、ミュージックのデータから音楽クイズを作成するなどのお遊び機能までできちゃいます。
スマートホームデバイスを使い、ショートカットAppに登録しておくと家電の操作などもワンタッチや声での操作で行うことができます。
僕はNature Remo miniを使って部屋のライトとエアコンの操作を行ったりしています。
Instagramの画像動画保存ショートカットの概要
ここでは、Webの仕組みを利用しています。Webでは暗号化などがされていなければ基本的に任意のデータまでアクセスすることができます。そのため、任意のデータがあるリンクを見つけてそこにアクセスすればいいわけです。
Webの検証を使ってInstagramのサイトの中身を見てみると...
実際に画像のリンクが載っていることがわかります。このリンクに飛んでみると画像が表示されること、またその画像が保存できることが確認できるはずです。
そこで、今回作成したショートカットではこの仕組みを利用して投稿されている画像や動画のリンクを取得し、そのリンクからデータを保存するという仕様になっています。
ショートカットの中身
このショートカットは大きく6つのブロックとなっています。
- クリップボードを取得し、Instagramのリンクか判定、でなければアラートを出して終了
- クリップボードの内容を取得し、HTMLを作成
- 画像や動画のリンクをターゲットとし、一致した場合は随時、リストに格納
- 格納されたリストから'\u0026'を'&'に置換(iOSでは&がUnicodeにエンコードされていたため)
- 写真や動画が1つだけだった場合と複数ある場合で条件分岐し、結果を
写真動画リストに格納写真動画リストから任意のファイルを選択し、選択されたファイルを保存
それぞれのブロックについて説明します。
1. クリップボードを取得し、Instagramのリンクか判定、でなければアラートを出して終了
ここでは、クリップボードに保存されているデータがInstagramの投稿リンクでなかった場合、投稿リンクをコピーするように促します。
2. クリップボードの内容を取得し、HTMLを作成
投稿リンクからHTMLを取得します。
3. 画像や動画のリンクをターゲットとし、一致した場合は随時、リストに格納
画像のリンクの前には、"display_url":"https://scontentという文字列が含まれているという規則を利用して、正規表現を用いて文字列の検索を行います。
また、基本的には1080pの画像となっているため、さらに1080x1080と一致する文字列を検索します。検索に引っかかった場合は取得リンクを取得リンクリストに追加します。
一致しなかった場合は750pの画像のリンクを検索し、一致した場合は取得リンクリストに追加
750pの画像リンクも一致しなかった場合は、ピクセルを指定せずに検索して、取得リンクリストに追加します。
動画のリンクも検索して一致した場合は取得リンクリストに追加します。さらにリールのサムネイルを設定している場合もあるので、サムネイルも保存できるようにサムネイルのリンクも検索をかけて取得リンクリストに追加します。
※ここでは、サムネイルを動画の前に保存したいという謎のこだわりがでたため、一旦動画のリンクを動画取得リンクに格納して、サムネイルのリンクを取得リンクリストに追加した後、動画取得リンクを取得リンクに格納しています。
4. 格納されたリストから'\u0026'を'&'に置換
iOSでHTMLを表示した時&がUnicodeでエンコードされていたため、リンクに飛ぶことができなかった。
そのため、\u0026を&に置換することで有効なリンクに変換している。
デコードする方法はよくわからなかったため、置換で対応した。
5. 写真や動画が1つだけだった場合と複数ある場合で条件分岐し、結果を'写真動画リスト'に格納
画像が一枚の時は取得するリンクが1つだが、複数会った場合投稿画像N枚に対してN+1つリンクが取得されるようになっていたため、画像一枚と複数ある場合で条件分けを行なっている。
画像が複数あった場合は、2つ目以降の項目から最後までを写真動画リストに追加する仕様にしています。
6. 写真動画リストから任意のファイルを選択し、選択されたファイルを保存
これまでの作業で写真動画リストに取得したいファイルのリンクを格納したため、'リストから選択'関数を用いて、任意のファイルを選択できるようにしている。
最後に選択された項目を'写真アルバムに保存'関数を使って写真フォルダに保存します。
ショートカットの内容は以上です。
感想
いままで簡単なショートカットは作ったことがありましたが、凝ったショートカットは初めて作ったのでちゃんと動かせたときは興奮しました。特にファイルを選択して保存するという機能は一つの関数だけで行え、思ったよりも簡単に実装できたのが驚きました。また、ショートカットの関数も充実しており、ほかにもさまざまなことに対応できそうということで、他のショートカットも作ってみたく思いました。気になった方は是非ショートカットを作ってみてください。最後までご閲覧いただきありがとうございました。
参考文献
[1] iPhone『ショートカット』アプリが便利！使いこなし方やおすすめの設定法を紹介します (TIME & SPACE by KDDI)
[2] iPad,iPhoneショートカットまとめ【あなたもすぐ使える】(YMK-BLOG)