AndroidタブレットをワイヤレスでPCのサブモニターに！？

こんにちは。よっしーです。

我が家では、ノートPCを使用しており、ノートPCの画面1つだと

表示領域も少ないので、サブモニターが欲しいな。

と常々考えていました。

ただ、そもそも置く場所もないし、広げるスペースもない。

ということで、購入を見送っていたのですが、

以前、Androidのタブレット（Lenovo Yoga Smart Tab）を

購入したものが、もしかして使えるかな？と思い、

タブレットをサブモニター化出来るか試してみました。

配線などはあまりごちゃごちゃしたくないので、

ワイヤレスで表示することを目標に調べたところ、

「spacedesk」というアプリに行きつきました。

https://www.spacedesk.net/

ノートPC(Windows)は上記サイトからアプリをインストール。

Androidのタブレット側は、Playストアからアプリをインストール。

ノートPCとAndroidタブレットが同一wifiに接続している環境であれば

ワイヤレスでサブモニター化が出来ます。

小難しい設定なども特に必要なく、ノートPC側のspacedeskを立ち上げ、

タブレット側のspacedeskを立ち上げるだけで、簡単に繋がりました。

タブレット側はアプリを立ち上げて、Windows側のPCを選択するだけ。

超簡単です。

しかも、タブレットとさらにスマホも接続して、合わせて

3画面でサブモニター化することも可能でした。

ワイヤレスなので、若干の遅延はあるものの、充分実用レベルです。

しかも、タブレット側はピンチインアウトで拡縮が出来たり、

タブレット側からノートPC側を操作することも可能でした。

やってみるとやはりマルチディスプレイは使い勝手がよかったので、

しばらくはタブレットをサブモニターとして運用してみますｗ

皆さんも興味があれば一度試してみて下さい。

ではまた～。

社員旅行に行ってきました！

滋賀県へ、2年ぶりの社員旅行に行き、びわ湖テラスからの眺めを楽しんだり、近江牛のコースを堪能したりしました。

その模様をYouTubeで公開していますので、ぜひご覧ください。

XAMLのお勉強メモ

ずいぶんお久しぶりの投稿となります。ざわです。

はじめに

　社内でアプリを作るにあたりクロスプラットフォーム開発で「.NET MAUI」でやりましょうと。

　そこでXAMLのお勉強を始めてみました。

　初歩の初歩レベルからですが、ちょこちょこ触って試してみたことをメモっていきたいと思います。

動作環境

　・Windows10

　・Microsoft Visual Studio Community 2022 Preview 7.0

　・Xamarin.Forms

　　（.NET MAUI が目的なのですが、まずは情報の多い Xamarin.Forms を使ってみます）

試してみたこと

1. 　MainPageに画面遷移用のボタンを追加し、別のページ（Page1.xaml） に遷移
2. 　画面遷移用ボタンに画像を表示
3. 　Page1.xaml によく使いそうなコントロールを配置

　０．準備

1) 「モバイル アプリ（Xamarin.Forms） C#」で空の新規プロジェクトを作成

 

 

2) 新しいXAMLページを追加

　新しい項目追加で「コンテンツページ」を選択

Page1.xaml を作成

　１．MainPageに画面遷移用のボタンを追加し、別のページ（Page1.xaml） に遷移

1) MainPage.xaml に画面遷移用のボタンを追加

 

 　23行目の 

 　<Button x:Name="button1" Text="次ページ" Clicked="button1_Clicked"

　これを追加すると、

　C#プログラム（MainPage.xaml.cs）にボタンクリックイベントが自動で作成されます。

2)  ボタンクリックイベントに Page1.xaml に画面遷移するコードを追加

　イベントに Page1.xaml に画面遷移するコードを追加しますが、

　その前に、ページのナビゲーションを行うには、

　アプリで最初に表示する画面をNavigationPageクラス にする必要がある、とのことなので、

　プロジェクトのAppクラスのコンストラクタ（App.xaml.cs）を 次のように書き換えます。

public App()

{

    InitializeComponent();

    //MainPage = new MainPage();

    MainPage = new NavigationPage(new App1.MainPage());

}

 

　MainPage.xaml.cs のボタンクリックイベントでは、

　Navigation の PushAsyncメソッドを呼びます。　

　（モーダル表示でページ遷移する方法）

private void button1_Clicked(object sender, EventArgs e)

{

    Navigation.PushAsync(new Page1());

}

 

■実行結果

　２．ボタンに画像を表示

スマホアプリのボタンはもっとおしゃれでなきゃ、と思い、ボタンコントロールに画像を表示してみることにしました。

 

1) 表示したい画像ファイルをソリューションの以下ディレクトリに配置

Androidプロジェクト：　\Resources\drawable

iOSプロジェクト：　　　\Resources

Image1.png を配置

 

 

 

