DEV Community: Takaya Kobayashi

Tofu キーボードを組み立てた

Takaya Kobayashi — Sun, 25 Nov 2018 07:07:03 +0000

https://kbdfans.cn/collections/diy-kit/products/tofu-hhkb-layout-hot-swap-diy-kit

KBDFans の Tohu HHKB Layout の DIY Kit を買った。ゲームメインの Windows 機ではずっと Majestouch の青軸を使っていたのだけど、買ったのが JIS キーボードを使っていた頃で自分の周辺機器で最後の JIS キーボードだった。JIS の配列を手が忘れかけてきていて、いい加減ストレスだったので US 配列のキーボードに換えたかった。

60%キーボードは群雄割拠で種類がたくさんある中で Tofu を選んだのは、PCB がホットスワップになっていて、プレートに HHK 配列のものがあって、ぐらい。Aliexpress で注文してから想像してたより早く到着した。5日ほど。

まずはスタビライザーを組み立て

この後は写真を撮るのを失念していて何もないのだけど、プレートにキーキャップを嵌めて PCB に挿し込むだけである。右上らへんが結構タイトで、挿すのが難しかった。

スイッチは遊舎工房さんで Kailh Speed Rose Pink をチョイス。

https://yushakobo.jp/shop/kailh-speed/

PCB に LED がついてて、LED をつけると結構綺麗だったのでクリアなスイッチにするか迷ったのだけど、家使いだし実用重視で。ホットスワップなので後から取り替えてもいいし。

QMK のファームウェアが使えるとのことだったので、Mac で書き込みをしようとしたけどうまくいかなかった。

https://kbdfans.cn/pages/qmk-instructions

を参考に、Windows で環境を構築した。qmkeyboard の GUI のエディタが使いづらかったので hex を Mac でビルドして、Dropbox で Windows に共有して書き込むようにした。GUI のエディタでソフトリセットのキーを仕込んでおくと裏蓋を開けてスイッチを押す必要がなくなるので、hex には必ずソフトリセットのキーを入れておくと便利。

何のキーが押されているかを確認するのは

http://keyboardchecker.com/

を使った。シンプルで使いやすい。

基本は HHK のキー配置を参考にしつつ、レイヤーに wsad でアローを入れたりレイヤーの左右 Shift に変換/無変換キーを配置して、MS-IME の設定で変換/無変換を押したら IME のオン/オフを設定しておくと Mac のように英数/かなを決め打ちで切り替えられるのでとても便利になった。

また、Windows の設定で US のキーボードを挿しても JIS のキーボードとして扱うようになっているようだったので、Windows の設定から「時刻と言語」のところからキーボードのレイアウトを US に変更すると素直に US のキーボードとして入力できるようになった。

今のお困りポイントは、PCB の左右に USB-C のポートがあるのだけど、右がとても不安定で左に挿したいのだけどケーブルの長さが足りなくて渋々右に挿している(ケーブルをサイバーマンデーで買おうという魂胆...)ことと、スタビライザーの挙動が怪しくてエンターキーは Lube を塗ったらそれなりに動くようになったのだけどスペースはキーキャップを嵌めるとキーが埋まって動かなくなってしまうこと。応急処置で1.5uくらいのキーキャップを装着してるのだけど、スペースがちょっと遠くて不便...。手元の7uのキーキャップは Pimp の Grabbag に付いてきたやつしかないのでキーキャップが歪んでるのかなー、ともおもったけどどう見てもスタビライザーの方がキースイッチの平行線上にない気がしていて、取り付け方を間違えたかな...とおもったり。ゆくゆく直したい。

あとは、ほぼ同時に組み立てた crkbd も触ってると別に複数uのキーって要らないなと思いはじめてきたので Planck みたいな1uオンリーで60%みたいなキーボードもいいかも、と。ただ、オーソリニアは使ったことがないので Normal staggered な40-60%あるといいなーとかとか。Zinc の数字列があるようなのが理想かも。

Metamask で Dev トークンの残高を確認する

Takaya Kobayashi — Tue, 28 Aug 2018 03:43:55 +0000

と、Ethrscan の URL が送られてきたものの、Metamask で Dev トークンの残高を確認する方法がよく分からなかったので。

Etherscan の ERC20(DEV) と書いてあるところが Dev トークンの情報が見れる URL のリンクになっている。

