Xheldon Blog

デュアルブートシステム間で同じショートカットキーを使う方法

Thu, 07 Aug 2025 00:00:00 +0000

はじめに

私が最後にWindowsを使ったのは10年前の学生時代で、使っていたのはLenovo Y470-Pでした。このノートパソコンには設計上の欠陥があり、一度ディスプレイを閉じた際に部品が焼損してしまい、最終的にはマザーボードを交換する羽目になりました。

卒業後すぐに2015年製の15インチMacbook Proを購入し、その後数年でマシンは変わりましたが、ずっとAppleのエコシステムにいたため、Windowsの使用体験は10年前のまま止まっていました：エコシステムの分断、ソフトウェアの使いにくさ、デザインの醜さ（これは今も変わらない）、そして不合理なインタラクションデザイン。

618セールで中高スペックのPCを組み立てました。14700KF、5070Ti、Crucialの64GB 6400MHzメモリと2TB SSDを搭載し、今では手放せません：高性能なWindowsマシンはこんなに滑らかだったのかと。システムデザイン言語は相変わらず不合理ですが、ソフトウェアの起動速度や優れたアプリのデザイン言語（例えばWindows版Apple Musicなど）はとても良いです。もちろん最も重要なのは、Windowsを購入した理由がゲーム（80%）とプラットフォーム固有のコードであるC#を書くため（20%）だということです。

効率的な入力の本質

長期間（9年間）MacでHHKBを使用してきたため、MacのHHKBキーマッピングをWindowsにも適用したいと考えています。これは習慣的な理由だけでなく、以下の考慮事項によるものです：

行頭移動、行末移動、右削除などのテキスト編集で頻繁に使う機能は、Windowsでは専用キー（Home、End、Delなど）を押す必要があり、修飾キー＋キーの組み合わせでは実現できません。しかしMacではシステムレベルでEmacsキーバインドがサポートされており、Control+Aで行頭、Control+Eで行末、Control+Dで右削除が簡単に実現できます。
上下左右のカーソル移動も同様で、Windowsでは専用の方向キーを使いますが、MacではControl+B/F/N/Pで実現できます。

なぜWindowsの単独キーではなく、Macの修飾キー＋ショートカットの組み合わせを好むのか疑問に思うかもしれません。

この疑問の答えこそが、私がHHKBの60%配列を特に気に入っている理由です：手のひらを大きく動かさずにすべての操作が完了でき、入力効率を保証できるからです。

プログラマーの世界では、マウスを使える場面でキーボードを使わないと刑に処されます！

例えば、Windowsで高速に入力中に、前に書いた部分に誤字があることに気づき、数文字削除する必要がある場合：

右手をアルファベット領域から離し、人差し指で右下の方向キーを探す（87キー以上のキーボードなら探す必要はないが）
方向キーを押してカーソルを移動
右手を方向キーから離し、Backspace位置に移動
削除キー（Backspace）を押す

MacのHHKB配列なら、左手だけで同じ操作が可能です：

左手小指でControl+Bを押してカーソル移動
右手小指でBackspaceを押すか、左手小指でControl+H/D（左/右削除）を押す

これだけです。手をホームポジションから離す必要がありません。

修正後も、Windowsでは右手を再び動かしてEndキーを押す必要がありますが、Macでは左手でControl+Eを押すだけで済みます。

苦労するバッククォート ` の入力

HHKBを気に入っているもう一つの理由は、フロントエンド開発者としてバッククォート（チルダのキー）を頻繁に使うからです。一般的な60%キーボードではこのキーはESCに配置され、修飾キー組み合わせで入力します。しかしHHKBではこのキーを独立させて右上に配置し、Deleteキーを下に、｜キーを上に移動することで実現しています（通常のBackspaceが2つの1uキーに分割された形です）。

苦労するControlキーの入力

一般的なキーボード配列で入力効率に影響するもう一つの設計は、Controlキーが左下にあることです。Control＋キーを押すとき、手首は必ず左に曲がり、手のひらは右に移動します。手のひらを動かす必要のある入力方法はエレガントではなく、効率に影響します。

ただし、ネット上には小指の下の手のひら部分で左下のCtrlを押そうとする試みもありますが、これは不合理です：

私は極端に、口を開閉して発音する言語はエレガントではないと考えています。エレガントな言語の発音は口を大きく開閉する必要がなく、舌と喉の協調だけで明確に発音できるべきです。そのため日本語が最もエレガントな言語だと考えています——これは同時に日本語の表現力、特に強い感情を表す罵倒語の面で弱いことにもつながっています。

余計なCapsLockキー

長時間にわたって頻繁に大文字を入力する人はほとんどいないと思うので、一般的なキーボード配列でCapsLockキーを左手小指という重要な位置に配置するのは全く理にかなっていない。

以上のことから、HHKBの配列が最も完璧だと考えています。その対称美だけでなく、入力効率の高さも理由です。また、Macのショートカットキー、少なくともテキスト操作の効率性においてはWindowsを上回っています。

そこで、次にMacのキー配置をWindowsに再現する方法を共有します。これにより、両OSで同じ手の筋肉記憶を使って効率的に編集できるようになります。

HHKBで最も批判されがちな方向キーについてですが、基本的に方向キーでカーソルを移動できる場所ではEmacsのショートカットが使えます。ただし……Pythonなどの一部のターミナルではControl-DがCLI終了になってしまったり、Remote SSH接続時のLinuxホストでは問題が発生します。これは確かに厄介ですが、良いターミナルを使うことで多少回避可能です。Warpを検討してみてください。このターミナルはテキストエディタのようにコマンドを入力できるため、Emacsショートカットでコマンド入力が可能です。言葉ではわかりにくいかもしれませんが、試せば通常のターミナルとの違いがわかるでしょう。

キーボード要件

マルチレイヤーキーマッピングをサポートしたキーボードが必要です。つまりFNキー＋他のキーの組み合わせが可能なものです。マクロ機能はあってもなくても構いません。6層までのマッピングをサポートするキーボードもあります（デュアルシステム切り替えで各システム3層）。私は新しく購入したNuphy Air75 V3を使用しています。HHKBではなくこれを選んだ理由は、WindowsでゲームをするためFキー（F1～F12）が必須で、75キーが私の許容できる最小サイズだからです。

砲車をミスったら即座に？マークを送信する —— Faker

FNキーマッピングでEcmacsテキスト編集を実現

以下のテキスト編集機能を実装します（記載形式はWindowsキー → Macショートカット）：

行頭に移動：Home → Control + A
行末に移動：End → Control + E
下に移動：↓ → Control + N(Next)
上に移動：↑ → Control + P(Previous)
左に移動：← → Control + B(Back)
右に移動：→ → Control + F(Front)
右削除：Del → Control + D(Delete)
左削除：Backspace → Control + H(Hが削除を表すのは歴史的経緯によるものです。興味があれば調べてみてください)

個人的にはMacでのコピー＆ペーストにControl+C/VではなくCmd+C/Vを使う設計が好みです（ただしマッピングはしていません）。おそらくEcmacsが歴史的にコピー＆ペーストをサポートしておらず、テキスト編集特有のショートカットでもないため、Macではコピー＆ペーストの修飾キーをCMDに設定したのでしょう。

したがって、WindowsでMacのHHKBと同じキー配置を実現するにはCapsLockをFNレイヤーに変更する必要があります（私はFN6に設定しました）。その後、各キーを個別にマッピングします：

FN6レイヤーで各キーをWindowsの対応機能にマッピングします：

アルファベット領域のキー変更

HHKBではEnterキーの上にDeleteキーBackspaceがあり、｜キーではありません。当初はBackspaceと｜キーを入れ替えていましたが、不思議なことに手が75キー配列に適応してしまい、Deleteを押すつもりで常に上の｜キーを押してしまうようになりました。HHKBに切り替えると下の列を強制的に押さなければならず、非常にストレスを感じたため、両方ともBackSpaceに変更し、ほとんど使わない｜キーをF13の位置に移動しました。

次に、ControlとAltの位置を交換しました。これにより、MacでのCMD+C/V/T/Wなどの操作とWindowsでのControl+C/V/T/Wなどの操作で同じ指の動きが可能になります。

最後に、WinキーとAltを交換（Winキーをキーボード左下に配置）することで、WindowsとMacでAlt（Opt）の位置を統一しました。

これで、スペースキーの左側のキー（WindowsではCtrl、MacではCMD）を押した後の操作が完全に同じになります。Ctrl/Cmd+Cでコピー、Ctrl/Cmd+Vでペースト、Ctrl/Cmd+Tで新規タブ、Ctrl/Cmd+Shift+Tで閉じたタブを復元など。

その他のキー変更

すでにHomeとEndのショートカットキーがあるため、キーボードの最右端にあるHomeとEndは不要です。そこで私は2つの操作を行いました。Homeキーをよく使うショートカットに変更し、Win + Vに設定しました。このショートカットはWindowsではクリップボード履歴を開き、MacではCmd + Opt + CにマッピングしてAlfredのクリップボード履歴ウィンドウを開くようにしています。

HomeキーはM1マクロにマッピングし、コピー履歴を開きます。EndキーはWinLockに変更し、左下のWinキーを誤って押すのを防ぎます。現在はゲームプレイ時と同様にWinキーをロックし、慣れてから再度有効にする予定です。

美中不足

WindowsではAlt + Tabをマッピングできません。このキーの重要な役割はアプリケーションウィンドウの切り替えです。上記の設定後、この機能はスペースキーの左隣2番目のキー + Tabキーで実行されます。

しかし、Macでアプリケーションを切り替える場合はCmd + Tabを使用します。

したがって、私の設定ではアプリケーション切り替えキーのみが両システムでシステムレベルでマッピング不可となっていますが、他のキーはすべて同じ筋肉記憶で操作可能で、WindowsとMacのショートカット位置の違いを意識する必要はありません。

後書き

自分に合ったものが最善です。どのキー配置が優れているか議論する必要もありません。習慣の力は強力で、一度慣れてしまえばそれが最高の効率をもたらします。

Happy Hackingをお祈りします！

アプリ開発の旅（一）：摩訶不思議なSwift

Thu, 27 Mar 2025 00:00:00 +0000

説明

なぜJavaScriptではないのかと聞かれることがありますが、それはスクリプト言語であり、型システムなどがなく、Swiftとは比較にならないからです。

私はフロントエンド開発者で、C、Java、Python言語については入門レベルの理解しかありませんが、TypeScript（以下TS）の機能と使用に関しては上級レベル（自負）です。そのため、私が驚く点が、他の方々にとっては「ただの当たり前の言語機能」に思えたり、「TypeScriptの設計者は天才なのか？」と感じられるかもしれません。

私はSwiftとTSの違いすべてに無理に驚くわけではありません。なぜなら、一部の違いはTS自身の不足によるものであり、またコンピュータ言語では一般的な設計（例えば数字をIntとDoubleで区別し、Number型だけにしないなど）もあるからです。驚くべきはJSの設計（結局1週間で急いで設計されたものです）であって、Swiftではありません。

私の考えでは、言語のルールや例外、予約語が多すぎる場合、それは良い言語とは言えません。

はじめに

この記事はSwiftの公式言語紹介の順番に沿って驚きを記述しており、驚かなかったり理解できない内容（例：附加宏）は省略しています。

基本知識

驚きポイント：XCodeには`/** */`ブロックコメントのショートカットがなく、`cmd + /`の行コメントしかありません。

VSCodeのブロックコメントショートカットも押しにくく、Alt + Shift + Aです。この機能はあまり使われていないのでしょうか？

もちろん、VSCodeとXCodeどちらも、/**と入力してEnterを押すと、自動的にブロックコメントが生成されます。

オプショナルバインディング

驚きポイント：デバッグ中に`if`文で常に`true`となる値をテスト用に書こうとしてもできません。`if`文のオプショナルバインディングは、必ずオプショナル型の値でなければなりません。

1	`if let a = 2 { } // 错误！`

こんな必要ある？

コレクション型

驚きポイント：配列メソッドの中で、`sort` はその場でソートを行うのに対し、`sorted` は新しい配列を返します。

一つの言語がフレームワークの仕事までこなすとは、さすがAppleのスタイルだ。これに類する驚きは他にもたくさんあるが、いちいち驚いている場合ではない。

制御フロー

if式

驚きポイント：`if-else`で同じ変数に代入する場合に対処するため、`if`式の書き方が用意されています。同様に、`switch`にも式形式が存在します。

Swiftはやりすぎなところがある：

// 平平无奇的写法
let a = 25
let str: String
if a <= 0 {
    str = "小"
} else if a >= 30 {
    str = "大"
} else {
    str = "中"
}
// 简写法
let str = if a <= 0 {
  "小"
} else if a >= 30 {
  "大"
} else {
  "中"
}

Switchのすごい判定

驚きポイント：switchには暗黙のフォールスルーがない

しかしこれは理解できるし、より合理的だ。普通の人が、わざわざ break を書かずに case 1 から case 2 に自動的に進んでほしいと思うだろうか？

驚きポイント：switchはオブジェクトの値を判定できる！

これは実際には feature であり、直感的により合理的で、まさにプロフェッショナル向けだ。

TSでは、switchのcase文が全等(===)判定を使用するため、通常switchの括弧内にオブジェクトを渡すことはない。オブジェクトは参照を判定するものであり、TSではオブジェクトの等価性を判定する必要がある場面は稀で、ましてやswitch文で判定することはまずない。

しかしSwiftでは、case文で判定する値を「キャプチャ」できる（正式名称は「パターン」と呼ばれる）：

let somePoint = (1, 1) // 一个平平无奇的元组罢了
// 我现在，开 始 判 断：
switch somePoint {
case (0, 0):
    print("\(somePoint) 在原点")
case (_, 0): // 忽略第一个值
    print("\(somePoint) 在 x 轴")
case (0, _): // 忽略第二个值
    print("\(somePoint) 在 y 轴")
case (-2...2, -2...2): // 判断元组的两个值是否分别在给定区间，在就匹配成功
    print("\(somePoint) 在盒子内部")
default:
    print("\(somePoint) 在盒子外部")
}

// 还可以值绑定！
switch somePoint {
case (let x, 0): // 匹配第二个值，捕获第一个值
    print("x轴值：\(x)")
case (0, let y): // 匹配第一个值，捕获第二个值
    print("y 轴值：\(y)")
case (let x, let y): // 兜底，因为 x 和 y 都是 let，还可以写作 case let (x, y)
    print("\(x) 和 \(y)")
}
// 还可以加 where 限定：
case let (x, y) where x == y:
//还可以多个匹配
case "a", "b", "c":

TSにおいても「複数マッチ」がサポートされていますが、Swiftのcaseにおける複数マッチとは全く異なることに注意が必要です。

