🏮「文章をお祭りっぽく翻訳するChrome拡張機能」をチームで開発しました🏮
はじめに
ウェブページの文章をお祭りっぽく翻訳するChrome拡張機能「textval」をチームで開発しました！
開発の経緯
2024年9月の技育CAMPハッカソンvol.14 テーマ「祭」に友人と3人チームで参加し、開発しました。3人ともばらばらの場所に住んでいて、以前の技育ハッカソンの即席チームで出会った!というエモすぎチームです。
わいわいみんなでアイデア出しをして、10個以上の案の中から、kuroさんの「お祭りっぽく翻訳できる拡張機能を作りたい！」という案が、アイデア的にも難易度的にも良いのでは？ということになり、作ることになりました。
こだわり①形態素解析で、コスト0で自然な翻訳
当初、アイデア決めの段階では、生成AIを使って翻訳を行う想定でした。しかし、メンバーの1人が実際にOpenAIのAPIを使って翻訳を行ったところ、ウェブページ全体を1回翻訳するだけでジュースが1本飲めるくらいお金がなくなってしまうということが発覚し、生成AIを使う路線からの方向転換を迫られました。
もうシンプルに単語ごとに置き換えていくだけでもいいのでは？という感じもあったのですが、形態素解析という言葉の響きがなんとなくカッコよかったので少しでも翻訳の質を高めたかったので、形態素解析を行った上でルールに沿って変換を行いました。
解析...完了！（データキャラ）
形態素解析とは、平たく言うと品詞分解のことです。これをすると何がうれしいのでしょうか。例えば「分かる→分かりやす」「選ぶ→選びやす」みたいな変換を作りたいとします。まず思いつくやり方が、全部の動詞に対して人力で涙を流しながらリストを作るという方法ですが、どう考えても効率が良くありません。
（ちなみに、るで終わる動詞は、りやすで終わる形に変換される、みたいには限らず、「割れる」は「割れりやす」ではなく「割れやす」になる、みたいなパターンもあります。涙なしには語り切れない）
形態素解析をしてから上記のようなルールで変換することで、無限例外処理編に突入することなく、サクッと正しい変換が行えます。文法の力は偉大です。
変換部分について、JSでの実装は、ほかのメンバーのお2人がやってくださりました。ありがとうございます。kuromoji.jsというライブラリを用いることでバックエンドなしで形態素解析ができてかなりありがたいです。
あと普通にウェブページの文章を取得して、DOMを更新して変換後の文章で置き換えるという大仕事もしれっと他のお2人のメンバーがやってくださっているのに、私が本当に理解していなさすぎて書けなくてすみません。記事書いてほしいです♪
こだわり②お祭り気分になれる最高のデザイン(進化中)
ここも他2人のメンバーにめちゃくちゃお任せしてしまった部分です。感謝しかない。なんやかんや、評価してもらえるポイントとしては、デザイン素敵！って言ってくれる人が1番多い気がしてます。
メンバー3人ともバック寄りで、以前のハッカソンではつよつよフロントエンドの方にまかせっきりだったので、ハッカソンがはじまるまでは「このチームの成果物、いにしえのテキストサイトみたいな見た目になっちゃうんじゃないか...そしたら恥ずかしくて外を歩けないよ...」と不安でたまりませんでした。
しかしフタをあけてみると、
素晴らしく精密な私のスケッチ
出来上がってきた拡張機能ポップアップ
気づいたらサイト上に自然発生していた、ハイクオリティおみこし人間
本当に信じられないことなのですが、kuroさんが、初めてドット絵に触れてから、1-2週間ほどで↑のようなドット絵がかけるようになるという異常能力を発揮したことにより、参加前に抱いていたデザインへの不安はなんかすべて大丈夫な気がしてきました。
また↑のようにサイトのフォントを元々のものからいじって毛筆風にしたり、背景画像をつけたり、絵文字を入れまくったりなどもmarugameさんが色々作ってくださり、気づけばかなり見栄えがよくていい感じな拡張機能になりました。ここもほめていただけるポイントです！
まとめ
そんなこんなで、なんかいい感じになりました。ハッカソンでは優秀賞をいただきました！完全にユニーク賞狙いの気持ちでいたので、びっくり&うれしい気持ちです！
ストアに公開しているので、よければ使ってみてください！
また、いきなり拡張機能入れるのはハードル高いぜという方向けにデモページも公開しているので、よければ、まずはお堅い技術記事などコピペしてﾆｺﾆｺしてみてください！
現在、2週間後の技育博というイベントに向けて継続開発中です。3人とも、拡張機能作りもフロントエンドもまだまだ慣れていなくて、手探りで作っているので、「この部分が好き！」「実際に使ってみたらここが少しわかりづらかった！」「CSSのこの機能を使ってもっと祭りっぽくできるぜ！」みたいなあらゆるコメント・フィードバック・アイデアを心からお待ちしています！
最後までお読みいただき、ありがとうございました！
Discussion