便利な機能

Pwappyには基本操作では説明しきれていない便利な機能が存在します。
ここではそれらの機能の説明をします。

スクリプトでコンポーネントを取得する処理の簡易化

1. スクリプトエディタ画面で、貼り付けたい行にカーソルを移動します。

2. プロパティウィンドウの属性タブで、ID属性の横のボタンをクリックします。

3. 以下のようにIDを元にコンポーネントを取得する処理が追加されます。

4. 続けて再度ID属性の横のボタンをクリックすると、以下のように追加されます。

5. 続けて「.」を入力することでコード補完機能が働くので、コンポーネントの操作が簡単に行えます。

コンポーネントエディタ

独自コンポーネントの作成

ツールボックスの左上のボタンをクリックするとコンポーネントエディタが開きます。

• コンポーネント名:
  ツールボックスに表示されるコンポーネントの名前です

• 検索用:
  ツールボックスの検索欄に入力した文字列と部分一致する文字列を入力してください。(入力は任意) 例えばbuttonとボタンのどちらでも検索したい場合は、「button ボタン」のようにスペースで区切って入力してください。

• IDを削除:
  チェックが付いている場合、コンポーネントのコード欄に入力されている値から、idを自動的に削除します。
  具体例としては<div id="XXXX">のid="XXXX"を自動的に削除します。
  ツールボックスウィンドウからレイアウトウィンドウにコンポーネントをドラッグ＆ドロップした場合、アプリケーション内でidが重複しないように自動的に付与されるので、このチェックは付けたままが望ましいです。

• スクリプトを無効化:
  チェックが付いている場合、コンポーネントのコード欄に入力されている値から、scriptタグとonから始まる属性を自動的に削除します。
  具体例としては<script>...</script>を削除します。
  また、<button onclick="...">のようにonから始まる属性を削除します。
  これは、Web上の他のサイトからHTMLをコピーして貼り付けた場合に、安全でないスクリプトが動いてしまうことを防ぐ目的なので、チェックを外す場合は慎重に行ってください。

• コンポーネントのコード:
  コンポーネントのコード欄にコンポーネントを構成するHTMLを記述します。
  一番上の階層になるタグは必ず1つにしてください。

OK例

<div>
   ...
</div>

NG例

<div>
   ...
</div>
<div>
   ...
</div>

• プレビュー:
  コンポーネントのコード欄に入力したHTMLを表示します。
  表示が崩れた場合はリロードボタンをクリックしてください。

• 削除:
  新規作成の際には有効になっていません。
  編集の際に有効になり、削除ボタンを押すことでコンポーネントをツールボックスから削除します。

• 保存とキャンセル:
  コンポーネントを保存またはキャンセルします。
  コンポーネントを作成した場合、ツールボックスウィンドウに存在するOnsenUI関連のコンポーネントの下に追加されます。

独自コンポーネントの編集と削除

1. ツールボックスウィンドウから独自コンポーネントを左上のボタンにドラッグ＆ドロップします。

2. コンポーネントエディタ画面が表示され、独自コンポーネントの内容が表示されます。

3. コンポーネントが不要な場合は削除ボタンをクリックします。

4. 編集した内容を保存する場合は保存ボタンをクリックします。

レイアウトから独自コンポーネントの作成

1. レイアウトウィンドウから、コンポーネント化したい部分をツールボックスにドラッグ＆ドロップします。

2. コンポーネントエディタ画面が表示され、コンポーネントのコード欄にHTMLが入力されています。必要に応じて編集できます。

3. コンポーネント名と検索用の文字列を入力して保存ボタンをクリックすることで、独自コンポーネントを作成できます。

ウェブコンポーネント

独自のウェブコンポーネントの作成

Pwappyではウェブコンポーネントをツールボックスに登録する機能が実装されています。

1. スクリプトウィンドウのスクリプトタブから、スクリプトの追加ボタンを押して、classを選択してスクリプト名を入力し追加ボタンを押します。
2. スクリプトの編集ボタンを押します。
3. ウェブコンポーネント用のコードに変更します ここでは以下のように書き換えました。
   クラスの上のコメントに、@propertyと@firesが記述されています。
   Pwappyではこのコメントを読み取ってコンポーネントに属性とイベントを追加します。
4. ツールボックスに新しいコンポーネントが追加されます。
5. ドラッグアンドドロップで配置ができます。
6. 配置したコンポーネントを選択することで、プロパティウィンドウに独自の属性とスクリプトウィンドウのイベントタブに独自のイベントが表示されるので設定できます。

• @propertyと@firesは以下のフォーマットで記述してください。

@property {...} 属性名 - 属性の説明
@fires イベント名 - イベントの説明

• @propertyの{...}には下の記述ができます。

{string}
この記述は input[text] に相当します

{number}
この記述は input[number] に相当します

{boolean}
この記述は input[checkbox] に相当します

{("A"|"B"|"C")}
この記述は select[A B C] に相当します

{("A"|"B"|"C")[]}
この記述は multiselect[A B C] に相当します

