エディタ画面の基本操作
エディタ画面の概要
アプリケーションのバージョンを選択し「エディタ」ボタンをクリックするとエディタ画面が開きます。エディタ画面は、Pwappyでアプリを開発するためのメインの作業スペースです。
エディタ画面の主な要素:
- ツールボックスウィンドウ: アプリケーションを作るためのコンポーネントが配置されています。
- レイアウトウィンドウ: ツールボックスからコンポーネントをドラッグ&ドロップで配置してアプリケーションのレイアウトを構築するエリアです。
- プロパティウィンドウ: 選択したコンポーネントのプロパティ（属性、スタイル）およびアプリの設定をするエリアです。
- スクリプトウィンドウ: アプリケーションの動作を定義するイベント、JavaScriptコード、サービスワーカーの設定をするエリアです。
- プラットフォームスイッチャー: プレビューするデバイスのOS（iOS/Android）や画面サイズ、向きなどを切り替えることができます。
- プレビュー: 構築中のアプリケーションのプレビューを表示するエリアです。
ツールボックス
ツールボックスウィンドウにはドラッグ＆ドロップでアプリケーションのレイアウトを作るためのコンポーネントが並んでいます。 
コンポーネントを検索
検索欄に使用したいコンポーネントの名前の一部を入力することで、検索することができます。 
✕ボタンをクリックすることで検索ワードを削除できます。 
レイアウト操作
ページの配置と操作
- レイアウトウィンドウの＋ボタンをクリックします。
- ページを選択します。
- ページが追加されます。
- または、ツールボックスウィンドウからons-pageをドラッグ&ドロップでトップレベルの階層に追加できます。
- ons-dialog(ダイアログ)、ons-action-sheet(アクションシート)は、上記のons-page(ページ)と同様の操作で追加できます。
- ページの移動:
ons-page、ons-dialog、ons-action-sheetの３つのコンポーネントは、ドラッグ&ドロップでトップレベルの階層に移動できます。
コンポーネントの配置と操作
- ツールボックスウィンドウから、配置したいコンポーネントをドラッグします。
- レイアウトウィンドウで、コンポーネントをドロップしたい位置にマウスカーソルを移動します。
- ドロップしたい位置に、青い点線が表示されたら、ドロップしてコンポーネントを配置します。
コンポーネントの操作:
コンポーネントを選択:
レイアウトウィンドウのコンポーネントをクリックすることで、そのコンポーネントが選択状態になります。アプリケーションを選択
レイアウトウィンドウのコンポーネント以外の部分をクリックすることで、アプリケーションが選択状態になります。コンポーネントの移動:
コンポーネントをドラッグ＆ドロップで、レイアウト内の任意の位置に移動できます。
ページ間のコンポーネント移動
ドラッグしながら移動先のページの上で停止するとページが選択されます。 
移動先のページの任意の箇所に移動できます。 
ゴミ箱に移動:
コンポーネントを選択し、「ゴミ箱」ボタンを2回クリックすることで配置済みのコンポーネントをゴミ箱に移動します。
コンポーネントをドラッグ&ドロップで左下のゴミ箱アイコンに移動しても、同様にゴミ箱に移動ができます。
ゴミ箱から戻す:
左下のゴミ箱アイコンをクリックすると、ゴミ箱ウィンドウが開きます。
ゴミ箱の中にあるコンポーネントをレイアウト内の任意の位置に移動できます。 
コピー＆ペースト:
コピー元のコンポーネントを選択し、「コピー」ボタンをクリックし、貼り付けたいコンポーネントを選択し、「ペースト」ボタンをクリックすることでコンポーネントのコピーを貼り付けできます。
コピー＆ペーストをキャンセル:
レイアウトウィンドウの下に表示されている「✕」ボタンをクリックすることでキャンセルできます。
OnsenUI以外のタグを使用
- ツールボックスウィンドウの「HTML Tag」をレイアウトウィンドウの任意の場所にドラッグ＆ドロップします。
- タグ名を入力するウィンドウが表示されるので、使用したいタグ(例えばdiv)を入力します。
- レイアウトウィンドウに追加されます。
レイアウトに配置されているコンポーネントを検索
- レイアウトウィンドウの左の「虫眼鏡」ボタンをクリックします。
- 検索ウィンドウが表示されます。
- テキストエリアに検索したい文字列(プロパティウィンドウで設定されているIDや説明)を入力すると、レイアウトに配置されているコンポーネントを検索できます。検索されたコンポーネントの右にあるアイコンをクリックすることで、コンポーネントが選択状態になります。
特定の属性を指定して検索したい場合は、(属性名):(検索する文字列)の形式で入力することで検索できます
例:
- IDで検索：id:ons-button1
- 説明で検索：explain:ボタン
- クラスで検索：class:button
- textで検索：text:Button
属性の編集
プロパティウィンドウの属性タブでは、レイアウトウィンドウで選択したコンポーネントの属性を設定することができます。設定できる属性は、コンポーネントの種類によって異なります。 
主な属性
ID:
コンポーネントを識別するためのIDです。説明:
コンポーネントの説明を指定します。これはアプリケーション上で特に意味を持ちませんが、人が認識するために役に立ちます。クラス:
コンポーネントにCSSクラスを指定します。text:
コンポーネントに表示する文字列を設定します。
その他、コンポーネントごとに固有の属性が多数存在します。
OnsenUI v2のコンポーネントの属性は以下の公式ページを参照してください。
OnsenUI v2のコンポーネント
特殊な属性
style-flex:
コンポーネントをCSS Flexboxの親要素に指定します。
style-flexitem:
CSS Flexboxの子要素の設定をします。この属性は直上の親コンポーネントのstyle-flexにチェックがついている場合だけ表示されます。
template-id:
ons-page、ons-dialog、ons-action-sheetにはtemplate-id属性が存在します。ons-pageのようなレイアウトウィンドウの一番上の階層になるコンポーネントは、下の画像のようにtemplateタグの下に配置されます。template-id属性はその際にtemplateタグのid属性に設定されます。
属性の追加
1. 属性タブの右下にあるボタンをクリックすると属性の追加・編集・削除ができます。
要素に追加:
選択しているコンポーネントだけに属性を追加しますタグに追加:
選択しているコンポーネントと同じタグ全てに属性を追加します。
2. 要素に追加またはタグに追加ボタンをクリックすると、下のような画面になります。
属性名:
追加する属性名です。テンプレート:
属性を編集するテンプレートを指定します。
3. テンプレートには以下が指定できます。
テキストで入力する場合: input[text]
数値で入力する場合: input[number]
チェックボックスで入力する場合: input[checkbox]
セレクトボックスで入力する場合: select[value1 value2]
セレクトボックスで複数入力する場合: multiselect[value1 value2]
属性の編集・削除
編集ボタンをクリックすることで、既存の属性のテンプレートを編集できます。
また、削除ボタンを押すことで属性を削除できます。 
スタイルの編集
アプリケーションのスタイル
レイアウトウィンドウでアプリケーションを選択すると、プロパティウィンドウのスタイルタブにはアプリケーション全体のスタイルシート(CSS)を設定できます。
例として以下の値を設定すると、プレビューに反映されます。
body {
background-color: black;
}
コンポーネントのスタイル
レイアウトウィンドウでコンポーネントを選択すると、プロパティウィンドウのスタイルタブにはそのコンポーネント固有のCSSを設定できます。
例として以下の値を設定すると、プレビューに反映されます。
element.style {
background-color: black;
}
アプリ設定の編集
プロパティウィンドウの「アプリ設定」タブでは、アプリケーション全体の設定およびAIエージェントの設計ルールを管理します。 
言語の編集
言語はhtmlタグの lang 属性に設定されます。 
アプリの説明の編集
アプリの説明はheadタグ配下の meta タグ（description）に設定されます。 
ヘッダーの編集
ヘッダーは <head> タグ内に直接設定されます。外部のCSSやJavaScriptを読み込むコードを記述します。 
ボディトップ / ボディボトムの編集
<body> タグの開始直後、または終了直前に挿入されるリソースを設定します。 
マニフェストの編集
PWAに必要な manifest.webmanifest ファイルの内容を編集します。設定はheadタグ内のlinkタグから参照されます。 
型定義の編集
スクリプトを編集する際のコード補完に使用する .d.ts ファイルのURLを指定します。改行することで複数のファイルを指定できます。 
プロジェクト仕様書の編集
Markdown形式でアプリケーションの目的や動作ルールを記述します。
- 設計図としての役割: AIエージェントはこの内容を開発の最優先ルールとして参照します。
- 精度の向上: 機能を具体的に記述することで、AIによる自動構築の精度が高まります。
リソースの保護設定
ページおよびスクリプトの保護リストです。
- ロック機能: 鍵アイコンをクリックして赤色（ロック状態）にすると、そのリソースはAIエージェントによる自動的な変更や削除の対象から除外されます。
- 用途: 手動で詳細に調整したコードをAIに上書きされたくない場合に有効です。
イベント
スクリプトウィンドウの「イベント」タブでは、コンポーネントに動作（JavaScript）を割り当てます。
イベントにスクリプトの割り当て
- レイアウトウィンドウでコンポーネントを選択します。
- スクリプトウィンドウのイベントタブで、設定したいイベント（
clickやinitなど）の「＋」ボタンをクリックします。
- スクリプト名を入力して追加ボタンをクリックすると、新しいスクリプトが作成され、イベントに割り当てられます。
- スクリプトの編集: 「ペン」ボタンをクリックすると、スクリプトタブへ移動し、即座に編集を開始できます。
- 割り当ての解除: 「ゴミ箱」ボタンをクリックすると、イベントからスクリプトを取り除くことができます。
コンポーネントにイベント定義を追加
- イベントタブ右下の「イベントを編集」ボタンをクリックし、さらに「追加」ボタンをクリックします。
- イベント登録先:
document,window,elementのいずれかを指定します。 - イベント名:
clickやkeydownなど、標準的なイベント名を指定します。 - コメント: イベントの役割を日本語で入力できます。
コンポーネントのイベント定義を編集・削除
「イベントを編集」画面にて、既存の定義内容の変更や、定義自体の削除を行うことができます。 
スクリプト
スクリプトウィンドウの「スクリプト」タブでは、JavaScriptコードの作成・管理を行います。
スクリプトの追加・編集
- 右下の「スクリプトの追加」ボタンから、名前と種類（Function / Class）を指定して作成します。
- 「編集」ボタンをクリックすると、高機能エディタが開きます。
スクリプトエディタの機能
- コード補完:
ons.などの入力時に利用可能な関数候補が表示されます。 - ホバー情報: 関数名にカーソルを合わせると、他のスクリプトで書かれた説明文が表示されます。
- ID貼り付け: レイアウトウィンドウからエディタへコンポーネントをドラッグ＆ドロップすると、その要素を操作するためのコードが自動挿入されます。
スクリプトの整理（ゴミ箱）
- 不要なスクリプトは「ゴミ箱に移動」ボタン（2回クリック）で移動できます。
- 左下のゴミ箱アイコンから、移動したスクリプトを元のリストに戻すことができます。
独自コンポーネントの作成
スクリプト内で Webコンポーネント（Class）を定義し、JSDoc（コメント）を記述すると、Pwappyが自動で解析します。
- 定義した属性はプロパティウィンドウに、イベントはイベントタブに自動的に反映されます。
- 作成したコンポーネントは「ツールボックス」に登録され、他の箇所で再利用できます。
割り当て箇所の検索
「目のアイコン」をクリックすると、そのスクリプトがどのコンポーネントのどのイベントに割り当てられているかを検索・確認できます。 
コンソール
スクリプトウィンドウの「コンソール」タブでは、プレビュー中に発生した情報を確認できます。 
- ログ出力:
console.log()等の実行結果を表示します。 - エラー診断: エラー発生時、原因となったコード周辺（スニペット）を表示し、デバッグを支援します。
- ウィンドウの切り離し: 右上の「拡大」アイコンでコンソールを独立したウィンドウとして表示できます。
テスト(試験機能)
「テスト」タブでは、アプリの動作を確認するための自動テストとモックを管理します。
テストシナリオ
作成したテストを実行し、画面遷移やボタン動作が仕様通りかを確認します。AIエージェントにテストコードを自動生成させることも可能です。
API・ブラウザモック
サーバー通信やスマートフォンの特殊機能（位置情報等）を模倣する設定です。実際の環境がなくても、偽の応答を返すことで開発を進められます。
サービスワーカー
Webアプリケーションのバックグラウンド処理（プッシュ通知やオフライン動作）を定義します。 
- イベント割り当て: 背景動作に関するイベントにスクリプトを紐付けます。
- 注意: サービスワーカー内では画面操作（DOM操作）は行えません。
メニュー
画面中央下部のボタンから、各種管理メニューにアクセスできます。 
- 実機テスト用QRコード: スマートフォンで動作確認するためのQRコードを表示します。
- ファイル管理: 画像等のアップロード・整理を行います。
- AIエージェント: 対話形式で開発を行うエージェントを起動します。
- スナップショット管理: 現在の状態の一時保存・復元を行います。
- 保存系: 編集内容のサーバー保存や、エディタの終了操作を行います。
ファイル管理
アプリケーションで使用する画像や素材ファイルを管理します。 
基本操作
- ディレクトリ移動: ダブルクリックで移動、上部パス名クリックで戻ります。
- アップロード: ローカルファイルを指定ディレクトリへ保存します。
- ダウンロード: 選択したファイルやフォルダをZIP形式で取得します。
高度な操作
- ドラッグ＆ドロップ: ファイルをフォルダアイコンへドラッグして移動できます。
- 操作メニュー（切り取り・コピー・貼り付け）: 複数ファイルを選択しての移動や複製、名前変更、削除が行えます。
- パスのコピー: スクリプト等で利用するファイルのパス情報を取得します。
AIエージェントの使い方
メニューの「AIエージェント」から、チャットを通じて開発を自動化します。
- 指示: 要望を入力して送信します（例：「一覧画面を追加して」）。
- 構築: AIが設計図を作り、レイアウトやスクリプトを自動構築します。
- 修復: 構築中にエラーが起きた場合、AIが自律的に修正を試みます。
- 検証: 実装後、AIが自動テストを行い動作を確認します。
スナップショット管理
現在の作業状態（全データ）を履歴として記録します。 
- 作成: 好きなタイミングで、名前に説明を付けて現在の状態を保存できます。
- 復元: 過去のスナップショットを選んで「復元」すると、その時点の状態に戻ります。
- 入出力: プロジェクト全体を
.pwappyファイルとして保存・読み込みが可能です。
操作の取り消し（Undo / Redo）
レイアウトウィンドウ上部のボタン、または Ctrl+Z / Ctrl+Y で操作を戻したり進めたりできます。 
プラットフォームスイッチャー / プレビュー
プレビュー画面の見た目や動作モードを切り替えます。
- リロード: 表示内容を最新の状態に更新します。
- OS切替: iOSとAndroidそれぞれの見た目を確認できます。
- モード（レイアウト）: 編集中の箇所を強調表示します。イベントは動作しません。
- モード（動作）: スクリプトやイベントを含む、実際の動作を確認できます。
ウィンドウハンドル
エディタ上のハンドルをドラッグすることで、各ウィンドウのサイズを自由に変更できます。 