2021年11月28日日曜日

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側を操作することも可能でした。


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

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

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

ではまた~。

2021年11月19日金曜日

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

滋賀県へ、2年ぶりの社員旅行に行き、びわ湖テラスからの眺めを楽しんだり、近江牛のコースを堪能したりしました。
その模様をYouTubeで公開していますので、ぜひご覧ください。

2021年11月13日土曜日

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 によく使いそうなコントロールを配置


 0.準備

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




 


 

2) 新しいXAMLページを追加
 新しい項目追加で「コンテンツページ」を選択
Page1.xaml を作成





















 1.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());
}
 
■実行結果


 2.ボタンに画像を表示

スマホアプリのボタンはもっとおしゃれでなきゃ、と思い、ボタンコントロールに画像を表示してみることにしました。
 
1) 表示したい画像ファイルをソリューションの以下ディレクトリに配置
Androidプロジェクト: \Resources\drawable
iOSプロジェクト:   \Resources
Image1.png を配置


 

 
 












2) 画像ファイルのプロパティでビルドアクションを設定
Androidプロジェクト: AndroidResource
iOSプロジェクト:   BundleResource







3) 上の1.1)で追加したMainPage.xaml の ボタンコントロール を以下のように変更
(ImageSource プロパティに画像ファイルをバインド) 
 <Button x:Name="button1" Clicked="button1_Clicked" ImageSource="Image1.png" />

 

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

 

 3.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列で定義
・1行目~4行目は同じ行高さで5行目(メモ欄)だけ 他の行の4倍の高さを設定
<RowDefinition Height="4*" />
・2列目は1列目の3倍の幅を設定。 
<ColumnDefinition Width="3*" />
・1行目(画面タイトル欄)は Grid.ColumnSpan でセル結合。
Grid.ColumnSpan="2"
 
(Gridの分割が分かるように一部背景色を設定しています) 

 

Fin

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

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

 それではまた。

2021年11月5日金曜日

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

 

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

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

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

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

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

→第4回 はこちら 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」の構文を使用して作図していきます。

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

    • 【入力時】

    • 【選択後】

 

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

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

    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
    
    Created with Raphaël 2.2.0 ログイン処理開始 ID、パスワード入力値チェック 入力値が 不正な値? ID存在チェック ID存在 チェック結果? ログイン処理 終了 ID存在なしメッセージ表示 操作ログ出力 入力値不正 メッセージ表示 No Yes Yes No

    構文の詳細は 「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で図式(フロー図)を作図する方法について、今回は紹介しました。

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

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

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

 

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

2021年10月29日金曜日

[Web] 画面サイズに合わせてスクロール部分の高さを追従させる

どうも、もりもりです。

ASP.NETで開発中ですが、ブラウザの高さによってListViewの高さを追従するように動的に変更したく、少し困ったのでメモ。

■ CSSのcalc()で対応

スクロールさせたい部分はListViewでいうところのItemTemplateです。(ヘッダより下のデータ部)
ということで今回もまずはHTMLでの確認です。(※ すみません、aspxでの確認までは載せていません)
今回はJavaScriptではなくCSSのcalc()で対応しました。

See the Pen FollowScrollHeight by Y Mori (@ymdevx3) on CodePen.

CodePenではResultの表示領域のサイズを自由に変更できないので ソースをコピペしてファイルに保存し、そのファイルをブラウザで直接開いてみてください。

■ ポイント

高さを全て「%」指定していると効きません。 スクロールさせたい要素の親やまたその親など、どこかでサイズが決められていないとダメなようです。 今回は一番上の親の高さを100vhとしています。

■ さいごに

最初はJSでやる気満々だったのですが、それじゃ面白くないなと。 他に方法を探してみるかとググって見たら便利なのがあるじゃない。 しかもJSで書くよりもすっきりしていて良い感じ。 実際にcalc()してる箇所が多いとちょっともっさりした動きにはなってしまいますが。 気にならない程度ならぜひ使ってみてください。

以上、もりもりでした。

2021年10月23日土曜日

Windows11にアップデートする

こんにちは、やっまむーです。

先日、Windows11のアップデートが開始されたので早速メインPCをアップデートしました。
今回はその備忘録になります。

