update.electronjs.orgを使って、アプリの自動更新機能をお気楽に組み込む

ElectronのautoUpdater

Electronには、アプリの新しいバージョンをダウンロードして
更新する機能が用意されています。
https://www.electronjs.org/docs/api/auto-updater


Electronアプリからこの機能を使うには本来、
最新版アプリの情報を返すアップデートサーバーが必要になるのですが、


GitHubのReleasesに最新アプリバイナリを置いているアプリ
については、
Electron公式がアップデートサーバーを用意してくれているので、
アプリ側の修正だけで、簡単に自動アップデート機能を組み込めるようになっています。


(ここだよ、ここ)


update.electronjs.org

こちらが公式が用意しているサーバーで、
update.electronjs.org (GitHubにリダイレクト)

このサーバーは、次のパターンのURLを叩くと、GitHubの最新リリースの情報を取得して返します。

https://update.electronjs.org/update/${process.platform}/${app.getVersion()}


例えば、GitHubのレポジトリが"taku-o/myukkurivoice"で、
現在実行中のアプリのバージョンが"0.13.6"だとすれば、次のURLになりますね。
このURLをブラウザで開くと、JSON形式で最新リリースのデータが返ってくるのが分かります。
https://update.electronjs.org/taku-o/myukkurivoice/darwin-x64/0.13.6

{"name":"0.13.7","notes":"- \"MYukkuriVoice について\"ダイアログの表示を修正。\r\n  - ビルド時の...


対応している環境

update.electronjs.orgで対応している環境はLinux環境以外です。
Linuxは駄目かー。そっかー、残念ですね。


macOSのアプリについては、アプリにDeveloper ID Applicationの署名が必要。
実行中のアプリ、そして、ダウンロードする更新アプリ、両方に署名が必要です。
(アプリに署名がされていないと、自動アップデートがエラーになる。)

Error: Code signature at URL file:///Users/user/Library/Caches/jp.nanasi.myukkurivoice.ShipIt/update.TdmmDN0/
MYukkuriVoice-darwin-x64/MYukkuriVoice.app/ did not pass validation: コードオブジェクトがまったく署名されていません
Error: Could not get code signature for running application


Catalinaでは、アップル公証(Notarization)も必要かも?
調べていません。
わざわざ公証の実装を外してまで検証しないよ。
面倒だからね。仕方ないね(^_^)/


更新用のアプリをReleasesに置く

更新用のアプリは、zipで固めてGitHubのReleasesに置いておきます。 https://github.com/taku-o/myukkurivoice/releases/tag/0.13.8

1. バージョン番号のReleasesタグを作る(0.13.8 とか)
2. 更新用のアプリをzip形式にしてアップロードする
3. zipファイルのファイル名は、例えば、AppName-darwin-x64.zip のような形式にする


update.electronjs.orgは、Windows環境とMac環境に対応していますが、
いくつかアップロードされているzipファイルのうち、
どのzipファイルが、どの環境用のものかは、ファイル名から判断されています。
なので、zipファイル名には、mac, darwin, win32-x64など対応環境を示す文字を入れておきましょう。

mac
darwin
osx
win32-ia32
win32-x64


Electronアプリへの組み込み(自動的に更新処理)

Electronアプリのコードにアプリ自動更新の機能を組み込みます。


npmでupdate-electron-appを入れておいて、

npm install update-electron-app

アプリ側で、このコードを呼び出す。

require('update-electron-app')()

簡単!


Electronアプリへの組み込み(任意のタイミングで更新)

上の実装は簡単なのですが、しかし、ドキュメントによると、
10分毎に更新をチェックしにいくようです。
https://www.electronjs.org/docs/tutorial/updates


なんてこった(>_<)!
そんなにアプリを頻繁に更新するわけないぞ(>_<)!
1ヶ月に1回更新できたらマシな方だ(>_<)!


そういう場合は、checkForUpdates()を手動で叩いて、
好きな頻度で更新するか、メニューから更新できるようにしたら良いでしょうな。

autoUpdater.checkForUpdates();
import {app, dialog, autoUpdater} from 'electron';

// register events
autoUpdater.on('update-downloaded', (event, releaseNotes, releaseName) => {
  const dialogOptions = {
    type: 'info',
    buttons: ['Restart', 'Later'],
    title: 'Application Update',
    message: process.platform === 'win32' ? releaseNotes : releaseName,
    detail: '新しいアプリのダウンロードが完了しました。アプリを再起動して更新を適用します。',
  };
  dialog.showMessageBox(dialogOptions)
  .then((result) => {
    const btnId: number = result.response;
    if (btnId === 0) {
      autoUpdater.quitAndInstall();
    }
  });
});

autoUpdater.on('error', (err: Error) => {
  const dialogOptions = {
    type: 'error',
    title: 'Application Version Check Error.',
    message: 'アプリのアップデート中にエラーが発生しました。',
    buttons: ['OK'],
    defaultId: 0,
    cancelId: 0,
  };
  dialog.showMessageBox(dialogOptions);
});

// setup feed url
const server = 'https://update.electronjs.org';
const feed = `${server}/taku-o/myukkurivoice/${process.platform}-${process.arch}/${app.getVersion()}`;
autoUpdater.setFeedURL({
  url: feed,
  serverType: 'json',
});

// update
autoUpdater.checkForUpdates();


いったんcheckForUpdates()を実行すると、
アプリの更新処理をストップ出来ないらしく、
実行前にユーザーに確認ダイアログを出しておいた方が良さそうです。


あるいは、今動作しているアプリのバージョンが最新かどうか確認しておいてから、
アプリを更新しても良いか聞いておきましょう。


autoUpdaterが間違ったファイルをダウンロードする(1敗)

ElectronのautoUpdaterは、おおよそ次の順番で処理しています。
Mac環境)

