まりんちゃんが初めてスマホアプリを作ろうとしている話 第2話

まりんちゃん
- 広告 -

漫画2

– 登場人物 –

万座まりん
万座 まりん(まんざ まりん)
小学6年生
好奇心旺盛で、何でも兄の真似をしたがるお年頃。

万座備一
万座 備一(まんざ びいち)
大学1年生。
子供の時からプログラミングを勉強して、自分でいろいろと作ったりしている。
将来プログラマーになるかどうかは、まだ考えていない。

もうアプリ作っちゃうの?

 

インストールできたら試しにアプリを作ってみよう〜

 

え?いきなり!?

こう言うアプリを作る開発環境は、まず最初にとりあえず動くものができるようになってるんだ。
とりあえず、エミュレータで動かしてみよう。

エミューレータって何?

エミュレータっていうのは、パソコン上でAndroidやiPhoneを擬似的に動かすツールのことだよ。
実際にAndroidやiPhoneを持っていなくても、パソコン上でアプリを動かしてみることができるんだ。Visual StudioにはAndroid用のエミュレータが用意されているから、それを使おう。Mac版はXcodeをインストールすることでiPhoneのエミュレータも使えるようになるよ。

へー。スマホ持ってなくても動かしてみることができるんだ。すごいね!

そういうことだよ。先ずはどんなものなのかを体感するのが大事だから、自分でやってみよう。
インストールからの手順をまとめたから、この通りにやってごらん。
Windowsの場合    Macの場合

- 広告 -

インストールからの手順 Windowsの場合

(1)表示されているリストの中から、「.Netのよるモバイル開発」を選択して、インストールボタンを押そう。

(2)すると、インストールが開始される。

(3)インストールが終わったら、早速起動してみよう。

(4)開発者サービスを登録するように言われるけど、とりあえず「後で行う。」を選んでおこう。

(5)「Visual Studioの開始(S)」を押そう。

(6)Visuao Studioが起動したよ。

(7)Visual Studioが起動したら「新しいプロジェクトの作成…」を押す。

(8)新しいプロジェクトを作成するための情報を入力しよう。
①Vishual C#→モバイルアプリ(Xamarin.Forms)を選ぶ
②アプリ名を入れる。適当でいいけど、半角英数で最初の文字は英字の大文字にしておこう。
③プロジェクトを保存する場所を入れる。「参照(B)…」から選ぶと楽。
④「OK」ボタンを押す。

(9)アプリの情報を入れよう。
①とりあえずBlankを選んでおこう。どのテンプレートを選ぶかは、どんなアプリを作るかによるから、本格的に作る時にはちゃんと考えて選ぼう。
②プラットフォームはAndroid,iOSどちらも選んでおこう。ちなみにUWPは選べないよ。
③コード共有方法は「.Net Standard」のままでいいよ。
④「OK」ボタンを押す。

(10)アプリのプログラムが表示されたよ。

(11)Windowsでは、ここでエミュレータを設定する必要があるんだ。
このボタンを押して、「Android.SKD.Manager」を起動する。

(12)利用可能な更新プログラムがあれば、「更新の適用」を押そう。

(13)更新内容を確認して「更新プログラムのインストール」を押す。

(14)今度は、「ツール」タブを表示しよう。
①「Android Emulator」にチェックを入れる。
②「変更の適用」ボタンを押す。

(15)ライセンスの同意を求められるので、素直に「同意する」を押そう。

(16)デバイスマネージャーを開こう
ここに詳しい方法が乗ってるから、デバイスを登録してみよう。

(17)これでアプリを動かす準備ができたよ。
早速動かしてみよう。(16)で作ったデバイスを選択して「▶︎開始」を押すと、エミュレーターが起動してアプリが動くよ!
*パソコンのスペックによってはエミュレータがうまく動かないことがあるので、その場合は実機で動かしてみるのもあり。

*この画像はデバイスが選択されていない状態です。

PCの故障により、後半画像が取れませんでした。。。ご了承ください。
こちらにも詳しい情報がありますので、ご覧ください。。。

(18)動いたら終了させよう。
開始したら停止ボタンが出てくるので、そのボタンを押すと停止します。

今回のまとめ

 

インストールからの手順 Macの場合

(1)インストールを始めるとMacの場合は、Xcodeを入れるように言われるから、Xcodeを一緒にインストールしておこう。
これを入れておく事で、iPhoneの開発もできるようになるよ。

(2)何をインストールするかを選ぶ。これは初期状態のままインストールすれば良いよ。

(3)インストールが始まるので、終わるまでのんびり待とう。インストールが完了したら起動してみよう。

(4)Visual Studioが起動したら「新しいプロジェクト…」を押す。

(5)iPhone,Androidのどっちでも使えるアプリを作りたいなら、「マルチプラットフォーム→アプリ→空白フォームのアプリ」を選択して「次へ」を押す

(6)新しい空白フォームのアプリの構成
①アプリ名:適当でいいけど、半角英数で最初の文字は英字の大文字にしておこう。
②組織の識別子:自分のドメインをひっくり返して入れるのがスタンダード。
例えば、芳絵屋のドメインは”yoshieya.com”なので、”com.yoshieya”となる。
ドメイン持ってないよって人は初期状態のままで行こう。今回はストアに出すわけでは無いから問題ないよ。ストアに公開したい場合は、ドメインを用意しておこう。
③ターゲットプラットフォーム:作りたいプラットフォームを選ぶ。今回はAndroid,iOS両方選んでおく。
④共有コード:Use.Net Standardでいい
⑤次へを押す。

(7)新しい空白フォームのアプリの構成
①プロジェクト名、ソリューション名はそのままでいいよ。
②場所はアプリを保存する場所を指定する。「参照…」から選ぶと楽。
③アプリを作るときはこのバージョンコントロールにチェックしておこう。絶対に役に立つから。ただ、Gitの使い方を覚える必要があるけどね。Gitについては、機会があればその時に説明するよ。”.gitignore”も一緒にチェックしておくことも忘れないようにね。
④入力できたら「作成」を押そう。

(8)アプリのプログラムが表示されたよ。

(9)早速動かしてみよう!
手っ取り早く、Androidのエミュレーター(シミュレーター)で動かしてみるよ。
①ここをクリックすると実行先のリストが表示されるよ→②
この「仮想デバイス」っていうのがエミュレータのことだ。
②とりあえず初期値でいいかな。ターゲットとなる実行先が選択されているのを確認しよう。
これは「Android8.0(Oreo)のエミュレーター」に実行されることがわかるよ。
③何も考えず「▶︎」ボタンを押してみよう。


ちなみに、「▶︎」ボタンの右側にある「TestApp.Android」ってところをクリックすると、AndroidとiOSを切り替えることができるよ。

*パソコンのスペックによってはエミュレータがうまく動かないことがあるので、その場合は実機で動かしてみるのもあり。

(10)エミュレータ(PC上でAndroidが起動する)でアプリが動いた!

(11)終わらせ方も大事
アプリが動いたことがわかったら「■」ボタンを押して終了させよう。
アプリが終了して、エミュレータにホーム画面が表示されたら終了してるってことだよ。
これで、Visual Studioを終了できるよ。

 

これでやっとアプリを作る準備が整った

さて。ここまできたら、ようやくスタートラインについたと言えるね。
次回からは本格的に勉強をしていくから、しっかりと付いて来るんだぞ!

はーい!

- 広告 -

コメント