『できた、僕の考えた最強のデスク環境が。』の質問ブコメへの返答

fromatom.hatenablog.com

ありがたいことにこちらの記事を沢山の方に読んでいただき、いくつかブコメで質問を頂いたので返信したいと思います。

---

できた、僕の考えた最強のデスク環境が。 - 文字っぽいの。

椅子は買わなくていいの

2020/08/03 14:43

b.hatena.ne.jp

椅子はオカムラのSylphyをKaggレンタルでレンタルして使っています。

オカムラ オフィスチェア シルフィ― ハイバック メッシュ アジャストアーム 樹脂脚 ホワイトフレーム デスクチェア C685XW-FMP1 ブラック

「緊急事態宣言中だけ借りとこう」と考えていたのですが、リモートワークが年単位で続きそうな感じなので、もう買ったほうが良くね？と思い始めています。

---

できた、僕の考えた最強のデスク環境が。 - 文字っぽいの。

モニター位置高くない？見上げるより見下ろすほうが肩こらないと思う。アームだから下げれるんかな。

2020/08/03 15:11

b.hatena.ne.jp

なんかこの高さが丁度いいんですよね。足が短いからでしょう。「やっぱ下げたいな」と思ったときでもディスプレイアームで簡単に高さは変えられるので便利です。

---

できた、僕の考えた最強のデスク環境が。 - 文字っぽいの。

こういうノウハウまったくないので参考になる。有孔ボードをひっかける先がどうなってるか分からなかったので追記してほしい。

2020/08/03 15:13

b.hatena.ne.jp

有孔ボードの引っ掛け先ですが、

www.muji.com

こちらの無印良品のユニットシェルフがデスク横においてあるので、そいつのバーに引っ掛けています。

---

できた、僕の考えた最強のデスク環境が。 - 文字っぽいの。

デスク…デスクの詳細(サイズなど)知りたい…。明らかにモニターアームのクランプ干渉しそうなんだけどどうやって取り付けてるの？？

2020/08/03 17:34

b.hatena.ne.jp

デスクなんですが、もう売ってなさそう。こちらの商品の幅140cmのものを使っています。

LOWYA デスク 机 パソコンデスク オフィスデスク 木製 幅180cm 奥行60cm ライトナチュラル

お察しの通り、このデスクには天板裏に鉄の角パイプが渡してあるので、ディスプレイアームのクランプと干渉します。どうしようもないので、角パイプごと挟んでしまっていますが、まったくオススメできませんしそのうち絶対なにかが壊れます。

これからデスクを新調する予定があり、ディスプレイアームを使いたいと思っている方は、デスク裏面にも気をつけて購入するといいと思います。

---

できた、僕の考えた最強のデスク環境が。 - 文字っぽいの。

壁の絵素敵！🦉🦎🐢どなたの作品なんだろう

2020/08/04 09:32

b.hatena.ne.jp

記事内でも紹介してありますが、水彩画家 タケダヒロキさんのポストカードです。

www.tricera.net

できた、僕の考えた最強のデスク環境が。

「事態が落ちついたら、また。」「このご時世ですから」と繰り返し唱えていたら2020年も半分がおわり、梅雨が明け、麦茶を煮出す回数が増えました。そして、ご時世のおかげで飲み会やイベントがすべて消え去ったことで貯金が増え、定額給付金も手に入ったので、「いい機会だから」とPCを新調することにしました。

iOSアプリエンジニアという職業柄、OSはMacになります。持ち運びできるMacBook Proもいいですが、据え置きタイプのほうが費用対効果が良いのでiMacかMac miniにしたいところです。当分の間は家で開発することが多いでしょう。

そんな折に、こちらの記事に出会いました。

note.com

この記事で「なるほどMac miniを机の下にくっつける手があるか」と合点がいったので、Mac miniを注文。それにあわせて、デスク環境も力強く整えることにしました。

[2020/08/03 14:40追記]

この記事はDIY初心者が勘で作った工作情報が載っています。将来何かが破損・故障する可能性が大いにありますので、真似や参考にされる場合は自己責任でお願いします。

[追記終わり]

Mac miniをデスクの天板裏に宙づりする

さっそくMac miniをデスクの天板裏にくっつけましょう。とはいえ、むき出しのMac miniを接着剤で貼り付けるわけにもいかないので、ケースを購入。