1. 実行中のアプリの署名の確認
2. 実行中のアプリが最新版かどうかチェック
3. 最新アプリのダウンロード
4. zipファイルの解凍
5. 最新アプリの署名の確認
6. アプリの入れ替え


update.electronjs.orgはこんな実装(↓)になっているので、
データファイルなどの名前に"mac"の文字が入っていると、
更新アプリでなく、間違ったファイルをダウンロードすることがありますね。
(1敗)

# https://github.com/electron/update.electronjs.org/blob/ed32d4fedca459fb734a5d898d8573f57b605bd4/index.js#L236

const assetPlatform = fileName => {
  if (/.*(mac|darwin|osx).*\.zip/i.test(fileName)) return 'darwin-x64'
  if (/win32-ia32/.test(fileName)) return 'win32-ia32'
  if (/win32-x64|(\.exe$)/.test(fileName)) return 'win32-x64'
  return false
}


ダウンロードされたzipファイルは、 次のような場所に保存された後、解凍され、
その後、アプリの署名の検証が行われます。

/Users/user/Library/Caches/xx.xx.bundleid.ShipIt/update.QCBggxR


なので、誤ったファイルをダウンロードしていて、 署名エラーが発生している時は、
このディレクトリを監視していれば、問題を追えます。
(エラーになった時、すぐ消されちゃうみたいですけど。)


if (/win32-x64|(\.exe$)/.test(fileName)) return 'win32-x64'

試していませんけれど、このコードを見る限り、
Windows環境はexe形式もいけるみたいですね。
自己解凍形式がサポートされているのかな?


終わり

MacのElectronアプリだったらさ、
自動更新機能を組み込まなくても、Mac App Storeに出せば良いじゃない?


そんなふうに考えていた時期が俺にもありました


どうも駄目なレビュアーに当たった気がします。
審査が通らない。
話が通じない。


そろそろ審査アプリのバンドルIDを変更して、
レビューする人を切り替えようかと考え始めています。
(あくまでも自分は悪くないと決めつけるスタイル)

2020年2月最新のElectronアプリ、アップル公証(Notarization)対応

アップル公証(Notarization)

Macにはアップル公証という、Macの野良アプリを署名する仕組みがあり、
このアップル公証を通しておかないと、 macOS Catalinaではアプリを起動する際、そのアプリの起動がブロックされます。
(起動する術はある、らしい)


少し前、これに対応して、自前のElectronアプリで アップル公証を通していたのですが、
実は、その時は、公証の条件が少し緩くなっていたらしく・・・

アップル、macOS野良アプリの公証要件を一時的に緩和。Catalinaへのスムーズな移行のため https://japanese.engadget.com/2019/09/05/macos-catalina/


