#えむけーろぐ

間違った事を書いていたらやさしく教えてください

PCの外部ディスプレイの枚数制限を突破できるDisplayLinkというテクノロジーを知り、 Plugable UD-ULTC4K に辿り着いた

DisplayLinkについて

2021年にM1 MacBook Airを購入してから2年ほど。現在でも快適に利用できているのだけどひとつだけ不満があった。それは、外部ディスプレイを1枚しか接続できないことだ。机のスペース削減のためにMacをクラムシェルモードで使うようになってからこの問題がより顕著になった。

調べてみたところ、Synaptics社が提供するDisplayLinkというテクノロジーを利用すれば、PC本体の制限を超えて外部ディスプレイを接続出来るらしい。

www.synaptics.com

DisplayLinkというテクノロジーについては下記の記事がわかりやすかった。
DisplayLinkとは | 組込み技術ラボ

DisplayLinkドライバーが仮想GPUとして振る舞うことによって本体の制限を超えてディスプレイを接続出来る、ということのようだ。

良さそうな商品たち

Synaptics社はDisplayLinkというテクノロジーとチップセットを販売しているだけで、実際のアダプタやドッキングステーションは各メーカーがチップセットを用いて実装し販売するという形らしい。

日本のAmazonで安定して購入できかつ怪しくないメーカーとしては、PlugableCable MattersStarTech.comあたりだろうか。

単なるアダプタで良ければ下記のようなものが良さそう。ただし、商品によって4Kを出せなかったり、出せても30Hzになったりするので要確認。

自分はThunderbolt 4対応のドッキングステーションを使って、私用・会社PCをケーブル1本で切り替えみたいなことをしたかったので、下記を購入した。PlugableのUD-ULTC4Kだ。

Plugable UD-ULTC4K

2023-04-29時点でのAmazon価格で36980円とお高めだが、この手の変態技術を利用するかつ映像まわりのものはケチらない方が良いという経験則がある。

運用し始めて1週間ほどだが、無事に動いてくれている。仮想GPUということはメモリやらCPUやらめちゃくちゃ食って重くなるのではという気持ちもあったが、いまのところ1440pのディスプレイ2枚 + M1 MacBook Air クラムシェルモードで運用しているぶんにはまったく問題を感じていない。

macOSで利用する場合は、Plugable社が提供しているドライバをインストールする必要があるので注意が必要だ。

kb.plugable.com

DisplayLinkのドライバ自体はSynaptics社が提供しているのだが、Plugable社は上記ページでそのドライバを検証してから公開している旨を宣言している。StarTech.com社も自社ページでドライバを提供している。(検証しているという明言はしていなさそうだが、このページを見た感じはしていると思って良さそうだろう)

なお、Cable Matters社はドライバのページに行ってもSynaptics社のページにリダイレクトされるだけだった。

ChromeでNetflixが閲覧できない問題はハードウェア アクセラレーションをオフで解決

一点、ChromeでNetflixが真っ黒画面になって閲覧出来ないという問題にあたった。この手の問題はたいていHDCPという著作権保護の仕組みのせいで起こっているはずだ。

ググってみたところ、Plugable社公式のフォーラムにドンピシャな話題を発見した。

support.plugable.com

上記のページによると、やはり原因はHDCPであるようだった。バグとかではなく仕様らしい。

DisplayLink または Silicon Motion 技術を使った製品で、コピープロテクトされたビデオコンテンツや暗号化されたビデオコンテンツの再生ができない(HDCP 非対応) - Plugable ナレッジベース

そして、Chromeのハードウェアアクセラレーションをオフにすると改善するらしい、という回答があったので試してみると、たしかに改善した。

その代わり、ハードウェアアクセラレーションが必須の機能が使えなくなるので、その辺はトレードオフとなりそうだ。自分の場合はGoogle Meetのバーチャル背景とFigmaのWeb版が使えなくなってしまった。前者はKrispの仮想カメラを利用することによって、後者はFigmaのmacOSアプリを利用することによって回避している。

