Nani!?翻訳を参考にしたAI翻訳アプリ「Fumu!」を作った

Nani!?翻訳を参考にしたAI翻訳アプリ「Fumu!」を作った

AI翻訳アプリの Fumu! というものを作りました。

https://github.com/yoima-jp/Fumu-Translate

きっかけはNani翻訳

Fumu!を作るうえで、かなーーり参考にしたのが Nani翻訳 です。

Naniを使っていて一番いいと思ったのが、翻訳したいと思った瞬間にショートカットですぐ見られることでした。

ブラウザで英語を読んでいるときに、分からない文章がある。

普通なら文章をコピーして、翻訳サイトやChatGPTを開いて、貼り付けて、翻訳して、また元のページに戻る。

一回だけなら大したことはないけど、何度もやると結構面倒

Naniでは文章を選んでショートカットを押すだけで、ウィンドウが開いて翻訳が出てきます。

この体験が思ってた10倍ぐらい便利でした。

わざわざ「翻訳する」という作業に切り替える必要がなくて、読んでいる流れをほとんど止めずに意味を確認できる。

Fumu!でも、この部分はかなり参考にしています。

文章を選んで Ctrl+Shift+J。

それだけで、選択した文章の近くに小さな翻訳ウィンドウが表示されます。

ブラウザでも、エディタでも、PDFでも、基本的には同じように使えます。

UIや使い方もかなり参考にした

ショートカットで呼び出す部分だけでなく、NaniのUIや使い方もかなり参考にしています。

翻訳アプリは毎回使うものなので、機能が多いことよりも、邪魔にならずにすぐ使えることの方が大事だと思っています。

普段はなるべくシンプルにして、必要になったときだけ細かい設定に触れられる。

Fumu!でもそういう作り方を意識しています。

なので、実際に触るとNaniに似てるなーって感じる部分は普通にあると思います。

そこは意図的です。

自分で作りたかった理由

Naniの翻訳体験はかなり好きだったんですが、自分で使うなら、もう少し自由にしたい部分もありました。

特に大きかったのが、翻訳に使うAIを自分で選びたいということです。

最近は新しいAIモデルがかなり頻繁に出てきます。

ChatGPT、Gemini、Claudeだけでなく、OpenRouterやDeepInfra経由でいろいろなモデルを試したり、OllamaやLM Studioでローカルモデルを使ったりもできます。

自分はそういうモデルをいろいろ試すことが多いので、翻訳アプリ側で使うAIが固定されているより、自分で好きなものを選びたいなーって

そこでFumu!では、かなり多くのプロバイダーを使えるようにしています。

ChatGPTへのログインのほか、OpenAI、Anthropic、Gemini、Groq、OpenRouter、DeepInfra、Mistral AIなどに対応しています。

OllamaやLM Studio、OpenAI互換のローカルサーバーも使えます。

普段は速いモデルを使って、必要なときだけ別のモデルを試す、といった使い方もできます。

でも、自由にした結果使いにくくしたくない

対応するAIや設定を増やしていくと、アプリはいくらでも複雑にできます。

でも、Fumu!ではそこをなるべく表に出したくありませんでした。

普通に翻訳したいだけなら、文章を選んでショートカットを押すだけ。

細かく設定したいときは、そのとき初めて設定できればいい。

Fumu!では、

「自由度は高く、表面はシンプルに。」

という考え方を大事にしています。

使える機能を増やすことよりも、その機能を増やしても普段の操作が複雑にならないことを重視しています。

スポンサードリンク

v1.0.0を公開しました

そんな感じで作ってきたFumu!ですが、ひとまず v1.0.0 を公開しました。

現在はWindows x64向けです。

GitHub ReleasesからSetup版とPortable版をダウンロードできます。

https://github.com/yoima-jp/Fumu-Translate/releases/latest

ソースコードもMIT Licenseで公開しています。

v1.0.0とはいっても、自分の中ではまだ最初の形ができたくらいです。

よければ使ってみてください。

不具合や要望があれば、GitHub Issuesにもぜひ。

スポンサードリンク

家のネットが死んだときにPerplexityがめっちゃ役立ったっていう話

はじめに

ちょっと前に家の回線がなんかイカれたせいで業者が直しに来るまでWIFIも電話も何もかも使えない状態になってしまったんですよ。

仕方なく作業をするときはスマホのテザリングでどうにかしていたんですけど、まあ速度が遅いのなんの、私はいわゆる格安simを使っているため、容量は多いんですけど速度が遅い！さらにテザリングするともっと遅くなるわけじゃないですか。もうねめっちゃストレスです

そんな状況だとネットで何か調べものするときに検索結果が出るのに数秒、さらに出た検索結果からページに行くのにさらに数十秒かかるわけですよ！まったくもって調べものができるような状況ではないです！！！本当に！！！！

そこで役に立ったのが！！そう！！！”Perplexity”です！！！

Perplexityとの出会い

