Electron の記事執筆とスライド作成

豆蔵デベロッパーサイトにまた Electron の記事を投稿しました。

developer.mamezou-tech.com

同様の内容を Slidev を使ってスライドにしました。Netlify に簡単に publish できるのでしました。

f:id:kondoumh:20220215101939p:plain https://history-of-electron-quick-start.netlify.app

Slidev は 1スライド1 SPA サイトな感じですね。

sli.dev

それをまた記事にしました。

developer.mamezou-tech.com

野良 Scarpbox アプリ - アーキテクチャ見直しドッグフーディング

豆蔵デベロッパーサイトに投稿したブログ。

developer.mamezou-tech.com

WebView 使ってる場合じゃなかったんやー・・ってことで、より速くてセキュアで将来性のある BrowserView による 野良 Scrapbox アプリ再構築を試みています。

ツールバーとかタブバーは、メインウィンドウの BrowserWindow の webContents として実装。Scrapbox のページは BrowserView に読み込んでいます。

BrowserWindow や BrowserView ごとに

main process ↔ contextBridge(preload) ↔ renderer process

の形で実装し、renderer process は Node.js から隔離した (通常の Web アプリの JavaScript と同等の) 実行環境になっています。contextBridge は BrowserView / BrowserWindow の生成時に preload される JavaScript で、main process との通信を担い、Node.js を使った API を renderer process に提供します。色々と作り方が変わるので空き時間に試行錯誤しています。

ページ一覧画面は動きました。

f:id:kondoumh:20220130221024p:plain

従来、ページ情報画面などの補助画面を HTML の dialog 要素で作ってましたが、BrowserWindow を子ウィンドウとして表示する方式で実装しました。

f:id:kondoumh:20220130222342p:plain

メインウィンドウの webContents として全てのページを表示していた WebView 方式と違い、独立した Web ページとして各画面を表示しなくてはいけないので多少ルック&フィールは変わりますがまあいいかなと思っています。

今のところタブは作ってなくて、Scarpbox ページと一覧画面を切り替えるボタンをタブのように (静的に) 配置しているだけです。これまで使ってた electron-tabs が BrowserView には対応しておらず自分で作らなきゃなので、最回しにしてます *1

あとは、使いながらこれはないと不便!って思った機能 (URL をタイトル付きで貼り付けるなど) から優先的に追加していっています。

*1:ページごとにタブがなくても、ページと一覧を切り替えられるれば致命的には使いにくくならない感じです

2021 ふりかえり

Job

約3年参画していたプロダクト開発を夏前に (円満) 卒業しました。後半の1年半ぐらいは商用リリースに向けてかなりヘビーな日々が続いていました。メンバーが優秀でかつチームワークもよかったのでなんとか乗り切りることができました。並行して4月から別案件に半分の工数で参画してアーキテクチャ検討とかプロト開発やってます。これは現在も継続中です。

残りの工数は社内のグループリーダー業務と社外への情報発信活動に従事してました。

情報発信については、まず年初めに会社のホームページでサービス紹介のリニューアルを手伝いました。いろんな顧客案件の事例を収集・類型化し、現場でのアーキテクトやコンサルとしての支援イメージが伝わるように心がけました。

www.mamezou.com

そして秋からは社外のソフトウェアデベロッパーへの認知度を高めるべく、デベロッパーサイトの立ち上げ準備をやっていました。12月頭にローンチ。デザインとかも広報の人とやったりして楽しかったです。

developer.mamezou-tech.com

Kubernetes に造詣の深い同僚の人がほとんどの記事を AWS EKS を使ったハンズオン形式で書いてます。わかりやすくて実践的な内容になっていると思います*1。僕も自分用 EKS 環境を作って検証して記事書きました。ローンチに際してのブログも書きました。

developer.mamezou-tech.com

デベロッパーサイト専用 Twitter アカウントも作り、新着記事を自動投稿したり時々中の人としてツイートしたりしてます。

twitter.com

あとはコンテンツを充実させてじわじわと浸透していけるといいなと思ってます。

Personal Development

会社の GitHub organization で公開している GitHub Actions 用 Action などの OSS もメンテナンス継続してました。

github.com

テレワークによる運動不足解消のため、ボクササイズ / ウォーキング / プランク (のいずれか) を毎日続けるために Pixela に記録する PWA を作ったりしました。

blog.kondoumh.com

Google Fit で歩数計測してるので体重データの読み書きも Fit API でできる環境を整えたりしました。

blog.kondoumh.com

blog.kondoumh.com

野良 Scrapbox アプリは主に Electron の更新に追従するためにメンテナンスしてました。

github.com

デベロッパーサイトでも簡単に紹介しました。

developer.mamezou-tech.com