HumanCentric Mac Miniマウント | Mac Mini専用マウント、VESA対応、壁掛け、デスク下 | 特許出願中

このケースはVESAマウントに対応しているので、デフォルトでいい感じの穴が空いています。なおかつ素材もプラスチックなので加工もしやすそうです。

さて、噂によるとMac miniは排熱があまりよろしくなく、下手な設置をすると熱暴走する恐れがある模様。「Mac mini 冷却」で検索すると、多くの人々がメタルラックにおいたMac miniをファンで冷却している様子が確認できます。そのため、ある程度天板との隙間を確保しておく必要があります。そこでホームセンターで手に入れたのがこちら。

こいつをケースにくっつけて、若干隙間を作ろうという作戦です。仮組みをしてみるとこんな感じ。

それでは早速この金具をデスク天板の裏側にくっつけていきましょう。いろいろ考えましたが、Mac miniの重さを考慮してネジでガッチリ固定する方法にしました。木ネジを使うために、まずは下穴をあけます。ケースや金具の穴はM5サイズなので、木ネジもM5サイズを使いますが、このサイズの木ネジをいきなりねじ込んだら、ネジが途中で止まるか、机が割れるか、表面に突起が出てきてしまいます。

下穴をあける場所を確認するために、まずは金具に普通の両面テープをつけます。あとで剥がすので、普通の両面テープやセロハンテープを丸めたものが良いです。

これを机の裏側に貼り付けて、ケーブルの導線などを想像しつつ丁度いい位置を探しましょう。位置が定まったらケースだけを取り外します。

天板の裏に張り付く金具の様子です。ここで、金具がずれないように穴あけ位置にマジックなどでマーキングしておきます。もしずれてしまったらケースをつける際にボルトが入らなくなります。プラスチック製なので、ケースに穴をあけてしまうという手もありますが最終手段ですね。

では穴を開けていきましょう。M5の木ネジを使うので、下穴は3か3.5くらいが良いでしょう。机を貫通しないように気をつけて作業をします。あらかじめドリルビットにマジックなどで目印をつけておくと良いでしょう。

面倒くさがってデスクを裏返さずに作業をしたので、首が折れるかと思いながら穴をあけました。なおかつ木くずが降ってきて大変。みなさんはデスクをちゃんと裏返して穴あけなどの加工をしましょう。

穴をあけたら木ネジで金具を固定していきます。この際、仮止め時に利用していた両面テープは剥がしておきましょう。

今回利用する金具は皿モミ加工（木ネジがピッタリ収まるように穴をすり鉢状に加工するやつ）がされていないので、普通の木ネジを使うとちょっと浮いてしまいます。そのため、皿頭タイプの木ネジではなく、トラスタイプの木ネジを利用しました。

無事にくっつきました。テコの原理でも使わないと引き抜けない硬さです。早速ケースを固定しましょう。

良さそうです。Mac miniをはめ込んでみます。

いいですね。無事にMac miniをデスク天板裏に宙づりすることができました。ちなみにこのケース、取り外すのが結構大変なので「たまにMac miniを別の場所で使う」という方にはおすすめしません。

デスクの下

Mac miniを宙づりにしたので、配線系も宙づりにしていきましょう。

ケーブルボックス

Blue Loungeのケーブルボックスを超強力両面テープで固定しています。

Blue Lounge ケーブルボックス(ホワイト) The CableBox White BLD-CB-WT

スコッチ 両面テープ あとからはがせる超強力プレミアゴールド 幅15mmx1m KRG-15

電源タップ、AnkerのUSB充電器、ディスプレイの電源アダプターなど、デスク周りの電源系は全部ここに入っています。

Mac miniにつながるケーブル類

こちらはBlue Loungeのケーブルボックスミニを超強力両面テープで固定。USBハブなどがつっこまれています。

Blue Lounge ケーブルボックスミニ(ホワイト)[The CableBox Mini White] BLD-CBMN-WT

ケーブル類をまとめる

ケーブルをまとめたり天板裏に固定するために、3Mのワンタッチベルトとコマンドフックを使いました。

3M コマンド フック キレイにはがせる 両面テープ コード用 クリア Sサイズ 20個 CMG-S-CL20

