指定したHTMLの要素を徐々に表示する「フェードイン」と、徐々に非表示にする「フェードアウト」をJavaScriptで実装します。
ここでは大きく2種類の方法を取り上げます。
HTML5から登場したWeb Animation APIを利用したものと、はるか以前から利用されてきたsetInterval利用する物です。IE11を対象としないのであれば前者の方が滑らかに動いてくれるのでおすすめです。
続きを読む
指定したHTMLの要素を徐々に表示する「フェードイン」と、徐々に非表示にする「フェードアウト」をJavaScriptで実装します。
ここでは大きく2種類の方法を取り上げます。
HTML5から登場したWeb Animation APIを利用したものと、はるか以前から利用されてきたsetInterval利用する物です。IE11を対象としないのであれば前者の方が滑らかに動いてくれるのでおすすめです。
続きを読む
WindowsもmacOSも世界中で利用されていますし、日本国内にも外国語が母国語な方も大勢いらっしゃいます。そこで今回はElectronをユーザーの言語環境に合わせる国際化(i18n)を行ってみます。
Electron自体にはそのための専用の機能は用意されていないようなので、Node.jsで利用されているモジュールを利用するか、自分で用意する必要があります。今回は後者で行います。
続きを読む
アプリの本体のウィンドウが起動する前に、会社やアプリのロゴが表示される画面を見たことがある方も多いと思います。いわゆる「スプラッシュ」と呼ばれる画面です。今回はこちらの実装を行ってみます。
スプラッシュはブランディングなどが目的の場合もありますが、裏側でこっそり通信を行っている場合もありますね。またはここでファイルをメモリ上にロードする場合もあります。
続きを読む
設定情報やちょっとしたデータの管理にレンダラープロセスの場合はWebStorageやIndexedDBが利用できますが、メインプロセスでは自力でファイルに保存する処理が必要でちょっと面倒。そんな時に利用するのがelectron-storeです。手軽にデータの永続化ができます。
今回はこのelectron-storeを利用しウィンドウの位置とサイズを記録、次回起動する際に復元するサンプルを作成します。
続きを読む
Electronにはアプリがクラッシュした際に自動的にダンプファイルや各種情報を指定サーバへ送信する機能が用意されています。今回は受信サーバも含めて実装してみます。
Webブラウザ上で文字列中に含まれたUnicodeの絵文字だけをHTMLEntityへ変換します。
const text = '🍣がうまい😁!'; // 対象の文字列
const result = emoji2HTMLEntity(text); // 変換
console.log(result);
以下のような実行結果になります。
例えばすでに存在するMySQLのテーブルにデータがutf8で保存されており、すぐにutf8mb4に移行できないような場合に活躍するかもしれません。
アプリを起動すると自動的に最新版があるか確認し、もし更新されていれば自動的にバージョンアップしてくれる機能を実装します。
いくつか方法はあるのですが今回は
という方向でまとめていきます。
続きを読む
今回はインターネット経由で配布したmacOS用のアプリが安全であることを証明するための作業を行います。
ぶっちゃけ面倒です←
あとmacOSがないと作業できませんのでWindowsユーザーの方は(お小遣いを)準備してから挑んでください。
続きを読む
開発中はconsole.logで見れば良いのですが、ファイルにも情報を記録しておきたい場合にelectron-logを利用すると非常に簡単にログを記録することができます。
const log = require('electron-log');
log.info('Hello, log');
log.warn('Some problem appears');
以上です。めっちゃシンプルじゃないですかw?あとはOSによってログを保存するのによく利用されるディレクトリへ自動で保存されます。
今回はelectron-logのもう少し詳しい使い方を見ていきます。
続きを読む
前回はファイルダイアログで読み込みを行いましたが、今回は保存を行います。
今回もOSの機能を利用するダイアログの表示とファイルを読み込む部分はメインプロセスが担当し、それ以外の部分をレンダラープロセス(Chromium上で動いている箇所)が行うことにします。レンダラーでもOSの機能を利用できますがメインプロセスに任せた方が役割分担がはっきりして個人的に気持ち良いためです。
今回はファイルダイアログでファイルを指定しその内容を読み込んでみます。
Electronで実装するにはいくつかのパターンがありますが、ここではOSの機能を利用するダイアログの表示とファイルを読み込む部分はメインプロセスが担当し、それ以外の部分をレンダラープロセス(要はChromium)が行うことにします。レンダラーでもOSの機能を利用できますがメインプロセスに任せた方が役割分担がはっきりして個人的に気持ち良いためです。
アプリの顔である「アプリアイコン」を設定します。
今回はelectron-builderを利用してビルドする際の内容です。
アイコン画像を設定するのは非常に簡単なのですが、個人開発しているプログラマー的には画像を用意するのが一番ハードル高いですねw
続きを読む
Electronでアプリの「メニュー」を作成します。
基本的にはElectronのドキュメントの内容に沿って、Electronに予め用意されている機能を利用しWinodwsとmacOSの両方に対応するところまでを取り上げます。
続きを読む
Electronでユーザーの言語環境を取得します。
日本国内で日本人向けにのみ公開する場合は何も気にせず日本語で実装すれば良いわけですが、AppStore(Mac)やMicrosoftStore(Windows)で販売を計画している場合はやはり多言語対応したくなりますよね。
続きを読む