BLOG

【第6回】あなたも作れるスマホアプリ/Xamarin環境設定から徹底攻略!

2021-03-05



どうも、ロックシステムエンジニアの山本です!

今回の動画からXamarinを使って
スマホアプリを作っていくぞおおおぉ!!!


裏話なのですが、このYOUTUBE企画を始める前。


社内の話し合いでは1回目の動画でこのXamarinを扱う予定だったのですww
それが第6回目のこの動画になったのは理由がありまして・・・



Xamarinやったことないし、そもそもプログラミングの勉強はじめて半年の僕が理解出来るのか?
そんな思いの中、いざ勉強をはじめると・・・・




・・・分からん(´・ω・`)




うん。そうだよね・・
この時点でC#のお勉強始めたばかりの僕にはさっぱりでした



初心者向けの動画を出してるので、僕自身がこの理解力だと動画が成り立たない



まあ、こんなことになったので、
もっと基礎部分から動画をはじめて
YOUTUBEを見た人が分かりやすくなるようにぐるっと周ってXamarin動画の戻って来たのですよ!
(まあ、僕がすぐ理解できたらそれで良かった話なんですけど・・)

そんなこんなで、YOUTUBEで動画も少なくちょっとだけハードルの高いXamarin。


ただ、動画を見て一緒にやってもらえれば分かるように作りました!
スマホアプリの魅力も伝わるとよいなあ・・・


ということで!動画の補足をしていきます
まずここの部分!選択肢を間違えないようにしましょう
”ダウンロードしながらインストールする”で”OK
VisualStudioをすでにインストールしてた場合は動画で説明してます!
もし、Xamarinの表示がされなければ、インストールが正しくできているかを確認してみましょう。




次にHyper-Vについてなのですが、この表示がある状態で開始ボタンを押してデバックしたら
固まって動かなくなります。またPCが重く感じた場合

こちらにアクセスして原因を調べてみて下さい。
僕自身3台のPCで試してみたのですが同じ手順でやっても1台すごく重いPCがありました・・





ここからがコードの記述になります
動画後半のボタン&ラベルのコードを置いておきます
ここではボタンを押すと、テキストがWelcom to Xamarin Forms!からHello Xamarin.Forms World!!
変更される動きをしたいと思ってます


そのために必要なコードが下記になります。
MainPage.xamlファイルにこのコードをコピーしていきます

    <StackLayout Padding="32">
        <Label Text="Welcom to Xamarin Forms!"
               VerticalOptions="Center"
               HorizontalOptions="Center"/>
          
        <Button Text="Click"
                VerticalOptions="Center"
                HorizontalOptions="Center"
                HeightRequest="80"
                WidthRequest="200"/>
        
    </StackLayout>


VerticalOptionsとHorizontalOptionsという聞きなれない単語が表示されていますが
この二つは位置を表示するコードです。
縦・横どちらも中央にボタンとラベルを表示してね!という意味です。
ちなみにHeightRequestと WidthRequestはボタンの縦と横の大きさを指定するコードですね


次に
x:Name="label"
をMainPage.xamlのLabel部分に追加します



それが出来たらMainPage.xaml.csのButton_Clickedの部分に
ボタンがクリックされたときのアクションを書いていきましょう!



        private void Button_Clicked(object sender, EventArgs e)
        {
            label.Text = "Hello Xamarin.Forms World!!";
        }

動画内でこの部分のlabelがエラーになっていたのですが・・・
原因はファイルを保存していないからでした。
※エラー表示が出ていた場合、Ctrl + S ボタンを押してみて下さい。


最後にButton部分にイベントコードを追加したら完成です。
 Clicked="Button_Clicked"



とまあ、こんな感じでXamarinの環境設定の説明は終わります!
動画を見て疑問に思ったことや上手くいかない場合、コメント頂けると嬉しいです
ではでは!今回はこのへんで!
本編動画はこちらから!チャンネル登録グッドボタンお願いします!
https://youtu.be/OASwt3grsrU
プログラミング作って実践!ロックシステムアカデミー
大阪福島にあるプログラミングスクール「ロックシステムアカデミー」です!「プログラミング作って実践」をテーマに楽しく分かりやすいアプリ開発のレクチャー動画をアップしていきます! チャンネル登録よろしくお願いします! プログラミングスクール ▼「ロックシステムアカデミー」WEBサイト https://rocksystem.co.jp/academy/
https://www.youtube.com/channel/UC6JxNQ2QTX8Dl96V2MMNP8A

株式会社ロックシステム

「ブラック企業をやっつけろ!!」を企業理念にエンジニアが働きやすい環境をつきつめる大阪のシステム開発会社。2014年会社設立以来、残業時間ほぼゼロを達成し、高い従業員還元率でエンジニアファーストな会社としてIT業界に蔓延るブラックなイメージをホワイトに変えられる起爆剤となるべく日々活動中!絶賛エンジニア募集中。