3M ワンタッチベルト 12.7mm×3m ブラック NC-2232R3

特にワンタッチベルトが便利でした。好きな長さに切れるし、しっかりとまってくれてすごい。「太いケーブルは結束バンドかなー。」と思っていましたが、全部これでいけました。便利。

デスク下整理の完成

なんだかんだで出来上がったデスク下がこちら。

真ん中のクッションとダンボールは、お猫様用のベッドです。足置き用にダンボールを置いていたらお猫様が気に入ってベッドにしてしまったので、クッションを置いていつでも寝られるようにしてあります。とてもダサい見た目ですが、お猫様は我が家で一番偉いので仕方ないですね。気づかないうちにここで寝ていて、突然足を触ってくるので死ぬほどビビります。

左の床にあるのはWindowsのデスクトップPC、右の床にあるのはウーファーです。天板に這わせたケーブルはもうちょっとまとめられそうな感がありますが、無限に時間をとられそうなのでこれで完成としました。

有孔ボードを塗装したり金具をつけたりする

次にこれを作っていきます。

まず有孔ボードを手に入れないといけないので、ホームセンターに行きます。ドンピシャのサイズのものは売ってないので、丁度いいサイズにカットしてもらいました。次に、表面を紙やすりでヤスリます。このときに面取りもしておくとササクレを食らわなくて良さそうです。

さて、いよいよ塗装です。DIYといえばワトコオイルとミルクペイントですが、今回はこちらを使いました。

アサヒペン 水性WOODジェルステイン ウォルナット 300ml

刷毛を使わずに布でペイントできるのが便利ですね。よくわからないけど、ウォルナットってのがオシャレなんだと聞きました。さっそく塗ります。

← 塗装前｜塗装後 →

1回塗ったら乾燥させ、軽くヤスリをかけてから2度塗りしました。それっぽい感じ。これを引っ掛けて固定できるようにします。

使う材料はこちら。

キレイに曲がるらしいので曲げましょう。

曲がった。ネジ止めしましょう。金具を一番上ではなく1つ下につけると、表から金具を隠すことができて良いです。

表｜裏

これで後は引っ掛ければ完成です。

有孔ボードにつける金具は色んなメーカーが様々なものを出しているので、好きなものをつけましょう。色々あって楽しいですね。個人的には、メガネを掛けられるようなったのがとても気に入っています。

私はメガネを複数持っていて、

• 車運転用の度数強め
• 外出時の度数中くらい
• 仕事用のブルーライトカット度数弱め
• オフタイム用の度数弱め

と無駄に種類があるので毎回置き場に困っていたんですが、これなら全部ここに置けそうです。

机の上

机の下と横がきれいになったので、次は机の上です。とはいえ机の上は

• 余計なものは置かない
• ケーブルはまとめる

ぐらいしかやることがありません。ですので、机の上に置いてあるものを簡単に紹介していきます。

ディスプレイ

LG モニター ディスプレイ 27UK850-W 27インチ/4K/HDR対応/IPS非光沢/USB-Type-C、HDMI×2、DisplayPort/スピーカー搭載/FreeSync、高さ調節、ピボット対応

Thunderbolt 3に対応しているので、ケーブル一本でMac miniに繋がりつつ、ディスプレイについているUSBハブも接続できます。 このハブには無線マウスのレシーバーとWebカメラがつながっています。特にWebカメラがここで繋げられると、デスク下のMac miniまでケーブルを伸ばさなくて良いので最高ですね。

Webカメラ

ロジクール ウェブカメラ C920n ブラック フルHD 1080P ウェブカム ストリーミング 自動フォーカス ステレオマイク 国内正規品 2年間メーカー保証 ブラック

MacBook ProからMac miniに移行した結果カメラが無くなったので新規購入。リモートワーク中はリモートで面接や登壇もするのでWebカメラは必須なんですよね。

ディスプレイアーム

サンコー 4軸式くねくねモニターアーム MARMGUS192B

大学生のときに購入してずっと持っているものを流用。今買うならアマゾンベーシックのものがほしい。

Amazonベーシック モニターアーム シングル ディスプレイタイプ ブラック

マイク・マイクスタンド

