なんか書いていこうぜー.com

Let's write something good

Toyama.rb#35年末LT大会に参加した

Toyama.rb#35 年末LT大会 に参加してきた。Toyama.rb は 2 回目の参加。

最近 JavaScript しか書いていないが、Toyama.rb なので Ruby ネタがいいなと思って Webpack…Webpacker か……そういえば内部の webpack.config.js が見たいと思っていたな……ということを思い出したので、この日のために試した話をしてきた。

水曜に作ってみた gem WebpackerConfigShower で試した結果から、webpack.config.js の plugins の箇所が JSON.stringify されたかたちで出力されてしまう、という結果になった。(他にもあるけど、ここが一番痛い)

いや、なんか綺麗にだせればいいんだけど、いわゆる webpack.config.js の本来のかたちである、plugins の オブジェクトをいい感じに展開しないかたちで表示するのは難しいんじゃないかな?できてたら、みんなやってそうだし。

飛天(Feitian) ePass FIDO を Arch Linux で使ってみた感想

先日、東京出張の新幹線内で「あ、セキュリティキー買ってみよう」と思い立って発注したので記録。

おそらく、YubicoYubiKey のほうがインターネット上は情報がいっぱいあるためメジャーだと思うが、1) 初めて使う、2) Linux で動かすのでもしかして動かないかもしれないので安いほうがいいな、という理由で 飛天ePass FIDO®-NFC Security Key を買ってみた。

送られてきたブツの大きさはこんな感じ。説明書は裏のQRコードからダウンロードする。

動くようにする

挿すと光る。

が、USB デバイスとしては認識されているが、Google も Dropbox もデバイスキーとしては認識してくれない。

ググると、Feitian ePass2003 with OpenSC on ArchLinux に当たるも、もう abs コマンドはないし、epass 2003 は今回のデバイスではない。

Use yubikey on arch-linux · GitHub を見ると、「Feitian ePass FIDO」の文字があったので、これをそのまま導入したら見事認識された。

使ってみた

https://ftsafe.co.jp/products/fido/ にある、リンクから Google と Dropbox の設定画面に遷移して設定してみた。ブッ挿して、光ってるところ押さえると認証終わるので楽だ…番号入力しなくていいし。お値段も2000円ちょいくらいだしお手頃。

GitHub にも設定できるけど仕事のアカウントと別にしてないので、一旦現状使っているMFAデバイスのままにしてある。

まとめ

Arch Linux の場合、使い始めるには設定を加えないといけないので導入しやすいかと言われると :question: ではあるが、導入してしまうと諸々楽。

Arch Linux で laptop の蓋締めても sleep しなくなった

アップデートした影響だとは思うのだけれども、ThinkPad の蓋を閉じても hybrid-sleep(suspend/hibernate) しなくなったのでちょっとググってみたところ、これがひっかかった。 これ書いてる5日前?らしい。

https://bugs.archlinux.org/task/60650

みると、systemd-boot 使うときにつくる conf を作ると workaround できるらしい。

https://bugs.archlinux.org/task/60650#comment174630 にあるファイルを作って、蓋締めたら簡単に寝た。

金沢に引っ越してリモートで働きはじめた

無量井がリモート勤務はじめます にあるとおり、8/27 から金沢から仕事を始めていました。 お仕事的なイベントも一周した感じなので、なんか書こうとこれを書いています。

muryoimpl drinkup vol.1 と愉快な飲み会たち

同僚が開催してくれた muryoimpl drinkup vol.1 に参加してくださった皆様、前哨戦を開催してくださった皆様、vol. 0.n にお誘いくださった皆様、両国近所の皆様、ありがとうございました。だいたい引っ越しと関係ない話しかしていない気がしますが、とても楽しい時間を過ごすことができました。本当にありがとうございました。

特にvol.1は大学時代の追い出しコンパを思い出しました。

1回の飲み会で16回の乾杯(うち成功1回) は忘れないと思います。(中身は全く覚えていませんが :angel:)

PC のインターネット速度が遅かったので、IPv6を無効にしたら速くなった

Google Wifi の速度チェックをするといつも速いのだけれども、PC でブラウジングするとやたら遅い、という状況に気がついたのでよく言われている IPv6 の無効をやってみた。

参考:

$ sudo vim /etc/sysctl.d/40-ipv6.conf
ipv6.disable_ipv6=1 # 書き加えた

$ sudo reboot

再起動して fast.com にアクセスしてみたら、17 Mbps からこのスピードになった。

