バックエンドの人がNativePHPの力を借りて初めてモバイルアプリを作ってみたの巻（上）

システム開発の仕事についてから、ずっとバックエンドばかりを担当してきました。APIやDB周りは慣れている一方で、GPSやカメラといった「スマホならでは」の機能には、ほとんど触れてきませんでした。

「触ってみたい」という気持ちはあるのですが、Flutter や Nuxt.js となると、まだ敷居が高い印象でした。

そこでネットなどを調べるうちに NativePHP を見つけました。NativePHP は、PHP（Laravel）の知識を活かして、ネイティブのモバイルアプリを開発できるフレームワークです。「これであれば、バックエンドの自分でもスマホ特有の機能に近づけそうだ」と思ったのがきっかけで、試してみようと思いました。

　※ NativePHP for Mobile については、以前は有料ライセンスが必要だったのですが、2026年2月のアップデート（Mobile v3）により、モバイル向け機能を含むコア全体が完全無料・オープンソース（MITライセンス）化されました。

今回は、慣れ親しんだPHPのまま始められる NativePHP で、簡単なモバイルアプリを作成してみた内容をまとめていきたいと思います。

１）NativePHP for Mobile のテスト環境について

今回どのようなアプリを作るつもりかというと、スマホならでは？の GPS 機能を使った、次のようなタイムレコーダーアプリです。

• 出勤ボタンを押し、スマホの位置が会社の位置から半径 10m 以内であれば、出勤記録を外部 API 経由で保存する
• 退勤ボタンを押し、スマホの位置が会社の位置から半径 10m 以内であれば、退勤記録を外部 API 経由で保存する
• 会社の位置から半径 10m を外れている場合は、エラーを表示し、記録しない

ざっくりこのようなイメージです。今回は NativePHP for Mobile で Android アプリとして動かす検証を行いました。それぞれの置き場所を、次にまとめます。

２）Laravel + NativePHP for Mobile の導入

HomebrewでホストPCにインストールしたそれぞれ（ PHP / Node.js / Composer ）のバージョンは以下のとおりです。

$ php -v
PHP 8.5.9 (cli) (built: Jul 28 2026 13:06:52) (NTS)
Copyright (c) The PHP Group
Built by Homebrew
Zend Engine v4.5.9, Copyright (c) Zend Technologies
    with Zend OPcache v8.5.9, Copyright (c), by Zend Technologies
$ node -v
v22.15.0
$ composer -v
                ・
                ・
                ・
Composer version 2.10.2 2026-07-01 11:24:45

インストール前に、ここで少しだけ NativePHP for Mobile の画面描画について触れておきます。

NativePHP for Mobile v3 では画面描画に WebView を使っていましたが、v4 からは SuperNative という方式になり、ネイティブ UI を直接描画するようになっています。

今回は NativePHP for Mobile v4 をインストールして、SuperNative 方式で画面を作成しようと思います。初めにLaravelのプロジェクトを作成して、NativePHP for Mobile v4 のパッケージを追加します。

$ cd /Volumes/外付けSSD/share
$ composer create-project laravel/laravel native-test
$ cd native-test
$ composer require "nativephp/mobile:~4.0"

パッケージ追加ができたら、NativePHP for Mobile のインストールです。

$ php artisan native:install

インストール時に app bundle ID を入れるように言われますが、この時にハイフンを使用すると後でエラーになるので、アンダースコアにするか、ハイフン自体つけないようにして使用しないようにして下さい。インストールが成功すると、

      NATIVEPHP v4

—–  SUPERNATIVE —– 

と表示されます。

３）mobile-ui プラグインの導入

SuperNative の UI 部品は、コアの nativephp/mobile 単体では足りません。

コアはアプリの土台（インストール・ルーティング・描画の仕組み）を担い、ボタンやテキストなどの部品は別パッケージの nativephp/mobile-ui に分かれています。そのため、画面を組む前に mobile-ui を導入し、native:plugin:register で登録しておく必要があります。登録しないと、UI が Unknown と表示されてしまいます。

導入には、以下コマンドを実行します。

$ composer config repositories.nativephp-mobile-ui vcs https://github.com/NativePHP/mobile-ui
$ composer require "nativephp/mobile-ui:^0.2"
$ php artisan vendor:publish --tag=nativephp-plugins-provider
$ php artisan native:plugin:register nativephp/mobile-ui
$ php artisan native:plugin:list

正常に登録されると、php artisan native:plugin:list で mobile-ui プラグインが表示されます。

４）Android Studio の導入

