キャッシュレスな生活をしたい

たまにはライフハック的な記事でも

現金を使いたくない理由

• 紙幣や小銭を探すために時間がかかる
• 所持金を補充するためにATMを利用する必要がある
  • 新生銀行はスタンダード会員の場合に1回あたり108円のATM利用手数料がかかるようになってしまった
  • ATMは順番待ちする場合もあり時間がかかる、セキュリティ上のリスクもある
• 支払い金額に対して所持金が不足している可能性がある
• 財布を持たないといけない
  • 小銭が増えるとかさばる
  • 財布の紛失リスク
    • 財布には現金以外に保険証やクレジットカード等も入っている

現金を使う場面と解決策を整理

• 自分が日々の生活で現金を利用する場面を整理した
• 下記以外の場面ではクレジットカードを使う（病院、家電量販店etc）
  • もちろん下記の場面でもクレジットカードは使えるが、サインや暗証番号を求められるので日常的に使用するなら代替手段を見つけたい
• 割り勘は人依存（Kyash使えるとそれで済む）

場面	頻度	急ぎ度	解決策
コンビニで買い物	毎日	高	Suica
スーパーで買い物	週2,3回	低	なし（クレジットカード）
ドラッグストアで買い物	週に1回	低	なし（クレジットカード）
スターバックス	週2,3回	中	スターバックスモバイルアプリ
外食（昼食）	週2,3回	中	なし（クレジットカード）
Suicaチャージ/定期券更新	月1,2回	高	JREカードで自動化

• 急ぎ度は始業前、業務中等は高くなる

問題点

支払い方法

• スーパー、ドラッグストアは店舗によってはSuica利用可だが自宅周辺の店舗は未対応
  • 諦めてクレジットカードで支払う？
• 大抵の飲食店はクレジットカードor現金しか選択肢がない
  • ランチだと1000円でお釣りなしの場合も多いのでクレジットカードの方が支払い速度が遅くなりそう

小銭の処分

• 現金を使う場面が減ると小銭は減りにくくなる。ただし現金を一切利用しないわけではないので小銭が増えることはある
• 自宅に小銭を貯めるスペースを作る or 募金箱に投入する？

理想はJREカード1枚 + 小さくて安価な財布

• JREカードはスマホケースに入れる
• 財布紛失時のリスクを最小に抑える
  • 財布の中は千円札数枚、少し遠出するなら新生銀行のキャッシュカードも持つ
• 財布はこういうイメージ？　もっと小さいのもあるかも

www.muji.net

所感

• ストレスフリーな完全キャッシュレス生活のためには下記のどれか、あるいは全部の実現が必要そう

  • クレジットカードの支払いが爆速になる
  • どこでもSuica支払い可能になる
  • PayPay等のスマホ決済サービスが普及する

• 現状では完全キャッシュレス生活の実現は難しいが、個人として可能な範囲では努力したい所存

bashでUnicodeコードポイントから文字を表示する方法まとめ

シェル芸に取り組んでいるとUnicodeコードポイントを操作して文字を表示させることが多いのでまとめ。

環境

• macOS Mojave 10.14
• GNU bash, バージョン 4.4.23

\uを利用する方法

• こんな感じのこと

$ echo -e \\u3043
ぃ

• bashでUnicodeのコードポイントを扱う - てきとうなメモが詳しい

数値文字参照を利用する方法

• こういう方法もある

$ echo 'ぃ' | nkf --numchar-input
ぃ

• 複数行に並べられたコードポイントを一括で文字に変換するときは便利かも？
  • 何となくワンライナーの見通しが良い

$ for c in $(seq 0x3042 0x3050); do printf "&#x%x;\n" $c; done | nkf --numchar-input
あ
ぃ
い
ぅ
う
...(略)

• 数値文字参照は、文字参照の1つ
  • 詳細はこちら文字参照 - Wikipedia
  • HTMLで<を<と表記する方法は文字実体参照と呼ぶとのこと（Dom Based XSSの回避策としても利用されるので、名前は知らなくても見覚えのある人は多そう）
• 10進数の場合は&#と;で、16進数の場合は&#xと;で文字集合のコードポイントを表記する

VSCodeで次の差分にジャンプするショートカットキー

環境

• macOS Mojave (10.14)
• VSCode 1.29.1

VSCodeのファイル差分の表示

