読者です 読者をやめる 読者になる 読者になる

新しいMacBook Proが届いたのでアダプタを幾つか購入した

新しいMacBook Proが届いたので、アダプタを見て回った。

  • 4Kディスプレイで60fpsで表示したい
  • ディスプレイにUSBハブが付いているので、USB 3.0とのアダプタが1個あると良い
  • 登壇するとき用にHDMI用のアダプタが1個欲しい
  • 外出するとき用にUSB 3.0用のアダプタが1個欲しい (急なiPhoneの充電用など)

という要件を整理した結果、以下のものを購入した。

京都市内で引越した

引越しの遍歴や気持ちなどについて。


引越し遍歴

今回京都市内で引越しをした。引越すたびにブログに記録を残している。場所は最寄りが出町柳駅なので、鴨川デルタとか京大の近くの辺り。東京などに住んでる人から見るとたまこマーケットやってる辺り。

過去の引越し遍歴はこういう調子で、振り返ってみれば短い期間で転々としている。前回の引越しは、元々卓球ハウスというシェアハウスを5人でやっていて、そこから急遽移転することになったので、あまり土地勘もないまま慌てて探した物件に転がり込んだ引越しだった。当時は急だったということもあり、とにかく京都に住むということだけは決まっていたので、大学生のときに何度か行ったことのある辺り、かつ周りに知人が多そうな辺りを適当に選んだ記憶がある。今回は比較的余裕もあったのでゆっくり選んで引っ越した。

シェアハウス譚

以前は2年半とはいえシェアハウスに住んでいたものだから、他人の存在に良い意味でも悪い意味でも緩く依存してしまっていて、その後の1年間の1人暮らしはなんというかこう、反動であまりまともな生活をしていなかった。シェアハウスのときは、昼にお腹を減らしていると丁度同居人もそういう感じの人が大抵いて、一緒にメシでも食いに行くとか、夕飯も休日は何か適当につくるとか、暇そうだったら地下でちょっと卓球するかとか。

人が二人以上場に存在していると、意識していなくてもある程度勝手にリズムが生まれるというか。シェアハウスにいたときはそれが当たり前だから認識できていなかったことなんだけれど、適度に心地よいレベルの外的要因が働きかけられていた。そういう類のものがある日急になくなったものだから、比較的多くの人が持ち合わせているような、自分で生活を駆動していく能力というものが半ば失われている状態で、ここ1年間ぐらいはその状態を引き摺りながらズルズルと生きてきていた。

生きてきたとか言うと大袈裟な感じがするけれど、生きをやるぞと思いながら自覚的に生きているような人はいなくて、年月が経ってみてから振り返ることで、ああ自分はこういう風に生きてきているのだなと確かめるようなものだと思っているから、まあ出てくる感想としてもこういう感じになるんじゃないでしょうか。

生活の話

最近やっているPodcastでシェアハウスの同居人がまさにそのシェアハウスについて話してくれていて、なかなか面白い。まあ中に住んでいた者だから面白いというところが多いのかもしれないけれど、あまりこういう生活に関わるようなことって生の声で話されることは少ないし、意外と珍しい類の話が聴ける。ものをつくったりしている人の生活に根ざした話をもっと聴いてみたいという気持ちが元々あって、Podcastでもその辺に焦点を当てた話が多くなっている。

yatteiki.fm は、ものづくり、仕事、生活などをやっていく話題を中心に、いま現在やっている個人開発者達が話す、やっていき手のためのPodcastです。
https://yatteiki.fm

話題が生活の話などになってくると、どうしても社会寄りではなく個人寄りの話になってしまうので、内輪的な話になりがちで、まあそれは仕方のないことかなと思っている。中学のときに交換日記っていうのをクラスの子達とやってたんだけど、雰囲気としてはあれと近いのかなって思っていて、少し社会の方を向きながら内輪で話していて、それが緩く公開されているという雰囲気。

リモートワーク

リモートで働いているなら住居兼オフィスみたいなものなのだから、そこの改善にリソースを注ぐのは妥当だと思い始め、新居は4ヶ月ぐらい前から緩々と探していたんだけど、先月ようやく良い物件を見つけて引っ越すことができた。自分は区切られた部屋よりワンルームにまとまっている部屋が好きで、キッチンもリビングもベッドスペースも作業場も1つの部屋にある、というのが良かったので、その条件でかつリモートワークに適した物件を探していた。

これは1年ぐらい働いてみて獲得した知見だけど、自分は窓からの景色がそこそこ広がっていると大きく気分転換になるということと、作業場とそれ以外の場所が (ワンルームにしても) ある程度区切られているほうが捗る、ということが分かった。他に、出張で東京に行くことが頻繁にあるという話があったので交通の便の良い場所に住んでいたんだけど、どうやらそこまで頻繁に行くことは無いらしいということも分かり、新幹線へのアクセスは悪いけど同じぐらいの家賃で他の条件が良いところに引っ越した方が良いということも分かった。リモートワークに適したというのはそういう文脈。

