人生シーケンスブレイク

人生を楽してクリアしたい。当面はPython学習帳

Arlo Baby は Echo Spot 無しでも赤ちゃんの見守りカメラとしてめちゃくちゃいいよという話

結論から

Echo Spot が無くても Arlo Baby は優秀なので、見守りカメラを探しているならマジオススメ。

きっかけ

Echo Spot の予約注文が開始されたタイミングで予約しようとしたら、NETGEAR Arlo Q とセットでも予約を受け付けていた。
どうやらネットワークカメラと連携してビデオ通話できるようだった。

こんな感じで売ってた。

が、調べていく内に赤ちゃんの見守りカメラとして特化した Arlo Baby の方が良いなとの結論になり、こちらを購入した。

利用イメージ

こんな感じ。

f:id:ShineSpark:20180727021810j:plainf:id:ShineSpark:20180727021829p:plainf:id:ShineSpark:20180727021816p:plain
  1. ベッドに配置して
  2. リアルタイムに様子がチェックできて
  3. 温度や湿度などのエアコンディションもチェックできる

自分(夫)は出先でも様子がチェックできて、妻にとっては一瞬子供と離れる時でもiPadスマホで様子が見れるのでハッピー。

妻曰く、「泣いたら様子を見に行くのは変わらないのだけれども、料理中とかに、よく寝てるとか、起きそうとか、もぞもぞしてそろそろ泣き出しそうとかが分かるだけでも安心感が全然違う」とのこと。夫婦共に買ってよかったと思っている。

よかったこと

1. ストリーミング再生もできるし、録画再生もできる

まず会社からでもスマホで我が子をリアルタイムに見れる。優勝。

f:id:ShineSpark:20180727014704p:plain

それとは別に、モーションセンサーやオーディオセンサーに何かしらの反応があった場合に、その時の映像が1週間分は無料でクラウドに保存され、後から好きに再生できる。 f:id:ShineSpark:20180727013021p:plain

もしクラウドの録画映像を30日以上保存したかったり、センサーの反応に限らず24時間連続録画したかったら追加プランを選べば可能。

ただ普通に見守りカメラとして利用する分には無料でも充分見守れます。

2. スマホで見れる、タブレットで見れる。

自分の手元にあるものでは、下記のデバイスから見守りしている。

PCはブラウザからのアクセス。ストリーミング再生は要Flashの為自分の環境では見られない...が、録画映像は視聴できるし、そもそもスマホで見るので問題なし。 複数端末で見る場合には、その分だけアカウントを発行しておくとよい。

一時期格安な中国のネットワークカメラがクラッキングし放題という話題があったが、NETGEARはアメリカの会社だしデバイスにアクセスするのにも認証や権限コントロールができるのでその点でも安心だった。

3. センサーが良い

元々アメリカのガレージとかの防犯カメラ用途の製品の為か、モーションセンサーもオーディオセンサーもしっかりしている。設定はスマホから変更できる。

f:id:ShineSpark:20180727014221j:plainf:id:ShineSpark:20180727014235p:plain
柔軟に設定できるの図

オーディオセンサーの音声への反応も非常に優秀で、離れた所のくしゃみの音にも反応してしまうレベル。 感度は調整可能なので自分の使いやすいように調整するとよい。

ちなみに泣き声検知もあり、プッシュ通知有効にしておくとこんな感じで通知が届く。

f:id:ShineSpark:20180727015946p:plain

ギャン泣き中は通知がすごいことになるが、知らずに大事になるよりはマシかなと思ってる。

4. 暗い所でもはっきり見える

夜中とか結局全然動きを検知できなかったらやだなーとか購入前には思っていたのだけれども、使ってみてビックリしたのが夜間の視界。 左が所謂豆電球で、右が消灯中。

f:id:ShineSpark:20180727020639p:plainf:id:ShineSpark:20180727020644p:plain
左: 豆電球, 右: 消灯

周りの明るさにあわせて補完してくれているようで、 日中 -> 夕方 -> 夜間 いつでもはっきりしているし、豆電球ですらこんなに明るく映るのにビックリした。

5. 赤ちゃん向けっぽいウサ耳は外せる

ウサ耳、その内子供が大きくなったらダサいとかイヤだとか言われてしまうんじゃないかと購入時に心配になったけど、簡単に取り外しができる。 なので子供が大きくなった時には、リビングに置いて普通のネットワークカメラとして使ったり、防犯用途にしてもよい。

