思いついた勢いのままに Chrome extension『Kotoha』を作って公開しました。 chrome.google.com
コードもGitHubに公開してます。
勢いのままに作ったと言いましたが、Javascript触るの久しぶりな上に初めてのChrome extension開発ということで、 実質15〜6時間くらいかかりました。
完全に俺得Extensionなんですが、せっかく作ったので何を考えてたのかまとめておこうと思います。
知らぬ間にGIGAZINEにも紹介されていました。圧倒的感謝。 gigazine.net
どんなExtensionか
イケてるアニメの名言を簡単に引用できるようになるExtensionです。
名言をキーワードで探せます。
作品タイトルやキャラクター名でも探せます。
名言はアドレスバーの隣のアイコンから登録できます。
詳細はREADMEに全部書いてあるので、よければ見てみてください。
ちなみに、Kotohaの由来は『夜桜四重奏 - ハナノウタ』の五十音ことはです。 「ショートカット！でっかい水槽！」にインスピレーションをもらいました。
夜桜四重奏 -ハナノウタ- 第1話「サクラサク」 アニメ/動画 - ニコニコ動画
なんで作ったのか
普段仕事してて、名言を引用したいなぁと感じることが多かったからです。PullRequestレビューのLGTMの時とかに 『忠道、大儀である！ゆめ、そのあり方を損なうな』みたいな感じで、Fate/Zeroのギルガメッシュの名言を引用したかったりするんですよね。
また、ふと千石撫子の名言をつぶやきたくなることもあります。
嘘や、裏切りや、欺瞞や、偽善を許してやれる度量を持ちやがれや！ああん？！
— こにふぁー (@konifar) July 22, 2015
普通にGoogleで調べて書けばいいんですけど若干めんどくさいなぁと思っていて、じゃあChrome extension作ってみるかと思ったわけです。 最近Androidの開発をすることが多いので、なんか違うの作りたかったというのもあります。
名言はどこから取ってきてるか
理想を言うとあにふれーずから取ってきたかったんですが、開発してる@kgmyshinさんに聞いたところまだAPIは対応してないとのことでした。
じゃあとりあえず自分でサーバー側も作るかと思い、kotoha-serverも作りました。
kotoha-serverはRailsで作ってherokuで動いています。herokuは無料で動かせますし、SSLもサポートしてるのでExtensionからAPI蹴っても問題ないです。
あにふーれずAPIができたら乗せかえようと思います。
名言のデータ構造
名言を構成する要素は3つあります。 ①名言、②キャラクター、③作品です。
この3つをそのままDBのテーブルにするか悩んだのですが、 名言とタグのみというシンプルな構造にしました。検索の時はキャラクターか作品か関係なく検索したいですし、それらはタグで十分表現可能だと思ったからです。
また、例えば『椎名まゆり』でも『まゆしぃ』でも検索できるようにすることを考えると、どちらにしろタグ機能は必要だろうと思っていました。それなら、最初から全てタグで表現する方がシンプルに実現できそうだなぁと思ったんですよね。
さらに、登録時のフォームを考えると作品やキャラクター名を入力するのって意外とめんどくさいので、自由にタグを設定できる形にした方が名言登録されやすいのではないかとも考えました。やってみると思った通りで、タグで登録できるのはすごく楽ちんでサクサク名言を登録できてよかったです。
改善したいこと
早く公開しないと飽きちゃいそうだったのでリリースを急いだこともあり、バグも改善点も多々あります。
- 登録フォーム入力中の内容を保存したい
- 名言引用時に『』で囲いたい
- 名言のタグも一緒に表示したい
- サーバーの読み込みが遅くて動かないことがある
などなどです。
要望やバグ報告は全てGitHub Issueに集約しているので、何かあればお気軽にどうぞ。PullRequestも大歓迎です。
kotoha-alfred作りたい
すごい今さらなんですが、Chrome extensionだとWebでしか使えないので デスクトップアプリで引用できないんですよね。Twitterクライアント使っている自分にとっては、Twitterにサッと投稿できないのは結構致命的な問題でした。
今さらだけど、ChromeExtensionよりAlfredのフローにしたほうが良かったかも
— こにふぁー (@konifar) July 17, 2015
自分はランチャーにAlfred使ってるので、Alfredから引けるように kotoha-alfred作ろうと思います。そのうち作ります。
感想
初めてのChrome extension開発でしたが、ひとまず公開までできてよかったです。やっぱり小さい規模ならjQueryでがーっと書くのがなんだかんだ一番楽しいなと思いました。
At.jsとかjQuery-Tags-Inputとか使って補完するところ実装できたので、WhoVoiceにも適用しようと思います。新しい何かをキャッチアップする時に、小さいプロジェクトで試すのは効率いいなぁと思いました。
最後に、最近気に入ってるブラックラグーンのバラライカさんの名言で締めたいと思います。
『いこうか同士諸君、撃鉄を起こせ！』
いつか仕事でこのフレーズを使いたいです。
バラライカさんが気になってきた方はこちらをどうぞ。
