
【ノーコード初級編】10分で作る!Siriを使ってChatGPTと話してみよう!
今回はMacやiPhoneなどのSiriからChatGPTに話しかけ、返事をもらって音声で読み上げる、という仕組みをmakeで作成していきます。想像の2倍簡単に作成できるのでサクッと作っちゃいましょう!
はじめに
今回はmakeというとても使いやすいノーコードツールを使って作業を行っていきます。まだアカウントを作成していない方は無料かつ3分で終わるため先に下記の記事を確認してアカウント作成をお願いします。
また、ChatGPTのアカウントも作成済みの前提で進めていきます。もしこれから作成する方はこちらで説明をしていますので参考にしてみてください。こちらも無料かつ3分で完了します。
なおSiriを使う都合上、Mac・iPad・iPhoneなどApple端末を所持している方を対象者にしているのでご注意ください。
ちなみに私はMac上で作業をしていますが今回の作業はiPadでもiPhoneでも問題なく作業できると思うのでご安心ください。iPad・iPhoneの方はクリックと書かれているところをタップや長押しなどと読み替えてみると同じ動作になると思われます。
実装開始
今回は10分で完成予定なので早速作業を開始しましょう!
makeにメッセージの入り口を作る
まずはmakeにアクセスし、新しいシナリオを作ってください。
次に中央のプラスボタンに「webhook」と入力し選択した後、さらに「Custom webhook」を選択します。



次にAddボタンを押して名前を入力します。私は「Siriからの連絡口」としましたが分かりやすいものでOKです。
次にポップアップ左下にあるトグルボタンの「Show advanced settings」をONにします。

するとこのように設定が出てくるので「Get request HTTP method」をYesにしてSaveボタンを押します。

下記の画面になればOKです。Copy address to clipboardをクリックしてURLをコピーしておきましょう。このURLを知っている人は誰でもこのシナリオにアクセスできてしまうので他人には教えないよう注意してください。
※自宅のIPアドレスなどを指定すると外部からはアクセスできないように設定したりできますが今回は説明を割愛します

Apple端末上のショートカットアプリを開く
最近のApple端末には下記のようなショートカットを自作できる純正アプリが入っているので探し出して開きましょう。私もiPhone上のものは削除していたのでApple storeから再ダウンロードしてきました。

アップデートをしていないなど、少し前の状態でApple端末を使っている方はないかもしれません。どのバージョンから使えるのかなどはちょっと調べていないので見つからない方はごめんなさい。
開くとこのような画面になっていると思います。私はダークモードにしているので色味が違う人もいるかもしれません。

ショートカットアプリからmakeにアクセスする
開いたら右上のプラスボタンを押しましょう。下記のような画面が開きました。

次に右上の検索ボックスに「音声」と打ち込んで下記ピンクで囲んだ設定をドラッグアンドドロップし、左側のエリアに移動させてください。


次に右上の検索ボックスにurlと打ち込んで下記ピンクで囲んだ設定をドラッグアンドドロップし、左側のエリアに移動させてください。


さらに同じ手順で下記の設定も追加します。


次に真ん中にある設定の「apple.com」と書かれているところに先程make上でコピーしたURLをペーストします。

次に「URLの内容を取得」の右の方にある「表示を増やす」をクリックして詳細設定項目を開きます。
方法は「POST」を選択してください。

次に左下にある+ボタンを押して情報を入力していきます。(iPhoneやiPadの方は「新規フィールドを追加」の+ボタンをタップして「テキスト」を選択してください)
キーには「value」と入力し、値には音声入力されたテキストを入れていきます。値の設定は薄い文字で「値」と書かれているところにフォーカスし、右クリックをすると下記のようなポップアップが出てきます。次に「変数を挿入」をクリックして「音声入力されたテキスト」を選択しましょう。


ここまで来たら一度ショートカットからmakeにアクセスできるのかテストしていきましょう。makeに戻り、Webhookのアイコンの上で右クリックをすると下記のようなポップアップが出ます。
この中の「Run this module only」を選択して一度だけアクセスを受け入れるようにしていきましょう。


次にショートカットアプリ上の右上にあるプレイマークを押します。

すると音声入力を求められるので何かしら話しましょう。

私は「テスト中」と話しました。音声が認識されると下記のようにmakeに対してアクセスを行ってもよいかの確認が入ります。これは「常に許可」を選択してください。

うまくいくと下記のような画面になります。Acceptedと表示されていますね。

makeの方も見てみましょう。吹き出しマークが出ていれば成功です。

次に吹き出しをクリックしてみましょう。
「テスト中」というテキストを受け取ることができていますね。

これでテストは終わりです。
ChatGPTへテキストを送る
次にmake上でChatGPTとの接続を作っていきましょう。右下のプラスボタンを押し、「chatgpt」と検索して選択します。

一番上の「Create a Completion」を選択します。
※前回記事のLINE→ChatGPT→LINEという仕組みを作成した際とは選択する設定が変わるのでご注意下さい

アイコンが表示されたらWebhookの右側と接続しましょう。
次にアイコンをクリックし、ポップアップを表示して下記のように入力を進めてください。

Connectionがない方はAddボタンを押し、こちらで取得できるOrganization IDとこちらで発行できるAPIキーを入力してSaveしてください。詳細は以前の記事に書いてあるのでご確認ください。
次にAdd itemを押して下記のように入力していきます。RoleにはUserを設定し、Message ContentではWebhookのvalueという赤いタグを選択してください。

ショートカットアプリにChatGPTの返信を送る
最後にショートカットアプリにChatGPTからの回答を送っていきましょう。下にある小さいWebhookアイコンを選択して今回は「Webhook response」を選択していきます。

