📌
家事の隙間にAIに指令出してたら1時間半でLINE翻訳アプリが作れた
はじめに
こんにちは、やぐちはるおです。
日本語の読み書きができないおばあちゃんと連絡を取るために、LINE 用の韓国語翻訳アプリを開発しました。
開発時の驚きツイートを晒します。記事に書いてない思考過程みたいなのはこちらのツリーをご覧ください。
ソースコード
ソースコードは以下で公開しています。なんかまずいもの見つけたらこっそりツイートしてください。
使用ツール
- Node.js
- LINE Developers(Messaging API)
- DeepL API
- bolt.new ← ほとんどこいつがやってくれました。
開発の流れ
以下の流れで作りました。開始から完了までで 1 時間半です。
- bolt.new に指示を出す
- bolt.new の出力した .env ファイルに API キーなど追記する
- どっかにデプロイする
- LINE Developers にデプロイ先の URL を貼る
1. bolt.new に指示を出す
bolt.new とは、指示を出したらディレクトリ構成まで含めたソースコードを出力してくれる生成 AI サービスです。今回は以下の指示を出しました。
グループ LINE に招待すると、投稿されたメッセージを韓国語に違約する LINE bot を JavaScript で作成してください。
翻訳を違約と書き間違えていることに今気づきましたが、特に問題なくソースコードが出力されました。
2. bolt.new の出力した .env ファイルに API キーなど追記する
この時点では、LINE 用のトークンやシークレット、 DeepL API キーが設定できていないため、それぞれ取得して、bolt.new の出力した .env に追記します。
3. どっかにデプロイする
デプロイも bolt.new に任せました。画面右上の Deploy ボタンを押すとデプロイされます。簡単すぎる。
今回は Render にデプロイされました。Netlify にされる時もあります。
4. LINE Developers にデプロイ先の URL を貼る
LINE Developers の Web 画面にデプロイ先 URL を貼って、「検証」を押して通れば大丈夫です。詳しくは公式ドキュメントへ!
動作画面
ちょっと動作怪しいがこれは DeepL API の向こう側なので許して。
補足:手動でやる必要のあった部分まとめ
以下のことは自分でやる必要があります。一から調べても多分 30 分くらいです。
- LINE Developers アカウントの作成
- LINE 用 API トークン、およびシークレットの取得
- DeepL API キーの取得
- デプロイ URL を LINE Webhook へ設定
さいごに
bolt.new すげぇや……。
Discussion