![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
#author("2023-05-01T12:03:58+09:00","default:kyo-in","kyo-in") #author("2023-06-11T14:07:49+09:00","default:kyo-in","kyo-in") **Visual Studioの入手 [#zdba52d5] Visual Studio Community 2022 （無料）もしくはEnterpriseも利用できる． https://visualstudio.microsoft.com/ja/downloads/ Enterpriseは電大生の場合，Azure Portalに学籍メールでログインすることで取得可能 https://portal.azure.com/ 一番上の検索欄「Education」を入力→検索結果からEducationページを開く→左メニュー「ソフトウェア」→Education資格があるか確認後→ソフトウェア一覧から「Visual Studio Enterprise 2022」 を選択しキーを取得 **Windows10(11)のバージョン [#f6ace720] Windows Updateにより，Windows10(11)を最新のバージョンにしておくことが好ましい， **Visual Studioのインストール [#df298e34] Visual Studioインストール時，「ワークロード」で本講義に必要な「ユニバーサル Windows プラットフォーム開発」にチェックを入れること． #ref(./vsuwp.png); **開発者モード [#s79f1c55] VisualStudioで作成したUWPアプリをローカルPCへのインストール，実行を可能とするため，Windowsの「開発者モード」を有効にする．（Visual Studioからも実行時，開発者モードが有効でない場合，有効にするか問われる） #ref(./developermode.png); **UWP導入 [#u31adc50] UWP(Universal Windows Platform)はMicrosoftが提供する様々な環境下で動作するアプリを開発可能な共通プラットフォームと呼べるものである． -ユニバーサル Windows プラットフォーム (UWP) アプリとは - Windows UWP applications | Microsoft Docs~ https://docs.microsoft.com/ja-jp/windows/uwp/get-started/universal-application-platform-guide **使用言語 [#xfcd9581] UWPでは複数のプログラミング言語，UIをサポートするが，ここでは -XAML UI -C# での実装を行う．開発環境は， -Visual Studio 2022 を使用していく． **Visual Studioのフォルダ，ファイル構成 [#c4a0afc0] Visual Studioでは，複数のソースコードをプロジェクトが束ね，複数のプロジェクトを束ねるものがソリューションと呼ばれる． 簡単なアプリケーションを作成する場合は，1つのソリューション内に1つのプロジェクト，という構成になることが多い． #ref(./solution.png,50%); **プログラムテンプレート [#rae71759] 以下のテンプレートプログラムを用いて，簡易なスケッチ入力アプリを実装する． https://github.com/tomoakimoriya/Kisozemi Gitが分かるものはClone，もしくはZipでダウンロードし展開すること． **最初に行うこと [#u26fbc2b] .slnファイルを開くと，デフォルトでソリューションプラットフォームがARMとなっているため，x86へ変更しておく． #ref(./changeplatform.png); **ビルド・実行 [#o5ede78c] ビルド，実行は上部の再生ボタンを押せばよい．もしくは[デバッグ]-[デバッグの開始]または，F5キー． #ref(./build.png); **次に行っておくこと [#m7d6c9e8] 一回，ビルド，実行し，必要なモジュールファイルを復元しておく（インターネットへの接続が可能な状態にしておくこと）． **ソリューションエクスプローラー [#n65222dd] ソリューション内のプロジェクト，プロジェクト内のファイル一覧はソリューションエクスプローラーで参照できる． 表示されていない場合は，[表示]-[ソリューションエクスプローラー]で表示． #ref(./explorer.png,50%); **XAML [#j403e0ad] ウインドウ（GUI）の設計は，ソリューションエクスプローラーからMainPage.xamlを開く． #ref(./xaml.png,25%); XAML(Extensible Application Markup Language)では，XMLのようにタグを記述することでUI部品を配置していく． **イベント [#k2a534ad] GUIを持つアプリケーションではイベントが起きた際の処理を記述していくことが中心となる． 簡単な例を実装していく． テンプレートととなるプログラムでは，ウインドウ上に出し入れできるバー（ナビゲーションバーのようなもの）を実現できる，SplitViewが配置されている． デフォルトでは常に表示されているが，左上のハンバーガーボタン（「三」のボタン）を押して，バーの表示，非表示を切り替えるようにする． XAMLの編集画面から「ToggleButton」を選択し，右下のプロパティから雷マークをクリック，そこから，Clickの欄をダブルクリックする． #ref(./buttonevent.png,25%); コード記述画面に移動するので，以下を書く． private void ToggleButton_Click(object sender, RoutedEventArgs e) { Splitter.IsPaneOpen = !Splitter.IsPaneOpen; //追加 } これで，ボタンを押すとバーの表示，非表示が切り替えできる． **Pointer [#s3d7d625] UWPでは，様々な環境で動作するアプリケーションを想定しているため，PCにおけるマウス入力はPointer( Pressed, Released, etc.)〜と名付けられているイベントで，タッチなども含めて情報を取得できる． -ポインター入力の処理 - Windows UWP applications~ https://docs.microsoft.com/ja-jp/windows/uwp/design/input/handle-pointer-input Pointer関連のイベントでは，引数にPointerPointerRoutedEventArgs型のインスタンスがシステムから渡されてくるので，そこから各種情報を取得できる． 例えば，カーソルやタッチされた位置の座標は，GetCurrentPointメソッドで取得できる． var p = e.GetCurrentPoint(MainCanvas); //引数に座標の基準となるコントロールを指定する //p.PositionがPointer（マウス，タッチ）の座標となる． -PointerRoutedEventArgs.GetCurrentPoint(UIElement) Method (Windows.UI.Xaml.Input) - Windows UWP applications~ https://docs.microsoft.com/ja-jp/uwp/api/windows.ui.xaml.input.pointerroutedeventargs.getcurrentpoint 各情報の取得例： -PointerPoint Class (Windows.UI.Input) - Windows UWP applications~ https://docs.microsoft.com/ja-jp/uwp/api/windows.ui.input.pointerpoint **線を書く [#g874bbef] -方法: PathGeometry で LineSegment を作成する~ https://docs.microsoft.com/ja-jp/dotnet/framework/wpf/graphics-multimedia/how-to-create-a-linesegment-in-a-pathgeometry 以下は，今回のテンプレートプログラム用に直したコード： //プログラム上部の //using System.IO; をコメントアウト //using Windows.UI; を追加 //using Windows.UI.Xaml.Shapes; を追加 PathFigure myPathFigure = new PathFigure(); myPathFigure.StartPoint = new Point(10, 50); LineSegment myLineSegment = new LineSegment(); myLineSegment.Point = new Point(200, 70); PathSegmentCollection myPathSegmentCollection = new PathSegmentCollection(); myPathSegmentCollection.Add(myLineSegment); myPathFigure.Segments = myPathSegmentCollection; PathFigureCollection myPathFigureCollection = new PathFigureCollection(); myPathFigureCollection.Add(myPathFigure); PathGeometry myPathGeometry = new PathGeometry(); myPathGeometry.Figures = myPathFigureCollection; Path myPath = new Path(); myPath.Stroke = new SolidColorBrush(Color.FromArgb(255, 0, 0, 0)); myPath.StrokeThickness = 1; myPath.Data = myPathGeometry; MainCanvas.Children.Add(myPath); **課題 [#l13e233f] %%クリックするごとに直線を引けるようにせよ．%% 上記の「線を描く」を使って，クリックされたら決まった場所に線を引く，をMainCanvasのPointerReleasedイベントに実装できればOK． #ref(./kadai1.gif); **課題提出方法 [#r54a0cd6] 招待されているBoxアップロードフォルダ「情報メディア基礎ゼミ（森谷）」の「第1回」へ，完成させた課題のソリューションフォルダをZIP圧縮し，ファイルを以下の名前でアップロードしてください． ファイル名：XXFIXXX_1st.zip（例：18FI999_1st.zip） ''提出締め切り：5月5日（金） 23:59'' ''提出締め切り：6月16日（金） 23:59'' BOXアップロードフォルダの招待メールが来ていない方は森谷までメール連絡ください．
