エディタ画面の基本操作

エディタ画面の概要

アプリケーションのバージョンを選択し「エディタ」ボタンをクリックするとエディタ画面が開きます。エディタ画面は、Pwappyでアプリを開発するためのメインの作業スペースです。

エディタ画面の主な要素:

• ツールボックスウィンドウ: アプリケーションを作るためのコンポーネントが配置されています。
• レイアウトウィンドウ: ツールボックスからコンポーネントをドラッグ&ドロップで配置してアプリケーションのレイアウトを構築するエリアです。
• プロパティウィンドウ: 選択したコンポーネントのプロパティ（属性、スタイル）およびアプリの設定をするエリアです。
• スクリプトウィンドウ: アプリケーションの動作を定義するイベント、JavaScriptコード、サービスワーカーの設定をするエリアです。
• プラットフォームスイッチャー: プレビューするデバイスのOS（iOS/Android）や画面サイズ、向きなどを切り替えることができます。
• プレビュー: 構築中のアプリケーションのプレビューを表示するエリアです。
• クイックページ選択: プレビュー画面の左側に表示されるパレットです。作成したページやダイアログなどのテンプレートをワンクリックで切り替えることができます。
• クイック編集: プレビュー画面の右側に表示されるパレットです。選択中の要素のテキストなどをすばやく変更できます。

ツールボックス

ツールボックスウィンドウにはドラッグ＆ドロップでアプリケーションのレイアウトを作るためのコンポーネントが並んでいます。

コンポーネントを検索

検索欄に使用したいコンポーネントの名前の一部を入力することで、検索することができます。

✕ボタンをクリックすることで検索ワードを削除できます。

レイアウト操作

ページの配置と操作

1. レイアウトウィンドウの＋ボタンをクリックします。
2. ページを選択します。
3. ページが追加されます。
4. または、ツールボックスウィンドウからons-pageをドラッグ&ドロップでトップレベルの階層に追加できます。
5. ダイアログ（ons-dialog）、アクションシート（ons-action-sheet）、トースト（ons-toast）、ポップオーバー（ons-popover）も、上記のページ（ons-page）と同様の操作で追加できます。

• ページの移動:
  ons-page、ons-dialog、ons-action-sheet、ons-toast、ons-popoverの各コンポーネントは、ドラッグ&ドロップでトップレベルの階層に移動できます。

コンポーネントの配置と操作

1. ツールボックスウィンドウから、配置したいコンポーネントをドラッグします。
2. レイアウトウィンドウで、コンポーネントをドロップしたい位置にマウスカーソルを移動します。
3. ドロップしたい位置に、青い点線が表示されたら、ドロップしてコンポーネントを配置します。

コンポーネントの操作:

• コンポーネントを選択:
  レイアウトウィンドウのコンポーネントをクリックすることで、そのコンポーネントが選択状態になります。
  選択した要素の周囲には、説明やタグ名を示す「選択ラベル」が表示されます。ラベル内の「親へ」ボタンをクリックすると、要素の直上にある親要素へと選択を切り替えることができます。なお、ラベルにマウスカーソルを合わせると半透明になり、下の要素の視認性を妨げません。

• アプリケーションを選択:
  レイアウトウィンドウのコンポーネント以外の部分をクリックすることで、アプリケーションが選択状態になります。

• コンポーネントの移動:
  コンポーネントをドラッグ＆ドロップで、レイアウト内の任意の位置に移動できます。

• ページ間のコンポーネント移動:
  ドラッグしながら移動先のページの上で停止するとページが選択されます。 移動先のページの任意の箇所に移動できます。

• ゴミ箱に移動:
  コンポーネントを選択し、「ゴミ箱」ボタンを2回クリックすることで配置済みのコンポーネントをゴミ箱に移動します。
  コンポーネントをドラッグ&ドロップで左下のゴミ箱アイコンに移動しても、同様にゴミ箱に移動ができます。

