update.14日目担当のf-murakamiです。簡単にスマホアプリを作る方法について書いてみたいと思います。スマホアプリを作るにはAndroidならjavaやkotlin、iOSならobjective-cやswiftなどが主流ですが、あえてUnityを使ってみたいと思います。Unityは、スーパーマリオランや白猫プロジェクトなどの有名なゲームにも使われている、本来3Dや2Dのゲームを作るためのエンジンですが、実はUI機能もかなり充実しており、ツール的なアプリも簡単に作ることができます。Android、iOS、WebGLなどいろいろなプラットフォームに対応しており、1つ作ればいろいろな環境で動かすことができます。プログラム言語にC#が使えるので、C#er(シーシャーパー)の私としては、もってこいなんです。作るもの題材は簡単で実用的なものが良いので、電卓アプリにしてみます。単純な電卓アプリなら世に掃いて捨てるほどありますので、割り算の商と余りを求めるのに特化した電卓(名付けるとしたら「あまり電卓」かな)を考えてみます。意外にも、こんな電卓アプリはありそうでほとんどありません。使い道は少ないかもしれませんが、子供が小学校で習う割り算の答えあわせに使えたりしますよ。準備(Unityのインストール)まずは、Unityをインストールしてください。インストール方法はいろいろなサイトにありますので、ググってみてください。2017年12月14日現在、最新バージョンは2017.2.1です。あと、AndoridアプリならAndroidStudio、iOSアプリならXCodeが必要です。こちらもインストールしておいてください。アプリの作り方アプリを以下の流れで作っていきます。どんなアプリにするか設計するUnityプロジェクトを作るプラットフォームを選択する画面を作るイベント毎のロジックを作り、画面と紐つけるPCで動作確認する画面のオブジェクトに相対的な位置を設定するスマホに転送して動作確認する完成それでは順にいきましょう。どんなアプリにするか設計するすぐ実装に入りたいところですが、その前に設計しましょう。割り算の機能しかないので、以下のようなイメージです。手書きで恐縮ですが、趣味で作る分には凝った設計図は不要です。いったアプリを作りたいかイメージを膨らませて図解してみてください。設計図ができたらいよいよ実装に入ります。プロジェクトを作るUnityで実装するにあたり、まずプロジェクトというものを作ります。UnityのSDKを開くと、プロジェクトメニューが表示されますので、右上のNewを押します。プロジェクト名をいれて、2Dにチェックしますすると以下の画面が表示されます。プラットフォームを選択する最初にどのプラットフォームで動かすかを選択します。(あとで選択してもいいですが、先に選択した方が、画面サイズなどシミュレーションしやすいです。Settingsを選択します。今回はAndroidのアプリとして作ってみます。Platformを押下します。これでプラットフォームの準備ができました。画面を作る次に画面を作っていきます。Unityでは画面1つ1つをシーン(Scene)といいます。複数画面を遷移するようなアプリは複数のシーンが必要です。最初はシーンが1つだけ用意されていますが、まだ保存されておらずUntitledとなっています。今回作るアプリは、画面が1つだけなので、このシーンをMainとリネームして保存します。画面にラベルやボタンなどを配置するには、まずCanvasというオブジェクトを作る必要があります。このCanvas上に、ラベルやボタンなどを配置していきます。Canvas自体に座標をもっており、通常の2Dや3Dのオブジェクトを配置する座標とは別モノです。Canvasを作るにはシーンの右クリックメニューからCanvasを選択します。今見えている図面は2Dや3Dのオブジェクトを配置する図面で、この右上に向かって広がっているのがCanvasの図面です。Canvasを作ったら、Canvasの図面に合わせて表示領域を広げます。Canvasの図面が表示領域におさまればOKです。次にラベルやボタンなどのオブジェクトをおいていきます。入力フィールド(InputField)が良さそうですが、手入力はさせずボタンによる入力に限定するため、パネル(Panel)をおいてその上に文字を表示するようにします。そのため、パネルの子オブジェクトとして、文字を表示できるテキスト(Text)をつかいます入力欄としてパネルを配置します。パネルが画面全体に広がっているので縮小し、この子オブジェクトとしてテキストを配置します。同じようにパネルで作ります。子にテキストをセットします。文字も入れてみました。フォントなどはInspectorウインドウで設定します。入力ボタン以下の4種類のボタンを配置します。各数字ボタン(0~9)割る(÷)ボタンイコール(=)ボタンクリア(C)ボタンまずは1個数字ボタンを作ってみましょう。サイズやフォントをいい感じに設定したら、他のボタンはコピーして作りましょう。(あとで配置とか調整しますのでおおざっぱで良いです。)こんな感じになります。これで画面の配置は一通り完了です。イベント毎のロジックを作り、画面と紐つける手順は以下の流れ。以下のコードが書かれたスクリプトファイルができます。}}このスクリプトを画面のオブジェクトにアタッチします。今回の場合は、どのオブジェクトでも良いのですが、Canvasオブジェクトにしてみましょう。先ほど作成したスクリプトMainを選択これでアタッチ完了です。スクリプトに、イベント毎に対応するメソッドを定義するどんなイベントがあるかは、最初設計図に書きましたね。各イベントと対応するメソッドを定義してみます。InputClear(Updateメソッドは常に動かす処理を書きます。このアプリでは使いません)また、画面のオブジェクトをスクリプトに受け渡すため、クラス変数に定義します。UnityEngine.UIを定義しときます。変数とメソッドを一通り定義すると、以下のコードになります。}}画面のオブジェクトをスクリプトに受け渡す先ほどCanvasオブジェクトにアタッチしたスクリプトをみると、パラメータを渡せるようになってます。そこに受け渡す画面オブジェクトを指定します。(数字ボタンは配列で受け渡しています。)ボタン毎のクリックイベントに、スクリプトのメソッドを紐つける各ボタンオブジェクトにはクリックイベントが設定できるようになってます。スクリプトをアタッチしたオブジェクトと、イベントで実行するメソッドを指定します。これを各ボタンに設定していきます。以下の図は、数字1のボタンの設定例です。イベント毎の処理ロジックを作るイベント毎の処理ロジックを書いていきます。難しいロジックはないと思います。できあがったスクリプトは以下になります。}}PCで動作確認する一通り作ったら、PC上で動かしてみましょう。Gameビューから再生するとアプリが立ち上がります。動かしてみて、うまく動かなければデバッグして修正。画面のオブジェクトに相対的な位置を設定するPCで一通り動いたら、スマホで動かしたいところですが、その前にやるべきことが!スマホは機種によって画面のサイズや解像度が違います。先ほど、一通り配置したのは、絶対座標で設定されており、画面サイズや解像度が異なると、同じ座標でも位置が変わってしまいます。どのような画面でも対応できるようにするには、画面の最小最大の座標を統一し、相対的な位置を設定する必要があります。これには、アンカー(Anchors)というレイアウトの概念を用います。アンカーを用いると、画面のX軸Y軸それぞれ最小を0、最大を1に統一し、画面の相対的な位置を定義できます。以下のようなイメージです。例1)入力テキスト欄の場合(アンカーの基準を(0,0)にするため、Left,Right,Top,Bottomは全てゼロにしてください)例2)数字1ボタンの場合スマホに転送して動作確認するアンカーの設定を行ったら、いよいよスマホで動かしてみます。Settingsを開きます。SettingsからPackageNameをいれてください。Runを押して転送します。スマホのロックははずしておいてください。転送が完了したら自動的に立ち上がります計算してみます。動きますね!おわりにUnityを使ってスマホアプリを作る方法を、プロジェクトの作り方から、実機で動くところまで書いてみました。予想以上に記事量が増えてしまい、ところどころ端折ってます。ここってどうすればいいの?など不明な点がありましたらコメントしてください。今回はとりあえず動くところまででしたが、もちろんここから画面をもっときれいにしたり、操作しやすいレイアウトにしたり、機能を増やしてみたり、どんどんブラッシュアップできます。プラットフォームを切り替えればiOS用にも作れます。本稿を読んでみて、アプリを作ってみたい!って思った方、これなら私でもできる!って思った方、ぜひともアプリを作ってみましょう。いいのが作れたら、パブリックにも公開してみましょう。(公開の仕方は、いろいろなサイトに載ってますので調べてみてください。upLoginユーザーは見つかりませんでした。