本サイトからスピンオフした姉妹サイトです。Mac2015年11月11日Xamarin.Formsのレイアウトなどを、ビルドすることなくREPL環境で手軽に確認できるSketchesの使い方を紹介する。Sketches(ザマリン・スケッチ。Xamarin.iOS、Xamarin.Android、Xamarin.MacのUI(ユーザーインターフェース)やコードの実行結果を、ビルドをしなくてもすぐその場で確認できる。対象プログラミング言語はC#だけであるが、Xamarin.Formsにも対応しており、2015年11月現在、デザイナーやビューアーがサポートされていないXamarin.FormsのUI構築の練習、確認に大いに役に立つだろう。X)で作業する必要がある。全てStable版の最新バージョンにアップデートしておくとよいだろう。Studioを起動し、(メニューバーの)[ファイル]メニューから[新規]-[ファイル]をクリックする。(iOS)]テンプレートを選択し、任意の名前を付けて(ここでは[XF_iOS]と名前を付けた)、[新規]ボタンをクリックする(図1)。Simulatorが起動し、図2のようになるはずだ。Studioの一番左から、[コードエディター]エリア、[評価結果]エリア、[出力&解析]エリアとなっている。Properties]パッドを表示するSketches用のレイアウトを自作して使用している。通常のビュー(=あらかじめ用意されている各種レイアウト)では、左側にソリューションパッドが表示されているが、Sketchesでは使用しないため、専用のレイアウトを作成することをお勧めする。以下の手順に従ってほしい。Propertiesパッド以上で完了だ。Studioの[ビュー]メニューから[Sketches]ビューを選択すればよい。開発時には、[ソリューション]ビューなどに切り替えるとよい。基本コードのSketchesまずは練習として、コンソールのコードを[コードエディター]エリア内に記述してみよう。練習用のコンソールコード次のように、すぐに[評価結果]エリア(=図4の中央)に変数sの中身やSubstringメソッドの結果が表示され、Console.WriteLineメソッドによる出力は[出力&解析]エリア(=図4の右側)のコンソール出力専用の領域に表示されているのが分かる。timeline]が表示される。forループなどを回す場合は、(+)アイコンをクリックすることで[出力&解析]エリアにグラフが表示される。Windowがリリースされるまでは、コンソールアプリの代わりに使用してもよいだろう。Xamarin.FormsのSketchesSketchesの環境に慣れたところで、Xamarin.FormsのUIとコードをSketchesで実行していこう。シンプルな構成まずはラベルとボタンを配置したシンプルなUIを作成して実行してみる。先ほどのコードは削除して、次のXamarin.Formsのコードを記述しよう。Simulatorの画面にラベルとボタンが表示され、ボタンをクリックすると数値がインクリメントするのが分かる(図5)。SketchesでUIエレメントを表示するためのコードだ。(someViewYouCreated);を使用する必要があることに注意してほしい。ListViewのSketches次にXamarin.Formsで最もよく使用するであろうListViewのSketchesを作成してみよう。これには次のコードを記述する。Forms用データを作成するときの制限Tupleでデータを用意するのは、Xamarin.FormsのSketchesには次の制限があるからだ。クラスの作成、匿名型はサポートされていない。Tupleを使用してほしい。REPLと同じく行ごとに評価される。Playerでのみサポートされているので注意してほしい次にSearchBarとデータテンプレートを定義する。具体的には次のコードを記述する。データバインディング。Labelのフォントサイズの指定。最後にListViewとStackLayoutを追加し、UIを描画する(リスト5)。ListViewの高さを可変長にするプロパティ。以上のコードを全て入力した結果、次のような画面が表示されるはずだ。SketchesによるListViewの表示結果まとめXamarin.Formsの学習用として非常に便利なSketchesを紹介した。Xamarin.Formsはコードで画面を構築する必要があるが、Xamarin.Formsのレイアウトはプロジェクトをビルドして実行しないと結果が分からない。これからXamarin.Formsを使ってみようという方は、最初に勝手が分からずにつまづいてしまうかもしれない。Sketchesを有効活用して、まずはXamarin.Formsの画面構築に慣れていただきたい。※以下では、本稿の前後を合わせて5回分(第58回~第62回)のみ表示しています。INDEX]を参照してください。MvvmCrossで文字列をローカライズ(多言語化)するには?MvvmCrossでのiOS/Androidアプリ開発において、ViewModelの文字列リソースを多言語化してローカライズする方法を解説する。MvvmCrossでViewModelからViewにイベントを通知するには?(Messengerパターン)MvvmCrossでのiOS/Androidアプリ開発において、ViewModelからViewにイベントを通知するMessengerパターンの実装方法を紹介する。XamarinのUIやコードの実行結果を簡単に確認できる「Sketches」を使うには?Xamarin.Formsのレイアウトなどを、ビルドすることなくREPL環境で手軽に確認できるSketchesの使い方を紹介する。Playerの使い方を紹介する。Xamarinを複数回にわたって紹介していく。Storage」プラグインを説明する。機械学習エンジニアを目指す人~初中級者のための技術情報サイトです。「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。開発者のためのSlackチーム、作りました:「機械学習&AI」「クラウド&ビッグデータ」「IoTデバイス」のネット記事情報を共有中。2020最適なビューへの切り替えを推奨します:スマートフォン用表示に。