FIFINE USBマイク コンデンサーマイク イヤホン端子付き マイクスタンド高さ調節可能 ABタイプ USBケーブル付き 単一指向性 Skype ライブ配信 ゲーム実況 PC用 Windows Mac PS4対応 K670

よく弟と通話しながらゲームをするので、そのために購入してあったコンデンサマイク。まさかリモートワークになって、こんなに活躍するとは思わなかった。安くてそこそこの音質なので便利。

AKEIE 卓上マイクスタンド コンデンサーマイクスタンド 折りたたみ式 マイクアーム デスクアーム 録音 伸縮 実況 配信 カラオケ 変換アダプタ付き 日本語説明書付き【ポップガード セット】

マイクを机に置くと、キータイプの振動を全部拾って大変なことになるので購入。特にこだわりはなくて、「浮けばいいや」と思って買った。ポップガードもついてきてお得。

スピーカー

Bose Companion 3 Series II system PCスピーカー

高専生時代に購入してずっと使い続けているスピーカー。10年以上の付き合いになりますね。音ももちろん良いのですが、特に手元コントローラーが優秀で気に入っています。

上面をタップでミュート切り替え、黒いリングを回転させるとボリューム調整できます。

ヘッドホン

Bose QuietComfort 35 wireless headphones II ワイヤレスノイズキャンセリングヘッドホン Amazon Alexa搭載 ブラック QuietComfort35 II BLK

SONYのほうが良いという話を聞きますが、BOSEが好きなのでBOSEです。

キーボード

PFU Happy Hacking Keyboard Professional2 墨 英語配列 静電容量無接点 USBキーボード Nキーロールオーバー UNIX配列 WINDOWS/MAC両対応 ブラック PD-KB400B

HHKB Pro 2 墨 英字配列を2枚使っています。分割キーボードのように右手用と左手用として使っています。肩が開いて人間工学的に良い。

詳しくはこちら。

fromatom.hatenablog.com

キーボードもHHKB HYBRIDを2台購入するとケーブルが減ってよいのですが、7万円もポンと出せやしないので諦めました。しかしリモートワークが減り始めたらオフィスと自宅の両方にこの環境が必要になるので、その際にどうせ買うんだろうなと思っています。

なおパームレストは、

FILCO Genuine ウッドリストレスト Mサイズ〔幅360mm〕北海道産天然木使用 オスモカラー仕上げ 日本製 ブラウン FGWR/M

この商品のSサイズを使っています。HHKBのパームレストじゃないので狂信者に殺されかねません。

マウス

ロジクール MX Anywhere 2 ワイヤレス モバイル マウス SE-MX1500 Unifying Bluetooth 高速スクロールホイール 充電式 windows mac 無線 ワイヤレスマウス 小型 国内正規品 2年間無償保証

このAnywhereシリーズも高専生の頃から、何度も買い替えながら使い続けています。マウスを持ち上げたときに絶対にカーソルがジャンプしない安心感と、無抵抗ホイールモードはもう手放すことができません。昔は単3電池、そのまた昔は単4電池式でしたが今ではバッテリー内臓でUSB Micro Bで充電できるので便利です。

マウスはこのAnywhereシリーズ、キーボードはHHKBでこれからもずっと生きていくのだろうなという気持ちがあります。

書類ケース

www.nitori-net.jp

ニトリのものを使っています。紙製でシールが貼られているだけなんですが、安っぽくなく強度もそこそこあるので便利です。

スマホ充電スタンド

iPhoneがQiに対応した際に購入した「Seneo Qi急速ワイヤレス充電器 Quick Charge 2.0」という商品だけどもう売ってなさそう。今買うならAnkerのものが良さそうですね。

Anker PowerWave 10 Stand(改善版), ワイヤレス充電器 Qi 認証 iPhone 11 / 11 Pro / 11 Pro Max/XS/XS Max/XR/X / 8 / 8 Plus Galaxy LG 対応 5W & 7.5W & 10W 出力 ブラック

このスタンドのいいところは置くだけで充電できる点だけではなく、通知が来た際にスマホの方を向くとFaceIDが効いて通知を展開できるところですね。地味に便利。

充電ケーブル

机の右端にこれをつけました。

