Android および iOS での OpenGL ES アプリケーションのビルドBuild an OpenGL ES Application on Android and iOS

Visual C++ for Cross-Platform Mobile Development オプションをインストールすると、一般的なコードを共有する iOS アプリおよび Android アプリ用の Visual Studio ソリューションとプロジェクトを作成できます。When you install the Visual C++ for Cross-Platform Mobile Development option, you can create Visual Studio solutions and projects for iOS apps and Android apps that share common code. このトピックでは、簡単な iOS アプリと Android Native Activity アプリの両方を作成するソリューション テンプレートについて説明します。This topic guides you through a solution template that creates both a simple iOS app and an Android Native Activity app. これらのアプリには、OpenGL ES を使用して各プラットフォームで同じアニメーション回転キューブを表示する共通の C++ コードがあります。The apps have C++ code in common that uses OpenGL ES to display the same animated rotating cube on each platform. OpenGL ES (OpenGL for Embedded Systems または GLES) は、多くのモバイル デバイスでサポートされている 2D および 3D グラフィックス API です。OpenGL ES (OpenGL for Embedded Systems or GLES) is a 2D and 3D graphics API that is supported on many mobile devices.

要件 Requirements
新しい OpenGLES アプリケーション プロジェクトの作成 Create a new OpenGLES Application project
Android アプリのビルドと実行 Build and run the Android app
iOS アプリをビルドして実行するには Build and run the iOS app
アプリのカスタマイズCustomize your apps

要件Requirements

iOS および Android 用 OpenGL ES アプリを作成するには、その前にすべてのシステム要件を満たしていることを確認する必要があります。Before you can create an OpenGL ES app for iOS and Android, you must make sure you've met all system requirements. Visual Studio 2015 の Visual C++ for Cross-Platform Mobile Development オプションをインストールしている必要があります。You must install the Visual C++ for Cross-Platform Mobile Development option in Visual Studio 2015. インストールに必要なサード パーティのツールと SDK が含まれていること、また Visual Studio Emulator for Android がインストールされていることを確認してください。Make sure that the required third-party tools and SDKs are included in the installation, and that the Visual Studio Emulator for Android is installed. 詳細情報と詳細な手順については、「 Install Visual C++ for Cross-Platform Mobile Development」を参照してください。For more information and detailed instructions, see Install Visual C++ for Cross-Platform Mobile Development. iOS アプリをビルドしてテストするには、インストール手順に従って設定されている Mac コンピューターが必要になります。To build and test the iOS app, you'll need a Mac computer, set up according to the installation instructions. iOS 開発の設定方法の詳細については、「 Install And Configure Tools to Build using iOSFor more information about how to set up for iOS development, see Install And Configure Tools to Build using iOS

新しい OpenGLES アプリケーション プロジェクトの作成Create a new OpenGLES Application project

このチュートリアルでは、まず新しい OpenGL ES アプリケーション プロジェクトを作成します。それから、既定のアプリを Visual Studio Emulator for Android でビルドして実行します。In this tutorial, you first create a new OpenGL ES Application project and then build and run the default app in the Visual Studio Emulator for Android. 次に、iOS 用アプリをビルドし、iOS シミュレーターでアプリを実行します。Next you build the app for iOS and run the app in the iOS Simulator.