https://etherscan.io/token/0x98626e2c9231f03504273d55f397409defd4a093

ここの Contract というところがトークンアドレスのよう。

これを Metamask の トークンを追加 -> カスタムトークン の トークンアドレス のところにコピペ

すると、トークンシンボルと小数点桁数というところが補完されるので 次へ を押す

残高も確認できる。ここで トークンを追加 を押すと Metamask に Eth と並んで Dev という項目が追加される。

ゎ〜ぃ

Firebase Functions で Node.js 8 使えるようになったぞ〜〜〜！！！

Takaya Kobayashi — Wed, 01 Aug 2018 16:22:08 +0000

tldr

firebase-tools をアップグレードする
functions/package.json に "engines": { "node": "8" } を追加する
firebase deploy

経緯

https://cloud.google.com/functions/docs/concepts/nodejs-8-runtime でしれっと（？） Cloud Functions で Node.js 8 が使えることが書いてあって(あと Python)小躍りしながら試しました。

じゃあ Firebase Functions でも使えるんじゃね...?と調べてみても、全く情報が出てきませんでした。ウェブのコンソールからランタイムを変更できる、と書いてる記事もあったのですが自分のプロジェクトにはそういう項目はなく...。

firebase-tools のリポジトリを runtime で検索すると対応しているっぽい雰囲気がありました。しばらくコード追ったりした後に、最初に気付けばよかったんですが、リリースノートにちゃんと書いてありました。

https://github.com/firebase/firebase-tools/releases/tag/v4.0.0

まずはちゃんとリリースノートを読もうな！

余談

しばらく見ない間に TypeScript にもオフィシャルに対応していて firebase init で対話的にプロジェクトを作成する際に TS でスキャッフォルドを作ってくれるのでお手軽に型を付けられるようになっていた。かなりマトモな環境の Node.js 8 で動かすものを TS で書けるとなるとだいぶ選択肢に入ってくるのでは...?というカンジがした。まだ beta っぽいけどガンバッテほしい...!

Oculus Go で React 360 の開発をはじめられる

Takaya Kobayashi — Fri, 25 May 2018 16:33:30 +0000

Oculus Go を買った https://note.mu/jgs/n/nd31e52697614

ちなみに、この FANBOX の記事で NetflixVR は左上の Void theater というところからゴロ寝追従モードに入ってくれることをコメントで教えてもらったので快適になりました

Oculus Go にはそれなりなブラウザが搭載されていることを Oculus GoのブラウザについてのWeb開発者目線からのまとめ - Qiita　を読んで知ったので、WebVR はどんなもんかと見物するために買ったといっても過言ではない

だいたいの流れは上述の記事通りなのだけど、いくつかハマったので記しておく

まずは Oculus Go を開発者モードにする

これは UE4 Oculus GoでVRアプリの開発を開始するまでの方法 - Let's Enjoy Unreal Engine ここに詳しい

https://dashboard.oculus.com から団体を作るとスマホの Oculus アプリからデバイスの「その他の設定」から「開発者モード」という項目が出現するのでこれをトグルする

chrome://inspect/#devices にアクセスして USB を接続すると Chrome のインスペクタから見えるのだが、Pending authentication: please accept debugging session on the device. と表示されてなかなかアクセスできない

Oculus Go で許可すると見れるようになるらしいが、それらしいダイアログが全く表示されない

Oculus の Developer 向けのページを見ても Windows 向けの zip は公開されているが、Mac には特に言及がない

adb がいるのかな？と推測して Android Studio をインストールするも

✈ ./adb shell
error: device unauthorized.
This adb server's $ADB_VENDOR_KEYS is not set
Try 'adb kill-server' if that seems wrong.
Otherwise check for a confirmation dialog on your device.

などと表示されてなかなか接続できない

半ばヤケクソで再起動を繰り返していたらコントローラが認識されなくなる...

これも調べてみると Oculus のボタンと戻るボタンを長押しすると再度ペアリングしてくれるようだ

それからいろいろ探ってみるも、全く Oculus Go で許可できなくて、アプリから設定をいろいろ変えてみたりして再起動したタイミングで起動時に許可を求めるダイアログが出た！！！！！！！！！！

いろいろ探ってみるとどうやらアンロックパターンを設定するとデバッグを許可するダイアログが出ないみたいだ...

