Vue.js + Capacitor モバイルアプリ開発ガイド(WebNative使用版)

こんにちは！今日はWebNativeを使って、Vue.jsでつくったWebアプリをCapacitorを使ってスマートフォンアプリに変身させる方法を一緒に学んでいきましょう。

最初は難しく感じるかもしれませんが、一歩ずつ進めていけば大丈夫です。分からないことがあったら、いつでも遠慮なく質問してくださいね。

WebNative 拡張機能インストール

ステップ1: WebNative 拡張機能をインストールしましょう

• VScodeを開いて拡張機能タブを押します
• WebNativeを検索します
• インストールボタンを押します
• VScodeの左側にWebNativeタブが表示されたら完了です

Vue プロジェクトの作成

ステップ2: 新しいVueプロジェクトを作成しましょう

• VScodeを開きます
• WebNativeタブを選択します
• Start New Projectを押します
  • Nameにアプリ名を入力します
  • Folderでプロジェクトフォルダを指定します
  • FrameworkでVueを選びます
    ※ CapacitorPluginではありません
  • Create Projectを押します

しばらく待つとWhich package manager should be used to install dependencies?と聞かれたら、お好きなものを選んでください。私はpnpmを選びました。

ステップ3: Capacitorをインストールしましょう

VScodeのWebNativeタブが選択された状態から始めます。

Capacitor組み込み

• Recommendations から Integrate Capacitor を選びます
  • Integrate Capacitor with this project to make it native mobile?と聞かれたら、Integrate Capacitor を押下します

Androidプロジェクト追加

• Recommendations から Add Android Project を選びます
  • Add Android support to your Capacitor project?と聞かれたら、Add Android Project を押下します

iOSプロジェクト追加

• Recommendations から Add iOS Project を選びます
  • Add iOS support to your Capacitor project?と聞かれたら、Add iOS Project を押下します

Bundle Id 設定

• Configration を選びます
  • Properties を選びます
    • Bundle Id を押下します
      • Bundle Idを入力しenterを押します

Android用のみ変更されたら以下の手順でiOS版も変更します。

• Configration を選びます
  • Properties を選びます
    • iOS Bundle Id を押下します
      • Bundle Idを入力しenterを押します

Display Name 設定

• Configration を選びます
  • Properties を選びます
    • Display Name を押下します
      • Display Nameを入力しenterを押します

ステップ4: アプリをビルドしてみましょう

VScodeのWebNativeタブから始めます。

• Projectを選択します
• Buildを選択します

[wn] Building...
[wn] Build Completed.

ステップ5: アプリを同期してみましょう

VScodeのWebNativeタブから始めます。

• Projectを選択します
• Syncを選択します

[wn] Syncing...
[wn] Sync Completed.

ステップ6: iOS開発環境を起動してみましょう

VScodeのWebNativeタブから始めます。

• Projectを選択します
• Open in Xcodeを選択します

初回に一度だけ

iOSで署名エラーが出ないように
Xcodeで以下の手順を行ってください：

1. 左側のファイル一覧から「App」を選択
2. 「Signing & Capabilities」タブをクリック
3. 「Team」の部分であなたのApple IDを選択

起動を確認できたら、Xcodeを終了します。

ステップ7: Android開発環境を起動してみましょう

VScodeのWebNativeタブから始めます。

• Projectを選択します
• Open in Android Studioを選択します

起動を確認できたら、Android Studioを終了します。

ステップ8: Androidアプリを実行してみましょう

VScodeのWebNativeタブから始めます。

• 実機をUSB接続します
• Runを選択します
• Androidを選択します

実機上で確認できたら完了です。

ステップ9: iOSアプリを実行してみましょう

VScodeのWebNativeタブから始めます。

• 実機をUSB接続します
• Runを選択します
• iOSを選択します

実機上で確認できたら完了です。

まとめ

お疲れさまでした！これでWebNativeを使って、Vue.jsアプリをiOSとAndroidの両方で動作するモバイルアプリに変換することができました。

今日学んだこと

1. WebNative拡張機能の導入 - VS Codeでモバイルアプリ開発環境を整備
2. Vueプロジェクトの作成 - WebNativeを使った効率的なプロジェクト作成
3. Capacitorの統合 - WebアプリをネイティブアプリにするためのCapacitor導入
4. マルチプラットフォーム対応 - iOS・Android両対応の設定
5. ビルドと同期 - アプリのビルドとCapacitorとの同期作業
6. 実機テスト - 実際のスマートフォンでのアプリ動作確認

次のステップ

これで基本的な環境構築は完了しました！次はVueアプリの機能を拡張したり、Capacitorの様々なプラグインを活用してより本格的なモバイルアプリを作ってみてくださいね。

何か困ったことがあったら、いつでもお気軽にご相談ください。一緒に素敵なアプリを作っていきましょう！