Skip to content

r-40021/easy-chat

Repository files navigation

チャット返信作成支援ツール 起動方法

以下の手順に従うと、自分の PC 上でチャット返信作成支援ツールを動かすことができます。

必要な環境

プログラムを動作させるためには、以下のソフトウェアがインストールされた Windows, Mac または Linux の PC が必要です。

  • Visual Studio Code
  • Node.js (npm も使用できる状態にしてください。)
    ※Node.js v20 (LTS バージョン) で動作を確認しています。

各ソフトウェアのインストール方法については以下の記事を参照してください。

Visual Studio Code…【VSCode】インストール/日本語化/基本的な使い方 (senseshare.jp)

Node.js…Windows、macOS、LinuxにNode.jsとnpmをインストールする方法 (kinsta.com)

プログラムのダウンロード

  1. プログラムの GitHub リポジトリを開きます。
  2. 緑色の [Code] ボタン→[Download ZIP] をクリックして、プログラムをダウンロードします。

Git がインストールされている PC であれば、以下のコマンドを実行してクローンすることも可能です。

git clone https://github.com/r-40021/easy-chat.git

プログラムをダウンロードする様子

プログラムをダウンロードする様子

  1. ダウンロードした ZIP ファイルを解凍します。 (git コマンドでクローンした場合はこの手順は不要です。)

Visual Studio Code でフォルダを開く

  1. Visual Studio Code を起動し、[ファイル]→[フォルダーを開く] から先ほどダウンロードしたフォルダの中にある「easy-chat-main」フォルダを選択して開きます。
    ※ZIP ファイルでダウンロードした場合、easy-chat-main フォルダが2重になっていることがあります。その際は内側の easy-chat-main フォルダを開いてください。

Visual Studio Code でフォルダーを開く

  1. 以下のような画面が表示されたら、[はい、作成者を信頼します] をクリックしてください。

作成者を信頼する画面

依存関係のインストール

  1. [ターミナル]→[新しいターミナル] とクリックし、ターミナルを開きます。

ターミナルを開く

  1. 開いたターミナルで npm install と入力し、Enter キーを押します。

依存関係のインストール

  1. インストール完了

依存関係のインストール完了

API の準備

ツール内のネガポジ分析、類義表現検索、5W1H 抽出、文章校正を使用するためには、以下の操作を行う必要があります。

Caution

【重要】API の使用料金について

ネガポジ分析及び類義表現検索については、使用した分に応じて料金が請求されます

AWS のアカウントを作成して12ヶ月以内の場合、ネガポジ分析については無料枠があるので個人で少し試す程度であれば料金が請求されることはなかなか無いかと思いますが、AWS のアカウント作成後12ヶ月が経過している場合は即座に料金が発生します

また、類義表現検索機能には無料枠がないので使った瞬間に料金が発生します。少し試す程度であればせいぜい数円程度の請求に収まるかとは思いますが、使い過ぎには十分注意してください。
(使いすぎにより多額の料金が発生し支払いが困難になったとしても、開発者は責任を負いかねます。)

AWS の料金については以下のページをご覧ください。
(どちらの機能も東京リージョンを使用しています。)

なお、5W1H API については1日100回まで、文章校正 API については1リクエストあたり4KB、1分あたり300回の制限があります。
(この2つの API は制限を超えても使用が制限されるだけで料金は発生しません。)

ネガポジ分析、類義表現検索を使用するための準備 (最大の山場)

  1. AWS (Amazon Web Services) コンソール にログインします。
    (アカウントを持っていない場合は、上のリンクからアカウントを作成します。クレジットカード (プリペイドカードも可)・電話番号が必要です)
  2. 画面上の検索ボックスに「IAM」と入力し、表示された検索結果の中から [IAM] をクリックします。

AWS コンソールで IAM と検索

  1. 左のメニューの [ユーザーグループ] をクリックします。

左サイドメニュー内にあるユーザーグループボタン

  1. [グループを作成] をクリックします。

グループを作成ボタン

  1. グループにわかりやすい名前をつけます。

グループの命名

  1. [許可ポリシーを添付] から「ComprehendReadOnly」と「AmazonBedrockFullAccess」にチェックを入れ、最後に右下の [グループを作成] をクリックします。

ComprehendReadOnly AmazonBedrockFullAccess グループを作成

  1. 左のメニューから [ユーザー] をクリックします。

左サイドメニュー内のユーザーボタン

  1. [ユーザーの作成] をクリックします。

ユーザーの作成

  1. わかりやすいユーザー名を付け、[次へ] をクリックします。

ユーザ名の命名

  1. 先程作成したグループにチェックを入れ、[次へ] をクリックします。

グループの選択

  1. [ユーザーの作成] をクリックします。

ユーザーの作成

  1. 先程作成したユーザー名をクリックします。

