概要
| サイト名 | SEARCHISTORY |
| 使用対象者 | システムエンジニア |
| サイト概要 | 実装中にエラーで詰まった場合に、その事案に対して「調査したURLの記事」と「調査内容の履歴」を管理しておくアプリ。 |
| サイトURL | https://searchistory.web.app/ |
| クローム拡張 インストールURL | https://chrome.google.com/webstore/detail/searchistory/mjomjnofgpoebgkoemmcjklkinmedgok?hl=ja |
| 使用方法ページ | https://fito2prg.com/archives/463 |
| アプリgit hub | https://github.com/shobaseprg/searchistory |
| クローム拡張 git hub | https://github.com/shobaseprg/vcex |
| テストユーザー アカウント | メールアドレス: searchistory.sample.user@gmail.com searchistory.2sample.user@gmail.com searchistory.3sample.user@gmail.com パスワード(上記全て): rkuzu4xai9zw |
| 特徴 | ・エラー事案(トピック)を登録し、その事案(トピック)に対して紐づく形で「調査済みページのURL」と「調査内容」を登録する。 ・調査履歴は事案(トピック)作成者が許可を出したユーザーと共有可能。 ・グーグル拡張機能と連動し、検索結果一覧のリンク、または表示中のページに調査履歴がある場合は、調査結果を確認することができる。 |
| 作成動機 | 実装中にエラーで詰まった場合に、解決方法を調査する方法はネットからの情報収集が多いです。 しかし、調査に時間を要してしまった場合や、一旦後回しにして、再度調査した場合に、今調査しようとしている記事が、既に調査済みのページなのか、また、調査した結果解決しなかった理由がなんだったのかが不明瞭になってしまい、重複して調査してしまう事があります。 そのような2度手間を防ぐために「エラー事案」に対し、「調査済みURL」と「その記事の調査結果」を管理できるアプリがあれば便利であると考えたからです。 また、チームメンバーと調査履歴（例えば「この記事に書かれている実装を試してみましたが、このような理由で解決しませんでした。」等）を共有することにより、協力を依頼する際にも、事案コードを渡すだけで、既にどのページが調査済みなのか、調査した結果どうだったのかが分かる為、協力依頼者、協力者間での情報共有がスムーズになると考えました。 さらにクローム拡張機能と連動することにより検索結果一覧や表示中の記事の調査結果を確認することができれば効率よく調査が進めることが可能になると考えました。 以上の動機によりこのサイトを作成しました。 使用イメージは下記の「使用イメージ」をご確認下さい。 |
| 使用技術 | ・Vue3 ・TypeScript ・Pinia(状態管理) ・Docker ・TailWind CSS(cssライブラリ) ・Firebase - Cloud Firestore - Functions - Hosting - Storage ・Chrome 拡張api(manifest v3) ・rules-unit-testing, vue-test-utils(テストライブラリ） |
| 開発に際し記載した Qiita記事 | https://qiita.com/sho_U/items/252166063080e8e7f56d https://qiita.com/sho_U/items/aae93bfb455ee983f709 https://qiita.com/sho_U/items/5e24db0fa8764e8d1ee0 https://qiita.com/sho_U/items/49100103c7165fb5c789 |
| 制作日数 | 30日間 |
実装機能
| 認証機能 | ・メールアドレス + パスワードで認証。 ・サインアップ時に登録されたアドレスに、登録メールが届き、認証リンククリックで登録される。 ・メールアドレス変更 ・パスワード変更 |
| エラー事案（トピック） 登録機能 | ・エラー事案をマークダウン形式登録可。 ・登録できる内容は下記 - タイトル - 内容 - 写真 - 調査状態（「解決済」「未解決」） - 登録日（自動取得） - 更新日（自動取得） - トピックID（自動取得） |
| エラー事案（トピック） 編集機能 | ・登録済みのエラー事案（トピック）を編集可。 ・更新できる内容は下記 - タイトル - 内容 - 写真 - 調査状態（「解決済」「未解決」） - 更新日（自動取得） |
| 調査履歴 登録機能 | ・エラー事案（トピック）に紐づく調査履歴を登録可。 ・登録できる内容は下記 - URL - 調査内容 - 写真 - 調査結果（「未調査」「未解決」「解決」） - 登録日（自動取得） - 更新日（自動取得） - 調査履歴ID（自動取得） |
| 調査履歴 編集機能 | ・エラー事案（トピック）に紐づく調査履歴を編集可。 ・登録できる内容は下記 - 調査内容 - 写真 - 調査結果（「未調査」「未解決」「解決」） - 更新日（自動取得） |
| 事案共有機能 | ・事案（トピック）に対し、任意のユーザーにアクセス権限を与えて共有（表示）することが可能。(初期状態は作成者しか表示できない） ・共有された事案（トピック）に紐づく調査履歴を（表示、編集、追加登録）が可能。 ・事前にユーザー設定で登録してるメンバーをドラッグアンドドロップで追加。 共有された人は、事案（トピック）一覧ページに共有された事案が表示される。共有された人は事案IDから検索が可能となる。 |
| chrome拡張機能から調査状況を確認 | ・chromeの検索結果のリンクから調査履歴を確認 ・表示中のページの調査履歴を確認 ・調査履歴が存在しない場合は、クローム拡張から新規調査履歴作成可（詳細はサイト側で引き継いで行う。） |
| ユーザー設定 | ・ユーザー名、メールアドレス、パスワードの変更、メンバーの追加削除が可能。 |
| 事案（トピック）一覧 フィルタリング機能 | ・「トピックID or タイトル」 フォームに入力した値でトピックIDもしくは、タイトルで一覧をフィルタリングします。(部分一致) ・「状態」 セレクトボックスを変更することにより、トピックの状態を「未解決」、「解決済み」フィルタリングします。（初期値は「全て」） ・「作成者」 セレクトボックスを変更することにより、作成者が「自分」、「自分以外」でフィルタリングします。（初期値は「全て」） |
| 調査履歴 一覧 フィルタリング機能 | ・「URL」 フォームに入力した値からURLでフィルタリングします。(部分一致) ・「履歴ID」 フォームに入力した値から履歴IDでフィルタリングします。(部分一致) ・「状態」 セレクトボックスを変更することにより、トピックの状態を「未調査」「未解決」「解決」フィルタリングします。（初期値は「全て」） ・「作成者」 セレクトボックスを変更することにより、作成者が「自分」、「自分以外」でフィルタリングします。（初期値は「全て」） |
使用イメージ
DB構成（FireStore）
・セキュリティールール
https://github.com/shobaseprg/searchistory/blob/master/src/searchistory/firestore.rules
・セキュリティルールーテスト
https://github.com/shobaseprg/searchistory/blob/master/src/searchistory/src/__tests__/firebase/firestore.test.js