admin_wp – ページ 35 – Blowing in the wind

2022年9月7日2022年9月7日

Wine

Electronで各プラットホーム向けの配布用のアプリを作成するのにWineのインストールが要求（具体的にはWindows用のはず）されますが、じゃWineって何？なのかというとWindows用のAPIを提供して、Windows OS以外でWindows用のアプリケーションを完全互換では無いけれども動かせるオープンソースのアプリケーションのようです。

MacbookでElectronからアプリ起動してもWineが立ち上がるようなので、使い方はいまいちリサーチ必要。

admin

2022年9月6日2022年10月6日

Electronのイントロ

初めての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.”

https://nodejs.dev/en/learn/

P.S. 2022/9/10

electronのインストールはローカルインストールにすべきだと

-gオプションでインストールすると将来版数がアップされた時に互換がなくなると管理できなくなるからローカルでインストールすべきと。

・ローカルインストール

% npm install -save-dev electron

・実行

% npx electron <ターゲットディレクトリ>

npxはローカルインストールしたモジュールを実行するためのコマンドです。

admin

2022年9月5日2022年9月15日

『今時のJavaScriptを知るための本』ワンパス終了

およそ一月半前に購入の書籍、一通り読了、読むんじゃなくて自分でコード書いてみるのがポイントですが。

https://isehara-3lv.sakura.ne.jp/blog/2022/07/24/今時のjava-scriptを知るための本/

個人的にはHTMLをクライアント側で処理すると言う使い方よりは、サーバーサイドあるいはデスクトップアプリでの使い方に興味があります。

それらの使い方では動作環境としてはNode.jsになるんでしょうけれども、そもそもVScodeもNode.js使っているのは初めて知りました。従ってデスクトップアプリならElectron（開発はGitGub）の選択になるのでしょう。

Node.jsの拡張パッケージ使えばTypeScriptも扱えるようですね。

admin

2022年9月2日2024年12月20日

関数宣言より関数式か

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

2022年8月30日2022年9月2日

Ajaxでco2センサーのデータ表示

ほぼ一年前に作った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://isehara-3lv.sakura.ne.jp/blog/2021/09/20/co2-センサー（ndirとは、non-dispersive-infrared（非分散型赤外））mh-z19bを/

現状のソースコードは、

https://github.com/chateight/co2_sensor/tree/main/co2_sensor

P.S. (2022/8/31)

jsのコードがスマートさに欠ける（特にスタイルシート変更部分）ので修正。

admin

2022年8月22日2022年8月25日

スプレッド演算子の挙動（なんだこれは？）=> 解決済み

スプレッド演算子の数値が、展開されると勝手に二倍の値になる。以下の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

2022年8月19日2022年8月20日