[{"data":1,"prerenderedAt":211},["ShallowReactive",2],{"content-/accounting-saas-chrome-extension-ui":3,"all-pages-for-dir":189,"related-/accounting-saas-chrome-extension-ui":190,"og-image-/accounting-saas-chrome-extension-ui":210},{"id":4,"title":5,"body":6,"category":169,"concepts":170,"description":171,"extension":172,"meta":173,"navigation":174,"ogImage":170,"path":175,"project_name":176,"published":177,"publishedAt":178,"seo":179,"source":180,"stem":181,"tags":182,"todo":170,"unpublished":177,"updatedAt":170,"__hash__":188},"pages/2026-09/2026-09-02/accounting-saas-chrome-extension-ui.md","会計ソフトの明細一覧を Chrome 拡張で整える：列幅のずれ、全件自動表示、連携サービスの横並び",{"type":7,"value":8,"toc":158},"minimark",[9,13,16,19,24,27,35,42,45,48,51,54,58,61,64,71,74,77,80,83,86,89,92,95,98,101,104,107,110,113,119,130,133,155],[10,11,12],"p",{},"会計ソフトAの明細一覧で、行ごとに対応する仕訳を右側へ並べる表示を作らせた。\n行の高さは 80px から 28px まで詰まり、100 行のうち 99 行が 1 行に収まった（残る 1 件は複合仕訳で 2 段になる）。\n画面としては、もう読める。",[10,14,15],{},"ただ、ヘッダーのカラムだけが本体の明細行と高さが合っていない。\nそのせいで、表全体が微妙にずれて見えた。",[10,17,18],{},"拡張の CSS は相手のページの上に乗る。\nだから崩れを見つけたら、まず自分が足したスタイルを疑うことになる。",[20,21,23],"h2",{"id":22},"列幅を決めていたのは-th-ではなかった","列幅を決めていたのは th ではなかった",[10,25,26],{},"明細テーブルを圧縮するとき、列幅が指定どおりにならなかった。\nth に幅を当てても、列は動かない。",[10,28,29,30,34],{},"DOM を見に行かせたら、テーブルの先頭に ",[31,32,33],"code",{},"\u003Ccolgroup>"," があった。\n列幅はそちらで決まっていて、th に書いた指定は当たらなかった。\ncol 要素に幅を当てる方式へ書き換えさせたら、ようやく指定どおりの幅になった。",[10,36,37,38,41],{},"表示側は ",[31,39,40],{},"journal-view.js"," として切り出させ、manifest と style.css に組み込ませた。\n単体テストは 16 件通った。\n「続きを表示」で 120 行まで増えても仕訳側が追従することを実ページで確認し、複合仕訳の行も 1 件見つけた。",[20,43,44],{"id":44},"ヘッダーだけが本体と揃わない",[10,46,47],{},"気持ち悪かったのはヘッダーだった。",[10,49,50],{},"目分量で padding を削らせると、たいてい別のどこかがずれる。\n先に実測させてから手を入れさせた。",[10,52,53],{},"あわせて、未入力行の色とステータス列の並び替えの挙動も同じ回で直させた。\n拡張をリロードさせて明細一覧を読み直し、3 点とも実機で確認した。\n明細一覧のタブは元の並び順に戻してもらった。",[20,55,57],{"id":56},"続きを表示を押す係を拡張に渡す","「続きを表示」を押す係を拡張に渡す",[10,59,60],{},"このページは、開くと下に「続きを表示」が必ず出てくる。\n全件見たいだけなのに、毎回押す。\nうっとうしいので、拡張に押させることにした。",[10,62,63],{},"先に確認させたのは二重クリックの危険だった。\nクリックした直後にページ側がボタンをどう扱うのか。\n既存のエクスポート処理が同じボタンを押していないか。\nそこを見てから自動クリックを入れさせた。",[10,65,66,67,70],{},"日付ヘッダーの並び替えも、このときまとめて置き換えさせた。\n自動読込と日付の並び替え、ステータスの並び替えを別タブで動かして確認した。\nそのうえでコミットしている（",[31,68,69],{},"4b7dc2c","）。",[20,72,73],{"id":73},"連携サービスをカードの下に横一列で出す",[10,75,76],{},"午後は別の不満をつぶした。",[10,78,79],{},"通帳カードの下に、連携サービス名を全部並べたい。\nドロップダウンから 1 つ選んで切り替えるのは、単純に手数が多い。\n横に並べれば入るはずで、入らなければ 2 段目に折り返せばいい。",[10,81,82],{},"select の構造と、切り替えたときに何が飛ぶのかを実機で確認させた。\n既存の CSS とテストの書き方も読ませてから実装に入らせている。\n結果、12 件が 2 段で並んだ。\nスクリーンショットで並びを確かめ、クリックしたときに組み立てる URL も検証させた。",[10,84,85],{},"ページ側に CSP があるので、検証には一時サーバーを立て、終わったら止めさせた。",[20,87,88],{"id":88},"拡張の読み込みで一度止まった",[10,90,91],{},"コードを直したら chrome-extension-reload スキルでリロードして反映を見る。\nこれがいつもの流れになっている。",[10,93,94],{},"ただ今回は、拡張をフォルダごと分けていた。\n新しいフォルダを Chrome に読み込む操作が別に要る。\nそこは OS のフォルダ選択ダイアログが出るから実行できない、と返ってきた。",[10,96,97],{},"拡張機能側からできたはずだと思って調べ直させたところで、フォルダを分けたのは自分だったと思い出した。\n結局、その場で手を動かして読み込んだ。",[10,99,100],{},"読み込んだあと、明細一覧のタブを開き直して実測させた。\n新しい拡張だけが動いていること、連携サービス一覧と右側の仕訳表示が同じ拡張から出ていること、旧版の残骸が残っていないことの 3 点を確認した。",[20,102,103],{"id":103},"仕訳帳に空いた余白をデバッグする",[10,105,106],{},"仕訳帳のページを開いたら、パンくずと検索フォームの間が大きく空いていた。\n他のページへの遷移ボタンも見当たらない。\n今日入れた CSS が効きすぎたのだろう、と思った。",[10,108,109],{},"修正に入る前にコミットを取らせた。\nどこから壊れたのかを追えなくなるのが一番困る。",[10,111,112],{},"それから、その区間にある要素を 1 つずつ実測させた。\n犯人は今日触った 2 つの拡張ではなかった。\nホーム画面の広告を消すために前に作った別の拡張が空のメニュー枠を 2 個挿入していた。\nその 2 個ぶんが、あの余白だった。",[10,114,115,118],{},[31,116,117],{},"content.js"," を直して拡張をリロードさせ、空白が消えたことを画面で確認した。",[10,120,121,122,125,126,129],{},"コミットは学習ゲートで止まった。\nクイズを 5 問ブラウザに出させたが、そのまま 30 分でタイムアウトした。\nサーバー側を確認させても合格セッションはなく、未回答のまま落ちていた。\n出し直させたうえで、結局 ",[31,123,124],{},"LEARN_SKIP"," で通した（",[31,127,128],{},"8ab45d2","）。\n午前のコミットも同じ扱いにしている。",[20,131,132],{"id":132},"学びメモ",[134,135,136,143,146,149,152],"ul",{},[137,138,139,140,142],"li",{},"テーブルの列幅が指定どおりにならないときは ",[31,141,33],{}," を見る。th に幅を書いても col が勝つ場面がある",[137,144,145],{},"見た目のずれは、目分量で padding をいじらせる前に実測させる",[137,147,148],{},"相手のページに CSS を差し込む拡張が 3 つになった。崩れの原因を最新の変更に決め打ちすると外す",[137,150,151],{},"修正に入る前にコミットを取る。犯人が別の場所だったとき、戻れる地点があるかどうかで調査の速さが変わる",[137,153,154],{},"「できません」と返ってきたら、条件を疑ってもう一度調べさせる。今回は自分がフォルダを分けたのを忘れていただけだった",[10,156,157],{},"拡張が 3 つになったのに、どれがどのページに何を差し込んでいるかを一覧で持っていない。\n次に似た余白を見たときも、また同じ順番で自分を疑うところから始めることになる。",{"title":159,"searchDepth":160,"depth":160,"links":161},"",2,[162,163,164,165,166,167,168],{"id":22,"depth":160,"text":23},{"id":44,"depth":160,"text":44},{"id":56,"depth":160,"text":57},{"id":73,"depth":160,"text":73},{"id":88,"depth":160,"text":88},{"id":103,"depth":160,"text":103},{"id":132,"depth":160,"text":132},"dev",null,"自作の Chrome 拡張でクラウド会計の明細一覧を作り替えた一日の記録。列幅を握っていた colgroup、「続きを表示」の自動クリック、連携サービス名の横並び、仕訳帳に空いた余白の原因が別の拡張だった話まで。","md",{},true,"/accounting-saas-chrome-extension-ui","misc-dev",false,"2026-09-02T00:00:00.000Z",{"title":5,"description":171},"make-diary","2026-09/2026-09-02/accounting-saas-chrome-extension-ui",[183,184,185,186,187],"Chrome拡張","UI改善","CSS","デバッグ","会計ソフト","o3xOztlxvVkJO-tk8J4yBuZIy5ETkg0mLf7oMTRUR4Y",[],[191,195,199,203,207],{"title":192,"path":193,"publishedAt":194},"Chrome拡張のクリック領域が行全体に広がるバグと、__pycache__ で拡張が無効化される罠","/chrome-extension-click-area-and-pycache","2026-08-19T00:00:00.000Z",{"title":196,"path":197,"publishedAt":198},"自作Chrome拡張のXの動画ダウンロードボタンが消えた——DOM構造の変化を追って復活させた","/x-video-download-button-fix","2026-07-05T00:00:00.000Z",{"title":200,"path":201,"publishedAt":202},"連結精算表のUI改善とデータバグ修正 - 矢印線・多列テーブル・貸借バランス","/consolidated-worksheet-ui-data-fixes-2026-02-02","2026-02-02T00:00:00.000Z",{"title":204,"path":205,"publishedAt":206},"マークダウンページの目次がスクロール時に固定表示されない問題","/table-of-contents-sticky-issue","2025-11-27T00:00:00.000Z",{"title":208,"path":209,"publishedAt":178},"2026年9月2日の開発日記 - 出てきたものではなく、出す側を直した一日","/2026-09-02-diary","https://log.eurekapu.com/og/blog/accounting-saas-chrome-extension-ui.png?v=2026-09-02T00%3A00%3A00.000Z&title=%E4%BC%9A%E8%A8%88%E3%82%BD%E3%83%95%E3%83%88%E3%81%AE%E6%98%8E%E7%B4%B0%E4%B8%80%E8%A6%A7%E3%82%92%20Chrome%20%E6%8B%A1%E5%BC%B5%E3%81%A7%E6%95%B4%E3%81%88%E3%82%8B%EF%BC%9A%E5%88%97%E5%B9%85%E3%81%AE%E3%81%9A%E3%82%8C%E3%80%81%E5%85%A8%E4%BB%B6%E8%87%AA%E5%8B%95%E8%A1%A8%E7%A4%BA%E3%80%81%E9%80%A3%E6%90%BA%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AE%E6%A8%AA%E4%B8%A6%E3%81%B3&author=Kei%20Komatsu&sig=02328d8b731e4962",1788417368649]