WinUI 3 with C++ 入門

WinUI 3 ライブラリは C++ で利用できます。

お約束の Hello, World! を表示する Windows アプリを作ってみようと WinUI ライブラリを触ってみましたが、思いのほか難しい。エラーを検索しても C# での説明だったり、 WPF や UWP のライブラリの説明だったりして、解決方法を見つけるのに苦労しました。

そこで、私がつまずいた点を中心にした開発メモを残します。皆さんの役に立つ情報になればうれしいです。

---

NavigationView

• NavigationView を使う
• ナビゲーションの位置を指定する
• メニューを選択したときのイベントを実装する
• ナビゲーションのウィンドウに設定ボタンを表示する

Button

• ToggleSwitch のラベルをボタンの左側にする

UserControl

• ユーザーコントロールに文字列のプロパティを追加する
• ユーザーコントロールにイベントハンドラを追加する

その他

• ウインドウハンドル (HWND) を取得する
• 起動時のウィンドウサイズを指定する
• データバインディング（Bindings->Update）
• メッセージボックスを表示する
• ファイルを開くダイアログを表示する
• フォルダ選択ダイアログを表示する
• モーダルダイアログを表示する
• モードレスダイアログを表示する

Visual Studio

やりたいことが Visual Studio をどう操作すれば実現できるかわからないときのヒント

• イベントハンドラを追加する
• XAML要素のインスタンスにコードからアクセスする
• XAML で日本語を使ったときの文字化けを直す
• 新しい Page を追加する
• 新しい UserControl を追加する
• データバインディングできるモデルを追加する

ルートコンポーネントにプロパティを数値で渡す

Vue3 を使ってわからなかった事のメモシリーズ

ルートコンポーネントにプロパティを渡すことをリンクを参考にしてやってみた。しかし、値を渡すことはできたが age プロパティの値が文字列だった。

const router = new VueRouter({
  routes: [{
    path: '/User/:name/:age',
    name: 'User',
    component: User,
    props: true
  }]
})

// User コンポーネント
props: {
    name: String,
    age: Number,
},    

age プロパティの値を Number で渡すには router の props をFunction モードで定義する

const router = new VueRouter({
  routes: [{
    path: '/User/:name/:age',
    name: 'User',
    component: User,
    props: route => ({
      name: route.params.name,
      age: parseInt(route.params.age, 10),
    })
  }]
})

Vue のサンプルをまねて記述したのだが、自分の環境では以下のエラーがでてコンパイルできなかった。

パラメーター 'route' の型は暗黙的に 'any' になります。ts(7006)

引数の型を明記してやればよいみたい

const router = new VueRouter({
  routes: [{
    path: '/User/:name/:age',
    name: 'User',
    component: User,
    props: (route: { params: { name: string, age: string } }) => ({
      name: route.params.name,
      age: parseInt(route.params.age, 10),
    })
  }]
})

コンポーネントのライフサイクル

Vue3 を使ってわからなかった事のメモシリーズ

コンポーネントを自作しときに初期化時の処理を記述するのはどうすればいい？

解 setup を使う

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}

コンポーネントで発生する他のイベントは ライフサイクル のキーワードで調べればヒットする

PrimeVUE の InputText が使えない

Vue3でPrimeVueを初めて使ってみました。

InputNumber、InputSwitchといったコンポーネントは問題なく使えるのですが、InputText だけがタグを書いても画面に表示されないのです。

Chrome の DevTools で確認すると <inputtext type="text" ... というタグで幅が 0 になっています。 Webでいくら検索しても、こんな症状で悩んでいるひとは見つかりません。

途方に暮れながら、コンポーネントを import している main.ts を眺めていると

.component('Button', Button )
.component('InputText ', InputText )
.component('InputNumber', InputNumber )

InputText だけ余計な半角スペースがついているじゃありませんか！

.component('InputText', InputText )

スペースを取り除くと問題なく InputText を使えました。

おしまい

markdowncat を更新(Ver.0.4.7)

マークダウンを結合するときの不具合を修正しました。

• $newpage が改行にならない
• コメント <-- --> があるとヘッダーを除外できない場合がある

poyonshot.hatenablog.com

npm ERR! 403

はじめて npm のライブラリを作るのときの話です。検索すれば npm ライブラリの作り方はたくさん Hit するのでそれを見ながら作業するわけです。

Step1 アカウントを作る

ふむふむアカウントは必要だよね。

Step2 環境を準備

npm ライブラリを開発に必要なものはすでにインストールしてあったのでスキップ。

Step3 ライブラリを作成

npm init でライブラリのひな型を作成し package.json の内容を調整する。