Electron もバージョンアップのスピードが早く追従が難しくなってきました。v14 で remote が削除され、依存してる NPM パッケージがいくつか動かなくなるのがわかっていたので PR 作ってマージしてもらったりしていました。

blog.kondoumh.com

来年からはさらに古いバージョンの EOS までのリードタイムが短くなります。

https://www.electronjs.org/releases/stable#end-of-support-for-12xy-1600

2022 5月 までは 最新4バージョンまでサポートされますが、v19 以降は最新3バージョンまでのサポートに変更されます。WebView もパフォーマンス問題あったりするので、アーキテクチャの刷新を模索すべき時期かもです。

Gadgets

REARFORCE と Kindle をリニューアル。

blog.kondoumh.com

blog.kondoumh.com

会社支給の Let's note もリニューアルしました。その上テレワークでお客さんから複数のマシンを借りてたので置き場所やキーボード、マウス、ディスプレイを切り替えるのが大変でした。

blog.kondoumh.com

blog.kondoumh.com

今はこんな感じに落ち着いてます。

f:id:kondoumh:20211229001048j:plain

左から会社の Let's note、お客さんから借りてる ThinkPad、その上に iPad を浮かべて ThinkPad の上に iPad とペアリングする Magic Keyboard と Magic Trackpad を載せてます。その右にディスプレイと REALFORCE にマウス、1番右側に MacBook Proを立ててます。REALFORCE とマウスは USB スイッチで MacBook と ThinkPad を切り替え。今後またマシンが増えるとセットアップを工夫しないといけません。

2015年の MacBook Pro で今年も開発してました。コンテナでの開発も Minikube をうまく使うとメモリ16GB でもなんとかなりましたがそろそろリプレースですね。M1X 版 Mac mini が出てほしいです。

Pixel 3 XL も3年使ってます。Pixel 6 / 6 Pro はデカ重すぎてスルーしちゃいました。6a 待ちです。

Software and Services

年明けからドラクエウォークを初めてしまい、Ingress は全くやらなくなりました。

www.dragonquest.jp

クエストやほこら探しでウォーキングが捗ります。ただいま上級職 (バトマス、賢者、レンジャー、パラディン、スパスタ) を2人ずつレベル70に育成中です。

ドラクエウオークと自作 Pixela クライアントアプリで、ワークアウトでもけっこう草を生やすことができました (356日 650 コミット 平均 1.8 コミット) *2

f:id:kondoumh:20211231175452p:plain

f:id:kondoumh:20211231175728p:plain

デベロッパーサイトの Twitter アカウント運営に SocialDog を使い始めました。多機能なのに使いやすく、無料プランでも RSS フィードとツイートを連携させることができます。国産サービスです。

social-dog.net

Meet 使うようになりました。Google Apps にインテグレートされてて手軽に使えますね。

apps.google.com

社内イベントでバーチャルオフィスな感じの Teamflow も体験しました。

www.teamflowhq.com

今後もこの分野の革新が続くのでしょう (Metaverse とか)。

Markdown で綺麗なスライドが作れる Slidev 使い始めました。

sli.dev

最後に

年末は久々に忘年会で少人数ではありますが集まったりしました。コロナはまだ予断を許しませんが、テレワークは継続しつつ週1ぐらいでリアル交流ができるようになるといいなと思います。

*1:彼は 11ty 使ったサイトの SSG の仕組みや Netlify でのホスティングなども全部構築してくれました

*2:Pixela のサポーターにも登録しました

macOS Monterey にアップデート

年末なので macOS のアップデートを行いました (MacBook Pro 13 Early 2015)。

事前に brew update / upgrade は済ませておきました。

Monterey のイメージは約 12GB。

f:id:kondoumh:20211224213502p:plain

ダウンロードとインストールで2時間ぐらいかかりました。

f:id:kondoumh:20211224213554p:plain

システム設定のアイコンや壁紙がちょっと変わったかなと思いますが Big Sur との違いはあまり感じません。

f:id:kondoumh:20211224213006p:plain

ディスクも思ったより余裕があります。

f:id:kondoumh:20211224213636p:plain

Xcode もアップデート。OS のアップデート並みに時間かかってましたが無事終了。

f:id:kondoumh:20211224213656p:plain

常用しているソフトウェアは特に問題もなく、今年のアップデートはあっさりしてました。

MFC アプリ開発環境構築 Visual Studio 2022 版

Visual Studio 2022 がリリースされました。

visualstudio.microsoft.com

2019 以来のメジャーバージョンアップ。ずっと奇数年リリースでしたが、コロナ禍の影響か 2021 ではなく 2022 になりましたね。

blog.kondoumh.com

それでは、レガシーな MFC アプリである iEdit のビルド環境を構築していきます。