• command + Pでコマンドパレットを開いてcompareと入力すると、いくつかのファイル比較機能が候補として表示される
• SI経験者にはお馴染みのWinMerge的な画面でWinMerge的なことができるので自分もたまに利用するが、たまに利用する程度なので次の差分へのジャンプとかできないのかなー、まあできなくてもいいかーと思って放置してた
• で、改めて調べてみたらちゃんとあった。デフォルトだとoption+F5で次の差分、shift+option+F5で前の差分にジャンプ
  • タッチバー有りのMacBookだと変更した方が楽かも

{ "key": "alt+f5",                "command": "workbench.action.editor.nextChange",
                                     "when": "editorTextFocus" },
{ "key": "shift+alt+f5",          "command": "workbench.action.editor.previousChange",
                                     "when": "editorTextFocus" },

シェルスクリプトの出力を画面に表示しつつファイル出力する方法について

環境

• MacOS
• GNU bash, バージョン 4.4.23(1)-release (x86_64-apple-darwin18.0.0)

ターミナル上の作業ログを取りたい場合

• scriptコマンドを使うとターミナル上の操作と出力を全てファイルに記録できる

$ script
Script started, output file is typescript
$ echo hoge
hoge
$ ls hoge
ls: cannot access 'hoge': No such file or directory
$ exit

• 下記のように入力と標準出力と標準エラー出力が全て記録されている

// typescript
Script started on Sun Dec  2 19:15:10 2018
bash-4.4$ echo hoge
hoge
bash-4.4$ ls hoge
ls: cannot access 'hoge': No such file or directory
bash-4.4$ exit
exit

Script done on Sun Dec  2 19:15:45 2018

実行するシェルスクリプトのログを画面に表示しつつファイル出力したい場合

• scriptは別プロセスを起動するのでうまく使えない
• .shファイル実行中の標準出力と標準エラー出力をログとしてファイルへ出力しつつターミナルの画面にも出力する
  • 下記のコードはこちらの記事（bashのプロセス置換機能を活用して、シェル作業やスクリプト書きを効率化する - 双六工場日誌）を参考にした¹

exec 1> >(tee -a stdout.log)
exec 2> >(tee -a stderr.log)

# 処理
echo hoge

• なる...ほど？
• シェルスクリプトに慣れ親しんでいないと分かりにくい（少なくとも自分は理解できなかった）
• 分解して考えてみる

リダイレクト

• 始めにリダイレクトの概念を知っている必要がある

リダイレクトは標準入出力の入力元、出力先を置き換える機能のこと

[三宅 英明 (2017) . 新しいシェルプログラミングの教科書 SBクリエイティブ P115より引用]

• 例えばecho hoge 1> hoge.logは標準出力をhoge.logにリダイレクトする
• 1はファイルディスクリプタの番号
  • 0:標準入力、1:標準出力、2:標準エラー出力
• 1>を省略すると>になるのでecho hoge > hoge.logでも良い

execコマンド

• 続いてexec

execに指定したコマンドを実行する。このコマンドを実行する際に，新しいプロセスを作成せずに，現在のジョブと置き換えて実行される。...また，何もコマンドを指定せずにリダイレクトを利用すると，現在のシェルのリダイレクトを切り替えられる。

【 exec 】 現行のジョブに置き換えてコマンドを続行する | 日経 xTECH（クロステック）より引用

• ここではコマンドを指定していないのでシェルのリダイレクトを切り替えている

プロセス置換

• <(command)と>(command)の2つがある

<(command)

• <(command)は、プロセス置換によって割り当てられたファイルにcommandの標準出力を出力
• シェル芸でも時々使う

$ echo <(echo test)
/dev/fd/63

$ cat <(echo test)
test

>(command)

• >(command)は、プロセス置換によって割り当てられたファイルの内容を標準入力としてcommandを実行
  • execと組み合わせることが多い模様
  • 今回はシェルの出力が、一時的に割り当てられたファイルへリダイレクトされ、それを標準入力としてコマンドが実行される

teeコマンド

• 最後にtee

  tee（ティー）はUnixのコマンドの一つ。 コマンドの標準出力 (stdout)を他のファイルにコピーできる機能を提供する。

tee (UNIX) - Wikipediaより引用

• 標準出力しつつファイルにも出力する
• 処理の流れがT字型のイメージ
• -aはファイルに追記のオプション

$ echo hoge | tee hoge.log
hoge

