アプリ、パッケージのインストール

「Homebrewあれ」

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

インストール後のNext stepsPATHへの追加も忘れずに。

可及的速やかにWarpを導入し、以降はこれを使用する。 Karabiner-Elementsは次項で使用するためこれも優先的にインストールする。

brew install --cask warp
brew install --cask Karabiner-Elements

以下コマンドをコピペしインストール開始。 Homebrew Bundleも考えたが、この記事からコマンドをコピペした方が圧倒的に早いのだった。 コマンドはbrew bundle dumpで作成したBrewfileの行頭に"brew install"を付けて作成。更新作業直前に作り直すこと。

時間がかかるのでコマンド実行後は待たずに次項の作業を実施して良い。

コピペ用コマンド

brew install "ffmpeg"
brew install "git"
brew install "icu4c@76"
brew install "imagemagick"
brew install "mas"
brew install "node"
brew install "perl"
brew install "php"
brew install "python@3.12"
brew install --cask "adobe-acrobat-reader"
brew install --cask "alfred"
brew install --cask "alt-tab"
brew install --cask "chatgpt"
brew install --cask "discord"
brew install --cask "docker-desktop"
brew install --cask "drawio"
brew install --cask "firefox"
brew install --cask "github"
brew install --cask "google-chrome"
brew install --cask "google-drive"
brew install --cask "iina"
brew install --cask "iterm2"
brew install --cask "karabiner-elements"
brew install --cask "libreoffice"
brew install --cask "logi-options+"
brew install --cask "obs"
brew install --cask "pdf-expert"
brew install --cask "sublime-text"
brew install --cask "utm"
brew install --cask "visual-studio-code"
brew install --cask "vitalsource-bookshelf"
brew install --cask "vlc"
brew install --cask "vmware-fusion"
brew install --cask "wacom-tablet"
brew install --cask "warp"
brew install --cask "zed"
brew install --cask "zoom"
brew install --mas "AdGuard for Safari", id: 1440147259
brew install --mas "Colibri", id: 1178295426
brew install --mas "CotEditor", id: 1024640650
brew install --mas "CrystalFetch", id: 6454431289
brew install --mas "Dark Reader for Safari", id: 1438243180
brew install --mas "DaVinci Resolve", id: 571213070
brew install --mas "Developer", id: 640199958
brew install --mas "GarageBand", id: 682658836
brew install --mas "iMovie", id: 408981434
brew install --mas "Keepa - Price Tracker", id: 1533805339
brew install --mas "Keynote", id: 409183694
brew install --mas "Kindle", id: 302584613
brew install --mas "LINE", id: 539883307
brew install --mas "Macgo Blu-ray Player Pro", id: 1403952861
brew install --mas "Magnet", id: 441258766
brew install --mas "Numbers", id: 409203825
brew install --mas "Pages", id: 409201541
brew install --mas "PixelFinder", id: 1512540355
brew install --mas "Xcode", id: 497799835
brew install --mas "デスクトップ時計", id: 894760156
brew install --mas "辞書 by 物書堂", id: 1380563956

</details>

キーボード、トラックボールの設定

トラックボール(Kensington Slimblade)

KensingtonWorks.appを手動インストール。

設定は画像を参照。 バック・フォワードはWebブラウザタブのものを使用すること。

キーボード

Karabiner-Elements.appの"complex modifications"に以下ルールを追加。

コマンドキーを単体で押したときに、英数・かなキーを送信する。（左コマンドキーは英数、右コマンドキーはかな）(UTM実行中は無効化する)