Community Edition のインストーラーをダウンロードして起動

f:id:kondoumh:20211210165014p:plain

Visual Studio Installer がインストールされます。

f:id:kondoumh:20211210165112p:plain

Visual Studio Installer の画面で「C++ によるデスクトップ開発」にチェックを入れます。

f:id:kondoumh:20211210165148p:plain

2019 の時のブログを参考にインストールオプションを選びました。2019 は .NET 開発とかも入れてましたが、当面使う予定ないので C++ だけに絞りました*1。それでも16GBもあります。

f:id:kondoumh:20211210165200p:plain

f:id:kondoumh:20211210165220p:plain

インストールが完了。

f:id:kondoumh:20211210165232p:plain

Community Edition は Microsoft アカウントにサインインした状態でないと使えません。

f:id:kondoumh:20211210165257p:plain

サインインすると起動しました。インストーラーは OS のダークテーマに同期していましたが、Visual Studio はデフォルトのテーマになっています。

f:id:kondoumh:20211210165310p:plain

iEdit のソリューションを開きます。

f:id:kondoumh:20211210165323p:plain

ソリューションファイルは Visual Studio 2019 で使ったものなので、「ソリューション操作の再ターゲット」ダイアログが開きました。10 の最新版に設定しました。

f:id:kondoumh:20211210165334p:plain

再ターゲットが終わると、vcxproj ファイルに差分が発生し、PlatformToolset が v142 から v143 に上がりました。

f:id:kondoumh:20211210165345p:plain

一旦開きましたが、iEdit の JSON 処理は C++ REST SDK という Microsoft 製の OSS に依存しているため、この環境も作る必要があります。

blog.kondoumh.com

ということで過去ブログを参考に C++ REST SDK のスタティックリンクができるよう、構築していきます。

まず vcpkg のリポジトリを clone します。

gh repo clone microsoft/vcpkg

powrshell で以下を実行し vcpkg.exe を作ります。

.\vcpkg\bootstrap-vcpkg.bat

vcpkg ディレクトリを vcpkg の root に設定します。

> .\vcpkg.exe integrate install
Applied user-wide integration for this vcpkg root.

All MSBuild C++ projects can now #include any installed libraries.
Linking will be handled automatically.
Installing new libraries will make them instantly available.

cpprestsdk の static 版をインストールしようとするとエラーになりました。

> .\vcpkg.exe install cpprestsdk:x86-windows-static
Computing installation plan...
The following packages will be built and installed:
  * brotli[core]:x86-windows-static -> 1.0.9#2
    cpprestsdk[brotli,compression,core,default-features]:x86-windows-static -> 2.10.18
  * zlib[core]:x86-windows-static -> 1.2.11#13
Additional packages (*) will be modified to complete this operation.
Error: in triplet x86-windows-static: Unable to find a valid Visual Studio instance
The following VS instances were excluded because the English language pack is unavailable:
    C:\Program Files\Microsoft Visual Studio\2022\Community
    C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools
Could not locate a complete Visual Studio instance
The following paths were examined for Visual Studio instances:
    C:\Program Files\Microsoft Visual Studio\2022\Community\VC\Auxiliary/Build\vcvarsall.bat
    C:\Program Files\Microsoft Visual Studio\2022\Community\VC\Tools/MSVC\14.30.30705\bin/HostX86/x86\dumpbin.exe
    C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools\VC\Auxiliary/Build\vcvarsall.bat
    C:\Program Files (x86)\Microsoft Visual Studio\2019\BuildTools\VC\Tools/MSVC\14.29.30133\bin/HostX86/x86\dumpbin.exe

どうも Language pack に英語もインストールしておかなくてはいけないようです。

Visual Studio Installer を起動し変更ボタンをクリック。

f:id:kondoumh:20211211145125p:plain

言語パックで「英語」にチェックを入れ変更ボタンをクリックして language pack を追加します。

f:id:kondoumh:20211211145216p:plain

この状態で vcpkg install をリトライするとインストールできました。

> .\vcpkg.exe install cpprestsdk:x86-windows-static
Computing installation plan...
The following packages will be built and installed:
  * brotli[core]:x86-windows-static -> 1.0.9#2
    cpprestsdk[brotli,compression,core,default-features]:x86-windows-static -> 2.10.18
  * zlib[core]:x86-windows-static -> 1.2.11#13
Additional packages (*) will be modified to complete this operation.
Detecting compiler hash for triplet x86-windows-static...
A suitable version of powershell-core was not found (required v7.2.0). Downloading portable powershell-core v7.2.0...
Downloading powershell-core...
  https://github.com/PowerShell/PowerShell/releases/download/v7.2.0/PowerShell-7.2.0-win-x86.zip -> C:\Users\kondoh\dev\vcpkg\downloads\PowerShell-7.2.0-win-x86.zip