$ cat hoge.log
hoge

これらを踏まえて

• もう1度見てみる

exec 1> >(tee -a stdout.log)
exec 2> >(tee -a stderr.log)

• 現在のシェルの標準出力と標準エラー出力をそれぞれteeの標準入力にすることで画面に出力しつつファイルへの記録を実現している
• 処理の意味が理解できた！（と思う）

最後に

• シェルに詳しくないので他にも出力の方法はあるかも
• あとこの記事はチームスピリット Advent Calendar 2018 - Adventarの3日目の記事ということになってます
  • 今年は参加率高い！

---

1. 元記事のexec 2> >(tee -a stderr.log >&2)の>&2はどうして必要なのかよく分からなかった。知っている方いたら教えてください↩

varなしの宣言（初期化）が関数スコープになる場合について

JavaScriptの変数の宣言文について、何となく気になったこと。

• varなしの宣言で初期化された変数はグローバルスコープ
  • これはよく知られている仕様

(function() {
  foo = 1;
})();
console.log(foo); // 1

• varなしの宣言で初期化された（ように見える）変数でも、関数の引数なら関数スコープ
  • 関数スコープ内に引数の変数が予め宣言されているような動作っぽい

(function(foo) {
  foo = 0;
})(1);
console.log(foo); // Uncaught ReferenceError: foo is not defined

• varなしの宣言で初期化＝グローバルスコープに囚われていたので「あれ？」となった

引数に再代入する処理を書くとコードが分かりにくくなると思うので、あまり上のように書くことはないけど...

document.referrerでiframeからクロスドメインの親ページのURLを取得できる理由について

気になったので調べた内容をまとめた。

iframeからクロスドメインの親ページのURLを取得する

• document.referrerでできる（ほとんどのブラウザで動作するっぽい。Chrome, Firefox, Safari, Edge, IE11の最新版はどれも動いた）
• 同一ドメインの場合はdocument.location.hrefでもいける
• この違いは何なのか気になったので調べた

そもそもdocument.referrerは何を取得しているのか

• document.referrerはHTMLファイルの取得のために発行したHTTPリクエストのHTTPリファラを取得する

HTTPリファラとは何か

HTTPリファラ（英: HTTP referer）あるいは単にリファラは、HTTPヘッダの1つで、インターネット上の1つのウェブページまたはリソースから見て、それにリンクしているウェブページやリソースのアドレスを指す。

HTTPリファラ - Wikipediaより引用

• このブログを開いた際に発行されるHTTPリクエストのヘッダーにもHTTPリファラが含まれている

なぜdocument.referrerでiframeの親ページのURLを取得できるのか

• 親ページからiframeの内容を取得するために発行されるHTTPリクエストのヘッダーにHTTPリファラが含まれている場合が多いから（もしHTTPリファラが含まれていない場合は取得できない）
• 例えばiframeのタグは下記のようになるが、src属性にURLが指定されているのでページ描画時にリソース読み込みの対象になる

<iframe src="https://..."></iframe>

document.referrerにクロスドメイン制約がないのはなぜか

• document.referrerは値を書き換えてもHTTPリクエストは発行しない（既に発行済のHTTPリクエストのヘッダー情報を参照しているだけなので）
  • そもそもJavaScriptからは書き換えられない

document.location.hrefにクロスドメイン制約があるのはなぜか

• document.location.hrefで取得されるURLと実行時のURLのドメインが異なるとクロスドメイン制約に当たる
• そもそもクロスドメイン制約は、悪意あるJavaScriptが異なるドメインに対してリクエストを発行することを防ぐためにある
• document.location.hrefの値を書き換えると任意のURLに対してHTTPリクエスト(GET)を発行出来てしまうのでクロスドメインの場合は参照不可の仕様と思われる

HTTPリファラを制限できないか

• 外部に公開したくないURLからHTTPリクエストを発行する場合等、HTTPリファラを制限したいことがある
• ページ全体、リソース毎に柔軟に設定できる。詳細は下記にまとめられている。
  • Referrer を制御する - Qiita

所感

まだまだHTTPリクエストのヘッダーは分からない属性が多いので1つずつ理解していきたい

コンテナを中心にDocker、Herokuの基本概念を整理する

Docker、Herokuについてコンテナを軸に基本的な言葉の意味や概念を整理してみたいなあと思ったので書いた。引用中心なので詳細は各ページを参照ください。