その他の値が設定された場合は{string}と同様の動きになります。

Pwappyポイント（PP）の取得

一部の機能を使うためにはPPが必要となります。 PPはダッシュボードのポイントから広告を視聴することで取得できます。

広告視聴による取得

ダッシュボードのポイントパネルにある「広告視聴」ボタンから広告を視聴することで、PPを取得できます。

クーポンコードによる取得

X(旧Twitter)で配布されるクーポンコードを入力してPPを取得することができます。

1. ダッシュボードのポイントパネルにある、チケットアイコン（クーポン入力ボタン）をクリックします。 ※オレンジ色のボタンです。

2. 入力ダイアログが表示されるので、クーポンコードを入力します。

3. 「適用」ボタンをクリックします。

4. コードが正しければ、ポイントが加算されます。

ポイント履歴の確認

ダッシュボードのポイントパネルにある時計アイコンのボタンをクリックすると、どの機能でいつポイントが増減したかの詳細な履歴を確認できます。

AI機能

PwappyはAI機能を搭載しており、自然言語で指示を出すことで、JavaScriptコードやHTMLコードを自動生成することができます。
AI機能にはPPが必要になります。

Gemini APIキーの登録（推奨）

ご自身のGoogle Gemini APIキーを登録すると、PP（Pwappyポイント）の消費を大幅に抑えることができ、Pwappyをより便利でお得にご利用いただけます。

【APIキー登録のメリット】

• AIコーディングの消費PPが、モデルや内容に関わらず常に1PPに固定されます。
• AIエージェント機能の消費PPが常に2PPに固定されます

【登録手順】

1. ダッシュボードのメニューを開き、「設定」をクリックします。

2. 設定画面の「Gemini APIキー設定」セクションで、ご自身のAPIキーを入力し、「保存」ボタンをクリックします。

3. APIキーは「Google AI Studioでキーを取得」のリンク先から取得できます。

AI機能を有効にする

AI機能を利用するには、以下の手順で機能を有効にする必要があります。

• 注意 AI機能はGemini APIを使用しています。Gemini APIの利用規約により18歳未満は使用できない為、18歳未満の方はAI機能をご利用いただけません。

【有効化手順】

1. ダッシュボードのメニューから「設定」を開きます。

2. 設定画面の上部にある「AI機能を有効にする」のトグルスイッチをONの状態にしてください。

3. 18歳未満でないことの確認メッセージが表示されるので、問題がなければ「はい」を押してください。

4. エディタ画面を開き、スクリプトエディタなどのAIボタンが利用できる場所に緑色の「AI」ボタンが表示されていれば有効化は完了です。

AIコーディングでスクリプトを作成

ここではどのようにAIコーディングを使うかのサンプルを示します。
アプリを起動したら映画「マトリックス」の上から緑色の文字が降ってくるアニメーションを、AIコーディングで作成してみます。

• 注意
  AI機能で生成されたコードは、必ずしも正しく動作するとは限らないことを念頭に置いて使用してください。

1.　AI機能を有効にしたうえでエディタ画面を開きます。

2.　ツールボックスウィンドウからレイアウトウィンドウのアプリケーションに対して、「HTML Tag」をドラッグ＆ドロップし、「canvas」タグを追加します。

3.　レイアウトウィンドウでアプリケーションを選択し、スクリプトウィンドウのイベントタブのloadイベントの「＋」ボタンをクリックしてスクリプト名に「animation」と入力して追加ボタンを押します。

4.　スクリプトの編集ボタンを押して、スクリプトタブに移動します。

5.　以下のようにコメントを書き、コメントの次の行にカーソルがある状態で「AI」ボタンをクリックします。

function animation(event) {
    // id:canvas1に映画「マトリックス」のような緑色の文字が上から降ってくるアニメーションを実装
    
}

6.　AIコーディングウィンドウが開き、テキストエリアにコメントと、そのコメントに対応するコードを作成する指示の文字列が入力された状態になっています。

• コメントの次の行にカーソルがある状態でAIコーディングウィンドウを開いた場合は、このようにコード作成をする指示が自動入力されます。コメントの次の行以外でAIコーディングウィンドウを開いた場合は指示が自動入力されないので、自分で実装して欲しいコード内容をテキストエリアに記述してください。

7.　右側の歯車のボタンを押して、コード生成オプションを開きます。

8.　以下の操作を行います。

• コード生成オプションで追加ページの「application(アプリケーション)」を選択する
• OnsenUIを使用のスイッチをOFFにする
• 設定を適用して戻るボタンを押す

今回の場合はapplicationの中にid:canvas1があるので、そのことをAIに知らせるために追加ページで「application(アプリケーション)」にチェックを入れています。
また、今回の場合はHTML標準のcanvasタグだけを使用しているので、OnsenUIを使用しないことをAIに知らせたほうがAIコーディングの回答の正確性が増すのでOnsenUIを使用のチェックを外しています。

