JavaScript

[Electron] アプリ起動時にスプラッシュ画面を表示する

アプリの本体のウィンドウが起動する前に、会社やアプリのロゴが表示される画面を見たことがある方も多いと思います。いわゆる「スプラッシュ」と呼ばれる画面です。今回はこちらの実装を行ってみます。

スプラッシュはブランディングなどが目的の場合もありますが、裏側でこっそり通信を行っている場合もありますね。またはここでファイルをメモリ上にロードする場合もあります。
続きを読む

[Electron] 設定情報をローカルファイルに簡単保存 – electron-store

設定情報やちょっとしたデータの管理にレンダラープロセスの場合はWebStorageやIndexedDBが利用できますが、メインプロセスでは自力でファイルに保存する処理が必要でちょっと面倒。そんな時に利用するのがelectron-storeです。手軽にデータの永続化ができます。

今回はこのelectron-storeを利用しウィンドウの位置とサイズを記録、次回起動する際に復元するサンプルを作成します。

続きを読む

[JavaScript] 文字列中の絵文字だけをHTML Entityへ変換する

Webブラウザ上で文字列中に含まれたUnicodeの絵文字だけをHTMLEntityへ変換します。

const text = '🍣がうまい😁!';          // 対象の文字列
const result = emoji2HTMLEntity(text);  // 変換

console.log(result);

以下のような実行結果になります。

例えばすでに存在するMySQLのテーブルにデータがutf8で保存されており、すぐにutf8mb4に移行できないような場合に活躍するかもしれません。

続きを読む

[Electron] 自動アップデートに対応する – electron-builder + AWS S3

アプリを起動すると自動的に最新版があるか確認し、もし更新されていれば自動的にバージョンアップしてくれる機能を実装します。

いくつか方法はあるのですが今回は

  1. electron-builderの機能を使う
  2. ビルドしたアプリはAWS S3へアップ
  3. 更新があるとユーザーの確認無しでダウンロードしちゃう

という方向でまとめていきます。
続きを読む

[Electron] ログをファイルに記録する – electron-log

開発中はconsole.logで見れば良いのですが、ファイルにも情報を記録しておきたい場合にelectron-logを利用すると非常に簡単にログを記録することができます。

const log = require('electron-log');

log.info('Hello, log');
log.warn('Some problem appears');

以上です。めっちゃシンプルじゃないですかw?あとはOSによってログを保存するのによく利用されるディレクトリへ自動で保存されます。

今回はelectron-logのもう少し詳しい使い方を見ていきます。
続きを読む

[Electron] ダイアログで指定したファイルに保存する

前回はファイルダイアログで読み込みを行いましたが、今回は保存を行います。

今回もOSの機能を利用するダイアログの表示とファイルを読み込む部分はメインプロセスが担当し、それ以外の部分をレンダラープロセス(Chromium上で動いている箇所)が行うことにします。レンダラーでもOSの機能を利用できますがメインプロセスに任せた方が役割分担がはっきりして個人的に気持ち良いためです。

※「読み込み」が行いたい方はこちらの記事を参照ください。
続きを読む

[Electron] ダイアログで指定したファイルを読み込む

今回はファイルダイアログでファイルを指定しその内容を読み込んでみます。

Electronで実装するにはいくつかのパターンがありますが、ここではOSの機能を利用するダイアログの表示とファイルを読み込む部分はメインプロセスが担当し、それ以外の部分をレンダラープロセス(要はChromium)が行うことにします。レンダラーでもOSの機能を利用できますがメインプロセスに任せた方が役割分担がはっきりして個人的に気持ち良いためです。

※「保存」が行いたい方はこちらの記事を参照ください。
続きを読む

[Electron] メニュー「アプリについて」をカスタマイズする

メニューからWindowsなら「ヘルプ」→「(アプリ名)について」、macOSなら「(アプリ名)」→「(アプリ名)について」とたどるとアプリのバージョン情報や製作者名が表示される機能をElectronではAboutPanelと呼びます。

今回はこのAboutPanelの表示内容をカスタマイズします。

続きを読む

[Redmine] 外部サイトへのリンクを新規ウィンドウで開く

RedmineのチケットやWikiなどで外部サイト(Redmineとは異なるドメイン)へのリンクの場合、新しいウィンドウで開く設定を行います。

今回はView Customizeプラグインを利用して実装します。インストール方法などは以下の記事をご覧ください。


続きを読む

[Redmine] ログイン時にかっこいい効果音を鳴らす

小ネタです。
Redmineのような作業工程を管理するソフトって人間扱いされてない感じがして、ぶっちゃけテンション上がらないじゃないですかw というわけでログイン時にかっちょいい効果音をバーン!と鳴らして少しでもモチベーションを上げたいと思います。

……え?迷惑だって?それが目的です←

ここではView Customizeプラグインを利用して実装します。インストール方法などは以下の記事をご覧ください。


続きを読む