ユーザー名をクリック

  1. [アクセスキーを作成] をクリックします。

アクセスキーを作成

  1. 今回は PC 上でプログラムを動かすので、[ローカルコード] を選択します。

ローカルコードを選択

  1. [上記のレコメンデーションを理解し、アクセスキーを作成します。] にチェックを入れ、[次へ] をクリックします。

「上記のレコメンデーションを理解し、アクセスキーを作成します」にチェックを入れて次へ

  1. アクセスキーにわかりやすい名前をつけます。(ここで入力した名前は管理画面上で複数のアクセスキーを区別する際に役立ちます。)

アクセスキーの命名

  1. Visual Studio Code に戻り、「.env」という名前のファイルを作成します

Visual Studio Code でファイルを新規作成

envファイルの命名

  1. 作成した .env ファイルに、以下のように入力します。
    (各行の “=” の後は、AWS の管理画面から取得したキーに置き換えてください。)
AWS_ACCESS_KEY_ID=(AWS のアクセスキー)
AWS_SECRET_ACCESS_KEY=(AWS のシークレットアクセスキー)

アクセスキーとアクセスシークレットキー

Warning

アクセスキー及びシークレットアクセスキーは、この後二度と表示することはできません。確実に保存してください。
万が一紛失した場合は、今回取得したアクセスキーを削除した上で新たにアクセスキーを発行してください。

  1. 最後に [完了] ボタンをクリックします。
  2. 先ほど作成した .env ファイルに以下の行を追加してください。
    これにより、東京リージョンの AWS サーバーが使用されるようになります。
AWS_REGION=ap-northeast-1

5W1H 抽出を使用するための準備

  1. メタデータ株式会社の HP から利用登録を行ってください。
    利用申請フォーム
  2. 申請後しばらくして届くメールに記載されている API キーをコピーします。
  3. Visual Studio Code に戻り、先ほど作成した .env ファイルに以下の行を追加してください。
    (”=” の後は、メールに記載されている API キーに置き換えてください。)
METADATA_API_KEY=(メールに記載されている API キー)

文章校正を使用するための準備

  1. Yahoo! JAPAN Web API 管理画面 を開き、Yahoo! Japan ID でログインします。
    ※Yahoo! Japan ID を持っていない場合は無料で取得できます。(クレジットカードも不要)

Yahoo! Japan ID で管理画面にログイン

  1. [新しいアプリケーションを開発] をクリックします。

新しいアプリケーションを開発

  1. [ID 連携を使用しない] にチェックを入れます。その他の項目は画面に従って入力してください。
  2. [確認]→[登録] とクリックします。

確認 登録

  1. 発行された Client ID をコピーします。

Client ID

  1. Visual Studio Code に戻り、 .env ファイルに以下の行を追加してください。
    (”=” の後は、先程取得した Client ID に置き換えてください。)
YAHOO_API_KEY=(Yahoo! Japan Web API の Client ID)

ここまでの手順で、.env ファイルの全体は以下のようになっています。

AWS_ACCESS_KEY_ID=(AWS のアクセスキー)
AWS_SECRET_ACCESS_KEY=(AWS のシークレットアクセスキー)
AWS_REGION=ap-northeast-1
METADATA_API_KEY=(メールに記載されている API キー)
YAHOO_API_KEY=(Yahoo! Japan Web API の Client ID)

これにて、API の準備は完了となります。お疲れ様でした。

ツールを動かせるようになるまであと一息です!

サーバーを起動する

いよいよ「チャット返信作成支援ツール」を起動していきます。

  1. Visual Studio Code に戻ります。
    画面下にターミナルが表示されていない場合は、[ターミナル]→[新しいターミナル] とクリックしてターミナルを再度開いてください。

新しいターミナル

  1. 表示されたターミナルに npm run dev と入力し、Enter キーを押します。
  2. しばらく (数十秒) 待って以下のような画面が表示されたら、表示されている URL (ここでは http://localhost:5173/) にブラウザーでアクセスします。

サーバー起動完了

  1. ツールが正常に開けば成功です!ここまで本当にお疲れ様でした!!

ブラウザー上でツールが動いている様子

  1. サーバーを終了させたい場合は、ターミナル上で Ctrl + C を押してください。
    「パッチ ジョブを終了しますか」と聞かれた場合は「y」と入力して Enter キーを押すとサーバーが終了します。

Warning

サーバーは必要なときにのみ起動してください。
サーバー用途に設計されていない PC でサーバーを24時間稼働させることは火災などのリスクを伴います。

お問い合わせ先

この説明書に関して不明な点があれば、以下のお問い合わせ先までご連絡ください。

GitHub アカウントを持っている場合→ GitHub Discussions

GitHub アカウントを持っていない場合→ お問い合わせフォーム