SOULWIT ケーブルホルダー ケーブルクリップ デスク コンピュータデスク USBデータケーブル マウスライン キーボードライン 充電ケーブル ヘッドフォンケーブルの整理に適し 片づけ 優れるシリコン 高品質3M両面テープ 3本入れ [3 5 7穴]

マウスやヘッドホンの充電ケーブルはここに固定してあります。使いたいときだけ引っ張って使う方式です。

イラスト

デザフェスで購入した水彩画家タケダヒロキさんのポストカードを飾っています。

www.tricera.net

そのうち原画買ってしまう気がする。

七味唐辛子

八幡屋礒五郎 七味唐辛子 缶 14g

日本三大七味の1つである八幡屋礒五郎の七味。日本三大七味は東京は浅草寺門前のやげん堀、京都は清水寺門前の七味家、そして信州は善光寺門前の八幡屋礒五郎です。他にも原了郭の黒七味や、大木唐からしも有名ですね。ただ、やはり故郷の七味は体に馴染んでいるので、八幡屋礒五郎を使っています。

本当は冷蔵庫で保管したほうが良いのですが、「リビングで嫁がリモートMTGしていて七味をとりにいけなかった」トラウマから机にも常備しています。

まとめ

とても長い記事でしたが、最後までお読みいただきありがとうございました！

「Mac mini買うならデスク環境も全部再構築するか！」と一念発起。構想・調査・Amazonで買えるものを買うのに1週間、実店舗への買い出し・塗装・工作に2日かかりました。しかし、とても快適なデスク環境が整って満足しています。

さて、デスク周りはきれいになりましたが、後ろを向くとディスプレイの空き箱や余った部品が目に入ります。次の土日はこの整理からですね。

4Kディスプレイ買った。

LG モニター ディスプレイ 27UK850-W 27インチ/4K/HDR対応/IPS非光沢/USB-Type-C、HDMI×2、DisplayPort/スピーカー搭載/FreeSync、高さ調節、ピボット対応

会社でも使っていて、家にも既にある4Kディスプレイを買い足した。 すでにあるディスプレイは、WFHしている妻に専有されてしまったので、追加で購入するのはしかたないことなのである。やったぜ。

せっかくなら他のディスプレイを購入することも考えたが、下記の条件にマッチするものが見つからなかった。

• 4K
  • もう4K未満じゃつらい
  • なんなら5Kにするか迷った
• Thunderbolt 3に対応している
  • ケーブル一本接続で映像出力、電源供給、USBハブが得られる
  • 一度体験すると手放せない
• 音声を外出しできる
  • 3.5mmステレオミニプラグで良い
  • ディスプレイのスピーカーじゃなくて、こちらが用意したスピーカーで音がなってほしい
• HDR対応
  • HDRにもレベルがあるっぽいけど、とりあえず対応してれば良し
• 27インチ前後
  • 30までいくとでかいかなー。24だと小さいかなー。という感覚。
• VESAマウント対応
  • ディスプレイアームをつけたい時期があるので
• 高さ調整
  • 上下に動いてほしいですね
• ピボット
  • 回転してほしいですね
  • ディスプレイアームをつければ良いんだけど、つけないときでも便利でありたい。

という感じ。曲面ディスプレイとかゲーミングディスプレイとかも考えたけど、今回は仕事で使うので安定したものを求めた。 次に買うときには曲面とか気になってる。

ちなみに、もう1つ検討してたのがこれ。

LG 27インチ5K (5120×2880)IPS 液晶ディスプレイ 27MD5KL-B

同時期にMacMiniも購入したので、さすがにお値段の力強さに勝てなくてやめた。

TeXでMarkdownやHTMLのインラインコード表示を再現する

やりたいこと

Markdownでできる こういう表記 です。HTML的には <code></code>で表現されます。正確には、このブログのように <code></code> にCSSが適用された見た目を再現します。

用意するもの

• tcolorbox

設定

tcolorbox に含まれる tcboxをカスタマイズして利用します。

\usepackage{tcolorbox}
\newtcbox{\code}[1][]{
  colback=gray!10!white,
  colframe=gray!20!white,
  boxrule=1pt,
  left=0mm,right=0mm,top=0mm,bottom=0mm,
  box align=base,
  nobeforeafter,
  fontupper=\ttfamily
}

\begin{document}
こうすると \code{<code></code>} みたいに表示されます。
\end{document}

