Developer's Code

プログラム開発支援ブログ

Developer's Code

Xamarinマルチプラットフォーム(C#) ~ListView編

はじめに

Xamariプロジェクトで、C#を用いたListViewのサンプルの実装までを以下に示します。

XAML編は、下記

replystudio.hatenadiary.jp

 

コーディング

TestListViewXamlソリューションのMainPageCtrl.csにて、

コレクション(ObservableCollection)で、リストアイテムを作成し、Custom Cellsを用いて実装してみました。

 

解説

簡単になりますが、大体使用したAPIは、以下の通りです。

Custom Cells

※Custom Cellsは、APIではありません。ViewCellを派生させ作るクラス名のことです。

基本は、下記を参考にさせて頂きました!!

Cell Appearance - Xamarin

 

Gist

MainPageから、MainPageCtrlを呼び出すだけのソースコードなので、今回はGistでアップロード

XamarinでCustom Cells作成(C#)

 

感想

XAMLで書くの結構苦手なのですが、C#で書くと楽だね(*^▽^*)

Xamarinマルチプラットフォーム(XAML) ~ListView編

はじめに

Xamariプロジェクトで、XAMLを用いたListViewのサンプルの実装までを以下に示します。

今回、Xamari APIのListViewを使おうかと思ったのですが、使わずに、そもそもXamarinプロジェクトであれば、XAMLに記述さえすれば、iOSAndroidに対応できるの?という疑問が自分の中で出てしまったので、ほぼXAML記述での実装となります。

ListViewで、アイテム追加して表示させるだけなので、中身のデータバインディングはしてません。

 

ListViewの画像アイコンは、ぴよさん作成のものです。

piyomanilife.hatenablog.com

 

コーディング

TestListViewXamlソリューションのMainPage.xamlおよびMainPage.xaml.csにて、

コレクション(ObservableCollection)で、リストアイテムを作成し、データバインドのみで実装してみました。

ソース全体は、以下の通りです。

 

解説

簡単になりますが、大体使用したAPIは、以下の通りです。

[XAML]

[csファイル]

ObservableCollection

筆者的には、WPFWindows Presentation Foundation)に慣れていたので、ListViewのアイテムを作成するに本APIでコレクションを作成しました。

ObservableCollection(T) クラス (System.Collections.ObjectModel)

 

GitHub

ソースコードは、以下のGitHubにアップロードしました。

github.com

UWP、iOSAndroidいずれも一応動作しますね。

 

 

今度は、Xamarin APIで実装してみたいと思います。

Visual Studio Community 2017 for Macで、Macアプリケーション(Cocoa App)作成 ~実装編

はじめに

Visual Studio Community 2017 for Macで、Macアプリケーション(Cocoa App)の実装までを以下に示します。

  

コーディング

TestReadWriteソリューションのViewController.csにて、btnRead関数、btnWrite関数のAction操作を実装し、それぞれ「読み込み」と「書き込み」を実現しています。

ソース全体は、以下の通りです。

 

 

解説

簡単になりますが、大体使用したAPIは、以下の通りです。

 

ファイル拡張子チェック

テキストファイルに限定するため、".txt"以外の拡張子は対象外とする。

そのため、パス入力チェック後、GetExtensionよりファイル拡張子を確認します。

var extension = Path.GetExtension(textReadValue.StringValue); 

 

ファイル読み込み

ファイル読み込みは、ReadAllTextより、指定パスのファイルを読み込みます。

var readdata = File.ReadAllText(textReadValue.StringValue);

 

ディレクトリチェック

ファイル書き込み時は、FileExistsで指定パスが存在するかを確認します。

bool bRet = NSFileManager.DefaultManager.FileExists(filepath);

 

ファイル書き込み

ファイル書き込みは、WriteAllTextより、指定パスへファイルを書き込みます。

File.WriteAllText(textWriteValue.StringValue, textviewWriteValue.Value);

 

GitHub

ソースコードは、以下のGitHubにアップロードしました。

github.com

注意事項

今回、テキストファイル(.txt)限定としています。

Mac OS X or macOS Xのプリインストールエディタといえば、テキストエディットなのですが、デフォルト設定保存は、リッチテキスト(.rtf)形式での保存になります。

リッチテキストの場合、ファイル属性やら付与されるため、今回使用したAPI群だけで対応するのは難しいです。

リッチテキスト用のAPIを使用することになりますが、今回は簡単なテキストファイルで実装しました!!

 

 

Visual Studio Community 2017 for Macで、Macアプリケーション(Cocoa App)作成 ~UI作成編

はじめに

Visual Studio Community 2017 for Macで、Macアプリケーション(Cocoa App)のUI作成までを以下に示します。

 

概要

 

TestReadWriteソリューションのMain.storyboard.csを開き、GUIを作成していきます。

 

UI作成

TestReadWriteソリューションのMain.storyboard.csを開くことで、XcodeのInterface BuilderエディタおよびXcodeのソリューションが起動します。

 

Visual Studioでは、UI開発は行えないため、UI依存コードはXcode側で作成する必要があります。

※数年後、XcodeなしでVisual Studioのみで作成できることを切に願いましょう(笑)

Xcodeを今まで扱ったことがない人は、躊躇してしまうかもしれませんね。

 

今回は、以下のUIを作成しました。

※画面作成過程は、省略。。。

f:id:tomomo_s:20170603134058j:plain

① Label

  • ファイル読み込みパス
  • ファイル書き込みパス
  • 内容(画面左)
  • 内容(画面右)

② Text Field

  • ファイル読み込みパス入力用
  • ファイル書き込みパス入力用

③ Push Button

  • Read(Text Fieldの読み込みパスからファイル読み込み)
  • Write(Text Fieldの書き込みパスにファイル書き込み)

④ Text View

  • 読み込みしたファイルデータ出力用
  • 書き込みするファイルデータ入力用

Interface BuilderエディタでUIを決めたら、Xcodeのソリューションのから「ViewController.h」を開き、先ほど作成したUIとアクションおよびアウトレットの接続を行います。

※UIのオブジェクトから、ViewController.hに向かって接続(Ctrlキー押しながら、引っ張って接続)することで自動でヘッダ側に書き込まれます。

 

接続のヘッダは、以下の通りです。

f:id:tomomo_s:20170603140038j:plain

 

UIのオブジェクトとViewController.hの接続が完了したら、Xcodeのプロジェクトを保存します。

 

その後、Visual Studio Community 2017 for MacTestReadWriteソリューションへ戻って以下のファイルを確認します。

  • ViewController.cs

上記ファイルは、UI作成を行う前は、partial class ViewControllerの中身は空なのですが、Xcode側でUI作成およびアクション、アウトレットの接続を行ったことで、下記のように、インタフェース記述がなされます。

 

f:id:tomomo_s:20170603141118j:plain

 

UI作成は、ここまで!!

次回は、実際にプログラミングしてみようかと思います。

 

注意事項

Text Viewの接続は、NSScrollViewオブジェクトの中に、NSTextViewが紐づいているため、これをViewController.hに向かって接続する必要があります。

読み込み・書き込みデータは、NSScrollViewではなく、NSTextViewに入出力する必要がある

 

Visual Studio Community 2017 for Macで、Macアプリケーション(Cocoa App)作成 ~プロジェクト作成編

はじめに

Visual Studio Community 2017 for Macで、Macアプリケーション(Cocoa App)の新規プロジェクト作成までを以下に示します。

 

概要

Macアプリケーション(Cocoa App)で、テキストファイルの読み込み(Read)・書き込み(Write)を行い、結果を表示する単純なアプリケーションを作成します。

今回は、Macアプリケーション(Cocoa App)の新規プロジェクトの作成編でお届けします。

 

環境構成

Visual Studio Community 2017 for Macは、下記よりダウンロードしインストール。

www.visualstudio.com

 

Mac側にインストールした状態は、以下となります。

f:id:tomomo_s:20170530215656j:plain

 

プロジェクト作成

Visual Studioを起動すると以下のUIが表示されます。

「New Project」を押下し新しいプロジェクトを作成して行きます。

f:id:tomomo_s:20170530215902j:plain

 

今回は、表題の通り、Macアプリケーション(Cocoa App)の新規プロジェクト作成が目的のため、下記に示すテンプレート「Cocoa App」を選択し「次へ」を押下します。

f:id:tomomo_s:20170530220047j:plain

 

Macアプリの構成は、下記のように、App Name「TestReadWrite」としてプロジェクトを作成します。

App Nameを入力後、「次へ」を押下します。

※その他の項目は、今回はデフォルト値のまま!!

 

f:id:tomomo_s:20170530220346j:plain

ここまで記述し、筆者は、App Name間違えました(笑)

テキストファイルの読み込み・書き込みと謳って措きながら何故か、「TestReadWrite」となっていますね。

この際、「TextReadWrite」ではなく、「TestReadWrite」で突っ走ります。。。

 

必要なファイルは、自動で作成され、プロジェクト作成が完了します。

f:id:tomomo_s:20170530222028j:plain

 

ファイル構成

TestReadWriteプロジェクトのファイル構成は、以下の通りです。

  • AppDelegate.cs
  • Entitlements.plist
  • Info.plist
  • Main.cs
  • Main.storyboard
  • ViewController.cs

 

ファイルの内容としては、以下の通りで、MacC#です!!

筆者の場合は、Cocoaアプリケーションでは、Objective-Cに慣れていますが、

C#感覚で実装出来そうなところが、面白いですね(笑)。

 

[AppDelegate.cs]

アプリケーションのイベントハンドリング処理

 

[Entitlements.plist]

App Sandbox、iCloud、キーチェーンなどの設定情報ファイル

 

[Info.plist]

アプリケーションのバージョン番号や著作権表示などの設定情報ファイル

 

[Main.cs]

Macアプリケーションメイン処理

 

[Main.storyboard]

GUI(画面遷移作成)ファイル

※定番のXCodeの表現で言えば、.xibファイルですね。。

画面のレイアウトからアプリ全体の遷移を作成できる

 

[ViewController.cs]

画面遷移の制御処理

 

これで、Macアプリケーション(Cocoa App)のプロジェクト作成編は終了です。

次回は、実際に実装解説していく予定です。

Visual Studio 2017を用いたマルチプラットフォーム開発(Xamarin)~ デバッグ編

 

はじめに

前回作成した、新規プロジェクトをデバッグ実行するまでを下記に示します。

 

UWPデバッグ実行

UWPアプリケーションのデバッグは、以下の構成でデバッグ実行します。

f:id:tomomo_s:20170528221154j:plain

 

「►ローカルコンピューター」を押下し、デバッグを実行します。

実行後、以下の画面のように、UWPのアプリケーションが起動します。

※空プロジェクトでは、画面表示に「Welcome to Xamarin Forms!」と表示される。

f:id:tomomo_s:20170528221304j:plain

 

Androidデバッグ実行

Androidアプリケーションのデバッグは、以下の構成でデバッグ実行します。

f:id:tomomo_s:20170528221613j:plain

 

Androidエミュレータが起動するため、かなりスペックが必要となります。

※筆者のビルド環境は、以下の通りですが、起動に時間が掛かってしまいます。

 Core i7&16GB以上の環境で行った方が、ストレスはないと思います。

  • CPU:Core i5(7th)
  • メモリ:8GB

 なお、Androidデバッグの場合は、ソリューション(Xamarin.Android)から、「配置」を行わないとデバッグ実行できないかもしれません。

 

実行後、以下の画面のように、Androidのアプリケーションがエミュレータ上で起動します。

f:id:tomomo_s:20170529205035j:plain

 

iOSデバッグ実行

iOSアプリケーションのデバッグは、以下の構成でデバッグ実行します。

f:id:tomomo_s:20170528225030j:plain

 

ここでのiOSデバッグ実行は、Simulatorを使用しますが、デバッグ実行するには、Mac側の実機が起動していることが前提条件となります。

また、Mac側に予め下記に示す設定が必要となります。

 

環境設定から、共有フォルダの設定画面を表示します。

f:id:tomomo_s:20170528225545j:plain

 

共有フォルダの設定にて、「リモートログイン」を有効にします。

f:id:tomomo_s:20170528225632j:plain

 

リモートログインのアクセス権限として、Macのログインユーザーを設定します。

f:id:tomomo_s:20170528225643j:plain

 

「►Simulator」※を押下し、デバッグを実行します。

 接続可能な、Macの機器が表示されます。同一LAN内であれば表示されると思います。

※表示されない場合は、Macの追加にて、「IPアドレス」で追加します。

f:id:tomomo_s:20170528230422p:plain

 

Macのリモートログインの「ユーザー名」「パスワード」を入力し、「ログイン」を押下します。

f:id:tomomo_s:20170529201652j:plain

 

実行後、以下の画面のように、iOSのアプリケーションがエミュレータ上で起動します。

f:id:tomomo_s:20170529201814j:plain

 

注意事項

UWPでのビルドおよびデバッグは、Windowsの設定で、以下のように「開発者モード」にチェックを入れておく必要があります。

f:id:tomomo_s:20170529210354j:plain

 

Androidでのビルドおよびデバッグは、Visual StudioAndroidプロパティ設定で、以下のように「Fast Deploymentの使用(デバッグモードのみ)」のチェックを外す必要があります。

※デフォルト設定は、チェックオンになっています。

※これを外さないとエミュレータの場合、アプリケーションが起動しません。

 実際に、これでハマりましたので、気を付けてください。。。

 デフォルトはオフ設定にしてVisual Studioをリリースして欲しいものです。(笑)

f:id:tomomo_s:20170529210433j:plain

 

iOSでのビルドおよびデバッグは、Visual Studio 2017 Version 15.2 の場合、下記エラーメッセージが表示されます。

Xamarinの障害(バグ)かと思います。

Can not resolve reference: C:/WINDOWS/Microsoft.NET/Framework/v4.0.30319/ja/mscorlib.resources.dll

 

対処方法は、以下の通りです。

Visual Studioのインストールフォルダより、ターゲットファイルを編集する必要があります。
C:\Program Files (x86)\Microsoft Visual Studio\2017\Professional\MSBuild\Xamarin

上記のファイルを開き、PropertyGroupに下記を追加します。

<FrameworkPathOverride>$(TargetFrameworkRootPath)$(TargetFrameworkIdentifier)\$(TargetFrameworkVersion)</FrameworkPathOverride>

 例)