そもそもPerplexityとは、最新の自然言語処理技術を活用した対話型のAI検索エンジンで、自然言語を使用して検索して、さらに自然言語で結果をまとめてくれる。っといったサービスです。

もともとPerplexityというサービス自体は知っていて、たまーに使ってはいたんですが、あまりその良さがわかっておらず、結局Googleで検索していたんですよね。

しかし、Perplexityは広告が表示されず、ページのほぼすべてがテキストのみであるため、広告と画像だらけのページを見る必要がなく、さらにPerplexityは複数の情報源を横断して回答を作成してくれるため複数の記事を比較する必要がないんですよね。

これもしかしたらネット環境が死んでるときにめっちゃ役立つのでは？

そう思って実際に使ってみた体験をだらだら語っていこうと思います。

弱ネット環境でのPerplexity体験

実際に試してみた結果、本当にゴミみたいなネットの速度でも使えるのかということですが、やはり検索ワードを入力して実行し、その情報がサーバー側に送られ、処理されたものが返ってくるまではGoogle検索よりは短いけどまあちょっとは時間かかるなっといった感じでした。

しかし、そのあとはとても快適で、AIが実際に検索を行って結果が返ってくるまであまりストレスを感じずに結果を見ることができました。

今現在は回線が普及してネットも快適に使えるようになったのですが、それでもPerplexityがとても便利だということが発覚して、現在でもPerplexityを高頻度で使用しています。

Perplexityの便利な機能

今回Perplexityを使っていった中で、どのあたりがとても便利に感じたかを適当に並べていってみます

スポンサードリンク

• 自然言語での質問・回答
• 会話履歴
• 比較がしやすい

自然言語での質問・回答

これはその名の通り自然言語で質問して、自然言語で回答をまとめてくれるのが便利だよねって話です。

ふわっとしたことや名前がよくわかんないやつでも気軽に質問できるのが便利だと思う

あと従来の検索エンジンと違って、いちいちページを見に行く必要がないっていうのが便利だよね。

会話履歴

Perplexityは質問するときに”スレッド”というのをそれぞれ立ててくれるんだけど、そのスレッド内では会話履歴があって、前の質問に対して、それって○○とはどう違うの？とか言うとそれとの比較をしてくれたりします

ただそれはPro Searchを使っているときであって、Pro Searchを使っていないと検索するときに会話履歴を参照してくれない感じがします。

ただ回答には会話履歴が乗ってる気がする(多分)

だからさっきみたいな質問をPro Searchを切っている状態ですると、○○について調べてくれるけど比較を検索してくれない、みたいな感じになってしまいます。そこがちょっとネックですよね。

比較がしやすい

これはどういうことかというと、例えば、「○○と△△と□□って何が違うの？」みたいな感じに質問したとします。

すると、Pro Searchを使ているとき限定にはなってしまうのですが、

”○○につて検索する”→”△△について検索する”→”□□について検索する”○○と△△と□□の違いについて検索する”

みたいな感じで検索してくれるため、それぞれの特徴などをしっかり含めたうえでとても精度の高い回答を出してくれるんですよね。

これって普通に便利で、普通これを人力でやろうとしたらものすごく時間がかかるじゃないですか、例えば、1つのことを調べるのに5分間を費やしていた場合、3つのことを調べるとすると15分もかかってしまうじゃないですか、だけどPerplexityのPro Searchだと、それが1分もかからないうちでできてしまうんですよね

しかも特定の話題に絞った比較もできるわけで、「○○と△△と□□の××って何が違うの？」みたいな質問をしても帰ってくるんですよ、もちろん一回最初に「○○と△△と□□って何が違うの？」って聞いといてそのあとにじゃあそれぞれの××って何が違うの？っていう感じにもできるんですよ。本当にこれが便利すぎる。

僕はこれがあるからPerplexityに課金してしまったみたいなところがあります。

実際課金する価値はあったのか？

私はこれがすごく便利だと思って課金までしてみたのですが、実際まだ課金してから日がたっていないのもあり、まだあまりはっきりしたことは言えないのですが、現時点では、課金した価値があると思っています。

課金することによってこれらの種類のモデルが使えるようになったのと、質問するときに”フォーカス”→”作成”にすることによって、検索なしの純粋な言語モデルとして使用できるモードもあるため、今現在としてはとても満足しています。

特に”コレクション”機能では、AIにカスタムプロンプトが設定できるため、作業を効率化させるためのツールとしても使用できます。

これは本当に便利で、私のYouTubeの原稿作成などにさっそく実践投入してみていますが、なかなかいい感じです。

まだまだ使いこなせていないのですが、取り合えず最初の1か月で今後も継続して課金していくべきなのかを判断していこうと思います。

なるべく安く課金する

課金するとしたらやっぱなるべく安く課金したいじゃないですか。

ということでなるべく安く課金するにはどうすればいいか！ﾁｮｺｯﾄ紹介していきます。

スポンサードリンク

