便利な機能

Pwappyには、アプリケーション開発をさらに効率化するための便利な機能が備わっています。ここではそれらの機能について説明します。

アクションパレットとコードの自動生成

レイアウトに配置したコンポーネントを、スクリプト（JavaScript）から取得したり制御したりするためのコードを、極めて簡単な操作で安全に生成・挿入することができます。

方法1：レイアウトからスクリプトエディタへの直接ドラッグ＆ドロップ

スクリプトウィンドウの「スクリプト」タブで、編集したいスクリプトを開きます。
レイアウトウィンドウから、操作したいコンポーネント（例: ボタンや入力欄など）をスクリプトエディタ上にドラッグします。
挿入したい行でドロップすると、その場に「アクションパレット」がポップアップ表示されます。

方法2：コンテキストメニューから起動

スクリプトエディタ上を右クリック（モバイルは長押し）し、メニューから「✨ アクションパレットを開く」を選択します。

アクションパレットの操作手順

パレットが開くと、要素の選択、アクションの選択、引数の入力の3ステップで対話的にコードを組み立てることができます。
ここでは「ons-navigator」を例に説明をします。

要素の検索・選択 (Step 1):
スクリプトエディタのメニューから「✨ アクションパレットを開く」を選択した場合は、最初に要素の検索と選択をする画面が表示されます。
これにはアプリ内の全要素がツリー構造でリスト表示されます。
また、ons-navigator や ons-splitter、ons-tabbar といった主要な構成コンポーネントは、アクセスしやすいよう「主要なコントロール」グループとして最上位に配置されます。
検索窓にIDやタグ名、説明文を入力して目的の要素を絞り込み、選択します。
なお、レイアウトからスクリプトエディタへ要素を直接ドラッグ＆ドロップした場合はこのステップは省略されます。
ここではons-navigatorを選択したものとして進めます。
アクションの選択 (Step 2):
選択した要素で利用可能なメソッドの一覧が表示されます。
ここではons-navigatorを使い次の画面に移動したいので「次の画面へ進む」を選択します。
引数・変数の設定 (Step 3):
メソッドに必要な引数の入力欄、またはエディタ内で既に定義されている変数が表示されます。
ここでは「home_page.html」と「sub_page.html」が表示されています。「sub_page.html」が次の画面なので「sub_page.html」を選択します。
次のアクション:
このまま続けて同じ要素にアクションを追加できます。
ここではもう次のアクションは不要なので、☓ボタンを押して閉じます。
コードの自動挿入:
エディタの指定位置に自動的にコードが挿入されています。

このように、アクションパレットを使用するとコーディングをせずにアプリを組み立てることができます。

便利なユーティリティ機能（ログ出力やアラート）の自動生成

アクションパレットは、画面上の要素を操作するだけでなく、デバッグ用のログ出力（console.log）や、ブラウザの標準機能（アラートやタイマー処理）など、汎用的なプログラムコードの作成にも対応しています。

コンテキストメニュー等からパレットを起動し、以下の手順でコードを生成できます。
ここではデバッグ時によく使う「console.log」を例にします。

「ユーティリティ・API」の選択 (Step 1):
要素の選択画面で、ツリーの最下部にある「ユーティリティ・API」グループの中から選択します。
ここでは「コンソール・デバッグ(console)」を選択します。
アクションの選択 (Step 2):
実行したい命令を一覧から選択します。
ここでは「ログを出力(console.log)」を選択します。
内容（引数）の入力 (Step 3):
出力したい文字列を入力したり、や、タイマーのミリ秒数（1000 ＝ 1秒）をキーボードで入力、または一覧から変数を選択します。
ここでは「チェックポイント」という文字列が初期表示されるのでそのままEnterを押します。
次のアクション:
このまま続けてアクションを追加できます。
ここではもう次のアクションは不要なので、☓ボタンを押して閉じます。
コードの自動挿入:
エディタの指定位置に自動的にコードが挿入されています。

便利なPWA / Onsen UI コードスニペット（実験的機能）

スクリプトエディタでは、スマートフォンのハードウェア機能を呼び出すブラウザのAPIや、Onsen UIのスマートフォン特有のUIロジック、データ保存用のコードテンプレートが組み込まれています。

エディタ内で特定のキーワード（pwa-、ons-、utils-）を打ち始めることで、実用的なコードスニペットの候補が自動的に提案されます。

提供されている主なスニペット一覧

接頭辞	スニペット名 / 機能	概要
pwa-	`pwa-text-to-speech`	画面上の任意のテキストを取得し、音声合成（TTS）で読み上げます。
	`pwa-speech-to-text`	マイクを起動し、喋った言葉をテキスト化（文字起こし）します。
	`pwa-camera-photo`	スマホのカメラを起動して写真を撮影、またはアルバムから画像を選択し、Base64で取得します。
	`pwa-share`	スマートフォン標準のOS共有メニュー（LINEやSNS等への共有）を呼び出します。
	`pwa-copy-clipboard`	テキストをクリップボードにコピーしてトーストで通知します。
	`pwa-vibration`	端末をバイブレーション（振動）させます。（※iOSは非対応）
	`pwa-shake-detector`	デバイスの加速度センサーを使い、スマホを「振った」動作を検知します。
	`pwa-wake-lock`	タイマーやQR表示時など、スマホの画面が自動消灯（ロック）するのを防ぎます。