ステルスSSIDに接続する(Arch Linux)

Arch Linux を使っている理由は、netctl と wifi-menu があるからだ、といっても過言ではないのですが、いわゆる ステルスSSID に接続するときのやり方をすっかり忘れていたので、メモ :memo:

答え

答えは /etc/netctl/examples/wireless-wpa にある。

Description='A simple WPA encrypted wireless connection'
Interface=wlan0
Connection=wireless

Security=wpa
IP=dhcp

ESSID='MyNetwork'
# Prepend hexadecimal keys with \"
# If your key starts with ", write it as '""<key>"'
# See also: the section on special quoting rules in netctl.profile(5)
Key='WirelessKey'
# Uncomment this if your ssid is hidden
#Hidden=yes ←これを有効にする
# Set a priority for automatic profile selection
#Priority=10

Hidden=yes を追加・有効にしたプロファイルを "#{ワイヤレスインターフェース名}-#{SSID}" という名前で /etc/netctl/ 以下にプロファイルとして作成し、 sudo wifi-menu からSSIDを選択することで無線LANに接続できる。

例) /etc/netctl/wlp4s0-totate-inn0001

接続設定を思い出せなかった言い訳理由

sudo wifi-menu してその中でプロファイルを作成すると、以下のようなプロファイルが作成される。

Description='Automatically generated profile by wifi-menu'
Interface=wlp4s0
Connection=wireless
Security=wpa
ESSID=totate-inn0001
IP=dhcp
Key=XXXXXXXXX

このときに、Hidden=yes のコメントがないため、wifi-menu から作成したプロファイルをコピーして作成すると、なんだっけ?ってなる。

仮に、ステルスSSID だったとすると以下のようになる。

Description='Automatically generated profile by wifi-menu'
Interface=wlp4s0
Connection=wireless
Security=wpa
ESSID=totate-inn0001
IP=dhcp
Key=XXXXXXXXX
Hidden=yes #← これを追加する

/etc/netctl/examples 以下には、静的IPその他の例もあるので、ファイルを確認することをオススメします。

参考:
https://wiki.archlinux.org/index.php/netctl https://wiki.archlinux.jp/index.php/Netctl

ふりかえり 2017

2017 年にやったこと

2018 年にやりたいと思っていること(仮)

vmlinuz linux not found が発生した

急に訪れた OS が起動しない問題… systemd-boot で Arch Linux を選択すると、vmlinuz-linux not found って言われて起動しない…

何が起こっているか確認する

中がどうなっているかみえないと話にならないので、USB メモリ等外部から起動できるメディアを使って起動する。私は Arch Linux インストールしたときに使ったイメージをそのまま利用した。 メディアから boot させて、/ パーティションと /boot パーティションを /mnt/mnt/boot に mount して arch-chroot してみた。

mount した時点でわかるのであるが、/boot/vmlinuz-linux がいない…

vmlinuz-linux をつくる

https://bbs.archlinux.org/viewtopic.php?pid=1654261#p1654261 にあるとおり、pacman -S linux したった。無事 /boot/vmlinuz-linux が作成された。

なぜ消えたのかはわかっていない… 再起動したのも久しぶりだったしわからぬ… linux アップデード時に失敗した?

ついでに

ArchWiki 英語版の systemd-boot を見ていたら、 systemd-boot がアップデートされたら、bootctl update って手動で更新する必要があるとか書いてある。もちろん、手動とか忘れるんで自動で pacman hook を使って更新するようにしてみた。

Automatically にあるように、systemd-boot-pacman-hook を入れてみた。自分で書いてもいいらしいけど、こっちのほうが楽。

教訓

外部メディアからブートできる手段があるの大事 :exclamation:

webpacker の loader 設定の変更

webpacker は以前は install 時にファイルを出力して直接 webpack の設定を変更できたのであるが、現在は webpack の設定を @rails/webpacker という npm package 内にあらかじめ持った loader の設定を load して利用している。

あらかじめ設定されているものをloadするので、使う側は簡単といえば簡単なのであるが、変更を加えようとすると Ruby の世界にないのでオープンクラスほどさっくりといかない。

前提

webpacker 3.0.2, もしくはこれを書いているときの master 8940b2cd8714f666cb4b2a14d5182daa976cfaa6 をもとにしている。

webpack の設定を変更する

config/webpack 以下に js ファイルがあるので、これらをいじって設定を変更する。