<PropertyGroup>
<XamarinAppleSdkTargetsImported>true</XamarinAppleSdkTargetsImported>
<FrameworkPathOverride>$(TargetFrameworkRootPath)$(TargetFrameworkIdentifier)\$(TargetFrameworkVersion)</FrameworkPathOverride>
</PropertyGroup>

 

また、今回、Xamarinというプロジェクトを作成したのですが、Xamarin.iOSの場合、アセンブリ名が被るらしく、下記のビルド時エラーが発生します。

f:id:tomomo_s:20170529202136j:plain

Application name 'Xamarin.iOS.exe' conflicts with an SDK or product assembly(.dll)name.

 

そのため、Xamarin.iOSのプロパティから、アセンブリ名「Xamarin2.iOS」、限定の名前空間「Xamarin2.iOS」に名前を変更しました。

※「Xamarin」という製品名の名前をプロジェクトに付けたのが迂闊でした(笑)

f:id:tomomo_s:20170529202150j:plain

 

 

 

Visual Studio 2017を用いたマルチプラットフォーム開発(Xamarin)~ ビルド編

 

はじめに

 

Visual Studio 2017から新規プロジェクトを作成し、ビルドまでを下記に示します。

 

新規プロジェクト作成

Visual Studioツールバーより、[ファイル]⇒[新規作成]⇒[プロジェクト]より、新しいプロジェクトを作成します。

 

