プログラミング初心者でもできる！好きなキャラのLINEチャットボットを作る方法

はじめに

プログラミングに詳しくない私ですが、ChatGPTを使って「ご注文はうさぎですか？」のココアちゃんのLINEチャットボットを作ることができました。今回はその作成方法と流れを共有します。

失敗から学ぶ

最初はノーコードツールを試しましたが、うまくいきませんでした。そこで、ChatGPTにコードを書いてもらい、何とか完成させることができました。

手順概要

1. LINEとChatGPTそれぞれのAPI準備
2. APIを使うコード作成
3. 無料のwebホスティングサービスでコードを実行
4. LINEでチャットボットを楽しむ

それでは、1つずつ詳しく説明していきます。

じゃ、１から

１.調べろ

ふざけんなって思うかもしれないけど、たぶん俺が書くよりいい記事たくさんある。

ChatGPTのAPIkeyとLINEのチャンネルアクセストークンの２つが必要です。

一応現時点（2024/06/18）で有効なやり方が書いてあるサイトぐらいは貼っておきます。

ChaGPTのAPIkey

LINEのチャンネルアクセストークン

LINEの方が少し手間がかかりますが、「Messaging API」というワードを見つければ、その先は比較的スムーズです。また、分からないことがあればChatGPTに質問してみてください。

２.ChatGPTに聞け

ブラウザバックせずにいた数少ない聖者もウィンドウを閉じそうになるかもしれないが、実際俺はプログラミング知らないからChatGPTに全部聞いたので仕方がない。

実際に聞いてるとこ。ローカルで実行しないのでnode.jsのインストールとかは不要です

3.と、さすがに何の参考にもならなくなってしまうので、自分がChatGPTに聞いてやった作業を書きます。

まず、作成したコードを実行するwebホスティングサービスの準備。

GlitchってサイトをChatGPTに勧められたのでそれを使いました。

アカウント作成して右上のNew projectをクリック。
ChatGPTには、「hello-express」テンプレートを選択するよう言われたけどそんなものはなかった。似たような「glitch-hello-node」を選択した。

左側にファイル名が並ぶと思うので「package.json」を開いて中身を以下に編集（そのまますべて上書きで張り付け）

{
  "name": "line-chatbot",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "start": "node server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "axios": "^0.21.1"
  }
}
 

次は「server.js」を以下に書き換え（APIkey等はこの後設定します）。緑マーカーの部分は皆さんの用途に合わせて書き換えてください（この後説明します）。

const express = require('express');
const axios = require('axios');
const app = express();
app.use(express.json());

// 環境変数からLINEとOpenAIのAPIキーを取得
const lineToken = process.env.LINE_CHANNEL_ACCESS_TOKEN;
const openAiKey = process.env.OPENAI_API_KEY;

// Webhookエンドポイントの設定
app.post('/webhook', async (req, res) => {
    const events = req.body.events;
    for (let event of events) {
        // メッセージイベントの処理
        if (event.type === 'message' && event.message.type === 'text') {
            const userMessage = event.message.text;
            const systemMessage = 'あなたはシャロ、真面目で努力家でクールな女の子です。あなたの目標は、ユーザーと建設的な会話をし、ユーザーを支援することです。';

            try {
                // OpenAI APIへのリクエスト
                const response = await axios.post('https://api.openai.com/v1/chat/completions', {
                    model: 'gpt-4o',
                    messages: [
                        { role: 'system', content: systemMessage },
                        { role: 'user', content: userMessage }
                    ],
                    max_tokens: 150,
                }, {
                    headers: {
                        'Authorization': `Bearer ${openAiKey}`,
                        'Content-Type': 'application/json'
                    }
                });

                const aiMessage = response.data.choices[0].message.content.trim();
                // LINE APIへのリクエスト
                await axios.post('https://api.line.me/v2/bot/message/reply', {
                    replyToken: event.replyToken,
                    messages: [{
                        type: 'text',
                        text: aiMessage,
                    }]
                }, {
                    headers: {
                        'Authorization': `Bearer ${lineToken}`,
                        'Content-Type': 'application/json'
                    }
                });
            } catch (error) {
                console.error('Error during OpenAI API call:', error.response ? error.response.data : error.message);
                res.status(500).send('Internal Server Error');
                return;  // エラーが発生した場合、これ以上の処理を中断します。
            }
        }
    }
    res.status(200).send('OK');
});

// サーバーのポート設定
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});
 

１つめの緑マーカーがGPTにどんなキャラになってもらうかプロンプトを書いてます。自由に書き換えて使ってください。ただ、トークン消費量の関係上、安くしたい人は英語で書くことをおすすめします。私はChatGPTに英語に翻訳してもらい、プロンプトの最後に日本語で会話してください、と付け加えてます。

２つめのマーカーがChatGPTのモデルです。好きなの選んでください。

３つめが一回の発言（出力）でのトークン消費量の最大値の設定。あくまで出力。

１つめのマーカーのプロンプトやＬＩＮＥ上でおくったメッセージなどの入力トークンは別カウントなので注意。

最後に「.env」ってファイルに自分のChatGPTのAPIkeyとLINEのチャンネルアクセストークン書き込む

LINE_CHANNEL_ACCESS_TOKEN=YOUR_LINE_CHANNEL_ACCESS_TOKEN
OPENAI_API_KEY=YOUR_OPENAI_API_KEY

緑の部分を実際のものに書き換えて下さい。なんかテキストエディタじゃなくて書き込めない場合は画面上部の「PLAINTEXT」ってとこ押せばテキストエディタになります。
あとはctrl+s押して保存してね。

4.完成だお。

画面下のLOGSおすとサーバーいずランニングで英語で出てると思うから、１で作成したLINE公式アカウントになんか送ってみて。

いろいろ書いたけど、たぶんそううまくいかないと思う。

なのでChatGPTに１から相談することをお勧めする。実際自分も完成させるまでに何度も失敗してますし、そのたびにエラー貼り付けて質問攻めしてました。

俺でもできたんだからあなたにもできる。

あなたにこの動画を送ります

Matsuoka Shuzo [松岡修造 ] - あきらめかけているあなた (NEVER GIVE UP!!) [English]

マジでわかんなかったらXに連絡頂戴。DMはスパム認定されて通知こないのでリプライぶん投げてくれればこっちからDMおくります。