メソッドは、オブジェクトが行う動作(振る舞い)のこと。他のオブジェクト指向言語でいう、メンバ関数のこと。
これまで出てきた、window.alert()もメソッドだし、これからやるwindow.open()もメソッド。
メソッドであるwindow.openでウィンドウを開き、指定のURLをロード。
bgstation0.comのトップ。
以前、bodyでやったbody.htmlを表示しておいてから、method.htmlにアクセスする。
アクセスするとポップアップブロックされた。
一時許可する。
別のウィンドウを開いた。(ウィンドウというか実際はタブなのだが。)
Sample/js/method/method/src/method at master · bg1bgst333/Sample · GitHub
Electronは、Web技術でデスクトップアプリケーションをつくることができるフレームワーク。
Electron | Build cross platform desktop apps with JavaScript, HTML, and CSS.
appオブジェクトは、アプリケーションライフサイクルを管理する。
とりあえずElectronを試してみる。
まず、アプリのディレクトリを作ったら、npm initでpackage.jsonをつくる。
$ pwd
/home/bg1/project/cloud/github.com/Sample/electron/app/app/src/app_
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (app_) app_
version: (1.0.0) 1.0.0
description: electron sample
entry point: (index.js) main.js
test command: start
git repository: -
keywords: -
author: B.G
license: (ISC) MIT
About to write to
/home/bg1/project/cloud/github.com/Sample/electron/app/app/src/app_/package.json:
{
"name": "app_",
"version": "1.0.0",
"description": "electron sample",
"main": "main.js",
"scripts": {
"test": "start"
},
"repository": {
"type": "git",
"url": "-"
},
"keywords": [
"-"
],
"author": "B.G",
"license": "MIT"
}
Is this OK? (yes) yes
$まだ少し修正する部分が残ってるので、それは後で編集する。
index.jsではなく、main.jsにしている。
main.jsは、
app.onでイベントごとに、どういう処理をするかを定義している。
'ready'で、ウィンドウ作成とか、index.htmlを読み込むとか。
index.htmlは、
process.versions.electronはElectronのバージョンを指す。
これをdocument.writeで出力。
あとは"ABCDE"と書いてあるHTMLページ。
package.jsonは、
"scripts"のところの、"start"に"electron ."を指定する。
これで、npmから起動できる。
いよいよ、Electronをインストールする。
npm install electronで、
$ ls package.json $ vi main.js $ vi index.html $ ls index.html main.js package.json $ vi package.json $ npm install electron > electron@4.0.6 postinstall /home/bg1/project/cloud/github.com/Sample/electron/app/app/src/app_/node_modules/electron > node install.js Downloading tmp-3567-1-SHASUMS256.txt-4.0.6 [============================================>] 100.0% of 4.74 kB (4.74 kB/s) npm notice created a lockfile as package-lock.json. You should commit this file. + electron@4.0.6 added 145 packages from 140 contributors and audited 201 packages in 72.441s found 0 vulnerabilities ╭───────────────────────────────────────────────────────────────╮ │ │ │ New minor version of npm available! 6.4.1 → 6.8.0 │ │ Changelog: https://github.com/npm/cli/releases/tag/v6.8.0 │ │ Run npm install -g npm to update! │ │ │ ╰───────────────────────────────────────────────────────────────╯ $
Expressと同様、ローカルインストールの方が安全なのでいいとおもう。
これで、npm startで実行しようとしたら、
$ npm start > app_@1.0.0 start /home/bg1/project/cloud/github.com/Sample/electron/app/app/src/app_ > electron . /home/bg1/project/cloud/github.com/Sample/electron/app/app/src/app_/node_modules/electron/dist/electron: error while loading shared libraries: libXss.so.1: cannot open shared object file: No such file or directory npm ERR! file sh npm ERR! code ELIFECYCLE npm ERR! errno ENOENT npm ERR! syscall spawn npm ERR! app_@1.0.0 start: `electron .` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the app_@1.0.0 start script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /home/bg1/.npm/_logs/2019-03-04T14_18_14_340Z-debug.log $
謎のエラー・・・。
macだと、すんなり実行できたのだが・・・。
色々調べると、
Fails to run, libXss.so.1 missing on Fedora 25 · Issue #835 · balena-io/etcher · GitHub
ということらしいので、libXScrnSaver-develを入れてみる。
$ sudo dnf install libXScrnSaver-devel
メタデータの期限切れの最終確認: x:xx:xx 時間前の xxxx年xx月xx日 xx時xx分xx秒 に実施しました。
依存関係が解決しました。
===================================================================================================================================================
パッケージ アーキテクチャー バージョン
リポジトリ サイズ
===================================================================================================================================================
インストール:
libXScrnSaver-devel x86_64
1.2.3-2.fc29 fedora
17 k
依存関係をインストール中:
libX11-devel x86_64
1.6.6-1.fc29 fedora
974 k
libXScrnSaver x86_64
1.2.3-2.fc29 fedora
24 k
libXau-devel x86_64
1.0.8-14.fc29 fedora
14 k
libXext-devel x86_64
1.3.3-10.fc29 fedora
73 k
libxcb-devel x86_64
1.13.1-1.fc29 fedora
1.1 M
xorg-x11-proto-devel noarch
2018.4-2.fc29 fedora
280 k
トランザクションの概要
===================================================================================================================================================
インストール 7 パッケージ
ダウンロードサイズの合計: 2.4 M
インストール済みのサイズ: 5.5 M
これでよろしいですか? [y/N]: y
パッケージのダウンロード中です:
(1/7): libXScrnSaver-devel-1.2.3-2.fc29.x86_64.rpm
7.9 kB/s | 17 kB
00:02
(2/7): libX11-devel-1.6.6-1.fc29.x86_64.rpm
404 kB/s | 974 kB
00:02
(3/7): libXScrnSaver-1.2.3-2.fc29.x86_64.rpm
9.7 kB/s | 24 kB
00:02
(4/7): libXau-devel-1.0.8-14.fc29.x86_64.rpm
22 kB/s | 14 kB
00:00
(5/7): libXext-devel-1.3.3-10.fc29.x86_64.rpm
130 kB/s | 73 kB
00:00
(6/7): libxcb-devel-1.13.1-1.fc29.x86_64.rpm
879 kB/s | 1.1 MB
00:01
(7/7): xorg-x11-proto-devel-2018.4-2.fc29.noarch.rpm
307 kB/s | 280 kB
00:00
---------------------------------------------------------------------------------------------------------------------------------------------------
合計
548 kB/s | 2.4 MB 00:04
トランザクションの確認を実行中
トランザクションの確認に成功しました。
トランザクションのテストを実行中
トランザクションのテストに成功しました。
トランザクションを実行中
準備 :
1/1
Installed: xorg-x11-proto-devel-2018.4-2.fc29.noarch
インストール中 : xorg-x11-proto-devel-2018.4-2.fc29.noarch
1/7
Installed: xorg-x11-proto-devel-2018.4-2.fc29.noarch
Installed: libXau-devel-1.0.8-14.fc29.x86_64
インストール中 : libXau-devel-1.0.8-14.fc29.x86_64
2/7
Installed: libXau-devel-1.0.8-14.fc29.x86_64
Installed: libxcb-devel-1.13.1-1.fc29.x86_64
インストール中 : libxcb-devel-1.13.1-1.fc29.x86_64
3/7
Installed: libxcb-devel-1.13.1-1.fc29.x86_64
Installed: libX11-devel-1.6.6-1.fc29.x86_64
インストール中 : libX11-devel-1.6.6-1.fc29.x86_64
4/7
Installed: libX11-devel-1.6.6-1.fc29.x86_64
Installed: libXext-devel-1.3.3-10.fc29.x86_64
インストール中 : libXext-devel-1.3.3-10.fc29.x86_64
5/7
Installed: libXext-devel-1.3.3-10.fc29.x86_64
Installed: libXScrnSaver-1.2.3-2.fc29.x86_64
インストール中 : libXScrnSaver-1.2.3-2.fc29.x86_64
6/7
Installed: libXScrnSaver-1.2.3-2.fc29.x86_64
Installed: libXScrnSaver-devel-1.2.3-2.fc29.x86_64
インストール中 : libXScrnSaver-devel-1.2.3-2.fc29.x86_64
7/7
Installed: libXScrnSaver-devel-1.2.3-2.fc29.x86_64
scriptletの実行中: libXScrnSaver-devel-1.2.3-2.fc29.x86_64
7/7
検証 : libX11-devel-1.6.6-1.fc29.x86_64
1/7
検証 : libXScrnSaver-1.2.3-2.fc29.x86_64
2/7
検証 : libXScrnSaver-devel-1.2.3-2.fc29.x86_64
3/7
検証 : libXau-devel-1.0.8-14.fc29.x86_64
4/7
検証 : libXext-devel-1.3.3-10.fc29.x86_64
5/7
検証 : libxcb-devel-1.13.1-1.fc29.x86_64
6/7
検証 : xorg-x11-proto-devel-2018.4-2.fc29.noarch
7/7
インストール済み:
libXScrnSaver-devel-1.2.3-2.fc29.x86_64
libX11-devel-1.6.6-1.fc29.x86_64
libXScrnSaver-1.2.3-2.fc29.x86_64
libXau-devel-1.0.8-14.fc29.x86_64
libXext-devel-1.3.3-10.fc29.x86_64
libxcb-devel-1.13.1-1.fc29.x86_64
xorg-x11-proto-devel-2018.4-2.fc29.noarch
完了しました!
$ということで、改めて実行。
$ npm start > app_@1.0.0 start /home/bg1/project/cloud/github.com/Sample/electron/app/app/src/app_ > electron .
これで待ち受け状態となり、
このように表示される。
Sample/electron/app/app/src/app_ at master · bg1bgst333/Sample · GitHub
GetClientRectは、ウィンドウのクライアント領域の矩形情報を取得する。
GetClientRect function | Microsoft Docs
GetWindowRectでは、デスクトップ画面の左上を原点とするスクリーン座標だったが、GetClientRectの場合は、左端、上端は0に固定されていて、実質、右端、下端、の数値がサイズ(幅と高さ)も表している。
さて、WM_SIZEも、リサイズ後のクライアント領域のサイズ(幅と高さ)を表していることは以前扱った。
つまり、この2種類の方法で取得した矩形情報は同じ値になるはずである。
WM_SIZEで、
rcWmSizeには、WM_SIZEで渡されたlParamから幅と高さをセットしている。
rcClientは、GetClientRectで取得している。
そのあと、InvalidateRectで画面更新。
WM_PAINTでは、
WM_SIZEで取得したrcWmSizeは、赤で描画。
GetClientRectで取得したrcClientは、青で描画。
起動時、値は一緒。
小さくしても一緒。
再度少し横に広げても一緒、全く同じである。
Sample/winapi/GetClientRect/GetClientRect/src/GetClientRect at master · bg1bgst333/Sample · GitHub
Expressは、Node.jsにおける軽量Webアプリケーションフレームワーク。
Express - Node.js Web アプリケーション・フレームワーク
ゼロからはじめるExpress + Node.jsを使ったアプリ開発 - Qiita
これで簡易Webサーバを作ってみる。
これまでは、グローバルでインストール(npm install -g)が多かったが、ここではローカルインストールとする。
まずは、npm initでローカルパッケージ管理できるようにする。
$ pwd
/home/bg1/project/cloud/github.com/Sample/express/express/express/src/express_
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (express_) express_
version: (1.0.0) 1.0.0
description: express sample
entry point: (index.js) index.js
test command: test
git repository: -
keywords: -
author: B.G
license: (ISC) MIT
About to write to
/home/bg1/project/cloud/github.com/Sample/express/express/express/src/express_/package.json:
{
"name": "express_",
"version": "1.0.0",
"description": "express sample",
"main": "index.js",
"scripts": {
"test": "test"
},
"repository": {
"type": "git",
"url": "-"
},
"keywords": [
"-"
],
"author": "B.G",
"license": "MIT"
}
Is this OK? (yes) yes
$mainはとりあえずindex.jsにしておく。
これでpackage.jsonができたとおもうので、Expressをインストール。
$ npm install express npm notice created a lockfile as package-lock.json. You should commit this file. + express@4.16.4 added 48 packages from 36 contributors and audited 121 packages in 4.512s found 0 vulnerabilities $ ls node_modules package-lock.json package.json $
では、index.jsを書く。
requireで取得したexpressはこれ自体が関数の参照になっていて、express()でappオブジェクトが取得できる。
あとは、app.getで、「GETの'/'でアクセスしてきたら'ABCDE'を返す」、といったようなリクエストルーティングが簡単に書ける。
あとは、app.listenで3000番でリッスンする。
$ vi index.js $ node index.js Listen port number 3000
あとはlocalhostの3000にアクセスする。
このように'ABCDE'を返す簡易Webサーバができた。
Sample/express/express/express/src/express_ at master · bg1bgst333/Sample · GitHub
GetWindowRectは、ウィンドウの矩形情報(位置情報やサイズ)を取得する。
GetWindowRect function | Microsoft Docs
WindowProcのWM_MOVE、WM_SIZEで、
GetWindowRectで、スタティックなRECT構造体rcWndにウィンドウの矩形情報を格納する。
デスクトップ画面の左上を原点とするスクリーン座標で左端、上端、右端、下端、の位置が格納される。
そのあとに、InvalidateRectで画面を更新。
WM_PAINTは、
テキストは赤にして、各メンバを文字列に変換して、TextOutで描画している。
InvalidateRectのたびに呼び出されるので、ウィンドウを動かしたり、ウィンドウをリサイズするたびに値が反映される。
実行直後にこうだとして、ウィンドウを左上に移動させると、
左上が原点なので、全体的に数値は小さくなる。
右下に引っ張って、ウィンドウを大きくすると、leftとtopは変わらないが、rightとbottomは大きくなる。
少し右に移動すると、leftとrightが少し増える。
Sample/winapi/GetWindowRect/GetWindowRect/src/GetWindowRect at master · bg1bgst333/Sample · GitHub
httpは、http関連モジュール。
HTTP | Node.js v11.10.1 Documentation
httpモジュールで、簡易的なWebサーバを作成する。
requireでhttpモジュール参照を取得したら、http.createServerでサーバソケットを作成。
res.writeHeadで、HTTPステータスコードに200、ヘッダ内容は、Content-Typeでtext/plainを指定するだけでいい。(この部分はJSONで随時追加していく。)
res.endでレスポンスは終わるが、そこに最後のHTTPボディメッセージが渡せるので'ABCDE\n'と渡して終わる。
で、そのままポート番号3000番でlistenし、リッスン出来たら、'Local Server Listen'を出力。
$ vi http.js $ node http.js Local Server Listen
実行すると、このように待ち受け状態になるので、ブラウザでhttp://localhost:3000/にアクセスすると、
'ABCDE'が表示される。
(ただし、しばらくポート占有しっぱなしなので、再度サーバ起動してもlistenできない。この辺の対策はいずれ・・・。)
Sample/nodejs/http/http/src/http at master · bg1bgst333/Sample · GitHub
SetBkModeは、テキストの背景モード(背景色を描画するか、背景は透過にするか)を設定する。
SetBkMode function | Microsoft Docs
WindowProcのWM_PAINTで、
背景は青、テキストは赤で、TextOutで(50, 50)の位置に描画した後、SetBkModeでTRANSPARENT(透過)にして、TextOutで(50, 100)の位置に再び描画する。
1つ目のテキストは背景の青が描画されているが、2つ目のテキストは背景が透過されているので、白いままである。
Sample/winapi/SetBkMode/SetBkMode/src/SetBkMode at master · bg1bgst333/Sample · GitHub
