iOS12のショートカットアプリを使ってマストドンAPIを叩いて呟いてみた

## 初めに
Qiita初投稿の内容となります。始めまして。Hello, World.

先日iOS12の正式版リリースが行われました。
パフォーマンスの改善はもちろん、ミー文字やスクリーンタイムなど様々な追加要素がありますが、
注目点(?)の一つとして、「ショートカット」アプリ(旧WorkFlow)が挙げられます。

実際はWorkFlowというアプリのリニューアル版らしいのですが、iOS12からショートカットとして生まれ変わったものらしいです。WorkFlow自体は触ったこと無いのですが、生まれ変わったこの機会に触ってみたら、割と凄そうなので、この可能性に共感して頂けたらと思いこの記事を書きました。

ショートカットアプリは様々なアプリやシステムと連携することが可能であり、実際Twitterと連携したアクションは非常に簡単に作成できます。
そんな簡単なことはすぐに飽きるというあなたのために、今回は**音声入力を利用して、喋った内容をMastodonで呟いて、そして呟いた内容を音声出力する**、というショートカットを作って見たいと思います(Mastodonについて知らない方はggって頂くと多くの記事が出るので、興味を湧かしてください)。  

この記事はWeb初心者の方にもわかりやすい説明を心がけていますので、若干回りくどかったりもします。
また、内容も内容なので説明を投げ捨ててる部分もあります。~~どっちつかずが一番問題だと思います。~~

## 事前準備

この記事でやること自体は単純ですが、事前準備はちょっと面倒です。  

#### 最初にやること

iOSデバイスをiOS12にアップデートしてください。iOS12未満の方でもWorkFlowを使って同じことが出来る(はずです)けど、画面などが異なる(かもしれない)ので適宜変換をお願いします。

