--- title: 【Qiigle】というQiitaの記事を検索するサービスを作りました tags: QiitaAPI Qiita 検索エンジン PHP tailwindcss author: d0ne1s slide: false --- **[Qiigle](https://qiigle.com/)**という、Qiitaの記事を検索するサービスを作りました。 サイトURL: https://qiigle.com/ GitHub: https://github.com/nyshk97/qiigle ![how_to_use_qiigle (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/244893/705f60c4-238e-f10e-f048-0a7f3a443800.gif) ## 何ができるか(仕様) - Qiitaの記事を「ユーザー名」「タイトル」「本文」「タグ」で絞り込んで表示します - 複数入力した場合、**AND条件**になります - ユーザー名とタグは**完全一致**、タイトルと本文は**含む**です ## なぜ作ったか 開発中に過去自分が書いた記事を参照することがよくあるのですが、数が多くなってきて探すのが大変になってきました。(ブックマークで管理するのツラい) ユーザー名 + 記事の内容で簡単に記事を検索する方法がありそうでなかった(どの方法もちょっと面倒だった)ので作ってみました。 ## 使用技術 - ConohaWing - PHP - Tailwind CSS(CDN) - HTML ## やったことまとめ - [GoogleDomains](https://domains.google/intl/ja_jp/)でドメインを取得 - レンタルサーバー([ConohaWING](https://www.conoha.jp/wing/))のコンパネからサイトを追加 - DNSの設定(ConohaWingのネームサーバーをGoogleDomainsに登録) - [QiitaAPI](https://qiita.com/api/v2/docs)のアクセストークンを取得 - [POSTMAN](https://www.postman.com/)でAPIを叩く - HTMLでフォームを作成 - フォームから受け取ったデータを使いPHPでAPIを叩く - 取得したデータを整形して表示 - [Tailwind CSS](https://tailwindcss.com/)でデザインを整える - SSL有効化 - URL正規化 - ファビコンを作成→設置 - TwitterOGPの設定 - [GoogleAnalytics](https://analytics.google.com/)の設定 実装はシンプルでもやることが意外と多くて、結局半日かかりました。 超久々にPHPを書きました。(普段はRubyを書いています) ## ソースコード Formから受け取った値を使って[QiitaのAPI](https://qiita.com/api/v2/docs)を叩くだけのシンプルな実装です。 Tailwind CSSをCDNから読み込んでいます。 画像ファイル等も含めたソース全体は[GitHub](https://github.com/nyshk97/qiigle)からご確認ください。 ```html:index.php Qiigle - qiita記事検索サービス

Q i i g l e by d0ne1s

Qiitaの記事を検索します

``` ```search_result.php $url, CURLOPT_CUSTOMREQUEST => 'GET', CURLOPT_SSL_VERIFYPEER => false, CURLOPT_RETURNTRANSFER => true, CURLOPT_HTTPHEADER => ['Authorization: Bearer MY_ACCESS_TOKEN'], ]; curl_setopt_array($curl, $option); $response = curl_exec($curl); $articles = json_decode($response, true); curl_close($curl); ?> 検索結果 | Qiigle - qiita記事検索サービス  

Q i i g l e by d0ne1s

検索結果 (ユーザー名: , タイトル: , 本文: , タグ: )

``` ## 機能追加(08/03) - 検索結果画面にLGTM、投稿日、更新日を追加 - ユーザー名を記憶する機能を実装 ## 参考 - [Qiita APIを使って記事一覧を取得する - Qiita](https://qiita.com/kou_pg_0131/items/57f86a1abc332ed2185d)