{
    "description": "コマンドキーを単体で押したときに、英数・かなキーを送信する。（左コマンドキーは英数、右コマンドキーはかな）(UTM実行中は無効化する) (rev 3)",
    "manipulators": [
        {
            "conditions": [
                {
                    "bundle_identifiers": [
                        "^com\\.utmapp\\.UTM$"
                    ],
                    "file_paths": [
                        "/Applications/UTM.app/Contents/MacOS/UTM"
                    ],
                    "type": "frontmost_application_unless"
                }
            ],
            "from": {
                "key_code": "left_command",
                "modifiers": {
                    "optional": [
                        "any"
                    ]
                }
            },
            "parameters": {
                "basic.to_if_held_down_threshold_milliseconds": 100
            },
            "to": [
                {
                    "key_code": "left_command",
                    "lazy": true
                }
            ],
            "to_if_alone": [
                {
                    "key_code": "japanese_eisuu"
                }
            ],
            "to_if_held_down": [
                {
                    "key_code": "left_command"
                }
            ],
            "type": "basic"
        },
        {
            "conditions": [
                {
                    "bundle_identifiers": [
                        "^com\\.utmapp\\.UTM$"
                    ],
                    "file_paths": [
                        "/Applications/UTM.app/Contents/MacOS/UTM"
                    ],
                    "type": "frontmost_application_unless"
                }
            ],
            "from": {
                "key_code": "right_command",
                "modifiers": {
                    "optional": [
                        "any"
                    ]
                }
            },
            "parameters": {
                "basic.to_if_held_down_threshold_milliseconds": 100
            },
            "to": [
                {
                    "key_code": "right_command",
                    "lazy": true
                }
            ],
            "to_if_alone": [
                {
                    "key_code": "japanese_kana"
                }
            ],
            "to_if_held_down": [
                {
                    "key_code": "right_command"
                }
            ],
            "type": "basic"
        }
    ]
}

</details>

シフトキーを単体で押したときに、alfredを実行する(UTM実行中は無効化する)

{
    "description": "シフトキーを単体で押したときに、alfredを実行する(UTM実行中は無効化する)",
    "manipulators": [
        {
            "conditions": [
                {
                    "bundle_identifiers": [
                        "^com\\.utmapp\\.UTM$"
                    ],
                    "file_paths": [
                        "/Applications/UTM.app/Contents/MacOS/UTM"
                    ],
                    "type": "frontmost_application_unless"
                }
            ],
            "from": {
                "key_code": "left_shift",
                "modifiers": {
                    "optional": [
                        "any"
                    ]
                }
            },
            "parameters": {
                "basic.to_if_held_down_threshold_milliseconds": 100
            },
            "to": [
                {
                    "key_code": "left_shift",
                    "lazy": true
                }
            ],
            "to_if_alone": [
                {
                    "key_code": "spacebar",
                    "modifiers": [
                        "command"
                    ]
                }
            ],
            "to_if_held_down": [
                {
                    "key_code": "left_shift"
                }
            ],
            "type": "basic"
        },
        {
            "conditions": [
                {
                    "bundle_identifiers": [
                        "^com\\.utmapp\\.UTM$"
                    ],
                    "file_paths": [
                        "/Applications/UTM.app/Contents/MacOS/UTM"
                    ],
                    "type": "frontmost_application_unless"
                }
            ],
            "from": {
                "key_code": "right_shift",
                "modifiers": {
                    "optional": [
                        "any"
                    ]
                }
            },
            "parameters": {
                "basic.to_if_held_down_threshold_milliseconds": 100
            },
            "to": [
                {
                    "key_code": "right_shift",
                    "lazy": true
                }
            ],
            "to_if_alone": [
                {
                    "key_code": "spacebar",
                    "modifiers": [
                        "command"
                    ]
                }
            ],
            "to_if_held_down": [
                {
                    "key_code": "right_shift"
                }
            ],
            "type": "basic"
        }
    ]
}

</details>

アプリ設定

Safariのローカル拡張機能追加

Xcodeで拡張機能のプロジェクトファイルを実行する。 (下２つはGoogle Chromeの拡張機能を変換したもの。プライベートリポジトリで管理している)

• Auto Copy
• AutoScroll
• TWP

Alfredの設定

• Powerpackの認証
• Hotkeyを⌘+Spaceに
• 検索範囲の設定
• Workflowの追加
  • Search Apple Music
  • Search Notes
  • Shortcuts
• Web searchの追加
• デフォルト検索候補の設定(Default ResultsのSetup fallback resultsより)

その他、初日に済ませないと不便すぎて終わるタイプのアプリ設定作業

• Dictionaries.appの購入済み辞書のインストール
• Music.appのデバイス承認
• Message.appのサインイン
• Reminders.appのサインイン
• Mail.appのサインイン
• Calendar.appのサインイン

コマンド、スクリプトでの設定

• 【Mac】隠しファイル・隠しフォルダを表示する方法
• macOS Sonomaでテキストカーソル横にIMEモードが出るようになった
• macのスクリーンショット体験を改善するためにやったこと。