それに、5歳くらいまではそこまでダサいとか言われないんじゃないかと考えているのだが、5年間気軽に自宅の様子をチェックできる環境が19,800円なら充分だと思う。

また、ウサ耳以外の選択肢もある模様。

f:id:ShineSpark:20180727024902p:plain

6. 他にも機能がいっぱいある

スマホごしに赤ちゃんに呼びかけられたり、音楽鳴らしたり、ライトを付けたりいろいろできる。 公式サイト見るともっと分かると思う。

www.arlo.com

ということで、見守りカメラなら Arlo Baby がめちゃくちゃ良い。 Echo Spot 買わずとも既にタブレット端末を持っている人なら充分利用できます。むしろ電源ケーブル不要な分タブレットの方が見守り用途では向いているかも知れません。

macOS のキーリピート速度を変更する

Karabiner Elements や Hammerspoon ではキーリピート速度が変更できなかったので、他の方法で実現する方法を調べた。

キーリピート開始時間の設定

# 現在の設定値の確認
$ defaults read -g InitialKeyRepeat
15 # 15: 225ms

# 設定値の変更
$ defaults write -g InitialKeyRepeat -int 10

キーリピート間隔の設定

キーリピート開始後も長押しを続けている際に、文字を連続して入力する間隔の設定

# 現在の設定値の確認
$ defaults read -g KeyRepeat
2 # 2: 30ms

# 設定値の変更
$ defaults write -g KeyRepeat -int 1

どうやら1 = 15ms となっている模様。

参考

DvorakJP用のGoogle 日本語入力ローマ字テーブルを久々にアップデートして Emoji ( 絵文字 )対応した 🎉

Emoji 対応した Google 日本語入力ローマ字入力

github.com

DvorakJP用のGoogle 日本語入力ローマ字テーブルをつくった - 人生シーケンスブレイク で作ったDvorakJP用のGoogle日本語入力ローマ字テーブルを久々にアップデートした。

何気なく自分のリポジトリのフォーク先を眺めていたら、 Add emojis · tock203/dvorakjp-romantable@341d34f を発見したので、IME でも :muscle: みたいに Emoji を入力したい! - pockestrap を参考に自分のリポジトリにも Emoji 変換機能を実装した。

emoji.json のフォーマットが変わっていたことと。折角なのでPythonで書いてみるかとのことで自前で生成スクリプトを実装した。

できたもの: Emoji 入力

:tada と全角で入力しようとすると 🎉 に変換されます。

後ろの: は省略してもいいかなと思ったけど、:rose: 🌹, :rosette: 🏵 のように前方一致している候補がある為に確定できない要素があるので悩んでいる。

shortname_alternates がある際に、前方一致している名称の際には後ろの:は無くとも確定しても良さそうなので後で改善予定。

2018/05/02 追記

通常は後ろの : 無しでも入力可能だが、別の emoji 名の入力途中とも判断できる emoji には後ろの : が必要な仕様に改修した。
入力タイプ数が減るので何回も入力する分にはこちらのほうがよい。

:baseball    ⚾ # baseball に続く他のemojiが存在しない為、: 無しでも確定可能
:basketball:    🏀    # basketball に続く他のemojiがある為、確定の為に : が必要
:basketball_player  ⛹

取り込み方

dvorakjp-romantable/dvorakjp_prime_with_emoji.txt から Google 日本語入力のローマ字テーブルをダウンロードした後に、Google 日本語入力の環境設定を開き、

f:id:ShineSpark:20180424000921p:plain

Romaji table > Customize... をクリックして、

f:id:ShineSpark:20180424000945p:plain

Import from file... で先程のファイルを取り込むだけです。

謝辞

ということでお2人の情報を参考にさせていただきました。ありがとうございます 🙇

キーボード配列QWERTYの謎

キーボード配列QWERTYの謎

eneloop pro の充電器は eneloop の寿命チェックができて便利

結論から

最新の eneloop pro の充電器は、

  • 昔の充電器より充電時間が短い
  • 残量の異なる eneloop を複数本同時に充電しても1本ずつ充電できる
  • 買い替えの必要な電池を診断してくれる

のでマジオススメ。

自身の eneloop