おわりに

唯一2枚目のディスプレイが繋げないという点だけが不満だったM1 MacBook Airだが、これで不満が消えてしまった。会社のPCに続いて、私用PCもMacBook Proにしようかなぁなんて思っていたのだけど……。

30万円の出費が10分の1で済んだのだから、DisplayLinkはすごいテクノロジーだ。

侍ジャパンが優勝したのでJetBrains IDEのライセンスをサムライズムで買った #侍割

4回ほどの挫折→Vim回帰を経て、5度目の正直でRubyMineを使えるようになり早2年強。

年額払いをしてしまってからまた挫折したらやってられんわということでずっとJetBrains公式の月額払いでやっていたのだけど、気がついたらWebStormやPyCharmとともに手放せないツールとなっていた。今後はもうJetBrains IDEをやめることはないだろう、ということでディスカウントの効く年額払いに切り替えることにした。

日本でJetBrains製品を買うとなると、公式か代理店のサムライズムで買うかの2択だろう。かなり前からサムライズムのことは認知していた*1ものの、月額払いの選択肢が無かったのでJetBrains公式でライセンスを買っていた。

今回、年額払いに切り替えるタイミングだし、侍ジャパンが優勝したしで、サムライズムでライセンスを購入することにした。

JetBrains IDEは継続年数によって20%、40%と割引が効く。JetBrains公式で2年10ヶ月ほど継続していた僕は、このタイミングで年額払いにするとどういう扱いになるのか不安だったのだけど、そのへんがいい感じに計算・按分されたような見積もりをいただくことが出来た。すごい。

というわけで無事に年額払いへの切り替え完了です。

特典でついてきたCIcloneというプラグインもさっそく便利に使わせて頂いてます。

なにやら紹介プログラムをやっているようなので、ご購入予定の方はぜひ。僕とこのリンクからライセンスを買っていただいた方双方がお得になる系のやつだと思います。

secure.samuraism.com

*1:数年前のOSC北海道に出展されていた記憶

MacBook Pro 2021 16インチ (M1 Max / 32GB)

ワケあって会社のPCを交換してもらったら、MacBook Pro 2021 16インチ(M1 Max)だった。

もともとは16インチのIntel Macだったのだが、ファンがずっと回っていて各種Webアプリケーションも激重。特に最近流行りのNotionやClickUpなんかは画面共有してMTGのファシリテーションしながらだと気まずいくらいの重さだった。*1

それが、新しいマシンだとなんということでしょう。はやすぎて感動した、というと嘘になる。だってこのはやさは私物のM1 MacBook Air(2020)で体感済なのだから。Intel製CPU -> Apple Siliconの差分は感動モノだったけど、M1 -> M1 Maxの感動はそこまででもなかった。当たり前にはやい、という感じ。

それよりも感動したのが、ファンが全然まわらないということ。冬だからというのもあるかもしれないけど、RubyMineとWebStorm、そしてたまにPyCharmを起動しながらビデオ通話して、画面共有でNotionやらClickUpやらをこねくり回してもファンが回る気配がない。

「音が聞こえないだけで低速で回ってるんじゃないの?」と思う人もいると思うが、TG ProというファンコントロールAppもFans Offといっている。

www.tunabellysoftware.com

私物のM1 MacBook Airはそもそもファンを搭載しておらず、Podcastの音源を書き出しているときなど極稀に「CPUの温度が上がりすぎています」と怒られるくらいだったので、ある程度ファンがなしでも大丈夫なくらいのチップであるという認識はあったのだが、ここまでとは。

いやはや恐るべしApple Siliconという気持ちになった2月の終わりでした。

*1:ファシリ中、なにかの処理待ちで無言になる時間ってこわくない?

CSSフレームワークの件

久々にそこそこ反響をもらうツイートをした。