プロジェクトは、「クロスプラットフォームアプリ(Xamarin.Formsまたはネイティブ)Visual C#」を選択し「OK」を押下します。

f:id:tomomo_s:20170528213316j:plain

なお、名前(プロジェクト名)は、「Xamarin」としました。

※場所は任意とします。

 

続いて、「空のアプリ」を選択し、「OK」を押下します。

f:id:tomomo_s:20170528213603j:plain

 

続いて、ターゲットを選択し、「OK」を押下します。

※ここでは、以下の設定にしています。動作させたい環境任意となります。

f:id:tomomo_s:20170528213652j:plain

 

上記が完了すると、以下のプロジェクト(ソリューション)が作成されます。

f:id:tomomo_s:20170528213934j:plain

 

ソリューション構成は、以下のように自動で作成されます。

自動作成されたソリューションは、主に以下の目的で記述します。

  1. Xamarinは、主に共通ソースとして記述する
  2. Xamarin.Androidは、Android独自のUI(ユーザインターフェース)を記述する
  3. Xamarin.iOSは、iOS独自のUIを記述する
  4. Xamarin.UWPは、Windows独自のUIを記述する 

以上で、プロジェクト作成完了です。

 

ビルド

 空プロジェクトのため、特に実行しても画面表示だけとなりますが、とりあえずビルドしてみます。

 

ビルド構成は、以下の通りです。

f:id:tomomo_s:20170528214931j:plain

 

Visual Studioツールバーより、[ビルド]⇒[ソリューションのビルド]を実行して、ビルドすることで、各プラットフォームの実行ファイルが作成されます。

iOSのプラットフォームだけは、警告が出ますね.....

 

これだけで、3種のプラットフォームに対応出来るのは結構楽ですよね。

 

次回

Visual Studio 2017を用いたマルチプラットフォーム開発(Xamarin)~ デバッグ

としてお届けします。