Step4 ライブラリを公開する

npm publish でライブラリを公開する。

npm ERR! 403 403 Forbidden

．．．見事に失敗してます。

解決方法を探す旅に出る

npm login からやり直してみる

npm ERR! 403 403 Forbidden

効果なし

ライブラリの version を上げてやり直してみる

１度も成功してないから、バージョンなんて関係ないと思いつつ試してみる

npm ERR! 403 403 Forbidden

また君*1か

ライブラリ名が競合してないか https://www.npmjs.com/ で確認する

問題なし

ERR 403 で検索して見つけたサイトの内容を試してみる

yoshinorin.net

ダメだった

検索しても、どうもこんなところに引っかかる人は世の中にはいないようで全然見つからない。

アカウント作成が完了してなかった！？

万策尽きて npm の Sign In した画面を眺めているとアカウント認証の mail を再送するボタンがいつまでも残っているのに気づいた。

はて？アカウントを作成したときにメールのリンクを開いて確認したはずなのになんで残ってる。これまでの作業でアカウントの認証メールはスマホのブラウザで開いていた*2のだが、これが原因だったとは（泣）。

パソコンのブラウザでメールのリンクを開くと認証が成功した。

続いて npm publish を実行すると成功、ライブラリを公開できました。

*1:ERR! 403 に愛着が湧いてきた

*2:中身はロクに読んでない

Markdown の 表(Table,テーブル) を書く拡張機能を作った

Markdown の表を書くときに、セルの結合や表のセルの構成とセルの内容を分けて記述できる Visual Studio Code の拡張機能を作りました。 紹介する拡張機能は MarkdownCat で検索してインストールして下さい。

基本ルール

1. 言語名を mdcat.table にしてコードブロック*1を書きます。
2. Markdown記法で表を書きます。セルは空白でOKです。
3. セルの内容を記述します。 # 行-列 でセルの位置を指定します。(0 から始まる点に注意)

 ```mdcat.table
 |     |     |
 |:---:|:---:|
 |     |     |

 # 0-0
 Header 1

 # 0-1
 Header 2

 # 1-0
 Cell 1

 # 1-1
 Cell 2
 ```

ここまでの内容を Vscode のプレビューで見ると下図*2のようになっていると思います。

Markdown記法の併用

もちろん今まで通りセルの内容を表内に記述することができます。 説明が長くなったセルだけ表の外側の記述に変更できる*3のです。

 ```mdcat.table
 |動物     |鳴き声|
 |:--------|:----|
 |イヌ     |     |
 |ネコ     |     |
 |ニワトリ |     |

 # 1-1
 ワンワン

 # 2-1
 ニャー

 # 3-1
 コケコッコー
 ```

セルの内容を表の外側で記述できるということで、Markdown 記法では記述できなかった表の入れ子ができます。

 ```mdcat.table
 | A   | B   |
 |:---:|:---:|
 |     |     |

 # 1-0
 * a
 * b
 * c

 # 1-1
 |1    |2    |
 |:---:|:---:|
 |3    |4    |
 ```

セルの結合

• セルに > < ^ を記述するとその方向のセルと結合します。
• テキストアライメントは結合先の列の値を採用します。
• 結合したセルの左上の 行-列 を指定して、セルの位置を指定します。

 ```mdcat.table
 |left  |center|right |
 |:-----|:----:|-----:|
 |>     |>     |      |
 |      |<     |<     |
 |      |<     |      |
 |^     |^     |      |

 # 1-0
 Cell A

 # 2-0
 Cell B

 # 3-0
 Cell C

 # 3-2
 Cell D

 # 4-2
 Cell E
 ```

ラベルを付ける

セルの内容は、ラベルとして利用できます。 大きい表やセルの結合を行って 行-列 でセルを指定するのが煩わしくなったときに使いましょう。

 ```mdcat.table
 |left  |center|right |
 |:-----|:----:|-----:|
 |      |>     |      |
 |>     |hello |<     |
 |      |<     |      |

 # hello 
 Hello World!
 ```

最後に

mdcat.table で書いた表は、MarkdownCat のマークダウンファイルを結合する機能で html の table タグに変換できます。 印刷や pdf 変換するときは、変換したマークダウンファイル*4を使って下さい。

poyonshot.hatenablog.com

*1:コードブロックを使うことで、既存のMarkdown記法に影響を与えずに独自の記述ルールを追加できた

*2:セルの行-列の数字を変更するとプレビュー表示のセルの内容が移動するのが楽しい

*3:これがやりたかった！

*4:mdcat.table で書いた表は、Vscode の Preview を使わないとコードブロックの内容を表示するだけです。