またもや、自家製Electronアプリで、 アップル公証が通らなくなってしまったのでありました。
(´・ω・`)


この記事は、Electron製アプリでアップル公証(Notarization)を通す、
その手順についてのお話となります。


Xcodeのバージョン

まず最初に、アップル公証を通すには、新しめのXcodeが必要です。 バージョンが低い場合はXcode 10以降にバージョンを上げておきましょう。
App Storeからインストールできない場合は、Apple Developerからダウンロードしてきて、インストールします。
https://developer.apple.com/jp/


作ったアプリに署名をつける

作ったアプリに署名をつけます。
electron-osx-signというライブラリを使うか、
codesignコマンドで、Electronアプリに署名をつけられます。
https://github.com/electron/electron-osx-sign


おそらく、electron-osx-signを使うか、
electron-builder、electron-packagerのコマンドで、 オプションを追加して署名をつける方が楽でしょう。


が、自分の場合は、
ElectronアプリでDynamicLibraryを使っていたり、
アプリに同梱している別の実行ファイルを叩いていたりしていまして、
アプリの構造が少し独特なので、
codesignコマンドを直に叩いて署名をつけています。


codesign

codesignコマンドでアップル公証用の署名をつける場合は、
次の2つのパラメータをつけて、codesignを実行します。

--options runtime
--timestamp


下のコードは、仮想コードです。

仮想コードですが、
"どのファイルに対して、どのパラメータでcodesignを実行するか"
というのが大事な情報なので、 きっとこの記事を読みに来た人にはこれでもわかるはず・・・
アプリ名とかIDは適当に読み替えてください。

APP='MYukkuriVoice'
identity='Developer ID Application: Foo Bar (99QXXXXXXX)'
PARENT_PLIST='build/darwin.app.plist'
CHILD_PLIST='build/darwin.app-child.plist'

/usr/bin/codesign --options runtime --timestamp -s "${identity}" -f --entitlements "${CHILD_PLIST}"
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Electron Framework`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libEGL.dylib`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libswiftshader_libEGL.dylib`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libGLESv2.dylib`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libswiftshader_libGLESv2.dylib`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Libraries/libffmpeg.dylib`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/Electron Framework.framework/Versions/A/Resources/crashpad_handler`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/Electron Framework.framework`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/${APP} Helper (GPU).app/Contents/MacOS/${APP} Helper (GPU)`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/${APP} Helper (GPU).app`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/${APP} Helper (Plugin).app/Contents/MacOS/${APP} Helper (Plugin)`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/${APP} Helper (Plugin).app`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/${APP} Helper (Renderer).app/Contents/MacOS/${APP} Helper (Renderer)`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/${APP} Helper (Renderer).app`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/${APP} Helper.app/Contents/MacOS/${APP} Helper`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/${APP} Helper.app`

/usr/bin/codesign --deep --options runtime --timestamp -s "${identity}" -f --entitlements "${CHILD_PLIST}"
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/Mantle.framework/Mantle`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/Mantle.framework/Versions/A`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/ReactiveCocoa.framework/ReactiveCocoa`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/ReactiveCocoa.framework/Versions/A`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/Squirrel.framework/Versions/A/Resources/ShipIt`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/Squirrel.framework/Squirrel`
    `${APP}-darwin-x64/${APP}.app/Contents/Frameworks/Squirrel.framework/Versions/A`

# アプリから読み込んでいるDynamicLibrary
# (このアプリ固有)
/usr/bin/codesign --options runtime --timestamp -s "${identity}" -f --entitlements "${CHILD_PLIST}"
    `${APP}-darwin-x64/${APP}.app/Contents/Resources/app.asar.unpacked/vendor/AqKanji2Koe.framework/Versions/A/AqKanji2Koe`
    `${APP}-darwin-x64/${APP}.app/Contents/Resources/app.asar.unpacked/vendor/AqKanji2Koe.framework`
    `${APP}-darwin-x64/${APP}.app/Contents/Resources/app.asar.unpacked/vendor/AqUsrDic.framework/Versions/A/AqUsrDic`
    `${APP}-darwin-x64/${APP}.app/Contents/Resources/app.asar.unpacked/vendor/AqUsrDic.framework`
    `${APP}-darwin-x64/${APP}.app/Contents/Resources/app.asar.unpacked/vendor/AquesTalk10.framework/Versions/A/AquesTalk`
    `${APP}-darwin-x64/${APP}.app/Contents/Resources/app.asar.unpacked/vendor/AquesTalk10.framework`
    `${APP}-darwin-x64/${APP}.app/Contents/Resources/app.asar.unpacked/vendor/AquesTalk2.framework/Versions/A/AquesTalk2`
    `${APP}-darwin-x64/${APP}.app/Contents/Resources/app.asar.unpacked/vendor/AquesTalk2.framework`

# アプリから実行している外部実行ファイル。とそこから読んでいるDynamicLibrary
# (このアプリ固有)
/usr/bin/codesign --options runtime --timestamp -s "${identity}" -f
    `${APP}-darwin-x64/${APP}.app/Contents/Resources/app.asar.unpacked/vendor/maquestalk1-ios`
    `${APP}-darwin-x64/${APP}.app/Contents/Resources/app.asar.unpacked/vendor/secret`
    `${APP}-darwin-x64/${APP}.app/Contents/Resources/app.asar.unpacked/vendor/maquestalk1`
    `${APP}-darwin-x64/${APP}.app/Contents/Resources/app.asar.unpacked/vendor/AquesTalk.framework/Versions/A/AquesTalk`
    `${APP}-darwin-x64/${APP}.app/Contents/Resources/app.asar.unpacked/vendor/AquesTalk.framework`

/usr/bin/codesign --options runtime --timestamp -s "${identity}" -f --entitlements "${CHILD_PLIST}"
    `${APP}-darwin-x64/${APP}.app/Contents/MacOS/${APP}`

/usr/bin/codesign --options runtime --timestamp -s "${identity}" -f --entitlements "${PARENT_PLIST}"
    `${APP}-darwin-x64/${APP}.app`


codesignコマンドで直接、Electronアプリを署名しようとすると、
対象のファイルがとても多くなりますね。
コマンドの実行順序は数カ所ほど、入れ替わると駄目な場所があります。


次の2つのバイナリは、
2020年1月まではcodesignで指定しなくてもアップル公証が通っていたのですが、
今月(2月)になったら、個別にcodesignしておかないとアップル公証が通らなくなってしまっていました。

Electron Framework.framework/Versions/A/Resources/crashpad_handler
Squirrel.framework/Versions/A/Resources/ShipIt


entitlements

codesignコマンドで指定するentitlementsは、 Electronの場合、
com.apple.security.cs.allow-unsigned-executable-memory が必須になります。


それから、このアプリの場合はDynamicLibraryを使っているので、 それとは別に、
com.apple.security.cs.disable-library-validation を追加しています。
アプリによっては、これら以外にも必要となる指定があるでしょう。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
  <dict>
    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
    <true/>
    <key>com.apple.security.cs.disable-library-validation</key>
    <true/>
  </dict>
</plist>


古いOSで作った実行ファイル

古いOSでビルドした実行ファイルが含まれていると、アップル公証がエラーになります。 これを解消するには新しく実行ファイルを作り直す必要があり、回避方法は無さそうです。

# このように怒られる
The binary uses an SDK older than the 10.9 SDK.


アプリによっては、この条件のせいで、アップル公証を通したくても通せなくなってしまうこともありそうです。

実行ファイルでなく、古いOSでビルドしたライブラリは、アップル公証でエラーにはなりませんでした。
助かった(>_<)


notarize

codesignで署名したアプリをアップル公証(notarization)に通します。
調べれば分かりますが手順がとてもとてもとても面倒くさい。


electron-notarizeライブラリを使うと、さくっと公証を通して、 完結まで処理してくれるので、
Electronアプリのアップル公証は、基本、これを使うべきだと思いました。
https://github.com/electron/electron-notarize


次のコードはgulpで、notarizeを実行するコードです。
実行結果が返ってくるまでは、毎回毎回少し時間がかかります。
5分、10分くらい。

const gulp = require('gulp');
const notarize = require('electron-notarize').notarize;

gulp.task('_notarize', () => {
    const APP = 'MYukkuriVoice';
    const platform = 'darwin';
    const APP_PATH = `${APP}-${platform}-x64/${APP}.app`;
    const bundleId = 'jp.nanasi.foobar';
    const teamId = '99QXXXXXXX';

    const appleId = DEVELOPER_APPLE_ID;
    const env = process.env;
    const password = env.AC_PASSWORD;

    return notarize({
      appBundleId: bundleId,
      appPath: APP_PATH,
      appleId: appleId,
      appleIdPassword: password,
      ascProvider: teamId,
    });
});


verify notarization

アップル公証を通したら、
本当にアップル公証が通っているか、次のコマンドで確認します。

# アップル公証の実行履歴の表示
xcrun altool --notarization-history 0 -u 'hoge@example.jp' -p 'xxxx-xxxx-xxxx-xxxx'

# 指定のアプリがアップル公証を通っているか
xcrun stapler validate -v MYukkuriVoice-darwin-x64/MYukkuriVoice.app


もちろんこれで確認が取れてもアプリが動かないことがあります。
その場合は、単純にアプリのバグでなければ、

  • アップル公証を通した後にアプリが変更された
    (一度、アンチウィルスソフトにやられました)
  • entitlementsの指定が足りない

のどちらかが怪しそうです。


おわり

終わりでありますよ。


自分はまだmacOS Catalinaに移行していないので、
動作確認が少し面倒です。(´・ω・`)

