簡単なモバイルアプリ開発を体験してもらいます
前提としては

  • プログラミング知識不要
  • 実機不要

となっています

今回はAndroidアプリを作ります
言語としてはKotlinを使いますが、Kotlinの知識は今回要らないです
また、SwiftでiOSを作る場合、Flutterで作る場合も書き方が違うだけで基本的には同じように作ります

宣言的UIというものを用いいて画像を表示する部品、文字を表示する部品、アイコンを表示する部品といった感じで部品をつなぎ合わせて作るだけです

簡単ではありますがどのように作っていくのかがわかるかと思いますのでSwiftを選んでも、Flutterを選んでもこんな感じに作るんだということを知っていただけたら幸いです

今回はこのようなアプリを作ります

開発環境構築

今回はAndroidStudioを使います
公式の手順に沿ってインストールすれば問題ないです
結構容量が重いので注意しましょう

https://developer.android.com/codelabs/basic-android-kotlin-compose-install-android-studio?hl=ja#0

AndroidStudioを開くとこのような画面になります

僕はFlutterというものを入れているので「New Flutter Project」と表示されています

なのでここは気にしないでください

プロジェクトの作成

では新しくプロジェクトを作ります
ここをクリックしてください

このような画面に遷移します
今回は「Empty Activity」を選択して「Next」ボタンをクリックします

続いてプロジェクト名を決めます
今回は「ProfileApp」という名前にしましょう
そして「Finish」ボタンをクリック

このような画面になったら成功です
これが開発画面になります

とりあえず要らないものを閉じておきましょうか
What’sNoew in Koalaの部分の右上にある「-」ボタンを押してください
押すと消せますので消しておきましょう
これからいろいろと画面が出てきますが閉じたい時は「-」ボタンです

エミュレータの準備

エミュレータといってPCでAndroidのデバイスを表示する仮想端末を用意します
画面上部にスマホアイコンがあります
「Device Manager」というものです
これをクリックするとDevice Managerが出てくるので」「+」ボタンを押します


「Create Virtual Device」という項目をクリックしてください

クリックするとこのような画面が出てきますので使いたい端末を選びます
僕は「Pixel 8 Pro」を選びました
選んだら「Next」ボタンをクリック

次に遷移先の画面で矢印をクリックして必要なものをDLします
結構時間がかかりますが終わったら「Finish」をクリック

画面が遷移しますので「Finish」ボタンをクリックします

AndroidStudioの画面に戻ったと思います
すると先程のDevice Managerに端末が追加されていますので「▶」ボタンをクリックします
するとしばらく時間はかかりますがエミュレーターが起動します

ではAndroidStudioの画面上部にある緑の「▶」ボタンを押してください

しばらく時間がかかりますが現在初期で書かれているサンプルコードが起動します
これが実行になります
AndroidStudioを閉じる時は必ずエミュレータは停止させてください
Device Managerの「■」ボタンを押せば停止出来ます

ちょっとだけ設定をします
画面右端の歯車マークを押し、Settingsを選択します

その後、「Editor」から「Live Edit」を選択

このような設定にしておいてください
通常アプリの内容を書き換えるとアプリの再起動が必要になりますが、こちらを設定しているとある程度は自動で反映させてくれます

プロフィールアプリを作る

ここからはYoutubeでやっていきます