defaults write com.apple.finder AppleShowAllFiles TRUE
killall Finder
sudo mkdir -p /Library/Preferences/FeatureFlags/Domain
sudo /usr/libexec/PlistBuddy -c "Add 'redesigned_text_cursor:Enabled' bool false" /Library/Preferences/FeatureFlags/Domain/UIKit.plist
defaults write com.apple.screencapture name ""

on run {input, parameters}
	set filePath to item 1 of input as text
	set the clipboard to (read (filePath as alias) as TIFF picture)
end run

新テンプレートへの移行

https://tailwind-nextjs-starter-blog.vercel.app/blog/release-of-tailwind-nextjs-starter-blog-v2.0

移行するにあたっては、推奨されている通り新テンプレートをコピーし、これまでの編集履歴を反映し直して対応した。 記法に変更があったり、エラーも色々発生したが、ググれば解決できるレベルなので説明は省略。

検索コンポーネント(Algolia)について、現在使用しているライブラリ(plinyリポジトリ内のもの)が日本語に対応していないので、検索ボタンだけ削除している。早晩対応する。

コンテンツ埋め込み

まずはじめに、CSP(Content Security Policy)を設定。

 const ContentSecurityPolicy = `
   default-src 'self';
-  script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app analytics.umami.is;
-  style-src 'self' 'unsafe-inline';
+  script-src 'self' 'unsafe-eval' 'unsafe-inline' 'giscus.app' 'analytics.umami.is' 'https://twitter.com' 'https://*.twitter.com' 'https://syndication.twitter.com' 'https://www.nicovideo.jp' 'https://open.spotify.com';
+  style-src 'self' 'unsafe-inline' 'https://www.youtube.com' 'https://twitter.com' 'https://*.twitter.com' 'https://syndication.twitter.com' 'https://www.nicovideo.jp' 'https://open.spotify.com';
   img-src * blob: data:;
   media-src *.s3.amazonaws.com;
   connect-src *;
   font-src 'self';
-  frame-src giscus.app
+  frame-src giscus.app https://www.youtube.com https://twitter.com https://*.twitter.com https://syndication.twitter.com https://www.nicovideo.jp https://ext.nicovideo.jp https://open.spotify.com;
+  child-src https://www.youtube.com https://twitter.com https://*.twitter.com https://syndication.twitter.com https://www.nicovideo.jp https://ext.nicovideo.jp https://open.spotify.com;
 `

𝕏

https://github.com/vercel/react-tweet

Vercelが7月に公開した埋め込み用ライブラリ。その後まもなく𝕏からのアクセス拒否(?)で使えなくなっていたが、9/15に復活した模様。

<Tweet id="1702605663770440074"/>

ニコニコ動画

ニコニコ動画公式の埋め込みコードはscriptタグを使用しているが、Next.jsではscriptタグを使えない。

https://zenn.dev/hatsumihayashi/articles/3834902cf5ac4e

対応策として、今回は以下記事の方法2を採用。

https://qiita.com/fanta_cps/items/13e0819e0c1db111186c

• Niconico.tsx

  作成したコンポーネント。頭の'use client'とか、MessageEventの型とか、このブログで使用するにあたり少し変更がある。

<NicovideoPlayer id="so32488462" />

YouTube

YouTubeは動画ページから埋め込みコードを取得して貼るだけでも良いが、フルスクリーンにできないことと、幅固定になってしまいスマホで表示した時に表示が崩れる問題がある。 ニコニコ動画埋め込み用のコンポーネントをURLだけ変更してYouTubeに適用する。

• Youtube.tsx

<YoutubevideoPlayer id="1-o7fmQqSNg" />

Spotify

Spotifyも公式の埋め込みコードはそのままでは使えないのでコンポーネントを作成した。

• Spotify.tsx

<SpotifyPlayer id="7rNb5UJ9IhpTEw6Yl99FqT" />

サブタイトル、最終更新日追加

  ---
  title: 記事タイトル
+ subtitle: サブタイトル
  tags: ['test']
  date: '1-1-1'
+ lastmod: '1-1-2'
  draft: true
  summary: '概要'
  ---

• 変更箇所

  他にも変更箇所はあるがコミットが散逸しているので実装初めのマージコミットだけ貼っておく。

  • subtitle

  • lastmod

]]>