この様に書くと

この様に出力されます。

画像が表示されなくなったら

tcolorboxを導入するとPNGなどの画像が表示されなくなる場合があります。その場合は

\documentclass[a4j,12pt]{jarticle}
\usepackage[dvipdfmx]{graphicx, color}
\usepackage{tcolorbox}

こういった指定を

\documentclass[a4j,12pt,dvipdfmx]{jarticle}
\usepackage{graphicx, color}
\usepackage{tcolorbox}

こう変えると直ります。

参考サイト

• tcolorboxの基本 - 物理とTeXに関する話題
• tcolorboxの公式ドキュメント
• LaTeX で TikZ を usepackage していると PNG 画像が表示されなくなる - fohte.log

MacにHomebrewでOMakeを入れられないので、opam経由でインストールする。

環境

• mac OS Catalina 10.15.5
• zsh

前提

久しぶりにOMakeを使おうと思ってHomebrewでインストールしようとしたら

$ brew install o-make
Error: No available formula with the name "o-make"
==> Searching for a previously deleted formula (in the last month)...
Error: No previously deleted formula found.
==> Searching for similarly named formulae...
This similarly named formula was found:
automake
To install it, run:
  brew install automake
==> Searching taps...
==> Searching taps on GitHub...
Error: No formulae found in taps.

となった。簡単に調べて見たけど、メンテされなくて死んだ雰囲気を感じる。

github.com

仕方ないので、他の方法で導入する。

opamをセットアップする

opamはOCaml Package Managerのこと。

$ brew install opam
$ opam init // 色々聞かれるので答える
$ eval $(opam env)

これでopamのセットアップ終了。ちなみに opam init 時に 「.zshrc に設定入れとく？」と聞かれるけど、これを任せると絶対パスで記載されて不便なので、自分で

# opam configuration
test -r $HOME/.opam/opam-init/init.zsh && . $HOME/.opam/opam-init/init.zsh > /dev/null 2> /dev/null || true

を.zshrcに書くのが良いと思います。

OMakeを入れる

あとは簡単で

$ opam install omake

して待つだけ。インストールできたら

$ omake --version

で使えるか確認しましょう。

SwiftUIでUILabelやNSAttributedStringを利用せずに文字装飾をがんばる

1つのText 内で文字色を変えたり、太字にしたり、下線を入れたりと、文字装飾を行いたいことがあると思います。UIKit時代ではUILabelやUITextViewとNSAttributedStringを利用して実装していたと思います。

今回は例として複数の tag を , で結合して表示したい場合考えていきます。さて、なにも装飾せずに結合して表示するのはとても簡単です。

struct ContentView: View {
    let tags = Array(repeating: "tag", count: 10)

    var body: some View {
        Text(tags.joined(separator: ", "))
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView().previewLayout(.sizeThatFits)
    }
}

としてあげれば

このように簡単に表示できます。もしタグが100件になったとしても。

このように問題なく表示できます。

さて、ここで「,だけ色を赤くしてください」という要求が来たらどうしましょう。思いついた解決策は3つ。

• HStackにTextを積んでいく
• UIViewRepresentableを使って、UILabelとNSAttributedStringを使う
• Textを結合する

HStackにTextを積んでいく

まず1つめの「HStackにTextを積んでいく」ですが、これはダメでした。要素が少ない場合は良いのですが、HStackは折り返しに対応してないので、思った通りの挙動をしてくれません。

UIViewRepresentableを使って、UILabelとNSAttributedStringを使う

これも粘ったんですが、「高さがうまく算出できずに表示がぶっ壊れる」問題が解決できませんでした。

• SwiftUI: How to simulate NSAttributedString in SwiftUI ▪ Dreamcraft
• swiftui - How can I get text to wrap in a UILabel (via UIViewRepresentable) without having a fixed width? - Stack Overflow
• [SwiftUI]UIViewRepresentableのプレビューでsizeThatFitを有効にする - Qiita

これらの記事を参考に書いてみたコードがこちら

struct TextWithAttributedString: UIViewRepresentable {
    typealias UIViewType = UILabel

    var width: CGFloat
    var attributedString: NSAttributedString

