KonifarPod

同じ声のアニメキャラを検索できるサービス『WhoVoice』作ってみた

   

Pocket

同じ声のアニメキャラを検索できるWhoVoiceというサービスを作りました。その過程で色々考えることもあったのでまとめておきます。

 

発端は・・・

なんで作ったかというと理由は色々あるんですが、嫁とアニメ見てる時に頻繁に発生するやりとりが発端です。

 

〜 深夜アニメを見ながら 〜

なんかこの声聞いたことある

「え?誰?」

「ほら、あの人。サイコパスに出てた、一番かっこいいキャラの人

「名前は?」

「出てこない・・・。黒髪で、常守監視官と一番仲いい人

「えー。。。」

「(Wikiで調べる)あ!狡噛さんです!」

「あー!」

「(Wikiを見ながら)SAOのキバオウも同じ声なのか!」

「キバオウって誰だっけ?」

「(Googleで調べる)これこれ」

「あー!へぇ!シュタゲのダルも同じだよねぇ

!!すごい!声優さんすごい!

 

こんな感じのやりとりがよく発生するんですが、これ結構めんどいんですよね。

Googleでアニメタイトル検索してWiki開いて、登場人物セクションを開いて該当のキャラを見つけて、声優のページに遷移して出演作品セクションを開いて、

それでようやく同じ声のキャラのリストを見れても、思い浮かばないキャラは別途Googleで検索して画像を見たりして。

 

このキャラもやってるの!?という発見があるのはすごく面白いんですが、もう毎回調べるのめんどくて。同じキャラ検索サービスとかないかなと色々探したんですけど見当たらず・・・。

じゃあ自分で作るか、ということで作りました。

 

絵に書いてみる

まず、絵を書きながらどんなの作ろうかなぁと考えていきました。

Whovoice1

Whovoice2

 

同じ声のキャラを検索したいなぁ、くらいのふわっとした感じでしたが、書きながら1人ブレストみたいにしているうちに色々やりたいことが浮かんできて、なんとなく仕様が決まってきました。

  • 必須なのは、作品、キャラ、声優。それぞれ画像は必須。
  • キャラの名セリフを表示したい。(本当は声再生できるようにしたいけど)
  • 今期のアニメとかはすぐ見れるようにしたい。
  • シータとドラミちゃんが一緒、みたいな面白い組み合わせを作れるようにしたい。
  • ビックリ!ボタンみたいのをつけて、意外なキャラの組み合わせを順に表示したい。
  • 検索は、ひらがなでも英語でも何でも検索できるようにしたい。

 

実装はじめる

このへんは書いてもあんまりおもしろくないので、やったことをさらっと。詳しくは別途書こうと思います。

  • とりあえず勉強のためにRails4でやろうと決める
  • WikiにDB構造とか環境とか色々ちゃんと書いてやる気出す
  • Twitter Bootstrapは使わない。自分でデザインしてみると決める
  • 自分でデザインするために赤塚さんのズルいデザインを熟読
  • ズルいデザインのとおりにsassを作成。テーマカラーや背景を決める
  • アイコンはfont awesomeで。assetsは背景画像のみにする
  • Google fontでテーマフォントを決定
  • jQueryは使わない。zepto.js+backbone.jsでやると決める
  • ざっと画面を作る
  • アニメデータはアニメデータベースlainをクロールして取ってくる
  • クロールさせてくださいメールを管理者に送ってOKをもらう
  • Railsのクローラの勉強をして、Anemone + Nokogiri でやることに決定
  • AnemoneのstorageにmongoDBを使うことになったのでmongoDBをちょっと勉強
  • ひらがな、カタカナ、ローマ字でも検索できるように、YahooのルビふりAPIを利用
  • アニメ作品、声優、キャラDBを作るバッチを作成
  • ルビふりバッチを作成

 

やる気がなくなる

で、深夜と土日使って1週間くらいでとりあえず動くところまで行ったんですが、やる気が一気になくなってしまいました。

原因は明確で、つい楽しくなって色々構想を広げすぎた挙句めんどくなってしまったんですよね。つまり自爆です。

自爆の流れを思い出してみるとこんな感じ。

同じ声のキャラで、こんな感じのまとめ作れたら面白そう! ⇒ でもそのためには登録画面が必要だなぁ。 ⇒ どういう画面がいいかな ⇒ あ、そしたらシェアボタンとかもほしいかも ⇒ 登録ボタンとか色々どこにつけよう・・・ ⇒ ユーザー登録もユーザーページも必要だな・・・ ⇒ めんどくさい

 