Swiftの複数マッチでは、カンマ区切りの内容のいずれかが一致すればcase文が実行されます。しかし、TSのカンマ区切りのマッチは、本質的に最後の項目のみにマッチします。これはTSにおけるカンマ区切りの文が最後の値のみを返すためです：

var a = "d"
switch (a) {
 case "d", "c", "b":
  console.log("OK")// 此处不会执行，因为此 case 匹配 "b" 
}

関数

関数のラベル付き引数

驚きのポイント：仮引数（ラベル付き引数）は同名でも良い？？？さらに規定（また制限が来た、参った）：可変引数の後ろの引数は必ず引数ラベルが必要（もし1つだけなら実引数が仮引数になる）省略できない。

// 下面两个 a 标签参数，完全合法（因为是 label 无所谓）
// 而且 a b 后面的参数 a c（或者单独的一个参数）必须存在，不能用 _ 省略，
//  也可以理解，要不咋知道是第二个参数，而不是前面的可变参数来的？
func a (a b: Double..., a c: Double) -> Double {
    return b.reduce(0, +) + c
}
a(a: 1, 2, 3, 4, 5, a: 6)

クロージャ

クロージャのN種類の省略記法

驚きポイント：クロージャのシンタックスシュガーが多すぎてここでは全て列挙しませんが、最も衝撃的なのはたった1つの `>` 記号だけで表現できる形式です。

このように書ける本質的な理由は、String型に > という名前の関数が存在するからです。そうです、記号も関数になり得るのです！この点については後ほどさらに驚くべき内容を紹介します。

1 2	`var num = ["9", "2", "1"] var sortedNum = num.sroted(by: >)`

本当に信じられない。

returnの省略

驚きのポイント：「単一行のreturnは省略可能」と理解できるかもしれないが、「複数行でもreturnを省略できる」ことは絶対に理解できないでしょう

TypeScriptにおけるreturnの省略は、Swiftの通常の書き方と同じで、単一行のreturn省略：

// 省略写法
var a = () => 2
// 正常写法是：
var a = () => {
 return 2
}

通常のSwift構文：

1
2
3

func a()-> Int {
 2 // -> 因为单行，所以省略了 return
}

しかし！SwiftUIでの書き方：

VStack {
 Text("Hello")
 Text("World")
}

驚くべきことに、これもトレーリングクロージャ関数です。VStackは関数であり、クロージャパラメータが最後かつ唯一のパラメータとして渡されるため、VStackの括弧を省略できます。しかし！ここでは2つのText関数呼び出しを返しているのに、returnが書かれていません。なぜでしょうか？

それはViewBuilderを使用しているからです。この仕組みは後述するresultBuilderと同じシンタックスシュガーです。

自動クロージャ

驚きポイント：一見普通のクロージャ代入に過ぎないようですが、その遅延評価能力には驚かされました。

自動クロージャについて最初に学んだ時、この例で「遅延評価」能力について説明されました：

var customersInLine = ["Chris", "Alex", "Ewa", "Barry", "Daniella"]
print(customersInLine.count)
// 打印 “5”
let customerProvider = { customersInLine.remove(at: 0) }
print(customersInLine.count)
// 打印 ”5“
print("Now serving \(customerProvider())!")
// 打印 “Now serving Chris!”
print(customersInLine.count)
// 打印 “4”

これはごく普通のクロージャーで、TSと同じくcustomerProvider変数がクロージャーに代入されているだけだと私は考えます。同じ実装をTSで書くとこうなります：

1
2
3

let customerProvider = () => {
 // 省略逻辑
}

そしてもちろん、それが呼び出されたときに初めてクロージャーのロジックが実行されます。これこそ遅延評価というものです！

しかし、その遅延評価の真価が発揮されるのは、クロージャーが引数として渡される場合です。

ごく普通の明示的なクロージャー呼び出しは、TSの呼び出し方法とほぼ同様で、クロージャーを引数として受け取り、書き方も中括弧の中に記述します：

// customersInLine 是 ["Alex", "Ewa", "Barry", "Daniella"]
func serve(customer customerProvider: () -> String) {
    print("Now serving \(customerProvider())!")
}
serve(customer: { customersInLine.remove(at: 0) } )
// 打印 “Now serving Alex!”

しかし、customerProvider を @autoclosuer とマークすると状況が変わります。この場合、serve 関数の呼び出しは次のように記述できます:

// customersInLine 是 ["Ewa", "Barry", "Daniella"]
func serve(customer customerProvider: @autoclosure () -> String) {
    print("Now serving \(customerProvider())!")
}
serve(customer: customersInLine.remove(at: 0))
// 打印 “Now serving Ewa!”

最後の serve 関数の呼び出しに注目してください。その引数 customer は文 customersInLine.remove(at: 0) です。TSでは、どんな場合でも呼び出しスタックはまずこの値を評価してから serve 関数を呼び出します。しかしSwiftでは、この書き方は上記の形式と単に見た目が異なるだけで、ロジックは同じです。つまり、まず serve 関数が実行され、その後内部でこの文が実行されます（customerProvider が呼び出された時点で）。これこそが噂の「遅延評価」というものでしょう。

このようなケースを多く書いていると、以下のようなコードに頻繁に出くわすことになります：

1 2	`a(b.remove(2)) c(d.add4())`

ここでは、括弧内の文が先に実行されるのか、外側の関数が先なのか判断が難しい場合があります。そのため、Swiftの公式ドキュメントでも以下のように説明されています：

自動クロージャを過度に使用すると、コードの可読性が低下する可能性があります。コンテキストや関数名は、計算が延期されていることを明確に示す必要があります。

本当に信じられない、推奨されていないなら最初から設計すべきじゃなかったのに！

列挙型

驚きポイント: 他の言語では単なる状態判断のためのオプション的な型に過ぎない列挙型が、Swiftでは最もよく使われる第一級の型であり、Structの機能を一部置き換えることができるなんて信じられますか？

驚きポイント2：列挙型は値型です。

TypeScriptにおける列挙型はごく普通の「列挙型」にすぎず、単に値を列挙するだけで、主に状態マシンで状態を記述するために使用されます：

enum A {
 B = "B"
 C = "c"
}

もちろん、TSが提供する様々な機能には、実行時とコンパイル時の違いなどもありますが、ここでは触れません。TSでは、列挙型の代わりに完全にオブジェクトを使用することができます：

const enum A {
  B = 0,
  C = 1,
}

const A = {
  B: 0,
  C: 1,
} as const;

暗黙的な代入

驚きポイント: 列挙型の型宣言は、列挙型自体の型（キーと値のペア）ではなく、ケースの型を宣言している。

Swiftにおける暗黙的な代入は、TypeScriptやその他のC系言語と同様で、最初の数字がnであれば、その後の値はn+1となります。

しかしSwiftはさらに一歩進んでいて、宣言した型に基づいて暗黙的に値を代入します。デフォルトでは行われません。例えば：

enum A: Int { // <- 声明了 Int 类型，所以隐式赋值了
 case b, c, d // b c d 分别为 0 1 2(需要使用 A.b.rawValue 才能访问，这又是另一个震惊点了）
}
enum B: String { // <- 声明了 String 类型，所以隐式赋值了
 case bb, cc, dd // bb cc dd分别为 "bb" "cc" "dd"
}

TSでは、Swiftで指定できるInt型（実際にはcaseの型を指す）さえ指定できず、enumの型（通常はRecordで別途定義されたキーバリューペア）しか指定できません。

構造体とクラス

衝撃の事実：構造体が値型だって？？？

この一見しっかり者の構造体が、実は値型（パフォーマンス最適化のためにImmutableの仕組みを使用）だったとは：

struct a {
 var b: Int
 var c: String
}

波括弧付きのもの、どう見ても値には見えない！信じられない！驚き！

プロパティ

様々なxxプロパティ/ラッパー/オブザーバー

驚きポイント：Swiftがやりすぎている。計算プロパティ、ストアドプロパティ、プロパティラッパー（TSにもある）、プロパティオブザーバー（TSにもあり、ラッパーと一緒）といった概念は、通常フレームワークが提供するものだ。例えばVueの`computed`や`watch`など。しかしSwiftはStructとクラスの中でこれらを自前で実装している。信じられない！

struct A {
 var b = 2 // <- 存储属性，直接有值，在 struct 实例化的时候就确定了
 var c: Int {
  return b * 2 // <- 一个只读计算属性，不存储值，因为单行，return 可以省略
 }
}

なお、属性ラッパーはグローバル変数には使用できません。

サブスクリプト

驚きポイント: これについては特に言うことはありません。「サブスクリプト」という概念自体が既に驚きで、コレクション、リスト、ディクショナリの要素にアクセスするためのショートカットを提供しています。さらに、サブスクリプトは関数のように複数の値を渡すこともできます。

基本的に、サブスクリプトの呼び出し方法は、データ構造（前述のコレクション、リスト、ディクショナリ）に対する関数呼び出しで値をアクセスすると考えられますが、違いは関数呼び出しが () を使用するのに対し、サブスクリプトは [] を使用することです。

継承

驚きポイント: これまでのすべての驚きポイントと同様に、Swiftはさまざまな目的や効果を実現するために、あたかも随意にキーワードを追加しているかのようです。そのため、継承に関連する予約語（もちろん、「予約語」と呼べるものではありません。Swiftでは予約語もすべて使用可能で、バッククォートで囲めば良いのです。これについては後ほど驚きポイントとして取り上げます）が数多く存在します。例えば: `final`、`override`、`open`、`required` など。

初期化プロセス

Structのメンバーワイズイニシャライザ

驚きポイント: Structは値型であるため、従来のClassのイニシャライザルールとは初期化時に違いがあります。

本来、StructとClassはどちらもごく普通のデータ構造で、TSのClassと何ら変わりません。しかし、Swiftはここでも一風変わったことをしています。

Structは値型であるため、特別な点として「メンバーワイズイニシャライザ」と呼ばれる初期化形式があります。これは、Structに init が全く定義されていない場合、そのプロパティを初期化するために引数を渡す形式でinitでき、明示的に記述する必要がないというものです。

// 此 Struct 没有 init，因此适用逐一成员构造器
struct A { 
 var a: Int
 var b: Int
}
// 上述效果等同于：
struct A {
 var a: Int
 var b: Int
 init(a: Int, b: Int) {
  self.a = a
  self.b = b
 }
}
// 上面两个都可以这么用：
A(a: 1, b: 2)

しかし、このルールはClassには適用されません。Classは明示的にinitコンストラクタメソッドを持ち、プロパティを初期化する必要があります。

クラスの指定イニシャライザとコンビニエンスイニシャライザ

驚きポイント: え？イニシャライザには2種類あるの？？？

クラスの指定イニシャライザは、TSにおける通常のconstructと同じ役割を持つinitメソッドです。しかし、そのコンビニエンスイニシャライザは…initの前にconvenienceキーワードを付ける（また来た！）ものです:

1	`convenience init() {}`

実はここでSwiftのドキュメントは、なぜ便利イニシャライザが必要なのかを明確に読者に伝えず、直接クラスの初期化、継承プロセスとイニシャライザのデリゲーションについて説明しています。ここで初心者の方々に、なぜ便利イニシャライザというものが存在するのかを説明します。とてもシンプルな理由です：クラス内の複数の指定イニシャライザは互いに呼び出し合うことが許されていません。これだけの理由です。呼び出したくてたまらない？初期化プロセスを簡素化したい？それなら便利イニシャライザを使いなさい！

通常の書き方：

class A {
 var b: Int
 var c: String
 init(b: Int, c: String) {
  self.b = b
 }
 init() {
  self.b = 0
  self.c = "UnKnown"
 }
}

上記のように、self.b を2回書くのは面倒だと感じませんか？そこで、2番目の init() では、このようにしたいと考えています：

1
2
3

init() {
 self.init(b: 0, c: "UnKnown")	
}

コンパイラエラーが報告されました：Designated initializer for 'A' cannot delegate (with 'self.init'); did you mean this to be a convenience initializer?

この場合、convenienceイニシャライザを使用する必要があります：

1
2
3

converience init() {
 self.init(b: 0, c: "UnKnown")	
}

「便利」が目的です～

失敗可能イニシャライザ

驚きポイント: イニシャライザが失敗することもある？

実は、失敗可能イニシャライザとは、初期化プロセス（init関数の呼び出しプロセス）でエラーが発生する可能性があるものを指します。

したがって、イニシャライザがエラーを投げる場合、TSのように外側でtry-catchする必要はなく、直接明示すればよいです。方法はinitの後に疑問符を付けてinit?とし、エラーが発生する可能性のある場所でnilを返し、インスタンス化時にnilかどうかを判断するだけです。

Swiftでは通常のイニシャライザは値を返しません。これはTSと同じです——ただしTSのイニシャライザは値を返すことができ、返される値がオブジェクト型の場合、thisオブジェクトを置き換えます。これはさらに驚きかもしれません。

オプショナルチェーン

驚きポイント: Q: どのような場合に関数に()を書いているのに実行されない？A: オプショナルチェーンのシナリオです。

余計な説明は抜きにして、例を見てみましょう:

func A() -> Int {
    print("OK")
    return 1
}
class B {
    var c: C?
}
class C {
    var d: Int?
}
var d = B()
// 震惊的事情发生了：
// 这里，A 函数未执行，不会打印 OK，赋值也不会成功，因为 c 是 nil，这个语句返回 nil（通常 Swift 的赋值语句都返回 Void 的，也就是空元组）
// 返回 nil 意味着你可以使用 if-let 语句判断
d.c?.d = A()

エラー処理

驚きポイント：列挙型と同様に、Swiftのtry-catch（実際はdo-catch）の設計は非常に複雑です。

catch文は任意のエラーをキャッチできるだけでなく、特定のエラータイプもキャッチ可能で、isを使用したりswitch文のように複数のcatch分岐でマッチングが行えます。これは驚きです：

do {
 try someError()
} catch is ErrorA {
 // xxx
} catch ErrorB, ErrorC, ErrorD.a {
 // xxx
}

並行処理

驚きポイント：ドキュメントを読んでいた時、最初は `withTaskGroup` が Group Task を行う組み込みメソッドだとは気づきませんでした。。。

await の使い方は TS の await と全く同じで、快適です！

拡張機能

驚きポイント：拡張機能はおそらく Swift で最も強力な設計です。組み込みオブジェクトでもサードパーティ製でも、どんなオブジェクトでも、自由に、低コストで、複雑な宣言やキーワードを一切必要とせずに拡張できます。

TS では既存のクラスを拡張する場合、プロトタイプチェーンを操作し、オブジェクトの this をそのクラスに向ける必要があります。

しかし Swift では、単に extension を書くだけで、好きなメソッドやプロパティを自由に追加できます。それらの this はインスタンスを指すか、拡張型（つまり静的）メソッドやプロパティになります。