これに関する反応は様々で、賛成・反対どちらの方向にも過激めの思想をお持ちの人、気持ちはわかるけど、採らないは言い過ぎ……な人、など様々。一番多かったのは、「フレームワーク使ってる != CSS書けないなので、CSSが書ければ問題ない」という意見だった。

おもしろかったのはこの意見。

前職ではBootstrapを使っていて、デザイナさんはBootstrapをウザがりながらもその特性を踏まえたデザインをしてくれていた気がする。なるほどそういうスキルの方向もあったのだなぁと思うなど。

 

この話を踏まえて、うーむ、自分がそのあたりの技術選定をする機会があったとしたら、やはり普通にCSSフレームワークを使うかなぁという気持ち。たぶんこれまでの経験的にも、今後仕事・プライベート問わずプロダクトを作るときにも、デザイナさんがキレイなデザインを作ってくれてそのとおりに実装するというよりは、少ないリソースで早く出すことを求められると思うから。もちろんフレームワーク無しでも早く実装できるようにすべきというマッチョな考え方も出来るけど、自分がそうなりたいかと言われると別にという感じ。マッチョ思想し始めたらキリがなくてプロダクトが完成しないと思う。

一方で現職の今のチームはフロント周りのリードをしている人がそういう思想で、かつデザイナさんのリソースもちゃんとある状態であれば生CSS書くのを拒否する強い理由もない。かつCSS力自体上げられるチャンスがあるなら活用しない手は無いので、ペアプロなどでスキルを盗むなどしていきたいなぁと思っているところ。

Podcastがラジオで紹介された

趣味でやっている「ゆるふわPodcast 」が北海道のラジオで紹介された。

紹介されたのは道民の皆さんにはおなじみの放送局であるAIR-G'の「ドミきゅん」という番組の中で、放送は1月25日(水) 19時〜19時半だった。

自分はradikoプレミアムを使ってほぼリアタイで聞かせていただきました。イマドキのラジオらしく番組はほぼ全編をPodcastで公開しているので、気になる方はどうぞ。

open.spotify.com

紹介された箇所が気になる方はぜひ聞いてみてください。「あ、そこ紹介するんだ」という感じではあるものの、紹介されたこと自体とても嬉しいです。一瞬だけかなと思ったけど結構な尺を使っていただいていて嬉しい。

いやはや長く続けてるとこんなこともあるんだなあ。

2022年

年末のスナップショット。

2021年ぶんを書き忘れていたことに2022年の終わりに気がつく。。

仕事

まさか年末のスナップショットで仕事をトップに書く日が来るとは。。それくらい、2021年までの僕にとって仕事というものはかなり重要度の低いものだったし、2022年はその重要度が上がったということなのであろう。

2月、ちょっとReactとRailsを使える単なるWebエンジニアとして入社したのだが、お陰様で単なるWebエンジニアから進化出来たように思う。

今年新たに触った技術スタックをごちゃごちゃ並べてみると、Next.js、Vue 3、AWS CDK、AWSのサーバレス技術たち(StepFunctions、Lambdaなど)、Python、クリーンアーキテクチャなどなど。

また、エンジニア採用やPdMっぽいことにも染み出すことが出来た。この染み出すというワードは自分の所属する会社でよく使われる言葉*1で気に入っている。

出自がスタートアップだからか、なんでもやること・なんでもできることに対する強いこだわり・憧れがある。現職は本当になんでもやらせてくれるので、その点でかなり気に入っている。自分の理想がうまく言語化された記事に、「ウェブ業界で起業したいならMarcoを目指そう」というものがある。いや僕は別に起業はしたくはないのだが。

j.ktamura.com

 

一方で、薄々感じていたというか当たり前なのだがコード書くときはまとまった時間がほしいなということも思うようになった。