ons-	`ons-list-filter`	検索窓の入力に合わせて、リストの項目をリアルタイムで絞り込みます。
	`ons-lazy-repeat`	メモリを節約しながら、何千行もの大量のリスト要素を高速に仮想スクロール描画します。
	`ons-pull-hook-setup`	「画面を下に引っ張って更新」するローディング表示と同期処理を定義します。
	`ons-fab-scroll-hide`	画面をスクロール中、邪魔にならないようにFAB（フローティングボタン）を自動で隠します。
utils-	`utils-local-storage`	データの永続化（LocalStorage）を安全にパース・保存するラッパー。
	`utils-indexed-db`	容量制限の大きいIndexedDBを手軽に使えるPromiseラッパー。
	`utils-first-launch`	アプリインストール後の最初の1回目の起動時だけチュートリアルを出すための判定。
	`utils-debounce`	ボタンが連続でタップされたり、検索窓での入力のたびに処理が連続実行されるのを防ぎます。

ビジュアルアイコンピッカー

プロパティウィンドウの属性タブで icon 属性（ons-icon などのアイコン名設定）を編集する際、入力欄の右端にアイコン型のボタンが表示されます。ビジュアルアイコンピッカー001

このボタンをクリックすると、FontAwesomeのアイコンを検索・選択できる「ビジュアルアイコンピッカー」が開きます。

リアルタイム検索: 検索窓に star や home などのキーワードを入力することで、対応するアイコンを一覧から素早く絞り込めます。

コンポーネントエディタ

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

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

コンポーネント名:
ツールボックスに表示されるコンポーネントの名前です。
検索用:
ツールボックスの検索欄に入力した文字列と部分一致する文字列を入力してください。(入力は任意) たとえば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関連のコンポーネントの下に追加されます。

ツールボックス

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

ツールボックスウィンドウから独自コンポーネントを左上のボタンにドラッグ＆ドロップします。
コンポーネントエディタ画面が表示され、独自コンポーネントの内容が表示されます。
コンポーネントが不要な場合は削除ボタンをクリックします。
編集した内容を保存する場合は保存ボタンをクリックします。

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

レイアウトウィンドウから、コンポーネント化したい部分をツールボックスにドラッグ＆ドロップします。
コンポーネントエディタ画面が表示され、コンポーネントのコード欄にHTMLが入力されています。必要に応じて編集できます。
コンポーネント名と検索用の文字列を入力して保存ボタンをクリックすることで、独自コンポーネントを作成できます。

ウェブコンポーネント

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

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

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

@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を取得することができます。

ダッシュボードのポイントパネルにある、チケットアイコン（クーポン入力ボタン）をクリックします。 ※オレンジ色のボタンです。
入力ダイアログが表示されるので、クーポンコードを入力します。
「適用」ボタンをクリックします。
コードが正しければ、ポイントが加算されます。

ポイント履歴の確認

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

AI機能

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

Gemini APIキーの登録（推奨）

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

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

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

【登録手順】

ダッシュボードのメニューを開き、「設定」をクリックします。
設定画面の「Gemini APIキー設定」セクションで、ご自身のAPIキーを入力し、「保存」ボタンをクリックします。
APIキーは「Google AI Studioでキーを取得」のリンク先から取得できます。

AI機能を有効にする

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

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

【有効化手順】

ダッシュボードのメニューから「設定」を開きます。
設定画面の上部にある「AI機能を有効にする」のトグルスイッチをONの状態にしてください。
18歳未満でないことの確認メッセージが表示されるので、問題がなければ「はい」を押してください。
エディタ画面を開き、スクリプトエディタなどのAIボタンが利用できる場所に緑色の「AI」ボタンが表示されていれば有効化は完了です。

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

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

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

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

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

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

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

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

animation

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

AIコーディング

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

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

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

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

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

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

AIコーディング

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

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

変更前コピーボタン:
変更前のコードをクリップボードにコピーします
置き換えボタン:
既存のコードを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.　スクリプトタブの右下の保存ボタンをクリックします。 AIコーディング

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

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

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

AIコーディング

追加ページ
チェックを付けたアプリケーションやページを追加情報として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ボタンが表示されるのでクリックします。 AIコーディング

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

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

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

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

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

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

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

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

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

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

便利な機能 ​

アクションパレットとコードの自動生成 ​

方法1：レイアウトからスクリプトエディタへの直接ドラッグ＆ドロップ ​

方法2：コンテキストメニューから起動 ​

アクションパレットの操作手順 ​

便利なユーティリティ機能（ログ出力やアラート）の自動生成 ​

便利なPWA / Onsen UI コードスニペット（実験的機能） ​

提供されている主なスニペット一覧 ​

ビジュアルアイコンピッカー ​

コンポーネントエディタ ​

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

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

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

ウェブコンポーネント ​

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

Pwappyポイント（PP）の取得 ​

広告視聴による取得 ​

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

ポイント履歴の確認 ​

AI機能 ​

Gemini APIキーの登録（推奨） ​

AI機能を有効にする ​

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

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

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

便利な機能

アクションパレットとコードの自動生成

方法1：レイアウトからスクリプトエディタへの直接ドラッグ＆ドロップ

方法2：コンテキストメニューから起動

アクションパレットの操作手順

便利なユーティリティ機能（ログ出力やアラート）の自動生成

便利なPWA / Onsen UI コードスニペット（実験的機能）

提供されている主なスニペット一覧

ビジュアルアイコンピッカー

コンポーネントエディタ

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

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

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

ウェブコンポーネント

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

Pwappyポイント（PP）の取得

広告視聴による取得

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

ポイント履歴の確認

AI機能

Gemini APIキーの登録（推奨）

AI機能を有効にする

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

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

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