アップデート要件を確認する

利用しているPCがWindows11にアップデートできるかはマイクロソフトから配布されているチェックツールで確認できます。
新しいWindows11 OSへのアップグレード」ページの一番下にダウンロードのリンクがあるので、さっそく取得します。

左の「PC正常性チェックアプリのダウンロード」を選択

ツールを起動すると、こんな感じで現在の状態が表示されます。

「今すぐチェック」を選択したところ、TPM2.0が有効になっていないようです。

このTPM2.0、BIOSレベルで無効化されているようです。
自分のマザーボードの種類からどこに設定項目があるか調べて、早速変更します。

TPM2.0を有効にする

各PCメーカーやマザーボードメーカーがやり方を公表しているので、「TPM2.0 有効化 {メーカー名}」なんかで検索すればやり方が見つかります。
私はAsusのマザーボードを使っているので、以下はその時の変更方法です。

  1. BIOSの設定に入り、Advanced Modeに切り替える
  2. 「詳細」タブの「PCH-FW Configuration」を選択
  3. 「PTT」の設定を「Enable」に変更
  4. 設定を保存して終了する
設定はこれだけです。
再度チェックツールで確認すると、アップデート要件を満たすようになりました。

Windows11へアップデートする

自動アップデートはまだ提供されていなかったので、手動でアップデートしていきます。

Windows11 をダウンロードする」ページにアクセスし、インストールアシスタントをダウンロードして実行します。
「同意してインストール」を開始すると、あとは待つだけになります。




再起動すると、冒頭のデスクトップとなります。(壁紙は雰囲気アップのために変更)
スタートメニューがWindows10からガラッと変わっています。
4k画面だと端にあるスタートボタンを押しにくかったので、少し便利になりました。

システム上もWindows11になっていることを確認できました。
特にトラブルも無く、アップデート完了です。

できればクリーンインストールもしてみたいですが、ライセンス認証周りで気を付ける事がありそうなのと、万が一の予備機がないため今回は見送りです。
そちらの方はいずれ、PCが壊れるか組みなおしの時にでも試そうと思います。

ではではー。

2021年10月17日日曜日

dpkgコマンドを使わずにdebパッケージを展開する方法

 


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

仕事柄、Linuxをよく使っています。

先日、debパッケージのソフトウェアをインストールしようと、

とあるLinuxの実行環境にアクセスしたのですが、

その実行環境にはdpkgコマンドが存在しておらず、

どうやってdebパッケージ展開するの???

となりました。


いろいろと調べたところ、dpkgコマンドを使わずに

debパッケージを展開できることがわかったので

ここで紹介したいと思います。


そもそもdebパッケージとは、

Debian、Ubuntuなど多くのLinuxディストリビューションで利用されるバイナリのパッケージのこと。gzipやbzip2、LZMAで圧縮された2つのアーカイブで構成されており、dpkg/apt/aptitude でコントロールすることができる。

というものです。


※今回の実行環境では、dpkg/apt/aptitude は使えません。

で、この説明を見るにdebパッケージはただのアーカイブです。

 |--- debian-binary
 |--- data.tar.gz (拡張子は圧縮方式により異なる)
 | |--- . (root) (以下、インストール後のディレクトリ構造)
 |   |--- usr, bin ... 
 |
 |--- control.tar.gz
   |--- .
     |--- control
     |--- md5sums

なのでアーカイブを解凍するコマンドであればdpkgの代替が可能です。

data.tar.gz の中身がインストール後のディレクトリ構成となっているので、

今回は以下のようなコマンドで代替してみました。

 ar p xxxxxx.deb data.tar.gz | tar zx 

arコマンドは、 アーカイブ作成 / 展開のコマンドです。

ちなみに、arコマンドは、BusyBoxにも入っているぐらいなので、

どのLinux環境でも存在しているはずです。


普通のDesktop環境でLinuxを使っているのであれば

こんなことには巡り合わないかとは思いますが、w


組み込みLinuxなどは、容量に限りもあり、

実行環境にインストールするパッケージも厳選が必要になります。

dpkgをインストールせずにdebパッケージを展開したい場合は

参考にしてみてください。


ではまた~。