京都に引越してくると同時に完全にリモートワークで働き始めて、最初は手探り状態でまあやってみようという状態だったけど、最近は自分側も会社側もようやく落ち着いてきていると思う。リモートで働くことについては最初はお互いに慣れていなかったので、常に若干の緊張状態にあり、そういう状態で生活をやっている暇が無かったとも言える。そういう状況が改善されてきたことも、少し腰を据えて生活拠点を移してみるかという気持ちに至った理由の1つになっている。

売っていき

今回引越し準備期間にかなり余裕があったので、これまで持ち続けてきた色々なものを、捨てるのではなく色々な人や店に売った。4Kディスプレイを購入したので不要になったThunderbolt Displayとか、次世代機が出て古くなったゲームハード、高校時代に貯金を崩して買ったロードバイク、学生時代に初めて買ったMacBook Proインターン代で買ったMacBook Air、乗るだけでつぶやける体重計、LAN経由で操作できる電灯、年末に卓球ハウスのエアコンが壊れてポチッたオイルヒーター、uiureoがTVとガスの穴を間違えて買ってしまったガスファンヒーター、その他いろいろこんなものあったなという物が色々でてきたが全部売ってみた。

そもそも梱包や発送の知識がゼロで、レターパックとは?ヤマト便とは?箱とは?という状態だったけど、ネットで色々調べつつ100均・ホームセンター・コンビニ・郵便局・古本屋・家電量販店・リサイクルショップあたりを色々回った結果、清掃・梱包・配送・買取技術にはそこそこ強くなったと思う。

今後物買ってもいつでもサッと売れるスキルを得られたのはちょっと嬉しい。結局、新居の契約含めて引越し全体に必要な額ぐらいは得られたのも良かった。今回メルカリを沢山使ったんだけど、ここもっと改善したいみたいな気持ちはあるものの非常に良いサービスで、とても重宝した。成功してほしい。

引越し蕎麦

これは引越し蕎麦で、打ちました。

image

前回包丁が無くMacBook Airで切ったところ学びがあったので、今回は包丁で切りました。

image

欲張りすぎて具材が異常に多いので蕎麦が見えない。

image

おしまい

以上です。今後も京都からやっていきます。 京都にいる人や京都に来る人は遊びに来ましょう。

関連リンク

katatema.js

次のようなコードを書いて、

import React from "react"
export default () => <div>Hello!</div>

次のようなコマンドを叩くと、

katatema build

次のようなファイルが生成されるという、katatema というツールをつくった。

<!DOCTYPE html>
<html>
  <head>
  </head>
<body>
  <div>Hello!</div>
</body>

最先端の消耗

前に キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘ で、こういうことを書いた。

id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。

最近のJavaScriptの周辺環境は大変で、何をやるにしても、本格的にコードを書きはじめるにはやれBrowserifyだWebpackだGulpだGruntだBabelだと色々なものを (そのときの最新の流行を察しながら) 導入していかなければならない。こういう調子では、本腰を入れてJavaScriptと向き合う機会に恵まれない職種の人達が簡単には参入できず、ReactやWebpackなどのプロダクトが例え良いものであったとしても、なかなか一般に普及しづらい状況にあると思う。

そういう背景から、最近のJavaScript周辺技術に対する裾野を広げるためにも、JavaScriptのファイルをポンと置くだけでモダンなツールの恩恵を受けられて、しかも単純にHello worldを表示して終わるだけでなく、実利的に役立つようなツールが必要だと考えた。今風の感じで書いた pages/index.js を与えると、katatemaは内部でWebpackやBabelなどのモダンなツールを操り、docs/index.html を生成してくれる。まあ炊飯器みたいなものですね。

next.js というツールがあり、これが似たようなことを実現していたんだけれども、CSSJavaScriptのコードとして書かせたり、動的サイトとして動かしたりする必要は無かったので、自分の用途に合うものをつくることにした。

動きのある静的サイト

GitHub Pagesなどで静的サイトを公開したいとき、選択肢としてはJekyllやMiddleman、Octopress、Hexo、Hugoなど、色々なツールがある。https://www.staticgen.com/ を見れば全身の指でも数え切れないほどの沢山の静的サイトジェネレータが出てくる。中でもJekyllは特にGitHub Pagesで優遇されていて、ビルド作業 (ソースコードからHTMLファイルなどを生成する作業) をGitHubが勝手にやってくれるので、非常に便利。しかし、少しJavaScriptを加えて動きのあるサイトをつくろうと思うと、例えば以下のような選択肢を迫られることになる。

  1. 昔ながらの片手間で書くJavaScriptで済ませる
  2. Webpackなどの一連の環境を整えてビルドする環境を用意する

katatemaはこの問題に対して、他のツールに比べて強い優位性を持っている。まず前述したように、Webpackなどの設定は勝手にやってくれるので、面倒な設定作業を必要としない。そして、サーバサイドでもクライアントサイドでも同じソースコードで動作させられるため、動きを付けるのが非常に簡単である。Reactの機能を利用し、UIのコンポーネント化、状態管理、イベントハンドラ、ライフサイクルの利用など、少しのコードを付け足すだけで様々な機能を実装できる。

