Hinto AIとFramerを連携させる方法
本ガイドでは、Hinto AIのナレッジベースをFramerに連携させる手順を解説します。この手順に従うことで、記事やフォルダーを含むドキュメントをFramerのCMSへ直接インポートできます。これにより、機能的で動的なヘルプセンターをFramerサイト上に構築可能です。作業には、Hinto AIとFramerの両方のアカウントが必要です。
パート1：記事の同期
-
Framerプロジェクトを開き、左側のサイドバーにある CMS パネルに移動します。
-
Cmd/Ctrl + K を押してコマンドパレットを開くか、キャンバス下部の プラグイン アイコンをクリックします。「Hinto AI」を検索し、選択してプラグインを起動します。
-
表示された New Collection ウィンドウで、名前に「Articles」と入力し、Create をクリックします。このコレクションに、個々のヘルプ記事が保存されます。
-
APIキーを取得するため、Hinto AIのウェブアプリを開き、対象のプロジェクトにアクセスします。
-
設定アイコンをクリックして Project Settings を開き、サイドメニューから API Keys を選択します。
-
New API Key + ボタンをクリックします。
-
キーに分かりやすい名前（例：「Framer Integration」など）を付けて、Create API Key をクリックします。
-
コピーアイコンをクリックして、新しいAPIキーをクリップボードにコピーします。
-
Framerに戻り、API Key フィールドにキーを貼り付けて Continue をクリックします。
-
Hinto Content Syncウィンドウで、Content Type が Articles に設定されていることを確認します。
-
（任意）内部リンクを正しく機能させるには、Advanced Settings を展開し、記事を公開するサイトの完全なベースURLパスを入力します。
-
Import をクリックして同期を開始します。これで、Hinto AIの記事がFramerの「Articles」コレクションに表示されます。
パート2：フォルダー構造の同期
同様の手順を繰り返し、フォルダー構造をインポートします。これはコンテンツの整理やナビゲーションメニューの構築に不可欠です。
- Collections の横にある + アイコンをクリックし、再度 Hinto AI プラグインを起動します。
- 新しいコレクションに「Folders」という名前を付け、Create をクリックします。
- 先ほどと同じHinto AIのAPIキーをフィールドに貼り付け、Continue をクリックします。
- Content Type のドロップダウンから Folders を選択します。
- Import をクリックします。これで、Hinto AIのフォルダー構造が「Folders」コレクションで利用可能になります。
これで、Hinto AIの記事とフォルダーをFramerへ正常にインポートできました。これら2つのCMSコレクションを使用して、ドキュメントページの構築、ナビゲーションメニューの作成、そしてヘルプセンターのデザインが可能になります。