1
/
5

Drupal×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モジュールをダウンロードしましょう

それでは、モジュールをダウンロードしていきます。

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!

ロジカルスタジオでは、エンジニアを募集中です!下記よりお待ちしております!

PHPエンジニア
即戦力募集中!PHPで世界をちょっとよくしたいエンジニアをWanted!
ロジカルスタジオは、テクノロジーとデザインの視点からクライアントの課題解決をめざす、大阪のクリエイティブプロダクションです。 クライアントの期待を超えて「もっと良くなる、を見つける」のが私たちのスタイル。企画・提案からデザイン制作・システム構築、運用、改善提案をワンストップで行えるのが一番の強みです。近年ではその実績と品質が評価され、案件も急増しています。 代表の古川が掲げる企業理念は「絆を大切に、周りの人を豊かにし、社会に貢献する」。 私たちはこのミッションを推進するため、「新しい技術へのチャレンジ精神」を軸に、「切磋琢磨する仲間」と「働きやすい職場環境」を整え、「成長と可能性を大切にする風土」を育ててきました。 2019年9月に増床し、外部向けのセミナーにも活用できるカンファレンスルームを拡充。スタッフによる公式ブログや、マスコットキャラクター「ロージー&カール」によるTwitterなど、情報発信も強化しています。 可能性の芽をすくい上げられるこの場所を、より大きくしていきたい。 私たちと一緒に、このビジョンを実現しませんか。
株式会社ロジカルスタジオ
株式会社ロジカルスタジオでは一緒に働く仲間を募集しています
8 いいね!
8 いいね!
今週のランキング
株式会社ロジカルスタジオからお誘い
この話題に共感したら、メンバーと話してみませんか?