2) 画像ファイルのプロパティでビルドアクションを設定

Androidプロジェクト：　AndroidResource

iOSプロジェクト：　　　BundleResource

3) 上の１．1)で追加したMainPage.xaml の ボタンコントロール を以下のように変更

（ImageSource プロパティに画像ファイルをバインド） 

 <Button x:Name="button1" Clicked="button1_Clicked" ImageSource="Image1.png" />

 

■実行結果

 いまいちの仕上がりですが、まぁ、今日のとこはこれくらいで。。

 

　３．Page1.xaml によく使いそうなコントロールを配置

Page1.xaml にテキスト、日付、時刻などのコントロールを配置してみます。

XAMLではレイアウトコントロールの上に、子要素となるテキスト等のコントロールを配置しますが、

今回は「StackLayout」と「Grid」で試してみようと思います。

<レイアウトコントロール> 

　・StackLayout

　・AbsoluteLayout

　・RelativeLayout

　・Grid

　・FlexLayout 

StackLayout 版

<StackLayout BackgroundColor="Azure">

    <Label Text="タイトル:" Margin="20" />

    <Entry Placeholder="タイトル" x:Name="title" Margin="30, 0, 30, 10"/>

    <Label Text="日付:" Margin="20" />

    <DatePicker x:Name="datePicker"

        Format="D"

        Margin="30, 0, 30, 10"

        DateSelected="OnDateSelected" />

    <Label Text="時刻:" Margin="20" />

    <TimePicker x:Name="timePicker"

        Time="11:00:00"

        Format="T"

        Margin="30, 0, 30, 10"

        PropertyChanged="OnTimePickerPropertyChanged" />

       

    <Label Text="メモ:" Margin="20" />

    <Editor x:Name="editor" Margin="30, 0, 30, 10" HeightRequest="80" />

</StackLayout>

 

■実行結果 

Grid 版

<Grid>

    <Grid.RowDefinitions>

        <RowDefinition />

        <RowDefinition />

        <RowDefinition />

        <RowDefinition />

        <RowDefinition Height="4*" />

    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>

        <ColumnDefinition />

        <ColumnDefinition Width="3*" />

    </Grid.ColumnDefinitions>

    <BoxView Grid.Row="0" Grid.ColumnSpan="2" Color="Blue" />

    <Label Grid.Row="0" Grid.ColumnSpan="2" Text="画面タイトル"

            HorizontalOptions="Center" VerticalOptions="Center" FontSize="Large" FontAttributes="Bold" />

   

    <Label Grid.Row="1" Grid.Column="0" Text="タイトル："

            HorizontalOptions="Center" VerticalOptions="Center" />

    <Entry Grid.Row="1" Grid.Column="1" Placeholder="タイトル" x:Name="title" />

    <Label Grid.Row="2" Grid.Column="0" Text="日付："

            HorizontalOptions="Center" VerticalOptions="Center" />

    <DatePicker Grid.Row="2" Grid.Column="1"

        x:Name="datePicker"

        Format="D"

        DateSelected="OnDateSelected" />

    <Label Grid.Row="3" Grid.Column="0" Text="時刻："

            HorizontalOptions="Center" VerticalOptions="Center" />

    <TimePicker Grid.Row="3" Grid.Column="1"

        x:Name="timePicker"

        Time="11:00:00"

        Format="T"

        PropertyChanged="OnTimePickerPropertyChanged" />

    <BoxView Grid.Row="4" Grid.Column="0" Color="Orange" />

    <Label Grid.Row="4" Grid.Column="0" Text="メモ："

            HorizontalOptions="Center" VerticalOptions="Center" />

    <BoxView Grid.Row="4" Grid.Column="1" Color="Orange" />

    <Editor Grid.Row="4" Grid.Column="1" x:Name="editor" HeightRequest="80" />

</Grid>

■実行結果  

・Gridを5行2列で定義

・１行目～４行目は同じ行高さで５行目（メモ欄）だけ 他の行の4倍の高さを設定

<RowDefinition Height="4*" />

・2列目は1列目の3倍の幅を設定。 

<ColumnDefinition Width="3*" />

・1行目（画面タイトル欄）は Grid.ColumnSpan でセル結合。

Grid.ColumnSpan="2"

 

（Gridの分割が分かるように一部背景色を設定しています） 

 

Fin

　XAMLのホットリロード機能が使えたのでリアルタイムに修正が反映されて便利でした。

　次はもう少しシュッとしたつくりの画面をご紹介できるようにしたいと思います。

　それではまた。

Typora(Markdownエディタ)の紹介⑤ ～フロー図を作成する～

 

おはようございます。ひっくです。

今回も、MarkdownエディタのTyporaを取り扱います。

 

Typora関連記事

→第1回 はこちら Typora(Markdownエディタ)の紹介①