    func makeUIView(context: Context) -> UILabel {
        let label = UILabel()
        label.numberOfLines = 0
        label.attributedText = attributedString
        label.lineBreakMode = .byTruncatingTail
        label.preferredMaxLayoutWidth = width
        label.setContentHuggingPriority(.defaultHigh, for: .horizontal)
        label.setContentHuggingPriority(.defaultHigh, for: .vertical)

        return label
    }

    func updateUIView(_ uiView: UILabel, context: Context) {
        uiView.attributedText = attributedString
        uiView.setContentHuggingPriority(.defaultHigh, for: .horizontal)
        uiView.setContentHuggingPriority(.defaultHigh, for: .vertical)
    }

}

struct TextWithAttributedString_Previews: PreviewProvider {
    static var previews: some View {
        let tags = Array<String>(repeating: "tag", count: 100)
        let attributedString = NSAttributedString(string: tags.joined(separator: ", "))

        return Group {
            GeometryReader { geometry in
                TextWithAttributedString(width: geometry.size.width, attributedString: attributedString)
                .fixedSize()
            }.previewLayout(.sizeThatFits)
        }
    }
}

そしてプレビューがこちら

一見良さそうなんですが、 .sizeThatFits しているのに無駄な高さが発生してしまっています。もちろん、ここで実装した TextWithAttributedString を別のView内で使うと高さ計算がおかしくなっており、表示が重なったり無駄な空白ができてしまいます。

執筆時に思いついたんですが、UILabelではなくてUITextViewを利用すれば、うまくいくかもしれません。

Textを結合する

最後の方法です。実はSwiftUIの Text は + でつなげていくことができます。つまり、

struct ContentView: View {
    var body: some View {
        Text("A") + Text("B") + Text("C")
    }
}

という書き方が可能です。この機能を利用して実装してみたのがこちら、

struct ContentView: View {
    let tags = Array(repeating: "tag", count: 30) + ["lastTag"]

    var body: some View {
        tags
            .dropLast()
            .map { Text($0) + Text(",").foregroundColor(.red) }
            .reduce(Text("")) { $0 + $1 }
            + Text(tags.last ?? "")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        return ContentView().previewLayout(.sizeThatFits)
    }
}

実行してあげると、

このように , を赤くすることができました。

まとめ

SwiftUIのTextは + で結合できるので、UIKit時代は NSAttributedString で行っていた文章内の色分けや下線・太字処理を簡単に実現できるようになりました。今回はタグをつなぎ合わせる , を赤くするだけの簡単なサンプルでしたが、例えば文章中のハッシュタグは青色にして太字にするといった処理も（データ形式によりますが）比較的簡単に書けるようになったと思います。

GitHub謹製のghコマンドとpecoを組み合わせて、高速にPull Requestのブランチにチェックアウトする。

GitHub公式からghというCLIツールがbetaリリースされています。まだbeta版ですが、非常にシンプルで使いやすいCLIツールです。 この記事では、その ghとpeco を利用して、高速にPull Requestに対応するブランチにチェックアウトする方法を説明します。

コードレビューをお願いされて「checkoutして挙動を確認したいな」という時に、ブラウザでGitHubを開いてブランチ名をコピーする必要がなくなるので非常に便利です。

様子

手順

macOS 10.15.4での手順になります。まず、pecoとghが入っていない場合は準備します。

$ brew install peco
$ brew install gh

次にこちらを .zshrc に追記します。

function peco-checkout-pull-request () {
    local selected_pr_id=$(gh pr list | peco | awk '{ print $1 }')
    if [ -n "$selected_pr_id" ]; then
        BUFFER="gh pr checkout ${selected_pr_id}"
        zle accept-line
    fi
    zle clear-screen
}
zle -N peco-checkout-pull-request

そして $ source .zshrc をするなどして .zshrc の変更を読み込んだあとで

$ peco-checkout-pull-request

とすると、pecoでP-Rを選択してCheckoutできます。このままだと毎回コマンドを打つ必要があって不便なので .zshrc に

bindkey "^g^p" peco-checkout-pull-request

と書いておくと Ctrl+g, Ctrl+p と入力することでP-Rを選択してCheckoutできます。

まとめ

gh には他にも便利な機能があるので、「pecoでPull Requestを選択してブラウザで開く」といった機能も作れそうですね。