• ゴミ箱から戻す:
  左下のゴミ箱アイコンをクリックすると、ゴミ箱ウィンドウが開きます。
  ゴミ箱の中にあるコンポーネントをレイアウト内の任意の位置に移動できます。

• コピー＆ペースト:
  コピー元のコンポーネントを選択し、「コピー」ボタンをクリックし、貼り付けたいコンポーネントを選択し、「ペースト」ボタンをクリックすることでコンポーネントのコピーを貼り付けできます。

• コピー＆ペーストをキャンセル:
  レイアウトウィンドウの下に表示されている「✕」ボタンをクリックすることでキャンセルできます。

💡 モバイル端末でのドラッグ＆ドロップ補助（エッジトリガー）

画面幅が1024px未満の環境では、要素をドラッグしたまま画面の左端または右端（青い点線で示されるエッジ領域）に約1秒間重ねることで、対応する左右のウィンドウ（レイアウト・ツールボックス、あるいはプロパティ・スクリプト）が自動的にスライドして開きます。これにより、モバイル環境の限られた画面でも手動のウィンドウ開閉操作を省きながらスムーズに要素を配置できます。

💡 クイックページ選択とクイック編集

プレビュー画面の左右に表示されるパレットを使用して、画面の切り替えや要素の編集をすばやく行えます。

• クイックページ選択 (プレビュー左側):
  クリックすることで作成済みのページ、ダイアログ、トーストなどを切り替えます。

• クイック編集 (プレビュー右側):
  選択した要素に対して、プロパティウィンドウで編集しなくても、その場で以下の調整や削除を行えます。

  • 基本情報: ID、説明、CSSクラス、テキストの編集。
  • サイズ / 表示制御: 幅、高さ、最大・最小サイズ、はみ出し（Overflow）の挙動設定。
  • 余白調整: マージンおよびパディングの編集。
  • 文字装飾: フォントサイズ、太さ、色、文字揃え、行高、文字間隔の調整。
  • 背景色・不透明度: 背景色の編集と不透明度の調整。
  • ボーダー / 角丸: 枠線の種類・太さ・色、角丸の丸み調整。
  • シャドウ / 奥行き: ボックスおよび文字のシャドウ効果、ぼかし、広がりの設定。
  • Flexboxレイアウト・配置: 親のFlexboxレイアウト指定、および子要素の設定。
  • 削除: 選択中の要素をゴミ箱へ移動します。

💡 空のアプリケーションにおける骨組みの作成

テンプレートが全く配置されていない初期状態では、レイアウトウィンドウ内に「アプリの骨組みを作成」というカードが表示されます。ここから「基本の画面遷移」「タブメニュー」「サイドメニュー」「AIに作ってもらう（AI機能有効時のみ）」を選択することで、いつでもスターターテンプレートを適用できます。

OnsenUI以外のタグを使用

1. ツールボックスウィンドウの「HTML Tag」をレイアウトウィンドウの任意の場所にドラッグ＆ドロップします。
2. 専用のHTMLタグ選択ダイアログが表示されます。一覧に並んでいるよく使うタグ（div, span, p, img, a など）のボタンをクリックして即座に追加するか、下部の「その他のタグを手入力」欄に任意のタグ名を入力して「追加」ボタンをクリックします。
3. レイアウトウィンドウに追加されます。

レイアウトに配置されているコンポーネントを検索

1. レイアウトウィンドウの左の「虫眼鏡」ボタンをクリックします。
2. 検索ウィンドウが表示されます。
3. テキストエリアに検索したい文字列（プロパティウィンドウで設定されているIDや説明）を入力すると、レイアウトに配置されているコンポーネントを検索できます。検索されたコンポーネントの右にあるアイコンをクリックすることで、コンポーネントが選択状態になります。

特定の属性を指定して検索したい場合は、(属性名):(検索する文字列)の形式で入力することで検索できます

例:

• IDで検索：id:ons-button1
• 説明で検索：explain:ボタン
• クラスで検索：class:button
• textで検索：text:Button

属性の編集

