javascript

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

ElectronのautoUpdater update.electronjs.org 対応している環境 更新用のアプリをReleasesに置く Electronアプリへの組み込み(自動的に更新処理) Electronアプリへの組み込み(任意のタイミングで更新) autoUpdaterが間違ったファイルをダウンロードする…

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

PhantomJSの開発が止まってしまった PhantomJSブラウザの開発が止まってしまいました。 npmでさくっと導入できるヘッドレスなブラウザで、 テストの時に便利だったのですけれどね。 https://phantomjs.org Google Chromeをヘッドレスモードで使う? そこで、…

ボタンを長押ししたら、ショートカットキーのヒントを表示する

⌘キーを長押しした時、ショートカットのヒントアイコンを表示する SlackのMacアプリが ⌘キーを長押しすると「⌘キー+数字キー」のショートカットの ヒントを表示するなんてことをやってまして、 → (ふわっと出てくる) これは良いUIだと思ったのです。 要件 ⌘…

Electronアプリの起動時間短縮に挑む

アプリが起動するまでの時間が短いと気持ちいい アプリの起動は最初の一回しか発生しないのに、 その後はアプリは起動しっぱなしなのに、 この最初の起動までの時間が短いと、アプリの使用感が非常に良くなるような気がする。 気がしない? この記事はElectr…

gulp3のrun-sequence + エラー処理なコードを、gulp4で置き換える

いろいろ gulp3にタスクを連続で実行するrun-sequenceというライブラリがありました。 gulpのバージョン4以降では、このrun-sequenceの代わりに、gulp.seriesを使うことになったのだが、 gulp.seriesには、run-sequenceにあった、発生したエラーを受け取るca…

MacのElectronで"safeDialogs"の機能が動作するようになった

要約 動作しないと自分の中で評判だった、 Electronの無限アラート防止機能"safeDialogs"の問題が修正。 Electronバージョン5から動作するようになった。 BrowserWindowのsafeDialogsオプション ElectronのBrowserWindowに、"safeDialogs"というオプションが…

続・Final Cut Pro XでWAVファイルにロールを自動割り当てする機能の仕様を特定した(してない)

