ウィジェット作成をManusに依頼する方法|レスポンシブ・エラー処理対応！外部ライブラリを使わずにJavaScriptとHTMLで実装実現

目次

※本記事・プロンプトにはPRも含まれます

はじめに

「JavaScriptとHTMLでウィジェットを作りたいけれど、毎回の実装条件を細かく伝えるのが大変」と感じることはないでしょうか？ そこで今回紹介するプロンプトは、実現したい機能と必要な添付情報を入力することで、JavaScriptとHTMLによるウィジェット用コードの作成を依頼できるプロンプトです。 レスポンシブ対応やエラー処理、外部依存を使わない条件まで、あらかじめ伝えられるのが特徴です。 必要な機能を整理してコード作成を依頼したい方に向いているでしょう。

前提条件と注意点

このプロンプトの実行対象AIはManusです。 Manusでプロンプト本文を入力し、機能要望や必要な添付情報を渡して使用します。

利用時は、マイブラウザコネクタを有効にしておくことを推奨します。 参照したいWebページや情報がある場合に、必要な内容を確認しながら入力を進めやすくなります。 生成されるのは、ページ全体ではなくウィジェット用のコードです。 スタイルやJavaScriptの記述方法にも出力条件があるため、プロンプト本文は省略せずに使用してください。

プロンプトと使い方

1.プロンプト本文のコピペ

まず、以下のプロンプト本文を全てコピーします。

続けてManusを開き、入力欄へそのまま貼り付けてください。

2.機能要望を記入

貼り付けた本文の「必要情報1：」欄に、作りたいウィジェットの内容を記入します。 ここには機能要望として、利用者が何を操作し、その結果として何を表示・切り替え・処理したいのかを、できるだけ具体的に書きます。 例えば、入力欄が必要なら入力する内容、ボタンが必要なら押したときの動作、表示要素が必要なら表示したい内容なども記入します。 複数の操作がある場合も、順番に分けて書くと確認しやすくなります。

3.添付情報を必要に応じて渡す

実装に利用してほしい情報が他にもある場合は、「必要情報2」欄に指定するか、必要に応じて添付します。 参照したい資料、既存の情報、実装時に確認してほしい内容がある場合は、この段階で一緒に渡してください。 添付がない場合は空欄のままで構いません。 機能要望だけで依頼することも、添付情報だけを渡すことも、両方を使うこともできます。

4.内容を見直してManusで実行

記入後は、機能要望、添付情報、プロンプト本文に抜けがないかを確認してからManusで実行します。 実行後は、ウィジェット用のJavaScriptとHTMLコードが出力されます。

まとめ

いかがでしたか？ 本記事では、機能要望と添付情報をもとに、JavaScriptとHTMLによるウィジェット用コードの作成を依頼するプロンプトを紹介しました。 プロンプトをコピーし、必要な機能と情報を記入してManusで実行する流れを押さえれば、条件を整理しながら使い始められます。 まずは小さなウィジェットから試し、機能要望の書き方を自分の制作スタイルに合わせて整えていくとよいでしょう。

他の記事

AIツール・開発・ビジネス関連の記事を取り扱っています。

運営サービス

本サイトでは、便利ウェブツールから素材配布サイト、個人開発ゲームまで幅広く運営しております。

いいなと思ったら応援

以下の方法で応援を受け付けております。

著者兼運営:ハヤデビ

長きにわたりゲームやアプリの開発・動画編集・ブログ運営等を続けている個人クリエイター