プロパティウィンドウの属性タブでは、レイアウトウィンドウで選択したコンポーネントの属性を設定することができます。設定できる属性は、コンポーネントの種類によって異なります。

主な属性

• ID:
  コンポーネントを識別するためのIDです。

• 説明:
  コンポーネントの説明を指定します。これはアプリケーション上で特に意味を持ちませんが、人が認識するために役に立ちます。

• クラス:
  コンポーネントにCSSクラスを指定します。

• テキスト（text）:
  コンポーネントに表示する文字列を設定します。

その他、コンポーネントごとに固有の属性が多数存在します。
OnsenUI v2のコンポーネントの属性は以下の公式ページを参照してください。
OnsenUI v2のコンポーネント

特殊な属性

• Flexboxレイアウト（style-flex）:
  チェックを入れるとコンポーネントをCSS Flexboxの親要素に指定します。

• Flexbox配置（style-flexitem）:
  CSS Flexboxの子要素の設定をします。この属性は、直上の親コンポーネントの「Flexboxレイアウト（style-flex）」にチェックがついている場合のみ表示されます。

• サイズ / 表示制御（style-sizing）:
  要素の幅や高さ（px, %, vw, vh, autoなどの単位）、最大/最小サイズの制限、および要素からはみ出したコンテンツの処理（スクロール、非表示など）を設定できます。

• 余白調整（style-spacing）:
  コンポーネントの余白（Margin / Padding）を視覚的なボックス型のUIで設定・調整できます。原則としてすべてのコンポーネントに自動で用意されています。

• 文字装飾（style-typography）:
  フォントサイズ、太さ、文字色、文字揃え、行の高さ、文字間隔などを設定できます。（※テキスト表示に対応している要素でのみ表示されます）

• 背景 / 装飾（style-background）:
  背景色や背景画像の指定、グラデーション効果（線形・円形、角度、カラー分岐）、要素全体の不透明度などを調整できます。

• ボーダー / 角丸（style-border）:
  角丸の半径、枠線の太さやスタイル（実線、破線、点線など）、枠線色を設定できます。

• シャドウ / 奥行き（style-shadow）:
  要素の shadow（Box Shadow、内側/外側、各軸オフセット、ぼかし、広がり）および文字の shadow（Text Shadow）を設定できます。標準的なシャドウ強度を選択できるプリセットボタンも備わっています。

TIP

これらのエディタ内で数値や割合（％）が表示されている「青いバッジ」がある場合、そのバッジを左右にドラッグ（スライド）させることで、数値を細かく調整することができます。

• テンプレートID(template-id):
  ons-page、ons-dialog、ons-action-sheet、ons-toast、ons-popoverにはテンプレートID属性が存在します。ons-pageのようなレイアウトウィンドウの一番上の階層になるコンポーネントは、下の画像のようにtemplateタグの下に配置されます。テンプレートID属性はその際にtemplateタグのid属性に設定されます。

属性の追加

属性タブの右下にある「属性を編集（ペンマークのボタン）」をクリックします。

• 要素に追加: 選択しているコンポーネントだけに属性を追加します。
• タグに追加: 選択しているコンポーネントと同じタグすべてに属性を追加します。

「要素に追加」または「タグに追加」をクリックすると、属性追加用の画面になります。

• 属性名: 追加する属性名です。
• テンプレート: 属性を編集するテンプレートを指定します。

テンプレートには以下が指定できます。

• テキストで入力する場合: input[text]
• 数値で入力する場合: input[number]
• チェックボックスで入力する場合: input[checkbox]
• セレクトボックスで入力する場合: select[value1 value2]
• セレクトボックスで複数入力する場合: multiselect[value1 value2]

属性の編集・削除

1. 属性タブの右下にある「属性を編集（ペンマークのボタン）」をクリックします。
2. 編集または削除したい属性の右端にある「ペンマーク」をクリックします。
3. 変更または削除用のダイアログが表示されます。
   • 編集: テンプレート内容を編集し、「変更」ボタンをクリックします。
   • 削除: 「削除」ボタンをクリックすると、確認ダイアログの後にその属性が削除されます。