新しいプロジェクトを作成するにはTo create a new project

  1. Visual Studio を開きます。Open Visual Studio. メニュー バーで [ファイル][新規][プロジェクト]の順にクリックします。On the menu bar, choose File, New, Project.

  2. [新しいプロジェクト] ダイアログ ボックスの [テンプレート][Visual C++][クロス プラットフォーム]の順に選択し、 [OpenGLES アプリケーション (Android、iOS)] テンプレートを選択します。In the New Project dialog box, under Templates, choose Visual C++, Cross Platform, and then choose the OpenGLES Application (Android, iOS) template.

  3. アプリケーションに MyOpenGLESApp のような名前を付けてから、[OK] をクリックします。Give the app a name like MyOpenGLESApp, and then choose OK.

    新しい OpenGLES アプリケーション プロジェクトNew OpenGLES Application project

    Visual Studio は新しいソリューションを作成し、ソリューション エクスプローラーを開きます。Visual Studio creates the new solution and opens Solution Explorer.

    ソリューション エクスプ ローラーの MyOpenGLESAppMyOpenGLESApp in Solution Explorer

    新しい OpenGL ES アプリケーション ソリューションには、次の 3 つのライブラリ プロジェクトと 2 つのアプリケーション プロジェクトが含まれています。The new OpenGL ES Application solution includes three library projects and two application projects. ライブラリ フォルダーには、共有コード プロジェクトと共有コードを参照する 2 つのプラットフォーム固有のプロジェクトが含まれています。The Libraries folder includes a shared code project and two platform-specific projects that reference the shared code:

  • MyOpenGLESApp.Android.NativeActivity には、Android 上の Native Activity としてアプリを実装する参照とグルー コードが含まれています。MyOpenGLESApp.Android.NativeActivity contains the references and glue code that implements your app as a Native Activity on Android. グルー コードからのエントリ ポイントの実装は、main.cpp に配置されます。ここには MyOpenGLESApp.Shared に共通の共有コードが含まれています。The implementation of the entry points from the glue code are in main.cpp, which includes the common shared code in MyOpenGLESApp.Shared. プリコンパイル済みヘッダーは pch.h にあります。Precompiled headers are in pch.h. この Native Activity アプリ プロジェクトは、MyOpenGLESApp.Android.Packaging プロジェクトによって使用される共有ライブラリ (.so) ファイルにコンパイルされます。This Native Activity app project is compiled into a shared library (.so) file which is picked up by the MyOpenGLESApp.Android.Packaging project.

  • MyOpenGLESApp.iOS.StaticLibrary は、MyOpenGLESApp.Shared に共有コードが含まれている iOS スタティック ライブラリ (.a) ファイルを作成します。MyOpenGLESApp.iOS.StaticLibrary creates an iOS static library (.a) file that contains the shared code in MyOpenGLESApp.Shared. MyOpenGLESApp.iOS.Application プロジェクトで作成されたアプリケーションにリンクされます。It is linked to the app created by the MyOpenGLESApp.iOS.Application project.

  • MyOpenGLESApp.Shared には、プラットフォーム間で機能する共有コードが含まれています。MyOpenGLESApp.Shared contains the shared code that works across platforms. プラットフォーム固有のコードの条件付きコンパイルにプリプロセッサ マクロを使用します。It uses preprocessor macros for conditional compilation of platform-specific code. 共有コードは MyOpenGLESApp.Android.NativeActivity と MyOpenGLESApp.iOS.StaticLibrary の両方のプロジェクト参照によって使用されます。The shared code is picked up by project reference in both MyOpenGLESApp.Android.NativeActivity and MyOpenGLESApp.iOS.StaticLibrary.

    ソリューションには、Android および iOS プラットフォーム用のアプリを構築するための 2 つのプロジェクトがあります。The solution has two projects to build the apps for the Android and iOS platforms:

  • MyOpenGLESApp.Android.Packaging は、Android デバイスまたはエミュレーターに配置する .apk ファイルを作成します。MyOpenGLESApp.Android.Packaging creates the .apk file for deployment on an Android device or emulator. これには、リソースと、マニフェスト プロパティを設定する AndroidManifest.xml ファイルが含まれています。This contains the resources and AndroidManifest.xml file where you set manifest properties. Ant のビルド プロセスを制御する build.xml も含まれています。It also contains the build.xml file that controls the Ant build process. それは既定でスタートアップ プロジェクトとして設定されているため、Visual Studio から直接、配置して実行できます。It's set as the startup project by default, so that it can be deployed and run directly from Visual Studio.

  • MyOpenGLESApp.iOS.Application には、MyOpenGLESApp.iOS.StaticLibrary で C++ スタティック ライブラリ コードにリンクする iOS アプリを作成するためのリソースと Objective-C グルー コードが含まれています。MyOpenGLESApp.iOS.Application contains the resources and Objective-C glue code to create an iOS app that links to the C++ static library code in MyOpenGLESApp.iOS.StaticLibrary. このプロジェクトは、Visual Studio およびリモート エージェントによってご使用の Mac に転送されるビルド パッケージを作成します。This project creates a build package that is transferred to your Mac by Visual Studio and the remote agent. このプロジェクトをビルドする場合、Visual Studio はファイルとコマンドを送信して、アプリを Mac でビルドおよび配置します。When you build this project, Visual Studio sends the files and commands to build and deploy your app on the Mac.

