D4DJ GroovyMix のリザルトを Scrapbox のページにまとめやすくする iOS ショートカットを作った

この記事は GMOペパボエンジニア Advent Calendar 2020 - Adventar 21日目の記事です。 昨日20日目は Tatsumi0000 くんの App Store Connect APIからアプリのダウンロード数を取得する時にハマったポイントとその解決法 でした。


動機

D4DJ Groovy Mixとかいうスマホ音ゲーをちょっと真面目に触ってる。スコアモチベを上げるためにグルミク1日1PFCアドベントカレンダー を作りたくなった。Twitter以外のストックできる場所にまとめたいと考え、Scrapbox を採用したが、都度都度iOSでページを作るのが面倒だった。

作ったもの

グルミクスコアをスクラップ

D4DJ GroovyMix のエキスパートスコアのクリアリザルトに対して

  • スコアキャプチャを保存する
  • リザルトテキストを本文、曲名をタイトルにしてScrapboxのページを作成する
    • 追加するScrapboxのアカウントは簡単に設定できる

という要件を満たすiOSのショートカットを作った。

ScrapboxのページにしたいEXPERTのリザルトが出たときにショートカットを実行すると、曲名をタイトルにしたページを作ってくれる。画像アップロードまでは自動でできないので、そこは手動で。iOSで上記リンクに飛ぶことで実際に端末のショートカットとして使用することができる。

手法

Scrapboxにページを追加する

ページを作る - Scrapbox ヘルプ にあるように、ページタイトルとURLエンコードされた本文があれば、ページを作ることができる。

iOSショートカット

コンテンツの中身を確認する

ショートカットの入力を「コンテンツグラフを表示」にわたすと、入力内容の詳細を確認できる。例えばグルミクのリザルトをショートカットの入力にしてコンテンツグラフを表示にわたすと、 [イメージ, テキスト, テキスト] という複数のコンテンツタイプのリストになってる事がわかる。最後のテキストは空っぽなので、よくわからないけど。

なにか決まった入力に対してショートカットを作りたいと考えたのならば、まずは入力を解析するのにコンテンツグラフを表示させると良さそうと思った。

f:id:uvb_76:20201221065030j:plain
スコアリザルトの入力リスト

コンテンツグラフ

「ショートカット」のコンテンツ・グラフ・エンジン - Apple サポート

「ショートカット」の能力の多くは、コンテンツ・グラフ・エンジンによるものであり、iOSおよびiPadOSの機能やAppからショートカットアクションへのデータをその場でインテリジェントに変換します。アクションがある種類のコンテンツを想定しているのに別の種類のコンテンツが渡された場合、コンテンツグラフがそのコンテンツを適切な種類へ自動的に変換します。

この仕組のおかげで、ある程度のコンテンツの種類の違いを許容して色々と変換してくれる。たとえばテキストに対して「写真に保存」をすると、テキストを画像に変換して保存する。逆に画像をテキストとして表示すると [イメージ] というテキストになって表示される。ショートカットの入力を確認するには「コンテンツグラフの表示」を使う。ショートカットの入力に対して変換できるコンテンツの種類をグラフにして表示してれる。

f:id:uvb_76:20201221064141j:plain
イメージのコンテンツグラフ

リストから項目を取得

ショートカットの入力はリストの形で入ってくる。「スクリプティング/リストから項目を取得」で、イメージ、テキストそれぞれ個別に指定して処理を行うことができる。

f:id:uvb_76:20201221064132j:plain
リストからイメージを取得するところ

本文のURLエンコード

Scrapboxでページを作る際、本文はURLエンコードされている必要がある。これも「スクリプティング/ URLエンコード」で実現できる。エンコードの他にもオプションでデコードもできるので有能。

f:id:uvb_76:20201221064128j:plain
ページの本文を作るところ

曲名を抽出してURLを組み立てる

スコアリザルトから正規表現で抽出する。 [EXPERT]{曲名}をクリア のようなフォーマットのテキストを拾ってグループをタイトルにすると良い。これは「一致するテキスト」と「一致したテキストからグループを取得」で実現できる。

HTTPリクエス

curlも使えるけど、ブラウザでひらいて画像アップロードしたかったのでそうした。

曲名抽出からHTTPリクエストまでをつなげると以下の処理になった。

f:id:uvb_76:20201221064123j:plain
ページタイトルを作ってリクエストするまで

Scrapboxアカウントの設定

ショートカットはiCloudへエクスポートできる。エクスポートされたショートカットのURLにアクセスすると誰でもショートカットを使うことができる。

アカウント名の設定などショートカットを使用する前に設定しないといけない項目があるときは「ショートカット詳細」の「質問を読み込む」を使うことで、URLからショートカットを追加する際にウィザート形式で値を設定することができる。今回はページを追加するScrapboxのアカウントを設定できるようにした。

f:id:uvb_76:20201221064137j:plain
ショートカット時にユーザーに対して尋ねる質問

学び

  • 意外とショートカットでできることは多いことに気がついた
  • iCloudiOSショートカットをエクスポートできること
  • 複数のコンテンツが含まれる入力をショートカットで個別に処理する方法

これから

  • アドベントカレンダーのネタはもう揃ったので、これを直すモチベはあまりない…
  • 自分用にエキスパ限定にしてたけど、難易度不問にして良さそうとは思う
  • 本文と画像をrequest body にしてAPIリクエストすると、なにか記録をストックしてくれるAPI側を作ってそこに溜め込めるようにしてみる
  • リザルト画像のOCRかけたくなったので、Cloud Vision API とか使ってテキストに落とし込めないか考える

とかぱっと出てきたので気が向いたらやろうと思う。


明日はひかりさんの レビューを分析してみる2020 - 補習ほぼ確 です。