JavaScript
Electron v12で破壊的な変更がいくつか行われました。FLASH関係の廃止、レンダープロセスでremoteが非推奨になるあたりが話題になりますが、IPC通信時に一工夫する必要が生じたのが地味に面倒ですｗ これまではレンダラープロセスからメインプロセスを呼び出…
SPA(Single Page Application)でWebページを開発している場合、ページの情報をJavaScriptで直接書き換えるたブラウザのアドレスバーに表示されているURLは常に同じです。これだとブラウザのバックボタン(戻るボタン)が利用できなかったり、ブックマークや外…
小ネタです。 titleタグの内容を指定した文字列に変更する場合は2つの方法があります。 まずはdocument.titleプロパティに直接値を代入する方法。基本的にはこちらを利用します。 document.title = 'foo' 次にtitle以外の要素を変更するときと同様にquerySel…
指定したHTMLの要素を徐々に表示する「フェードイン」と、徐々に非表示にする「フェードアウト」をJavaScriptで実装します。 www.youtube.com ここでは大きく2種類の方法を取り上げます。 HTML5から登場したWeb Animation APIを利用したものと、はるか以前か…
WindowsもmacOSも世界中で利用されていますし、日本国内にも外国語が母国語な方も大勢いらっしゃいます。そこで今回はElectronをユーザーの言語環境に合わせる国際化(i18n)を行ってみます。 Electron自体にはそのための専用の機能は用意されていないようなの…
アプリの本体のウィンドウが起動する前に、会社やアプリのロゴが表示される画面を見たことがある方も多いと思います。いわゆる「スプラッシュ」と呼ばれる画面です。今回はこちらの実装を行ってみます。 スプラッシュはブランディングなどが目的の場合もあり…
設定情報やちょっとしたデータの管理にレンダラープロセスの場合はWebStorageやIndexedDBが利用できますが、メインプロセスでは自力でファイルに保存する処理が必要でちょっと面倒。そんな時に利用するのがelectron-storeです。手軽にデータの永続化ができま…
Electronにはアプリがクラッシュした際に自動的にダンプファイルや各種情報を指定サーバへ送信する機能が用意されています。今回は受信サーバも含めて実装してみます。
Webブラウザ上で文字列中に含まれたUnicodeの絵文字だけをHTMLEntityへ変換します。 const text = '🍣がうまい😁！'; // 対象の文字列 const result = emoji2HTMLEntity(text); // 変換 console.log(result); 以下のような実行結果になります。 例えばすでに存在…
アプリを起動すると自動的に最新版があるか確認し、もし更新されていれば自動的にバージョンアップしてくれる機能を実装します。 いくつか方法はあるのですが今回は electron-builderの機能を使う ビルドしたアプリはAWS S3へアップ 更新があるとユーザーの…
今回はインターネット経由で配布したmacOS用のアプリが安全であることを証明するための作業を行います。 ぶっちゃけ面倒です← あとmacOSがないと作業できませんのでWindowsユーザーの方は（お小遣いを）準備してから挑んでください。
開発中はconsole.logで見れば良いのですが、ファイルにも情報を記録しておきたい場合にelectron-logを利用すると非常に簡単にログを記録することができます。 const log = require('electron-log'); log.info('Hello, log'); log.warn('Some problem appears…
前回はファイルダイアログで読み込みを行いましたが、今回は保存を行います。 今回もOSの機能を利用するダイアログの表示とファイルを読み込む部分はメインプロセスが担当し、それ以外の部分をレンダラープロセス(Chromium上で動いている箇所)が行うことにし…
今回はファイルダイアログでファイルを指定しその内容を読み込んでみます。 Electronで実装するにはいくつかのパターンがありますが、ここではOSの機能を利用するダイアログの表示とファイルを読み込む部分はメインプロセスが担当し、それ以外の部分をレンダ…
アプリの顔である「アプリアイコン」を設定します。 今回はelectron-builderを利用してビルドする際の内容です。 アイコン画像を設定するのは非常に簡単なのですが、個人開発しているプログラマー的には画像を用意するのが一番ハードル高いですねｗ
メニューからWindowsなら「ヘルプ」→「(アプリ名)について」、macOSなら「(アプリ名)」→「（アプリ名）について」とたどるとアプリのバージョン情報や製作者名が表示される機能をElectronではAboutPanelと呼びます。 今回はこのAboutPanelの表示内容をカスタ…
Electronでアプリの「メニュー」を作成します。 基本的にはElectronのドキュメントの内容に沿って、Electronに予め用意されている機能を利用しWinodwsとmacOSの両方に対応するところまでを取り上げます。
Electronでユーザーの言語環境を取得します。 日本国内で日本人向けにのみ公開する場合は何も気にせず日本語で実装すれば良いわけですが、AppStore(Mac)やMicrosoftStore(Windows)で販売を計画している場合はやはり多言語対応したくなりますよね。
RedmineのチケットやWikiなどで外部サイト(Redmineとは異なるドメイン)へのリンクの場合、新しいウィンドウで開く設定を行います。 今回はView Customizeプラグインを利用して実装します。インストール方法などは以下の記事をご覧ください。 blog.katsubemak…
小ネタです。 Redmineのような作業工程を管理するソフトって人間扱いされてない感じがして、ぶっちゃけテンション上がらないじゃないですかｗ というわけでログイン時にかっちょいい効果音をバーン！と鳴らして少しでもモチベーションを上げたいと思います。…
Redmineでチケットの作成や編集を行っている最中、題名などテキストボックスで間違えてエンターキーを押すと送信されてしまうことがありますよね。 もうストレスMAXでハゲ散らかしそうな勢いです。プロジェクトが終わるのが早いか、坊主になるのが早いかの戦…
Redmineのヘッダー部分に独自のメニューを追加します。 GoogleDriveやGitHubなど、プロジェクトで利用しているツールに移動するのが格段に楽チンになります。 今回はView Customizeプラグインを利用して実装します。インストール方法などは以下の記事をご覧…
前回はWebWorkerの中でも最もシンプルに並列処理を扱うことができる「専用ワーカー (Dedicated Worker)」について取り上げました。今回はiframeや他のウィンドウ(タブ)などから起動中のWorkerを利用することのできる「共有ワーカー(Shared Worker)」について…
JavaScriptは非同期処理だから、複数同時に処理してるんでしょ？……と思っていた時期がありましたｗ JavaScriptの非同期処理とは時間のかかる処理の待ち時間で他のことをやってしまおうという物で、雑に言うなら実行する順番をコントロールする仕組みのことで…
Webブラウザの状況が目まぐるしく変わっている昨今、常にすべてのブラウザへ対応出来るとは限りませんよね。というか現実的に出来ませんｗ そこで対応しているブラウザかどうかをチェックするわけですが、この手の判定は陳腐化してしまう恐れがあるため、事…
IndexedDBは様々なデータ型に対応しておりblobも例外ではありません。つまり画像ファイルなどバイナリ形式の保存が可能というわけです。IndexedDBへ格納しておけば例えオフライン状態であっても好きなときに取り出して利用することができます。 単純にサーバ…
ブラウザの内部にデータを保存する方法として、これまではCookieが使われてきましたがこれは主にサーバとのやり取りで利用する物。そこでJavaScriptから手軽に扱えるデータの保存領域としてHTML5ではWebStorageが登場しました。 今回はこのWebStorageの基本…
Socket.ioでチャット開発するシリーズも3回目。 前回はSocket.ioから送信されてきた発言内容が自分の物かを判定するプログラムを書きましたが、この仕様だと簡単に他人へのなりすましが出来てしまいます。今回はこれを防ぐ簡易的な方法を紹介しつつ、チャッ…
Quora回答シリーズです。 質問 フロントエンドの開発でBabelというツールは必須の位置づけなのでしょうか？Babelが不要な環境があれば教えて頂けませんか？ https://qr.ae/pNsn74 むしろ今後どんどん使われなくなっていくのではないでしょうか。 babeljs.io
白状すると私も日常的に広告ブロックツールを使ってますｗ PC版のChromeではAdBlockPlusの機能拡張を入れ、iOSのSafariでは最近AdGuardを利用しています。正直快適でもう手放せませんｗ ただこれがサイト運営者の収益を削っているのも事実。せめてサーバ代く…