→第2回 はこちら Typora(Markdownエディタ)の紹介②　～画像の保存先を変更する～

→第3回 はこちら Typora(Markdownエディタ)の紹介③　～数式を編集する～

→第4回 はこちら Typora(Markdownエディタ)の紹介④　～シーケンス図を作成する～

→第6回 はこちら TyporaVer1.x リリースに伴い有料化(でもベータ版はまだまだ無料利用可能)

→第7回 はこちら Typora(Markdownエディタ)の紹介⑥　～クラス図を作成する～

 

今回は図式(フロー図)の記載方法を紹介します。

Typora バージョン

今回確認するTyporaバージョンは、「0.11.13(beta)」となります。

 

拡張機能の有効化

※ 第4回(シーケンス図の作成) と同内容となります。既に有効化されている方は読み飛ばしてください。

 

Markdownで図を作成できる設定となっているか確認します。

設定は、「ファイル」→「設定」→「Markdown」→「文法サポート」から変更できます。

 

以下赤枠の設定がチェックONになっていればOKです。

 

フロー図の記法 (flowchart.js)

Typoraでは「flowchart.js」を使用してフロー図を作成することができます。

以下にフロー図を作成する方法を紹介します。

 

1. バッククォート「`」× 3 を記載した後、続けて「flow」と記載します。

   これで、「flowchart.js」を使用してフロー図を作成するモードになります。

    

   【選択後】のカーソル表示部分に、「flowchart.js」の構文を使用して作図していきます。

   初期表示でフロー図が表示されます。

   • 【入力時】

     

   • 【選択後】

     

 

2. 以下は作図した際の記載例です。

   入力欄には、以下のような記載をしています。

   st=>start: ログイン処理開始:>http://www.google.com
   e=>end: ログイン処理 終了
   opMsg=>operation: 入力値不正
   メッセージ表示
   opMsg1=>operation: ID存在なしメッセージ表示
   opChk=>operation: ID、パスワード入力値チェック
   subChk=>subroutine: ID存在チェック
   cond=>condition: 入力値が
   不正な値？
   cond2=>condition: ID存在
   チェック結果？
   ioLog=>inputoutput: 操作ログ出力
   
   st->opChk->cond
   cond(true@No)->subChk->cond2->e
   cond2(false@No)->opMsg1->ioLog->e
   cond(false@Yes)->opMsg->ioLog(left)->e
   cond2(true@Yes)->e
   

   構文の詳細は 「flowchart.js」のGitHub ReadMe.md で確認可能ですが、

   簡単に紹介すると、2つ覚えなければいけない構文があります。

    

   ①各ノードを定義する構文

   「ノード変数名=>ノードタイプ: ノードテキスト |ノード表示装飾(※) :>URLリンク(※)」

   ※はオプション項目。

   ②接続を定義する構文

   「ノード変数名->ノード変数名(方向:[ top / left / right / bottom ])」

    

   ノードを定義して、各ノードを接続することでフロー図を作成していくことができます。

   基本となる構文さえ覚えてしまえば、後は自由に作成することができます。

    

   以下は個人的な感想となります。(注意すべき点や、考えられる使用用途等を挙げてみました。)

   • 上記例の「ログイン処理 開始」をクリックしてみてください。

     リンクURLとしてGoogleの検索ページを設定しているので、そちらに遷移します。

     リンクURLはどのノードに対しても設定することができます。

     例えばGitHubの該当URLを付記すれば、対応するソースとの対応関係が

     すぐに確認できるので使い勝手が良くなるかもしれません。

   • ノード変数名は分かりやすい変数名とする方が良いでしょう。

     似た変数名が多いと、各ノードを接続する際に、ノードに対応する変数を

     探す手間が増えそうです。

   • 条件分岐のノードは、ノードテキストを改行する方が図が小さくなりやすく

     見やすいフロー図を作成できるようになるかと思います。

     他のノードでも改行は許可されるため、必要に応じて使用した方が良いでしょう。

   • ノード接続時の方向(left等)は必ず記載しなければならない訳ではありません。

     ただ、多方面から接続される場合や、ノード下部にスペースがない場合に

     接続線が乱れる(※)ことがあります。

     このような場合は、方向を記載して調整するのが良いでしょう。

     ※上記例の「cond(false@Yes)->opMsg->ioLog(left)->e」記載について、

     方向情報を削除した際の表示例が、以下となります。

   

まとめ

Typoraで図式(フロー図)を作図する方法について、今回は紹介しました。

複雑になってくると各ノード間の接続が作成しづらくなるので、慣れが必要かもしれません。

ですが、ぱぱっと簡易的なフロー図を作成したい場合には、便利かと思います。

興味を持った方は是非一度作成してみてください。

 

今回はこのへんで。ではまた！