Alfred WorkflowsでPOSTメソッドWeb検索を無理やりノーコードで解決する！

こちらはMoney Forward CorporateIT Advent Calendar 2022 ⧉　7日目の記事です
前回はにこけんさんの「社内esports部～オフライン最高！～⧉」でした

はじめに

どうも
CYOD[Choose Your Own Device]制度により
社内でもMacが使えることにテンションの上がったおーさわです。

マネーフォワードのコーポレートインフラエンジニアとして、普段はネットワーク設定やサーバのアクセス権設定を担当しています。
Windowsが幅を効かせるネットワーク屋出身ですが、他のコーポレート業務も含めてMacの活躍場所を広げていきたい所存です。

ところで
Macユーザーの中には一定数以下のような方がいるのではないでしょうか。

Macかっこいいから好き！
　なんかよくわからないけどAlfred入れとけって記事が多いし入れとこっ　
　特にやりたいこともないけどPowerpack（有料版）にしておいた
...けど結局使ってない

筆者は有料版購入から5年は温めました
そこで今回は業務効率化に寄与しそうな簡単な自作ワークフローを作っていきます。
できれば自作に初挑戦してワタシやればできるやんという読者が増えれば幸いです。

※Alfred紹介・導入方法は他記事に譲り、本記事はこの後 Alfred Powerpack（有料版）のWorkflowsを使ったタイトル回収に移ります
※今回は作成過程の公開記事となり、ワークフローそのものの配布リンクはありません

目次

• さて何をするか
• そんなのググればすぐできるでしょ
• GETメソッドとPOSTメソッド
• ワークフローをプログラム言語なしで作成する
• おわりに

さて何をするか

昨今のSaaS界隈ではWebブラウザベースのサービスも多く、仕事の中で検索する作業が割とあります。
大まかに言えば、
「ブラウザを開く▶︎ブックマークからサイトを選ぶ▶︎検索したい文字を入力▶︎検索を実行」
という作業を何回もしているわけです。
前半部分の「ブラウザを開く▶︎ブックマークからサイトを選ぶ」が画面操作だと面倒でしょうがない、と感じていました。
そこでweb検索をキーボードだけで完結させて一気に表示！みたいな形にしたいなと思います。

そんなのググればすぐできるでしょ

筆者もそう考えていた時期もありました。
しかし"Alfred Web検索"　で検索していただくと、多くのサイトは以下のパターンでヒットします。

• Web Search機能　：サイト内検索する方法　および カスタム検索を設定をして対象Webサイトを設定した上でサイト内検索する方法

確かに便利で無料版でも使える機能のためユーザーが多いのでしょう。
デフォルトで入っているもの以外をカスタム検索と言えば、
試しに"検索したい文字列”で表示されたページのURLの中にある"検索したい文字列"が入る部分に{query}を記入するだけ。カスタマイズも簡単だねっ！みたいな親切なサイトもたくさんあります。

よーし、いっちょやったるか。

「いつも使うページをブックマークで開くのもこれで最後かな。」
切ない気持ちを抱きながら、ブラウザで立ち上げ、検索ワードを入れてEnterっと...

{query}に当たるものがないのだが？？？？

GETメソッドとPOSTメソッド

Webエンジニアではないため、なぜURL表示に求めるものがないのかがわからないわけです。
ワークフローをサクッと作ってドヤ顔するようなMacライフの夢がっ。
上記問題を解決するためにGoogle先生に質問してみました。

先生から教わったことを今回必要な情報を簡単に整理すると、

• HTTPリクエストにはGETメソッドとPOSTメソッドがある
• GETメソッドはURLに{query}の構文がある
• POSTメソッドはURLに{query}の構文がない
• 検索エンジンにSEOで引っ掛けさせたり、検索エンジンに情報を残さない（プライバシーポリシーや守秘義務で情報を残したくない）などで使い分けされていそう

今回使用したいサービスはPOSTメソッドで作成されていたから前述のやり方だと実装できなかったんですね。納得です。
そしてPOSTメソッドでワークフローを作成・公開している人が見つからないという事態に陥りました。（筆者が日本語で検索した時のお話です）
こうなっては仕方ないです。

ないのなら　作ってしまえ　ワークフロー

