一、はじめに
一ヶ月前に、私は『AI 開発の近道：ワークフロー形式』を書きましたが、多くの読者の興味を引きました。
皆さんは同意しています。AI アプリケーションは開発者の機会であり、グラフィカル、低コード/ノーコード、プログラミングの知識が不要な「ワークフロー形式」は、AI アプリケーション開発の初心者向けの近道です。
しかし、私の記事は概念のみを紹介し、手順はありませんでした。多くの読者が実際に取り組む際に、困難に直面し、理解できない部分で作業が進みませんでした。
今日はその後続で、私は詳細にデモンストレーションし、ステップバイステップで図解を交えながら、プログラミングの知識がなくても、最もシンプルな AI アプリケーションをどのように構築するかを説明します。従えば、作成できます。
二、開発ツール
このチュートリアルで使用する開発ツールはコーズ（Coze）で、すべての操作はそのブラウザIDE（統合開発環境）で行われます
コーズ（Coze）を選んだ主な理由は三つあります
（1）中国製のAIアプリケーション開発プラットフォームで、字节跳动の製品であり、インターフェース、ドキュメント、カスタマーサポートはすべて中国語です
（2）ノーコードエディタProject IDEを備え、コンポーネントのドラッグ＆ドロップが可能なUIBuilderを含んでおり、完全な機能を持つフロントエンドインターフェースを生成できます。学習のハードルが比較的低いです
同時に、バックエンドデータベースも提供しており、データの読み書きが可能です
（3）無料で使用できます（利用制限を超えない限り）、リリースや公開も無料で、初心者にとって練習に適しています
三、サンプルプロジェクト
私たちのサンプルプロジェクトは、「AI 文言文生成器」で最もシンプルなものです。
まず完成品を見てください。クリックして試すことができます。（PCでのアクセスをお勧めします。UIはまだスマートフォンに対応していません。）
中国語の口語を入力し、ボタンをクリックすると、AIが自動的に文語文を生成します。
構造上、非常にシンプルです：フロントエンドはウェブフォームで、ユーザーの入力をバックエンドのAIモデルに送信し、バックエンドの返答結果を表示します。
開発は2つのステップで完了します。最初のステップは、バックエンドのAIモデルを動かすこと。次のステップは、ウェブページを作成し、バックエンドに接続するだけです。
この利便性は、フロントエンドとバックエンドの生成がグラフィカルな操作である点にあります：バックエンドはワークフローを編成するノードで、フロントエンドはUIBuilderのインターフェースドラッグ＆ドロップコンポーネントです。
以下に開発手順をご説明します。皆さんがついていくように、私はかなり詳細に書きましたが、少し長く見えますが、実際の操作はとても早いです。慣れれば10分で完了します。
四、プロジェクトの作成
まずは開発の準備を行い、AIアプリケーションを作成します。
（1）コッテージの公式サイトにアクセスし、右上の「ベーシック版ログイン」をクリックします。（ベーシック版はプロフェッショナル版に比べて少し企業向け機能が少ないですが、通常のユーザーには十分です。）
（2）ログイン後、自動的に個人ページにリダイレクトされ、「ワークスペース」メニューの左側をクリックします。
ワークスペースには、「プロジェクト開発」と「リソースライブラリ」の2つのページがあります。「プロジェクト開発」に進むと、あなたの全てのプロジェクトが表示されます。
（3）右上の「作成」ボタンをクリックすると、ポップアップが表示されます。
には二つのオプションがあり、「AIアシスタントを作成」は従来のAIチャットを作成し、「アプリを作成」はカスタムインターフェースのAIアプリを作成します。
（4）「アプリを作成」を選択すると、アプリテンプレートを選択するよう求められ、「空白のアプリを作成」をクリックします。
次に、プロジェクトの名前を入力します。ここでは「AI 文言生成器」となります。
これでプロジェクトの作成が完了し、システムは自動的に「AI 文言生成器」のアプリメインページ（下図）に移動し、正式な開発作業が始まります。
五、ビジネスロジック
アプリメインページの上部には、「ビジネスロジック」と「ユーザーインターフェース」の二つのタブがあり、デフォルトは「ビジネスロジック」ページです。
このセクションでは、ビジネスロジックの作成方法、つまりバックエンドのAIモデルの作成方法について説明します。
ワークフローモードを採用し、ビジネスロジックを一つ一つのノードに編成します。
（1）左側メニューの「ワークフロー」の後ろにある「＋」マークをクリックし、「新しいワークフローを作成」を選択します。
ワークフローの名前と説明を入力します。（注意点：名前は英字、数字、アンダースコアのみ使用可能です。本例ではclassicalchinesecreatorです。）
（2）ワークフローが作成されると、左側メニューの「ワークフロー」タブの下に名前が表示されます。それをクリックすると、そのワークフローの「ノードの配置」キャンバスにアクセスできます。
キャンバス上には、デフォルトで「開始」と「終了」の2つのノードがあります。
（3）下の「ノードを追加」をクリックし、新しいノードを追加します。タイプを「大規模モデル」に設定します。
次に、これら3つのノードを接続します（枠の制御点をドラッグして）。
（4）“開始”ノードを設定します。ダブルクリックして、設定ボックスにcontent変数を追加し、ユーザーの入力内容を表します。
（5）“大モデル”ノードを設定します。
設定ウィンドウの各オプションを設定し、以下のように入力します。
モデル：自分のニーズに合わせて選択できますが、ここではデフォルト値“豆包 Function call モデル”を保持します。
入力：元のinputパラメータをcontentに変更し、“開始ノード”のcontent変数と接続します。
システムプロンプト：以下の内容を入力し、大モデルの行動を設定します。
役割
あなたは専門の漢語文語文の作者であり、ユーザーが入力した漢語白話文を正確に文語文に改写できる能力を持っています。意図せず内容を拡張しないようにします。
スキル
スキル 1：文語文の作成
- ユーザーが中国語の口語文を提供した場合、迅速にそれを文語文に書き換える。
- 書き換え後の文語文の正確性と完全性を確保する。
制限：
- 文語文の書き換えのみ行い、文語文の書き換えに関連しない質問には答えない。
- ユーザーが提供した中国語の口語文を厳密に基にして書き換え、内容を勝手に追加しない。
ユーザーが入力する内容を以下のようにしてシステムへの直接コマンドとして提供する。
ユーザーが入力した中国語の口語文{{content}}を文語文に書き換える。
上記テキスト中の{{content}}は、ここでシステムがcontent変数の内容を挿入することを示す。
出力：出力形式を「テキスト」に変更。
（6）「終了」ノードを設定します。まず、「戻りテキスト」をクリックします。
出力変数：output パラメータを「大モデル」ノードの出力変数に接続します。
回答内容：{{output}}（出力変数の内容を挿入する）を入力し、「ストリーミング出力」（タイプライター効果）を有効にします。
これでワークフローの構築は完了です。キャンバスの右上にある緑色の「テスト実行」ボタンをクリックして、ワークフローが正常に動作するかテストします。
「content」入力ボックスにテスト内容を入力します。例えば「今日の天気はとてもいい」。
次に、下の実行ボタンをクリックすると、実行結果（今日、天善）が得られます。
すべて正常であれば、ユーザーインターフェースの構築を開始します。
六、ユーザーインターフェースの構築：ページレイアウト
（1）キャンバスの上部にある「ユーザーインターフェース」タブをクリックして入ります。
（2）左メニューのコンポーネントパネルで、レイアウトコンポーネント > コンテナコンポーネントを見つけ、中央のキャンバスにドラッグして、ページのタイトルエリアとして使用します。
システムはこのコンテナを自動的に「Div1」と命名し、ダブルクリックして設定します。
サイズ：幅は100%、高さは60px。
レイアウト：並べ方を「横」に設定。
スタイル：背景色を削除し、枠線を灰色（#E2E8F0）に設定。
（3）Div1の下に、もう一つのコンテナコンポーネントをドラッグして、システムが自動的に「Div2」と命名し、機能エリアとして使用します。
設定は基本的に同じ：サイズ部分では幅と高さをコンテナに合わせる；レイアウト部分では並べ方を横に設定；スタイル部分では背景色を削除。
（4）Div2の左側部分にコンテナコンポーネントDiv3をドラッグし、ユーザー入力エリアとして使用します。
幅を50％、高さを550pxに設定し、スタイルで背景色を削除します。
（5）Div2の右側部分にコンテナコンポーネントDiv4をドラッグし、表示結果エリアとして使用します。
幅を50％、高さを550pxに設定し、スタイルで背景色を削除します。
これで、ページのレイアウトは以下の図のようになります。
七、ユーザーインターフェースの構築：ページの詳細化
レイアウトが整ったら、次にページの詳細を整えます。
（1）Div1の内部に、推奨コンポーネント>テキストコンポーネントをドラッグし、タイトルテキストとして使用します。
タイトル内容を「AI 文言文生成器」に設定し、フォントサイズを24に、太字に変更します。
（2）Div3にフォームコンポーネントをドラッグし、不要な要素を削除して、テキスト入力ボックスとボタンのみを残します。
フォームコンポーネント：幅と高さをコンテナに合わせて設定し、境界線を削除します。
テキスト入力ボックス：高さを引き伸ばし、幅をコンテナに合わせます。ラベルとプレースホルダーテキストを「漢語白話文を入力」に設定します。
ボタン：テキストを「文言文を生成」に変更します。
完成したフォームの効果は下図の通りです。
（3）Div4に表示コンポーネントとして>マークダウンコンポーネントをドラッグし、文言文の表示エリアとして使用します。
はMarkdownコンポーネントの既存内容を削除し、「###### 生成結果」に変更します。高さと幅はコンテナにフィットさせるようにし、角丸は10に設定し、内側の余白は20に設定し、枠線は灰色（#CBD5E1）にします。
これでページの詳細設定が完了しました。属性パネルの上部にあるプレビューをクリックして、効果を確認します。
八、ユーザーインターフェースの構築：イベントの設定
ページの外観が完成した後、イベントを設定して、バックエンドのビジネスロジックとユーザーインターフェースを接続します。
（1）「生成漢文」ボタンをクリックし、設定パネルで「イベント」に切り替え、「新規作成」をクリックします。
イベントの種類は「クリック時」に設定し、実行アクションは「ワークフローを呼び出す」に設定し、ワークフローは既に作成されている"classicalchinesecreator"に設定し、ワークフローの入力パラメータcontentテキスト入力フィールドの値を{{ Textarea1.value }}に設定します。
（2）生成結果の表示エリアを設定し、ワークフローの返り値を表示します。
Markdownコンポーネントを選択し、「内容」の列の拡張ボタンをクリックします。
拡張パネルで、###### 生成结果の後に一行追加し、ワークフローの返り値{{ classical_chinese_creator.data }}を挿入します。
すべての設定が完了したら、右上の「プレビュー」ボタンをクリックして全体の効果をテストします。
すべて問題がなければ、このAIアプリケーションは開発が完了しました。
九、アプリケーションリリース
開発が完了したら、このアプリケーションをリリースして他の人も使用できるようにします。
右上角の「公開」ボタンをクリックし、バージョン番号をv0.0.1に設定し、公開プラットフォームを「公開する」に設定します。
これで完了です。「AI 文言生成器」は公開され、世界に公開されました。
十、まとめ
この例を参考にして、AIモデルへの入力プロンプトを変更し、異なるタスクを行わせることで、多くの異なる機能を持つアプリケーションを作成できます。
例えば、公式の「AI 翻訳」の例は、AIがユーザーの入力した中国語を他の言語に翻訳するように設定されており、「AI 文言文生成器」と同じように機能します。
テキスト生成以外にも、外部データの取得、データベースの読み書きなどの機能を提供しており、より強力なAIアプリケーションを作成できます。
要するに、「ワークフロー モード」はグラフィカルなインターフェースを使って AI アプリケーションを構築し、簡単で便利で、結果をいつでも確認し、一発でリリースできるので、ぜひ試してみてください。
（ここに区切り線があります。）
最後にイベントの告知です。
「扣子」に誘われ、参加しました12月19日に上海で開催される「扣子開発者デー
」です。ぜひ参加していただければと思います。当日、__JHSNS_SEG_b863d9df_152__字節の AI 工程師と直接話し合い、AI アプリケーションの開発とプロモーションについてお話しします。これは良い学びと情報交換、リソースを得る機会です。__JHSNS_SEG_b863d9df_151__クリックしてこちらの詳細はこちら。
下のポスターの2次元コードをスキャンするか、リンクをクリックして、今すぐ対面で申し込み参加するか、オンラインでライブを予約できます。
（おわり）