package.json

node - electron

Macでnodeやelectronをいじっていて勉強したことを書いています。

package.json, package-lock.json conflict
Electronのインストール
Electron_Renderer
MontereyのApacheでDocumentRootを移動する
Montereyにphpをインストール

package.json, package-lock.json conflict

2020.01.12

GuithubでForkしたリポジトリ（node.jsで書かれている）を更新しようとして、package.json、package_lock.jsonがコンフリクトしてしまいました。その結果、パッケージインストール（npm i）がエラーになってしまって解決に１日を費やしてしまいました。私の環境は以下の通りです。

C:\Users\user>node -v
v14.15.3
C:\Users\user>npm -v
6.14.9

やりたかったこと。数年前に参考にしたいGithub上のリポジトリを、自分のリポジトリへForkしました。オリジナルをMaster、Fork先をDevelopとします。その後、Developは自身で多少ファイルを編集、追加しています。数年経つとMasterはオリジナルの作者がバグ修正や機能追加をしていますので、これをマージしておきたいと思い立ちました。

手順は以下の通り、リモートリポジトリを追加し、フェッチの後マージしています。何事もなければ…

>git remote add root_branch https://github.com/Master/xxxxxxxx.git
>git remote -v #リモートの確認
>git fetch root_branch
>git merge root_branch/develop #Developのリポジトリ

ところが、package-lock.jsonでコンフリクトが発生してしまいました。

>git merge root_branch/develop
Auto-merging package-lock.json
CONFLICT (content): Merge conflict in package-lock.json
Automatic merge failed; fix conflicts and then commit the result.

package-lock.jsonって何？は、https://qiita.comを参照させていただきました。無視していいけど消してはダメ、というファイルとのことです。具体的には、npm install によって実際にインストールしたパッケージのバージョンのみが記載されているとのこと。

コンフリクトの解決策としては、add, commit すればOKでした。

>git add package-lock.json
>git commit -m"package-lock"

次に、package.jsonでもコンフリクトが発生してしまいました。

> npm i
npm WARN conflict A git conflict was detected in package-lock.json. Attempting to auto-resolve.
npm WARN conflict To make this happen automatically on git rebase/merge, consider using the npm-merge-driver:
npm WARN conflict $ npx npm-merge-driver install -g
audited 12345 packages in 6.789s
found 0 vulnerabilities

この場合、package.jsonを編集するのが近道です。https://qiita.com を参照させていただきました。ローカルのコードを消して、マージするコードのもを残します。

<<<<<<HEAD # 消す
 # 消す
[ローカルブランチのコード] # 消す
 # 消す
======= # 消す

[マージするブランチのコード]

>>>>>>> # 消す

ここまでで、npm initができるようになりました。

Electronのインストール

2020.01.23

Electron を次の環境でインストールした時の記録です。Electronとは、Chrome のエンジンであるWebkitとNote.jsでアプリケーションを生成するソフトウェアフレームワークです。HTML, CSS, javascript を使ってWebアプリケーションを作ると、Electronを使って、WindowsやMacのアプリケーションを作ることができます。

インストールした環境
mac 10.15.7
node v14.15.3
Python 3.6.6

特殊事情として、プロキシの設定をしないとなりませんでした。npm の configuration ファイルに、プロキシを設定します。こちらの記事を参考にしました。

> npm -g config set proxy http://proxyserver.com:8080
> npm -g config set https-proxy http://proxyserver.com:8080

次のコマンドでconfigurationを確認できます。

> npm config list 
https-proxy = "http://proxyserver.com:8080/"
proxy = "http://proxyserver.com:8080/"

Electron をインストールするのは環境変数の設定が必要との記事を見つけましたので、設定しました。bash_profileに２行追加しました。

export ELECTRON_GET_USE_PROXY=true
export GLOBAL_AGENT_HTTPS_PROXY=http://proxyserver.com:8080/

普通にnpmでインストールしようとするとエラーになります。

>npm -g install electron
npm ERR! code EACCES 
npm ERR! syscall access 
npm ERR! path /usr/local/lib/node_modules 
npm ERR! errno -13 
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/ node_modules'
npm ERR! [Error: EACCES: permission denied, access '/usr/local/lib/ node_modules'] { 
npm ERR! errno: -13, 
npm ERR! code: 'EACCES', 
npm ERR! syscall: 'access', 
npm ERR! path: '/usr/local/lib/node_modules' 
npm ERR! } npm ERR! 
npm ERR! The operation was rejected by your operating system. 
npm ERR! It is likely you do not have the permissions to access this file as the current user 
npm ERR! n
pm ERR! If you believe this might be a permissions issue, please double-check the 
npm ERR! permissions of the file and its containing directories, or try running 
npm ERR! the command again as root/Administrator. 
npm ERR! A complete log of this run can be found in: 
npm ERR! /Users/user/.npm/_logs/2021-01-14T23_44_19_893Z-debug.log