また、許可する際に「このマシンから常にデバッグできるようにする」にチェックを入れて許可してもアンロックパターンを設定すると吹き飛んでしまうよう

なので、インスペクトする際にはとりあえずアンロックパターンを削除するのが定石っぽい

このアンロックパターンを削除するのも結構鬼門で、「Oculus 暗証番号」とかいうのを求められるのだが、正規ルートをなぞってきてもそんな番号を設定したおぼえはない

仕方ないので「Oculus 暗証番号をリセット」からリセットするのだが、リセット画面では8桁以上の入力を求められるのに実際の暗証番号入力画面では4桁しか入力できない謎仕様で合ってるんだか合ってないんだかよく分からない番号をとりあえず入力するとアンロックパターンは削除できる...。

インスペクタは

こんな感じで、ゴーグルをかぶらなくてもデバッグできるので楽そう〜とおもった

が、ブラウザの360度モードに入ると console にエラーを上げて死んでしまうのだ...

しょうがないので360度モードの時はコンソールやネットワークだけをとりあえず見れる程度におもっておく

さて、WebVR のことはあまり知らないのでとりあえず普段使っている React の Learn Once Write Anywhere を試すために ReactVR を触ってみようとおもったら、知らない間に React 360 に改名していたようだ

ドキュメントを読むに、ReactVR は内部で使うことになって2つに分裂してしまったので元 ReactVR の方が React 360 になったらしい

チュートリアルに従って作っていく

リポジトリ: https://github.com/e-jigsaw/Hello360

適当なディレクトリを切って npm install react-360-cli

react-360 init Hello360 するとスキャフォールドを作ってくれて npm install がはじまるんだけど Electron のインストールとかもはじまって、何に使うんだ...みたいな気持ちになった

npm start すると localhost:8081 が立ち上がるのだが、シンプルな html が表示されるだけで何も出ない...

よくよくドキュメントを読んでみると localhost:8081/index.html にアクセスしろと書いてあるのでこちらを開くと CLI でビルドがはじまる

ビルドが完了すると360度見回せるビューが出現する!!

ソースを編集してリロードすると素早く反映してくれる謎技術。察するに React Native まわりの技術にのっかってる雰囲気がある

チュートリアルに従って VR ボタンを伴ったカウンターを作った

ブラウザの360度モードだと動画を撮影する手段が見当たらなくて困っている。解決方法を知っている方はコメントいただけると助かります...!!

とりあえず今日はこの辺で。作りたいものを考えはじめたんだけど、WebVR(標準は WebXR として策定されるらしい？)だと UI が Web のそれが全く通じない気がしたのでどういう UI がいいのか考えるのが楽しそう

Scrapbox Meetup #4 でも三次元で探索するにはどういう UI がいいか？という話題が LT で上がっていたが、確かに現在の Web のインターフェースは二次元で探索するのに適した UI だとおもうので三次元空間の面には持っていけるだろうが全体の体験の設計としては甘そう

Oculus Go のホーム画面の UI も結局ポインティングデバイスを使ってのソレなのでまだまだ、という感じがする

憧れ100%だけど

みたいな UI 作れるといいな...!!

published: false の記事供養 (2018/05 版)

Takaya Kobayashi — Fri, 25 May 2018 07:36:24 +0000

忙しさにかまけて、書き出しだけ書いてそのまま仕上がらなかった記事は Chrome のタブに開きっぱなしになっているのだけど、だいぶ日数が経って書き上がる気がしなくなってしまったのでまとめて放流して供養する。

Slack から Google Home を喋らせる

3月のはじめごろに Google Home Mini を買った。スマートスピーカーがブームになってきた頃は、みんなそんなに喋るスピーカーがほしいんだろうか？と懐疑的だったが、お試しで1台買った。我が家では、喋るラジオみたいな役職に就いて便利だったので1台買い増して居間と寝室の2台構成となった。

ところで、とても無益な話になってしまうのだが、私の妻は大変なものぐさで Slack で連絡をして通知音が鳴っても「なんか言ってるんだろうなー」とおもうだけで中身を確認してくれない習性がある。当人もその自覚があり、「Google Home 買ったんだしなんか伝えたい時は Google Home が喋れば聞いてやらんこともない(意訳)」というオーダーが入ったので日曜大工をがんばることになった。