Extracting powershell-core...
  :
-- Building x86-windows-static-dbg
-- Building x86-windows-static-rel
-- Installing: C:/Users/kondoh/dev/vcpkg/packages/cpprestsdk_x86-windows-static/share/cpprestsdk/copyright
-- Performing post-build validation
-- Performing post-build validation done
Stored binary cache: C:\Users\kondoh\AppData\Local\vcpkg\archives\8c\8cc3a921835f34a2df04faf83ca4954562138ed1e44509944ff13f1219ffe554.zip
Installing package cpprestsdk[brotli,compression,core,default-features]:x86-windows-static...
Elapsed time for package cpprestsdk:x86-windows-static: 30.72 s

Total elapsed time: 1.301 min

The package cpprestsdk provides CMake targets:

    find_package(cpprestsdk CONFIG REQUIRED)
    target_link_libraries(main PRIVATE cpprestsdk::cpprest cpprestsdk::cpprestsdk_zlib_internal cpprestsdk::cpprestsdk_brotli_internal)

iEdit のプロジェクトの設定は過去ブログのままでビルドできました。

自プロジェクト側の構成プロパティ設定です。

vcpkg で OSS のライブラリを導入し Visual C++ プロジェクトに静的リンクする - kondoumh のブログ

これで、Windows 11 にアップデートしてもビルド大丈夫そうです。

次は GitHub Actions で Windows Runner 使ってビルドする CI を作りたいところです。

*1:.NET Core なら VS Code でも開発できますし。

Kindle Paperwhite (11世代) 購入

Kindle Voyage 買ったのはなんと7年前。

blog.kondoumh.com

文庫本的サイズで軽いので今も SF とか読むのにけっこう使ってます。

11世代目の Kindle Paperwhite はフォームファクタがリニューアルされ、画面が大きくベゼルも細くなりました。なんといっても USB-C 対応。これは素晴らしい。ということで広告なし版をポチりました*1

ベゼルが細くなってかなりモダンな感じになりました。

WiFi の情報は Amazon が知ってるのでスイッチを入れたらもうログインしてました。

Voyage と比べると画面描画やスワイプ操作への反応も良くなったし、画面色の暖かさも調整できます。漫画の早送り操作などもサポートされてかなり UI は進歩してきたなと思いました。

左 Paperwhite 右 Voyage やはり画面サイズが大きいので情報量が増えてますね。漫画は Kindle デバイスではほぼ読みません*2が Voyage よりは実用的です。

f:id:kondoumh:20211127154745j:plain

Voyage より約20グラム重いですが、大きさのわりに軽い(密度が低い?)せいか Voyage より重いって感じはないです。

USB-C で充電も手軽になったので Kindle の稼働率が上がりそうです。

*1:ブラックフライデー前だったので3000円ぐらい高かったですが。

*2:macOS の Kindle アプリで大きい画面で読みます。

1Clipboard で Chrome の稼働を1つのマシンに集約する

1Clipboard は 複数の PC / Mac のクリップボード履歴を共有するツールです。

1clipboard.io

Google Drive を仲介してクリップボードデータを共有するため、インストールして各端末で Google ログイン・パーミッション設定をする必要があります。一度設定すれば、各 OS でのクリップボード履歴が同期され、他のマシンからも利用可能になります。

macOS のメニューバーアイコン。

f:id:kondoumh:20211117220013p:plain

クリップボードにコピーするたびに同期中ステータス表示になります。Dropbox によく似ています。

f:id:kondoumh:20211117215915p:plain

クリップボード履歴の UI。スターをつけて絞り込んだりもできます。

f:id:kondoumh:20211115215128p:plain

このツール、複数マシンでキーボードとマウスを共有してるのでクリップボードも共有したくて見つけました。コピーの主たるソースはブラウザ (Chrome) です。

以前から複数のマシンで Chrome 起動して URL やコードスニペットをコピペしているのが非効率だと感じていました。あるマシンではコピー済みなのに別マシンでは未コピーなのでわざわざ検索して同じページを開いてコピーする・・という操作はかなりのストレスです。Chrome を開くのは1台のマシンにして、他のマシンは作業に必要なウィンドウだけを開いた状態にしたい。

1Clipboard をしばらく使用してみて、最新データ反映にややラグがありますが、それでもかなりストレスが軽減されました。マシンを意識しなくていいというのは想像以上に便利だと感じました。

自分の Google アカウントに閉じた共有とはいえ、パスワードなど機微な情報の扱いについては履歴から消すなど気をつけたいと思いました*1

*1:コピーを抑止する操作や、フィルター機能があればよいと思いました。