sudo でインストールしてもエラーになります。

>sudo npm -g install electron
Error: EACCES: permission denied, mkdtemp '/usr/local/lib/node_modules/ electron/electron-download-GSvBrh'
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! electron@11.2.0 postinstall: `node install.js`
npm ERR! Exit status 1
npm ERR!
}
The operation was rejected by your operating system.
It is likely you do not have the permissions to access this file as the
npm ERR! Failed at the electron@11.2.0 postinstall 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! /Users/user/.npm/_logs/2021-01-14T23_47_29_664Z-debug.log

インストールに成功したコマンドは以下でした。unsafe-permはroot権限で動作させることを許可するフラグ、allow-rootも同じような意味に思えますが、情報を見つけることができませんでした。

> sudo npm install -g init
> sudo npm install -g electron --unsafe-perm=true --allow-root 
> electron -v
v11.2.0

ElectronのRenderer

2021.12.26

ElectronのRendererを使って見た記録です。node v14.16.0, electron v13.6.3 を使っています。インストールするのは環境変数の設定が必要との記事を見つけましたので、設定しました。bash_profileに２行追加しました。 Electronの本家のページによると、「Electron は Chromium のマルチプロセスアーキテクチャを継承しており、フレームワークのアーキテクチャは最新のウェブブラウザに酷似しています。」とのこと。２つのプロセスの間でメッセージをやり取りすることができます。メインプロセスとレンダーラープロセスとします。以下のページを参考にしています。その他にもElectron, Rendererで検索すると有用なページを見つけることができます。

この作業において困ったことは、１）main.jsとは別のrenderer.jsを用意したところレンダラープロセスでrequire(electron)が機能しなかったこと。２）レンダラープロセスでconsole.logが機能しなかったこと、３）console.logが機能した後、セキュリティエラーが発生したことです。

１）については、Electronでページを立ち上げる時のオプションを以下のように設定することで解決しました。

  webPreferences: {
    nodeIntegration: true,
    contextIsolation: false,
    enableRemoteModule: true
  }

nodeIntegration: trueは、RendererプロセスからNode.jsの機能へのアクセスを制限しない宣言をしています。あれこれ調べてみると、セキュリティー的によろしく無いようなのですが、今回は試しということでtrueにしています。

contextIsolation: falseもセキュリティー的によろしく無いようなのです。 main.js と、BrowserWindowで読み込まれるページのjavascriptを分離しない、すなわち同じ土俵で実行するとしています。

enableRemoteModule: trueリモートモジュールを使う、と設定しています。この３つはすべて非推奨な設定ですのでElectronのバージョンを新しくすると動作しないかもしれません。

２）についてはrenderer.jsの先頭に以下の行を入れることで解決しました。

  console = require('electron').remote.require('console');

３）もセキュリティの問題のようです。発生するエラーは以下です。

  Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
      Policy set or a policy with "unsafe-eval" enabled. This exposes users of
      this app to unnecessary security risks.

  For more information and help, consult
  https://electronjs.org/docs/tutorial/security.
  This warning will not show up
  once the app is packaged.

こちらはrenderer.jsの先頭に以下の行を入れることで解決しました。

  process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = '1';

Example

今回作成したExampleプログラムは以下の図ようなモノです。main.jsとrenderer1.js, renderer2.jsで通信をしています。 Kisaragi, Mutsukiは同じレンダラープロセスの関数です。２つの.jsファイルは、index.htmlで読み込んでいます。

サンプルファイルがGithub に置いてあります。

MontereyのApacheでDocumentRootを移動する

2022.04.03

MacのOS、Montereyに付属しているApacheを使う上で、DocumentRootの変更に手こずったので記録します。Apacheは次のコマンドでスタートすることができます。

> sudo apachectl start

ブラウザで http://localhost をアクセスすると、It works! と表示されると思います。この時のindex.html は以下のディレクトリに保存されてれいます。このディレクトリがホームディレクトリ(DocumentRoot)ということになります。

/Library/WebServer/Documents