Wii が発売した頃、Wiiリモコンが乾電池式だった為に乾電池が大量に必要だった。その時にインターネットでちょうど同年発売されたエネループが話題になっていたので手を出したのがキッカケ。
Wiiのホワイトカラーと相まったデザインであったことと、TVリモコンなどにも利用できた為、家で利用できる乾電池は殆ど eneloop に買い換えていった。

大体20本以上は eneloop を利用していた。

f:id:ShineSpark:20180423013311j:plain

今手元にある eneloop や充電器。既に捨てたり、TVリモコンに挿しっぱなしなので実際に買ったのはもっと多い。

自身の eneloop の最近の悩み

「1000回充電して使える!」というのが当時の eneloop の売り文句。が、発売当時から10年以上経過してきたことで寿命が来てしまったのか、

  • 充電してもすぐ切れる
  • 充電したつもりなのに、2本挿すとどちらかが使えない
  • 家に eneloop がいっぱいあるので、どの eneloop の寿命が近くなっているのか見た目から分かりづらい

などの課題を抱えていた。

解決策の模索

パナソニックニッケル水素電池の寿命判断は? PZ18097 - ニッケル水素電池&充電器 には、

充電池の寿命を測定するためには専用の測定器を使わないと正しく測定できません。(一般的には市販していない測定器です。)

と書いてあった。 今なら専用の測定器をインターネットで買えれば解決できるのではと検索してみたが、アスクルで8〜20万円の商品が出てきて途方に暮れていた。

しかし、よくよく考えてみると eneloop の充電器も2006年の購入以来殆ど買い替えていなかったので、Panasonic 移行後に充電器自体も改善されているのではないかと思い、現在販売されている充電器を調べてみたら eneloop pro の充電器に限り eneloop の寿命チェック機能が付いていたので購入することにした。

それが、この寿命チェックできるこやつ。

※ 充電器ごとに仕様が異なり、今市販されている eneloop の充電器でも寿命チェック機能がないものも多いので注意。

具体的には急速充電器 BQ-CC55 がこの寿命診断機能を持っている。他の充電器では持ってない。 気になる人は、単3形 エネループ 4本付急速充電器セット K-KJ55HCD40 商品概要 | ニッケル水素電池&充電器 | Panasonic から取扱説明書を確認するとよい。

この急速充電器の機能

NC-TG1 という2006年にセットで購入した充電器を利用していたのだか、そちらと比較するしてかなりの改善があった。

  • 充電が早い
  • 1本ずつ充電できる(他の充電器はこの記述がないので、恐らくいずれかの電池がフルになると充電が止まるものと思われる)
  • 買い替えチェックしてくれる(寿命になった電池を自動チェックしてくれる)

LEDが緑黄赤に点灯 / 点滅することで電池のステータスをチェックしてくれる。

f:id:ShineSpark:20180423021614p:plain
1本ずつ充電状況を表示してくれている図。1番右は黄色に点滅しており、 eneloop の買い替えをオススメしてくれていた。

f:id:ShineSpark:20180423021624p:plain
これは単4電池充電中の様子。

買い替えを診断するロジックは正直詳しくないため何ともいえないが、少なくとも問題がある eneloop であることと思われるし充分利用したのでリサイクルに出し処分した。

使い古した eneloop を取り除くことができるようになったことで、よりストレスの少ない eneloop の使い回しができるようになった。 組み込みバッテリーの機器が増加傾向であるものの、なんだかんだリモコンなどで乾電池利用はまだまだあると思うので、手元に古い eneloop がある人は、充電器の買い替えも検討してみると良いだろう。

Django 2.x で Rails みたいに jquery-ujs を使って二重submit抑止やconfirmをカンタンに実装する

Django記事シリーズ

の4つ目。