いろいろ調べたが Google Homeの喋らせ方に書かれているように Google Home と同じネットワークの中に何らかの司令塔がないと喋れないようだった。

そこで、随分長らく買いそびれていた Raspberry Pi を買った。これもざざっと調べてスイッチサイエンスさんのスターターキット( https://www.switch-science.com/catalog/3559/ )を買った。ちゃちゃっと組み立てて刺すだけで Linux が立ち上がって少し感動した。ただ、我が家は HDMI のディスプレイを置いている位置には使える LAN ケーブルがなくて、運用の際には別の位置に置いて有線で使いたかったので、最初のセットアップを無線でやって ssh でログインできるところまでやって、勢いで有線で切り替える少々トリッキーなセットアップをした。祈りながら ssh がつながった時も少し感動した。

ささっと Node.js をインストールして、前掲の記事で紹介されていた https://github.com/noelportugal/google-home-notifier で様子を探ってみる。試しに喋らせてみると

Please fix your application to use the native API of Avahi!

というような WARN が出るが、調べると https://github.com/thkl/homebridge-homematic/issues/41 なんか大変らしい。

それはそれとして、google-home-notifier が日本語を話してくれない問題があってコード読んだらそんなに大したことをしてなかったので、自分で再実装することにした。

https://github.com/e-jigsaw/google-home-notifier

ここまで書いて力尽きていた。現在我が家は Slack から Telegram に移行してしまったので、Slack のシステムは止めてしまった。

Electron のアプリから TouchBar に UI をつくる

MacbookPro を新調して、TouchBar が搭載されたので何かできないかな〜とぼんやりおもってたら Electron で TouchBar を操作できる API が搭載されていることを知ったので触ってみる。Chrome Extension で特定ページで TouchBar に何らかを出して便利になったりすると面白そう。

https://github.com/electron/electron/blob/master/docs/api/touch-bar.md

この辺の Doc を読みつつ。

// ...
const touchBar = new TouchBar([
  new TouchBarLabel({
    label: 'test'
  })
])
// ...
mainWindow.setTouchBar(touchBar)
// ...

こんな感じで書くだけで Label が表示できた。

  new TouchBarButton({
    label: '➡️',
    click: () => {
      console.log('yo')
    }
  })

これで yo yo できるボタンが作れた。


  new TouchBarScrubber({
    items: [{
      label: 'foo'
    }, {
      label: 'bar'
    }],
    select: index => console.log(index),
    showArrowButtons: true,
    selectedStyle: 'background'
  })

セレクタはこんな感じ。

これもここで力尽きている。そもそも TouchBar まわりのドキュメントが少なくて、すぐにソース掘ったりしなきゃいけなくなったりしてまだ望みの UI というか、システムが作れていない。

Electron 製のアプリは2コぐらい並列して開発を続けているが、どちらもあまり時間が取れていなくて進捗がない...。

もっと下書きがあった気がしたんだけど、dev.to で下書いていたのはこの2本だった。
もっと継続的にアウトプットをデリバリーしていきたい...。

dig コマンドで TXT レコードを引いてくる

Takaya Kobayashi — Tue, 15 May 2018 04:49:36 +0000

dig -t TXT example.com

何かと必要になるでおなじみの TXT レコードがちゃんと設定されているか確かめる方法を知らなかったので備忘録として...。

前回の投稿からだいぶ日が空いてしまったけれど、dev.to に投稿しようとおもってざっくり書いたけど、まだ推敲してない投稿がたくさんあります...。

recompose で ref を扱う

Takaya Kobayashi — Tue, 20 Feb 2018 15:44:19 +0000

recompose を使うと見た目の component とロジックを切り離して書けるのでスッキリする、というような記事を先日書いた(Storybook Driven Development を試している)のだが、React の ref の使い方で大いにハマったので書いておく。

アプリケーションを作っていると、往々にして componentDidUpdate などで ref を参照したいということが発生する。普通に class で書いていると

class extends React.Component {
  componentDidUpdate() {
    this.textarea // => <textarea />
  }

  render() {
    return (
      <textarea ref={textarea => (this.textarea = textarea)} />
    }
  }
}

という風に書くが、recompose を使っていると

const enhance = lifecycle({
  componentDidUpdate() {
    // ???
  }
})

enhance(() => (<textarea ref={???} />))

というような形に分離する。この時、先に示したように ref で this に代入しても、componentDidUpdate の中では this は ProxyComponent となっていて ref が読み出せなくなってしまう。これを解決するためには、withHandlers を併用する。

const enhance = compose(
  withHandlers(() => {
    let refs = {}
    return {
      onRef: props => textarea => (refs.textarea = textarea),
      onUpdate: props => refs.textarea // として参照できる!!
    }
  }),
  lifecycle({
    componentDidUpdate() {
      this.props.onUpdate()
    }
  })
)

enhance(props => (<textarea ref={props.onRef} />))

これで recompose でも ref を取り扱うことができた。

Storybook Driven Development を試している

Takaya Kobayashi — Fri, 16 Feb 2018 17:14:35 +0000

前々から気になっていた Storybook を試して、プロダクトでも採用してみたので所感を書く。

ちなみに、Next.js を使っているけれど、.babelrc の設定とかをやっていれば start-storybook の -s ./ オプションで問題なく動いた。

動機

ここ数年、React を使って component ベースでウェブページを設計することを何度かやってきているが、未だにパスタコンポーネントが出来上がってしまう。そしてパスタコンポーネント群は往々にして開発がつらくなっていく...。

Storybook について

Storybook は動的にスタイルガイドを生成できるツールで、React だけではなく Vue や Angular にも対応しているよう。

@storybook/react をインストールして CLI から起動するだけでホットロードしてくれる画面が立ち上がって便利だった。

サンプルは https://storybook.js.org/examples/ でみれる。

アトミックデザインについて

(これが全てだろう)

(有名な図)

Storybook を書いていくときにある程度項目立てをしていった方がいいだろう、と考えた。そこで思い出したのが Atomic Design だった。昔、知った時は分類がややこしそうだと思ったが、一旦従ってみることにした。

開発フロー

まずは小物から Atom として Storybook に書いていく。状態によって変化するコンポーネントは状態を列挙して、Storybook 上で確認できるようにしていく。まずは Atom と Molecules たちが仕上がってくる。

各パーツが仕上がったら API とつなぎ込む必要がある Organisms など、動きをつけていく。ここで役に立つのが recompose である。

recompose について

recompose は Lodash ライクな React (特に HoC)向けのユーティリティベルト。

const enhance = withState('counter', 'setCounter', 0)
const Counter = enhance(({ counter, setCounter }) =>
  <div>
    Count: {counter}
    <button onClick={() => setCounter(n => n + 1)}>Increment</button>
    <button onClick={() => setCounter(n => n - 1)}>Decrement</button>
  </div>
)

こんな感じで見た目を司るコンポーネントのみを切り出せるように様々な関数が用意されている。

例えば React の Lifecycle 関数だと

const PostsList = ({ posts }) => (
  <ul>{posts.map(p => <li>{p.title}</li>)}</ul>
)

const PostsListWithData = lifecycle({
  componentDidMount() {
    fetchPosts().then(posts => {
      this.setState({ posts });
    })
  }
})(PostsList);

こんな感じで分離させることができる。

また、これらは compose 関数でこれらを組み合わせることもできる。

const enhance = compose(
  withState('counter', 'setCounter', 0),
  lifecycle({...})
)

enhance(Counter)

ゆくゆくは enzyme を使って Storybook 上で挙動の確認などもできるとよいのだけど、一旦 Storybook ではスタイルガイドに徹することにして

export const Counter = ({...}) => (...)

const enhance = compose(...)

export default enhance(Counter)

として、story では import {Counter} from '...' と読み込み、Pages からは import Counter from '...' と読み込むことで見た目のみのコンポーネントと、動き込みのコンポーネントに分けることができた。

見た目に関しては Storybook 上でパーフェクトに仕上がってるので、バチッと動くロジックを書けばうまいこと動くようになるので心地よかった。

今後の展望など

Storybook のドキュメントにも書いてある visual regression test をやってみたい。あとは、上にも少し書いた enzyme を使っての動きのテストなど。

まとめ

Atomic Design に従ったコンポーネント群を Storybook を使って見た目を仕上げてから、recompose を使って動きを足していく開発フローを導入してみている。

余談だけど、ざざっと Examples を見たら Wix の wix-style-react はものすごい使いやすいようにカスタムされていてすごかった...。オフィシャルに取り込んでほしいレベル。

Google Chrome で特定の要素を Scrapbox の記法に変換する Extension

Takaya Kobayashi — Sun, 11 Feb 2018 12:25:48 +0000

Scrapbox を半年以上ヘビーに使っていて、後から読み返すかもしれないページを scboloo を使ってページを作成して記録していたのだが、これでサムネイルを Gyazo って記録するとあとから検索する際に不便なので、コアになる部分を引用して記録したくて要素を選択する UI を Chrome の Extension として作った。

こんな感じで範囲を選択すると

[****** JavaScript の async/await の仕様をずっと誤解していた]
[**** [/jgs [https://res.cloudinary.com/practicaldev/image/fetch/s--HYyGI8aZ--/c_fill,f_auto,fl_progressive,h_50,q_auto,w_50/https://thepracticaldev.s3.amazonaws.com/uploads/user/profile_image/44253/ac941ba0-5a85-49d4-a642-43a73d72b8f0.jpeg] Takaya Kobayashi] Feb 08, 2018 [/ Updated on Feb 11, 2018] [/jgs/javascript--asyncawait---2l41/edit EDIT POST]]

[/t/javascript #javascript]
すごい初歩的なことかもしれないのだけれど、年単位ぐらいで誤解したままコードを書いていたので懺悔のためにも書いておく...。 何が違ったかというと、async function の扱いである。async function も
...

というような感じで Scrapbox フレンドリーなテキストがクリップボードにコピーされる。あとは Scboloo でページを作成して、ペーストする。あとは文章を辿りながら、要素要素で範囲選択をして [] でリンクを張っておく。これで後から格段に引きやすくなるとおもう。(たぶん)

JavaScript の async/await の仕様をずっと誤解していた

Takaya Kobayashi — Thu, 08 Feb 2018 04:54:10 +0000

すごい初歩的なことかもしれないのだけれど、年単位ぐらいで誤解したままコードを書いていたので懺悔のためにも書いておく...。

何が違ったかというと、async function の扱いである。async function も function と同じだとおもっていて、 Promise を返さないと呼び出し側で await できないと勘違いしていた。そのため、今までは

const fn = () => new Promise(async (resolve, reject) => {...})

というような感じで Promise を一旦返すようにしていた。しかし、async function は呼び出すと Promise を返してくれるのだ。

参照: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function

const fn = async () => {}

console.log(fn)
console.log(fn())

Node.js v9.5 で確認した。

[AsyncFunction: fn]
Promise { undefined }

Promise が返ってくる...。よくよく調べていくと async function の中で return すると Promise を resolve し、 throw すると Promise を reject することになるんだそうな。

const fn = async () => {
  return 'yo'
}

const main = async () => {
  const res = await fn()
  console.log(res)
}

main()

yo

const fn = async () => {
  throw new Error('err')
  return 'yo'
}

const main = async () => {
  try {
    const res = await fn()
    console.log(res)
  } catch (err) {
    console.log(err)
  }
}

main()

Error: err

まじか...。俺の Promise とはなんだったんだ.........。とても恥ずかしい.....。

ランダムに色を表示するだけのサービスをつくった

Takaya Kobayashi — Tue, 09 Jan 2018 15:49:51 +0000

https://color.kbys.tk/

野暮用でランダムな色がちょいちょい必要になったのでサクッと作ろうとおもった。

最近 unpkg.com という CDN を知って、ここでは npm に登録されているパッケージとバージョンを指定するとファイルが配信されるようになっている。面白いのが ?module を付けると ES modules に対応したかたちにトランスパイルされて送られてくるところ。

例えば https://unpkg.com/@angular/router@4.3.5/@angular/router.es5.js?module だと

// ...
import { BehaviorSubject } from 'https://unpkg.com/rxjs@^5.0.1/BehaviorSubject?module';
import { Subject } from 'https://unpkg.com/rxjs@^5.0.1/Subject?module';
import { from } from 'https://unpkg.com/rxjs@^5.0.1/observable/from?module';
import { of } from 'https://unpkg.com/rxjs@^5.0.1/observable/of?module';
import { concatMap } from 'https://unpkg.com/rxjs@^5.0.1/operator/concatMap?module';
import { every } from 'https://unpkg.com/rxjs@^5.0.1/operator/every?module';
// ...

というような感じで import 句のあとも unpkg.com にリライトされている。これを使って、手元でビルドせずにアプリを作ってみようとしたのだが、CommonJS で依存が書かれていると解決できないようで、自分好みのミニマルなライブラリは使えなかった。残念。

そこで、どうしようか迷った結果 preact-cli でパパッと雛形を作ってパパッと Netlify にデプロイした。

特に大層なことはしてなくて、素直に JS と CSS だけ書いたら形になるし便利な時代になった。

2017年振り返り

Takaya Kobayashi — Sun, 24 Dec 2017 04:31:40 +0000

以前の職場の同僚に Most active GitHub users in Japan でランクインしてるよって教えてもらって、これを書いている時点(2017/12/21)で96位とのこと。

GitHub の設定で Private Repository もカウントするようにしておいたお陰かもしれない。年末なので、今年何をコミットしてきたかを Public Repository の形跡を基にざっと振り返る。

e-jigsaw/babylon-sandbox

ちょうど昨年末から年初にかけて自由研究で BabylonJS を触っていた。この頃はまだ Yarn を使っていたようなので Node.js は v7 だったっぽい。BabylonJS 自体は結構難しかった。

e-jigsaw/webpack-chunkhash-sample

Webpack の2系が出て、webpack.config.js を試し書きしたりしていた。その際 chunkhash の設定で成果物がどう生成されるかを調べていたみたい。

余談だけど、この年末にかけて 📦 Parcel や microbundle など Webpack 疲れした人々がオルタナティブを作っているようで、Webpack が統一したかと思われていたバンドラ戦国時代はまた戦乱の日々に向かっていくのかもしれない。何度通った轍なんだ...。

個人的には npm が ES modules の CDN みたいな感じになってイイ感じに ES modules で読めるようになると嬉しいかもな〜。

e-jigsaw/react-redux-immutable-sample: react redux immutable sample

仕事で redux を使っていたが、イロイロ割れ窓を作ってしまった結果大変残念な仕上がりになってしまった経験を踏まえて、reducer が常に immutable の Record を返すようにすれば見通しが良くなるのでは...?と試行していた。結果的には不採用。

e-jigsaw/firebase-cloud-functions-sandbox: firebase cloud functions sandbox

Firebase の Cloud Functions を試していた。

e-jigsaw/aws-code-build-sample: aws code build sample, e-jigsaw/circleci-2.0-sandbox: circleci 2.0 sandbox, e-jigsaw/codefresh-sandbox

この辺は中身があまりないのだけれど、会社でビルド環境を検証していて AWS の Code Build や CircleCI 2.0, Codefresh を試行した。結果的にはインフラチームが自前 Drone 環境を作ってくれたのでそこへ移行していった。ただ、使う分には良かったが運用はとてもつらそうだったので微妙だったかも。

それまでは Docker Hub を使っていたり、GCP の Container Builder を使ったりしていた。CI 自体は Wercker で。そういえば、Wercker が Oracle に買収されたのも今年だったか。

e-jigsaw/json-refs-with-yaml-sandbox: json refs with yaml sandbox

仕事のプロジェクトでコンテナをフル活用していて、1つのリポジトリで用途に応じてコンテナを分けて使っていた。また、1リポジトリ内に関係する複数のプロジェクトをまとめて運用していたので

.
|--project
   |--A
      |--docker-compose.yml
   |--B
      |--docker-compose.yml

というように1リポジトリに複数 docker-compose.yml が存在している。

さらに、コンテナの tag と git の commit hash を揃えるようにして、docker-compose.yml では commit hash まで指定するようにしていたため、コンテナのバージョンアップをすると関係する docker-compose.yml を手でまとめて更新しないといけなくて、大変だった。

これを解決するために yaml から yaml を生成する簡単なスクリプトを書いた。yaml から yaml にする途中で json-refs をカマして $ref などでファイルを分割できるようにした。また、簡易な正規表現で {{FOO}} のような handlebars っぽいプレースホルダを書くと指定した値に書き換えるようにして、container-name:{{CONTAINER_REVISION}} とコンテナのリビジョンをまとめて更新できるようにした。

他にも wercker.yml や drone.yml などのファイルも管理下に入れていった。

というあたりが Public になってるコミット群だった。

芝は

こんな感じ。ちょっと下半期は失速気味だったかも...?

来年もガンバロー。