橋本商会 - Scrapbox

https://scrapbox.io/shokai

shokai / 階層整理型WiKiはスケールしない / 発表資料 / Scrapboxをグループでどう使っていくか? / ServiceWorkerとCacheによるSPAの高速化、オフラインモード / 文芸的データベース - 文書の作成とそのデータベース化を同時に行なう手法 / Claude Code Gihtub Actionsは権限が無くて実行できなかった作業を知識で取り繕って成功したフリ

フィード

記事のアイキャッチ画像
Claude Code Gihtub Actionsは権限が無くて実行できなかった作業を知識で取り繕って成功したフリをする - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
ハルシネーションではなく、単に普通のプログラム部分のbugだと思うshokai.iconライブラリ更新レビュー手順書にて npmjs.comからバージョン情報取得しろという指示に対して、取得できてないのに、取得できた体で作業継続して、報告書を書いてきた 権限が無いという事も報告してくれない すっごい人間っぽいshokai.icon 2025年6月頭まで気づかなくてずっと混乱してた この件はClaude Code Github ActionsはWebFetchとWebSearch権限を与えないとGithub外にアクセスできないで解決した webアクセス以外の機能についてもGithub Actionsで動かしていれば同じだと思う ちゃんと作業したのかログ確認した方がいいライブラリ更新レビュー手順書のようなものをSaaS側で動かしたいなら、現状ではClaude Code Github ActionsよりもDevinの方がいいshokai.icon Github Actionsで動かすClaude Codeはログが見づらすぎる 何やってるのか把握するのが非常に難しい 何やってるか把握しても、誤った作業をしてる場合に途中で止める手段が無い いやaction自体を止めれば良いのか? Devinはセットアップが楽だし、ログもまあまあ確認しやすい 誤った作業をしてたら途中で止める事もできるGemini 2.5 Proとかも同じ こういう指示をすると、存在しない架空のURLを返す webを検索しろ URLを教えて Gemini Deep Researchの場合は問題ないのだが Deep Researchではない普通のGeminiだとwebを参照したフリをする
4日前
記事のアイキャッチ画像
雰囲気マークアップ - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
プロンプトをXMLで構造化すると、LLMが雰囲気を読んで、偶然いい感じにやってくれる事が多い Structured OutputsやAnthropicのTool useみたいに、LLMとユーザーの間で動作するシステムとは別の概念Anthropic https://docs.anthropic.com/en/docs/build-with-claude/prompt-engineering/use-xml-tags プロンプト内で、XMLのような雰囲気で構造化マークアップする code: prompt 〇〇してください <Input>A</Input> <Input>B</Input> こういうXMLをこう扱え、という学習はかけていない There are no canonical “best” XML tags that Claude has been trained with in particular, although we recommend that your tag names make sense with the information they surround. LLMの学習の副産物として、XMLをプレーンテキストの区切りとして与えると、雰囲気を読んでいい感じに扱う挙動が発生しているOpenAIも言っている https://cdn.openai.com/API/docs/gpt-5-for-coding-cheatsheet.pdf XML-like、つまりXMLそのものではないGoogle プロンプトを構造化する | Generative AI on Vertex AI | Google CloudMicrosoft Document Embedding in Prompts | Microsoft Learn プロンプト内にドキュメントを含める場合は<documents>で囲む Prompt engineering techniques - Azure OpenAI | Microsoft Learn markdownかXMLを使え markdownの区切り線も有用Amazon PromptTemplate - Amazon Bedrock 意味的な区切りにXMLを使え これはAmazon BedrockのドキュメントなのでAntropicの
20日前
記事のアイキャッチ画像
Smart Contextの先頭にLLM向けガイドを追加した - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
Smart Contextの先頭に解説を付けるようにした この1ファイルの中に複数のページがあって、それぞれがURLを持っていて、リンクし合っている <Page>を順に読んでけ 矛盾する記述があったら各<Page>の更新日時を参考にしろ という事をAIが理解できる雰囲気マークアップだけだと、ただの構造の宣言である 構造の扱い方のヒントを説明しておくと、さらにいい感じになる じゃあそれもexportファイルの、構造化が始まる直前に差し込んでしまえばいいのではないか?という発想Claude Codeに読ませるとかなり正しくドキュメントの構造を認識してくれて、指示しやすくなった これは/Notaでの実際の開発風景 このproject内でも試してみようSmart ContextをexportしてGemini 2.5 Proに渡す ソース:途中まで自分で作って、続きはAIエージェントに作ってもらうパターンの2 hop linksメインページの主張を解説してshokai.icon それと似たような主張があれば全てリストして。URLも併記して結果 [cite_start]とかは除去してshokai.icon承知いたしました。引用表記を除去して、再度回答します。メインページの主張は、「人間が最初の一歩として具体的なコードの例を示し、残りの単純で大規模な作業をAIエージェントに任せる」というプログラミングのパターンです。このアプローチは、細かい手順を自然言語で長々と指示するよりも、コードの例を見せる方がAIにとって過不足なく、かつ端的に意図が伝わるため効率的であると論じています。これは「例示プログラミング」のような考え方で、特にCI(継続的インテグレーション)で検証可能な単純作業に向いています。例えば、Cosenseの多数のファイルをCommonJSからES Modulesへ移行する作業では、まず開発者が4行だけ修正したプルリクエストを作成し、それを手本としてAIエージェントに残りの作業を完了させました。この方法は、人間が単純作業に時間を費やすのを避け、AIの能力を効果的に活用する手段として提示されています。この主張と類似する内容を持つページは以下の通りです。 途中まで自分で実装してからClaude Codeに続きよろしくと指示するパターン 主張: このページは、メインページとほぼ同
21日前
記事のアイキャッチ画像
会社でClaude Code導入する場合はTeam planで十分 - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
全開発者をMax planにする必要なし株式会社HelpfeelはOrganization作ってTeam planで契約しています と思ってたけどこれTeam planじゃないらしいshokai.icon でもMax planでもない 一体なんなんだ?普通のOrganization?運用 25人ぐらいで月$1000未満 2025/4から、これを書いている2025/6/25時点までずっとそう monthly limitをかけておく とりあえず$1000に設定している 起動時のオプションで全ての作業をOpusにするみたいな暴挙をせず、Claude Codeのmodel選択に任せる タスク内の小タスク等で適切にhaiku等を使い分けてくれるのがClaude Codeの強みの1つだと思っているので、変なオプション付けなくていい アカウント開けても使わない人もいる DevinやGithub organizationのCopilot(詳細不明)を使っている人もいる 全員が全作業をClaude Codeでやったらどうなるかは不明だが 今後も、AIコーディングエージェントは各自の好みとタスクとの相性で使い分けていくだろうそもそも定額$100で$5000とか$10000とか使ってもいいですよみたいなサービス提供がいつまでも続くとは思えないTeamプランの挙動 $25 per person https://www.anthropic.com/pricing#team-&-enterprise tokenの料金に$25×25人 = $625が追加でかかった事は無い 25人のteamでは最低料金が$625になるが、token使用だけで$625超えていたら人数課金はされない、という事だと思われるshokai.icon 手動チャージはしていない 一定金額以下になったら、指定額まで自動チャージする機能がある $50下回ったら$300までチャージで設定にしている 毎回$250.5ぐらいチャージされる $0になったらチャージする設定はやめた 一瞬claude codeが止まる瞬間が発生する 細かく$10ずつとかチャージしない 全チャージが別々のinvoiceになるので、経費精算が大変になる 大量のPDFを1つずつダウンロードしてバクラクに添付し続ける事になった monthly limit とんでもな
23日前
記事のアイキャッチ画像
Twitterのトレンド欄を消すUser Stylesheet - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
こうなる code:twitter-no-trends.user.css @-moz-document domain("twitter.com") { aria-label="Timeline: Trending now", aria-label="タイムライン: 速報", aria-label="Who to follow", aria-label="おすすめユーザー", data-testid="DMDrawer", aria-label="Timeline: " { display: none; } }Stylus (chrome extension)にUser Stylesheetをセットする
1ヶ月前
記事のアイキャッチ画像
Maglevを無効化したらNode.js v24でもsvg2ttfが実行できる - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
問題が無い環境 Docker for Macで実行しているnode 22のコンテナから、Mac側にあるソースコードをマウントしている場合 Mac側にインストールしたnode 24を実行する場合問題が発生する環境 Docker for Macで実行しているnode 24のコンテナから、Mac側にあるソースコードをマウントしている場合 以下、この環境でのsvg2ttfの実行方法を説明するNode.js v24ではsvg2ttfの呼び出し方を工夫しなければならない こうする code:diff diff --git a/scripts/build-assets/iconfont-woff2.sh b/scripts/build-assets/iconfont-woff2.sh index 9b54b8047..3cbcbb186 100644 --- a/scripts/build-assets/iconfont-woff2.sh +++ b/scripts/build-assets/iconfont-woff2.sh @@ -2,7 +2,7 @@ set -eu readonly BASE_PATH="public/assets/fonts/AppIcons" -svg2ttf ${BASE_PATH}.svg ${BASE_PATH}.ttf +node --no-maglev ./node_modules/.bin/svg2ttf ${BASE_PATH}.svg ${BASE_PATH}.ttf echo "created: ${BASE_PATH}.ttf" cat ${BASE_PATH}.ttf | ttf2woff2 > ${BASE_PATH}.woff2--no-maglevはNODE_OPTIONSに付けられない $ NODE_OPTIONS=--no-maglev svg2ttf ${BASE_PATH}.svg ${BASE_PATH}.ttf 実行するとnode: --no-maglev is not allowed in NODE_OPTIONSというエラーで止まるどういう時に必要なのか kamonの中にある全てのSVGをwebフォント化する時に まずsvgicons2svgfontで1つのSVGにまとめて それをsvg2ttfでttfにす
1ヶ月前
記事のアイキャッチ画像
TurboFan - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
2025年の時点で、V8の中に4つあるJITコンパイラの4段階目 https://v8.dev/docs/turbofan 非常に高度な最適化を行うコンパイラ Maglevと比べると時間はかかるが、最高のパフォーマンスを発揮するコードを生成する
1ヶ月前
記事のアイキャッチ画像
Maglev - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
2025年の時点で、v8の中に4つあるJITコンパイラのうちの3つ目 Sparkplugよりも最適化したコードを、TurboFanよりも高速に生成するコンパイラ 詳細はV8の多段階コンパイル戦略 (2025年調べ)にまとめたshokai.iconhttps://v8.dev/blog/maglev 2023年12月の記事 Chrome 117から使われているNode 24でも使われているNode 22系では22.8.0までは有効だったが、22.9.0で無効化された https://github.com/nodejs/node/blob/main/doc/changelogs/CHANGELOG_V22.md#2024-09-17-version-2290-current-rafaelgss We have seen several crashes/unexpected JS behaviors with maglev on v22 (which ships V8 v12.4). The bugs lie in the codegen so it would be difficult for users to work around them or even figure out where the bugs are coming from. Some bugs are fixed in the upstream while some others probably remain. このMaglev無効化によってsvg2ttfやsvgicons2svgfontのクラッシュ問題が解決したようだshokai.icon 確定:Maglevを無効化したらNode.js v24でもsvg2ttfが実行できる
1ヶ月前
記事のアイキャッチ画像
V8の多段階コンパイル戦略 (2025年調べ) - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
https://gemini.google.com/u/shokai@notainc.com/app/5fd36c4a54e18d32 で調査したshokai.iconV8のJITコンパイラは、コードの使用頻度や内容に応じて、最適化の深さが異なる3つのコンパイラを使い分ける Tiered Compilationという方式 起動速度と最大性能を両立できるV8では4 tierになっている 1. Ignition インタプリタ兼プロファイラ まずバイトコードに変換して実行し、コードの実行情報を収集する 2. Sparkplug あまり最適化しないコンパイラ 高速に起動する 3. Maglev Sparkplugよりも最適化したコードを、TurboFanよりも高速に生成するコンパイラ 4. TurboFan 高度な最適化を行うコンパイラ 時間はかかるが、最高のパフォーマンスを発揮するコードを生成する降格もあるらしい TurboFanでコンパイルして実行してみたけど、やっぱりSparkplugにする、等 V8はまずIgnitionの作ったプロファイルに基づいて投機的に最適化してみるが、やっぱり実行時に変化する値があったりして、最適化できない事もある為
1ヶ月前
記事のアイキャッチ画像
svg2ttf - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
SVGフォントをttfにするツール https://www.npmjs.com/package/svg2ttf https://github.com/fontello/svg2ttf
1ヶ月前
記事のアイキャッチ画像
ttf2woff2 - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
ttfをwoff2に変換するツール https://www.npmjs.com/package/ttf2woff2 https://github.com/nfroidure/ttf2woff2
1ヶ月前
記事のアイキャッチ画像
svgicons2svgfont - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
icon fontを生成するためのnpmhttps://www.npmjs.com/package/svgicons2svgfonthttps://github.com/nfroidure/svgicons2svgfont
1ヶ月前
記事のアイキャッチ画像
kamon - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
https://www.npmjs.com/package/@notainc/kamon株式会社Helpfeelが作っているSVGアイコン素材集
1ヶ月前
記事のアイキャッチ画像
Heroku Release Phase - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
新しいリリースが作られ、デプロイされる直前のdyno内でコマンドを実行するHerokuの機能 https://devcenter.heroku.com/articles/release-phaseProcfileに書く code:Procfile release: npm run do-something-before-release web: npm start one-off dynoで実行される実行されるタイミング https://devcenter.heroku.com/articles/release-phase#when-does-the-release-command-runこのフェーズで実行されたコマンドがexit code 0以外で終了した場合、deployは中止される https://devcenter.heroku.com/articles/release-phase#release-command-failure productionでHTTP serverが起動するかどうか、Heroku Release Phaseで確認するのに使えるshokai.icon
2ヶ月前
記事のアイキャッチ画像
H20 - App boot timeout - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
アプリケーションの起動に75秒以上かかった場合に発生するHeroku Error Code https://devcenter.heroku.com/articles/error-codes#h20-app-boot-timeout
2ヶ月前
記事のアイキャッチ画像
H10 - App crashed - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
アプリケーションプロセスが動作中にクラッシュした場合に発行されるHeroku Error Codehttps://devcenter.heroku.com/articles/error-codes#h10-app-crashed動作開始前の起動中にクラッシュした場合も、H10が発火するherokuのapp起動検知 ランダムに変わる環境変数PORTを付けてプロセスを起動する appはPORTで指定された値でhttp serverを起動する 一定時間以内にPORTがlistenされなければ、起動失敗とみなす H20 - App boot timeout 動作開始前の起動中に、クラッシュしなくても、いつまでもHTTP listenしなければH20エラーになる調査・修正 起動時に発生する appプロセスが起動できていない 実行中に発生する appプロセスの実行時エラーをよく読む 何もしてないのに発生する heroku側でオーケストレーションが失敗している 祈るしかない
2ヶ月前
記事のアイキャッチ画像
productionでHTTP serverが起動するかどうか、Heroku Release Phaseで確認する - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
色々あってesbuildのpluginを自作したのだが、どうしても不安なのでチェック機構を追加したshokai.iconCIが通って、productionでのビルドが成功しても、サーバーが起動できなくてデプロイ失敗する事はありえる 実行時に必要なライブラリがdependenciesではなくdevDependenciesに入っている場合 import文での読み込みが失敗する 必要な環境変数がセットされていない場合 新機能が新たな環境変数を要求する事は、わりとよくある デプロイ先が複数あると設定漏れがありえる esbuildのpluginがimport pathの書き換えを失敗した場合 これもimport文の読み込みが失敗する Cosenseのserver sideのTypeScriptコンパイルをesbuildに移行したでshokai.iconが実装したpluginが壊れてないか確認できるデプロイ失敗すると 無惨にもH10 - App crashedになる 手動でheroku rollbackするまで、このままである解決方法:Heroku Release Phaseでsmoke testする 指定したコマンドがstatus 0以外でexitした場合、deployは中止される サーバーを一旦起動し、healthcheck用APIのGET /api/healthにアクセスして、status 200が返る事を確認する実装code:Procfile release: bash test/release-smoke-test.sh web: npm startcode:test/release-smoke-test.sh #!/usr/bin/env bash set -eo pipefail # エラーが発生したら即座に終了 echo "--- Starting Release Phase Smoke Test ---" echo "Attempting to boot the application..." npm start & SERVER_PID=$! sleep 15 # プロセスがまだ実行中か確認。起動時にクラッシュした場合、PIDは存在しない。 if ! kill -0 $SERVER_PID > /dev/null 2>&1; then echo "🔴 Se...
2ヶ月前
記事のアイキャッチ画像
typo集 - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
再現鳳凰 再現方法の事
2ヶ月前
記事のアイキャッチ画像
ultrathinkショートカットキー - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
素早く正確にultrathinkと入力したい事があるshokai.icon command + shift + uでultrathinkって入力できるようにしたultrathink ultrathinkAutomatorでクイックアクションを作成する 「新規書類」→「クイックアクション」 「ワークフローが受け取る現在の項目」を「入力なし」に変更 左のライブラリから「AppleScriptを実行」を探す scriptを編集 tell application "System Events" to keystroke "ultrathink" 保存する input ultrathinkという名前を付けるMacのキーボードショートカットに割り当てる システム設定 → キーボード → キーボードショートカット サービス → 一般の中にinput ultrathinkがある 右端をダブルクリックするとショートカットキーを割り当てできる command + shift + uを押す初回実行時に権限の許可を求められる システム環境設定 → プライバシーとセキュリティ → アクセシビリティ ChromeとiTermを許可した ultrathink いつでも素早くultrathinkcommand + shift + uが他のショートカットキーと衝突しているアプリもある slackとか 別のショートカットキーcommand + option + uにしたら、今度はchromeで衝突したりして、難しいあらゆるアプリで空いてるショートカットキーを求めて試行錯誤していたら、動かなくなってしまった アクション“AppleScriptを実行”でエラーが起きました: “System Eventsでエラーが起きました: Automator Workflow Runner (WorkflowServiceRunner, input ultrathink)にはキー操作の送信は許可されません。” システム環境設定 → プライバシーとセキュリティ → アクセシビリティで ChromeとiTermを許可しなおしたら解決した slackでultrathink入力する必要はないので一旦あきらめたshokai.iconChromeでcommand + option + uを連打するとシークレットウィンドウが開いてし
2ヶ月前
記事のアイキャッチ画像
ultrathink - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
Claude Codeの挙動を変えるキーワード https://www.anthropic.com/engineering/claude-code-best-practices見た感じ token数の上限を上げる よりお金がかかる タスクのstep間に* Thinking...のサブタスクが挟まって、精度が上がる こっちが重要だと思うshokai.icon 要所要所で使うと便利
2ヶ月前
記事のアイキャッチ画像
ライブラリ更新レビュー手順書 - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
AIコーディングエージェントにドキュメントとコードの読み合わせ機になってもらうプロンプト対象 DependabotやRenovate等が作ってくるnpm更新pull request 人間が作成した、作りかけのライブラリ更新pull request他の言語に対応する場合 このプロンプト内のpackage.jsonやnpmjs.comなどの文言を、Gemfileやrubygems.orgに書き直した方が、たぶんうまく動きますshokai.icon ただ、そのままでもRailsプロダクトのgem更新でうまく動いたという報告もありますcode:prompt(markdown) # ライブラリ更新のレビュー手順書 ライブラリを更新する変更をレビューし、必要に応じてバージョン間のmigrationや、breaking changeへの対応も行う為の手順を説明します。 ## 対象 - dependabotやrenovatebotが作成したライブラリ更新pull request - 人間が作成したライブラリ更新pull request ## 章立てと実行すべき作業 以下に示した形式に従って章立てし、レポートを作成してください。 外部のドキュメントを参照した場合はそのURLを明記してください。 ### 1. ライブラリの概要 ライブラリの概要を調査してください。 ライブラリ内READMEや公式サイトのドキュメントを確認して、何を実現するために、どのような用途で使われるライブラリなのかを報告してください。 ### 2. バージョン情報 package.jsonを読んで、このpull requestによって変更される前と後のバージョン情報を報告してください。 npmjs.comやgithubを調査し、major versionの更新の有無を報告してください。 このpull requestではpatch versionやminor versionを更新しているが、実はそれが最新版ではなく、major versionの更新があるかもしれません。 major version更新ではライブラリの名前が変更されたり、リポジトリがorganizationに移管されたりする事があります。 ### 3. ライブラリの依存関係 ライブラリの依存関係を確認してください。 package-lock.jsonを
2ヶ月前
記事のアイキャッチ画像
株式会社Helpfeel - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
https://corp.helpfeel.com2022年10月、NotaからHelpfeelに社名を変更した京都にあるGyazo、Helpfeel、Cosenseなどを作っている会社shokai.iconは横浜からリモートで働いている
2ヶ月前
記事のアイキャッチ画像
Claude Code Github ActionsはWebFetchとWebSearch権限を与えないとGithub外にアクセスできない - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
Claude Codeがデフォルトで作る設定ファイルでは権限足りてないshokai.icon ghは使えるけどWebFetchもWebSearchもcurlもwgetも使えない githubはghコマンドで見れるけど、github pages含む普通のwebサイトは見れない状態 しかしClaude Code Gihtub Actionsは権限が無くて実行できなかった作業を知識で取り繕って成功したフリをするので、なんかwebにアクセスできているように見えるアウトプット出してくるめちゃくちゃ問い詰めると白状する なかなか認めてくれないけど、npmのURL渡して最新バージョンを正確に答えさせたりすると認めてくれるhttps://docs.anthropic.com/ja/docs/claude-code/settings#claudeが利用可能なツール にあるツールを許可するcode:.github/workflows/claude.yml with: anthropic_api_key: ${{ secrets.ANTHROPIC_API_KEY }} allowed_tools: 'Agent,Bash,Edit,MultiEdit,WebFetch,WebSearch,Write' # これが必要これでClaude Code Github Actionsがwebページを読んでくれるAgentはデフォルトで有効な気がするので、書く必要無い気もするけどまあいいや 書かなかったらAgent使えないのかな? 書かないと有効にならないとしたら、Glob,Grep,LSも許可しないといけない事になるか?
2ヶ月前
記事のアイキャッチ画像
dependabotの作ったライブラリ更新プルリクをshokaiが重視している観点でDevinにレビューさせたり、リリースノート読ませてアプリ側のコードも修正させたりする - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
完成版のプロンプトはこのページの一番下にあります 社内のDevin.iconではPlaybook化して、session開始時にすぐ使えるようにしてあるDependabotはライブラリのバージョンだけを上げる雑なpull requestを凄い勢いで作って、プルリクリストを埋め尽くすので困るshokai.icon 概要欄はrelease noteとchangelogとcommitのリストだけ ライブラリ更新に伴うAPI変更の責任を持ってくれない ただpackage.jsonやGemfile内のバージョン番号を上げるだけ 複数のpull requestを一気に出してきて、1つmergeしたら他がcloseされて、また全然違うのがopenしたりする どれからやればいいのかわからないDevinを使えば release noteやchangelogから、Cosenseに影響のある重要な変更だけを抜き出して、まとめれる 情報が足りなければgithubまで確認に行ってくれる ライブラリ更新でAPIが変化したら、アプリケーションコードも更新してもらう よくわからんマイナーなライブラリでも、役割や依存関係を説明してくれる ライブラリ同士が依存し合っているので、奥の方にいるやつは私も名前を知らなかったりする 複数のpull requestを一気に出してこられても全部処理できるので、1つmergeして大量close & openされても大丈夫 AIエージェントに既存のツールをユーザーフレンドリーにしてもらうパターンchangelog読むのはわりと勉強になる事があるが、めんどくささもあるので良い感じにやりたいshokai.iconDependabot既に建てている6つのpull requestを対象に作業する https://github.com/nota/scrapbox/pull/7197 https://github.com/nota/scrapbox/pull/7198 https://github.com/nota/scrapbox/pull/7199 https://github.com/nota/scrapbox/pull/7200 https://github.com/nota/scrapbox/pull/7201 https://github.com/nota/scrapb
2ヶ月前
記事のアイキャッチ画像
画面外にいる他人のカーソルの表現 - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
画面外の情報を画面内に表示しているのに、「これは画面の外の情報なんだな」と認識させる文法を理解し、実装したshokai.icon同じページの別の箇所を見ている他の人が、画面外のどこにいるか知りたい事がある オンライン会議やwebinerでCosenseを画面共有していて 視聴者側 どのページを見ているかは左下にページタイトル出てるからわかるけど ページ内のどのへんなのか知りたい事がある 登壇者側 視聴者が画面外でコメント書いてそうな気配を察知したい画面外のShared Cursorを薄くして旗を外向きのヒゲのようにしたら、画面外に人がいる感じが出てきたshokai.icon ポイント あまり濃い色でくっきりはっきり表示する必要はない 邪魔になるし 存在感があればいい ラベルは読めなくてもいい。正確に知りたければそこまでスクロールすればいい 描画するshared cursorの数を30個までに制限した 多すぎても邪魔 さすがに1000個表示するとブラウザも重くなる UIに重なってもあまり邪魔に感じない薄さ 上側ではヒゲが上に伸びる。画面の上側の外にいる事を表現 ゲームのUIは画面外にあるObjectの位置をおおまかに教える手段として参考になった マリオカート8 / Splatoon3 距離の表現はしていない 赤甲羅はその方が緊張感があってよい、距離は音でなんとなくわかるというのもある 方向と、存在がわかるだけで十分 正確に知りたければ視点を向ければよい 画面端から少し離して、縁取りして、外側に向けたヒゲを伸ばすと、画面外にある感じがする この表現が理解できるのは漫画の吹き出しに慣れているせい? 矢印やピンに見えるからかもこれまでの試作 2019年 単純に上下端にぴったりくっつけたら、画面外にいる感じがしなかった 2022年 teramotodaiki.icon作 Scroll bar overlayに黒丸を表示する 正確に位置がわかる色々試してた時の考え だんだん正確に他人の位置を把握して、そこにスクロールして同じ画面を見よう、みたいな感じになっていった 画面上に表示している限り、画面外にいる感じがしない!なんでだ! 正確な座標で示そう 情報多すぎ 十人以上がワーッと同時編集している場合は情報過多になってしまう うるさすぎる 正確な情報を示すという方向性は無理だ 眼の
3ヶ月前
記事のアイキャッチ画像
Vimeoのサムネイル - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
ページ内の一番上にVimeoを埋め込んだ時に、ページタイトル画像に設定されるようにした動作確認用 https://vimeo.com/312946969?share=copyVimeoのoEmbed APIでサムネイル画像を取得して、そこにリダイレクトするサムネイル画像取得APIを作ったshokai.icon元々、2018年ごろに作ろうかと思っていたが めんどくさくて放置していた oEmbed APIのcache機構を作らないとVimeoに迷惑かけてしまう為 2023年にGyazo ifame playerを実装した時に、oEmbed API cacheを実装した Gyazoに限らずoEmbedのresponseを汎用的にcacheできる これ使えばいいじゃんという事ですぐ実装できたshokai.icon (2025/6/8)反映方法 最新のclient jsでページ編集する 新しく編集したページだけが反映される
3ヶ月前
記事のアイキャッチ画像
アイコン記法 - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
#アイコン[ページ名.icon]と書くと、shokai.iconのように文字と同じサイズで画像を埋め込めるCosenseの記法のこと [ページ名.icon*10]でshokai.icon*1010個表示される 自分のページを設定していると、ショートカットキーctrl-iで入力できる しかも連打可能 元々はtwiticonを作った時に、twitterユーザー名@shokaiをアイコンで埋め込むと便利だと思って実装したのがはじまり issueだけ立ててたら、hentekoさんが実装してくれた [@shokai]と書くとtwitterのアイコンが埋め込まれるtwitterアイコンを埋め込めるようになったら、行の末尾に書いて発言者を表すような使い方をし始めたtwitter使ってない人もいるし、人間以外も埋め込めたら面白い ページタイトル画像も埋め込めるようにしよう アイコン大量に書いて投票・強調表示みたいに使おう という事で今のアイコン記法になった
3ヶ月前
記事のアイキャッチ画像
AIに思考をトレースさせて、振る舞いをルール化するパターン - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
#AIエージェントにプログラミングさせる時のパターン人間がやった作業をAIコーディングエージェントに後から見せて、「私は何をしましたか?」「ここにある思想や判断基準を言語化して」と問いかけ、暗黙知を形式知(ドキュメント、ルール、プロンプト)にする作業パターンAIを思考の分析者や言語化パートナーとして使う 途中まで自分で作って、続きはAIエージェントに作ってもらうパターンは、AIを自分の「分身」として単純作業をスケールさせたが最終的なアウトプットは再利用可能なルール コードそのものではなく、将来の自分や他のメンバー、あるいは別のAIも使用できる1回本気でレビューすると、そこから手順書が生成できて、別の機会でも使い回せる。これがうまくハマるとめちゃくちゃ気持ちいいshokai.icon 眼の前の作業が、さらにAIに食わせてスケールさせる事を前提とした、もう一つ新しい意味を持った作業になる手順 1. まず人間が何らかの作業を完了させる 例えば ライブラリ更新のプルリクエストをレビューする 特定の思想に基づいてリファクタリングする 2. git diffやプルリクエストのURLをAIに示し、作業内容を認識させる 3. AIに「この作業の要点は何?」「どのような判断基準でレビューしたと思う?」と問いかける 4. AIが作業内容からルールや思想を抽出し、言語化する この段階では不正確なこともある 5. 人間がAIの言語化した内容を監修・修正し、再利用可能な「完成版プロンプト」や「コーディング規約」、「Playbook」といった形式知に落とし込む
3ヶ月前
記事のアイキャッチ画像
undo - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
処理をやりなおす事CosenseではMacならcmd-z、Windowsならctrl-z
3ヶ月前
記事のアイキャッチ画像
他に似たような修正をやるべき場所ある? - 橋本商会 - Scrapbox
橋本商会 - Scrapbox
途中まで自分で作って、続きはAIエージェントに作ってもらうパターンの1つ 特に既存プロダクトのbug修正やリファクタリングで有用フロー 1. まず、とにかく何らかの作業を完了させる 普通に手書きでプログラミングしても良い 2. AIコーディングエージェントに作業内容の意図を理解させる ここまで全てAIに作業させてきた場合 特にやる事はない そうでない場合 作業内容を認識する手順を指示する 「HEADのcommitを見て」「git diff main」など あるいはpull requestのURLを渡す 3. 「他に同じような変更するべき箇所はあるか?」とか質問すると 見つけてくれる そして、同じ様に修正してくれる効率が良い 新たにコードもドキュメントも細かい説明も渡さなくていい ただ一言で、分身したような作業効率になるshokai.icon AIで開発効率10倍って盛りすぎだろと思ってるけど この命令に関しては普通に2〜3倍とかになる 作業内容と既存コードの規模次第では、作業効率10倍もありえる例 assert.strictEqual(err instanceof Error, true);をassert.ok(err instanceof Error);に書き換えた後 他に似たような修正すべき場所ある?shokai.icon assert.strictEqual(Array.isArray(project.userDetails), true);をassert.ok(Array.isArray(project.userDetails));に書き換えましたClaude Code.icon UTF-8のCSVファイルをWindowsのExcelで開くと文字化けする事があるでも使った
3ヶ月前