Android アプリのビルドと実行Build and run the Android app

テンプレートで作成したソリューションは、既定のプロジェクトとして、Android アプリを設定します。The solution created by the template sets the Android app as the default project. インストールとセットアップを確認するために、このアプリをビルドおよび実行できます。You can build and run this app to verify your installation and setup. 初期テストでは、Visual Studio Emulator for Android によってインストールされているデバイス プロファイルのいずれかでアプリを実行します。For an initial test, run the app on one of the device profiles installed by the Visual Studio Emulator for Android. 別の対象でアプリをテストする場合は、対象のエミュレーターを読み込むか、デバイスをコンピューターに接続することができます。If you prefer to test your app on another target, you can load the target emulator or connect the device to your computer.

Android Native Activity アプリをビルドして実行するにはTo build and run the Android Native Activity app

  1. 選択されていない場合は、 [ソリューション プラットフォーム] ドロップダウン リストから [x86] を選択します。If it is not already selected, choose x86 from the Solution Platforms drop-down list.

    ソリューション プラットフォームを x86 に設定するSet the Solution Platform to x86

    x86 を使用して Android Emulator for Windows を対象にします。Use x86 to target the Android Emulator for Windows. デバイスを対象とする場合は、デバイス プロセッサに基づいてソリューション プラットフォームを選択します。If you are targeting a device, choose the solution platform based on the device processor. [ソリューション プラットフォーム] リストが表示されない場合は、[ボタンの追加と削除] リストから [ソリューション プラットフォーム] を選択してから、使用するプラットフォームを選択します。If the Solution Platforms list isn't displayed, choose Solution Platforms from the Add/Remove Buttons list, and then choose your platform.

  2. ソリューション エクスプローラーで、MyOpenGLESApp.Android.Packaging プロジェクトのショートカット メニューを開き、 [ビルド]を選択します。In Solution Explorer, open the shortcut menu for MyOpenGLESApp.Android.Packaging project and then choose Build.

    Android パッケージ化プロジェクトのビルドBuild Android Packaging Project

    Android 共有ライブラリと Android アプリ用のビルド プロセスの出力が [出力] ウィンドウに表示されます。The Output window displays the output of the build process for the Android shared library and the Android app.

    Android プロジェクト用のビルド出力Build Output for Android projects

  3. 配置ターゲットとして、いずれかの VS Emulator Android Phone (x86) プロファイルを選択します。Choose one of the VS Emulator Android Phone (x86) profiles as your deployment target.

    配置ターゲットの選択Choose deployment target

    別のエミュレーターをインストールしてあるか、Android デバイスを接続してある場合は、配置対象のドロップダウン リストからそれらを選択できます。If you have installed other emulators or connected an Android device, you can choose them in the deployment target drop-down list. アプリを実行するには、ビルドしたソリューション プラットフォームが、ターゲット デバイスのプラットフォームと一致している必要があります。To run the app, the built Solution Platform must match the platform of the target device.

  4. F5 キーを押してデバッグを開始するか、Shift キーを押しながら F5 キーを押してデバッグなしで開始します。Press F5 to start debugging, or Shift+F5 to start without debugging.

    Visual Studio によってエミュレーターが起動されます。コードを読み込んで配置するのに数秒かかります。Visual Studio starts the emulator, which takes several seconds to load and deploy your code. 以下に、Visual Studio Emulator for Android でのアプリの外観を示します。Here's how the app appears in the Visual Studio emulator for Android.

    Android エミュレーターで実行されているアプリApp running in Android Emulator

    アプリが開始されると、ブレークポイントの設定や、デバッガーを使用したステップ実行、ローカルの確認、値のウォッチができるようになります。Once your app has started, you can set breakpoints and use the debugger to step through code, examine locals, and watch values.

  5. Shift キーを押しながら F5 キーを押してデバッグを停止します。Press Shift + F5 to stop debugging.

    エミュレーターは実行され続ける独立したプロセスです。The emulator is a separate process that continues to run. 同じエミュレーターに対して、コードを何度も編集、コンパイル、配置できます。You can edit, compile, and deploy your code multiple times to the same emulator. アプリはエミュレーターのアプリ コレクションに表示され、そこから直接起動することができます。Your app appears in the app collection on the emulator, and it can be started from there directly.

    生成された Android Native Activity アプリとライブラリ プロジェクトは、Android プラットフォームとやり取りする "グルー" コードを含むダイナミック ライブラリに C++ 共有コードを配置します。The generated Android Native Activity app and library projects put the C++ shared code in a dynamic library that includes "glue" code to interface with the Android platform. つまり、ほとんどのアプリ コードはライブラリ内に含まれ、マニフェスト、リソース、およびビルド手順は、パッケージ化するプロジェクトに含まれます。This means most of the app code is in the library, and the manifest, resources, and build instructions are in the packaging project. 共有コードは、NativeActivity プロジェクトの main.cpp から呼び出されます。The shared code is called from main.cpp in the NativeActivity project. Android Native Activity をプログラムする方法の詳細については、Android NDK Developer の「 Concepts 」ページを参照してください。For more information about how to program an Android Native Activity, see the Android Developer NDK Concepts page.

    Visual Studio は、プラットフォーム ツールセットとして Clang を使用する Android NDK を使用して Android Native Activity プロジェクトをビルドします。Visual Studio builds Android Native Activity projects by using the Android NDK, which uses Clang as the platform toolset. Visual Studio は、NativeActivity プロジェクトのプロパティを、ターゲット プラットフォームでコンパイル、リンク、デバッグするために使用されるコマンド ラインのスイッチとオプションにマップします。Visual Studio maps the properties in the NativeActivity project to the command-line switches and options that are used to compile, link, and debug on the target platform. 詳細については、MyOpenGLESApp.Android.NativeActivity プロジェクトの [プロパティ ページ] ダイアログを参照してください。For details, open the Property Pages dialog for the MyOpenGLESApp.Android.NativeActivity project. コマンド ライン スイッチの詳細については、「 Clang コンパイラ ユーザーズ マニュアル」を参照してください。For more information about the command line switches, see the Clang Compiler User's Manual.

