【個人開発】DMM.comの女優APIを使って約5万人の女優を検索できる驚異のサービスを作った

#DMM.comの女優APIを使って約5万人の女優を検索できる驚異のサービスを作った
DMM.comにDMM Webサービスというのがあって、DMMアフィリエイトのサイト申請をしたらAPIを使うことが出来る。その中に女優APIなるものを見つけた。これを使えば自分が欲しかった検索サービスが作れそうだったので実際に作ってみた。その名も驚異のFANZA女優検索だ。ご存じ（？）の方も多いと思うがDMM.comと言えば一部のページでは公序良俗に反する表現を多分に含んでいる。その時点でQiitaの利用規約にある性的な表現に該当し公序良俗に反する恐れがあるものに引っかかる恐れは拭えない。自分としては、内容を吟味して汎用的に使える技術情報をピックアップして、少なくとも書いてある文章に関しては公序良俗に反しない内容として書いたつもりだ。（まあそれでも何か言われたら、その時に考えるというスタンスで…）

#使用した技術

対象	技術
フロントエンド	HTML5, CSS, Bootstrap 4, Font Awesome 5, JavaScript, TypeScript, LibMan
バックエンド	ASP.NET MVC 5, Entity Framework Core, SQL Server 2019
インフラ	Azure Web Apps, Azure SQL Database, Azure Webjobs
API	DMM Webサービス 女優API, slack api, MediaWiki API, Azure Computer Vision
ソース管理	GitHub

#女優APIの使い方
先ずは女優APIの使い方から。一番高いハードルはDMMアフィリエイトのサイト申請かもしれない。サイトがあれば3営業日程度で審査結果が返ってくる。その際は利用規約をよく読もう。読まないと落ちることもある。自分も1回落ちている。承認されれば、DMMから認められし漢として、DMM webサービスのアカウント情報にアフィリエイトIDが記載される。また、APIを確認すればAPIIDも取得出来る。この状態で以下のようにAPIを叩けばjsonの情報が取得できる。注意点としてはアフィリエイトIDは後から変更ができない。

https://api.dmm.com/affiliate/v3/ActressSearch?api_id=[APIID]&affiliate_id=[アフィリエイトID]&keyword=%e3%81%82%e3%81%95%e3%81%bf&gte_bust=90&lte_waist=60&sort=-bust&hits=10&offset=10&output=json

取得できる内容は「ステータスコード,取得件数,全体件数,検索開始位置,女優情報,女優ID,女優名,女優名（読み仮名）,バスト,カップ数,ウェスト,ヒップ,身長,生年月日,血液型,趣味,出身地,画像URL,画像（小）,画像（大）,リストページURL(アフィリエイトID付き),動画,月額動画 見放題chプレミアム,DVD通販,DVDレンタル」。自分が使いたい内容もちゃんと含まれていた。それがバスト、日本語で言えば胸囲だ。胸囲で女優を検索する方法が本家のDMM.comにはない。自分は女優を胸囲で検索したかったので、それが出来るサービスを作った。

#女優APIの情報をデータベースに流し込む
次に女優APIで女優の全情報をSQL Serverに流し込むプログラムについて。HttpClientで女優APIをリクエストして返ってきたJSONを定義したクラスに変換する。このクラスをさらにSQL Serverのデータに変換して書き込む。女優APIの1回の呼び出しがMax100人なので、都度hitsとoffsetを足しながら取得していく。

internal static async Task<IEnumerable<Actress>> GetScrapingActressAsync(string apiId, string affiliateId)
{
    //女優APIをリクエスト
    var url = $"{DmmApiUrl}/ActressSearch?api_id={apiId}&affiliate_id={affiliateId}&hits={Hits}&offset={Offset}";
    var response = await HttpClient.GetAsync(url);
    var jsonString = await response.Content.ReadAsStringAsync();                       //JSON文字列を取得
    var actressSearch = JsonConvert.DeserializeObject<ActressSearchJson>(jsonString);  //定義したクラスに変換
    return actressSearch.ToActressList();                                              //データベース用クラス変換
}

これをAzure Webjobsなどで動かすと約5万人の女優の情報が取れる。

#データベースの情報をWebサービスに表示する
約5万人の女優データ。これだけでもうわりと楽しめる。実際自分も色んなクエリを書いて遊んだ。プログラマであればこのデータベースだけで十分成立する気もするが、データベースが分からない人には何のことか分からないので、UIを乗っけて検索出来るサービスにした。最初は胸囲が100cm以上の女優約500人を見られるだけのサイトにした。ただ、これだと大きい胸囲が好きという人向きのサービスになってしまう。そこでもう少し検索機能を充実させて胸囲のサイズかカップ（もしくは名前）で検索出来るサービスにした。

#公序良俗を守るための技術
自分のやりたかったことはあくまで胸囲で女優を検索することで、それ以上は本家へのリンクで楽しめば良いという考えだったので、最初はトップページのみでかつ公序良俗に反しないように作った。公序良俗を守るにあたって一つ問題があって、女優のバストアップ画像をアイコンとして表示しているが、アイコンの中には稀に公序良俗に反する表現があった。そこで、公序良俗に反する表現かどうかをComputer Visionで成人向けコンテンツを検出して、成人向け画像と判定されたアイコンは表示しないようにした。目で確認した感じだと、成人向け画像でないもの成人向けと判定するすることはあっても、逆はなさそうだった。（その後年齢認証をつけたページも作ったが、この内容にふれだすと確実に公序良俗的に違反するのでトップページの内容に留めておく）。公序良俗って何回言った？

#検索機能
検索は、数字(70～160)かアルファベット(A～Z)を入れることで検索出来る。また入力しなくても選択で選ぶことも出来る。さらに100と打った後は、101とインクリメンタルに検索出来ると便利だと思ったので、クリックだけで検索出来るアップボタン、ダウンボタンを作った。正直自分で検索する時も殆どこのボタンを使うぐらい便利だ。イコール(=)だけでなく以上(>=)も簡単に検索出来るようにしたかったので、+で以上検索できるようにした。具体的には100と打てば「100」、100+と打てば「100以上」がヒットする。これもボタンで検索出来る。全部ナビゲーションバーにまとめてある。

#コアウェブバイタルとレスポンシブデザインへの注力
今回コアウェブバイタルに気をつかった。具体的にはGoogle PageSpeed Insightsでなるべく高いスコアが出るようにした。驚異のFANZA女優検索は（ばらつきはあるが）パソコン版なら90点以上、モバイル版なら70点以上は出ると思う。jsやcssは可能な限りMinifyした。データベースのクエリも無駄がないか見直した。スコアが下がらないという理由で採用したデザインもある。後は、レイアウトを常にシンプルに保つことを強く意識した。表示する内容は本当に精査して厳選したつもりだ。それとGoogle Chromeのデベロッパーツールでデフォルトで登録されているスマホ（Galaxy foldは除く）とパソコンではどの画面サイズで見てもレイアウトが崩れないようにレスポンシブデザインに気をつけた。もろもろトータルでスコアが上がっていった。

#まとめ
こんな感じで、自分が欲しい機能だけを実現するためにサービスを作った。当初考えていたりよりも色々本気になって作ったため、トータルではそこそこ時間もかけている。データに関してはほぼDMM Webサービスで取得出来るデータだけを使っているので、実データとして持っている量はかなり少なく、ソースもかなり少ない。にも拘らず、こちらを見ると分かるが、ページ数だけはやたら多い。こういう便利なAPIが提供されているのは本当に偉大だと思う。有難う。DMM大明神。というわけで驚異のFANZA女優検索。どうかよろしく。