独学初心者がGoogle風の書籍検索サービスを作ってみた【個人開発】

2020-04-14T13:52:22+09:00

独学でプログラミングを学習しています。
「作りながら学ぶのがいい」ということでGoogle風の技術書検索サービスを開発しました。

アイデア的に似ているサービスはありますが、自分が欲しいものとは少し違っていたので作りました。

初学者なりに試行錯誤したので、アプリの仕組みや作った方法をまとめます。

プログラミング学習中の人や個人開発を考えている人のモチベUPに貢献できたらいいなと思います。

作ったサービス「技術書検索サービス」

作ったのは「Geekle（ギークル）」という技術書検索サービス。

-> Geekle（ギークル） | 技術書検索サービス

サービス概要

Geekleは、評価の高い技術書を検索できるサービスです。

例えば、「Pythonを勉強したい！どの書籍がいんだろうか！」ってなったときに「Python」というキーワード（キーワードはQiitaのタグにあるものに限定されます：サジェストで表示される）で検索すると、

その技術キーワードに対する「評価の高い書籍リスト」が検索結果として表示されます。検索結果の並びはQiitaでの言及記事数をはじめ、複数の要素から総合的に算出。

学びたい技術がある時に購入候補となる書籍を絞り込むのに使えます！

開発の動機

プログラミングを学習する中で、たくさんの書籍を購入してきました。

そのときに候補となる本をピックアップして、一つずつ評判を確認し、本屋で立ち読みして買ってたので、「○○という技術を学ぼう→その技術の評判の良い技術書がすぐわかるサービスがあったらなー」と思っていました。

Qiita上の書籍情報を見られるサービスはすでにいくつもありますが、既存のモノは「Qiita上の書籍情報を可視化すると面白い」というコンセプトであるため、キーワード（タグ）に対して関連性が薄い書籍も多く表示される仕様となっていました（それが書籍との偶発的な出会いになって面白いというコンセプト）。

自分の希望は「今、学ぶのに適した書籍の候補」をストレートに見つけられるサービスだったので、関連性の薄い書籍はない方がよかったし、なるべく情報が新しい評価の高い書籍が表示されて欲しかった。

そこで、自分の希望を実現したモノを作ってみました。

どう作ったか

使った技術とか

アプリ：Laravel + Vue.js
バッチ（DB作成）：生PHP
インフラ：AWS（EC2・RDS・Rout53・ALB）
制作期間：4ヶ月ちょっと

裏側の仕組みをどう作ったのか解説します。

自分なりに色々と考えて作りましたが、独学初心者なので生暖かく読んでください...。あと、「もっとこうすればいいのに！」とかあればアドバイスして頂けると嬉しいです。

書籍DBについて

書籍のDBは、QiitaのAPIで記事データを取得して、書籍へのリンクらしきURLを解析し、そこから書籍の識別番号(ISBN・ASIN)を抽出後、番号を使ってopneBDやGoogleBookApiなどで書籍データを取得して構築しています。

これらの方法は

の記事を参考にさせていただきました。

独学の自分がサービス開発できたのはこういったノウハウが公開・共有されていたからです。先人の皆様ありがとうございます。僕もこの記事でやったことを共有します(￣^￣)ゞ

書籍の順位付けを工夫

Qiitaの記事についているタグをそのまま書籍のタグとして、Qiitaで言及されている記事数をカウントすることでタグごとに書籍の順位づけを行っています。

しかし、Qiitaの記事数のみで順位付けを行うと、普遍的な名著（リーダブルコードなど）が多くのタグで上位を独占してしまるというデメリットがありました。

検索ワードが「PHP」でも「Ruby」でもリーダブルコードが一番上になってしまう。

また、出版から時間が経過している書籍の方が言及される記事数が多く、新しい書籍は言及される記事数が少ないため、新しい良本が上位に表示できなかったり、PHPとLaravelのように「言語」と「フレームワーク」の検索結果がほぼ同じになるという問題点がありました。

僕が作りたいのは「学習したい技術ごとに今選ぶべき良書がわかるサービス」だったため、なるべく情報の新しい良本が上位表示されて欲しいし、PHPなら生PHPの書籍が上位、LaravelならLaravelの書籍が上位という結果になって欲しかった。

そこで、Qiitaの記事数に加えて

・検索ワード(タグ）の文字が書籍のタイトルに含まれる場合はプラス点
・出版日時が古くなればなるほどマイナス点

などを加えて傾斜配点をかける事で検索結果を調整しています。

試行錯誤の結果、悪くない結果がでるようになりました。

(言語とフレームワークも異なる検索結果になってる)

今後も改良して精度を上げていきます。

デザインとか

デザインは、最初にカラー（紫・黒・白）を決めました。

柱となる色は紫をにしたのは、「プログラミングって現在の魔法っぽい→魔法は紫っぽい」という発想から。技術書を読んで勉強することを魔法を学んでる感じだと捉えると学習が楽しくなる気がします（中二心）。

レイアウトは、たくさんのサービスを並べて特徴を抽象化し、取り入れていくというやり方で考えました。

具体的に説明すると、書籍検索サービスは画像付きでコンテンツを表示するサービスになるよね→Amazonプライムビデオやネットフリックスなど画像付きでコンテンツを大量に並べてる有名サイトをいくつもみる→あ、横並びにしてスライドするUIがデフォルトっぽいなー（これが抽象化）→自分のサービスに取り入れるという流れ。

「基本となっている型を探す」という感じ。

今後の改良/グロース

やりたいことはたくさんあります。

・SEOに強い構成にする
・SPA化
・レビューを集める仕組み構築
・技術書のセール情報の掲載

などなど。自分の技術力向上やサービスグロースの実験の場としても使っていきたい。

振り返り

当初、2ヶ月くらいで作れるだろうと思っていたのですが、DBを作るのに時間がかかってしまい、想定の倍以上の時間がかかってしまいました。

開発中はわからないことだらけで苦しい時もりましたが、やっぱりプログラミングは楽しいですね！今回のアプリ開発を通してエンジニアになりたいという気持ちがより強くなりました。

もっともっと勉強して色々なアプリ作っていきたいです。

ここまで読んでくれた方ありがとうございます！
ぜひ試しに使ってみてください(≧∀≦)

Geekle（ギークル） | 技術書検索サービス

Jinの投稿 - Crieit

独学初心者がGoogle風の書籍検索サービスを作ってみた【個人開発】