unhurried

コンピュータ関連ネタがほとんど、ときどき趣味も…

Electronでファイル選択ダイアログを実装する

Electronでローカルファイルの選択ダイアログを実装するときには、dialogモジュールのshowOpenDialog関数を利用します。HTML <input type="file"> を利用するとファイルの選択ダイアログの表示はできますが、ファイルパスは取得できません。

よく利用する引数

dialog.showOpenDialog([browserWindow, ]options[, callback])

  • browserWindow (BrowserWindow) 親となるBrowserWindowsオブジェクトを指定すると、モーダル(表示中に親のウィンドウを無効化する)ウィンドウとして表示できる。
  • options (Object)
    • title (String) ダイアログのタイトルに表示する文字列
    • defalutPath (String) 最初に表示するパス
    • buttonLabel (String) 選択ボタンに表示する文字列
    • filters (FileFilter[]) 選択対象のファイル種別
      • 例:filters: [{name: 'Images', extensions: ['jpg', 'png', 'gif']}]
    • properties (String[]) ダイアログの機能
      • openFile ファイルを選択する
      • openDirectory ディレクトリを選択する
      • multiSelections 複数選択を許可する
  • callback 選択されたファイルパスの配列を引数に取るコールバック関数。省略した場合はshowOpenDialogメソッドの戻り値で配列が返却される。
実装例
const dialog = require('electron').remote.dialog;

let filenames = dialog.showOpenDialog(null, {
    properties: ['openFile'],
    title: 'Select a text file',
    defaultPath: '.',
    filters: [
        {name: 'text file', extensions: ['txt']}
    ]
});
参考

ダイハツ ブーンのグレード

最近はガソリン価格が高いので、消費税増税の前に燃費の良いコンパクトカーに乗り換えようと、少しずつ調べ始めています。 調べてみると同じ車種でも多くのグレードがあり、その違いはあまりわかりやすくまとめられていません。 私と同じくグレードで迷っている方の参考になるかもしれませんので、調べた内容をこつこつを載せてみようと思います。

ダイハツブーンのグレードの違い(4WD)

項目 X X Lパッケージ
価格(税込) 1,351,080円 1,453,680円
ドアミラー 電動格納式 オート電動格納式
ウインドシールドグリーンガラス UVカット機能付き UV&IRカット機能付き
リアドア・リヤクォーターガラス グリーンガラス UVカット機能付スモークドガラス
リアシート 一体可倒式 6:4分割可倒式
リアワイパー オプション(14,040円) 標準装備
エアコン オート マニュアル
メッキエアコンレジスターノブ なし あり
キー キーレスエントリー キーフリーシステム・リクエストスイッチ
プッシュボタンスタート なし あり

参考

Windowsでシェルを使う

調べてみた限りではMSYS2を利用するのが良さそうでした。セットアップ手順をまとめています。

端末で使うフォントをインストールする

端末のデフォルトフォントは読みにくいため別のフォントをインストールする。

MSYS2をインストールする

以下のURLからインストーラをダウンロードして実行する。

必要なパッケージをインストールする
pacman -Syu # パッケージを最新の状態にする
# 必要に応じてパッケージを追加する
pacman -S vim
各種設定ファイルを編集する

~/.minttyrc

BoldAsFont=no
Font=MyricaM M
FontHeight=11

Columns=90
Rows=40
CursorType=block
Scrollbar=none

Locale=ja_JP
Charset=UTF-8
Term=xterm-256color

CopyOnSelect=yes
RightClickAction=paste
BackspaceSendsBS=yes

IMECursorColour=255,0,0

~/.bashrc

# 下記部分のコメントアウトを外す
if [ -f "${HOME}/.bash_aliases" ]; then
  source "${HOME}/.bash_aliases"
fi

~/.bash_aliases

alias ls='ls --color=auto --show-control-chars --time-style=long-iso -FH'
alias ll='ls -lA'
alias la='ls -A'
alias vi='vim'
よく使うディレクトリへシンボリックリンクを作成する

msys2_shell.cmdの下記行のコメントアウトを外し、管理者権限で起動する。

rem To activate windows native symlinks uncomment next line
set MSYS=winsymlinks:nativestrict

lnコマンドでシンボリックリンクを作成する。

# 例:~/xxx -> C:\Users\xxx
ln -s /C/Users/xxx ~
参考

Angular 5 + Bootstrap 3でElectronアプリ開発

ElectronでAngular 5とBootstrap 3を使う方法をまとめました。ng-bootstrapngx-bootstrapはAngular 5には対応していないため、Bootstrap 3を動かすためにjQueryを使っています。

  • Electronをインストールする。
npm -g install electron
  • Electron用のプロジェクトを新規作成する。
npm init -y
{
  ...
  "main": "main.js",
  ...
}
  • main.js ではこの後に作成するAngularプロジェクトのビルドで生成されるindex.htmlを参照するように設定する。
'use strict';

const { app, BrowserWindow, protocol } = require('electron');
const path = require('path');
const url = require('url');

var mainWindow = null;

app.on('window-all-closed', function() {
  if (process.platform != 'darwin')
    app.quit();
});