まさに圧倒的な自由度です。

プロトコル

驚きポイント：プロトコルは Struct の抽象化問題を解決するために導入されたと思います。どの言語でもクラス自体は継承可能（言い切りすぎかもしれませんが）なので、余計な「プロトコル」を実装する必要はなく、抽象クラスで十分です。ただ副次的に、Swift はクラスの単一継承を制限すると同時に、プロトコルをクラス、Struct、列挙型のすべてで活用できるようにしました。

これ以上言うことはありません。言いたいことは上記に尽きます。

ジェネリクス

驚きポイント：ジェネリクスには「関連型」という概念があり、これは宣言時に付与するジェネリクスと同様の役割ですが、より強力です。

Swift のジェネリクス関連型は次のようなものです：

protocol Container {
    associatedtype Item
    mutating func append(_ item: Item)
    var count: Int { get }
    subscript(i: Int) -> Item { get }
}

なぜこのように設計されていないのか：

protocol Container<Item> {
    mutating func append(_ item: Item)
    var count: Int { get }
    subscript(i: Int) -> Item { get }
}

おそらく、この項目が非常に長くなり、エレガントでなくなる可能性があるためでしょう。例えば：

protocol SuffixableContainer: Container {
    associatedtype Suffix: SuffixableContainer where Suffix.Item == Item
    func suffix(_ size: Int) -> Suffix
}

名前の後ろに書くと、ジェネリック宣言が頻繁に画面からはみ出してしまい、非常に扱いづらい。

不透明型とカプセル化プロトコル

驚くべき点：コンパイラには型が何であるかを知らせつつ、呼び出し側には具体的な型を知らせず、ただそれが特定のプロトコルに準拠していることだけを知らせる効果を実現できます。

基本的に、不透明型とカプセル化プロトコルが実現しようとしている効果は、一方で呼び出し側に実装詳細を隠蔽しつつ、コードをリファクタリングする際に多くの変更を必要としないようにすることです。例えば：

protocol Shape {
    func area() -> Double
}

struct Circle: Shape {
    var radius: Double
    func area() -> Double {
        return .pi * radius * radius
    }
}

func makeShape() -> some Shape {
    return Circle(radius: 5)
}

ここで、makeShapeが返す型は、Shapeプロトコルに準拠する任意の型であればよく、明示的にCircle型を返す必要はありません。このようにすることで、後からShapeに準拠する新しいStructを追加しても、この関数はそれを返すことができます（これはSwiftUIでよく使われる方法でもあります。例えばsome Viewなど）。

メモリ安全性

驚きのポイント：Swiftは値の参照渡しが可能なため、同じメモリ領域への同時読み書きが発生する可能性があります（これは理にかなっていますよね？）

var a = 1
func add(_ b: inout Int) {
    b += a
}
add(&a)

上記の実行はエラーを発生させますが、コンパイラは警告を出しません。このようなケースは多く存在するため、特に注意が必要です。TSには参照渡しの概念が存在しないため、このような問題は発生せず、簡単です～

高度な演算子

驚きのポイント: 記号を関数名として使用した関数を再定義/カスタマイズすることで、同じクラスや構造体のインスタンス間で相互操作を実現できます。

例を挙げます:

struct A {
 var b = 1
 var c = 2
 static func +(left: A, right: A) -> A {
  return A(b: left.b + right.b, c: left.c + right.c)
 }
}
// 然后你就可以
let a = A()
let b = A()
let c = a + b // <- 是的你没看错，struct 实例可以相加！

このデザインは素晴らしい、どうして思いつかなかったんだろう。すごいすごい。

注意が必要なのは、演算子メソッドには独自の属性があることです。例えば、+ は二項演算子であり中置演算子でもあるため、2つの関数を受け取ります。- は中置演算子（二項演算子）にも、前置演算子（単項演算子、func の前に prefix を追加する必要あり）にもなるため、オーバーロード可能です。

しかしSwiftでは、代入演算子 = はオーバーロードできず、三項条件演算子（a ? b : c）も同様にオーバーロード不可と規定されています。

この演算子は非常に一般的で、任意のSwift組み込みオブジェクト/Foundationオブジェクトにおいて、== のような等価判定の演算子関数を見かけることができます。

さらに、独自の演算子を実装することさえ可能です！

// 需要先声明，这是一个操作符，因为有两个值在操作符，所以这是个中缀操作符(infix)
infix operator +++++++
// 然后扩展一下整数类型
extension Int {
    static func +++++++(left: Int, right: Int) -> Int {
        return (left + right) * 7 // <- 因为有 7 个 + 号，所以我写了乘以 7
    }
}
// 这么用：
2 +++++++ 7 // <- 63

すごい。

結果ビルダー

驚きポイント：Swiftは「エレガントさ」と「再利用性」のために手段を選ばない。

以下のコードを見栄え良くするために、Swiftは@resultBuilderという魔法のようなものを「発明」しました。例：

通常の書き方：

var a = 1
var b = 2

struct A {
 var a: Int
}

// 这里会有一个三元判断
var c = A(a: a > b ? 666 : 999 )

Swiftは、上記の三項演算子による判定が煩雑で、複雑な条件分岐の場合にはコードが長くなり可読性が低下すると指摘し、よりエレガントな解決策を求めました。そこで生まれたのが（私の理解が正しければ）結果ビルダーです：

@resultBuilder
struct BBuilder {
    static func buildBlock(_ b: Int) -> Int { // 对应 if/else 分支的执行结果
        return b
    }
    static func buildEither(aaa: Int) -> Int { // 对应 if 分支
        return aaa
    }
    static func buildEither(bbb: Int) -> Int { // 对应 else 分支
        return bbb
    }
}

そして、上記の c 変数に次のように値を代入します：

func BB(@BBuilder b: () -> Int) -> A {
    return A(a: b())
}
// 终于等到 c 了，这里的 c 和最开始的 c 完全一样
var c = BB {
    if a > b {
        return 666
    } else {
        return 999
    }
}

再利用、エレガント、効率的、最高！

字句構造

驚きのポイント：Swiftには予約語が非常に多いにもかかわらず、予約語を識別子として使用することが許可されています。

方法は、バッククォートで囲むだけです：

1
2
3

func `func`() {} // <- 一个叫做 `func` 的函数
// 调用也是 
`func`()

しかし、キーワードを除けば、x と x は同じ変数です。

CusorでiOSアプリを開発しリアルタイムでプレビューする方法

Tue, 11 Feb 2025 00:00:00 +0000

本記事は著者の拡張版であり、著者の原文は以下を参照してください：

在 Cursor 打造高效 iOS 开发环境： AI 编程 + 实时预览完整指南

私がここで追加の補足をするのは、このチュートリアルを見た際、XCodeとiOS開発について全く知識がなかったため、いくつか回り道をしたからです。そのため、ここに記録を残します。

本記事は主に原文への補足ですので、まず原文をご確認ください。

「SwiftプラグインとCodeLLDBプラグインのインストール」への補足：

ここで記載されているSwiftプラグインは既に古くなっています。最新のプラグインを使用する必要があり、プラグインマーケットで「Swift Programming Language」を検索してください。

「ホットリロードの設定」のステップ2への補足：

プロジェクトの対応するTargetの設定 -> Build Settings -> 「Other Linker Flags」を検索し、それぞれ「-Xlinker」と「-interposable」を追加します。

ここで注意すべきは、両方を同時に追加することです。つまり-Xlinker -interposableをコピーして下図のように貼り付けてください：

新しいファイルを追加した後、Source Kitがファイルを見つけられないというエラーが発生する問題

Xcode-Build-Serverを使用して、原文で言及されているコマンドを再度実行する必要があります：

// 然后在项目根目录下根据你的项目文件类型执行对应的命令:
xcode-build-server config -workspace *.xcworkspace -scheme <XXX> 
xcode-build-server config -project *.xcodeproj -scheme <XXX>

//例如你用的是 exampleProject.xcodeproj：
xcode-build-server config -project exampleProject.xcodeproj -scheme exampleProject

SwiftUIのデバッグ時に変更がリアルタイムでプレビューされない問題：

一部のViewModifierを追加/変更した場合、確かにリアルタイム更新されませんが、Text内のStringのような変更であれば通常問題ありません。理由は私もわかりません。

JekyllからHexoへの移行時の問題記録

Tue, 07 Jan 2025 00:00:00 +0000

はじめに

私はフロントエンド開発者であるため、Rubyのような他のスクリプト言語には詳しくありません。ブログを書き始めた当初はGithub Pagesをブログプラットフォームとして使用し、デフォルトでJekllyフレームワークが採用されていました。コンテンツがフレームワークよりも重要だと考え、そのまま使い続け、気がつけば10年が経っていました。

その間いくつかのテーマを変更しましたが、最終的にHuxが提供するテーマに落ち着きました。シンプルで洗練されており、しかもオープンソースだったからです：

黄玄的博客 | Hux Blog

このテーマに対し、右サイドバーのカスタマイズ、データのカスタマイズ、Notionをデータソースとして使用したレンダリングなど、多くのカスタマイズを施しました。

しかし、AppleのMシリーズチップの登場により、IntelとAppleチップ間でのRubyの差異に対処することがますます困難になりました。例えば、ビルド時にx86アーキテクチャの命令を特別に使用しなければ偶然正しくビルドできる程度で、しかも依存関係を一切変更できない状況でした：

1	`arch -x86_64 bundle exec jekyll server --trace --config=_config.dev.yml --ssl-key local.xheldon.cn.key --ssl-cert local.xheldon.cn.pem`

このため、フレームワークを早急に変更しなければ、将来的にブログを全く公開できなくなる可能性があると気づきました。

技術選定

このセクションには特に述べるべきことはありません。基本的に、HexoはJekyllのJavaScript実装と考えることができます。多くの概念が95%同じであるため、移行に苦労することはありません。

さらに重要なことに、HexoにもHuxのブログテーマテンプレートを作成している人がいたため、私はそれをそのまま使用することにしました。この過程で簡単に手順を記録しておきます。

移行プロセス

プラグイン移行

これは比較的簡単でした。Jekyllのプラグインは、Hexoではヘルパー関数として実装しました。以下はNotionからのBookmarkタグを処理する関数です（パスは_plugins/add-attribute.rb）：