前職に比べて現職は実になんでもやらせてくれる。と同時に、これは先日同僚に突っ込まれたことなのだけど、「コード書くのにまとまった時間が必要なのに色々手を出すのは矛盾していないか」というのが最近の悩み。かといって、コード書くだけをやりたいわけでもないし、採用や会社という組織に属する上で発生する様々な雑務を全部他の職種やマネージャーに押し付けるのが正しいとも思えない。このへんの良い塩梅を見つけるのが来年の課題となるか。

 

もうひとつ、令和にあえて週イチ強制出社をさせている会社に転職してみるというチャレンジもあった。結果、個人的にはかなりうまくいっていると思っている。前職はフルリモートだったが、フルリモートを推しているとフルリモートに惹かれた人たちが集まってくるわけで、集まってワイワイするのが(エンジニアにしては)好きなタイプの僕には少し合わなかった。端的に言うと、たまたま見つけた下記のツイートのような状態になりそうだった。なお引用ツイート欄やリプ欄を見ると様々な議論があってこれもまたおもしろい。

現職は広告代理店とTech組織がひとつの会社になっている一風変わった会社で、僕の求めている以上のワイワイ感があり正直ついていけないところもあるのだが、それもまた楽しい。とにかく、良いことも悪いこともいろいろなことが起こっていて、仕事も、仕事に関係ない様々なことも楽しむことが出来ている。人間として生きているという感じがする。

Podcast

4年目に突入した弊Podcast。

yuru28.com

今年も毎週更新達成。2022年は53週あったようなので*2、エピソード数もちょうど53。

今年は持続可能なPodcastをやっていくための投資をしてきたような気がする。オペレーション面では、エピソードのDL数ログを自前で取って様々な軸での分析(たとえばWeb / アプリの割合とか、PC/モバイルの割合とか、細かい時刻とか)をしやすくしたり、なんとなく使いにくかったPodcastの管理画面をVue 3の素振りついでに改修して使いやすくしたりなど。

また、コスト面では上記のSoundCloud→S3 + CloudFront移行に加えて、脱Heroku(Lightsail VPS化)によるコストダウンも達成し、持続的なPodcastをやっていくことが可能となった。

 

一方で企画面での投資はあまりしなかったなぁという反省。今年はゲスト回1回しかやってないし、企画回はやってない。毎週続けるためのハードルを下げた結果、特別なことをやるハードルが相対的に上がった気がする。

yuru28.com

個人的な活動

個人開発的な側面。わざわざPodcastのサイトや管理画面を内製している理由として、「常に触り続けるRailsアプリを一本持っておくこと」があるのだが、Podcastの項でいろいろ書いたとおり引き続きその役割を全うしてくれているように思う。

また昔から(無駄に)Herokuで動かしていたBotを仕事でよく使うサーバーレス技術で置き換えたりもした。

blog.m6a.jp

 

対外的な発表は吉祥寺.pmの一件だけ……。社内で満たされていたからか、あまり外向けのアウトプットをしていない気がする。まぁそれはそれで悪いことでも無いかなと一旦は思う。

blog.m6a.jp

その他

趣味が増えた。サバゲーとか。

ゲーミングPC買ったのでゲームいろいろとか。

 

あとはまぁ春から夏にかけていろいろと大変だったんだけど、にしては元気にやっていたと思う。

まとめとか

とにかくいろいろあった年だったと思う。まぁいろいろは毎年あるのだけど、人間が関わった結果いろいろあった一年で、楽しかった。

仕事面では、会社という存在が、毎月給料を振り込んでくれる闇の組織から、自分の居場所というか人間として生きる上で必要なものになった気がする。年末のCTOとの1on1で、「向平さんが会社に提供できる価値と、会社が向平さんに提供できる成長機会のバランスがものすごく良かったと思う」という会話をしたのだけど、まさにそのとおりだなぁと思った。

仕事の技術の素振りついでに個人の開発をやっていくというサイクルもよりうまくまわっているように思う。また趣味も増えたので、プライベートの充実度も上がった。特にサバゲーは、プログラミングと散歩しか趣味がなかった僕にとって唯一の外に出て人と関わる趣味なので継続していきたい。めっちゃお金かかるけど。。

