Amazon Rekognitionを使うと画像や動画をAIで解析し、そこにどういった物体が存在しているか「ラベル」を付けてくれます。例えばジャイアントパンダが写っていれば「Giant Panda」というテキストと、画像内のどこに存在しているか座標情報が送られて来ます。…
Electron製のアプリは非常に簡単に内部のソースコードが閲覧出来てしまいます。これを認識していないと簡単にコピーアプリを作られたり脆弱性を調べられます。 今回はどれくらい手軽に行えるか実際にやってみます。ハリーポッターで言う「闇の魔術に対する防…
Electronで作成したWindows用アプリをインターネット経由で配布した場合に、悪い人に改ざんされておらず安全であることを証明するためにコード署名を付加します。 ここではelectron-builderを使った例になります。macOS用アプリの場合と比べれば、環境変数を…
インターネット経由で配布するWindows用アプリが改ざんされていないか検証することのできる「コード署名」を付けます。 Windows上でコード署名を行うにはいくつか方法はありますが、今回はsigntool.exeを利用した方法を試してみます。
Windowsでコード署名を利用したくて証明書を購入しようとしたのですが、国内の事業者はどこも個人だとためらう価格設定でげんなりしていたのですが、これが海外サイトを利用すると半額以下でゲットできてるという情報を目にしたため、恐る恐る挑戦してみまし…
Windowsで証明書関係の作業をしたくなったので、PowerShellから利用できるOpenSSLをインストールします。基本的にはインストーラーの言う通りに入れて環境変数を設定するだけです。
SPA(Single Page Application)でWebページを開発している場合、ページの情報をJavaScriptで直接書き換えるたブラウザのアドレスバーに表示されているURLは常に同じです。これだとブラウザのバックボタン(戻るボタン)が利用できなかったり、ブックマークや外…
小ネタです。 titleタグの内容を指定した文字列に変更する場合は2つの方法があります。 まずはdocument.titleプロパティに直接値を代入する方法。基本的にはこちらを利用します。 document.title = 'foo' 次にtitle以外の要素を変更するときと同様にquerySel…
小ネタです。 LinuxやmacOS上で特定サイズのファイルを作成するにはddコマンドを利用します。以下のコマンドを実行すると中身がすべてゼロの1kbyteのファイルを生成できます。 $ dd bs=1024 count=1 if=/dev/zero of=file1 $ ls -l total 8 -rw-r--r-- 1 kat…
AWS S3へ巨大なファイルをアップロードする際、より高速に転送するには「マルチパートアップロード」を利用することが推奨されています。また一定サイズ以上のファイルはSDKやREST APIからはそもそもPUTすることができません。 マルチパートアップロードとい…
指定したHTMLの要素を徐々に表示する「フェードイン」と、徐々に非表示にする「フェードアウト」をJavaScriptで実装します。 www.youtube.com ここでは大きく2種類の方法を取り上げます。 HTML5から登場したWeb Animation APIを利用したものと、はるか以前か…
海外の販売サイトから「コード署名証明書」を購入するのに「D-U-N-S Number」が必要になったので取得することにしました。 日本では東京商工リサーチさんが窓口になっており申請自体は大して難しくないのですが、先方の事務処理がグダグダだったので、これか…
WindowsもmacOSも世界中で利用されていますし、日本国内にも外国語が母国語な方も大勢いらっしゃいます。そこで今回はElectronをユーザーの言語環境に合わせる国際化(i18n)を行ってみます。 Electron自体にはそのための専用の機能は用意されていないようなの…
アプリの本体のウィンドウが起動する前に、会社やアプリのロゴが表示される画面を見たことがある方も多いと思います。いわゆる「スプラッシュ」と呼ばれる画面です。今回はこちらの実装を行ってみます。 スプラッシュはブランディングなどが目的の場合もあり…
設定情報やちょっとしたデータの管理にレンダラープロセスの場合はWebStorageやIndexedDBが利用できますが、メインプロセスでは自力でファイルに保存する処理が必要でちょっと面倒。そんな時に利用するのがelectron-storeです。手軽にデータの永続化ができま…
Electronにはアプリがクラッシュした際に自動的にダンプファイルや各種情報を指定サーバへ送信する機能が用意されています。今回は受信サーバも含めて実装してみます。
minidump形式のファイルの中身を覗きたくなったのでGoogle謹製のBreakpadをインストールしました。 macOSでインストールというとアイコンをドラッグ＆ドロップか、次へボタンを連打する方式を思い浮かべますが、残念ながらこの子はmakeコマンドでコンパイル…
Webブラウザ上で文字列中に含まれたUnicodeの絵文字だけをHTMLEntityへ変換します。 const text = '🍣がうまい😁！'; // 対象の文字列 const result = emoji2HTMLEntity(text); // 変換 console.log(result); 以下のような実行結果になります。 例えばすでに存在…
手前味噌ですが、自分のグローバルIPをコマンド一発で確認できる「showip」をついカッとなって作成しました。VPNやプロキシ経由で接続中に自分のIPがほんとに変わったか確認したかったのです。 $ showip 203.0.113.1 内部の処理的にはIPアドレスを表示してく…
※後日書きます そういえば「カワサキバイクマガジン」デビューしてました（・∀・） pic.twitter.com/YbYrIDihIc— 勝部麻季人 💦👏 (@katsube) December 31, 2020
アプリを起動すると自動的に最新版があるか確認し、もし更新されていれば自動的にバージョンアップしてくれる機能を実装します。 いくつか方法はあるのですが今回は 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)で販売を計画している場合はやはり多言語対応したくなりますよね。
ここ数日、SSHへのアタックが急激に増加した関係で特定のIPアドレスからだけログインできるよう対応しました。結論から言うと以下の設定を行うだけです。 特定のIPアドレスのみログインできる 特定のIPアドレスをブロックする hosts.allow|denyの書式 注意点…