module Jekyll
    class RenderBookMarkBlock < Liquid::Block
        def initialize(tag_name, attr, tokens)
            super
            # 普通的链接没有 yid 和 bid
            attrs = attr.scan(/url\=\"(.*)\"\stitle\=\"(.*)\"\simg\=\"(.*)\"\syid\=\"(.*)\"\sbid\=\"(.*)\"/)
            if !attrs.empty?
                @url = attrs[0][0]
                @title = attrs[0][1]
                @img = attrs[0][2]
                @yid = attrs[0][3]
                @bid = attrs[0][4]
                @firstChar = @title.empty? ? "" : (@title)[0].upcase
                @error = ""
            else
                attrs = attr.scan(/url\=\"(.*)\"\stitle\=\"(.*)\"\simg\=\"(.*)\"/)
                @url = attrs[0][0]
                @title = attrs[0][1]
                @img = attrs[0][2]
                @firstChar = @title.empty? ? "" : (@title)[0].upcase
                @error = ""
            end
        end
        def render(context)
            @desc = super
            if !@yid.nil? && !@yid.empty?
                "<p class='embed-responsive embed-responsive-16by9'><iframe src='https://www.youtube.com/embed/#{@yid}?rel=0' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></p>"
            elsif !@bid.nil? && !@bid.empty?
                "<p class='embed-responsive embed-responsive-16by9' style='border-bottom: 1px solid #ddd;'><iframe src='//player.bilibili.com/player.html?bvid=#{@bid}&high_quality=1&as_wide=1' scrolling='no' border='0' frameborder='no' framespacing='0' allowfullscreen></iframe></p>"
            else
                "<p><a class='link-bookmark' href='#{@url}' target='_blank'><span data-bookmark-img='#{@img}' data-bookmark-title='#{@firstChar}'><img src='#{@img}'/></span><span><span>#{@title}</span><span>#{@desc}</span><span>#{@url}</span></span></a></p>"
            end
        end
    end
end

Liquid::Template.register_tag('render_bookmark', Jekyll::RenderBookMarkBlock)

一方、Hexoでは以下のように記述しました（パスはscripts/liquid.js）：

hexo.extend.tag.register('render_bookmark', function(args, content) {
    const [url, title, img, yid, bid] = args.map(getValue);
    const firstChar = title ? title[0].toUpperCase() : '';
    const strip_html = hexo.extend.helper.get('strip_html').bind(hexo);
    const trim = hexo.extend.helper.get('trim').bind(hexo);
    if (yid) {
        return `<p class='embed-responsive embed-responsive-16by9'><iframe src='https://www.youtube.com/embed/${yid}?rel=0' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></p>`
    } else if (bid) {
        return `<p class='embed-responsive embed-responsive-16by9' style='border-bottom: 1px solid #ddd;'><iframe src='//player.bilibili.com/player.html?bvid=${bid}&high_quality=1&as_wide=1' scrolling='no' border='0' frameborder='no' framespacing='0' allowfullscreen></iframe></p>`;
    }
    return `<p><a class='link-bookmark' href='${url}' target='_blank'><span data-bookmark-img='${img}' data-bookmark-title='${firstChar}'><img src='${img}'/></span><span><span> ${title}</span><span> ${strip_html(trim(content))}</span><span> ${url}</span></span></a></p>`;
}, {
    ends: true,
});

Permalink問題

理由はわかりませんが、Hexoで:category/:name.htmlを設定しているにもかかわらず、生成されるのはlife/2024-life-xxx.html（-ディレクトリ区切りを使用）で、本来期待されるのはlife/xxx.htmlでした。ソースコードnameを見ると、slugが使用されており、basenameですが、slugの生成ロジックはfolderパスに基づいてハイフンが追加されるため、手動でファイル名を修正するしかありませんでした。Jekyllでは、ファイル名の前の日付形式（例：2024-02-12-xxx.md）の2024-02-12は無視され、titleは単にxxxになりますが、Hexoではpost内のtitle front matterから読み取られるため、最終的にpermalinkアドレスを決定するfilterプラグインを作成する必要がありました：

/**
 * permalink 中的 name 不符合预期，对于 _posts/life/2015/xxx.md 来说，在文档中 :name 表示的是 xxx，但是实际是 life-2015-xxx
 */
hexo.extend.filter.register('post_permalink', function (data) {
  // 在这里修改 post.name 的值
  const arr = data.split('/').filter(Boolean);
  const categories = arr[0];
  const name = arr[1];
  return `${categories}/${name.split('-').filter(Boolean).slice(3).join('-')}`;
});

また、permalinkは純粋な数字ではなく、文字列でなければなりません：

そうしないとエラーが発生します（.endsWithを見ればなぜエラーになるかわかります）：

EJSテンプレート構文問題

ejsテンプレートをネストする際、Jekyllのliquid構文とは異なり、テンプレート内でfront-matterをカスタマイズできません。つまり、テンプレート間のパラメータ伝達は外側から内側のみで、内側から外側にはできません。例えば、indexのlayoutがpageで、front-matterも設定していますが、このfront-matterはpage.ejsテンプレートから読み取ることができないため、使用するすべての場所でパラメータを下に渡す必要がありました。

Markdown構文レンダリング問題

Hexoに組み込まれているmarkedのmarkdownレンダリングは、jekyllのkarmarkdownレンダリングと異なります。前者は、## h2（改行+空行）段落内の空行+段落を無視しますが、後者は無視しません。

大した問題ではありませんが、これによりホームページでコンテンツの要約にスペースが1つ足りず完全に一致しないことがあり、私は可能な限り完全に一致させたいと考えました。そうすることでSEOの評価が下がらず、検索エンジンがコンテンツに大きな変更があったと認識しないようにするためです。

そこで、markdown-itを使用して処理することにし、hexo-renderer-markdown-itをインストールしました。

Liquidソート問題

Jekyllのliquidのソートは以下のように使用していました：{{ tags | split:'`**`SEPARATOR`**`' | sort }}：

問題は、Liquidのソートでsort部分が同じ場合、後続のhref文字列でソートされるため、これを引き継ぐことになりました：

Mermaid構文問題

mermaidはhighlightでハイライトできず、hexoのconfigで除外する必要があります：

1 2	`exclude_languages: - mermaid`

MarkdownでEJS構文が使用できない問題

一時的に無視し、迂回策を取りました。

ページネーション生成問題

hexo-generator-index の pagination は page/2 page/3 を生成しますが、jekyll では page2, page3 という形式です。そのため、このプラグインのソースコードをコピーしてローカルで修正しました（scripts/pagination.jsに配置）：

'use strict';
const pagination = require('hexo-pagination');
hexo.config.index_generator = Object.assign(
  {
    per_page:
      typeof hexo.config.per_page === 'undefined' ? 10 : hexo.config.per_page,
    order_by: '-date',
  },
  hexo.config.index_generator
);
hexo.extend.generator.register('index', function (locals) {
  const config = this.config;
  const posts = locals.posts.sort(config.index_generator.order_by);
  posts.data.sort((a, b) => (b.sticky || 0) - (a.sticky || 0));
  const paginationDir = config.pagination_dir || 'page';
  const path = config.index_generator.path || '';
  return pagination(path, posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '%d/',
    data: {
      __index: true,
    },
  });
});

打ち消し線の実装問題

デフォルトの打ち消し線は s タグですが、jekyll では del タグを使用します。after_render:html で直接置換しました（scripts/tag-del.jsに配置）：

1
2
3

hexo.extend.filter.register('after_render:html', function (str) {
  return str.replace(/<s>/g, '<del>').replace(/<\/s>/g, '</del>');
});

ビルド後の余分なファイル問題

いくつかのファイルは不要なため、ビルド後に削除します：

具体的には：

categories/*
i_dont_wanna_use_default_archives/*
i_dont_wanna_use_default_tags/*
less/*

RSS 問題

Notion Bookmark からのレンダリングにカスタムタグスタイルを使用し、Notion の Bookmark と同じように見栄えを良くしようとしましたが、これにより Reeder などの RSS リーダーでスタイルが正しくレンダリングされなくなりました。そのため、Jekyll ではテンプレート構文の処理関数を使用してビルド時にカスタムスタイルを動的に置換するようにしました：

module Jekyll
    module BookmarkFilter
      def bookmark_filter(input)
        input.gsub(/^\<p\>\<a\s+class=\"link-bookmark\"\shref=(.*)\starget=\"_blank\"\>\<span\>(.*)\<\/span\>\<span\>\<span\>(.*)\<\/span\>\<span\>\n(.*)\n\<\/span\>\<span\>(.*)\<\/span\>\<\/span\>\<\/a\>\<\/p\>$/, '<p><a href=\1 target="_blank">\3</a></p>');
      end
    end
  end
  
  Liquid::Template.register_filter(Jekyll::BookmarkFilter)

Hexo ではビルド後にパッチを当てる方式で処理しています（scripts/rss-gene.jsに配置）：

const fs = require('fs');
const path = require('path');
const ejs = require('ejs');
const rootDate = new Date();

function getDate(_date) {
  const date = _date ? new Date(_date) : rootDate;
  // 获取各个部分
  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  const months = [
    'Jan',
    'Feb',
    'Mar',
    'Apr',
    'May',
    'Jun',
    'Jul',
    'Aug',
    'Sep',
    'Oct',
    'Nov',
    'Dec',
  ];
  const dayName = days[date.getDay()];
  const day = String(date.getDate()).padStart(2, '0');
  const month = months[date.getMonth()];
  const year = date.getFullYear();
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');

  // 获取时区偏移（以分钟为单位）
  const timezoneOffset = -date.getTimezoneOffset();
  const sign = timezoneOffset >= 0 ? '+' : '-';
  const offsetHours = String(
    Math.floor(Math.abs(timezoneOffset) / 60)
  ).padStart(2, '0');
  const offsetMinutes = String(Math.abs(timezoneOffset) % 60).padStart(2, '0');

  // 格式化为 RFC 2822 格式的字符串
  return `${dayName}, ${day} ${month} ${year} ${hours}:${minutes}:${seconds} ${sign}${offsetHours}${offsetMinutes}`;
}

hexo.extend.generator.register('xml', function (locals) {
  // 仿照 Liquid 内置的日期格式写法
  // 注意如果前面不加这个 \uFEFF 则不会被识别为 xml
  const template =
    '\uFEFF' +
    `<?xml version="1.0" encoding="UTF-8"?>
    <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>Xheldon Blog</title>
        <description>The Answer to Life, the Universe and Everything is...</description>
        <link>https://www.xheldon.com</link>
        <atom:link href="https://www.xheldon.com/feed.xml" rel="self" type="application/rss+xml" />
        <pubDate><%= getDate() %></pubDate>
        <lastBuildDate><%= getDate() %></lastBuildDate>
        <generator>Hexo v<%= version %></generator>
        <% for (post of posts.sort((a, b) => (new Date(b.date).getTime()) - (new Date(a.date).getTime())).slice(0, 10)) { %>
        <item>
            <title><%= post.title %></title>
            <description><%= bookmark_filter(post.content) %></description>
            <pubDate><%= getDate(post.date) %></pubDate>
            <link><%= post.permalink %></link>
            <guid isPermaLink="true"><%= post.permalink %></guid>
            <% for (tag of post.tags.data) { %>
                <category><%= tag.name %></category>
            <% } %>
            <% for (cat of post.categories.data) { %>
                <category><%- escape_html(cat.name) %></category>
            <% } %>
        </item>
        <% } %>
    </channel>
    </rss>`;

  const bookmark_filter = hexo.extend.helper.get('bookmark_filter').bind(hexo);
  const escape_html = hexo.extend.helper.get('escape_html').bind(hexo);

  const data = {
    posts: locals.posts.toArray(),
    getDate,
    version: hexo.version,
    escape_html,
    bookmark_filter,
  };

  const jsonContent = ejs.render(template, data);

  const outputPath = path.join('source/_posts', 'feed.xml');
  fs.writeFileSync(outputPath, jsonContent, { encoding: 'utf8' });

  return {
    path: 'feed.xml',
    data: jsonContent,
  };
});

Service-Worker 問題

service worker を削除しました。ビルドごとにページの tags 部分が必ず変更され、html ページが更新されるため、頻繁に手動でページをリフレッシュする必要があり煩わしかったからです。

その他の問題

必要なファイルが含まれていない場合があり、ビルド後に追加します（ads.txt など）。
layoutの値がpostタイプの記事で、page.pathの値が/で始まらない場合があるので注意が必要です。

あとがき

基本的には以上です。BeyondCompare で行ごとに比較することで、変更を最小限に抑えつつ移行できました。

サイバーパンク2024：私が現在使用しているツールたち

Thu, 12 Dec 2024 00:00:00 +0000

はじめに

2024年も終わりに近づき、WeChatのコンテンツブーストクーポンの有効期限が迫っているのを機に、今年私が日常の開発で頻繁に使用している様々な効率化ツールをまとめてみました。ソフトウェアとハードウェア両方を含み、参考までにご紹介します。

有料サブスクリプションソフトウェア

Crusor

AIプログラミングにおいて真っ先に挙げるべきはCursorです。

WindsurfやGithub Copilotとの比較では、新規コード生成能力はほぼ互角ですが、Cursorの既存コードの修正/リファクタリング能力は他のAIコード支援ツールを一歩凌駕しています。基本的にはTabキーを押すだけで、自動的にカーソル（Cursor）がリファクタリング/修正が必要な箇所に移動し、Tabで変更を受け入れ、次の修正ポイントにジャンプします。そのComposer/Agent機能もAIペアプログラミングの先駆者として、その実力は疑いようがありません。

Notion

私が使用する機能は無料版で十分であり、有料版は主にコラボレーション用途です。そのため来年はサブスクリプションを更新しない予定です。

私がノートアプリに求める最も重要な2点は「制限のないインポート/エクスポート」と「全プラットフォーム対応」です。Notionはこれを実現しており：

API機能をサポートしているため、サービス終了時のデータエクスポート問題がありません（独自フォーマットのEvernoteなど国内ノートアプリとは対照的です）；
APIを利用し、Notion-Flowブラウザ拡張と組み合わせることで、Githubベースの静的ブログをどこからでも執筆可能；
databaseモジュール機能を使えば、少しサーバーサイドコードを書くだけでネットワークデータベースとして活用可能（私のブログページで実践している通り）：

订阅&付费软件 - Xheldon Blog

滴答清单（TickTick）

以前はThingsを買い切りで使用していましたが、カレンダー連携に違和感があり、友人に勧められて滴答清单に移行しました。

カレンダー、タスク、リストビューが非常に便利で、タスク詳細はリッチテキスト対応しています。これが買い切りではなくサブスクリプション制を採用している理由でしょう。継続的なサーバーストレージコストが必要だからです。

1Password

パスワード管理ソフトの王者と呼ぶにふさわしいツールです。様々なシーンで手入力から解放され、APIトークン、クレジットカード情報、SSH情報、リカバリーコードのプレーンテキスト、WiFiアカウント情報など多様な形式の保存が可能です。

システムとの深い統合により、「パスワードを入力しない」を極限まで追求しています。iOSではシステムキーボード使用時のみ呼び出せるため、これが私がスマホでサードパーティ製IMEを使わない主な理由です。

セキュリティ面では、商用ソフトウェアをより信頼しています。

Youtube Premium

これを効率化ツールとしてカウントする理由は、主に新しいことを学ぶために使用しているからです。わからないことがあれば検索すれば、必ず関連コンテンツが見つかります。最近ではAI関連、少し前ならSwift関連など、はたまた性愛テクニックを解説するブロガーまで（もちろん個人メディアなので真偽は自己判断）。ただし低品質コンテンツもあるので、ネットサーフィンには注意が必要です。

Premium会員の「特典」として、YouTube Musicも無料で利用可能です。Apple Musicのプレイリストをインポート（サードパーティサービス経由）したり、自分で音楽ファイルをアップロードしたりできます。Apple Musicとの比較優位点：

YouTube Musicはアップロードした楽曲をオンライン楽曲で勝手に置き換えません；
最大10万曲までアップロード可能；
YouTube Premiumを解約後も、アップロードした音楽は引き続き利用可能で、音楽用クラウドストレージとして機能します。

消費ダウングレードの原則に従い、2024年末にApple Musicの契約が切れるタイミングで解約し、YouTube Premiumに乗り換えました。

買い切りソフトウェア

Popclip

右手だけで即座に検索＆翻訳＆各種操作が可能で、左手やキーボード不要です。

私の使用例：テキスト選択後OpenAI Translatorを起動し、そこでタスクを設定（後述）。

Alfred 5

バージョン4の買い切り版からアップグレードしました。主にアプリランチャーとして、およびOpenAITranslateと連携したAI質問用に使用。カスタムスクリプトを作成し、上記と同じ方法で呼び出します。

Bettermouse

私はロジックのゲーミングマウスを使用しており、ロジックにはG HUBソフトウェアがありますが、このソフトウェアには多くの問題があります：

タスクバーでは、黒いアイコンだけが目立ち、他の白いアイコンの中では異質に見える。

インタラクションロジックが奇妙。ソフトウェアを開きたい場合、タスクバーをクリックし、その後「G HUBを起動」をクリックする必要がある。一般的なソフトウェアのインタラクションは、クリックでメインウィンドウが開き、右クリックでインタラクションメニューが表示される。最低でも、ユーザーがインタラクションを決定できるオプションを提供してほしい。
操作が重い。起動に30秒かかり、時々起動できず、アニメーション画面でフリーズする。
テキスト説明が分かりにくい。マウスをオンボードにしたい場合、このオプションでは「有効にする」をクリックすべきか、現状のままで良いのか教えてほしい。

Bettermouseは、マウスの移動速度をカスタマイズできるだけでなく、スムーズスクロールや右クリックドラッグなどの高度なインタラクションも設定可能（例えばFigmaでページをスクロールするにはcmdを押しながら左クリックで移動する必要があるが、Bettermouseでは右クリックでページをドラッグできるなど）。

Magnet

何年も前に購入したウィンドウ管理ツールで、Apple IDと共に一台また一台のMacにインストールされてきた。ショートカットキーでウィンドウの画面占有率を調整できるのが「非～常～に～便利」。市場には同様の機能を持つソフトウェアが多数あるが、私にとってはこれで十分で、複数のバージョンアップを経て機能もさらに豊富になり、まったく置き換える気が起きない。

CleanshotX

メジャーバージョン買い切り

最強のスクリーンショット/録画ツールで、途中で有料アップグレードもした。最も気に入っている機能は：スクリーンショット後ワンクリックでクリップボードにコピー、スクリーンショット後ワンクリックで画面に固定（最もよく使う）。使用シーンは、何かを見ても覚えられない（年を取るにつれて脳のコンテキスト容量が低下しているため）場合に、何度も切り替える必要がなく、スクリーンショットを固定することでこの煩わしさを解消できる。

Surge/QuantumultX

メジャーバージョン買い切り

Clashカーネルが更新されなくなったためClashX「小猫咪」を放棄し、友人とMac Surgeの5人乗りをシェアした。スマホではQuantumultXを使用。

xPic（私貨混入）

これは私的な推薦、私が開発したものです、笑

仕事で画像の圧縮や変換が必要だが、オンラインツールでは期待通りにならないか、アップロード/ダウンロードが面倒か、プライバシー問題がある。そこでxPicというツールを開発した。画像と動画の圧縮、フォーマット変換、画像シーケンスフレームの合成、動画からGifへの変換をサポート。

また、仕事でSVGAを使用しているため、SVGAの簡単なプレビューもサポートしている。まだバグがあり、ベータテスト中。

無料/オープンソースソフトウェア

OpenAI Translator

翻訳ツール自体は特に推薦するものではないが、PopClipから呼び出せるのが特徴（原理はソフトウェアに登録されたUnixソケットにデータを送信し、コマンド：curl -d "$1" --unix-socket /tmp/openai-translator.sock http://openai-translatorで呼び出せる）。これによりPopClipやAlfredと連携してAIに素早く質問できる。

新しいタスクを追加した：

微信入力法

iPhoneでは微信入力法を使用せず、会社や自宅のMacでのみ使用している。共有辞書が優れている。以前は搜狗入力法を使用していたが、搜狗がTencentに買収された後、意図的に劣化させられユーザーを移行させようとしているのか、全く入力したことのない単語が頻繁に表示される。例えばzhuomianと入力すると、最初の候補が「卓面」で「桌面」ではない。

もう一つの問題は、キーボードで戦っている時に「屄」という字を入力したことがあるが、搜狗入力法が私の癖を発見したかのように、biの同音字を意図的に何度も入力して「頻度調整」でこの候補を後ろに移動させようとしても失敗する。一時的に2ページ目に移動させても、しばらくするとまた最初の候補に戻ってしまう（この期間にこの字を入力していないことを誓う）。

関連するもう一つの問題は、いつでも（調整直後でも）viと入力すると、入力法がbiと入力したいと判断する（キーボードでvとbが隣接しているため、この判断は自然）。この時、意図的に調整したbiの候補順序を無視し、「屄」を優先表示するため、画面共有時に非常に恥ずかしい思いをする。

iPhoneで使用しない理由は、1Passwordの自動入力/認証コード自動入力がネイティブキーボードのみで可能なため。

OrbStack

ネイティブのDocker/Linux/k8s管理ツールで、インターフェースが洗練されており、操作が簡単で、メモリ使用量が少ない。無料版でも十分で、Docker Desktopとは比べ物にならない。公式の比較はこちら：

OrbStack vs. Docker Desktop · OrbStack Docs

Immersive translate

AI翻訳プラグイン。ウェブ閲覧時にホットキーで全文翻訳可能なほか、マウスホバー箇所のみの翻訳も対応。独自APIの提供をサポート。YouTube字幕の翻訳も可能で、Googleの機械翻訳とは比べ物にならない精度。

（追記：Googleが大規模言語モデルを開発しているのに、なぜ自社ドキュメントをAI翻訳せず、未だに読みづらい機械翻訳を使い続けるのか？）

Warp

キラー機能：テキスト編集のようにbashコマンドを入力できる。

iTerm2やターミナルで直接コマンド入力する場合、vimショートカットなどが使えないなど制約が多い。この機能がなければWarpを使わないだろう。AIやコラボレーションなど、私には不要な機能が多すぎる。

Syntax Highlight

オープンソース

スペースキー押下でファイルプレビュー可能。豊富なフォーマット対応で、と～っても便利～

MonitorControl

オープンソース

その名の通り、ディスプレイ輝度調整ソフト。ホットキー対応で非常に便利。

クラックソフト

TablePlus

サーバーDB接続用に稀に使用（私はプロの運用/サーバーサイドエンジニアではないため）。UIが美しく操作も簡単。

ハードウェア

G309マウス

四文字で表現：大満足。

クリック感が爽快、Bluetooth/無線デュアルモード（Bluetoothはおまけ程度）、無線接続でもピンポイントの反応（ポーリングレート）、やや盛り上がった背面、垂直な側面、付属の滑り止めシート。全てが完璧。

注：以前使用したG403とG502有線版は非対称マウス（右ボタンが低い位置）だった。対称型のG309では左右ボタンが同位置のため、中指が右クリック時に誤操作しやすく、少し浮かせる必要があったが慣れた。

Apple Watchバンド

某タオバオ店舗で購入。正規品と称し開封後返品不可。正規価格の1/3～1/2で、実際に正規品と違いなし。店舗にはノーブランド包装の正規品/99新/95新品もあり、レビューから工場流出品/瑕疵品/公式返品品と確認。中古売却を考慮し正規包装品を購入したが、99新品のノーブランド品も多数あり。

AirPods 4 ノイズキャンセリング版

AirPods Pro 2を売却。着け心地が悪く、2年近く使用したため新調。4代ノイズキャンセリング版を購入。Pro 2代比べノイズキャンセリング効果に差はあるが許容範囲。意外にもイヤーピースの上下スライドで音量調節が不可な点以外は満足。

小米 IH炊飯器 S1

8年使用した美的炊飯器（故障はなし）を更新。使用感は良好だが、粥（おかゆ）炊飯に1時間半かかる点に驚愕。

メリダ・エクスプローラーXフラットバーロードバイク

電子機器ではないが、プログラマー生活の一部として記載。通勤用で毎日往復20分。非常に便利～

あとがき

皆さんの愛用ツールをぜひ教えてください～

TP-LinkでDHCPを無効にした後にダイヤルアップ接続する方法

Mon, 04 Nov 2024 00:00:00 +0000

ネットワークはすでに設定済みなので、一部のページでは画像の代わりにテキストを使用します。ブログを書くために再度ネットワークをリセットするのは面倒ですから。

はじめに

私が購入したTP-Link XDR-5480には奇妙な仕様があります：ルーターのDHCPサービスを無効にすると、すべてのポート（SPF変換ポートを含む）がLanポートに変わってしまい、光モデムのブリッジ接続+ルーターPPPoE接続ができなくなります。さらに、LanポートのIPアドレスは指定できず、すべてフロントエンドルーター（つまり光モデム）から取得されます。

この問題は旧型のTP-Linkルーターでは発生せず、WANポートに影響を与えずに自由に無効化できました。おそらく新型TP-Linkのプロダクトマネージャーは、これではWANポートが無駄になると考え、新型ルーターはすべてWAN/Lanポート混在型であるため、この問題が顕在化したのでしょう。

数日前にMac miniのM4モデルが発表され、サイズがさらに小さく、消費電力も低くなったため、ネット上では再び「Mac miniをソフトウェアルーターとして利用し、Mac Surgeで家庭ネットワークを管理する」という風潮が広がっています。現在の私のネットワーク構成は非常に安定しており、1年以上新しいことを試していなかったので興味が湧きました。さらに、私のMac Studioも常時電源を切らないので、miniと同じようにソフトウェアルーターとして使えるのではないかと考えました。また、ネットユーザーたちが推奨するSurge（以下、Mac Surgeを指す）がDHCPサービスを管理することで、家中のデバイスが意識せずに魔法のようにインターネットに接続でき、各デバイスの接続状況を「エレガント」にリアルタイムで確認できるという点も魅力的でした。「エレガントは時代遅れにならない」という考えのもと、私はこのTP-Linkの問題を解決する方法を模索し始めました。

ネットで検索した結果、例えば：

tp link 的路由器如何能在关闭 dhcp 服务的同时让 wan 口能够拨号上网？ - V2EX

また：

请教各位大佬关于华硕和tplink路由器关闭dhcp设置的问题 - 电脑讨论(新) - Chiphell - 分享与交流用户体验

現状

注意：操作前にTP-Link（以下、私のXDR-5480モデルを指す）の設定画面でルーター設定をバックアップしてください。操作ミスでルーターにアクセスできなくなった場合にリセットすると、ルーター設定が失われます。以下のように設定をエクスポートすればOKです。なお、エクスポートした設定にはポート設定とネットワーク設定は含まれません。この製品設計は、ネットワーク設定を間違えてリセットした後でも、設定をインポートすると間違った設定のままネットワークにアクセスできない状況を防ぐもので、TP-Linkのプロダクトマネージャーに拍手を送りたいです。

ネットワークトポロジー図：

目標

現在のすべてのデバイスの接続方法やネットワークセグメントを変更せず（怒られるのが怖いので）、Mac StudioのSurgeをゲートウェイとしてDHCPサービスを管理させる。

難点

TP-Linkが自身のDHCPサービスを無効にすると、すべてのポート（SPFポートを含む）がLanポートになり、ポートアドレスをカスタマイズできなくなるという警告が表示されます。
TP-Linkが自身のDHCPサービスを無効にすると、現在すべてのLanポートのIPアドレスはフロントエンドルーター（つまり光モデム）から取得されるという警告が表示されます。これは純粋なAPとしての動作なので当然ですが、Surgeが光モデム上に存在するDHCPサービスを検知してしまう原因になります。
Mac Surgeをゲートウェイとして使用する場合、自身でDHCPサービスを開始し、ネットワーク上に他のDHCPサービスが存在しないことを要求します。そうでない場合、競合が発生して接続が切断される可能性があります。
第2点と第3点から、光モデムのDHCPとルーターのDHCPサービスの両方を無効にする必要があります。しかし！この操作を行う前に光モデム/ルーターでIPとMACアドレスのバインド設定をしていないと、WiFiで両者に接続できなくなり、ルーターと光モデムをリセットするしかなくなります！（どうして知っているかは聞かないでください）したがって、光モデムのDHCPサービスを無効にすることはできません。

解決方法

上記の目標と難点を踏まえて、「皆さん、メモを取ってください。私は以下のように配置を調整します」：

ステップ1：光モデムの電源を切る

実際には光モデムとTP-Linkの接続を切断するだけで十分です。ここで電源を切るように指示しているのは、誤って光モデムのWiFiに接続してしまうのを防ぐためです。光モデムのWiFiを忘れるように設定している場合は、電源を切らずにTP-Linkとの接続を切断するだけでOKです。

最初に光モデムの設定を行わず、そのDHCPサービスがSurgeに検出されてSurgeがDHCPサービスを開始できないようにします。また、すでに光モデムとTP-Linkの接続を切断しているため、次のステップでTP-LinkのDHCPサービスを無効にした場合、TP-Linkは自ら上位ルーターのDHCPサービスを検出してLanポートのIPを変更することはありません。

ステップ2：ルーターのDHCPサービスを無効化

設定画面で無効にするだけで、ここでは「オフ」を選択します。設定が成功した後、改めて「自動」に変更します。自動に変更するのはネットワークの堅牢性のためで、後ほど説明します。

ステップ3：Surge DHCPを有効化

この手順はSurgeの「概要」と「デバイス」タブのどちらからもアクセスできます：

SurgeがMacのIPアドレスを手動設定かつ固定に変更することを通知してきます。ここでは192.168.5.100となります。具体的なチュートリアルはネット上に多数ありますので、ここでは詳細は省きます。

注意点として、ルーターのアドレスが192.168.5.1と表示され、アドレスプールが192.168.5.100から192.168.5.200までとなっています。私はアドレスプールを192.168.5.2から192.168.5.254に変更し、範囲を広げました。

ステップ4：新しいルーターアドレスを確認

Surgeの設定後、ルーターの192.168.5.1にアクセスすると接続できない状態になります！慌てる必要はありません。この時点でMac StudioがDHCPサービスを提供しており、TP-Linkルーターに新しいIPアドレスを割り当てるからです（なぜこうなるのかは不明です）。「デバイス」をクリックし、「Hostname Unsuitable for Printing」という名前のデバイス（必ずしもこの名前とは限りません）を見つけ、アドレスバーからアクセスするとお馴染みのルーター画面が表示されます。ここでの新しいルーターIPアドレスは192.168.5.114でした。

ステップ5：ルーターのLanポート設定とPPPoE接続

この時点ではインターネットに接続できません。光モデムの電源が入っていないからです！このステップで光モデムの電源を入れ、数分待った後、ルーターの設定画面でWan 口已经断开连接をクリックしても反応がない状態になります。

しかし諦めないでください！現在のStudioの役割は、ソフトウェアルーターを設定する場合と似ていることに気付くでしょう。以前は光モデムがPPPoE接続を担当し、ソフトウェアルーターがメインルーターや光モデムに接続されてDHCPサービスを提供していました。現在は、PPPoE接続デバイスをルーターに移行し、Studioがメインルーターに接続されているため、StudioがソフトウェアルーターとしてDHCPサービスを提供する形になります。

重要なのはこのステップ：TP-LinkのLanポートIPアドレスを手動で192.168.5.1に設定することです（そうしないとネットワーク上に192.168.5.1というIPアドレスを持つデバイスが存在しなくなります）。

LanポートIPを手動設定後（Lanポートと呼びますが、光モデムに接続されておりPPPoE接続が可能です！）、インターネット設定に戻り「接続」をクリックします。初回の接続には時間がかかるため、4、5回クリックする必要があるかもしれませんが、最終的には成功します。

ステップ6：最終設定

これで設定は完了です。接続済みのデバイスを右クリックし、「Surgeをゲートウェイとして設定」を選択後、デバイスをネットワークに再接続してください：

さらに「新しいデバイスには自動的にSurgeをデフォルトゲートウェイとして設定」も有効にしておきます：

これで全てのデバイスがSurgeをゲートウェイとして使用し、リアルタイムのトラフィックを監視できるようになります。

ステップ2でTP-LinkのDHCPサービスを無効にした件を覚えていますか？この時点でTP-Linkに戻り、DHCPサービスを「自動」に変更できます。これは万が一**SurgeのDHCPサービスがクラッシュしたり、Macが故障した場合でも、あなたと家族のデバイスがネットワークにアクセスできるようにするためです。そうすれば、あなたは叱られずに済みます！**TP-Linkのこの設定は「自動」でLAN内のDHCPサービスを検出し、存在しない場合は自身のDHCPを有効に、存在する場合は無効にします：

注：「オフ」を選択して保存すると、ルーターのアドレスが再び192.168.5.114に変更されます。また、設定変更ができなくなります（光モデムに接続した状態でDHCPを無効にすると、前述の問題1と2が発生するため）、その場合は最初から（光モデムの電源を切って）手順をやり直す必要があります。

まとめ

これで全て完了です。この過程でいくつかの奇妙な問題に遭遇し、失敗した試みもありました。例えば、なぜ光モデムの電源を切ってルーターを設定した後で再び電源を入れる方法を思いついたのか、想像できるでしょうか？

皆さんがWiFi自由を手に入れられますように！

Notion Flow モジュールを使用して変換する方法

Sun, 31 Mar 2024 00:00:00 +0000

一週間前に、私はNotion Flowブラウザ拡張機能を構築しました：

Xheldon on Twitter / X

そして先日更新された0.4.1バージョンでは：

0.4.1 | Notion Flow

AWS S3 API互換の自社OSSサービス（Cloudflare R2など）をサポートしました：

Cloudflare R2 | 零出口费用分布式对象存储 | Cloudflare | Cloudflare

本記事では、このブラウザ拡張機能をGithub Jekyllブログでどのように使用しているか簡単に紹介します。

Jekyll静的ブログはRubyで構築されており、プラグインをサポートしています。そのため、私はLiquidテンプレート言語を処理するためにいくつかのプラグインを自作しました（Jekyllブログのプラグインは_pluginsディレクトリに配置され、rubyファイルを記述後、このディレクトリに配置してサービスを再起動するだけで機能します）。コンテンツはNotion Flowで変換されたNotionの内容から取得しています。例えば、ブックマークを処理するプラグインの内容は以下の通りです：

module Jekyll
    class RenderBookMarkBlock < Liquid::Block
        def initialize(tag_name, attr, tokens)
            super
            # 普通的链接没有 yid 和 bid
            attrs = attr.scan(/url\=\"(.*)\"\stitle\=\"(.*)\"\simg\=\"(.*)\"\syid\=\"(.*)\"\sbid\=\"(.*)\"/)
            if !attrs.empty?
              # 外部的 video 链接，youtube、bilibili（如本文上一篇博客就是）
                @url = attrs[0][0]
                @title = attrs[0][1]
                @img = attrs[0][2]
                @yid = attrs[0][3]
                @bid = attrs[0][4]
                @firstChar = (@title)[0].upcase
                @error = ""
            else
             # 正常和 notion 一样的 bookmark（如本文上面三个链接就是）
                attrs = attr.scan(/url\=\"(.*)\"\stitle\=\"(.*)\"\simg\=\"(.*)\"/)
                @url = attrs[0][0]
                @title = attrs[0][1]
                @img = attrs[0][2]
                @firstChar = (@title)[0].upcase
                @error = ""
            end
        end
        def render(context)
            @desc = super
            if !@yid.nil? && !@yid.empty?
                "<p class='embed-responsive embed-responsive-16by9'><iframe src='https://www.youtube.com/embed/#{@yid}?rel=0' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></p>"
            elsif !@bid.nil? && !@bid.empty?
                "<p class='embed-responsive embed-responsive-16by9' style='border-bottom: 1px solid #ddd;'><iframe src='//player.bilibili.com/player.html?bvid=#{@bid}&high_quality=1&as_wide=1' scrolling='no' border='0' frameborder='no' framespacing='0' allowfullscreen></iframe></p>"
            else
                "<p><a class='link-bookmark' href='#{@url}' target='_blank'><span data-bookmark-img='#{@img}' data-bookmark-title='#{@firstChar}'><img src='#{@img}'/></span><span><span>#{@title}</span><span>#{@desc}</span><span>#{@url}</span></span></a></p>"
            end
        end
    end
end

# 上传的 video
module Jekyll
    class RenderVideoBlock < Liquid::Block
        def initialize(tag_name, attr, tokens)
            super
            attrs = attr.scan(/caption\=\"(.*)\"\simg\=\"(.*)\"\ssuffix\=\"(.*)\"/)
            @caption = attrs[0][0]
            @img = attrs[0][1]
            @suffix = attrs[0][2]
        end
        def render(context)
            text = super
            "<p caption='#{@caption}'><video controls muted><source src='#{@img}' type='video/#{@suffix}' /></video></p>"
        end
    end
end

Liquid::Template.register_tag('render_bookmark', Jekyll::RenderBookMarkBlock)
Liquid::Template.register_tag('render_video', Jekyll::RenderVideoBlock)

このロジックでは、NotionのブックマークモジュールのリンクがYoutubeやBilibiliの場合、埋め込み動画のHTML（iframe）に変換し、それ以外の場合はNotionブックマークに似たHTMLに変換します（CSSとの連携が必要です）。

そのため、Notion Flowを使用してNotionコンテンツをMarkdown形式に変換する際に、ブックマークなどのモジュール変換ルールをカスタマイズし、ブログでYoutube、Bilibili、およびNotionと同じブックマークスタイルのコンテンツを表示できるようにしています。以下のようになります：

video: function video(block) {
  if (block.type === 'file') {
    // 用户自己上传的 video 文件，用默认 video 插件处理
    return `{% render_video caption="${block.caption}" img="${block.url}" suffix="${block.suffix}" %}\n![${block.caption}](${block.url})\n{% endrender_video %}\n`;
  } else if (block.type === 'external') {
    // 外部链接、youtube 和 bilibili 视频链接，用 bookmark 处理
    return `{% render_bookmark url="${block.url}" title="${
      block.caption || ''
    }" img="" yid="${block.yid}" bid="${
      block.bid
    }" %}{% endrender_bookmark %}\n`;
  }
}

ここで注意が必要な点（私はrubyに詳しくありません）は、Liquidテンプレートのタグ間にテキストコンテンツが必須であること（空でも構いません）です。そうでない場合、rubyプラグインはHTMLを生成できません。つまり：

1	`{% render_video %}这里必须有任意内容！{% endrender_video %}`

このように、Rubyプラグインでは、super変数に「ここには任意の内容が必要です！」という文が取得されます（この変数を使用しないことも可能です）。この内容がない場合、プラグインは何も返しません。

【動画】Notion Flowでブログ公開フローをシンプルに

Thu, 21 Mar 2024 00:00:00 +0000

この記事では、Notion Flowを使用してブログ公開プロセスを簡素化する方法を紹介する動画を共有します。詳細は公式サイトをご覧ください:

Notion Flow | Notion Flow

YouTube：

Bilibili：

VSCodeをより使いやすくする設定——フロントエンド開発の視点から

Thu, 21 Dec 2023 00:00:00 +0000

☝🏻後ほど動画で説明する予定です。設定の効果は実際に動きを見せないと違いが分かりにくいためで、ブログにGIFを作るのが面倒だからです。

はじめに

フロントエンドの勉強を始めた頃、VSCodeはまだなく、WebStormを使っていました（当時学生で、違法コピーを使っていました）。すぐに使える体験は素晴らしかったです。しかし、オフィスPCのスペック低下、4Kやマルチディスプレイでのカクつき問題が長年解決されないこと、同僚の影響もあり、最終的に「設定の同期」機能が決め手となりVSCodeに移行しました。

独立したホバー検索ボックスがないという重大な違和感に慣れた後、すぐに自分にとって使いやすい設定を見つけました。以下で詳しく説明します。もしもっと良い設定があると思われる方は、コメント欄に理由と効果のスクリーンショットを添えて教えてください。

📖デフォルト設定は基本的に説明しません（特に便利な場合を除く）。デフォルトから変更した部分に焦点を当てます。VSCodeでは「右側のミニマップに現在行を表示するか」など、ほとんどの設定が変更可能で素晴らしいです。

見た目

テーマ/フォント

テーマはOne Dark Proを使用：

marketplace.visualstudio.com

フォントはFira Code：

GitHub - tonsky/FiraCode: Free monospaced font with programming ligatures

Fira Codeは公式推奨フォントで、社内でも使用されています。

Fira Codeは特定の記号の変種サポートが優れており、===や<=などが美しく表示されます（一部は手動で文字セットと変種を有効にする必要があります）：

Fira Codeのデフォルトの&記号が苦手な人も多いですが、設定で変種を無効にできます。詳細はGitHubの説明を参照してください。私の設定は：

{
  "workbench.colorTheme": "One Dark Pro",
  "editor.fontFamily": "'Fira Code', Monaco, 'Courier New', monospace",
  "editor.fontLigatures": "'ss01', 'ss02' off, 'ss03', 'ss04', 'ss05', 'ss07', 'cv29', 'cv28', 'cv13'"
}

また、行間は1.4、フォントサイズは13です。

エディタ

最も重要なのがエディタ設定です。良いエディタはコーディング効率を上げるためにあります。以下で個別に説明します。

空白文字の表示

私はデフォルトのselection設定を使用しています。つまり、選択範囲内に空白文字（スペース）がある場合のみ表示され、それ以外は表示されません。常に表示するboundary設定は見た目が悪いです：

自動で括弧を追加/削除

これらの設定は、開始括弧（({[など）を入力すると自動的に終了括弧（)}]）が生成される機能です。削除時も同様にペアで削除されます。デフォルトでは挿入時にペア生成、削除時もペア削除です。

括弧の色付け（プール）

最初の設定を有効にすると、各括弧に色が付きます（白一色ではなく）。二つ目の設定を有効にすると、括弧の種類ごとに独立した色設定が適用されます（実際には異なる括弧でも色が重複しますが、表示順ではなく括弧種類ごとの順序で色付けされます——私の理解とテストによる）。

矩形選択

デフォルトでは上から下に選択すると、行頭や行末を通過すると行全体が選択されます：

この設定を有効にすると、マウス選択が矩形選択になります（コード位置ではなくマウス位置に基づく選択）。JSONのキーなど、複数行の類似したインデントを同時編集する際に便利です：

補足：ターミナルで選択中にOptキーを押すと同様の効果が得られます。

コピー時にシンタックスハイライトを保持

リッチテキストエディタによっては特別な処理がなく、VSCodeから直接コードをコピーすると色情報も一緒にコピーされてしまいます。これは通常望ましくありません。この設定で色なしでコピーできます。

ドラッグ操作

私は長年コーディングしてきましたが、「ドラッグ」でコードブロックを移動する操作はほとんど使わないので、無効化を推奨します。二つ目の設定は、shiftを押しながらファイルをVSCodeにドラッグすると、メディアファイルの場合ファイル名のみ表示され、shiftなしでドラッグするとメディアファイルが開きます。予期せぬ用途に備えて便利です（デフォルトで有効）。

空選択時の現在行コピー

選択範囲がなくカーソルだけの状態でコピー操作をすると、現在行全体が選択されます。現在行のコピーが簡単になります（デフォルトで有効）。

自動折りたたみ

コード折りたたみは確実に必要です。折りたたみ範囲のハイライトも必要です（マウスが行を通過する効果や現在行のハイライトと同様）。そうしないと、現在の行が折りたたまれているかどうか分かりません。最後に、import部分の自動折りたたみは不要だと思います。

折りたたみに関しては、私は常に表示される設定を好みます。この機能は非常に頻繁に使用するため、毎回ホバーして折りたたまれている行を確認し、クリックして展開するのは効率が悪いからです。一目でどこが折りたたまれているか分かるようにしたいので、alwaysに設定する必要があります：

括弧/インデントガイド

以下の図のようになりますが、「インデントガイド」が何かテストできなかったので、とりあえず有効にします。

ホバー時のポップアップ表示位置

通常、コードは上から下に読んでいくため、この設定ではコードをホバーした際にポップアップが上に表示され、内容が遮られます。ポップアップを消して再表示させるためにマウスを動かす必要があり、お勧めしません。

ホバー時のヒント表示

マウスを外した時は表示したくないので、直接0に設定します。

マウスでのフォントサイズ変更

誤操作が多いので無効にします。

エディター領域上部のパディング

私は2に設定しています。下部のパディングは不要です。

スクロールバー

水平スクロールバーは幅6、垂直は25（デフォルトは水平12、垂直14）：

私はスクロール範囲外に移動する機能が好きではなく、1画面で完全に表示できる内容でもスクロールバーが表示されてしまうため、最後の「Scroll Beyond Last Line」は無効にしています。

垂直スクロールバーを20に大きくした理由は、その領域にはスクロールバーだけでなく3つの情報が含まれているからです：

スクロールバー右側の明るい黄色はエディターの警告情報です。
スクロールバー中央の暗い黄色ブロックは検索にマッチした項目（グローバル検索と現在のエディター検索を含む）です。暗い黄色ブロックは灰色（カーソルで選択された部分や類似内容）や薄いピンク（カーソルで選択された内容の宣言部分）の場合もあります。
スクロールバー全体にわたる青い線はカーソルがある行です。
スクロールバー左側の緑色部分はコードが変更された部分です。Gitを有効にしている場合、薄い黄色（変更部分）になることもあります。

このように情報表示が豊富なため、幅を広くしています。

スムーズスクロール

強く推奨します。これにより、スクロール時にどのくらい行が移動したか分かり、突然ジャンプして「どこにスクロールしたか分からない」ということがなくなります。

スクロール固定

スクロール時に現在の画面外のスコープを確認する必要がある場合、このオプションを有効にします。また、水平スクロール時にsticky関数がスクロールされてしまうため、私はスクロールさせない設定を好みます。最後のオプションは無効にします。

カーソル

1つ目はカーソルの点滅効果、2つ目は異なる位置をクリックした際にカーソルが前の位置からアニメーションで移動する効果です。これにより、今回のクリック位置が前の編集位置からどこにあるか分かり、情報が豊富になります。

検索

これは無効にすることをお勧めします。検索時に無効にしていないと、ファイル上部に余分なスペースが生じ、検索ボックスを閉じるとエディターが跳ねるように動いてしまいます。

ただし、このオプションを有効にするとエディター内容が遮られる可能性があるため、各自で判断してください（通常、上部はimport後の改行内容なので、遮られても問題ありません）。

検索ウィジェットへの自動入力

これは無効にすることをお勧めします。検索後に特定の内容を選択し、さらに別の内容を検索しようとすると、エディターが自動的に選択内容を検索ボックスに入力してしまい、前回の検索内容が消えてしまうからです。

サムネイル

エディター右側のサムネイルは常に表示しています。現在の編集位置や特定の関数・コンポーネントに対する相対位置を把握するために使用するため、サムネイルはスクロールせず、色ブロックのみをレンダリングする設定にしています。

提案

このスイッチはデフォルトのまま無効にすることをお勧めします。Copilotの提案と混同する可能性があるためです。以下はCopilotの提案です：

そしてこれはプレビューの提案です：

このオプションのデフォルトは「first」、つまり常に最初の提案を選択する設定ですが、私が頻繁に直面する問題は、CSSでwidと入力した場合、当然widthを期待しているのに、widowという提案が最初に表示されることです。この属性は使わないのですが、毎回最初に表示されるため、矢印キーで切り替える必要があります。そこで、ここは「最近使用したもの」に変更することを提案します。これは入力メソッドの「動的頻度調整」に似た機能です:

ワークベンチ

コマンドパレット

同じコマンドを繰り返し入力することが多いため、コマンド履歴リストを開くのは便利です。また、入力内容を保持する機能も有用です。例えば「Toggle Screen Capture Mode」のような「toggle」で始まるコマンドの場合です。

注意点として、入力後にescキーを押して入力ボックスを閉じた場合、次回呼び出した時に入力内容は保持されません。コマンドを選択して実行した後、再度呼び出すと前回の入力内容が保持されます。

エクスプローラーツリー

アニメーションは通常有効にしています。「優雅さは永遠に色褪せない」からです。この設定は「設定」画面のスクロールにも影響します（以前はエディター設定のスムーススクロールが「設定」画面やエクスプローラーツリーのスクロールに影響しませんでした）。

クイックオープン履歴

cmd + pを押すとクイックオープン入力ボックスが表示されます。履歴を記憶するのは良い機能です。また、フォーカスが外れた時に自動的に消えるかどうかのオプションもあります。ほとんどの場面では自動的に消える方が良いですが、稀に必要ない場合もあるため、デフォルトの自動消去を維持しています。

ワークベンチのアニメーション効果軽減

64GBメモリのM1 Maxではアニメーションを減らす必要はありません（デフォルトはautoで、システム構成に応じて自動調整されます。複数のコンピューター間で設定を同期する問題に対応しています）。

フォントスムージング

CSSの-webkit-font-smoothing: antialiased;に似ています。defaultはほとんどの非Retinaディスプレイで最もシャープなフォント表示（サブピクセルレベル）を行い、antialiasedはピクセルレベルのスムージングで、フォントが細くなる可能性があります。図を参照:

この設定は「ワークベンチ」ブロックにありますが、エディター領域にも影響します。antialiasedを有効にすると、エディター領域とワークベンチ領域の両方でフォントがより暗く（コントラストが弱く）、細くなることがわかります。私は後者が好きなので有効にしています。

注意点として、「サブピクセルレベル」とはピクセルよりも小さいレベルという意味ではなく、「ピクセルに至らない」レベル、つまりより低いレベルを指し、より高いレベルではありません。

エクスプローラーツリーのsticky

非常に便利で、スクロール時に現在のスクロールパスを確認できます。唯一の欠点はbox-shadowを追加できればより区別しやすくなることです:

stickyの最大レベルも変更可能で、デフォルトは7で十分です（エディターのstickyデフォルトは5レベル）。

注意点として、この設定は「設定」画面にも適用されます（設定画面はエディターではなくワークベンチに属していることがわかりました）:

エクスプローラーツリーのインデントは14に変更しました。ガイドラインは常に表示するようにしています。同レベルのファイルが多すぎると見つけにくいためです:

アウトラインナビゲーション

アウトラインナビゲーションは必要ですが、ファイル/フォルダアイコンは不要です。これにより、ファイル内の配列やクラスと明確に区別でき、非常に便利です:

変更されたタブ

これに関連する設定が複数あります。例えば、変更後保存されていないファイルのタブ上部にハイライト線を表示する設定:

デフォルトでは点が表示されますが、このオプションを有効にすると点と線の両方が表示されます。エディターを再起動すると青い線のみが表示されます（バグかもしれません。再起動しなくても有効になるべきです）。

効果:

「点」もタブのスペースの一部を占有するため、より多くのタブ内容情報を表示できなくなります。そのため、このオプションを有効にすることをお勧めします。

マウスナビゲーション

これはデフォルトオプションですが、説明しておきます。左側にボタン（右手用の4、5ボタン）があるマウスでは、直接ナビゲーションに使用でき、非常に便利です。

タブの固定

固定されたタブはデフォルトでエディターグループの左側に表示されますが、別の行に分けて表示すると、固定されていないタブとの区別がより直感的になります。効果は以下の通り:

注意点として、デフォルトでは固定されたタブはマウス中ボタンやcmd + wで閉じることができません（押すと固定されていないタブが開かれます）。この動作は変更可能です:

タブ閉じるボタン

左手で cmd + w を使ってタブを閉じることに慣れているため、このオプションは無効にできます。また、実はタブをダブルクリックして閉じる方がより慣れていますが、公式の返答では実装しないとのことです。以下を参照：

Allow to double click on a tab to close it · Issue #52628 · microsoft/vscode

タブの折り返し

多くのタブを開いている場合、タブをスクロールするのが面倒で全体像を把握しづらくなるため、私はタブの折り返しを好みます。効果は以下の通り：

少し困る点は、折り返しによって複数行になったタブが、前述の「タブ上部の青色ハイライト」と混同される可能性があることです（青い線が上のタブのものか下のタブのものか、一瞬考えてしまうため直感的ではありません）。タブにより多くの内容を表示するか、直感的に分かりやすくするかは、各自で選択してください：

タブの高さ

コンパクトなレイアウトは全体像の把握とスペースの節約に役立ちます。

タブをダブルクリックで閉じる（？）

このオプションは文字通り、公式が実装しないと表明した「タブをダブルクリックで閉じる」機能（前述の通り）のようです。しかし、競合する可能性のある「タブをダブルクリックしてエディターグループを自動拡張」を無効にしても、この設定は機能しません。私の理解が間違っているのか、それともバグなのかは不明です。

ネイティブタブ

これに関連する設定は2つあります：

最初の設定を有効にすると、複数のプロジェクトウィンドウを1つのウィンドウに統合できます。「ウィンドウ」オプションに「すべてのウィンドウを統合」が表示され、1つのウィンドウで複数のプロジェクトを切り替えることができ、非常に便利です：

ただし、この場合、カスタムタイトルは使用できません（個人的にはあまり有用ではないと思います）。カスタムタイトルは以下のようになります：

最初の設定を有効にすると、2番目の設定は無効になり、native や custom に設定しても効果がありません。最初の設定を無効にし、2番目の設定を native にすると、「すべてのウィンドウを統合」も「カスタムタイトルバー」も使用できなくなります（この設定の意義がわかりません）。

ツリービューのドラッグ＆ドロップ

誤って操作してしまうことが多く、数百の変更が発生する可能性があるため、無効にしています。

検索結果の自動折りたたみ

デフォルトでは常に展開されますが、検索結果が多すぎる場合（通常は入力が完了していないため）、展開する必要がなく、全体像の把握を妨げます。

また、検索バーに「除外ファイル」を追加していない場合、NextJSプロジェクトの.nextディレクトリなど、膨大な検索結果が表示される可能性があるため、この設定も必要です。

注意点として、この「展開」「折りたたみ」の10ファイル制限は、検索結果全体のフォルダ数ではなく、特定のフォルダ内に表示されるファイル数です：

したがって、特定のフォルダ内に検索結果に一致するファイルが多すぎる場合（フォルダが折りたたまれる）、通常はさらに検索情報を提供する必要があるかどうかを確認する必要があります。

検索ボックスへの自動入力

通常、選択した内容を検索したい場合があるため、「Seed On Focus」オプションを使用すると、cmd + v の操作を省略できます。

ただし、「検索ウィジェット」で選択後にフォーカスを移動した際に自動的に選択内容を入力する機能とは異なります。エディターで内容を選択し、検索ウィジェットにフォーカスを移動する場合、必ずしも検索のためではなく、現在のエディターで選択した同じ内容をハイライトして表示するためだけの場合もあります。しかし、この場合、選択後にフォーカスを移動すると自動的に選択内容が置き換えられ、多くの場合期待通りではありません。

一方、内容を選択した後に検索ビュー（右側）にフォーカスを移動する場合は、ほぼ確実に検索のためです。

また、検索結果については、そのドキュメント内での位置を特定するために行番号を知りたいため、行番号を表示することも重要です。

最後に、Smart Caseは小技です。すべて小文字で入力した場合は、検索名をあまり覚えていないことを意味し、検索内容（キャメルケースの関数名など）の特定の文字が大文字であることを確信している場合は、大文字と小文字を区別して検索します。非常に便利です。

さらに、前回入力した内容を記憶していて、それが選択状態であれば、自分の入力予想と一致しない場合でも、直接入力すれば問題ありません。以前の検索内容がまだ役立つのであれば、それはさらに良いでしょう。↓

検索でグローバルなignoreを無視

Gitにはグローバルなデフォルトのignore設定があり、このオプションを有効にすると検索時にリストされたファイルやフォルダを無視できます。通常は有効にしておくのが良いでしょう。

また、親ディレクトリでignoreを有効にするオプションもあります。意味がよく分かりませんが、多階層のGit管理のためかもしれません。とにかく無視するのであれば、ということで私もチェックを入れました：

デバッグとテスト

私の技術レベルが限られているため、VSCodeのデバッグとテスト機能はほとんど使っていません。NextJSのようなNodeJSアプリケーションをデバッグする際に使用した程度で、使い方はChromeとほぼ同じです。使用頻度が低いため、特に問題点も見つからず、最適化できる設定もないので、ここでは触れません。

ファイル変更の表示効果

行番号表示の列で、差分を実線で表示するか「ガター」で表示するかを設定できます：

私は実線の方が好みなので、これらのオプションは両方とも無効にしました。

Gitコミットボタンの無効化

正直なところ、左側のこのコミットボタンは一度も使ったことがありません。常にコマンドラインでGit操作を行っているので、このオプションは無効にしました。

同様に、このボタン（GitHub Copilotのボタンのようで、自動的にコミットメッセージを生成するもの）も無効にしました。特に会社のプロジェクトでは、要件/bugカード番号をメッセージに含めることが強制されているため、このようなインテリジェントなコミットメッセージ生成はさらに役に立ちません：

拡張機能

通知の無効化

拡張機能から何かを教えてもらう必要はありません。必要があれば、自分から探します。

ターミナル

右クリックの動作

通常、マウスの左クリックで選択した後、右クリックでコンテキストメニューを表示します。しかしVSCodeのデフォルト動作は、内容（単語）を選択すると右クリックで表示されるようになっています。可能ではありますが、必要ありません。

ターミナルの最大行数

これは実際には変更しなくても構いません。まれにかなり前のログ情報を見る必要がある場合があり、私の64GBメモリを考慮すると、大きく設定しても問題ありません。

ターミナルのスクロールアニメーション

アニメーションは好きですが（エレガントです）、ターミナルのスクロールアニメーションには慣性があるようで、スクロール量を制御しにくく、エディタやワークベンチ内のスクロール効果とは大きく異なるため、無効にしました。

CSS/Less/Sass

重複プロパティのlint警告

これは非常に有用です。外部から複数のプロパティ値をコピー＆ペーストする場合（ブラウザの要素検査からstyleをコピーするのが一般的）、重複するプロパティを削除する必要があります。

Git

自動Stash

図の通り、説明は十分です。有効にすることをお勧めします。操作が1ステップ減ります。

サードパーティ拡張機能

特に言うことはありません。拡張機能をインストールするのは、自分のニーズがあるからです。自分の要件に合わせて設定してください。

GitLens

ただし、一部のプラグインでは有料機能の推薦を無効にできます。そうです、GitLensのことです。Gitブランチのマージ状況を（偶然）確認する際に、有料機能のプロンプトが表示されることがあります。これは無効にできます（プラグイン開発者の寛大さに感謝します）：

One Dark Pro

これは私のお気に入りです。メソッドや関数名がより目立つようになります：

あとがき

これだけ多くの設定を紹介しましたが、自分に合ったものが最も重要です。皆さんが効率的に作業し、早く帰宅できることを願っています！

Apple TVで北京聯通IPTVを視聴する

Mon, 30 Oct 2023 00:00:00 +0000

はじめに

以前このブログ記事で、家庭での映画鑑賞の方法について紹介しました。その中で触れたポイントの一つは、ネット上で他の人が取得したIPTVの番組アドレス（m3u拡張子）をiPlayTVに入れると直接再生できるというものです。しかし、この番組アドレスは一定期間で無効になってしまいます。これは、中国聯通のIPTVサーバーが定期的に番組の再生アドレスを更新するためで、Apple TVに設定したアドレスは固定されており、リアルタイムで更新できないからです。そこで、この問題を解決する方法を紹介します。

🚧**使用前の必読事項：**私は北京聯通のブロードバンドを利用しており、**光回線終端装置（ONU）をブリッジモードに設定し、ルーターでPPPoE接続を行い、ソフトウェアルーターR4Sをサブルーター**として接続しています。このチュートリアルはこのネットワークトポロジーを前提としています。「光回線終端装置をブリッジモード + R4SをメインルーターとしてPPPoE接続」または「光回線終端装置でPPPoE接続 + R4Sをサブルーター」などの他のネットワーク構成でも実現可能ですが、R4Sの重要な設定がこのチュートリアルと若干異なる場合があります。検索して要点を理解し、完全に同じにする必要はありません。

🚧同様に、光回線終端装置で直接PPPoE接続している場合、光回線終端装置からケーブルを直接サブ/メインルーターに接続してマルチキャストをユニキャストに変換することもできます。また、対応デバイスで直接マルチキャストアドレスを使用して再生することも可能で、私のように面倒な手順は必要ありません。具体的にはご家庭のネットワーク構成によります。

🚧このチュートリアルは北京聯通IPTVでのみテスト済みです。他の地域では差異がある可能性があります。地域に強く依存する内容が記載されている場合は、お住まいの地域に合わせて対応する内容に置き換えてください。

🚧設定を変更する前に、万が一に備えてすべてのルーターやデバイスの設定をバックアップしてください。

🚧私が使用しているソフトウェアルーターはR4Sで、2つのネットワークポートがあります。私と同じネットワークトポロジーの場合、ソフトウェアルーターに少なくとも2つ以上のネットワークポートがあることを確認してください。1つはメインルーターに接続し、もう1つは光回線終端装置に接続する必要があるためです。

🚧我が家の光回線終端装置のネットワークセグメントは192.168.1.x、メインルーターのネットワークセグメントは192.168.5.xです。光回線終端装置のアドレスは192.168.1.1、R4Sのアドレスは192.168.5.2、メインルーターのLANポートアドレスは192.168.5.1、ルーターのWANポートアドレスは192.168.1.2です。

無料利用が可能かどうかを確認

🚧現在、北京地域のIPTVには認証が追加されていませんが、私が確認した情報によると、他の地域の一部の通信事業者はIPTVに暗号化認証を導入しています。つまり、通信事業者が提供するIPTVボックスのMACアドレスを使用して接続（ボックスが復号化の役割を果たす）しなければ、ボックスなしでソフトウェアルーターを使用してLAN内の任意のデバイスで再生することはできません。具体的な実現方法は複雑で、このチュートリアルではこのシナリオについては紹介しません。

事前にVLCをダウンロード

光回線終端装置をブリッジモードに設定し、ルーターでPPPoE接続を行うと、光回線終端装置に接続してもインターネットに接続できません。そのため、後でテストを行うために、事前にPCにVLCプレーヤーをダウンロードしておいてください。VLCプレーヤーは以下のリンクからダウンロードできます：

Official download of VLC media player, the best Open Source player - VideoLAN

光回線終端装置に接続

PCを有線で光モデムのIPTVポートに接続します（光モデムにIPTVポートが見当たらない場合、それは光モデムが混在接続をサポートしていることを意味し、つまりポートがブロードバンドとIPTVを区別せず、どのポートに接続しても構いません）。その後、VLCソフトウェアで以下の手順を実行します：

File → Open Networkを開きます。
下にあるOpen RTP/UDP Streamをクリックします。
ProtocolはRTPを選択し、ModeはMulticastを選択し、IP Addressには239.3.1.241（またはrtp://239.3.1.241、具体的にどちらかは忘れました）を入力し、ポートには8000を入力します。

Openをクリックした後、北京衛視が見える場合、無料で視聴できることを意味します。

💡ここにある `rtp://239.3.1.241:8000` は北京衛星テレビのマルチキャストアドレスです。将来このアドレスは変更される可能性があります。正確なアドレスについては、`https://raw.githubusercontent.com/qwerttvv/Beijing-IPTV/master/IPTV-Unicom.m3u` こちらで任意の rtp パスの後にある IP アドレスをテストできます。

基本概念の説明

詳細を知りたくない場合は次のセクションに進んでください。

IPTV

ウィキペディアによる IPTV の説明：

📖インターネットプロトコルテレビ（英語: Internet Protocol Television、略称: IPTV）はブロードバンドテレビの一種です。IPTV はブロードバンドネットワークを媒体としてテレビ情報を伝送するシステムで、放送番組をブロードバンド上のインターネットプロトコル（Internet Protocol, IP）を通じて加入者にデジタルテレビサービスを提供します。ネットワークを使用する必要があるため、IPTV サービスプロバイダーは通常、インターネット接続や IP 電話などの関連サービスもセットで提供し、「トリプルプレイ」サービスとも呼ばれます。IPTV はデジタルテレビの一種であるため、通常のテレビには対応するセットトップボックスが必要で、プロバイダーは通常、ビデオオンデマンドサービスも同時に提供します。ブロードバンドネットワークとインターネットプロトコルを介していますが、IPTV は必ずしもインターネットを経由するわけではなく、伝送品質を確保するためにローカルエリアネットワークで伝送されることがあります。

これにより、一般的に IPTV はブロードバンドプロバイダーが提供するサービスであり、これを通じてテレビを見ることができます。

マルチキャスト

IPTV を実現する技術的手段の一つで、英語では「multicast」と呼ばれ、日本語では「マルチキャスト」とも訳されます。具体的な概念を完全に理解する必要はありませんが、ユニキャストと比較して以下の特徴があります：

利点：

インターネット帯域を占有しません。
IPTV ボックスは認証の役割を果たし、IPTV 事業者はグループに対してブロードキャストするため、自社サーバーへの負荷が比較的小さくなります。

欠点：

光モデムの IPTV ポートに有線接続する必要があります（一部の光モデムは混在接続をサポートしており、IPTV ポートとブロードバンドポートを区別しません）。そのため、IPTV ボックスに接続されたデバイスしか使用できず、WiFi を利用して家庭内の任意のデバイスでネットワークテレビを見ることはできません。

ユニキャスト

もう一つの古い IPTV 実装技術で、初期の IPTV ユーザーが少ない時期に使用されていました。マルチキャストと比較すると、その欠点が利点となり、逆もまた同様です：

利点：

接続後、ローカルエリアネットワークで WiFi をサポートし、任意のデバイスで再生できます。

欠点：

サーバーと1対1で接続するため、サーバーへの負荷が大きく、ユーザーが多いと再生が遅くなる可能性があります。
ブロードバンドの帯域幅を占有し、インターネット接続を直接使用して再生します（現在のライブストリーミングと同様です）。

udpxy

udpxy サーバーは**UDP ストリームを HTTP ストリームに変換するプロキシサーバー**で、IP ライブストリームを HTTP ストリームに変換し、さまざまな端末での再生を容易にします。

マルチキャストアドレスを直接取得できない場合、マルチキャストアドレスをユニキャストアドレスに変換するために使用されます。例えば、マルチキャストアドレスが a:b と d:e（a、d は IP アドレス、b、e はポート）の場合、ユニキャストアドレスに変換すると、統一されたアドレス z/a/b、z/d/e になります。プレーヤーはこのアドレス z を監視するだけで済みます。

m3u

**M3U**（MP3 URL の略称）は、マルチメディアリストを再生するためのファイル形式で、当初は MP3 などのオーディオファイルを再生するために設計されましたが、現在では多くのソフトウェアがビデオファイルリストの再生形式として使用しています。

m3u ファイルは、すべてのマルチキャストアドレスを含むテキストファイルです。Apple TV やコンピュータでこのファイルのアドレスを読み取ると、その中のビデオアドレスを再生できます。

EPG

番組表情報を含みます。前の手順で m3u アドレスを取得した後、その中には個々の IP アドレスが含まれていますが、各 IP アドレスがどのチャンネルに対応するかを知るにはどうすればよいでしょうか？この時、EPG を使用してペアリングする必要があります。EPG には各アドレスの番組情報や、チャンネルの簡単な説明さえ含まれています。EPG は通常、ビデオ信号と一緒に放送されます。

ネットワークトポロジー

実践操作

🚧始める前に、前述の内容を確認して無料で利用できるかどうかをチェックしてください。

ソフトウェアルーターの設定

udpxy と luci-udpxy のインストール

この手順は通常の操作です。UIからのインストールが最も簡単です（インストール完了後、有効化する前に最後のステップまで進めてください）。

新しいネットワークインターフェースの作成/設定

この手順は、ソフトウェアルーターが光モデムからのデータを認識できるようにするためのものです。

ネットワーク-インターフェース で新しいインターフェースを作成し、任意の名前（例: IPTV）を付けます：

矢印部分に注意してください。私はすでに新規作成したため、括弧内に「IPTV」という文字が表示されていますが、新規作成した直後は表示されていません。ここで、eth1は私のLANポートで、メインルーターに接続されています。eth0は別のインターフェースで、光回線終端装置（IPTVポート）に接続されています。ここで私は以前に設定を変更しました。デフォルトでは、eth0がLANポート、eth1がWANポートですが、これは重要ではありません。このステップでは、WANポートをIPTVポートとして使用します。

「IPTV」インターフェースのゲートウェイホップ数とファイアウォール設定を構成する：

WANポートのゲートウェイホップ数を設定：

LANポートのIGMPスニッフィング設定：

ネットワークファイアウォールの設定

udpxyサービスの設定

図のように設定してください。ここで注意すべきは、eth0がWANポートであることです。間違えないようにしてください：

最後に [http://192.168.5.2:4022/status]([object Object]) を開いて、udpxy サービスが正常に起動しているかどうかを確認します：

その後、以前にVLCで開いていたアドレス rtp://239.3.1.241:8000 を `http://192.168.2.1:4022/rtp/239.3.1.241:8000`` に変更して再度開いてみてください（下にある「Open RTP/UDP Stream」をクリックせず、直接URLで開きます）。

その後、ダブルクリックで再生できます：

再生ソフトウェアの使用

私はApple TV 4Kでテレビを見ています。いくつかの再生ソフトウェアを試したので、簡単に説明します：

iPlayTVは再生できませんでした。理由はわかりません。
Fileballではチャンネルの上下移動は問題ありませんが、チャンネルを選択するとすぐにクラッシュします。
最終的にIIVAと同じ開発者のアプリ「TV+」を選択しました。香港ストアでの価格は38香港ドルでした（購入翌日に無料提供が開始され、少し残念でした）。

アドレスの自動更新を実現する方法

中国聯通のIPTV番組再生アドレスは、定期的に変更されます。ポートが変わることもあれば、IPアドレスが変わることもあります。この方法で再生できなくなった場合、どうすればよいでしょうか？

ネット上には親切な人がいて、次のような複雑な監視操作を行っています：

光纤入户光猫改桥接+内网转发IPTV=任意设备看电视直播 - Botian's Blog

IPTVテレビボックスと聯通サーバー間の通信データを取得し、そのアドレスを入手しました。したがって、次のように直接使用できます：

github.com

しかし、ここで重要なポイントは、自宅のソフトウェアルーターのアドレスがこの親切な方のアドレス（192.168.123.1）と同じである必要があり、udpxyのポートを23234に変更することです。そうすれば、このアドレスを直接TV+に設定できます：

raw.githubusercontent.com

そうでなければ、このファイルの変更を自ら監視し、更新する必要があります。

ここでは、VercelにAPIサービスを10分でデプロイし、同時にVercelのCorn Jobsサービスを有効化しました。これにより、定期的に関数を実行して変更を検出できます。以下がコードです。あなたも自分でデプロイすることができます：

import type { NextApiRequest, NextApiResponse } from 'next';

type ResponseData = {
  msg: string,
};

/**
 * 该函数用来将网友通过 IPTV 盒子抓包获取的联通单播地址，转成自己的单播地址
 * 该函数每天 3 点触发一次，定时检测网友的单播地址是否有更新，使用 vercel corn 任务进行
 * TODO: 该函数未做鉴权，任何人都可以手动触发检测，为了防止滥用可以加上鉴权，但是 corn 似乎没这个功能
 */
export default function handler(
  request: NextApiRequest,
  response: NextApiResponse<ResponseData>
) {
  // Note: 步骤
  // 1. 获取网友通过监听盒子数据包抓取的（自己搞比较费劲，直接用现成的了）联通 IPTV 永久地址（rtp 协议的组播地址，多用户通用），获取其内容
  // 2. 添加本地 udpxy 转发地址
  // 3. 获取之前的 github gist 内容以对比二者
  // 4. 有差异，则更新 github gist 内容
  // 5. 没有，则不做操作
  // Note: 环境变量，自己在 Vercel 中设置好
  const token = process.env.GITHUB_TOKEN;
  const gist = process.env.GIST_URL;
  const id = process.env.GIST_ID;
  return fetch(
    'https://raw.githubusercontent.com/qwerttvv/Beijing-IPTV/master/IPTV-Unicom.m3u'
  )
    .then(async (res) => {
      if (!res.ok) {
        console.log('获取源地址异常');
        return response.status(200).json({
          msg: '获取源地址异常',
        });
      }
      const src = await res.text();
      // Note: 替换网友的本地单播地址为我的，其实你也可以将自己家的路由器网段设置成跟网友的一样（192.168.123.x），udpxy 端口转发设置成跟网友一样（23234），你就可以直接使用该地址了
      const newGist = src.replace(
        /http\:\/\/192\.168\.123\.1\:23234/g,
        'http://192.168.5.2:4022'
      );
      response.setHeader('Content-Type', 'text/html; charset=utf-8');
      // Note: 获取 gist 的 raw 内容，需要加个 cache-bust 否则每次请求会被缓存
      return fetch(`${gist}?cache-bust=${Math.floor(Math.random() * 100000)}`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      })
        .then(async (pre) => {
          const preGist = await pre.text();
          // console.log('preGist:', preGist);
          if (JSON.stringify(newGist) !== JSON.stringify(preGist)) {
            // Note: 更新 Gist
            const files = {
              'IPTV.m3u': {
                content: newGist,
              },
            };
            return fetch(`https://api.github.com/gists/${id}`, {
              method: 'PATCH',
              headers: {
                Authorization: `Bearer ${token}`,
                'Content-Type': 'text/plain',
              },
              body: JSON.stringify({ files }),
            })
              .then((s) => {
                console.log(
                  `更新成功: ${gist}?cache-bust=${Math.floor(
                    Math.random() * 1000000
                  )}`
                );
                return response.status(200).json({
                  msg: `更新成功: ${gist}?cache-bust=${Math.floor(
                    Math.random() * 1000000
                  )}`,
                });
              })
              .catch((e) => {
                console.log(`更新失败: ${e}`);
                return response.status(200).json({
                  msg: `更新失败: ${e}`,
                });
              });
          }
          console.log(
            `未变化: ${gist}?cache-bust=${Math.floor(Math.random() * 1000000)}`
          );
          return response.status(200).json({
            msg: `未变化: ${gist}?cache-bust=${Math.floor(
              Math.random() * 1000000
            )}`,
          });
        })
        .catch((e) => {
          console.log(`获取自己的 gist 失败: ${e}`);
          return response.status(200).json({
            msg: `获取自己的 gist 失败: ${e}`,
          });
        });
    })
    .catch((e) => {
      console.log(`获取别人的源失败: ${e}`);
      return response.status(200).json({
        msg: `获取别人的源失败: ${e}`,
      });
    });
}

