la vie libre
タイトル通りですが、アプリ起動時に以下のようなポップアップが表示されます。アプリそのものは動くのですが、以下の例だとelectron-logファイル見つからないよと言ってます。
じゃその、electron-logファイルどこになるのかと言うとnode_modulesディレクトリに存在しています。全体のディレクトリ構造は以下の通り。
エラーはelectronディレクトリでmove_catディレクトリのアプリをパッケージにしようとした時に発生しています。
で、move_catディレクトリの必要ファイルをelectronディレクトリにコピーして、electronディレクトリの上の階層からelectron-packgerで作成すると問題なく作成できました。当然**-arm64は上の階層に作成されます。
つまり、アプリ関連ファイルとnode_modulesディレクトリは同じ階層にないとパッケージに組み込まれないと言うことですね。
admin
Scratchもブロック言語をJavascriptで解釈して実行しているようなので、ScratchでできることはJavascriptでもできるし、おそらく逆も真。
と言うことで基本的な要素だけ盛り込んだサンプルを作ってみました。
ソースコード、package.jsonはとりあえず無関係でhtmlとjsファイルの二つだけです。ネコスプライトと背景画像はIP関連が不明なのでアップしてません。
<html>
https://github.com/chateight/electron/blob/master/index.html
<java script>
https://github.com/chateight/electron/blob/master/control.js
動かしてみると、
start/stopボタンでイベントリスナー登録していますが、startボタンで関数実行時にリスナー解除して、複数押しができないようにしています。もし複数押しを可能にするとネコスプライトの動きが加速されます。複数のスレッドが走るような状況になるんでしょう。
// constnt & variables
let xmin = 0; // set moving area
let ymin = 0;
let xmax = 800;
let ymax = 350;
let x = 1; // position integer
let y = 1;
let x_px = ""; // position string "px"
let y_px = "";
let dir_x = 1; // moving direction
let dir_y = 1;
let int_id; // setInterval ID
//
// interval timer start function
const tmr = () => {
int_id = setInterval(move,20); // "int_id" for clear "clearInterval"
start.removeEventListener("click", tmr); // stop the listener
}
//
// move function
function move(){
const pos = document.querySelector(".img1");
if(dir_x === 1) {
x_px = x.toString() + "px";
pos.style.left = x_px;
x += 5;
if(x >= xmax) {
dir_x = 0;
pos.style.transform = "scale(-1, 1)"; // reverse the sprite
}
}
if(dir_x === 0) {
x_px = x.toString() + "px";
pos.style.left = x_px;
x -= 5;
if(x <= xmin) {
dir_x = 1;
pos.style.transform = "scale(1, 1)";
}
}
if(dir_y == 1) {
y_px = y.toString() + "px";
pos.style.top = y_px;
y += 5;
if(y >= ymax) {
dir_y = 0;
}
}
if(dir_y == 0) {
y_px = y.toString() + "px";
pos.style.top = y_px;
y -= 5;
if(y <= ymin) {
dir_y = 1;
}
}
}
//
// start from here
let start = document.querySelector(".start");
let stop = document.querySelector(".stop");
start.addEventListener("click", tmr);
stop.addEventListener("click", () => clearInterval(int_id));
P.S. 2022/9/9
コードが冗長で見苦しいのでコンパクト化して、なおかつスプライトの向きを上下移動でも変えてみました、GitHubにのみ反映です。
Electron配下のディレクトリに作成しているので、デスクトップアプリでも動作できます。
admin
Electronで各プラットホーム向けの配布用のアプリを作成するのにWineのインストールが要求（具体的にはWindows用のはず）されますが、じゃWineって何？なのかというとWindows用のAPIを提供して、Windows OS以外でWindows用のアプリケーションを完全互換では無いけれども動かせるオープンソースのアプリケーションのようです。
MacbookでElectronからアプリ起動してもWineが立ち上がるようなので、使い方はいまいちリサーチ必要。
admin
初めてのelectron、ほぼ以下のリンクのままですが
https://www.materializer.co/lab/blog/66
electronって何なの？ => “Build cross-platform desktop apps with JavaScript, HTML, and CSS”
とelectronのトップページに出ています。
Node.jsがインストールされている前提で、
npm(Node.jsのパッケージ管理)でelectronをインストール、ただし既にインストール済みでした。VScodeあるから？
% npm -v
8.18.0
・実行は作成したプロジェクトの一つ上のディレクトリで、例えば以下のディレクトリ構成でfirst_porjectを実行するならば、
/electron/first_project
/electronディレクトリでコマンド実行
% electron first_project
・ログの取り方はelectron-logをインストールしてファイルに書き出すようにする
% npm install electron-log
こんな感じで使います、
const log = require(‘electron-log’);
log.info(‘Hello, log’);
ログファイルの場所は、
# cat ~/Library/Logs/electronのプロジェクト名/main.log
・配布用の実行ファイル作成はelectron-packager使いますが、なぜか”Error: Cannot find module ‘electron-log’”と言うエラーメッセージウインドーが表示されます。
アプリの実行結果は、こんな感じで間伸びした画面、ほぼ中身ないから。
<Node.jsについての説明>
Node.jsはJavaScript用のサーバー機能を提供、electronではChromium（以下の通り）と一緒に使います。
“Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.”
P.S. 2022/9/10
electronのインストールはローカルインストールにすべきだと
-gオプションでインストールすると将来版数がアップされた時に互換がなくなると管理できなくなるからローカルでインストールすべきと。
・ローカルインストール
% npm install -save-dev electron
・実行
% npx electron <ターゲットディレクトリ>
npxはローカルインストールしたモジュールを実行するためのコマンドです。
admin
およそ一月半前に購入の書籍、一通り読了、読むんじゃなくて自分でコード書いてみるのがポイントですが。
https://isehara-3lv.sakura.ne.jp/blog/2022/07/24/今時のjava-scriptを知るための本/
個人的にはHTMLをクライアント側で処理すると言う使い方よりは、サーバーサイドあるいはデスクトップアプリでの使い方に興味があります。
それらの使い方では動作環境としてはNode.jsになるんでしょうけれども、そもそもVScodeもNode.js使っているのは初めて知りました。従ってデスクトップアプリならElectron（開発はGitGub）の選択になるのでしょう。
Node.jsの拡張パッケージ使えばTypeScriptも扱えるようですね。
admin
Javascriptは他の言語に比べると、ちょっと仕様が違うよねと言うところがありますが、それはwebページ向けに使われ始めたと言う歴史的なものがあるだろうと思う。そのためか感覚的にはPHPにも似たところがあるようにも思う。
ところでJavascriptには関数宣言と関数式がありますが、どちらかと言うと関数式の方が使われるらしい。
関数式はhoisting（関数を使う前に宣言しなくとも呼び出せる）が出来ないことによってバグの余地が少なくできる（変数や関数の宣言を先頭でまとめてやることを強制できる）と言うのが理由のようです。
以下の例でも、”move1()”以下のスクリプトを”const move1 =・・・”の前に配置すると実行できませんからhoistingは無効になってます。
例えば、move2()は以下のように関数宣言で記述しても結果は同じだろうけども、関数式の方が変数宣言としての統一性はあるように思えるから。
function move2(){ moveElement( () => {
const mov_to = document.querySelector(".title2");
mov_to.after(src);
})};function moveElement( callback ) { // works as a Promise factory
return () => new Promise( resolve => {
setTimeout(() => {
callback();
resolve(); }, 3000);
});
}
const src = document.querySelector("#source");
const move1 = moveElement( () => {
const mov_to = document.querySelector(".title2");
mov_to.prepend(src);
});
const move2 = moveElement( () => {
const mov_to = document.querySelector(".title2");
mov_to.after(src);
});
const move3 = moveElement( () => {
const mov_to = document.querySelector(".wrap");
mov_to.append(src);
});
const move4 = moveElement( () => {
const mov_to = document.querySelector("li");
mov_to.after(src);
});
move1()
.then( move2 ) // move2 ~ move4 returns Promise instance too
.then( move3 )
.then( move4 );本来的にマルチプロセスができない、今のJavascriptで非同期処理を実現するためにはPromiseの役割は大きいだろうから、標準で使われるオブジェクト。
admin
ほぼ一年前に作ったco2測定データロガー、webでも結果が見れるようにしているのですがリフレッシュを自動でしないので、ブラウザで更新しないといけないから多少不便。リロード指定でもできるけれどもスマートさが無い、実行時間などで実際にはこの程度のページならなんら問題ないにしても。
と言うことでAjax使って自動更新するようにしてみた。
実行は、jqueryを使うのがコード量が少なくて良いだろう。
・全体の構成は、DBから計測値取得のphpファイルは複数箇所から呼び出すから別ファイル(data_read.php)にする。
・Apache document rootは/var/www/html/だから、
$ cp index.php /var/www/html/
のようにユーザエリア内のコード修正後はユーザディレクトリからコピーする。
やったことは以下の二点
① DBから定期的に最新の測定値を読み出して、測定値タグのclassに書き込み
② スタイルシートを同時にjsで変更してやる
の二点です。
過去のブログはこの辺り、
現状のソースコードは、
https://github.com/chateight/co2_sensor/tree/main/co2_sensor
P.S. (2022/8/31)
jsのコードがスマートさに欠ける（特にスタイルシート変更部分）ので修正。
admin
スプレッド演算子の数値が、展開されると勝手に二倍の値になる。以下のJavascriptの切り出しコードで、最初の展開で二倍、さらに二回目の展開でも二倍されてます。
以下のソースは切り出した部分。
let num = [108, 210, 398];
let marge = [...num, 300, 400, 500];
console.log(marge); // [216, 420, 796, 300, 400, 500] ??
console.log(Math.max(...marge)); // 1592 ?? = 796*2
ChromeでもSafariでも同じだし、不思議な現象。まあ、そのうち解決（原因判明）するんだろうと思うけど。
P.S. (2022/8/22)
同じソース内で、配列iteratorを配列の値を二倍するiteratorでオーバーライドしていたから、つまりスプレッド演算子は実は内部的な処理はiteratorで展開されるということですね。
Array.prototype[ Symbol.iterator ] = function (){
let index = 0;
let set = this;
return{
next(){
if (index <set.length){
return{
done: false,
value: set[ index++ ]*2
}
}
else{
return{
done: true
}
}
}
}
}
admin
効率の低い、プラコップスピーカーのドライブ用にスイッチサイエンスから購入のパワーアンプ、電池駆動なので出力最大は１W程度ですが十分です。
キットになっていて、ハンダ付の難しいsmt部品のアンプNCP2890D（検索するとonsemi製）だけは実装済みで、他のディスクリートの抵抗、キャパシタなどは自分で実装します。回路そのものはNCP2890Dのリファレンス回路ですが。
電源は単三二本ですが、電源スイッチは無いので電池の抜き差しで対応。
最初C3付け忘れて、やたらにハム音デカくて変だと思いましたがC3つけると普通に機能しました。
まあ、こういう物も一個あれば色々な場面で使えそうです。
admin
購入後おそらく15ヶ月ぐらいだと思うけど、ローバッテリー表示がiPhoneに表示されました。
電池はCR2032なので、概ね妥当と言えば妥当。使い方で変わってくると思いますがBLEだろうから、それほどの差は出ないでしょう。
P.S.
電池の解放電圧が2.9Vぐらいだったから、他（歩数計）でも使い用がないレベルに放電してました。
admin