スタイルの編集

アプリケーションのスタイル

1. レイアウトウィンドウでアプリケーションを選択すると、プロパティウィンドウのスタイルタブにはアプリケーション全体のスタイルシート(CSS)を設定できます。

2. 例として以下の値を設定すると、プレビューに反映されます。

body {
    background-color: black;
}

コンポーネントのスタイル

1. レイアウトウィンドウでコンポーネントを選択すると、プロパティウィンドウのスタイルタブにはそのコンポーネント固有のCSSを設定できます。

2. 例として以下の値を設定すると、プレビューに反映されます。

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）を割り当てます。

イベントにスクリプトの割り当て

1. レイアウトウィンドウでコンポーネントを選択します。
2. スクリプトウィンドウのイベントタブで、設定したいイベント（click や init など）の「＋」ボタンをクリックします。
3. スクリプト名を入力して追加ボタンをクリックすると、新しいスクリプトが作成され、イベントに割り当てられます。
4. スクリプトの編集: 「ペン」ボタンをクリックすると、スクリプトタブへ移動し、即座に編集を開始できます。
5. 割り当ての解除: 「ゴミ箱」ボタンをクリックすると、イベントからスクリプトを取り除くことができます。

コンポーネントにイベント定義を追加

1. イベントタブ右下の「イベントを編集」ボタンをクリックし、さらに「追加」ボタンをクリックします。
2. イベント登録先: document, window, element のいずれかを指定します。
3. イベント名: click や keydown など、標準的なイベント名を指定します。
4. コメント: イベントの役割を日本語で入力できます。

コンポーネントのイベント定義を編集・削除

「イベントを編集」画面にて、既存の定義内容の変更や、定義自体の削除を行うことができます。

スクリプト

スクリプトウィンドウの「スクリプト」タブでは、JavaScriptコードの作成・管理を行います。

スクリプトの追加・編集

1. 右下の「スクリプトの追加」ボタンから、名前と種類（Function / Class）を指定して作成します。
2. 「編集」ボタンをクリックすると、高機能エディタが開きます。
3. エディタでスクリプトを編集したあとは、スクリプト一覧の上部には「最近開いたスクリプトを再開する」ショートカットが表示され、クリックして直前の編集をすばやく再開できます。

スクリプトエディタの機能

• コード補完: ons. などの入力時に利用可能な関数候補が表示されます。
• ホバー情報: 関数名にカーソルを合わせると、他のスクリプトで書かれた説明文が表示されます。
• ID貼り付け: レイアウトウィンドウからエディタへコンポーネントをドラッグ＆ドロップすると、その要素を操作するためのコードが自動挿入されます。
• プレビューに反映 (保存): 編集画面右下の「プレビューに反映」ボタンをクリックすると、エディタを閉じることなく、変更内容がプレビューに反映され、一時保存されます。
• 一覧に戻る (戻る): 編集画面左下の「一覧に戻る（←）」ボタンで、スクリプト一覧に戻ります。未保存の変更がある場合は、変更内容を保存して戻るか、破棄して戻るかを確認するダイアログが表示されます。

スクリプトの整理（ゴミ箱）

1. 不要なスクリプトは「ゴミ箱に移動」ボタン（2回クリック）で移動できます。
2. 左下のゴミ箱アイコンから、移動したスクリプトを元のリストに戻すことができます。

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

スクリプト内で Webコンポーネント（Class）を定義し、JSDoc（コメント）を記述すると、Pwappyが自動で解析します。

• 定義した属性はプロパティウィンドウに、イベントはイベントタブに自動的に反映されます。
• 作成したコンポーネントは「ツールボックス」に登録され、他の箇所で再利用できます。

割り当て箇所の検索

「目のアイコン」をクリックすると、そのスクリプトがどのコンポーネントのどのイベントに割り当てられているかを検索・確認できます。

コンソール

スクリプトウィンドウの「コンソール」タブでは、プレビュー中に発生した情報を確認できます。