Github Actionsでいろいろ困ったところと対応方法。主にシェルスクリプトを使うGitHub Actions

GitHub Actions

みなさん、GitHub Actionsで遊んでますか?
私も最近、GitHub Actionsで遊んでいるんですけど、
いくつか困ることもありまして、
この記事は、その時、困ったことの解決メモであります。
(雑な導入)


https://help.github.com/ja/actions/automating-your-workflow-with-github-actions


シェルスクリプト内で、privateなnpmレポジトリをnpm install

プレイベートなnpmレポジトリをnpm installするには、
.npmrc作るのが早い。

Settingsメニューから、Secrets設定を選んで、NPM_AUTH_TOKENを設定。
でもって、こんな感じ。

- run: echo "//npm.pkg.github.com/:_authToken=${{ secrets.NPM_AUTH_TOKEN }}" > ~/.npmrc
- name: npm install
  run: |
    npm install


シェルスクリプト内でgit clone

actionでなくて、シェルスクリプトでgitする。
ローカルで動くビルドスクリプトがあって、
それをGitHub Actionsでもそのまま使いたいケースの対応方法。

パターン1

git cloneする時、httpsでアクセスすれば、SSHの設定は要らない。

git clone git@github.com:taku-o/github-actions-workflow-demo.git
     ↓