9.　送信ボタンをクリックします。返答があるまでお待ち下さい。
通常は10秒〜30秒程度で応答がありますが、サーバーの混み具合によっては時間がかかる場合もあります。
何かしらのエラーで一時的にAIコーディングが使えなくなっている可能性がありますので、時間をおいて再度試してください。

10.　正常であれば以下のように返答が表示されます(返答内容は毎回異なる可能性があります)
置き換えボタンをクリックします。

• 変更前コピーボタン:
  変更前のコードをクリップボードにコピーします

• 置き換えボタン:
  既存のコードをAIが作成したコードに置き換えます

• コピーボタン:
  クリップボードにAIから返答されたコードをコピーします。

参考までに、今回のAIコーディングの結果は以下のようになりました。

/**
 * animationの説明
 * @param {Event} event
 */
function animation(event) {
    // id:canvas1に映画「マトリックス」のような緑色の文字が上から降ってくるアニメーションを実装
    const canvas = document.getElementById('canvas1');
    const ctx = canvas.getContext('2d');

    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const katakana = 'アァカサタナハマヤャラワガザダバパ';
    const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    const nums = '0123456789';

    const alphabet = katakana + latin + nums;

    const fontSize = 16;
    const columns = canvas.width / fontSize;

    const drops = [];

    for (let i = 0; i < columns; i++) {
        drops[i] = 1;
    }

    function draw() {
        ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        ctx.fillStyle = '#0F0';
        ctx.font = fontSize + 'px monospace';

        for (let i = 0; i < columns; i++) {
            const text = alphabet.charAt(Math.floor(Math.random() * alphabet.length));
            ctx.fillText(text, i * fontSize, drops[i] * fontSize);

            if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
                drops[i] = 0;
            }

            drops[i]++;
        }
    }

    setInterval(draw, 33);
}

11.　スクリプトタブの右下の保存ボタンをクリックします。

12.　プラットフォームスイッチャーのその他オプションを開き、動作モードにします。

13.　プレビュー画面で上から緑色の文字が振ってくるアニメーションが表示されたら成功です。

コード生成オプション画面

• 追加ページ
  チェックを付けたアプリケーションやページを追加情報としてAIに渡します。
  AIに渡す追加情報が多くなるほど、PPを多く使用します。

• 追加スクリプト
  チェックを付けたスクリプトを追加情報としてAIに渡します。
  AIに渡す追加情報が多くなるほど、PPを多く使用します。

• モデル選択
  Gemini 2.5 Pro、Gemini 2.5 Flash、Gemini 2.5 Flash Lite、Gemini Flash Latest、Gemini Flash Lite Latest、Gemini 3 Pro Preview、Gemini 3 Flash Previewが選択可能です。 （ご自身のGemini APIキーを登録している場合、どのモデルを選択しても消費は1PPに固定されます）

• Temperature
  AIが生成する内容のランダム性や創造性を調整します。
  Temperatureが高いと予測不可能で独創的な回答になりやすく、低いと正確で安全な回答になりやすいです。

• OnsenUIを使用
  チェックがついている場合は、AIがOnsenUIを使うことを前提としたコードを作成します。
  チェックが付いていない場合は、標準的なjavascriptやHTMLを前提としたコードを作成します。

AIコーディングで独自コンポーネントを作成

AIコーディングで独自コンポーネントを作成することが可能です。

1.　AI機能を有効にしたうえでコンポーネントエディタ画面を開きます。
AI機能が有効であれば緑のAIボタンが表示されるのでクリックします。

2.　コードのリクエスト入力欄に、作成したいコンポーネントの要望を書き込みます。
ここでは新作映画のブランディングページを作ってみます。
以下を入力します。

子犬をテーマにした新作映画「パウパトロール：ザ・ムービー」のブランディングページを作成してください。
映画は、様々な種類の子犬たちが、困っている人たちを助けるために活躍するアドベンチャーストーリーです。
ページには、映画のタイトル、キャッチコピー、あらすじ、メインキャラクターの紹介、公開日、予告編動画、公式SNSへのリンクを含めてください。
可愛らしい雰囲気にしてください。

3.　歯車のボタンを押して、コード生成オプションを開きます。

4.　今回はOnsenUIを使ってみようと思うので、OnsenUIを使用にチェックを入れて閉じます。

5.　送信ボタンをクリックします。返答があるまでお待ち下さい。

6.　正常であれば以下のように返答が表示されます(返答内容は毎回異なる可能性があります)
置き換えボタンをクリックします。

7.　作成されたコンポーネントがプレビュー表示されました。
なお、コンポーネントがプレビュー表示されている状態でAIボタンを押し、AIに追加の指示をすることで更にコンポーネントをカスタマイズすることが可能です。

問題なければコンポーネント名を入力して保存します。

8.　今回できたコンポーネントは一番上のタグがons-pageなので、レイアウトウィンドウのトップレベルの階層リストにドラッグ&ドロップできます。

9.　これで作成したコンポーネントを使ったページが作れました。
AIへの指示を変えたり、OnsenUIを使わないパターンなど色々と試してください。