Memorandum

普段の生活の覚え書き。主に技術録

Webアプリ作りました！

Javascript Python Webアプリ プログラミング

このところブログの更新がなくて申し訳ありませんでした。 実はWebアプリの開発に乗り出していて、そちらの方に時間を割いていました。

18禁のWebアプリになるのですが、興味がある方は是非見ていってください。

AV-Concierge (18禁です！)

このようなWebアプリを一人で開発したのは初めてで、いろいろわからないところも有りましたので、開発の経緯や使用している技術、苦労した点などを書き記して行こうと思います。

きっかけ

開発を始めたきっかけとしては、ニコニコ生放送というサービスで普段見ている生主さんがいるんですけど、ある日の放送中にリスナーさんが「質問内容や好きな女優さんを答えていくと、その人にあったAVを紹介してくれるサービスが欲しい」というコメントが有り、生主や他のリスナーさんもそれに賛同していたので、面白そうだと思い作ってみることにしました。

また、ちょうどその頃Qiitaで18禁系アプリを開発したという投稿があり、使用技術や実装方法などを紹介していたので、それに感銘を受けて私も開発してみる気になりました。 その投稿がこちらです。

https://qiita.com/mikan3rd/items/97cd0795cfcd4f548967

上記のサービスは詳細に技術や実装方法を説明していたのですが、なかなか難易度が高いと思ったので、私はある程度ランクを落としてできることをやってみようと思いました。

データ収集

上記のQiitaの記事でもあったのですが、DMM.R18(現在はFANZA)から商品の情報や画像などを取得していて、私も必要な情報をFANZAから取得してきました。

取得するときに使った方法が機械学習などでよく使われるPythonというプログラミング言語を使用しました。 Pythonと言う言語は使ったことがなかったので、いろいろ調べながら作成していきました。 その中で参考になったサービスが、現在加入しているN予備校の機械学習入門というコースがあり、その中でPythonの基礎を学びました。 また、AidemyのPython入門のコースを受講しました。

Pythonの文法の基礎を上記のサイトで学び、データ収集をはじめました。 データ収集の方法は以前ブログで紹介した方法で収集することができました。

データ収集の方法を学び、ブログの記事にしたり、また普段の作業で面倒なことを自動化するという事もできましたので、目的以外の副産物もあったと思います。

Webサイト構築

目的のデータを集めることが出来ましたので、次にWebサイトの構築に入りました。 Webサイトの構築はRubyやJavaScriptでやったことがあるのですが、今回は復習と応用の意味も兼ねてN予備校で使用した技術を使って構築することにしました。 せっかくPythonを学び始めたので、PythonのWebフレームワークのDjangoというのを使ってみたかったのですが、新しい技術でできるか心配だったので、やったことのあるJavaScriptを使って作成しました。

開発環境はMacbook Pro上に立てた仮想マシンubuntuで開発しました。 使用した技術としては、

上記の技術を一度N予備校で使ったことがあったのですが、やはり自分のサービスに適用させるには知識不足で技術の本質を理解していない感じがありました。 それなので、N予備校の教材をもう一度見直したり、使用している技術で調べたりしながら勧めていきました。

また、最後の最後に迷ったところが、セッション管理が出来ていなくて、選択肢の内容がユーザごとに混合してしまっていました。 セッション管理の技術や知識についても不足していたのでいろいろ理解が出来ていないことが分かりました。

自分の知識の理解を深めるためにも、今後このブログで技術の紹介していこうと思います。

工夫した点

このサービスの肝でもある、選択肢の内容とそれにマッチした商品の紹介の方法を工夫しました。

マッチングの方法は選択した内容と、商品のジャンルを文字列で比べて、その文字列同士が似通っている順番に紹介しています。 マッチングした文字列とジャンル文字列の比較をレーベンシュタイン距離という方法を使って算出しています。 レーベンシュタイン距離は、文字の挿入・削除・置換の処理をいくつ組み合わせたら、一方の文字列をもう片方の文字列に合わせることのできる手数になるのかを算出するアルゴリズムです。

レーベンシュタイン距離を取り入れたことにより、選択した内容にある程度マッチした商品を紹介できているのかなと思います。

しかし、今のところは選択する回数が3回固定で、ジャンルも3つ程度の商品が紹介されがちで、マッチングの程度はまだまだ低いと思います。 今後はデータを拡充して、画像選択や選択内容に合わせた質問内容の表示、AIなどの機械学習技術を導入してよりマッチングの練度を上げれたらいいなと思います。

最後に

こういったWebアプリを一人で開発したことがなかったので、開発して公開出来たのは凄い自信がついたと思います。 開発途中でいろいろ壁があって挫けそうになりましたが、ニコニコ生放送でお気に入りの生主さんに紹介したい、もしかしたらお小遣い程度になるかもという動機でモチベーションを保つことが出来ました。 開発技術の勉強でスクレイピングやブラウザの自動操作などの手法もわかったので、成果物の他にも得るものがあってよかったです。

このアプリを使ってみて何か意見・要望・感想などが有りましたら、どうぞ気兼ねなくコメントいただけると嬉しい限りです。