PHPの時代

PHP全盛期の時代、人々はサーバに置いたPHPファイルを単純なHTMLテンプレートとして利用し、穏やかで牧歌的な暮らしを送っていたように思う。PHPのこういう、とにかく置けば動く、ロジックはHTML中に埋め込む、みたいな分かりやすさ・取っ付きやすさみたいなところは好きだった。

ReactやJSXも最初はそういう風にHTMLテンプレートとして使い始めればいいかなと思っている。勿論単純なHTMLテンプレートの代替策としては留まらなくて、コンポーネントに分けてそれぞれ名前を付けて再利用したり、テストしたりしやすいという利点もある。入力値の型宣言ができたり、Lintに掛けられたりと、HTMLテンプレートとして使うことだけ考えてもReactには色々と便利なところがあると思う。

FTPの時代

同様に、FTP全盛期の、HTMLファイルを置いたパスにアクセスすればコンテンツが見られるような単純さも好きだった。間に複雑なルーティングのロジックなどが入らず、ファイルシステムAPIとして利用するというのも、やはり分かりやすくて良い。まあ静的サイトジェネレータつくると大体そういう感じに落ち着くんだけれども、katatemaでも pages/xxx.js を置けば docs/xxx.html が生成されるということになっていて、この辺りは単純で分かりやすくて良いなと思っている。

./pages/index.js  ---converted--->  ./docs/index.html
./pages/about.js  ---converted--->  ./docs/about.html
./pages/usage.js  ---converted--->  ./docs/usage.html

画面の更新

HTMLファイルを生成する機能だけでなく、開発時に使うためのプレビュー用サーバも用意している。次のようなコマンドでプレビュー用サーバが起動し、pages/index.js から生成されたHTMLが http://localhost:3000/ で、pages/foo.js から生成されたHTMLが http://localhost:3000/foo.html で閲覧できるようになっている。

katatema serve

katatemaでのプレビュー時には、ソースコードを書き換えるとページがリロードされることなく画面の一部がヌルリと書き換わるようになっている。勿論ページだけでなく、ページで利用しているCSSを書き換えたときも、同様に新しいスタイルが適用されるようになっている。めちゃくちゃ便利で、デザイン作業とかだとこれが無いと正直やってられない。

demo

ちなみにWebpackとReactを使ってHot Module Replacementという機能が利用されていて、内部的にはソースコード変更時にWebSocketで差分のデータがサーバからクライアントに受け渡されており、Reactの差分更新で画面の一部が書き換わっている。これを自分で設定しようとすると、webpack-dev-serverやreact-hot-loaderなどの設定を自分で行わないといけないので、慣れていないとかなり面倒くさいことになる。

利用事例

このツールは元々 Yattecast - Podcastサイトをつくるためのテンプレート というページをつくるときに、丁度いいツールが無かったので1週間ほどでこしらえたものである。画面の左側にプレビュー画面、右側にエディタを置いて、コードを保存するたびに徐々にページが出来上がっていく体験は非常に良いものだった。

おわり

Webpackの使い方に慣れていないところが多々あり、next.js のコードを参考にした結果、かなり似た感じのツールになってしまった感が否めない…。しかし恐らく対象としている主な利用者層が違っていて、自分としてはWebデザイナーぐらいの人に使ってもらえる、そんなに融通は効かないけれど簡単に使えるツールに出来ると良いなと思っている。

すべての静的サイトはこれでつくるべきだとは到底思ってはいなくて、低コストで雑にページをつくりたいときの道具、あるいは昨今のJavaScript周辺技術の学習用途とかで使うと良いんじゃないかと。特設サイトみたいな小規模なページを手早くつくるために導入してもらえると嬉しい。

追記

最初、katatemaをつくった動機として「nowなどを使って動的サイトにホスティングする必要は無い云々」ということを書いていたんですが、nowは静的サイトもホスティングできるということを指摘していただいて、その辺りの文面を修正しました。誤解を招く文章で申し訳ないです!

広告を非表示にする

サメを支える技術

image

写真のサメのぬいぐるみの購入方法についてです。

1. 本体

Original Chumbuddy のやつです。本家サイトでは品切れで買えないことが多いので、Amazon.com: Original Chumbuddy Skin (Stuffing Not Included): Toys & Games で買えます。結構な値段します。

image

2. 綿

上記の商品は皮だけなので中に詰める綿が必要です。8kgぐらいあると安心でしょう。結構な値段します。自分は Amazon | フックラ手芸綿ソフィア 3キロ(300g入り10袋セット) クリスマス飾りつけにも最適 | 手芸わた 通販 を2つ買いました。お腹のところにジップがあるので簡単に詰められます。もうちょっと綿詰めてふっくらさせたい感じもしますが満足しています。ぐったりしてきたら買い足す予定です。

image

おわり

以上です。掃除のときとかには持ち上げる必要があるので重い。

image