というわけで今年もお世話になりました。良いお年を〜。

*1:ちょうど良い採用関連の記事があったのだけどなんか消えてた。

*2:週の数え方にはアメリカ式・ヨーロッパ式・イスラム式の3種類あるらしい。今回はアメリカ式を採用。参考: 【2022年版】カレンダーと週番号早見表 ‐ 週番号の計算方法も解説!

苫小牧高専News Botをサーバーレス技術で作り直してみた

はじめに

「この記事は苫小牧高専アドベントカレンダー2022 n日目の記事です。」という書き出しで投稿しようとネタを仕込んでおいたら今年はやらんのかいとなりました。

こんにちは、mktakuyaです。情報工学科(2012年入学)、電子・生産システム工学専攻(2017年入学)出身です。いまは都内でITエンジニア・プログラマをしています。Rubyが好きですが最近はPythonとTypeScriptを書くことが多いです。

 

この記事では、学生の頃に作ってから動かし続けている苫小牧高専News Botを、サーバーレス技術で作り直してみた話を書いていこうと思います。

twitter.com

苫小牧高専News Bot

苫小牧高専News Botは、苫小牧高専のニュースをお届けするTwitter Botです。

2014年3月(高専2年→3年の春休み)にPythonで作りました。この頃は入門レベルのC言語とPythonしか出来なかったですね。今はRuby / RailsにTypeScript / Vue / ReactそしてPythonでご飯を食べています。ナイス進化

blog.m6a.jp

その後、Ruby(非Rails)で作り直してメール配信に対応させたり、ニュースを電話でいち早く受け取ることが出来るようにしたり、FAXで受け取ることが出来るようにしたりと、その時見つけたおもしろ技術の実験台として活用してきました。

社会人1年目の2019年にRailsで作りなおしてHerokuにデプロイして以降は、完全放置モード。卒業した学校のNews Botを作るよりも本業趣味のPodcast周りのシステム開発に明け暮れる日々でした。

Heroku 無料プラン廃止

そんなある日僕のもとに届いた衝撃的なニュース。Herokuの無料プラン廃止です。

forest.watch.impress.co.jp

もともとWeb / Worker dynoにはお金を払っており、無駄に月14ドルくらい掛かっていたこのBot。今まで無料で使えていたDBとRedisに追加で24ドルもかかるというではありませんか。

正直Zapierに毛が生えたくらいの機能しかない単発アプリに対して月38ドルも払いたくありません。*1

それもこれも、こんなシンプルなアプリを作るのに無駄にフルスタックなWebフレームワークであるRailsを使っているせいです。

サーバーレスで作り直してみた

というわけで、Railsを使わずに作りなおしてみることにしました。4度目のRebuildです。学校のニュースをツイートするということにここまで情熱をかけた男が他にいるでしょうか。だからZapierでいいだろと

僕は学生時代、Railsだけを極めればあらゆる(Web寄りな)プロダクト開発に対応することが出来ると思っていました。わりとガチで。ところがその幻想は社会人1年目で打ち砕かれることになります。いや打ち砕かれて本当によかった。

もちろん、今でもRailsをメイン技術とする会社に在籍しています。が、ここ最近の開発トレンドとして、メインのRailsアプリにどんどん機能を足さず、周辺に小さく処理を切り出していくということが多いです。Rails上に実装されたWeb APIからデータを引っ張って、諸々の計算処理をPython on LambdaまたはECSなどで計算してやってまたRailsのDBに戻すだとか、バッチ処理は外に切り出されているだとか。

 

そのときに便利なのがAWS LambdaやECS Task、そしてそれらをいい感じに接続するStepFunctionsやEventBridgeです。こうした技術を僕は「サーバーレス技術」と呼んでいます*2。こうしたサーバーレス技術をゴリゴリ使って仕事を進めていくのは実は現職がはじめてです。