iOS アプリをビルドして実行するにはBuild and run the iOS app

iOS アプリ プロジェクトの作成および編集は Visual Studio で行いますが、ライセンスの制限があるため、プロジェクトのビルドおよび配置は、Mac から行う必要があります。The iOS app project is created and edited in Visual Studio, but because of licensing restrictions, it must be built and deployed from a Mac. Visual Studio は、Mac で実行するリモート エージェントと通信して、プロジェクト ファイルを転送し、ビルド、配置、デバッグのコマンドを実行します。Visual Studio communicates with a remote agent running on the Mac to transfer project files and execute build, deployment, and debugging commands. iOS アプリをビルドするには、その前に通信できるように Mac と Visual Studio を設定および構成する必要があります。You must set up and configure your Mac and Visual Studio to communicate before you can build the iOS app. 手順の詳細については、「 Install And Configure Tools to Build using iOS」を参照してください。For detailed instructions, see Install And Configure Tools to Build using iOS. リモート エージェントを実行し、Visual Studio を Mac にペアリングすると、iOS アプリをビルドおよび実行して、インストールとセットアップを確認することができます。Once the remote agent is running and Visual Studio is paired with your Mac, you can build and run the iOS app to verify your installation and setup.

iOS アプリをビルドして実行するにはTo build and run the iOS app

  1. リモート エージェントが Mac で実行されていること、また Visual Studio がリモート エージェントにペアリングされていることを確認します。Verify that the remote agent is running on your Mac, and that Visual Studio is paired to the remote agent. リモート エージェントを開始するには、ターミナル アプリのウィンドウを開き、「 vcremote」を参照してください。To start the remote agent, open a Terminal app window and enter vcremote. 詳細については、「Visual Studio でリモート エージェントを構成する」を参照してください。For more information, see Configure the remote agent in Visual Studio.

    vcremote を実行している Mac ターミナル ウィンドウMac Terminal window running vcremote

  2. 選択されていない場合は、 [ソリューション プラットフォーム] ドロップダウン リストから [x86] を選択します。If it is not already selected, choose x86 from the Solution Platforms drop-down list.

    ソリューション プラットフォームを x86 に設定するSet the Solution Platform to x86

    x86 を使用して iOS シミュレーターを対象とします。Use x86 to target the iOS Simulator. iOS デバイスを対象とする場合は、デバイス プロセッサ (通常、ARM プロセッサ) に基づいてソリューション プラットフォームを選択します。If you are targeting an iOS device, choose the solution platform based on the device processor (usually an ARM processor). [ソリューション プラットフォーム] リストが表示されない場合は、[ボタンの追加と削除] リストから [ソリューション プラットフォーム] を選択してから、使用するプラットフォームを選択します。If the Solution Platforms list isn't displayed, choose Solution Platforms from the Add/Remove Buttons list, and then choose your platform.

  3. ソリューション エクスプローラーで、MyOpenGLESApp.iOS.Application プロジェクトのショートカット メニューを開き、 [ビルド]をクリックします。In Solution Explorer, open the shortcut menu for the MyOpenGLESApp.iOS.Application project and choose Build.

    iOS アプリケーション プロジェクトのビルドBuild iOS Application project

    iOS スタティック ライブラリと iOS アプリ用のビルド プロセスの出力が [出力] ウィンドウに表示されます。The Output window displays the output of the build process for the iOS static library and the iOS app. Mac でリモート エージェントを実行しているターミナル ウィンドウに、コマンドおよびファイル転送アクティビティが表示されます。On the Mac, the Terminal window running the remote agent shows the command and file transfer activity.

    Mac コンピューターで、コード署名要求を受け入れるようにプロンプトが表示される場合があります。On your Mac computer, you may be prompted at accept a code signing request. [許可] を選択して続行します。Choose Allow to continue.

  4. ツールバーで [iOS シミュレーター] を選択し、Mac の iOS シミュレーターでアプリを実行します。Choose iOS Simulator on the toolbar to run the app in the iOS Simulator on your Mac. シミュレーターを開始するのにはしばらく時間がかかる場合があります。It may take a moment to start the simulator. 出力を表示するために、Mac 上でシミュレーターを最前面に表示する必要がある場合があります。You may have to bring the simulator to the foreground on your Mac to see its output.

    iOS シミュレーターで実行されているアプリApp running on iOS Simulator

    アプリが開始されたら、ブレークポイントを設定し、Visual Studio デバッガーを使用してローカルを確認したり、呼び出し履歴を確認したり、値を観察したりできます。Once your app has started, you can set breakpoints and use the Visual Studio debugger to examine locals, see the call stack, and watch values.

    iOS アプリケーションのブレークポイントにあるデバッガーDebugger at breakpoint in iOS app

  5. Shift キーを押しながら F5 キーを押してデバッグを停止します。Press Shift + F5 to stop debugging.

    iOS シミュレーターは、Mac 上で実行し続ける独立したプロセスです。The iOS Simulator is a separate process that continues to run on your Mac. 同じ iOS シミュレーター インスタンスに対して、コードを何度も編集、コンパイル、配置できます。You can edit, compile, and deploy your code multiple times to the same iOS Simulator instance. 展開した後は、シミュレーターで直接コードを実行することもできます。You can also run your code directly in the simulator after it has been deployed.

    生成された iOS アプリとライブラリのプロジェクトは、共有コードのみを実装するスタティック ライブラリに C++ コードを配置します。The generated iOS app and library projects put the C++ code in a static library that implements only the shared code. アプリケーション コードのほとんどは、アプリケーション プロジェクトに配置されます。Most of the application code is in the Application project. このテンプレート プロジェクトの共有ライブラリ コードへの呼び出しは、GameViewController.m ファイルで実行されます。The calls to the shared library code in this template project are made in the GameViewController.m file. iOS アプリをビルドするために、Visual Studio は Xcode プラットフォーム ツールセットを使用します。これは、Mac で実行されるリモート クライアントと通信する必要があります。To build your iOS app, Visual Studio uses the Xcode platform toolset, which requires communication with a remote client that is running on a Mac.

    Visual Studio は、Xcode を使用してアプリをビルドするために、リモート クライアントに対してプロジェクト ファイルを転送し、コマンドを送信します。Visual Studio transfers the project files and sends commands to the remote client to build the app using Xcode. リモート クライアントは、ビルドの状態情報を Visual Studio に返します。The remote client sends build status information back to Visual Studio. アプリが正常にビルドされたら、Visual Studio を使用して、アプリを実行してデバッグするためのコマンドを送信できます。When the app has built successfully, you can use Visual Studio to send commands to run and debug the app. Visual Studio のデバッガーは、iOS シミュレーター (Mac または接続されている iOS デバイス上で実行されます) で実行されるアプリを制御します。The debugger in Visual Studio controls the app running in the iOS Simulator running on your Mac, or on an attached iOS device. Visual Studio は、StaticLibrary プロジェクトのプロパティを、ターゲット iOS プラットフォームでビルド、リンク、デバッグするために使用されるコマンド ラインのスイッチとオプションにマップします。Visual Studio maps the properties in the StaticLibrary project to the command-line switches and options that are used to build, link, and debug on the target iOS platform. コンパイラ コマンド ライン オプションの詳細については、MyOpenGLESApp.iOS.StaticLibrary プロジェクトの [プロパティ ページ] ダイアログを開いてください。For compiler command-line option details, open the Property Pages dialog for the MyOpenGLESApp.iOS.StaticLibrary project.