今回容量の関係で、Android Studio アプリ自体を外付け SSD に入れました。Android Studio のインストール自体はネットでいろんな記事があるので割愛しますが、外付け SSD に入れる際の注意点として、以下があります。

• セットアップは Custom を選び、SDK ロケーション を外付け SSD 配下にする
• .bash_profile シェルに ANDROID_HOME / ANDROID_AVD_HOME / ANDROID_SDK_ROOT / platform-tools の PATH を設定する
• AVD も SSD 配下にする場合は ANDROID_USER_HOME を合わせて設定する

公式ドキュメント を参照して以下のように設定しました。

.bash_profile
                ・
                ・
                ・
# Android Studio用
export ANDROID_HOME="/Volumes/外付けSSD/Android Studio/Android/sdk"
export ANDROID_SDK_ROOT="/Volumes/外付けSSD/Android Studio/Android/sdk"
export ANDROID_USER_HOME="/Volumes/外付けSSD/Android Studio/Android"
export ANDROID_AVD_HOME="/Volumes/外付けSSD/Android Studio/Android/avd"

export PATH="$PATH:$ANDROID_HOME/emulator"
export PATH="$PATH:$ANDROID_HOME/platform-tools"

# Android Studio同梱のJDKを設定
export JAVA_HOME="/Volumes/外付けSSD/Android Studio/Android Studio.app/Contents/jbr/Contents/Home"
export PATH="$JAVA_HOME/bin:$PATH"

それぞれの用途ですが、以下のとおりです。

• ANDROID_HOME … SDK の場所。native:run が emulator / build ツールを探すときに使う
• JAVA_HOME … Gradle ビルド用の Java。未設定だと Unable to locate a Java Runtime になりやすい
• PATH（platform-tools / emulator） … adb や emulator をターミナルから直接呼べるようにする

　※ adb : PCとAndroid端末（やエミュレータ）をつなぐ公式コマンド
         Gradle : Androidアプリをビルド（組み立て）する仕組み

５）最初の Native 画面作成

Android Studio の準備ができたら、いよいよ初めての画面作成を行っていきたいと思います。以下コマンドを実行します。

$ php artisan native:make Home

app/NativeComponents/Home.php

<?php

namespace App\NativeComponents;

use Illuminate\View\View;
use Native\Mobile\Edge\NativeComponent;

class Home extends NativeComponent
{
    public function render(): View
    {
        return view('native.home');
    }
}

resources/views/native/home.blade.php

<column class="w-full h-full items-center justify-center gap-4 p-6">
    <text class="text-2xl font-extrabold text-zinc-900 text-center">Welcome</text>
    <text class="text-sm text-zinc-600 text-center">NativePHP SuperNative</text>
</column>

routes/mobile.php

<?php
use App\NativeComponents\Home;
use Illuminate\Support\Facades\Route;

Route::native('/', Home::class);

bootstrap/app.php

<?php

use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
use Illuminate\Http\Request;

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__.'/../routes/web.php',
        commands: __DIR__.'/../routes/console.php',
        health: '/up',
        then: function (): void {
            require __DIR__.'/../routes/mobile.php';
        },
    )
                ・
                ・
                ・

この2つまで終わると、アプリ起動時の最初の画面として Home（native.home）が表示されるようになります。

６）エミュレータ起動

画面表示確認を行うため、エミュレータを起動したいと思いますが、そのためには AVD（仮想のAndroid端末） が必要です。AVD をコマンドで作るには avdmanager / sdkmanager が必要なので、公式 zip を外付け SSD の SDK へ展開しました。

$ export ANDROID_HOME="/Volumes/外付けSSD/Android Studio/Android/sdk"
$ curl -fL "https://dl.google.com/android/repository/commandlinetools-mac_x86_64-15859902_latest.zip" -o /tmp/commandlinetools-mac.zip

# （当時のチェックサム）改ざん確認
$ echo "c5a6378ab5cf7e0d5701921405115befff13e9ff7417fb588389338f8bd050f3 /tmp/commandlinetools-mac.zip" | shasum -a 256 -c -

$ mkdir -p "$ANDROID_HOME/cmdline-tools"
$ rm -rf "$ANDROID_HOME/cmdline-tools/latest" /tmp/android-cmdline-extract
$ mkdir -p /tmp/android-cmdline-extract

unzip -q /tmp/commandlinetools-mac.zip -d /tmp/android-cmdline-extract
mv /tmp/android-cmdline-extract/cmdline-tools "$ANDROID_HOME/cmdline-tools/latest"

SDK に展開を行ったので、一応バージョンを確認します。