app.on('ready', function() {
  mainWindow = new BrowserWindow({ width: 800, height: 600 });
  mainWindow.loadURL('file://' + __dirname + '/angular/dist/index.html');

  mainWindow.webContents.openDevTools();

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});
  • Angular用のプロジェクトを作成してBootstrapとjQueryをインストールする。
npm install -g @angular/cli@latest
ng new angular
cd angular
npm install bootstrap --save
npm install jquery --save
npm install @types/jquery --save-dev
{
  ...
  "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],
  "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],
  ...
}
  • angular/src/index.html にbaseパスを指定する。
    • baseパスを指定しない場合、Electronは相対パスをルートからの相対パスを解釈してしまうため。
...
<head>
  <base href="./">
...
  • angular/src/index.htmlでJQueryを読み込む。
    • Electronの問題でBootstrapと同じ方法では読み込めない。
...
<script>
window.jQuery = window.$ = require('../node_modules/jquery/dist/jquery.min.js');
...
  • Angularビルド後にelectronコマンドを実行するとアプリを起動できる。
ng build
electron ../
その他
  • Angular 5をangular-cliでインストールした状態ではnpm依存関係の警告が出ますが、これは今後のアップデートで解消されると思います。
my-app@0.0.0 C:\Users\tkykt\home\git\electron-angular-bootstrap
+-- UNMET PEER DEPENDENCY @angular/compiler@5.0.1
+-- UNMET PEER DEPENDENCY @angular/core@5.0.1
`-- bootstrap@3.3.7

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.1.3
npm WARN codelyzer@3.2.2 requires a peer of @angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0 but none was installed.
npm WARN codelyzer@3.2.2 requires a peer of @angular/core@^2.3.1 || >=4.0.0-beta <5.0.0 but none was installed.
参考

各銀行ATMでの硬貨預け入れ条件

私は普段は財布をポケットに入れているのであまり小銭を持ち歩きたくないのですが、現金でしか支払えないお店もあるので、どうしても小銭が溜まってしまうことがあります。そこで銀行のATMで簡単に硬貨を預け入れできないかと思い、各銀行(長野県内)の対応状況を調べてみました。

ゆうちょ銀行
  • 平日7:00~21:00 土日祝9:00~17:00
  • 一度の預け入れで計100枚まで
八十二銀行
みずほ銀行
三井住友銀行
  • 窓口に併設されたATMのみ

  • 平日8:45~18:00のみ

  • 一度の預け入れで計100枚まで

りそな銀行
  • 一部の店舗・機械のみ

  • 平日8:45~18:00のみ

長野ろうきん
  • 情報なし
長野銀行
  • 情報なし
松本信用金庫
  • 情報なし

SwaggerCodegenでAPIモックを作る

API仕様を定義するフォーマットとしてデファクトスタンダートとなりつつあるSwaggerを利用してAPIモックを作ろうとしたときにはまったところがありましたので、メモしておきます。

手順(Node.js)

(1) SwaggerCodegenをダウンロードする。

# Mavenリポジトリからjarファイルをダウンロードする。
wget http://central.maven.org/maven2/io/swagger/swagger-codegen-cli/2.2.3/swagger-codegen-cli-2.2.3.jar -O swagger-codegen-cli.jar
# helpを表示してみる。
java -jar swagger-codegen-cli.jar help

(2) Swaggerファイルからモック用のコードを生成する。

# -i Swaggerファイル
# -o 出力先ディレクトリ
java -jar swagger-codegen-cli-2.2.3.jar generate -i activation3.yaml -l nodejs-server -o nodejs
node nodejs\index.js
はまったところ
APIを呼び出したときに下記のエラーが出力される
Error: Cannot resolve the configured swagger-router handler: xxx
    at swaggerRouter ...
  • 私の場合の原因はコード生成時に変数名として利用される以下の項目にマルチバイト文字が使われていたためでした。
    • operationId
    • tags

参考

GoogleフォトがGoogleドライブに同期されないときの対処法

Googleフォトは画質設定を「高画質」にしていれば容量制限がないため、写真をたくさん取るけれども画質はそこそこで満足という方に適したサービスです。私はGoogleフォトとGoogleドライブの同期機能を使ってGoogleドライブにフォルダを作って写真を整理しています。ところがこの同期機能が厄介で、一部の写真がいつまで待っても同期されないという現象がときどき発生します。私の経験則では、このような場合には下記の手順で対応するのが良いです。

  • Googleフォトの写真を削除する(ゴミ箱に入れる)。
    • 正常に同期されている写真もまとめて削除しても問題ありません。
    • 正常に同期されている写真はGoogleドライブからも削除されます。
  • Googleフォトのゴミ箱から写真を復元する。
    • 多くの場合はこれでGoogleドライブに同期されていなかった写真が同期されます。
    • 正常に同期されていた写真はGoogleドライブでも同じフォルダに復元されます。
  • それでも同期されない場合は一度Googleフォトから完全に削除して再度アップロードする。
    • このときは正常に同期されている写真は対象から外した方が良いです。(Googleドライブの同じフォルダに復元することができないため。)

参考