そもそもコンテナとは何か？

コンテナは、リソースが分離されたプロセス内で、アプリケーションおよびその依存関係を実行できる、オペレーティングシステムの仮想化の 1 つの方法です。

コンテナとは – アマゾン ウェブ サービス (AWS)より引用

• OSのプロセスとスレッドの違いが曖昧な方はこちらも スレッド (コンピュータ) - Wikipedia
  • ちなみに並行（コンカレント）と並列（パラレル）の違いについては...（略）

コンテナ vs 仮想マシン

仮想マシン (VM) はサーバーハードウェアを仮想化し (直接管理する必要をなくす)、コンテナはサーバーのオペレーティングシステムを仮想化します。

• 上記の図はHypervisor型仮想環境上を例にコンテナと仮想マシンの違いを説明している（と思われる、特に明文化されていないので自分の解釈）
• 仮想マシンは上図のGuest OSからAppまでのこと
  • 図にはないけど仮想マシンという言葉はハードウェアの仮想化も含むと思う
• コンテナは（Guest OSにインストールされた）エンジン上のBins/LibsからAppまでのこと（＝仮想化されたOSを含むユーザ定義の実行環境）

コンテナとは – アマゾン ウェブ サービス (AWS)、Docker とは | AWSより引用

コンテナの利点

• 仮想マシンに比べて軽量
  • 軽量・効率的な理由は、例えばハードウェアの仮想化不要、各コンテナはプロセスとして起動等が挙げられる
• アプリケーションや開発環境のポータビリティ高
  • 配布可能、同一環境の再現が容易

DockerはコンテナのOS

Docker はコンテナに対するオペレーティングシステムです。仮想マシンがサーバーハードウェアを仮想化 (直接管理する必要をなくす) ように、コンテナはサーバーのオペレーティングシステムを仮想化します。Docker は各サーバーにインストールされ、シンプルなコマンドを使ってコンテナを構築、開始、停止できます。

Docker とは | AWSより引用

コンテナのオーケストレーション

• オーケストレーションはコンテナのクラスタリングとスケジューリングを指す

クラスタリング

そこで、多数のサーバーを組み合わせることがよく行われています。このような仕組みのことを、「クラスタリング」（Clustering）と呼びます。これにより、高い負荷がかかる処理を、複数のサーバーに分散することができ、システム全体の性能を高めることができます。また、多数のサーバーで同じ処理を実行できるようにしておけば、その中の1台のサーバーが故障などで停止したとしても、残りのサーバーで処理を続行することができ、システムを止めずに運用することができます。

https://blog.arena.ne.jp/docker/1868より引用

スケジューリング

• いつ、どのコンテナ作成・実行を行うか

Kubernetesはコンテナのオーケストレーションシステム

Kubernetes（クーベネティス/クーベルネイテス、よくK8sと略記される)は、コンテナ化したアプリケーションのデプロイ、スケーリング、および管理を行うための、オープンソースのコンテナオーケストレーションシステムである。

Kubernetes - Wikipediaより引用

Herokuはコンテナベースのクラウドプラットフォーム

Heroku は、マネージドコンテナシステムをベースとし、最新鋭のアプリのデプロイや実行に必要なデータサービスと強力なエコシステムを備えたクラウドプラットフォームです。

Heroku Platform as a Service & Data Services | Heroku | Herokuより引用

Herokuで使用されるコンテナdyno

Heroku で使用されるコンテナは「dyno」と呼ばれます。dyno はユーザーが指定したコマンドにもとづいてコードを実行するように設計された Linux コンテナであり、それぞれが相互に隔離された状態で仮想化されています。

Heroku Dynos | Herokuより引用

HerokuでDockerを動かす？

• DockerコンテナをHerokuプラットフォーム上で起動できる

  • Container Registry & Runtime (Docker Deploys) | Heroku Dev Center
  • ただしHeroku特有の制限がある

• Dockerコンテナ on dynoなイメージ？　実際にどういう構成になっているのかはよく分からない

感想

この手のサービスはチュートリアル通りに動かすのは簡単だが、そこから少しでも外れたことをしようとすると大変になりがち。そもそも自分がやろうとしていることとサービスの目的や方向性が合致していない場合もあり、試行錯誤する時間が無駄になることもある。サービスのベースになっている技術からサッと筋の良し悪しを判断できるといいですね...