バックエンド
エンジニア
つねちゃん
こんにちは！つねちゃんです
1年以上ブログ記事を書いていませんでしたが、元気に過ごしています
バックエンド
エンジニア
つねちゃん
今回は、DrupalとAIを繋ぐモジュール、
「OpenAI/ChatGPT Integration（以下「OpenAI モジュール」）」を使って
サイト構築をしていきます！
目次
OpenAI moduleについて
さてさて、いきなりですが、
今回紹介するOpenAIモジュールを使えば、どんなことが出来るのでしょうか？
公式のモジュールページを見てみると、以下のようにあります。
OpenAIモジュールは、テキストコンテンツ、画像、コンテンツ分析などを生成するために、DrupalにOpenAIを統合するためのモジュール群とAPI基盤を提供することを目的としています。OpenAIは、ChatGPT、GPT-4、GPT-3、DALL-E、GitHub CoPilotなどのようなアプリケーションを強化する人工知能製品の背後にある会社です。私たちのゴールは、DrupalでOpenAIのAPIサービスを活用し、補助的なAI技術を補強・追加する方法を見つけ、コンテンツやメンテナンスタスクの管理方法を変革することです。
なるほど、、、ざっくりとまとめますと、、、、、
OpenAIモジュールを使えば、Drupalでのサイト運用をOpenAIにサポートしてもらうことが可能になります。
DrupalとOpenAIを繋ぐ、そんな役割をOpenAIモジュールが担ってくれるということですね！
OpenAIについて
ご存知の方も多いかと思いますが、ここらでちょっと、OpenAIについて。
OpenAIとは、サンフランシスコに拠点を置くAI専門の非営利研究機関、およびAI開発企業のことです。
膨大なデータからAI様が学習し、新たなテキスト、画像、音声を生み出す生成AIが、OpenAIの強みだと言われています。
ChatGPTがとっても有名ですよね。私も日々、お世話になっています。
OpenAI moduleの使い方
ではでは、早速DrupalでOpenAIを使ってみようと思います！
drupal環境を作りましょう
まずはDrupalの環境を作りましょう。
と、言いたいところですが
詳細に書くと長くなってしまうので、こちらは割愛させていただきます。
今回、私はこちらの記事に沿って環境構築しました。
【環境情報】
- macOS：13.3.1
- docker desktop：v4.16.2
- lando：v3.18.0
- drupal：10.1.6
OpenAIに登録しましょう
OpenAIのサイトからアカウント登録を行います。
詳細に書くと長くなってしまうので、こちらも割愛させていただきます。
（私が登録した当初は、登録から最初の3ヶ月間のみ使用可能な5ドル分の無料クレジットがもらえました、感謝）
今回、私はこちらの記事に沿ってアカウント登録しました
API Key、Organazation IDを取得しましょう
アカウント登録が完了したので、
OpenAIからAPI Key、Organazation IDを取得してこようと思います。
設定画面を見ると、Organazationタブが表示されています。
Organazation IDは、Organazationページに遷移し、Organazation IDを取得すればOKです。
次にAPI keyを作成していきます。
画面左のナビゲーションエリアからAPI keysを選択します。
Create new secret keyより、新規作成する秘密鍵の名前をお好きな文字列で入力し、API keyを作成してください。
すると、API keyが表示されますので、必ず保管しておきます！！！
（このチャンスを逃すと二度と確認できなくなるので、必ずです！）
こちらの取得した2つの値は、後ほどDrupalの管理画面より設定し、DrupalとOpenAIの接続に使用しますので、
大事に保管しておきます。
OpenAIモジュールをダウンロードしましょう
それでは、モジュールをダウンロードしていきます。
上記のページから、Releasesのセクションにコマンドが記載されています。
composer require 'drupal/openai:^1.0@beta'
※11/29現在のコマンドです
OpenAIモジュールページからコピペしたコマンドを実行して、ダウンロードします。
（執筆時点ではベータ版ですが、いつか安定板がリリースされることを心待ちにしております。。！）
ダウンロードが完了すれば、管理画面の拡張機能一覧にOpenAIモジュールが出てくるのではないでしょうか？
検索窓にOpenAIと入力して、フィルターをかけてみると、OpenAIモジュールと依存関係にある、いくつかのモジュールが出てきますね。
その中から、以下2つのモジュール
- OpenAI CKEditor integration
- OpenAI Content Tools
をインストールします。
OpenAIモジュールの設定をしましょう
Drupal管理画面の環境設定より、OpenAIモジュールの設定を行なっていきます。
OpenAIモジュールの設定画面を開くと、API keyとOrganization IDを入力するフィールドがあります。
こちらそれぞれに、先程取得した値を入力して、設定を保存します。
これで、DrupalとOpenAIが連携されました！
テキストエディターの設定をしましょう
Drupalでコンテンツ作成を行う際に使用する、テキストエディターの設定を行なっていきます。
Drupal管理画面の環境設定より、「テキストフォーマットとエディター」を開きます。
（今回はデフォルトで作成されている、ベーシックHTMLというテキストフォーマットに、OpenAIを組み込んでいきます。）
ベーシックHTMLの設定画面を開き、ツールバーの構成を確認すると、
OpenAIのアイコンがありますね！
このアイコンを、Available buttons から Active toolbar に移動させます。
次に、CKEditor 5 plugin settingsまでスクロールし、OpenAI toolsというエリアを確認します。
ベーシックHTMLでOpenAIを使うために、「Enabled」にチェックを入れ、使用したいモデルを選択して構成を保存します。
これで、ベーシックHTMLのテキストフォーマットで、OpenAIが使えるようになりました。
コンテンツを作成のお手伝いをしてもらいましょう
さて、設定が完了したということで、コンテンツを作ってもらいましょう。
Drupal管理画面のコンテンツより、コンテンツを追加を押下します。
(ここではデフォルトのコンテンツタイプである、記事コンテンツを作成していきます。)
本文フィールドを見ると、待ちに待ったOpenAIのアイコンが、、、あります、、、！！！！！
選択肢から「Text Completion」を選ぶと、、、
文章が作成されましたーーー 😀
テキスト作成以外にも、要約や翻訳など、様々な選択肢があります。
時と場合によって使い分けると、とても便利そうです。
最後に
Drupalコミュニティでは、たくさんの便利なモジュールが揃っています。
AIに関連したモジュールも、それ以外のモジュールも、これらを使わない手はない！
沢山あるモジュールの中から、今回はAIに関連したOpenAIモジュールを紹介してみました。
Drupalで構築したサイトに、AI機能を追加してみたいという方へ、
とってもおすすめなモジュールだと思います。
みなさんも良きDrupal Lifeを！Happy Coding！
ロジカルスタジオでは、エンジニアを募集中です！下記よりお待ちしております！
