C#でXamarin.Formsをする方法
3.8 (5 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
254 students enrolled

C#でXamarin.Formsをする方法

C#でAndroid,UWPが同時に実行できるスマホアプリを作る方法
3.8 (5 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
254 students enrolled
Last updated 6/2019
Japanese
Current price: $11.99 Original price: $44.99 Discount: 73% off
1 day left at this price!
30-Day Money-Back Guarantee
This course includes
  • 4 hours on-demand video
  • 1 article
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • C#でXamarinFormsをする方法
  • C#でAndroid開発をする方法

  • C#でUWPを開発する方法

  • C#でスマホアプリ開発をするためのプロジェクトの作成方法
  • C#でAndrod,iOS,UWPを同時に作成する方法
Course content
Expand 37 lectures 04:00:41
+ C#でXamarin.Formsをする方法
37 lectures 04:00:13

はじめにVisualStudio2017でXamarin.Formsのプロジェクトを作成してみましょう。

Preview 01:29

これからXamarin.Formsでプログラムを書き,スマホ上で動作することを確認しながらプログラミングを行っていきます。

Preview 02:40

手持ちのAndroidがない場合や,パソコンのみでXamarinの動作確認をしたい場合は,エミュレーターというものを使うことで,Androidの動作をパソコン上で疑似的に再現させることができます。

Preview 05:03

Xamarin.Formsの最大の魅力は一つのソースコードで,Android,iOS,UWPで動作させることができる点です。UWPを動作させて,Androidと同じ動作がされていることを確認してみましょう。

Preview 02:09

マルチスタートアップとは,複数のプロジェクトを同時に起動することです。Xamarin.FormsではAndroid,iOS,UWPを同時に開発できるのがウリなので,それぞれのユーザーインターフェースがどのように表示されているのかを見ながらプログラムを作成していくのがよいと思います。ただし,iOSのデバッグには基本的にはMacが必要となるため,この解説ではAndroidとUWPに限定して実行していきます。

※iOSも実機(iPhoneなど)があれば,XamarinLivePlayerというアプリで動作を確認できたのですが,2019年2月10日現在では簡単にはできなくなっているようなので,残念ですが,iOSのデモは諦めます。ただし,Xamarin.Formsの開発とすれば,Androidで習得しておけば,あとはほとんど環境の問題をクリアすることでiOSの開発もできるようになるので,まずはAndroidとUWPでプログラミングを習得していきましょう。

Preview 02:34

StackLayoutとは,コントロールを垂直方向または水平方向に順番に並べていくパネルです。ボタンやラベルなどのコントロールを縦方向か横方向かを指定して,置いていきます。

#06 StackLayout
06:37

今回はStackLayoutの続きで,VerticalOptionsとHorizontalOptionsの使い方を見ていきたいと思います。VerticalOptionsとHorizontalOptionsは,StackLayoutの中で,どこからどんな感じでコントロールを置いていくかを指定するためのモノです。

#07 StackLayout②
11:38

ここではコントロールの文字の色の変更と,背景色の変更,文字の大きさの変更のやり方を見ていきたいと思います。

#08 文字色&背景色とFontsize
04:18

Gridとは,Excelのセルのように,縦横のマスを作って,そのマスの中にコントロールを配置することのできるコンテナです。「縦2行,横3列」みたいな感じで,任意の行数と列数を指定して,コントロールを配置することができます。

#09 Grid
10:03

画面遷移とは,今表示している画面から,別のページに切り替える動作の事です。Xamarin.Formsでは,次の3つの方法で画面遷移をすることができますが,最初に紹介する方法は基本的には使いません。2番目と3番目のやり方で画面遷移をすることになると思いますが,おすすめは,タイトルバーと戻るキーを表示するモーダレスでの画面遷移です。

#10 画面遷移
13:49

TabbedPageとは,タブ付きのページのことです。タブというのは次の画像の「TAB1」「TAB2」「TAB3」のように,画面の上部にタブのタイトルを表示して,そのタブごとにページの表示を切り替えることができます。「TAB1」と書かれているところをタップしてもページが切り替えることができますし,ページの内容が表示されているエリアで右や左にスワイプすることで,ページを切り替えることができます。ちょうどスマホで表示されたKindle本のページをめくるような操作と同じです。TabbedPageの場合はボタンを押してページを変更するパターンとは違い,存在するページが全体的にわかるので,使いようによっては,こちらのほうが使いやすいというケース発生すると思います。

#11 TabbedPage
04:02

前回はTabbedPageを作りました。3つのタブを作成して,ページが切り替わる様子を確認しましたが,各ページの中身がなかったので,あまりページが切り替わっていることが実感できなかったと思います。今回はその中身を作っていきます。完成イメージは次のような感じです。

#12 TabbedPageの中身
07:32

MasterDetailPageとは,画面の左側の端から右方向にスワイプして表示するページの事です。Androidなどでは,左側をスワイプしてGoogleのニュースを表示したりできますが,その要領で表示するページの事です。この左から出てくるページを「マスター」,最初から表示されているメインのページを「ディティール」と呼び,この2つの関係性を持つページをMasterDetailPageと呼んでいます。マスターページはメインページから以外でも表示することができるので,どんなページが表示されていても,いつでも設定変更を行いたい項目や,いつでも見られるようにしておきたい機能などを置いておくことで,使い勝手の良いアプリケーションを作成することができます。使い方しだいで結構いろんなことができるのではないでしょうか。あなたもこの機能を使って,いい感じの仕様を考えてみてください。

#13 MasterDetailPage
09:29

ListViewとは,繰り返し項目をリストにして表示してくれるコントロールで,顧客リストデータ等を画面に表示するときに使うことができます。自由にレイアウトをすることができるので,イメージをおいて,その横にラベルを2つ並べたり,文字の色を変更したりすることができます。データの一覧の中から一つ選択させて,別のページに移動させたり,単純にデータを閲覧したりするときなどに使用できます。今回はMenuPageをListViewにして,そこにイメージとタイトル,サブタイトルを表示するListViewを作成していきます。

#14 ListView
11:38

CarouselPageを使うと左右にスワイプするだけでページを移動することができます。ちょうどスマホで写真を見ているときに,次の写真に移っていくような感じの動作でページ切り替えができるようになります。

#15 CarouselPage
09:58

DisplayAlertとは,メッセージを表示する機能です。WindowsFormsで言うところのMessageBoxですね。使い方は2種類あって,OK応答だけのやつと,OKとCancelの応答をとるものがあります。

#16 DisplayAlert(メッセージの表示)
08:13

DisplayActionSheetとは複数の選択肢の中からユーザーに選択を行わせ,結果を得ることのできる機能です。よくあるのは「コピー」「貼り付け」「削除」「キャンセル」なんかを選ばせることに使ったりするようですが,使い方はいろいろあると思います。ただこの機能を使わなくても前述している「ListView」を使うことで十分代用はできるのではないかと思います。ただ,単純に文字列を選ばせるだけならListViewだと手間がかかるだけなので,DisplayActionSheetで簡単に実装するのもアリなのではないかと思います。

#17 DisplayActionSheet
06:11

Xamarin.Formsをコーディングしていると,時々デバイスごとに処理を切り替えたい場合が出てきます。iOSとAndroidでのコントロールの配置の微妙な違いや,UWPとの微妙な違いを吸収したいときなんかがあります。それ以外にも物理的に切り分けないといけないケースもあったりします。そういった場合に,どのようにデバイスごとにコードを分岐するかを解説します。

#18 Deviceごとの切り替え
07:50

今回はページのイベントに関して少しだけ解説します。ページの起動時と終了時のイベントです。WindowsFormsなどでは起動時はLoadイベントがあり,終了時はClosedなどのイベントがありましたがXamarinではそのような名前のものはありません。Xamarinでそれらに代わるものとして,起動時は「Appearing」,終了時は「Disappearing」というものになります。全然名前が違うので驚いてしまいますよね。出現と消滅というような意味のようです。発音も難しいですが「アピアリング」と「ディサピアリング」という感じの発音かと思います。

#19 LoadとCloseに代わるもの
04:23

ナビゲーションページにはタイトルと戻るボタンを表示しているヘッダーエリアがあります。このエリア自体をNavigationPage.HasNavigationBarで非表示にすることはできますが,戻るボタンだけを非表示にすることもできます。そんなニーズがあるのかといえば,タイトルは出したいけど戻るボタンは消したいという事ですよね。例えば画面の登録ボタンかキャンセルボタンを明示的にタップさせたいというような場合でしょうか。用途は人それぞれとは思いますが,戻るボタンを消すことができます。戻るボタンを消すにはNavigationPage.HasBackButtonをFalseにすればOKです。

#20 戻るボタンを非表示にする
03:07

今回はViewCellの共通化というお話をしたいと思います。ViewCellというのは以前MenuPageを作成したときにListViewを使いましたが,そのなかで1行分のレイアウトを定義していた部分の事です。今後のレクチャーではコントロールに関して色々と解説していく関係で,MenuPageから遷移したページでもMenuPageと同じレイアウトで一覧表示をしたいと思っています。その際に,MenuPageのXamlをコピーしてもうひとつ作ってしまってもいいのですが,コードが重複するのはいろんな場面でよくないことが起きてしまいます。コードが共通化されていれば,アプリケーション全体にわたって共通の見た目になったり,バージョンアップでレイアウトを変更する場合も1か所を変更するだけで,すべてが反映されて,変更漏れを防ぐことができますし,何より工数の削減になります。共通化に関してはこれくらいにして,要するにListViewに表示されるレイアウトを共通化しようというのが今回のViewCellの共通化のお話となります。それではやり方を見ていきましょう。

#21 ViewCellの共通化
07:57

スイッチとは,WindowsFormsで言うところのチェックボックスのような感じですね。ONかOFFを設定するコントロールになります。

#22 Switch
05:40

前回のSwitchのレクチャーでスイッチがONのときにImageを表示し,OFFのときにImageを非表示にする例を解説しました。その時はSwitchのToggledイベントをコードビハインド側に書いて,その中でImageのIsVisibleを変更しましたが,データバインドという機能を使うことで,コードビハインド側に何も書かなくても,Xamlだけで完結させることができます。

#23 コントロールのデータバインド
05:19

ステパーとは,プラスとマイナスのボタンが表示され,数値を保持するコントロールです。値を1ずつ増やしたり,5ずつ増やしたりすることができます。

#25 Stepper
03:40

EntryとはWindowsFormsで言うところのテキストボックスですね。数値や文字を入力できます。テキスト入力エリアに,薄いグレーでその入力エリアに何を入力するかを示す文言を表示しておくことができます。入力を始めると消えてしまいますが,入力を始めるまでは表示されているため,その入力エリアがパスワードなのか,IDなのかを一目で識別することができます。またラベルとテキストボックスを並べるとどうしてもスペースが必要なのですが,このようにEntry上にラベルの要素も取り入れて表示することで省スペース化を実現できます。これはスマホアプリという限られたスペースのなかで表現するには非表示強力な表現方法となります。

#26 Entry
07:22

Sliderとは,音量を調整するつまみのようなコントロールで,整数値や小数値の設定をするコントロールです。

#24 Slider
06:43

Editorとは複数行の入力ができるテキストボックスです。前回レクチャーしたEntryとの違いは,Entryは1行入力,Editorは複数行入力可能という点です。Androidで文字を入力すると,Entryの場合はキーボード右下のキーがチェックマークになっており,これを押すと入力が完了という事になります。

#27 Editor
03:44

PickerとはWindowsFormsで言うところのコンボボックスのような感じです。複数の文字列のリストから一つを選択するコントロールです。

#28 Picker
05:23

今回も前回に引き続き,Pickerに関する解説をしていきます。前回は文字列のリストを表示して選択するという実装をしていました。しかしそれでは実際の開発現場ではほとんど使えないのではないかなと思います。今回の例でいうとTel,Fax,Mailを選択するPickerですが,これをデータベースなどでデータを保存する場合は,多くの場合「文字」ではなく数値等の「区分」で保存されることになると思います。要するにTelなら「1」,Faxなら「2」,Mailなら「3」という感じで,値に意味を持たせ,データベースには区分のみを保存して,表示するときは,アプリケーションで加工して「Tel」などの文字にするという設計をします。そうしておけば,「Tel」は「電話」と表現することに変更されたとしても,内部での比較は「1」で行うコーディングを変更する必要はありません。

#29 Pickerのデータバインディング
09:42

DatePickerは日付を選択するコントロールです。TimePickerは時間を選択するコントロールです。

#30 DatePickerとTimePicker
05:22

SearchBarとは,Googleの検索エリアみたいな感じで,検索文字を入れるコントロールです。文字を入れるたびに検索を実行することもできますし,キーボードの右下の虫眼鏡ボタンを押したときに検索をさせることもできます。

#31 SearchBar
11:45

ToolbarItemとは,アイコンや文字をならべて表示できるコントロールです。保存ボタンやメールボタン等を設置することができます。右端の「・・・」のエリアを押すと,そこにも文字でツールが表示されます。どちらに表示するかを指定することができます。

#32 ToolbarItem
05:34

TableViewとはコントロールを行のような感じにして並べていけるものです。テキストやタイトルと詳細が一つになったレイアウトや,ラベルとEntryが一つになったもの,ラベルとスイッチが一つになったものなどを行として並べていくことができます。スイッチ付きのコントロールはスマホの設定画面とかでよく見かけるのではないかと思います。このスイッチのコントロールをならべて,マスターページに表示しておくと使いやすいページになるのではないかと思います。

#33 TableView
06:31

ActivityIndicatorとは,処理中などを示すくるくると回るアニメーションです。処理中にこれを表示するだけで,ユーザーのストレスは軽減され,処理中であることが明確になるため,非常に使い勝手のいい機能ですね。

#34 ActivityIndicator
06:41

ListViewが表示されているときに,上から下にスワイプすることで,ListViewに対して更新を促すことができます。スマホを使い慣れている方ならわかると思いますが,下に引っ張って更新される動作です。AndroidやiOSでこの動作は可能ですが,Windowsにこの思想がないと思うので,UWPでは普通にやってもできません。何かツールを使うとできるかもしれませんが,今回はAndroidだけで検証します。

#35 ListViewを下に引っ張て更新
08:04
ボーナスレクチャー
00:10
Requirements
  • C#の基礎文法がわかる(if文の書き方程度がわかればOKです)
  • Windows10環境
  • VisualStudio2017(無料でダウンロードできます)
Description

この講座は普段C#を使っていて,スマホアプリの開発をしたいと思っている方向けの講座になります。

C#を仕事で使ってなくても勉強中やかじった程度の方でもOKです。


Xamarin.FormsとはC#でスマホアプリを開発できる技術なのですが,

通常スマホアプリ開発を行おうとすると,Androidはjavaを覚えないといけませんし,

iOS(iPhoneやiPadなど)の開発ならObjective-Cを覚える必要があります。

Windows系のタブレットで動作させるにはC#かVBが必要でした。


プログラミング言語は1つの言語を仕事で通用するプロ級レベルになるには

5年くらいの歳月が必要だと思います。文法を覚える程度であれば数か月で可能ですが

製品として開発して販売するには,素人レベルの技術ではすぐに問題が起きます。

だから技術者はある程度言語に特化していくことになります。

それなのに,デバイスごと(AndroidやiOS)に開発言語が異なっては

簡単に開発することができません。しかも,同じアプリでも複数の言語でコーディングされると

改造するたびに大変な労力になります。


しかし,今回紹介するXamarin.Formsを使えばC#の技術だけで開発ができます。

javaのObjective-Cもいりません。コードもほとんど共通化されます。(一部デバイスがらみの違いはありますが)

だからC#になれている人は,Xamarin.Formsを使うことで,AndroidもiOSもWindowsも開発することが可能になりました。


今回はVisualStudio2017のC#を使って開発します。

Androidは実機をUSB接続するか,仮想のエミュレーターでのデバッグをします。

Windows系はUWPを使います。UWPはWindows10が動作する環境ならどこでも動作するアプリケーションです。

Windows10が動作しない方は動作しないのでご了承ください。

iOSはMacがないとコンパイルができないという制限があるので

今回のサンプル動作の対象からは外しています。ご了承ください。

ただ,コードは共通なので,Macがある人は動作するコードにはなっています。


サンプルコードではプロジェクトの作成から,ページの遷移,各種ページの特徴,

コントロールの使い方を解説し,サンプルソフトを動作させれると,

各コントロール動作がすぐにわかるような備忘録を兼ねたソフトになっています。


今回勉強しても結構忘れてしまうと思うので,その際にすぐに思い出せるソフトになっています。

ボーナスレクチャーからソースコードもダウンロードできるようにしておくので是非ご覧ください。


【内容】

#01 プロジェクトの作成

#02 プロジェクトの実行(Android実機編)

#03 エミュレーターでの接続

#04 UWPの実行

#05 マルチスタートアッププロジェクトの設定

#06 StackLayout

#07 StackLayout②

#08 文字色&背景色とFontsize

#09 Grid

#10 画面遷移

#11 TabbedPage

#12 TabbedPageの中身

#13 MasterDetailPage

#14 ListView

#15 CarouselPage

#16 DisplayAlert(メッセージの表示)

#17 DisplayActionSheet

#18 Deviceごとの切り替え

#19 LoadとCloseに代わるもの

#20 戻るボタンを非表示にする

#21 ViewCellの共通化

#22 Switch

#23 コントロールのデータバインド

#24 Slider

#25 Stepper

#26 Entry

#27 Editor

#28 Picker

#29 Pickerのデータバインディング

#30 DatePickerとTimePicker

#31 SearchBar

#32 ToolbarItem

#33 TableView

#34 ActivityIndicator

#35 ListViewを下に引っ張て更新


それでは一緒にスマホ開発を始めましょう!



Who this course is for:
  • C#でプログラミングをしたい人
  • スマホ開発をしたい人
  • Androdの開発をしたい人
  • Androd,iOS,Windowsを同時に開発する方法を学びたい人