小ネタです。
スマホを使いながら電車などで移動していると通信がプツプツ切れます。家でPCを使う場合と違って通信状況が安定しません。そんな時に活躍するのがブラウザがオンラインかどうかがわかる navigator.onLine です。
このプロパティを参照するだけでブラウザがネットワークに接続しているかチェックすることができるというわけです。
if( navigator.onLine ){
console.log('オンライン')
}
else {
console.log('オフライン')
}
WebStorageなどと組み合わせ、オフラインであればローカルにデータを一時的に保存し、オンラインになったら同期をするといった処理が実現できます。
小ネタです。
多くのスクリプト言語やシェルなどで実装されているsleep機能がNode.jsには存在しないため、使いたくなったら自分で用意する必要があります。いくつか方法がありますがお手軽なのはPromiseとsetTimeoutを利用した物です。
あっちこっちで使う場合は以下のように適当なモジュールを用意します。
/**
* sleep.js
*/
const sleep = (time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
}, time)
})
}
module.exports = sleep
小ネタです。
forEachは配列用のため、連想配列(ハッシュ)には通常使うことができません。そんなときにはObject.keys()を介すことで利用が可能になります。
const hash = {
apple: 100,
banana: 130,
orange: 98
}
const result = [ ]
Object.keys(hash)
.forEach(key => { result.push(`${key}: ${hash[key]}` )})
// [ 'apple: 100', 'banana: 130', 'orange: 98' ]
console.log(result)
every()とsome()は配列内の要素をテストし、条件を満たしていれば最終的にtrue、満たしていなければfalseを返します。
/**
* 偶数チェック
*/
const list = [1, 2, 3, 4, 5]
const check = value => ((value % 2) === 0)
// テストを行う
const check1 = list.every(check) // すべて偶数か (AND)
const check2 = list.some(check) // 一つでも偶数か (OR)
// 結果表示
console.log(check1) // false
console.log(check2) // true
every()はすべての要素が条件を満たしているかどうか、some()は一つでも満たしているかの違いになります。要はeveryがANDで、someがORですね。
続きを読む
map()を利用すると、元になった配列の要素を順番に処理していき新しい配列を生み出すことができます。mapは元になった配列を変更しません。
/**
* 2乗する
*/
const list = [1, 2, 3, 4, 5]
const newlist = list.map( value => value * value)
// [1, 4, 9, 16, 25]
console.log(newlist)
mapはよくforEachと比較されますが、forEachは戻り値を返さない特徴があります。戻り値を利用しない場合はforEachを使った方が一般的に高速に処理が行なえます。
reduce()は配列内の値を順番に処理していき、最終的に1つの値を生成することができます。
/**
* 配列の値をすべて足す
*/
const list = [1, 2, 3, 4, 5]
const sum = list.reduce( (prev, current) => prev + current )
// 15
console.log(sum)
returnした値が、次に処理する際のprevに入っています。returnする値は文字列や数値以外には配列やハッシュでもかまいません。初見だとちょっと理解しにくいかもしれませんねｗ
filter()は配列の要素を順番にテストしていきtrueが返された要素だけの新しい配列を返却します。
/**
* 配列から偶数だけを取り出す
*/
const list = [1, 2, 3, 4, 5]
const newlist = list.filter( value => ((value % 2) === 0) )
// [2, 4]
console.log(newlist)
falseになった場合は空の配列が返ります。Eletronでアプリを開発していると、ユーザーをWebブラウザに飛ばしたなるときがあります。
これ実装は非常にかんたんなのですが、最近はセキュリティの関係で描画以外の処理はメインプロセスで行う流れになってきていることもあり、今回はメインプロセスでイベントを補足して標準ブラウザで開くところまでをまとめます。
続きを読む
Electron v12で破壊的な変更がいくつか行われました。FLASH関係の廃止、レンダープロセスでremoteが非推奨になるあたりが話題になりますが、IPC通信時に一工夫する必要が生じたのが地味に面倒ですｗ
これまではレンダラープロセスからメインプロセスを呼び出す際にはipcRenderer.invoke()を実行するだけでしたが、これがそのままでは使えなくなりました。
const {ipcRenderer} = require('electron')
(async () => {
const value = await ipcRenderer.invoke('MyAPI')
})()
上記を実行すると次のようなエラーとなります。これはrequire()でもimportに限らずエラーメッセージが表示されます。
# requireでのエラーメッセージ
Uncaught (in promise) ReferenceError: require is not defined
# importでのエラーメッセージ
Uncaught TypeError: Failed to resolve module specifier "electron". Relative references must start with either "/", "./", or "../".
今回はElectron v12でもIPC通信が行えるコードを書いていきます。
続きを読む
SPA(Single Page Application)でWebページを開発している場合、ページの情報をJavaScriptで直接書き換えるたブラウザのアドレスバーに表示されているURLは常に同じです。これだとブラウザのバックボタン(戻るボタン)が利用できなかったり、ブックマークや外部からリンクを貼る際に非常に不便。
そこでHTML5から登場したWebブラウザの「履歴」を操作するHistoryAPIを利用することで、SPAにも関わらず情報が書き換わったタイミングでブラウザのアドレスバーに表示されているURLを書き換え、別のページに遷移したかのように見せることができます。
// example.com/foo から example.com/bar に変更
history.pushState({}, '', '/bar')
厳密にはpushState()を実行すると履歴が新しく追加されます。現在表示されているページの情報にURLを発行(定義)するイメージですね。
続きを読む
小ネタです。
titleタグの内容を指定した文字列に変更する場合は2つの方法があります。
まずはdocument.titleプロパティに直接値を代入する方法。基本的にはこちらを利用します。
document.title = 'foo'
次にtitle以外の要素を変更するときと同様にquerySelector()で返却されたHTMLElementを操作する方法もあります。
document.querySelector('title').textContent = 'foo'
指定したHTMLの要素を徐々に表示する「フェードイン」と、徐々に非表示にする「フェードアウト」をJavaScriptで実装します。
ここでは大きく2種類の方法を取り上げます。
HTML5から登場したWeb Animation APIを利用したものと、はるか以前から利用されてきたsetInterval利用する物です。IE11を対象としないのであれば前者の方が滑らかに動いてくれるのでおすすめです。
続きを読む
WindowsもmacOSも世界中で利用されていますし、日本国内にも外国語が母国語な方も大勢いらっしゃいます。そこで今回はElectronをユーザーの言語環境に合わせる国際化(i18n)を行ってみます。
Electron自体にはそのための専用の機能は用意されていないようなので、Node.jsで利用されているモジュールを利用するか、自分で用意する必要があります。今回は後者で行います。
続きを読む
アプリの本体のウィンドウが起動する前に、会社やアプリのロゴが表示される画面を見たことがある方も多いと思います。いわゆる「スプラッシュ」と呼ばれる画面です。今回はこちらの実装を行ってみます。
スプラッシュはブランディングなどが目的の場合もありますが、裏側でこっそり通信を行っている場合もありますね。またはここでファイルをメモリ上にロードする場合もあります。
続きを読む
設定情報やちょっとしたデータの管理にレンダラープロセスの場合はWebStorageやIndexedDBが利用できますが、メインプロセスでは自力でファイルに保存する処理が必要でちょっと面倒。そんな時に利用するのがelectron-storeです。手軽にデータの永続化ができます。
今回はこのelectron-storeを利用しウィンドウの位置とサイズを記録、次回起動する際に復元するサンプルを作成します。
続きを読む