要約 ぜんぜん特定してなかった(´д`) 前回 Final Cut Pro XでWAVファイルにロールを自動割り当てする機能の仕様を特定した https://taku-o.hatenablog.jp/entry/2019/05/25/060055 判明した問題 mixdownなWAVファイル、 ステレオなWAVファイル、 つまり、複…

Final Cut Pro XでWAVファイルにロールを自動割り当てする機能の仕様を特定した

概要 Final Cut Pro Xには、オーディオファイルを読み込んだ時に、オーディオロールを自動的に設定する機能があります。 なのですが、その仕様の詳細がよくわからなかった。 このたび、試行錯誤の末、なんとか動作する仕様を特定したので、 まとめておきます…

AquesTalkの機能をJavaScriptから呼び出す機能をライブラリに切り出した

概要 Mac用の動画作成用ゆっくりボイスアプリ MYukkuriVoice で使用している AquesTalk呼び出し機能を、ライブラリに切り出した。 たぶんMacで、Electronで、AquesTalkな読み上げアプリを作るなら役に立つでしょう。 めちゃくちゃレアケースだな!!! githu…

Electronのrenderer processで、consoleのログ出力をターミナルに吐かせる

さいしょに Electronアプリの開発中はelectronコマンドで直接アプリを起動すること多いと思う。 electron . この時、main processでconsole.logると、ターミナルにログが出力される。 でも、renderer processでconsole.logしたら、ブラウザ側にログが出力さ…

Web Audio APIでOfflineAudioContextを作るときの長さの指定、どうしよう

OfflineAudioContextのコンストラクタ Web Audio APIのOfflineAudioContextを作るとき、 コンストラクタで長さを指定しますよね。length。 これが十分な長さより短いと作成した音声が短くなってしまい、 長すぎると最後の方に音が出力されないゾーンが出来て…

Electronでネイティブを実行できるnode-ffiを利用できるようになるまで

はじまりはじまり node-ffiというライブラリがある。 これを使うと、ネイティブなライブラリ・フレームワークを JavaScriptのコードから呼び出せる。 https://github.com/node-ffi/node-ffi なのですが、Electronから使う場合、npmでnode-ffiを入れるだけで…

続・Electronの検索ダイアログ

Electronのページ内検索ダイアログのライブラリを作り替えた。 electron-search-dialog https://www.npmjs.com/package/electron-search-dialog すごいシンプルになった 作り替えたら、renderer processのjavascriptから、 このコードを呼ぶと動くようになっ…

Electron用の検索ダイアログ作った

つくった Electronアプリのページ内を検索するダイアログ。 https://www.npmjs.com/package/electron-search-dialog 使うと、こんな感じに検索ウィンドウが表示されて、 Electronのページのテキストを検索できる。 Excelの検索ダイアログに似せてみた。 npm…

Web Audio APIのOfflineAudioContextを使うたびに増えていく、スレッド数とメモリ使用量の調査

経緯 音声を操作するWeb Audio APIという、WebブラウザのAPIがあります。そのAPIの中の、OfflineAudioContextというオブジェクトを、MacのElectron製アプリで利用していたのですが、アプリを動作させながらアクティビティモニタを確認していたら、何かがおか…

MacのElectronアプリに、MacのHelp Bookを組み込む

Macでヘルプで検索した時に起動するアレ。Help Book。 MacでElectronアプリを作るのであれば、 Help Bookにヘルプ機能を作り込めば、よりMacライクなアプリになるのではないか。そう考えてトライしたのであった。 作業手順 1. Help Bookを作る 2. Electronア…

マルチなウィンドウのElectronアプリで、メニュー制御する話

Electronのアプリで、ウィンドウ毎に、メニューを切り替えたいとか、 有効無効を切り替えたいことってあると思うんです。 今回はフォーカスが当たっている時だけ、メニューを有効にする方法の話。 メニューアイテムのenabledを切り替える メニューの有効無効…

Electronアプリで、アプリアイコンにドロップされたファイルを処理する

Finder上のアプリアイコンにファイルをドロップされた時、Dock上のアプリアイコンにファイルをドロップされた時、 Electron製のアプリで、そのファイルを受け取って処理する機能の実装方法です。 (Macの話だったり、私製アプリのコードの断片が入ってたり、T…

Electronアプリは、まずelectron-localshortcut入れて、Command+R、Command+Wを潰すのがセオリーだと思う

おまえ、セオリー語れるほど、Electronやってないだろう。 globalShortcut https://electronjs.org/docs/api/global-shortcut Electronにはショートカットキーを制御するglobalShortcutという機能があるんですけど、 これは公式ドキュメントにも書いてあると…

画像をElectron側にキャッシュしておく話

Electronを業務で使っている会社とかあるらしい。 で、自分も活用してみよう。Electronでどんなアプリを作るかって考えたら、 サーバーのデータを参照するElectronアプリも作れるけれど、 でも、それだったら、Webページでも良いわけで、 Electronを使うなら…

Electronの画面にHTML落とすと、画面が切り替わっちゃうよね

Electronで立ち上げたBrowserWindowの画面に、 HTMLファイルを落とすと、 そのHTMLがウィンドウ内に表示されてしまう。 格好悪い!!! これをふせぐには ドロップした時に、画面が差し替わる問題を防ぐには、次のようなコードを入れておくと良い。 <html> <head> <meta charset="UTF-8"> <script type="text/javascript"> doc</meta></head></html>…

Electronのアプリが落ちたり、画面がまっしろになっってしまった時の、問題の追い方

Electronアプリでのエラーの追い方。 アプリが起動もしないで落ちる時 アプリをクリックして起動したら、そのまま落ちる時。 最初に追うのは main processの初期化まわりで問題が起きていないか。 electron-logを入れて、ログ出力するのが良いと思う。 elect…

electron-json-storage、electron-storeを使ったElectronアプリのテストの話

経緯とか Electronでよく使われる(?)設定ファイル読込系ライブラリに electron-json-storage (https://github.com/electron-userland/electron-json-storage) electron-store (旧 electron-config) (https://github.com/sindresorhus/electron-store) がある…

Electron製のアプリの見た目をMacふうのアプリにする electron-photonの話

最近、社内でLT(https://labs.gree.jp/blog/2018/10/17291/)があって、そこで話をしたので、その時の内容を書く。 これは、その一部の話。 photonkit Electronアプリの見た目をMacアプリふうにする、photonkitというライブラリがかつてありました。 http://p…

Electron製のアプリの起動を速くするelectron-linkの話

最近、社内でLT(https://labs.gree.jp/blog/2018/10/17291/)があって、そこで話をしたので、その時の内容を書く。 これは、その一部の話。 経緯とか どうにかして、アプリを速くできないかなー、って情報探してたら Atomというエディタの起動時間を高速化し…

ElectronのBrowserWindow間で直接メッセージをやりとりする

最近、社内でLT(https://labs.gree.jp/blog/2018/10/17291/)があって、そこで話をしたので、その時の内容を書く。 これは、その一部の話。 経緯とか要約とか 複数立ち上げたBrowserWindowのインスタンス間でメッセージをやりとりする。 社内のメモで出来ない…

Electron Fiddle

最近、社内でLT(https://labs.gree.jp/blog/2018/10/17291/)があって、そこで話をしたので、その時の内容を書く。 これは、その一部のElectron Fiddleの話。 Electron Fiddle https://github.com/electron/fiddle Electronコードの挙動を簡易に確認できるア…

Electronアプリから、別のアプリへファイルのドラッグアンドドロップによる受け渡しを実現する

経緯 Electronのアプリで音声ファイルを生成したら、その音声ファイルを直接、動画編集ソフトにドロップしたかった。 これが出来ると、音声録音→動画編集ソフトに突っ込み、の作業をポイポイできるようになる。 ファーストトライ 駄目だったパターン。これ(↓…

Web Audio APIで作ったaudio/wav形式の音声を保存する

この(↓)のアプリを作っている間に得た知見 https://github.com/taku-o/myukkurivoice Web Audio APIで作った音声を保存する方法は、調べると色々出てくるのですが、 Recorder.js MediaStream Recording API ScriptProcessorNode この記事では、自分にはこれ…