1. tbpgr

    Posted

    tbpgr
Changes in title
+Chrome拡張 | soku_qiita - 即聞いた | Qiita のユーザー・タグ指定検索をマウスを使わずに素早く実行する #chrome_extension
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,91 @@
+## :musical_score: 概要
+Qiita のユーザー・タグ指定検索をマウスを使わずに素早く操作する Chrome 拡張
+
+soku_qiita
+![icon-128.png](https://qiita-image-store.s3.amazonaws.com/0/43480/d2991cf3-b22f-eed6-8054-483761fc0a97.png)
+
+を作成しました。
+**即聞いた** です。
+
+## :scroll: 機能
+### 基本機能
+* メニューにある soku_qiita ボタンを押すか、割り当てたショートカットを入力
+* 入力ダイアログが表示される
+* カンマ区切りで user, tag を入力
+ * `tbpgr,ruby` なら "user:tbpgr tag:ruby"
+ * `tbpgr` なら "user:tbpgr"
+ * `,ruby` なら "tag:ruby"
+* OK をクリック
+* キーワード入力欄に検索ワードが設定される
+* 検索ボタンをクリック
+ * 追加のワードを設定することを考慮し、あえて検索ボタンクリックまで自動化していない
+
+### 例外機能
+* 検索ボックスがないページで実行するとコンソールに `no query form` と出力し、処理を終了する
+
+### 補足
+はじめは、検索欄の ▼ で表示されるダイアログを利用しようかと思ったのですが、
+裏でいろんな属性を制御しているようで、副作用が大きそうだったのでシンプルに
+標準の入力ダイアログを利用することにしまいsた。
+
+## <i class="fa fa-history" style="font-size:1em;"></i> 経緯
+Qiita の検索メニューはどんどんリッチになるものの、
+CUI のショートカットサポートがないのでマウス操作が必要です。
+例えば、今の検索機能だと
+
+* マウスで検索欄に移動し、フォーカスをあてる
+* ▼が表示される
+* ▼をクリックする
+* マウスでユーザー指定欄 or タグ指定欄にフォーカスを当てる
+* 検索ワードを入力する
+* Enter キー
+
+というアクションが必要です。
+
+soku_qiita の機能を利用すれば
+
+* 任意のキー(ショートカット割り当て)
+* 検索ワードを入力
+* Enter(検索欄に反映)
+* Enter(検索の実行)
+
+で実行可能になります。快適。
+
+大分前に運営に要望を出していたのですが、ショートカット厨としては
+Chrome 拡張の作り方を覚えた今、拡張を作らない道はありません。
+
+## <i class="fa fa-flag-checkered" style="font-size:1em;"></i> ユースケース
+特定のユーザー名、タグ目の検索を 1 入力でも少なく、キーボードから手を離さずに実現したい。
+
+## <i class="fa fa-github" style="font-size:1em;"></i> soku_qiita GitHub
+<i class="fa fa-external-link" style="font-size:1em;"></i> [chrome-soku_qiita GitHub](https://github.com/tbpgr/chrome-soku_qiita)
+
+## <i class="fa fa-google" style="font-size:1em;"></i> soku_qiita Chrome ウェブストア
+<i class="fa fa-external-link" style="font-size:1em;"></i> [chrome-soku_qiita Chrome ウェブストア](https://chrome.google.com/webstore/detail/sokuqiita/pdbkaalghgacoghbclifkbklgeoaneil)
+
+![soku_qiita_shop.png](https://qiita-image-store.s3.amazonaws.com/0/43480/6061f88f-daf7-b431-fc66-182e5d34b034.png)
+
+## <i class="fa fa-flask" style="font-size:1em;"></i> 試用
+### :dog: メニューバーを確認
+![usage1.png](https://qiita-image-store.s3.amazonaws.com/0/43480/ea869143-2f46-d729-399c-06fb481d2261.png)
+
+### :cat: Qiita にて chrome-soku_qiita を呼び出し
+![usage2.png](https://qiita-image-store.s3.amazonaws.com/0/43480/f42c533e-ca0c-68c5-f0a7-feb69e142c7c.png)
+
+### :rabbit: ダイアログボックスに検索値を入力
+![usage3.png](https://qiita-image-store.s3.amazonaws.com/0/43480/19bb5c00-3953-bb71-96da-ef9c104211fe.png)
+
+### :frog: 入力欄に反映
+![usage4.png](https://qiita-image-store.s3.amazonaws.com/0/43480/538406ed-88fd-6a04-bd3d-2be036119590.png)
+
+### :koala: 検索の実行
+![usage5.png](https://qiita-image-store.s3.amazonaws.com/0/43480/2fcca1c3-dc64-f8ac-2669-d2ef99fbce13.png)
+
+## <i class="fa fa-image" style="font-size:1em;"></i> デモ
+
+アニメーション
+![demo.gif](https://qiita-image-store.s3.amazonaws.com/0/43480/a50430ab-c26a-1ed6-ec16-d831a9251444.gif)
+
+## :books: 外部資料
+* <i class="fa fa-external-link" style="font-size:1em;"></i> [Chrome Extensions 公式](https://developer.chrome.com/extensions/index)
+* <i class="fa fa-external-link" style="font-size:1em;"></i> [chrome-soku_qiita](https://chrome.google.com/webstore/detail/sokuqiita/pdbkaalghgacoghbclifkbklgeoaneil)