仕事が死ぬほど忙しくなったのもあり、ここで半年くらい休眠することになります。


復活する

という感じで半年以上眠っていたわけですが、その間もアニメを見ながら同じようにWikiを調べて声優見ては「え?!このキャラ同じなの?!」ということが何度もあり、そのたびに歯がゆい思いをしていました。

その思いが強まっていって復活に至ったというのもあるのですが、どちらかというと理由は別で、業務外で色々コード書いた方が仕事にもいい影響が出るなとひしひし感じたというのが大きいです。

実はちょっと前にコスプレイヤー向けのコスレーダーというアプリを作ったんですが、業務外でコード書いてると本当に勉強になることが多かったんですよね。

今はRailsよりAndroid Javaを書くことが多いんですが、Androidで試したいライブラリや実装がたくさんあってもイキナリ業務で試すわけにもいかず。じゃあ途中まで作ってあるサービスをAPI化してAndroidの勉強しようかなと考えたわけです。

 

で、そもそもめんどくさくなった原因は色々手を広げようとしすぎてめんどくなったことだったので、原点に戻って自分が何がしたかったのか考えなおしてみました。そこで気づいたのは、なんか色々やろうとしたけど結局同じ声のキャラを検索できればそれだけでいいってことなんですよね。むしろそれだけでシンプルにつくった方が楽だし使いやすいよなと考えなおしました。もしかしてこれがMostValuableProductってやつなんですかね?

 

検索だけであればもうほとんどできていたので、ActiveAdmin使って管理画面を作ってHerokuにデプロイしてバッチを実行したら動くようになりました。Herokuに慣れていない自分には結構ハマることも多くて四苦八苦しましたが、2日くらいで終わりました。Herokuすごい。

AndroidのAPI作る目的だったはずなんですが、結局気づいたらWebで表示して管理画面も作っていて、結局Androidの勉強はこれからなんですけど。。 DaggerとかRobolectricとか使ってみようと思います。

 

使ってみる

できたので使ってみたんですが、我ながら良い物作ったなぁとしみじみしました。

 

『作品・声優・キャラで検索』から、アニメやキャラを検索します。YahooのルビふりAPIのおかげで、『化物語』『あららぎ』『hanazawakana』など、わりと曖昧な感じでも大丈夫です。まだ完璧じゃないので出ないこともありますが。

Whovoice6

 

『化物語』のページに行くとこんな感じ。セリフを入れられるのは本当にいい機能だなと思いました。

Whovoice3

 

八九寺のページで見てみると・・・

Whovoice5

 

?!キュウべぇ?!まじか・・・!そう言われてみれば同じ気がするけど、そうかぁ・・・。まぁこんな感じで簡単にキャラ検索できてとてもいい感じになりました。

他にも、トトロのサツキ=タッチの南=サイコパスのドミネーターという事実には震えました。DEATH NOTEのニアも同じ声なんですね。

Whovoice7

 

ちなみに管理画面はActiveAdminというgem使ってほぼ何もせずに作れたのですが、こんな感じでテーブルごとにIndex、Show、Update、Deleteのアクションができます。CarrierWaveとか使って画像のアップロードとかしている場合も、特に何もしなくても動くので楽ちんです。

Whovoice4

 

作ってみた感想

つらつら書いてきましたが、色々考えたことをざーっと残します。

  • デザイナーさんに感謝。デザイン考えながら開発するの大変。
  • ズルいデザインすごい。赤塚さんのスライドめっちゃ読みました。
  • sassとかjsとかめっちゃ忘れてる。業務外で書いとかないとダメ。
  • クロール初めてやったけど、意外と簡単にできた。一度やったことがあるってのがいつか本業にも活きてくると思う。
  • クロール許可くれたlainさんに感謝。
  • MongoDBも初めて触れてよかった。
  • CarrierWaveの画像アップロードも自分で初めてやれていい経験になった。
  • 総じて、仕事でやれてないこといっぱいできてよかった。
  • けど色々やろうとしすぎるとやる気なくなっちゃうので注意が必要。
  • やる気なくなった時は、そもそも何がしたかったんだっけ?と思い出すの大事。
  • とりあえずショボくてもリリースまでやったらなんか気分いい。
  • 次はAndroidアプリ作る目的だったけど、Webをちゃんと作りたくなってきた。

 

利用規約も連絡先も何もないのでサービスと言っていいかわからないレベルですが、たぶん僕はほぼ毎日使うと思うのでとりあえずそれでいいかなと思います。

この俺得サービス WhoVoice、もし「私も得するよ!」と思ったら使ってみてください。

以上!

Pocket

 - 未分類