開発コンセプト
自分の目の前にあるものや思いついたことを入力するとBoketeから最適なBokeを検索して表示してくれるガシャサービス。
世の中に情報があふれる中、整理してわかりやすくまとめることも大事だが、意外性やランダム性も同時に需要があり、今回は「お笑い＋ガシャ要素」が親和性が高そうなのでチャレンジしました。
ウェブアプリ を作るのも久しぶりなので、設計と開発だけでなく、集客や広告についても考えながらやろうと思いました。
お笑いガシャウェブサイト：http://www.owarai-gasha.site/
↓
使用技術
・ Ruby on Rails
・ Heroku
・ スクレイピング(Mechanize)
・ お名前ドットコムで独自ドメインを取得
詳細設計
以下の通りに設計しました。機能的にはキモの部分だけでほぼ９０％ですが見た目や、ユーザビリティーなどその他付帯要素または解説などユーザビリティーも非常に重要で、基礎技術部分が開発されたからと言って全体が開発された事にはならない。
ユーザーにとっては、基幹技術部分は１０%くらいで、残りの90%はUIやユーザーフレンドリーな解説などが重要視されていると感じた。
（キモ）Mechanize を利用してBoketeをスクレイピングしてレンダリング
Mechanize やはりすごく便利です。以下の記事を参考にスクレイピング部分を完成させました。ポイントは、自分で入力したキーワードを元に対象サイトから情報を検索し表示させることでした。
参考：https://qiita.com/takuyanin/items/01256773e1cbfc84f51a
タグクラウド作成
こちらのCssを利用させていただきました。検索されたワードはDBに保存される設計にしたので、こちらが可能になりました。課題としてはNGワードを表示させないことですが、リスト作りは手作業になるのかな。。。
参考記事：https://296.co.jp/article/025815201928061430
上部に流れるテキスト作成
お飾りではありますが、これも必要かと思い作成しました。
参考記事：https://www.at-create.co.jp/staff-blog/css/180.html
検索システムのエラー処理
変なキーワードだとやはり検索結果がゼロで帰ってきます。そのためRescue処理を実装し、表示されない場合のエラー画面を作成しました。このような細かな処理はユーザーにとっては重要で見慣れない英語のエラーなどは不審なサイトとみなされてしまいます。。。
参考記事：https://qiita.com/ngron/items/4c319ae7340b72c7e566
Twitterに投稿したときのOgの設定
Twitterに投稿したときのカードの絵やテキストです。これも地味ながら非常に重要で、目につきやすくわかりやすいかなどがポイントです。やらないよりはやった方が１００倍いいです。
参考記事：https://qiita.com/d0ne1s/items/8f0193ea45d50a20e3d2
広告・公開
公開にはService Safari様を利用させてもらいました。
https://www.service-safari.com/posts/38644
個人公開なのでそんなに費用はかけませんが広告はGoogleではなく予算を決めてTwitterで挑戦してみようかと思います。始めてからこちらは需要があれば報告したいと思います。
今回は自分用のメモも兼ねてですがウェブアプリ お笑いガシャを作った事について大まかにまとめてみました。個別の技術の説明の方が需要があるかもしれませんが、自己満足も兼ねて投稿させていただきました（笑）スミマセン
よければ使ってみてご意見いただけましたら幸甚です。