人生シーケンスブレイク

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

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リモコンが乾電池式だった為乾電池が大量に必要だった。その時にインターネットで丁度同年発売された eneloop が発売され話題になっていたので手を出したのがキッカケ。
Wiiのホワイトカラーと相まっていいデザインであったことと、TVリモコンなどの長時間の利用にも充分利用できた為、家で利用できる乾電池は殆ど eneloop に買い換えていった。

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

f:id:ShineSpark:20180423013311j:plain

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

自身の eneloop の最近の悩み

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

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

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

解決策の模索

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

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

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

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

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

※ 充電器ごとに仕様が異なり、 eneloop の充電器には寿命チェック機能がないので注意。

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

この急速充電器の機能

以前は NC-TG1 という2006年にセットで購入した充電器を利用していたので、かなりの改善があった。

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

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版

Django 2.x で Haml ライクなテンプレートを使う

Django記事シリーズ

の1つ目。

nyaruka/django-hamlpy を入れてHamlライクなシンタックスを実現する。

django-hamlpy は特にアナウンスされてないがDjango 2.0.3 でも動作が確認できた。また、Django 1.11.7でも以前に動作確認済み。
ちなみに上記のフォーク元の jessemiller/HamlPy はメンテされていないので現在は動かない。

導入手順

django-halmpyインストール

$ pip install django-hamlpy

補足: alpine環境でdjango-hamlpyインストールの際はgccmusl-devが事前に必要。

ENV RUNTIME_PACKAGES="gcc musl-dev"
RUN apk --update add $RUNTIME_PACKAGES

settings.py変更

テンプレートローダーへ追加

*.haml*.hamlpy ファイルをテンプレートとして読み込み可能にする為に、settings.pyのTEMPLATES内のloadersを以下のように書き換える。

TEMPLATES=[
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['./templates'],
        'OPTIONS': {
            'context_processors': [...] # 略
            'loaders': (
                'hamlpy.template.loaders.HamlPyFilesystemLoader',
                'hamlpy.template.loaders.HamlPyAppDirectoriesLoader',
            ), 
        }
    }
]

APP_DIRS オプションは loaders オプションと競合するので注意。

補足: テンプレートキャッシュを使う場合

本番環境などでテンプレートキャッシュを利用したい場合には、以下のようにする。

TEMPLATES=[
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['./templates'],
        'OPTIONS': {
            'context_processors': [...] # 略
            'loaders': (
                ('django.template.loaders.cached.Loader', (
                    'hamlpy.template.loaders.HamlPyFilesystemLoader',
                    'hamlpy.template.loaders.HamlPyAppDirectoriesLoader',
                    ...
                )),
            )
        }
    }
]

既存テンプレート書き換え

今回は Writing your first Django app, part 1 | Django documentation | Django の polls/index.html を例に書き換えしてみる。

Before: polls/index.html

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'polls/style.css' %}" />

{% if latest_question_list %}
    <ul>
    {% for question in latest_question_list %}
        <li><a href="{% url 'polls:detail' question.id %}">{{ question.question_text }}</a></li>
    {% endfor %}
    </ul>
{% else %}
    <p>No polls are available.</p>
{% endif %}

After: polls/index.html.haml

- load static

  %link{ rel: 'stylesheet', type: 'text/css', href: "{% static 'polls/style.css' %}" }

- 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.

views.py書き換え

template_nameを.haml付きに書き換える。

class IndexView(generic.ListView):
    template_name = 'polls/index.html.haml'

これでエラー無く表示できたらOK。

f:id:ShineSpark:20180312183805p:plain

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

Railsで、後からcounter_cacheを追加した時にcounter_cacheの初期値を入れたい

サービスリリース後に counter_cache を追加したので、既存レコードのcounter_cacheをリセットしたくなった。

やり方

reset_counters メソッドを利用するとカウンターリセットできる。

Room.reset_counters(id, :column)

子要素の要素数に合わせて修正してくれるので、数値ズレが出てしまった際にも利用可能。

reset_counters (ActiveRecord::Base) - APIdock

適用

Railsコンソール上で、以下のように叩くと全レコードのカウンターをリセットできる。

Room.all.each {|i| Room.reset_counters(i.id, :messages_count)}

レコード数がそれなりにある場合には、 find_each を使う方が良い。

Room.find_each {|i| Room.reset_counters(i.id, :messages_count)}

# バッチサイズを変更したい場合
Room.find_each(batch_size: 100) {|i| Room.reset_counters(i.id, :messages_count)}

migration file にそのまま書いてしまう場合はこう

class AddMessagesCountToRoom < ActiveRecord::Migration
  def up
    add_column :rooms, :messages_count, :integer, default: 0
    Room.find_each {|i| Room.reset_counters(i.id, :messages_count)}
  end
 
  def down
    remove_column :rooms, :messages_count, :integer
  end
end

メタプログラミングRuby

メタプログラミングRuby