htmlやjavascriptを開発しようとするとき、なにかと不都合があります。一つはこのディレクトリにファイルを書き込みしようとするとパスワードを求められます。また、ディレクトリをもう一階層深くした場合には、ブラウザからアクセスすることができません。ディレクトリの階層については、こちらで解決策が示されています。

ここでやりたいのは、DocumentRootを移動することです。DocumentRootを書き込みが楽にできるように/Users/UserName/Sites/HPへ移動します。参考にしたのは、こちらのサイトです。移動するだけであれば全部やらなくても大丈夫です。

httpd.confを編集します。httpd.confはコンソールでvi もしくはvim で編集します。
```
>sudo vim /etc/apache2/httpd.conf
```

184行目、mod_userdir.soを読み込む行のコメントを消します。

#LoadModule userdir_module libexec/apache2/mod_userdir.so
↓
LoadModule userdir_module libexec/apache2/mod_userdir.so

253行目

DocumentRoot "/Library/WebServer/Documents"
↓
DocumentRoot "/Users/UserName/Sites/HP"

254行目

<Directry "/Library/WebServer/Documents">
↓
<Directry "/Users/UserName/Sites/HP">

以上でhttpd.confの編集は終わりです。

次のコマンドが肝です。先のサイトによると

macOS12「Monterey」には新しいセキュリティデフォルトがあります。デフォルトでは、他のユーザーは他のユーザーのホームディレクトリにアクセスできません。これには、ApacheWebサーバーを実行している特別な「_www」ユーザーが含まれます。次のコマンドを実行して、ApacheWebサーバーにホームディレクトリのSitesフォルダへのアクセスを許可します。

とのことです。次のコマンドを実行します。
```
> chmod +a "_www allow execute" ~↓
```
/Users/UserName/Sites/HPの下にindex.htmlを作成し、Apacheをリスタートします。
```
> sudo apachectl restart
```
これで、ブラウザからlocalhostをアクセスすると、/Users/UserName/Sites/HPの下のindex.htmlが見えていると思います。

Montereyにphpをインストール

2022.09.24

Montereyにはphpが付属していません。ですので使いたい時にはインストールしないとなりません。設定でかなり悩みましたので記録しておきます。一番参考になったサイトはこちらです。Apatchは既に起動しているものとします。
macOS MontereyでApacheとPHPを動かす
 【macOS 12 Monterey】コード署名証明書によるPHPモジュール有効化

まずはphpをインストールします。PHP8系とPHP7系があるようなのですが、7系の説明を先に見つけたのでこちらをインストールします。

>brew install php@7.4

phpがどこにあるか調べます。PATHにphpの場所を追加します。

> which php
/usr/local/opt/php7.4/bin/php
> sudo echo 'export PATH="/usr/local/opt/php7.4/bin/php:$PATH"' >> ~/.zshrc

コンソールを立ち上げなおします。立ち上げなおすことで.zshrcが起動しPATHが設定されます。phpのバージョンを確認します。

> php -v
PHP 7.4.30 (cli) (built: Sep  4 2022 09:01:37) ( NTS )
Copyright (c) The PHP Group
Zend Engine v3.4.0, Copyright (c) Zend Technologies
    with Zend OPcache v7.4.30, Copyright (c), by Zend Technologies

キーチェーンアクセスで認証局とコード署名証明書を作成します。名前をtoPHPとしておきます。

作成ボタンを押すと次のような画面が表示されます。赤ボタンで閉じてしまって良いです。

ログイン（左）証明書（上）のメニューで赤い×のついたtoPHPが見えると思います。

このtoPHPをクリックすると、下のように「ルート認証局」、赤文字で「このルート証明書は信頼されていません。」と表示されます。

「信頼」というタグを開きます。この証明書を使用するとき、を「常に信頼」に変更します。変更後、赤ボタンで閉じて下さい。

証明書は/usr/<username>/Library/Keychains/にあります。またlibphp.soの場所を調べます。 libphp.soはphpのバージョンによってディレクトリ名、ファイル名が変わります。

/Users/<username>/Library/Keychains/login.keychain-db
/usr/local/Cellar/php@7.4/7.4.30_1/lib/httpd/modules/libphp7.so

証明書とphpを結びつけます。

> codesign --sign "toPHP" --force --keychain /Users/<username>/Library/Keychains/login.keychain-db /usr/local/Cellar/php@7.4/7.4.30_1/lib/httpd/modules/libphp7.so

Apatchを再起動します。

> sudo apachectl restart