電卓をデスクトップアプリにしたい
13日目の記事で電卓を作りました（改造ですが）
その後、コメントに「デスクトップアプリへの展開記事などいかがでしょう？」とのお言葉を賜りました。
wnako3で作成したプログラムをデスクトップアプリにするのは、なでしこ3配布キットを使うのが簡単です。
一昨年のアドベントカレンダーで、既にお試し記事も書きました。
違うことがしたい！
なでしこ3配布キット(Electron版)とは
🍜 なでしこ3配布キット(Electron版) - enako
先のなでしこ3配布キットは、マニュアルによれば（軽量版）となっています。
OSにインストールされているブラウザコンポーネントを使って動かすため配布サイズが小さく出来る一方で、依存の問題が生じる可能性があるということで、実際Chomeランタイム版は、いつぞやchromeさんがばーじょんあっぷして以降、起動時に「Chromeは自動テストソフトウェアによって制御されています」なるお知らせが表示されることになってしまいました。
まあまあ邪魔くさいです。
マニュアルでオススメされているのはChrome版だというのになんということでしょう
（WebView(Edge)ランタイムの方は大丈夫です☆）
そこで！
Electron版はブラウザ機能全部入りで配布するので、サイズが大きくなるけど依存の問題は少ないというコトなんですね。
ダウンロード
マニュアル上に詳しい解説は無く、直接配布先であるGitHubへと誘われますよ。
こちらに簡単な説明があります。
軽量版同様、リリースから配布パッケージをダウンロードすれば良いようです。
ウチはWindowsなので、nadesiko3-win32-x64.zipの方をダウンロードします。
サンプルをお試し
解凍して開いてみると、ファイルがいっぱい！
しかし、nadesiko3.exe を実行すればデモプログラムが走るのは一緒です。
軽量版は開いてすぐの所に nadesiko3.exe と README.md のみでスッキリしていたのに比べると、nadesiko3.exe どこー？ ってなりますが、良きところにショートカットを作れば良いだけなので問題はありません。
実行すると、「WindowsによってPCが保護されました」のお知らせが出ます。
大丈夫ですよ～とばかりに詳細情報をクリックして、実行します。
お知らせが出るのは最初の一回だけなので、そう邪魔くさいことはありません。
デモは軽量版と同じようですね。
カメさんがお絵かきしてくれるほか、起動、ファイル入出力、環境変数の取得など、配布キットならではの命令をお試し出来るボタンがあります。
「説明確認」のボタンがエラーなりますね
軽量版ですと、ブラウザでマニュアルのなでしこ3配布キットのページが開かれるのですが、エレクトロン版のページはまだないためでしょうか。そのうち書く～とゆう心意気の表れなんでしょうかね？
軽量版にないものとして、メニューバーがありますね❗️
ｖ１を始めた頃、メニューバーがあると本物っぽく見えるとうれしがって一生懸命作っていたのを思い出すよね🎶
なんと開発者ツールが開けるんですね。ブラウザだとF12で出てくるアレですね。軽量版だとコンソールのエラーとか見れないからあると便利ですよね。
プログラムを差し替えます
編集するファイルのありかはresources/app/webapp/main.nako3と、階層が深くなってはいますが、やること自体に変わりはありません。
main.nako3を、まるっと自分のプログラムに書き換えれば良いだけです。
あと必要に応じてindex.jsonを編集します。
注意点も、軽量版と同様です。
index.jsonでウィンドウサイズを電卓のサイズに設定。
{
"title": "電卓",
"width": 345,
"height": 530,
"port": 0,
"appid": "nadesiko3app"
}
タイトルの設定
タイトルは、やっぱりなぜか index.json に設定しても反映されないので、「なでしこ3」以外に変更したい場合は、なでしこ側で「title」にテキスト設定してやります。
# タイトル設定
「title」に「電卓」をテキスト設定。
または、index.html の <title> タグに指定したものがタイトルバーに表示されるので、htmlを直接編集してもよいでしょう。
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>電卓</title>
<link rel="stylesheet" type="text/css" href="extlib/pure-min.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
キャンバスのサイズ
今回キャンバスは使わないので、幅と高さに0を設定。
# キャンバス使わない
描画中キャンバスの「幅」に0をDOM属性設定。
描画中キャンバスの「高さ」に0をDOM属性設定。
ローディング消すの忘れず。
index.html の header という id の div にローディングのメッセージと gif が設定されていますので、それを消してやります。
# ローディング終了
「#header」に「」をテキスト設定。
できました
あとは、作成したプログラムをまるっと貼っつけてやるだけです！
で、こんな感じ？
高さをギリに設定しようとするとなぜだかスクロースバーがでちゃう💧
貯蔵庫で使う前提だったので、角丸にしたりボーダーを付けたりして電卓っぽく見えるようにしましたが、こうしてウィンドウに収まるとかえってイマイチな感じになっちゃっていますが気にしないで！
とりあえず元のままをまるっと貼り付けていますが、ボーダーを消して body にでも同じ背景色を設定すれば、下の余白も気にならなくなることでしょう。
なんだ簡単じゃん🎵 めでたしめでたし🎶
・・・と、ここでやめておけば良かったのですが・・・
折角なのでElectron版にしか出来ないことをしたい
と思ったのが運の尽きですよ
マニュアルを見ると、エレクトロン版の命令が追加されています。
👉 なでしこ3 マニュアル > plugin_electron_node
まだ、個々の命令の説明はありませんが、メニュー作ったりとかできそうな？
ところがよく見るとダウンロードしたファイルの中に plugin_electron_node.mjs は、ありません。
どうやら、v3.4.21 がリリースされた後に追加されたものラシイ。
コマンドラインから最新版をビルドする？
ならば、(詳細な方法) コマンドラインから最新版をビルドする方法で、最新版を入手するしかない？
最初に、Node.jsをインストールしてください。
はーい。入ってまーす。
コマンドライン(PowerShellまたはTerminal.app)で以下を実行しましょう。
git clone https://github.com/kujirahand/nadesiko3electron.git
cd nadesiko3electron
npm install
・・・っ！
git 入ってなかった～orz。
heroku でLINEボット作ってみたりなんだりしていた時に入れたのですが、その後PCが変わった時に、入れてなかった。
ここ からダウンロードしてインストールします。
英語だよ～😭 と泣きながらウチは64ビットだから、64-bit Git for Windows Setupをダウンロードして、読みもせずにはいはいとインストール💧
さて、改めて・・・
git clone https://github.com/kujirahand/nadesiko3electron.git
Cloning into 'nadesiko3electron'...
remote: Enumerating objects: 204, done.
remote: Counting objects: 100% (204/204), done.
remote: Compressing objects: 100% (114/114), done.
Receiving objects: 95% (194/204)used 171 (delta 87), pack-reused 0
Receiving objects: 100% (204/204), 1017.97 KiB | 4.82 MiB/s, done.
Resolving deltas: 100% (112/112), done.
できたっぽい。
cd nadesiko3electron
npm install
added 183 packages, and audited 184 packages in 16s
37 packages are looking for funding
run `npm fund` for details
1 moderate severity vulnerability
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
無事できたっぽい？
そして、webapp/main.nako3 を編集します。これがメインファイルです。 このファイルに実行したいなでしこのプログラムを記述します。
main.nako3 の中身は例のデモプログラムです。
とりあえずコレは触らずにビルドしてみます。
それで、例のデモが動くnadesiko3.exe が出来たら成功ってことですよね？
Windowsなので、
npm run build:win
> nadesiko3electron@3.4.21 build:win
> electron-packager . --icon=res/nako.ico --platform=win32 --arch=x64,ia32 --overwrite
Packaging app for platform win32 ia32 using electron v23.3.13
Packaging app for platform win32 x64 using electron v23.3.13
Wrote new apps to:
C:\Users\(ユーザー名)\nadesiko3electron\nadesiko3-win32-x64
C:\Users\(ユーザー名)\nadesiko3electron\nadesiko3-win32-ia32
できた？
nadesiko3-win32-x64 と nadesiko3-win32-ia32 とゆうフォルダができています。
ia32が32ビットでx64が64ビットという考えでいいんでしょうか。
とりあえず、nadesiko3-win32-x64 が、ダウンロードしてきたヤツと同じなので、コレで良さそう。
ところが！
nadesiko3.exeをクリックしてみても、何も起こりません。
なんでー？😭
タスクマネージャーを見ると、nadesiko3 が３つもいますよ？
しかも、タスクの終了をしても消えないという⁉️ ミステリー😱
（メモリの多いいっこが親で、ソレを終了すれば全部消えましたｗ）
（実際には「あれー？」と何度もクリックした後に開いたので、nadesiko3の大行列でビビりましたｗｗｗ しかもタスクの終了が出来なかったのでめっちゃ焦って再起動しました😅）
その後、１からやり直してみたりしたんですがうまくいかずタイムアップ！
この時点ですでに21日の0時を回っていますです。そして、文章は一行も書いてないとゆう💧
ま、当日の23:59までに提出すればギリセーフでしょ（ダメ人間）
なでしこさんじゃないけどElectron版にしか出来ないことをする
敗北して残念なまま終わるのもなんですからねー。
メニュー
開発者ツールね。開発する時にはあるととっても便利だけど、配布する時にはいらないってこともあるんじゃないの？ て思ったワケですよ。
うっかりこうゆう画面が出たらそれだけでキャー😱 てなる人もいるでしょｗ
メニューは、app の中にある menu.js で作られているようです。
メニューをアプリケーションに追加で、Menu.buildFromTemplate に配列で項目を指定しているだけなので、作るのはともかく、消すのはたやすい。
ツールの項目をまるっと削除して実行したら、無事ツールメニューの無いメニューバーで起動しました☆
また、バージョン情報開いても空ウィンドウしか表示されない？ と思ってましたが、webapp フォルダの version.html を開くことになってることが判明。
これは、なでしこさんのバージョンじゃなく、作ったアプリのバージョンってことなんですね。
そして、version.html は無いので自分で作らなきゃってことなんですね。分からんわー💧
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>バージョン</title>
<link rel="stylesheet" type="text/css" href="extlib/pure-min.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
</head>
<body>
<h1>v1.0.0</h1>
</body>
</html>
とりあえずこんなの作って置いてみたら、無事バージョンが表示されました☆
メニューも減っているのが分かりますか？
枠無し透過ウィンドウ
という裏技（？）がエレクトロンさんにはあるようです。
ちょっと奥さん‼️（誰💧）
これでｖ１のデスクトップマスコットみたいなことが出来るんじゃないですか⁉️✨
楽しげなのでやってみます。
メニューをあれこれしたのが無になりますけどね😅
app の index.js の中でウィンドウが作られています。
new BrowserWindow に フレームレスにする呪文frame: false と、透過ウィンドウにする呪文transparent: true を追加してやります。
function createWindow() {
// ブラウザ (Chromium) の起動, 初期画面のロード
let win = new BrowserWindow({
width: config.width,
height: config.height,
frame: false,//フレームレスにする呪文
transparent: true,//透過ウィンドウの呪文
title: config.title,
これだけでもう、タイトルバーやメニューバーやウィンドウの外枠が無く、電卓の角丸部分が透過された、電卓だけの状態で開きますよ！
でもこれだけだと出た位置に出っぱなしでマウスで移動させることが出来ないし、終了させるのもタスクバーからしかできません。
そこで、今度はなでしこのプログラムの方で
# ドラッグ出来るようにする
DOM親要素の「-webkit-app-region」に「drag」をDOMスタイル設定。
を追加。
これで、電卓をマウスで自由に動かすことが出来るようになり、右クリックで閉じるメニューが出るようにもなったのですが、なんとボタンが効かなくなっちゃった💧
子要素全てに継承されているのねん。
ボタンをまとめて作っているところや表示エディタ、ラジオボタンには全部「-webkit-app-region」に「なし」を設定。
コレで、ボタンも押せるようになり、それ以外の所では電卓をドラッグ出来るようになりました☆
どうでしょう～。角が透過されてるって分かりますか～？
分かりやすいよう、角丸を強くしてみたんですが～。
ウチのニャンコを見せたい画像でなんかスミマセン😅🙏
（おまけ）テンキーで操作したい
でもなー、ワタクシこれはスマホで使うつもりでアレしてたわけですよ。
デスクトップで使うなら、やっぱりテンキーで打てなきゃね！
というわけで、キー押した時のイベントを使います。
👉 なでしこ3 マニュアル > plugin_browser/キー押時
キーボードの並びとかもあるので、対応表で任意に設定出来るようにしておきます。
# キーボード操作用
キー対応表＝{
"+":"＋", "-":"−", "*":"×", "/":"÷", "Enter":"＝", ".":".",
"Home":"+/-", "End":"％", "PageUp":"税抜", "PageDown":"税込",
"Escape":"AC", "Delete":"CE", "Backspace":"▶"
}
DOCUMENTをキー押した時には、
S＝押されたキー。
もし、（Sを数字か判定）＝はいならば、
Sのキー処理。直前キー＝S。
ここまで。
キー対応表を反復
もし、S＝対象キーならば、
対象のキー処理。直前キー＝対象。
ここまで。
ここまで。
ここまで。
できました。いい感じ？
・・・と、思ったら！
キーだけで打っている時には一見良いのですが、「＝」をENTERに割り当てているため、ひとたびマウスを使ってボタンを押すと、そのボタンにフォーカスが行くためエンターキーを押した時、そのボタンが押ささってしまうのねん😓
でも、テンキーの配置から言って、「＝」はエンター以外あり得ないでしょ？！
なにやってんだよワタシ💧
さっさと終了にしとけば良かったんだよワタシ💧💧
時間が無いんだって言ってんじゃん～💦💦💦
とりあえず、マウス離した時で、そのボタンからフォーカスが外れればいいんだよね。
ケンサクしてじゃばすくりぷとのじゅも～ん。
ボタン一覧[I]をマウス離した時には、
対象の「blur」を[]でJSメソッド実行。
ここまで。
focusをオンオフするのかと思ったら違った😅
なんて読むんだblur。ぶるる（違）
表示用エディタはどうすっかな。
キーボードで入力出来るようになった以上、ここに直接数値を入力することは考えられない。
キー離した時に、テキスト取得して表示用に代入することになっているのは、どっかから数値をコピペすることを想定しているものと思う。
クリックしたら選択状態にしちゃっていいかな？
そして、キー離した時にフォーカスを外せばＯＫ？
表示用エディタのキー離した時には
F表示用＝表示用エディタからテキスト取得。
対象の「blur」を[]でJSメソッド実行。
ここまで
表示用エディタをクリックした時には
対象の「select」を[]でJSメソッド実行。
ここまで
ラジオボタンはフォーカスが当たっていても入力に影響しないようなので、そのまま。
おわります！
できました！！
なんとか間に合いそう！！！
とゆうかんじでうやむやになりかかっていますが、コマンドラインから最新版をビルドするのはうまくいきませんでしたorz
ワタクシが無能なのか、あるいは最新版に何か不備があるのか？ よく分かりませんが、リリースされた物をダウンロードして使う分には軽量版とほとんど変わらず、とっても簡単であるということが分かりました☆