% ls -la config/webpack
合計 16K
-rw-r--r-- 1 muryoimpl muryoimpl  93 10月 15 01:57 development.js
-rw-r--r-- 1 muryoimpl muryoimpl 338 10月 15 04:34 environment.js
-rw-r--r-- 1 muryoimpl muryoimpl  93 10月 15 01:57 production.js
-rw-r--r-- 1 muryoimpl muryoimpl  93 10月 15 01:57 test.js

今回は全環境に対して変更を加えるものとして、environment.js に変更を入れる。

environment には、Environment class のインスタンス が入っていて、environment.loaders は webpacker/package/loaders ディレクトリのloaderの設定内容が Map になって格納されている。

それぞれのファイル名が Map の key, loader の rule が value になっているので、それを上書きするなり置換するなりしてあげれば更新されるはず。

例えば↓のような感じ。 TypeScript の tsx を jsx に変換した後の jsx を babel で処理したいと思ってこうしてみた。新しい設定はテキトーな名前の key で反映されたっぽいので特に何も考えてない。

--- a/config/webpack/environment.js
+++ b/config/webpack/environment.js
@@ -1, 3 +1, 8 @@
const { environment } = require('@rails/webpacker')

+const tsloaderConf = { test: /\.(ts)?(\.erb)?$/,  loader: 'ts-loader' }
+const tsxloaderConf = { test: /\.(tsx)?(\.erb)?$/,  loader: 'babel-loader!ts-loader' }
+environment.loaders.set('typescript',  tsloaderConf)
+environment.loaders.set('tsx',  tsxloaderConf)
+
module.exports = environment

とりあえずこれで動いたっぽいのでこのままいくけど、webpacker には loader の設定を merge するような仕組み…はソースみた感じなかった気がするけど、実は公式的な方法があったりする?

作成中のアプリをReact 15 -> 16 にしたときにやったこと

アプリの開発を再開しようとしたら、JavaScript のテストが動かなくなっていたので直した。 webpacker を使っていて、webpacker自体をアップデートしたら React が 16 に上がってしまったので引きずられて直した、という事案…

このあたり の奮闘記である。

アプリ側には影響なかった

結論からいうと、(アプリ側はまだまだ作成中なのだが、)改修の必要がなかった。

テスト周りがReactのメジャーバージョンアップによっていろいろ影響を受けていたので修正の必要があった。 ちなみにテストは、Jest と Enzyme を使っていて、テストを流すとどうも component のテストでエラーが発生しているようだった。

ちょっと調べて対応したらテストが通るようになったので、記録しておく。

Enzyme のバージョンアップ と adapter の導入

どうも Enzyme の v3 を使わなければならない、かつ、v3 から “adapter” という概念が追加になっているらしい。

React のバージョンが 16 になっているので、その名も “enzyme-adapter-react-16” なる adapter を導入した。Enzyme の README に表があるので、その表にある adapter を導入すればよい。package.json にある Jest の設定に”setupFiles” を追加してテスト実行前に require しておきたいファイルを書いておく。

  "jest": {
     "testMatch": [
       "**/__tests__/**/*.test.js?(x)"
+    ],
+    "setupFiles": [
+      "./app/javascript/__tests__/helpers/setup-test-env.js"
     ]
   },

上の ./app/javascript/__tests__/helpers/setup-test-env.js に以下の記述を追加して、adapter を設定する。

+import Enzyme from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+Enzyme.configure({ adapter: new Adapter() })

react-test-renderer のアップデート

テストを流すと以下のエラーが出た。

Cannot find module 'react/lib/React' from 'ReactShallowRenderer.js'
      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at Object.<anonymous> (node_modules/react-test-renderer/lib/shallow/ReactShallowRenderer.js:16:13)

“react/lib/React” となっているってことはなんとなーく、React 16 に対応できていないっぽい。バージョン確認したら、15.6.1 だったので yarn upgrade-interactive したら 16.0.0 になってエラーが解消された。

polyfill の導入

React は Map と Set と requestAnimationFrame が必要なので、polyfill の導入がテストでも必須っぽい。 Map と Set は babel-polyfill か core-js で、requestAnimationFrame は raf の polyfill を導入するとよいらしい。

先に Enzyme の adapter を追記したファイルに、polyfill を import する。

+import 'babel-polyfill'
+import 'raf/polyfill'

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

まとめ

React を使っていたアプリ側の変更は必要なかったが、テスト周りは影響を受けていたので修正した。 enzyme, enzyme-adapter-react-16, react-test-renderer のアップデート・導入をして、テスト実行前に polyfill と Enzyme の adapter の設定を読み込ませることで解消することができた。