$ "$ANDROID_HOME/cmdline-tools/latest/bin/sdkmanager" --version
WARNING: The SDK Manager CLI tool (sdkmanager) is deprecated. Use Android CLI instead.
The 'android' binary can also be found in the cmdline-tools directory, and 'android sdk' is the replacement for 'sdkmanager'.
To learn more about the Android CLI and how to use it, see the documentation (https://d.android.com/tools/agents/android-cli)

22.0

sdkmanager 自体はまだ動きますが、Google 側で 非推奨（deprecated） になりつつあり、「これから（または将来）は Android CLI（android コマンド）を使ってね」という内容のWARNINGが出てはいますが、バージョン自体の確認はできており、導入自体はできています。展開先は以下です。

$ANDROID_HOME/cmdline-tools/latest/bin/
（ここに sdkmanager / avdmanager が入る）

avdmanager を使用するために、４）で追加した .bash_profile に以下を追加します。

.bash_profile
                ・
                ・
                ・
# Android Studio用
export ANDROID_HOME="/Volumes/外付けSSD/Android Studio/Android/sdk"
export ANDROID_SDK_ROOT="/Volumes/外付けSSD/Android Studio/Android/sdk"
export ANDROID_USER_HOME="/Volumes/外付けSSD/Android Studio/Android"
export ANDROID_AVD_HOME="/Volumes/外付けSSD/Android Studio/Android/avd"

export PATH="$PATH:$ANDROID_HOME/emulator"
export PATH="$PATH:$ANDROID_HOME/platform-tools"
export PATH="$PATH:$ANDROID_HOME/cmdline-tools/latest/bin"        ←　これ

# Android Studio同梱のJDKを設定
export JAVA_HOME="/Volumes/外付けSSD/Android Studio/Android Studio.app/Contents/jbr/Contents/Home"
export PATH="$JAVA_HOME/bin:$PATH"

.bash_profile が有効になると avdmanager コマンドが使えるようになりますので、以下コマンドで AVD を作成します。重い機種だと操作が不安定になりやすいので、検証用には今から作成する軽量の Light_Phone_API_35（720×1280）を使います。

$ export ANDROID_USER_HOME="/Volumes/外付けSSD/Android Studio/Android"
$ export ANDROID_HOME="/Volumes/外付けSSD/Android Studio/Android/sdk"
$ export ANDROID_AVD_HOME="/Volumes/外付けSSD/Android Studio/Android/avd"
$ export JAVA_HOME="/Volumes/外付けSSD/Android Studio/Android Studio.app/Contents/jbr/Contents/Home"
$ export PATH="$JAVA_HOME/bin:$ANDROID_HOME/cmdline-tools/latest/bin:$ANDROID_HOME/emulator:$ANDROID_HOME/platform-tools:$PATH"

# システムイメージの導入
$ yes | sdkmanager --sdk_root="$ANDROID_HOME" \
  "platforms;android-35" \
  "system-images;android-35;google_apis;x86_64"

# AVD 作成
$ echo no | avdmanager create avd \
  --name Light_Phone_API_35 \
  --package "system-images;android-35;google_apis;x86_64" \
  --device "Nexus 5" \
  --force

作成できたら、AVD の設定ファイル（ config.ini ）の以下項目を軽量化のために調整します。場所は以下でした。

/Volumes/外付けSSD/Android Studio/Android/avd/Light_Phone_API_35.avd/config.ini

それでは、いよいよエミュレータを起動していきます。（一部キャプチャが取れなかったのですみません。）

$ emulator -list-avds
Light_Phone_API_35        ←　作成したAVDが表示されます。
$ emulator -avd Light_Phone_API_35 -no-snapshot-load >/tmp/emu-light.log 2>&1 &
$ disown -h
$ adb wait-for-device
$ adb devices -l
List of devices attached
emulator-5554               device product:sdk_gphone64_x86_64 model:sdk_gphone64_x86_64 device:emu64xa transport_id:3

emulator-5554 … device のように出れば成功です。

エミュレータを起動すると、ホーム画面が表示されます。

それでは、モバイルアプリの起動をしたいと思います。以下コマンドを実行すると、初回時は ビルド → インストール → アプリ起動まで行います。

$ cd native-test
$ php artisan native:run android --no-interaction --no-tty

５）で作成した画面が表示されました！

長くなりましたが、環境構築からアプリ起動、Welcome 画面の表示まで確認できました。次回は、タイムレコーダー画面の実装と、打刻を受け取る API サーバー側の実装に進みたいと思います。