Django 2.x で Haml ライクな Bootstrap 4 を使う - 人生シーケンスブレイク 同様、npmでパッケージ管理し、node_modules/* 以下のファイルを static として読み込める前提。

やりたいこと

Django

  • 削除ボタンなどでconfirmを出す
  • submitボタン押下時に、ボタンをdisableにして連打を抑止する

などを実現したかった。

jquery-ujsをインストールする

github.com をnpm経由でインストールする。

$ npm install --save jquery
$ npm install --save jquery-ujs

インストールしたライブラリ中の jquery/dist/jquery.min.js と jquery-ujs/src/rails.js は、静的ファイルとして読み込めるようにしておく。 Django 2.x で Haml ライクな Bootstrap 4 を使う - 人生シーケンスブレイク 参考。

Templates側の編集

試しにこんな感じに書いてみる。 ソースコードはhamlpyインストール済みの為Haml

%script{ src: "{% static 'jquery/dist/jquery.min.js' %}" }
%script{ src: "{% static 'jquery-ujs/src/rails.js' %}" }

...

%button.btn.btn-outline-primary{ type: 'submit', data-disable-with: '送信中...', data-confirm: '本当に削除してもよろしいですか?' }
  送信

Rails + haml の時と同様、 data-disable-with にsubmit中にボタンに表示したいテキスト、 data-confirm にconfirm に出したいメッセージを書く。

できた

f:id:ShineSpark:20180323203804p:plain

ボタン押した時

f:id:ShineSpark:20180323204343p:plain

submit中

f:id:ShineSpark:20180323204515p:plain

ただここまでやるならRailsでいいんじゃないかな...

参考として、↓のリポジトリソースコードを公開しています。

github.com

みんなのPython 第4版

みんなのPython 第4版

Django 2.x で Sass / SCSS を使う

Django記事シリーズ

の3つ目。

で Sass / SCSS を使えるようにする。

以降のコードでは、 Django 2.x で Haml ライクな Bootstrap 4 を使う - 人生シーケンスブレイク まで実施したので Hamlpy や Bootstrap 導入済みだが別に無くてもOK。

必要なライブラリをインストールする

まず、 GitHub - jrief/django-sass-processor: SASS processor to compile SCSS files into *.css, while rendering, or offline. を参考にインストールを行う。

$ pip install libsass django-compressor django-sass-processor

# requirements.txt も更新しとく
$ pip freeze > ./requirements.txt

各ライブラリは、

となっている。

alpineでこれらをインストールするには以下を入れておけばよい。

FROM python:alpine

ENV RUNTIME_PACKAGES="gcc g++ musl-dev nodejs libxml2-dev libxslt-dev"
RUN apk --update add $RUNTIME_PACKAGES

hamlpy入れる為に記述したパッケージも含まれているので、Sass / SCSSだけなら musl-dev, nodejsは不要かも。

settings.py 編集

INSTALLED_APPSsass_processor を追加する。

INSTALLED_APPS = [
    ...
    'sass_processor',
    ...
]

下記も追加する。

# Sass(SCSS)
SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, 'static')
SASS_PROCESSOR_INCLUDE_FILE_PATTERN = r'^.+\.(sass|scss)$'
SASS_PRECISION = 8
SASS_OUTPUT_STYLE = 'compressed'
SASS_TEMPLATE_EXTS = ['.html', '.haml']

Bootstrapは SASS_PRECISION = 8 にしておく必要がある。

細かい設定は GitHub - jrief/django-sass-processor: SASS processor to compile SCSS files into *.css, while rendering, or offline. を参照。

Sass / SCSS 配置

先程のsettings.pyでは、 ./static をSASSのルートディレクトリにしたので、 ./static/stylesheets/style.sass にテストファイルを配置してみる。

body
  background-color: black

最近はSCSSよりSassの方が書いてて楽。

templates 編集

以下のコードはHaml

- load sass_tags

%link{ rel: 'stylesheet', type: 'text/css', href: "{% sass_src 'stylesheets/style.sass' %}" }

できた

以下のようになっていればOK. f:id:ShineSpark:20180323201450p:plain

参考として、↓のリポジトリソースコードを公開しています。 github.com

みんなのPython 第4版

みんなのPython 第4版

Django 2.x で Haml ライクな Bootstrap 4 を使う

Django記事シリーズ

の2つ目。

Django 2.x で Haml ライクなテンプレートを使う - 人生シーケンスブレイクdjango-hamlpyまで導入したものとする。

npm でパッケージ管理をする

JavaScript周りのパッケージは今後も入れる予定なので、npmでパッケージ管理を行う。

# packege.json ファイル生成
$ npm init

# パッケージインストールコマンド
$ npm install --save bootstrap

# bootstrapに必要な追加ライブラリもインストールする
$ npm install --save popper.js
$ npm install --save jquery

お好みで Font Awesome も入れてもいいと思う。

$ npm install --save font-awesome

インストールすると、/node_modules 以下にパッケージが入る。インストールしたパッケージはpackage.json, package-lock.json内にバージョンと共に保持される為、別環境では$ npm installコマンドを叩くだけで同バージョンがインストールされるようになる。

{
  "name": "django-test",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "bootstrap": {
      "version": "4.0.0",
      ...
    },
    "popper.js": {
      "version": "1.14.1",
      ...
    },
    "jquery": {
      "version": "3.3.1",
      ...
    },
    "npm": {
      "version": "5.7.1",
      ...

ライブラリをstaticアクセス可能にする

settings.py を編集し、/node_modules 以下のライブラリファイルに対して、/static/* でアクセス可能にする。

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
    os.path.join(BASE_DIR, 'node_modules'),
]

今回は /node_modules 以下はクライアント向けのライブラリしか利用していない & 簡略化の為にまるごと公開しているが、個別に公開してよりセキュアにしてもよいかも知れない。

ちなみに、Docker上で、ローカルの node_modulesとDockerコンテナ上のnode_modulesを共有したい場合には以下のように、 node_modules をマウントすればOK.

以下の例は docker-compose.yml + Dockerfileの構成。

  web:
    build: .
    command: python3 /code/manage.py runserver 0.0.0.0:8000
    ports:
      - '8080:8000'
    volumes:
      - ./mysite:/code
      - /code/node_modules
FROM python:alpine

ENV RUNTIME_PACKAGES="gcc musl-dev nodejs"

RUN apk --update add $RUNTIME_PACKAGES

RUN mkdir /code
WORKDIR /code

COPY mysite /code/

# for Django
RUN pip3 install -r /code/requirements.txt

# for Bootstrap
RUN npm install --verbose

Hamlファイルを編集する。

まずベースとなる base.html.haml を作り、ヘッダーやフッターはincludeして共通部分を作る。

layouts/base.html.haml

- load static

!!! 5
%html{ lang: 'ja' }
  %head
    %meta{ charset: 'utf-8' }
    %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1, shrink-to-fit=no' }
    %title
      - block title
        ああああ
    %link{ rel: 'stylesheet', type: 'text/css', href: "{% static 'font-awesome/css/font-awesome.min.css' %}" }
    %link{ rel: 'stylesheet', type: 'text/css', href: "{% static 'bootstrap/dist/css/bootstrap.min.css' %}" }
    - block stylesheets

  %body
    - include 'layouts/_header.html.haml'

    .main.container-fluid
      - block main

    %script{ src: "{% static 'jquery/dist/jquery.min.js' %}" }
    %script{ src: "{% static 'bootstrap/dist/js/bootstrap.min.js' %}" }
    - block javascripts

_header.html.haml

ヘッダー部分。 ちなみにhamlpyでハイフンを含むプロパティを宣言する場合には、'data-toggle': 'collapse' のようにクォートで括ればOK.

%header.header.navbar.navbar-expand-md.navbar-light.bg-light
  %a.navbar-brand{ href: "#" }
    Navbar
  %button.navbar-toggler.hidden-md-up{ type: 'button', 'data-toggle': 'collapse', 'data-target': '#navbar-text', 'aria-controls': 'navbar-text', 'aria-expanded': 'false', 'aria-label': 'Toggle navigation' }
    %span.navbar-toggler-icon

  .collapse.navbar-collapse#navbar-text
    %ul.navbar-nav.mr-auto
      %li.nav-item
        %a.nav-link{ href: "{% url 'polls:index' %}" } Poll


    %form.form-inline
      %input.form-control.mr-sm-2{ type:'search', placeholder: 'Search', 'aria-label': "Search" }
        %button.btn.btn-outline-success.my-2.my-sm-0{ type: "submit" }
          Search

index.html.haml

メイン部分。base.html.hamlをextendsすることで呼び出す。

- extends 'layouts/base.html.haml'

- block main
  - if latest_question_list
    %ul
      - for question in latest_question_list
        %li
          %a{ href: "{% url 'polls:detail' question.id %}" }
            = question.question_text
  - else
    %p
      No polls are available.

ブラウザから確認

以下のようになっていればOK. f:id:ShineSpark:20180322203912p:plain

上手くいかない場合には、Chromeの開発者ツールでJSやCSSが正しく読み込まれてれているかチェックすると良い。

f:id:ShineSpark:20180322204451p:plain

参考として、↓のリポジトリソースコードを公開しています。 github.com

みんなのPython 第4版

みんなのPython 第4版