git clone https://github.com/taku-o/github-actions-workflow-demo.git

パターン2

SSHのキーを設定しておけば、プライベートなGitHubレポジトリもcloneできる。
シェルスクリプトでいろいろする前に、
ssh-key-actionで、SSHの設定を入れておく。

- name: ssh key
  uses: shimataro/ssh-key-action@v1
  with:
    private-key: ${{ secrets.SSH_KEY }}
    public-key: ${{ secrets.SSH_KEY_PUBLIC }}
    known-hosts: ${{ secrets.SSH_KNOWN_HOSTS }}
- name: git clone
  run: |
    git clone git@github.com:taku-o/github-actions-workflow-demo.git


actions/cacheのlimitが小さくて困る

actions/cacheのキャッシュのlimitが小さい。400MB。
容量足りなくて、大きなアプリだと、一切キャッシュが効かなくなる。


でも、これぐらいならすぐに修正が入るだろう。
そう思っていた私は、issueが建ってから22日経過しているのを見て、
音速でフォークするのであった。

https://github.com/taku-o/github-actions-cache

- name: cache node environment
  id: cache-node
  uses: taku-o/github-actions-cache@v1.0.4
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-


1GBまで増やした。
どうせやるなら、パラメータ外出しにしような
って意見もあるかもしれない。
ダメだわコレ。内部でtgzしてる。 よって単体でファイルサイズが400MB越えて、GitHub Actionsの制限にかかって消されちゃう(´・ω・`)


アクションのフォーク

アクションはGitHub Actions Marketplaceに公開しなくても使える。楽でイイネ。

でも、GitHub ActionsのアクションをForkして、自分のレポジトリに持ってくると、
レポジトリの名前が大げさ(?)な感じになっちゃうね。

アクションをForkする場合は、初手名前変更安定だろうね。

actions/cache
   ↓
taku-o/cache
   ↓
taku-o/github-actions-cache (邪魔にならない感じの名前に)


actions/upload-artifact

actions/upload-artifactはzip形式でファイルをアップロードする。

でも、既にzipファイルを作ってる場合は、それをそのままアップロードして欲しいんだよ、

って少し思ったけど、
mkdir、mvすれば良かっただけだね。
これならまだ許せる。

- name: collect staging built files
  run: |
    mkdir built
    mv release/app.zip built

- name: upload built files
  uses: actions/upload-artifact@master
  with:
    name: built
    path: built


nameは、built.zipとzip付きで指定すると、built.zip.zipが作られるぞ。
気をつけるのだ。

- name: upload built files
  uses: actions/upload-artifact@master
  with:
    name: built.zip
    path: built


gitのbranch名を取る

pushされたGitHubレポジトリのbranchの名前を取る。

GITHUB_REFの中に名前が入っている。
refs/heads/feature/window-sizeのようなフォーマット。

- name: build staging application
  run: |
    npx gulp build:staging --branch=${GITHUB_REF#refs/heads/}


Pull Requestされたコードを取る

Pull Requestされたコードを取る。
Pull Requestされたコードのテストなどで使う。

こちらもGITHUB_REFの中に名前が入っている。
refs/pull/9999/merge

- name: build pr application
  run: |
    npx gulp build:pr --pull_request=${GITHUB_REF#refs/}


実際に、Pull Requestのコードを取り込んで使うには ↓みたいなことするコードを書くことになるかな?

git clone taku-o/github-actions-workflow-demo
cd github-actions-workflow-demo
git pull origin pull/9999/merge


おわり

終わりなのだ。

続・Electron製アプリが Mac App Storeで non-public APIの利用で rejectされる問題。解決しそう

AppStoreのレビュー通ったって

前回
Electron製アプリが Mac App Storeへの申請で non-public APIの利用で rejectされる問題
https://taku-o.hatenablog.jp/entry/2019/11/03/103422


Electronがnon-publicなAPIを利用していたので、
Electron製のアプリがみんなrejectされている問題があったのだけれど、
最新コードでAppStoreのレビューが通ったそうで、解決のメドがたったみたい。
https://github.com/electron/electron/issues/20027


もうちょっとで修正が利用できるようになるのでしょう。
https://github.com/electron/electron/pull/20965


でも、Electron 5以降が対象なんだ

Electronのバージョン4以下は、サポート打ち切られています。
当然修正は用意されない!


Electron 4用のPull Requestも作られたけど、
一瞬でcloseされたよ!!
https://github.com/electron/electron/pull/21003


私が使ってたのは3.1.9だったので、 このままでは修正が用意されないのですね。
Electron 3、Electron 4使っている人は、
Electronのバージョン上げましょうね。


というわけでElectron 5までバージョン上げたよ

というわけで、ここ数日は、
アプリで使っている Electronのバージョンアップに励んでいました。


Electronを追っている人は知っていると思うけど、
Electronはバージョン上げて、すんなり動いたりしないのですよ。


自分の場合、3.1.9 → 5.0.12で、次のような問題があった。
(Electron 6への移行も検討してたので、Electron5用の対応と、Electron6用の対応が混在してるよ)


node-ffi が Node 12 でビルドできない

もっとも古いElectron 5でも、Node 12.0.0です。

# リリースノートから
Upgraded to Chromium 73.0.3683.119, Node.js 12.0.0, and V8 7.3.492.27.

node-ffiというネイティブライブラリを実行できるモジュールがあり、 今までこれを利用していたのですが、
このライブラリはNode 12ではビルドできない。
開発が止まっている。
https://github.com/node-ffi/node-ffi


自分はいろいろ検討した結果、node-ffi-napiに移行しました。
とても良い感じ。
https://github.com/node-ffi-napi/node-ffi-napi


menu item role

Electronのメニュー定義のrole定数が大文字小文字で変わっていたり。
こんな感じであちこち。
Typescriptでコンパイル時にエラーになってた。

# 抜粋
- {role: 'zoomin'},
- {role: 'zoomout'},
- {role: 'resetzoom'},
+ {role: 'zoomIn'},
+ {role: 'zoomOut'},
+ {role: 'resetZoom'}


Spectron

remote-debugging-portを指定しないと、
Spectronのテストコードが動作しなくなった。

# 抜粋
describe('dictWindow', function() {
  this.timeout(10000);

  before(function() {
    this.app = new Application({
      path: 'App-darwin-x64/App.app/Contents/MacOS/App',
      chromeDriverArgs: ['remote-debugging-port=9222'], ←←←←←← これ!
      env: {DEBUG: 1, NODE_ENV: 'test'},
    });
    return this.app.start();
  });


electron-packager

electron-packagerでアプリパッケージを作っているのですが、
Electron 6あたりで、Electronの作りが結構変わっているようですね。
古いバージョンのelectron-packagerを使っている人はアップデートが必要でしょう。
https://github.com/electron/electron-packager


一部ファンクションが非同期になってた

例えば、

dialog.showMessageBox

これが同期から非同期処理になってたり。


そういう変更は、リリースノートの
Breaking Changesの項に置いといて欲しい。


ばっちこい

準備完了だ。
はやくこいこいアップデート。

AquesTalk1 MacがmacOS Catalinaで32bitサポート打ち切られて動かなくなったけど、なんとかした話

ながれ

  1. AquesTalkという機会音声を作るライブラリがある
  2. macOS Catalinaで32bitアプリのサポートが打ち切られた
  3. AquesTalk1 Macのライブラリは、i386ppcuniversal binaryだったので、
  4. macOS Catalinaで無事、動作しなくなった

ちょっと頑張ってみた

macOS Catalina以降から使える機能に、
iPadアプリをMacアプリとして動かす、"Mac Catalyst"という機能があり、
当初はこれを使って、なんとかする予定でした。
iPadアプリを作ってからの、Macアプリへの変換。


しかし、その最中、iOS版のAquesTalkを、
Macアプリでそのまま実行できることに気づいたのであった。
DE・KI・TA

(今時の開発者は動画も作るらしいよ)


おわり

AquesTalk1 Macの声作る関数がこれで、

unsigned char * AquesTalk_SyntheMV(int idVoice, const char *koe, int iSpeed, int *size)

AquesTalk1 iOS版の声作る関数がこれだから、

unsigned char * AquesTalk_Synthe(const char *koe, int iSpeed, int *size)


あれあれ、なんか足りないなー?
声(idVoice)選べないなー?
という問題が、この回避方法にはあるような無いような。

Electron製アプリが Mac App Storeへの申請で non-public APIの利用で rejectされる問題

Electron製アプリがrejectされている

Electronプロジェクトの、このGitHub issueで気づいたのですが、

どうもここ最近、具体的には、10月末から
Electron製のアプリが、Mac AppStoreでrejectされています。
issueのタイトルは5.0.10となっていますが、
別に5.0.10でなくてもrejectされています。


このあたりのAPIがprivate APIで、
これらをElectronが使用しているから、らしい。

CAContext
CALayerHost
NSAccessibilityRemoteUIElement
NSNextStepFrame
NSThemeFrame
NSURLFileTypeMappings


これらのAPIはいつから使われている。

古くから使われている。
Electron 3だと、次の3つが入っているようだ?

CAContext
CALayerHost
NSURLFileTypeMappings


そう何を隠そう、私もreject喰らったのである。
他の人がどうしているのか探したらわかったのである。


どうする?

どうしよう?
少し困る現象でありますね。

PhantomJSの代わりとしてGoogle Chromeをヘッドレスで使う。のではなくChromiumを使う。

PhantomJSの開発が止まってしまった

PhantomJSブラウザの開発が止まってしまいました。
npmでさくっと導入できるヘッドレスなブラウザで、
テストの時に便利だったのですけれどね。

Google Chromeをヘッドレスモードで使う?

そこで、代わりに、Google Chrome
ヘッドレスモードで使おうっていう考えがあります。


ただー。
PhantomJSはnpm installでインストールできた。
Google Chromeはインストールが面倒くさい。


Google Chromeのインストールは、Macなら次のURLからインストールする


Ubuntuなら、こんなインストール手順になりますかね。

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo dpkg -i google-chrome-stable_current_amd64.deb
sudo apt-get update
sudo apt-get -f install


そこでChromium

npmでChromiumをインストールする

npm install --save-dev @taku-o/chromium


とりあえず、CHROMIUM_VERSIONでバージョン指定できるようにしておいた。
が、どうやってバージョン指定できるようにしようかなぁ、ってのは
迷いどころである。

CHROMIUM_VERSION=76 npm install --save-dev @taku-o/chromium


これはWebdriverIOのテストコードなのですけれど、
おおよそChromeを使うように設定を組んでおいてから、
実行時に、Chromeの代わりにChromiumのパスを渡す感じになりますな。

# wdio.conf.js抜粋
var chromium = require('@taku-o/chromium');

exports.config = {
    ...
    capabilities: [{
        browserName: 'chrome',
        'goog:chromeOptions': {
            args: ['--headless', '--disable-gpu'],
            binary: chromium.path,  // ←←←←←←←←←← ここに注目
        },
    }],
    ...


サンプルコードと手順

mkdir webdriverio_chromium-test-samples
cd webdriverio_chromium-test-samples
npm init
mkdir -p ./test/specs
npm install --save-dev @wdio/cli @wdio/cli @wdio/local-runner @wdio/mocha-framework @wdio/spec-reporter @wdio/sync wdio-chromedriver-service chromedriver
npm install --save-dev @taku-o/chromium

# WebdriverIOのテストコード作成
vim test/specs/basic.js

# テストの設定作成
vim wdio.conf.js

# テスト実行
./node_modules/.bin/wdio wdio.conf.js
  • 実行結果
Execution of 1 spec files started at 2019-09-01T11:32:10.850Z

2019-09-01T11:32:10.886Z INFO @wdio/cli:Launcher: Run onPrepare hook
Starting ChromeDriver 76.0.3809.126 (d80a294506b4c9d18015e755cee48f953ddc3f2f-refs/branch-heads/3809@{#1024}) on port 4444
Only local connections are allowed.
Please protect ports used by ChromeDriver and related test frameworks to prevent access by malicious code.
2019-09-01T11:32:11.651Z INFO @wdio/local-runner: Start worker 0-0 with arg: wdio.conf.js
[0-0] RUNNING in chrome - /test/specs/basic.js
[0-0] 2019-09-01T11:32:12.089Z INFO @wdio/local-runner: Run worker command: run
[0-0] 2019-09-01T11:32:12.145Z INFO webdriver: [POST] http://127.0.0.1:4444/session
[0-0] 2019-09-01T11:32:12.146Z INFO webdriver: DATA { capabilities:
   { alwaysMatch: { browserName: 'chrome', 'goog:chromeOptions': [Object] },
     firstMatch: [ {} ] },
  desiredCapabilities:
   { browserName: 'chrome',
     'goog:chromeOptions':
      { args: [Array],
        binary:
         '/Users/taku-o/Desktop/webdriverio_chromium-test-samples/node_modules/@taku-o/chromium/lib/chromium/chrome-mac/Chromium.app/Contents/MacOS/Chromium' } } }
[0-0] 2019-09-01T11:32:12.879Z INFO webdriver: COMMAND navigateTo("https://webdriver.io/")
[0-0] 2019-09-01T11:32:12.880Z INFO webdriver: [POST] http://127.0.0.1:4444/session/a296b1e791776ba38f9de341c0985c1e/url
[0-0] 2019-09-01T11:32:12.881Z INFO webdriver: DATA { url: 'https://webdriver.io/' }
[0-0] 2019-09-01T11:32:14.932Z INFO webdriver: COMMAND getTitle()
[0-0] 2019-09-01T11:32:14.933Z INFO webdriver: [GET] http://127.0.0.1:4444/session/a296b1e791776ba38f9de341c0985c1e/title
[0-0] 2019-09-01T11:32:14.938Z INFO webdriver: RESULT WebdriverIO · Next-gen WebDriver test framework for Node.js
[0-0] 2019-09-01T11:32:14.940Z INFO webdriver: COMMAND deleteSession()
[0-0] 2019-09-01T11:32:14.941Z INFO webdriver: [DELETE] http://127.0.0.1:4444/session/a296b1e791776ba38f9de341c0985c1e
[0-0] PASSED in chrome - /test/specs/basic.js
2019-09-01T11:32:15.105Z INFO @wdio/cli:Launcher: Run onComplete hook

 "spec" Reporter:
------------------------------------------------------------------
[chrome  mac os x #0-0] Spec: /Users/taku-o/Desktop/webdriverio_chromium-test-samples/test/specs/basic.js
[chrome  mac os x #0-0] Running: chrome on mac os x
[chrome  mac os x #0-0]
[chrome  mac os x #0-0] webdriver.io page
[chrome  mac os x #0-0]    ✓ should have the right title
[chrome  mac os x #0-0]
[chrome  mac os x #0-0] 1 passing (2.1s)

Spec Files:      1 passed, 1 total (100% completed) in 00:00:04 


おわり

一気にやっちゃったけど、

いや、こっち使うべきかな

github.com