僕が技術勉強をする際の鉄板は、仕事の技術を使って趣味のプロダクトを作る、という手法です。というわけで、同じ技術を使って苫小牧高専News Botを作り直してみました。

github.com

システム概要はこんな感じ。左側が全体のフローチャート、右側がフローチャート内で「新着ニュース通知ステートマシン」と記載されているもの(StepFunctionsのステートマシン)です。

苫小牧高専News サーバーレス版の概略図

ステートマシンの中のひとつひとつの箱をステートと呼びますが、ここにはAWS Lambdaの関数やECSタスク、その他諸々のAWSのリソースを当てはめることが出来ます。このステートマシンでは、最新ニュースのJSONを読み込んだあと、点線で囲まれた部分にあるステートをそれぞれ呼び出します。今はツイート通知とメール通知しかいませんが、ここに電話やFAX、SlackやDiscordへの通知などプログラムで書いてLambdaやECS Taskで包める処理ならなんでもおけます。めっちゃおもしろい。

ニュースを取得してS3に保存するとか、ニュース情報をツイートするみたいな部分はPythonで書いてLambdaに載せています。そしてそのLambda関数というリソース自体や、「3分に1回、最新ニュース取得Lambdaを呼び出す」「S3に新オブジェクトが置かれたらStepFunctionsのステートマシンを呼び出す」といったEventBridgeのルールはAWS CDKで記述しています。ふつうはAWSのWebコンソールでポチポチしてLambdaなどのリソースを作成すると思いますが、TypeScriptなどお好きな言語でリソースを定義出来ます。流行りのIaC (Infrastructure as Code)ってやつです。

あ、あとフロントはNext.jsで作ってます。まぁ大したことはしてなくて、 tmnct-news.m6a.jp/n/a7b51533b0 みたいなURLを踏まれたら元のニュースのURLである www.tomakomai-ct.ac.jp/news/19167.html にリダイレクトしてるだけですね。

今後

リリースしてから1週間ほどでしょうか。とりあえずは安定して動いてくれているようです。ミスって過去ニュースを100件ツイートするという事故も起こしましたが。。。過去データのインポート前に、「S3のPutEventを拾ってステートマシンを起動する」というルールを無効化する必要があったのですが、寝ぼけてて「3分に1回新着ニュース取得Lambdaを起動する」方のルールを無効化してました。

エラー通知とかロギングとか、モノリスRailsだと当たり前にやっていたことをサーバーレス技術ベースだとどうすればいいんだろうとか思ってます。とりあえずSentry入れましたがLambda関数の起動自体に失敗したらSentryに通知すらいきません。CloudWatch Alarmとかいうのを使うんかな?とかとか。サーバーレス赤ちゃんなので学んでいきたい。

また記事内では書かなかった個人的なチャンレジとして、クリーンアーキテクチャっぽいコードを書いてみるというのもありました。ただこれは他のプロジェクトを見てディレクトリ構成などを見様見真似でやってみただけで、正直ちゃんと出来ている自信がまったくありません。本読んで勉強してまたリファクタしようかなと。

おわりに

そんなわけで、苫小牧高専News 4度目のRebuildの記録でした。

LambdaもStepFunctionsも本当に安くて、今まで月14ドルかかっていたのが1ドル未満になりました。S3のディスク容量だけに課金されていて、ほかはすべて永年無料枠で運用できています。

技術の素振りとしてはなかなか良い苫小牧高専Newsですが、卒業して5年近く経つ僕がずっと運用し続けるのもどうよという感じがしています。一応CDKでリソース定義しているので、別のAWSアカウントで動かすことも可能です。この記事を読んでいる在学生の方、ソース一式渡すでもいいし、ゼロから作るでもなんでも良いので、誰か引き継いぎませんか?

*1:14ドル払っていたのもやめたいと思っていたし

*2:正しい呼び方かは知らない