まずはソフトバンク！！ソフトバンク、ワイモバイル、LINEMOのユーザーは1年間Perplexityを無料で使えます。最強です。一番安いプランを1か月契約するだけでもいいらしいので(多分(保障はしない))ほんとにこれが一番いいです。これにしましょう！やり方は各自で調べてください。

しかし！宗教上の理由などなど、ソフトバンクに契約するのが無理だよって方のための方法を紹介！

まず、Perplexityは課金するには、2つ方法があります。

1. webから
2. アプリから

これ実は値段が違って、webからだと月20ドル(3000円ぐらい？)でandroid版のアプリだと確か2000円超えなかった気がします。

じゃあアプリ版で課金するのはいいじゃん！って思うかもしれませんがちょっと待ってください！！！

実は、紹介リンクがあれば、ウェブ版から登録することで初月10ドル引きになるんです！！

これ使えば初月を1500円になります！！！その紹介リンクを下に貼っときます！！！

perplexity.ai

これで初月契約し、翌月解約してそれ以降はアプリから課金することによって節約ができます！

または、初月1か月だけ契約して、それに満足したらアプリ版で年間契約してしまうのもありだと思います。

それか最初からもう1年使うわ！！っていう方は、最初からアプリで契約したほうが安くなるのでそういう方はそれでいいと思いますが、私は一応一回試してみたほうがいい気がします。

以上です！これが少しでも役に立ったならうれしです！

Chrome Devにローカルで使えるGemini Nanoが追加されたので、ブログに要約ボタンを追加してみた！

要約する

Chrome内蔵Gemini Nanoで要約をする。(開発者版chromeで設定を有効にする必要があります。)

Chrome Devにローカルで使えるGemini Nanoが追加された！

つい最近Chrome Devにローカルで動かせるLLMが追加されました。

これは夢が広がる。

ということでうちのブログに要約ボタンを追加しました。

これ使える人ほとんど出てこないだろうけどねw

Gemini Nanoを使う方法とブログへの設置方法を紹介していきます

Gemini Nanoを使う方法

まず以下から開発者用のchromeをダウンロードしてください。

Google Chrome デベロッパー ツール - Google Chrome

ダウンロードしてもらったらchrome://flagsを開いて以下をEnabledにして、再起動してください。

・Enables optimization guide on device : Enabled BypassPerfRequestment
・Prompt API for Gemini Nano : Enabled

できたら、chrome://componentsを開き、Optimization Guide On Device Modelのアップデートを確認を押してください。

モデルがダウンロードされるまで結構時間がかかるので気長に待っててください。

Optimization Guide On Device Modelがない場合は、時間をおいていたらそのうち現れるのでYouTubeでも見といてください。

ダウンロード出来たらGemini Nanoが使用できます。

自分のブログに要約ボタンを設置する方法

以下のボタンとscriptをHTML内に配置すればOKです。

ボタン

<p><button id="summarizeButton">要約する</button></p>

script

<script>
document.getElementById('summarizeButton').addEventListener('click', async function() {
  // 要約ボックスをボタンの下に追加
  let summaryBox = document.getElementById('summaryBox');
  if (!summaryBox) {
    summaryBox = document.createElement('div');
    summaryBox.id = 'summaryBox';
    summaryBox.className = 'summaryBox';
    // ボタンの後に追加
    this.parentNode.insertBefore(summaryBox, this.nextSibling); 
  }

  // 初期状態を非表示に設定
  summaryBox.style.display = 'none';

  // 要約ボックスを表示し、「要約中...」と表示する
  summaryBox.innerHTML = '要約中...';
  summaryBox.style.display = 'block';

  const article = document.querySelector('.entry-content.hatenablog-entry');

  if (!article) {
    summaryBox.innerHTML = '指定された記事が見つかりませんでした。';
    return;
  }

  const paragraphs = article.querySelectorAll('p');
  const articleContent = Array.from(paragraphs)
    .map(p => p.textContent.trim())
    .filter(text => text.length > 0)
    .join('\n\n');

  if (articleContent.length === 0) {
    summaryBox.innerHTML = '記事内容が見つかりませんでした。';
    return;
  }

  try {
    const canCreate = await window.ai.canCreateTextSession();
  
    if (canCreate !== "no") {
      const session = await window.ai.createTextSession();
  
      const result = await session.prompt(`以下を3行で要約してください。\n\n${articleContent}`);
  
      const formattedResult = result.replace(/\n/g, '<br>');
      summaryBox.innerHTML = formattedResult; 
    } else {
      summaryBox.innerHTML = '要約セッションを作成できませんでした。';
    }
  } catch (error) {
    let errorMessage = '要約中にエラーが発生しました。';
    errorMessage += '<br>Chrome DevでGeminiが使用可能になっていない場合があります。以下の記事を参考に、再度設定してください：<a href="https://yoima2.hatenablog.com/entry/Gemininano_summary">Geminiの設定方法</a>';
  
    summaryBox.innerHTML = errorMessage;
  }

});
</script>

これをだけです！

CSSは各自適当にそろえてください。

それじゃあ今日はここらへんで！じゃ～ね～！！！