あと、Mastodonにユーザーがない場合はユーザーを作成しましょう。
ちなみに、私は[社畜丼(労働者たちのマストドン)](https://mstdn-workers.com/)のユーザーでございます。

#### ショートカットアプリのインストール

AppStoreでショートカットと入力し、一番上にあるアプリをインストールしましょう。

ちなみにiOS12未満のユーザーでWorkFlowを使っていた方は自動的にアプリが切り替わっているようです。

#### マストドンでアプリを作成

Mastodon(やTwitter)でアプリを作成したことのある方はわかると思いますが、Mastodonで外部から呟いたりするためには自分でアプリを作らないといけません。  
幸いMastodonは非常に簡単にアプリが作成できるようになりました。  
以下アプリの作成の仕方になりますが、Mastodonのバージョンによっては見た目が違ったり(そもそもアプリが簡単に作れなかったり)しますが、適宜変換をお願いします。

まずはMastodonのユーザー設定へ行きましょう。

下の方に開発と書かれた部分があるので、それを開くとアプリというものが現れます。  
ここでアプリを追加することができます。

<img src="https://qiita-image-store.s3.amazonaws.com/0/138959/55d0de34-01a9-92bd-8d50-b629be5a564a.jpeg" width=50%/>

アプリ名はショートカットアプリで作ったショートカットはSiriからでも呼び出せるということを意味づけて、 **Osiridon** にでもしておきます。  
以下、特に設定を変える必要はないのでそのまま送信してください。

<img width="50%" alt="IMG_2046.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/138959/2010a3af-3ce4-2074-d150-e773307e5553.jpeg">

アプリが作成されました、という表示とともにOsiridon(先程作ったアプリ)が追加されているので、開いてください。

すると下の方にアクセストークンと書かれた部分があるので、クリップボードにコピーしておいてください。また、この値がバレるとさきほど設定したすべての権限を悪用できるのでバレないよう注意してください。

<img src="https://qiita-image-store.s3.amazonaws.com/0/138959/62d6bddc-56ae-0a8a-9d04-25d4af26187d.jpeg" width="45%"/>

以上でマストドンのアプリ作成は終了です。

## 呟いてみよう

ここでは、ショートカットを使って「にゃーん」って呟いてみたいと思います。  

呟いてみようと気軽なタイトルですが、実際知らないと一番難しいのがここだったりします。  
が、手順通りやれば簡単に出来ます。興味が湧いたら原理なども調べてみてください。

#### ショートカットを作成!

兎にも角にもまずはショートカットアプリを開かないとコトは始まらないので、開いてみましょう。
まっさらな画面にショートカットを作成と書かれたものがぽつんと置いてあります。

誘われるがままショートカットを作成ボタンをタップしてみると新しくショートカットが作成されました。

<img width="30%" src="https://qiita-image-store.s3.amazonaws.com/0/138959/086b45c6-12dc-d8fa-4893-d005d1c6a6a8.jpeg">


画像にあるように、ショートカットアプリではアクションを追加していって一つのショートカットを作っていきます。さながらプログラミングみたいですよ。

それでは「下部」をタップしてみましょう。   現れたコンテンツの中から必要なアクションを並べていきショートカットを作成していきます。

#### 今回使うアクションを追加

まず最初に必要なアクションであるWeb→URLのURLとWeb→URLの内容を取得の2つをショートカットに追加します。
上部の検索窓にURLと入力すれば2つとも表示されるはずです。

<img width="40%" src="https://qiita-image-store.s3.amazonaws.com/0/138959/fe0f45a9-578f-f6bc-2fb9-28afe3d1ebda.jpeg">


説明はしませんが、詳しいことは各アクションの右側のiマークをタップすると表示されます。

URLとURLの内容を取得アクションを追加してみましょう。タップするだけで追加されます。  
URLとURLの内容を取得が線で繋がれていますが、これはURLアクションで入力した内容をURLの内容を取得アクションで使うからです。(URLアクションの出力がURLの内容を取得アクションの入力につながっていると考えましょう)。  非常にどうでもいいですが、このアクションとアクションが線でつながるのを見てちょっとだけ[LabView](http://www.ni.com/ja-jp/shop/labview.html)を思い出しました。

<img width="40%" src="https://qiita-image-store.s3.amazonaws.com/0/138959/75424fd2-27ba-6982-26fd-3c2c5b716070.jpeg">


#### 呟いてみよう

まずはURLの欄に事前準備でアプリを作ったインスタンスのURLを入力してください。
私でしたら社畜丼ですので`https://mstdn-workers.com`, jpユーザーの方は`https://mstdn.jp`という具合です。  
そして、その後ろに更に追加して`/api/v1/statuses`という値を入力します。これはマストドンで呟くためのAPIのURLです。

URLの内容を取得アクションですが、詳細をタップすると方法、ヘッダという項目が現れます。

まずは方法の項目をタップし、POSTを選択します。

ヘッダの部分をタップすると、キー、テキストと書かれた項目が現れます。  
そこに次の表のような値を入力します。
こうすることでHTTPヘッダに指定したキーとテキストを含めることができます。
また、Mastodonではヘッダに表のような値を含めることで、トークンの権限に応じた操作を行えるようになります。

キー          | テキスト
--------------|-----------------------------------------------------
authorization | Bearer(半角空白)事前準備でコピーしたアクセストークン

次に本文を要求項目です。  
本文を要求項目の下の新規フィールドを追加をタップすると、テキスト、数字、配列、辞書、ブール値の中から選択するよう要求されるので"テキスト"を選択してください。  
するとまたキーとテキストの入力が求められるので、今度は次の表の通りに入力してください。この部分がなどういう意味かはなんとなく勘づくと思います。

キー   | テキスト
-------|-------------------
status | にゃーん(呟く内容)

ここまでの状態で次のような画像になっていると思います。これでとりあえず呟けます。

<img width="30%" src="https://qiita-image-store.s3.amazonaws.com/0/138959/2e691bb3-6868-40b4-1746-9089e60d0405.jpeg">

試しに上部真ん中にある再生ボタンを押してみましょう。

<img width="50%" alt="スクリーンショット 2018-09-20 午前1.51.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/138959/5ef31ef3-db1e-7ef1-715f-9d57b31e8e44.png">

**ハロー! Osiridon!**

## 音声入力を使ってみよう

正しく入力できていれば、すでに呟ける環境が整っているので、あとは簡単です。

下部の検索バーをタップしてテキスト→テキストを音声入力アクションをショートカットに追加してください。  
その後、テキストを音声入力アクションをロングタップし、位置を変更できるようになったら一番上に持ってきます。それで、先程の`にゃーん(呟く内容)`をタップし内容を一旦削除します。  
その後キーボードの上らへんにある`音声入力されたテキスト`を選択します。

<img src="https://qiita-image-store.s3.amazonaws.com/0/138959/44405a15-de08-6e15-b4ac-89bd67dae0ce.jpeg" width="50%">

この`音声入力されたテキスト`はいわゆる変数で、この記事では扱いませんが、変数を自分で作ることも可能です。

これで完了しました。再生ボタンを押しましょう。

<img width="50%" alt="スクリーンショット 2018-09-20 午前1.59.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/138959/715cd420-9821-d76f-c20c-445384649d0b.png">

**ハロー! Oppaidon!**　~~※社畜丼での挨拶です~~

## 呟いた内容を喋らせよう

今まで呟いてみて、下の方になにかよくわからない(分かる人にはわかる)表示があったのに気づきましたか?

それはこっちから送ったメッセージの返答で、今回の場合は今回呟いたTootの情報を返してくれています。 [Jsonという気味の悪い拡張子](http://www.itmedia.co.jp/news/articles/1806/08/news065.html)のデータが返ってきているのですが、このJsonデータからデータを抜き出すアクションも既にあります。

下部のバーをタップして、スクリプティング→辞書→辞書の値を取得アクションをショートカットに追加します。
そして、キーの部分に`content`と入力してください。

これで呟いた内容を取得できるので、次に、これを喋らせてみましょう。

音声入力が可能なので、音声出力も当然可能です。テキスト→テキストを読み上げるアクションをショートカットに追加しましょう。

これで、現在テキストを音声入力→URL→URLの内容を取得→辞書の値を取得、テキストを読み上げる、とアクションが並んでると思います。いざ、再生してみましょう。

<img width="45%" alt="IMG_2062.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/138959/9dc71b31-4ca3-b5dc-b47b-c6099dbc329e.jpeg">

どうですか。良さげな感じですが、呟いた内容の前後に変なのが聞こえますね。  
最下部を見てみると、`<p>呟いた内容</p>`という表示があると思います。これが音声再生された内容なのですが、邪魔なもので囲まれています。

<img width="40%" alt="IMG_2063.jpg" src="https://qiita-image-store.s3.amazonaws.com/0/138959/a436c355-119d-7a9d-da2b-d8ce34d07707.jpeg">

実は、Mastodonが返すTootの内容は、Web上で表示するのに適した形に変換されたものが返ってきます(実際に&lt;p&gt;や&lt;br&gt;など、htmlでお馴染みのタグを含んだものが返ってきます)。  
~~このhtmlのタグを削除するアクション自体はショートカットにはありませんが、複数のアクションを組み合わせて(ある程度)削除することができます(多分)。完全に削除することは今のところできてませんが。  
ヒントは正規表現、リスト、繰り返しです。~~
追記
できました。次回の記事でそれを使うつもりです。

## まとめ

ショートカットアプリを使ってMastodonで呟くことが出来ました。これらを活かせば読み上げクライアントもワンタップで出来そうですね。

回りくどい説明が多くて、結局分かりづらい内容になってしまったかもしれませんが、ショートカットアプリの可能性を共感いただけたら幸いです。

また今回の記事で作ったショートカットのアクションとその内容のまとめを以下の表にまとめました。
この表があれば上記の長い文章はほぼ必要ありませんが、何卒。

アクション名(一番上から) | 設定項目   | 設定内容
-------------------------|------------|--------------------------------------------------
テキストを音声入力       | 特になし   |
URL                      | URL        | アプリを設定したインスタンスのURL/api/v1/statuses
URLの内容を取得          | 方法       | POST
                         | ヘッダ     | キー: authorization
                         |            | テキスト: Bearer(半角空白)access_token
                         | 本文を要求 | キー: status
                         |            | テキスト: `音声入力されたテキスト`
辞書の値を取得           | キー       | content
テキストを読み上げる     | 特になし   |

以上になります。  
以下は、Bearerって何? statusってどっから来たの? みたいな人のための欄外です。

## いろいろ気になった人のための用語集

今回の記事でBearerやAPIって何? , statusとかcontentってどこから来てるのと気になった人のために関連する用語やページを至極簡単にですがまとめました。気になった単語でggってみるとQiitaやブログなどにより詳しい内容があるのでここでは深く触れることはしませんが、気になったらココらへんの単語を基に調べてみるのも良いかもしれません。

#### API
- Web API(今回の記事のAPIが表すもの)  
- HTTPのメソッド, GET, POST
- Json
- REST api

#### Bearer
- OAuth 2.0
- RFC6750
- ちなみにMastodonが使っている[doorkeeper gemのドキュメント](https://github.com/doorkeeper-gem/doorkeeper/wiki/Interacting-as-an-OAuth-client-with-Doorkeeper)のUsing the Access Tokenにも使用方法が書いてある。

#### Status, Contentがどこから来たのか
- [MasotdonのAPIドキュメント](https://github.com/tootsuite/documentation/blob/master/Using-the-API/API.md#statuses)