ワークフローをプログラム言語なしで作成する

改めてですが筆者はコードは書けません。本当に簡単な構文なら理解できるレベルです。
ノーコードって聞いたことあるし皆が自作できることで世界が広がるって聞いたことあるぞ、と楽観的に受け止めて今回の課題にチャレンジしてみました。

ワークフロー作成時の作業フローとしては大きく以下です
1.　webページで検索するまでの行程を分解
2.　該当作業を"キーボード操作で実行できる内容"に分解して当てはめる
3.　AlfrdedWorkflowsでActionsやKeyComboを駆使してフローを作る
4.　自身のPC環境でDelayで待ち時間を挟ませて上手く動くように調整する

順番に細かくみていきましょう。　

1.　webページで検索するまでの行程を分解

冒頭で説明していた以下の内容です。

「ブラウザを開く▶︎ブックマークからサイトを選ぶ▶︎検索したい文字を入力▶︎検索を実行」

該当ページで検索を使ったことがある人はこの指示で無意識に実行できてますが、
ワークフローに当てはめるために、起動のさせ方と検索ボックスを指定する動作を意識して以下としました。

• AlfredでInputキーと検索ワードを入力する
• ブラウザを指定URLで開かせる
• 検索ボックスをクリックして入力できる状態にする
• 検索文字を入力する
• 検索を実行

2.　該当作業を"キーボード操作で実行できる内容"に分解して当てはめる

3.　AlfrdedWorkflowsでActionsやKeyComboを駆使してフローを作る

2と3はAlfredにあるツールを参照しながら一緒にやってしまいます。

• AlfredでInputキーと検索ワードを入力する　
  ここは手入力なのでAlfredの"KeyWord"で"Argument Required"を指定する
  iconはスクリーンショットで拝借してきた本家アイコンをつけてわかりやすく
  "Argument Required"として入力された検索ワードをクリップボードコピーさせて入力にも利用する
  　→"Copy To Clipboard"で解決　（本文には{query}と入力）
  　　※履歴が残ると邪魔になるので"Mark item as transient in clipboard"をチェックする
• ブラウザを指定URLで開く　
  　→Actionにある"Open URL"で解決
• 検索ボックスをクリックして入力できる状態にする
  GUI操作はワークフローに覚えさせられないので今回一番の難関です。
  Google Chromeは⌘command + L でURL記入ボックスに移動できるため、そこからtabキーを何回押せばWebページ内の検索ボックスに辿り着けるか確認
  　→KeyComboで解決
• 検索文字を入力する
  最初の検索ワードをペースト（⌘command + V）で貼り付けさせる
  　→KeyComboで解決
• 検索を実行
  Enterを入力
  　→KeyComboで解決

4.　Delayで待ち時間を挟ませて上手く動くように調整する

ブラウザを開いてtabキーで検索ボックスに移動した後に、検索ワードをペーストタイミングに差があるため、入力に失敗して進まないことがある。 PC環境によって依存性がある部分のため、コマンド間にDelayを入れてバッファを持たせることで失敗しないように調整

それで出来上がったのが以下のようなフローです！

Alfredの入力画面ではこんな感じで入力します。

※検索結果表示の動画は色々映り込むのでNGでした

筆者はDelayを1secで設定してますが、不快な待ち時間はない程度です。
使ってみてブラウザ開いて検索するという手間が多少なりとも軽減されました。

おわりに

改めて結論だけ書いておくと

POSTメソッドWeb検索を無理やりノーコードで行いたいなら
Google Chromeの⌘command + L でURL記入ボックスに移動できるため、そこからtabキーを何回押せばWebページ内の検索ボックスに辿り着けるかをKeyComboで実装すればOK

となりました。

実際に作成してみてほしいですが、
今回はAlfred Workflowsをさわってみたらすぐに使える機能だけで作成しているので見つからない・作れないといった内容はなく、応用させることも簡単です。

Webプログラミングがわかるようになればコードでスマートに解決できるんだろうなと思いながらワークフロー検索していましたが、実際に作ってみるのも一興でした。
コードを書けなくても簡単なワークフローなら自作できるツールが身近にあることが皆様に伝わっていれば嬉しいです。

それでは！