アプリのカスタマイズCustomize your apps

共通機能を追加または変更するために、共有 C++ コードを変更することができます。You can modify the shared C++ code to add or change common functionality. 一致するように MyOpenGLESApp.Android.NativeActivity および MyOpenGLESApp.iOS.Application プロジェクトの共有コードへの呼び出しを変更する必要があります。You must change the calls to the shared code in the MyOpenGLESApp.Android.NativeActivity and MyOpenGLESApp.iOS.Application projects to match. プリプロセッサ マクロを使用して、共通コードにおけるプラットフォーム固有のセクションを指定することができます。You can use preprocessor macros to specify platform-specific sections in your common code. Android 用にビルドする場合は、プリプロセッサ マクロ __ANDROID__ が事前に定義されます。The preprocessor macro __ANDROID__ is predefined when you build for Android. iOS 用にビルドする場合は、プリプロセッサ マクロ __APPLE__ が事前に定義されます。The preprocessor macro __APPLE__ is predefined when you build for iOS.

特定のプロジェクト プラットフォーム用の IntelliSense を表示するには、エディター ウィンドウの上部のナビゲーション バーにあるコンテキスト スイッチャーのドロップダウンでプロジェクトを選択します。To see the IntelliSense for a particular project platform, choose the project in the context switcher dropdown in the Navigation bar at the top of the editor window.

エディターのプロジェクト コンテキスト スイッチャーのドロップダウンProject Context Switcher dropdown in Editor

現在のプロジェクトにおける IntelliSense の問題については、赤色の波線でマークされます。IntelliSense issues in the current project are marked with a red wavy line. 他のプロジェクトでの問題については、紫色の波線でマークされます。Issues in other projects are marked with a purple wavy line. 既定では、Visual Studio はコードの色付け、Java または Objective-C ファイルの IntelliSense をサポートしません。By default, Visual Studio does not support code colorization or IntelliSense for Java or Objective-C files. ただし、アプリケーション名、アイコン、およびその他の実装の詳細を設定するために、ソース ファイルを変更したり、リソースを変更したりできます。However, you can still modify the source files and change the resources to set your application name, icon, and other implementation details.