解像度が1920×1080、拡大/縮小が125%のディスプレイの半分でScrapboxを表示すると、冒頭の画像のように検索欄の見た目が崩れる。
これは、上記の状態ではウィンドウサイズが767.20pxになっており、app.cssで定義しているメディアクエリのブレークポイントの間になっているため、CSSが適応されず見た目が崩れている。
これを解決するために、このプログラムでapp.cssからメディアクエリを抽出し、メディアクエリのブレイクポイントを修正したCSSをImport Pagesで取込めるJSON形式で出力する。 Import Pageで取込んだCSSをUserCSSとして読み込むと、冒頭の画像のように検索欄の見た目が崩れなくなる。
図1： 修正前のブレークポイント
図2： 修正後のブレークポイント
APIからapp.cssを取得し、メディアクエリのブレークポイントを修正したCSSをJSONで出力します。 出力したJSONをScrapboxに手動でインポートします。
- node v18.16.0
- npm v9.5.1
- css v3.0.0,
- prettier v2.8.7
- typescript v5.0.4
TODO
TODO
ターミナルでnpm installと実行すると、package.jsonに記述している依存パッケージをnode_modulesフォルダに自動でインストールできます。
TODO
scrapbox-breakpoint-fixer-generator/
├─.vscode/
│ ├─launch.json # 実行用の設定
│ └─tasks.json # ビルド(コンパイル)用の設定
├─doc/
│ └─コーディング規約_TypeScript.md
├─node_modules/ # 依存パッケージ
├─out/ # コンパイル後の実行ファイルと map ファイル
├─src/
│ ├─consoleLog.ts # ログ出力のラッパー
│ ├─downloadAppCss.ts # Scrapbox から app.css をダウンロード
│ ├─importJsonIntoScrapbox.ts # Scrapbox にインポートする JSON
│ └─index.ts # ビルドのエントリーポイント（メイン処理）
├─.gitignore
├─package-lock.json
├─package.json
├─README.md # この文書
├─scrapbox-breakpoint-fixer-generator.code-workspace # VSCode のワークスペース
└─tsconfig.json # TypeScriptの設定
コーディングルール_TypeScript.mdを参照してください。