• ログ出力: console.log() 等の実行結果を表示します。
• エラー診断: エラー発生時、原因となったコード周辺（スニペット）を表示し、デバッグを支援します。
• ウィンドウの切り離し: 右上の「拡大」アイコンでコンソールを独立したウィンドウとして表示できます。

テスト(試験機能)

「テスト」タブでは、アプリの動作を確認するための自動テストとモックを管理します。

テストシナリオ

作成したテストを実行し、画面遷移やボタン動作が仕様通りかを確認します。AIエージェントにテストコードを自動生成させることも可能です。

API・ブラウザモック

サーバー通信やスマートフォンの特殊機能（位置情報等）を模倣する設定です。実際の環境がなくても、偽の応答を返すことで開発を進められます。

サービスワーカー

Webアプリケーションのバックグラウンド処理（プッシュ通知やオフライン動作）を定義します。

• イベント割り当て: 背景動作に関するイベントにスクリプトを紐付けます。
• 注意: サービスワーカー内では画面操作（DOM操作）は行えません。

メニュー

画面中央下部のボタンから、各種管理メニューにアクセスできます。

• 実機テスト用QRコード: スマートフォンで動作確認するためのQRコードを表示します。
• ファイル管理: 画像等のアップロード・整理を行います。
• AIエージェント: 対話形式で開発を行うエージェントを起動します。
• スナップショット管理: 現在の状態の一時保存・復元を行います。
• 保存系: 編集内容のサーバー保存や、エディタの終了操作を行います。

ファイル管理

アプリケーションで使用する画像や素材ファイルを管理します。

基本操作

• ディレクトリ移動: ダブルクリックで移動、上部パス名クリックで戻ります。
• アップロード: ローカルファイルを指定ディレクトリへ保存します。
• ダウンロード: 選択したファイルやフォルダをZIP形式で取得します。

高度な操作

• ドラッグ＆ドロップ: ファイルをフォルダアイコンへドラッグして移動できます。
• 操作メニュー（切り取り・コピー・貼り付け）: 複数ファイルを選択しての移動や複製、名前変更、削除が行えます。
• パスのコピー: スクリプト等で利用するファイルのパス情報を取得します。

AIエージェントの使い方

メニューの「AIエージェント」から、チャットを通じて開発を自動化します。

1. 指示: 要望を入力して送信します（例：「一覧画面を追加して」）。
2. 構築: AIが設計図を作り、レイアウトやスクリプトを自動構築します。
3. 修復: 構築中にエラーが起きた場合、AIが自律的に修正を試みます。
4. 検証: 実装後、AIが自動テストを行い動作を確認します。

スナップショット管理

現在の作業状態（全データ）を履歴として記録します。

• 作成: 好きなタイミングで、名前に説明を付けて現在の状態を保存できます。
• 復元: 過去のスナップショットを選んで「復元」すると、その時点の状態に戻ります。
• 入出力: プロジェクト全体を .pwappy ファイルとして保存・読み込みが可能です。

操作の取り消し（Undo / Redo）

レイアウトウィンドウ上部のボタン、または Ctrl+Z / Ctrl+Y で操作を戻したり進めたりできます。

プラットフォームスイッチャー / プレビュー

プレビュー画面の見た目や動作モードを切り替えます。

• リロード: 表示内容を最新の状態に更新します。
• 選択枠の表示/非表示（目のアイコン）: レイアウトモードで選択した要素を囲む「アンバーオレンジの点滅枠」の表示・非表示を切り替えます。デザインの細部を確認する際、点滅枠を一時的に隠したい場合に便利です。
• OS切替: iOSとAndroidそれぞれの見た目を確認できます。
• モード（レイアウト）: 編集中の箇所を強調表示します。イベントは動作しません。
• モード（動作）: スクリプトやイベントを含む、実際の動作を確認できます。

ウィンドウハンドル

エディタ上のハンドルをドラッグすることで、各ウィンドウのサイズを自由に変更できます。