大きなWebhookアイコンが画面に追加されたらChatGPTの右側と接続してください。
次に新しく追加されたWebhookアイコンの設定を進めていくのでアイコンをクリックしてポップアップを表示しましょう。Bodyのテキストボックスにフォーカスするとさらにポップアップが出てくるのでChatGPTの回答をタグから選択していきます。
下記のように開いていき、緑色の「Content」を選択しましょう。
Choices[]→Message→Content
下記が完成図です。あっていればOKボタンを押して完了です。

ショートカットアプリで受け取った内容を読み上げる
最後にショートカットアプリ上で少し作業をして完成となります。
最初にやったように右上の検索ボックスに「音声」と入力し、「テキストを読み上げる」という設定を左にドラッグアンドドロップします。
URLの内容を取得とAcceptedのエリアの間に入るような挙動になると思いますがそれで合っています。完成図は下記です。

この状態で動作確認を行いましょう。MacやiPhoneのスピーカーがONになっているか先に確認をお願いします。(読み上げが動作しているのかわからなくならないようにするため)
それではmakeに戻って左に下にある「Run once」をクリックします。下記のようにクルクルしていればOKです。

次にショートカットアプリに戻り、途中のテストと同じく右上のプレイボタンを押して何か話しましょう。
私は「こんにちは」と挨拶しました。その結果返ってきた内容が下記です。ちゃんと音声での読み上げも機能していました。

以上で設定は完了です。
この仕組を常時動かしていおきたい場合はmakeの左下にあるSCHEDULINGのトグルボタンを紫色のONにしておきましょう。

SiriからChatGPTに話しかける方法
設定自体はこれで完了です。が、SiriからChatGPTに話しかけるという趣旨でした。
そのためにSiriから作成したショートカットを呼び出す必要があり少しだけ作業を行いましょう。
まずは一度ショートカットアプリに戻ります。
左上にショートカットの名前をつけるエリアがあるのですが、この名前をSiriに伝えることでChatGPTと接続していく形になります。
私:ヘイシリ!
↓
Siri起動
↓
私:ChatGPTに質問する
↓
ショートカット起動
↓
私:京都市の人口推移は今後どうなっていくのか教えて
↓
ChatGPT:京都市の人口は今後……..
と、いったイメージです。
上記で言う「ChatGPTに質問する」がショートカット起動の合図になるのですが、Siriが他のアクションと勘違いしないような内容が良いと思います。
極端な例を出すと「Apple MusicでJポップヒットチャートを流して」というショートカット名にするとします。この場合はおそらくApple MusicからJポップのヒットチャートが流れてくるでしょう。
私は下記のように「ちゃっとじーぴーてぃーに質問」としました。
英語でChatGPTと書いたらうまく認識してくれないことがあった
「ちゃっとじーぴーてぃー」だけだとChatGPTについてSiriが検索した結果を返してきた
というのが理由です。

ここまで終わったら「ヘイシリ!ちゃっとじーぴーてぃーに質問」と話しかけてmakeから返事が返ってくるかテストして完成です。
make側のSCHEDULINGがONになっている、もしくはRun onceがクリックされている状態でないとテストにならないので気をつけてくださいね。
makeとChatGPTの費用について
最後に両サービスの料金面について少しだけ記載します。今回のようなテスト利用の場合は無料の範囲内で使用できるのでお金がかからないならOKという方は読み飛ばして問題ありません。
makeは「オペレーション」という単位で実行結果を記録しています。今回は大きなアイコンを3つセットしたので1度全体を動作をさせると3オペレーション、というカウントになります。これには途中の1アイコンだけでテストをしたものなども含みます。
そのため、
途中でアイコン1つの段階で実行したテスト分
完成後のテスト分
ショートカットに名前をつけた後のテスト分
以上を合計して記事内では7オペレーションを消費した形になりますね。
makeの無料アカウントの範囲内では毎月1,000オペレーションまで使用することができ、月をまたぐとリセットされます。これを超す場合にはクレカ登録が必要となり最低月に10ドルの課金が必要となりますので注意して使っていきましょう。
ChatGPTに関してはアカウント開設から3ヶ月以内であれば5ドル分までは無料で使えるようです。(18ドルと言っている人もいますが公式サイトには2023/4/27時点で5ドルと記載がありました)
先日算出したざっくり計算では日本語1文字で平均0.0003915円程度になる見込みでした。2,500文字くらいのやり取りをすると1円くらいかかってくるイメージです。(こちらの質問とChatGPTの回答両方の合計で2,500文字)
ドル円を133円で計算すると5ドル×133円=665円となるので、開始から3ヶ月以内に自分のChatGPT使用量が665円を超えそうな方は有料プランに契約するか使用を控えましょう。
3ヶ月を超えて利用を継続したり、途中で5ドルを超えたりした場合に利用が強制停止になるのか、後から請求が来てしまうのかは判明していないので気をつけながら使ったほうが良さそうです。
※私は早々に有料プランに入ったので確認ができていません
まとめ
私が今回の方法を発見したとき、完全に目からウロコでした。今回の内容の本質はおそらくChatGPTを使うことではなく、「こんなにも簡単にSiriからmakeにアクセスできるんだ」というところな気がしています。
一度makeにつなぎ込んでさえしまえばSiriからTwitterを投稿したり、スプレッドシートにメモしたり、ChatworkやSlackにメッセージを送ったりなど幅広いケースで活用ができそうです。
今後ユースケースが見つかったら改めて別記事で紹介しようと思うので、興味がある方はぜひフォローしておいてもらえるとうれしいです!
それでは設定作業お疲れさまでした!