Corn Jobs サービス設定：

{
  "crons": [
    {
      "path": "/api/get",
      "schedule": "0 15 * * *"
    }
  ]
}

このファイルをプルした後に更新がある場合、gistファイルは自動的に更新されます：

gist.githubusercontent.com

このように、TV+ にこの gist アドレスをハードコードしておけば、ネットユーザーがこのアドレスを更新したときに自動的に更新されるようになります。

参考リンク

单线融合IPTV到家庭局域网最简单的方法：路由+桥接混合模式

光纤入户光猫改桥接+内网转发IPTV=任意设备看电视直播 - Botian's Blog

北京联通白嫖 IPTV

Xheldon Blog

デュアルブートシステム間で同じショートカットキーを使う方法

はじめに

効率的な入力の本質

苦労するバッククォート ` の入力

苦労するControlキーの入力

余計なCapsLockキー

キーボード要件

FNキーマッピングでEcmacsテキスト編集を実現

アルファベット領域のキー変更

その他のキー変更

美中不足

後書き

アプリ開発の旅（一）：摩訶不思議なSwift

説明

はじめに

基本知識

コメント

オプショナルバインディング

コレクション型

制御フロー

if式

Switchのすごい判定

関数

関数のラベル付き引数

クロージャ

クロージャのN種類の省略記法

returnの省略

自動クロージャ

列挙型

関連値

暗黙的な代入

構造体とクラス

プロパティ

様々なxxプロパティ/ラッパー/オブザーバー

サブスクリプト

継承

初期化プロセス

Structのメンバーワイズイニシャライザ

クラスの指定イニシャライザとコンビニエンスイニシャライザ

失敗可能イニシャライザ

オプショナルチェーン

エラー処理

並行処理

拡張機能

プロトコル

ジェネリクス

不透明型とカプセル化プロトコル

メモリ安全性

高度な演算子

結果ビルダー

字句構造

CusorでiOSアプリを開発しリアルタイムでプレビューする方法

「SwiftプラグインとCodeLLDBプラグインのインストール」への補足：

「ホットリロードの設定」のステップ2への補足：

新しいファイルを追加した後、Source Kitがファイルを見つけられないというエラーが発生する問題

SwiftUIのデバッグ時に変更がリアルタイムでプレビューされない問題：

JekyllからHexoへの移行時の問題記録

はじめに

技術選定

移行プロセス

プラグイン移行

Permalink問題

EJSテンプレート構文問題

Markdown構文レンダリング問題

Liquidソート問題

Mermaid構文問題

MarkdownでEJS構文が使用できない問題

ページネーション生成問題

打ち消し線の実装問題

ビルド後の余分なファイル問題

RSS 問題

Service-Worker 問題

その他の問題

あとがき

サイバーパンク2024：私が現在使用しているツールたち

はじめに

有料サブスクリプションソフトウェア

Crusor

Notion