GitHubでログイン
JA

ビジュアルエディターでグラフィックアプリを作る

JumPHP のグラフィックアプリは、ウィンドウがフォームでできた PHP プログラムです。ボタン、テキスト欄、リスト、ドロップダウン、チェックボックス、スライダー、画像、動画を使えます。HTML も CSS も不要です。エンジン自身が描画し、同じアプリが PC、Mac、Linux、ブラウザー、スマートフォン（Android と iOS）で動きます。

プロジェクトを作る

JumPHP IDE で New Project を選び、Graphic app（デスクトップアプリ）または Mobile app（縦向きのスマートフォンアプリ）を選びます。コマンドラインでは bin/jumphp gui:new contacts "Contacts"（スマートフォン用は --mobile を追加）。

サンプルアプリにはウィンドウ forms/MainForm.form.yaml と、そのコード src/Form/MainForm.php があります。

ウィンドウを描く

ビジュアルエディター：パレット、ウィンドウ、インスペクター
ビジュアルエディター

forms/MainForm.form.yaml を開くと Design モードで表示されます（Code と Split ボタンでファイルを表示）。

  • パレット（左）からウィジェットをウィンドウへドラッグするか、クリックして選択中のものの後ろに追加します。
  • ウィジェットはドラッグで移動できます。Del で削除、Ctrl+D で複製、Ctrl+Z で元に戻します。
  • インスペクター（右）で選んだウィジェットを設定します：テキスト、スタイル、サイズ（auto、fill または数値）、空きスペースの取り分（Grow）、配置。

画面に合わせて変わるレイアウト

  • Row（行）はウィジェットを横に、Column は縦に並べます。
  • Spacer は空きスペースを占めます。ボタンの前に置くと、ボタンを行の端へ押し出します。
  • Grid はウィジェットを 12 列に並べます。インスペクターの Columns (of 12) で画面サイズごとの幅を指定します：xs（スマートフォン）、sm（タブレット）、md と lg（大きな画面）。たとえば xs で 12、md で 6 にすると、スマートフォンでは 1 行に 1 パネル、PC では 2 つ横並びになります。
  • Hidden on で、特定の画面サイズのときウィジェットを隠せます。
同じウィンドウを iPhone で表示
同じウィンドウを iPhone で表示

ツールバーの PC、Laptop、Tablet、iPhone、Android ボタンで、各サイズのウィンドウを表示できます。PC モードではウィンドウの端をドラッグすると、レイアウトが変わる様子を確認できます。

イベントをつなぐ

ウィジェットをダブルクリックすると、IDE がそのメソッドをコードに書き込み（例：public function onAddClick(Button $sender): void）、すぐ書ける状態で開きます：

public function onAddClick(Button $sender): void
{
    $this->people->addItem($this->name->text);
    $this->name->text = '';
}

ほかのイベント（テキストの変更、リストで選ばれた行など）はインスペクターの Events セクションにあります。Id を持つウィジェットには $this->そのId で補完付きでアクセスできます。

画像と動画

画像は assets/images/ に置きます。Image ウィジェットの Picture 欄（ボタンなら Image 欄）に候補として表示されます。動画は bin/jumphp video contacts film.mp4 で音声付きの画像に分割され、Video ウィジェットが再生します。

実行とエクスポート

エディターの Run ボタンでアプリが起動します。あとはゲームと同じです：bin/jumphp build（ブラウザー版）、bin/jumphp export:standalone（Windows または Linux の実行ファイル）、bin/jumphp android と bin/jumphp apple（スマートフォンアプリ）。