はてなブックマーク

を作りました @pokutuna/mcp-chrome-tabs デモ AppleScript を使っている都合上 macOS でのみ動きます。 なぜ作ったか 既に LLM にブラウザを操作させる技術は色々ある。browser-use、playwright-mcp、mcp-chrome などなど。 これらの Tool, MCP は便利だけど、様々なツールが入っていてコンテキストへの圧迫が大きく、Chrome の debugging port を開けたり、普段のユーザディレクトリは使えなかったり、ブリッジとなるブラウザ拡張入れたりなど、まあまあめんどく、普段遣いしたいかというと否である。なのでタスクに応じて MCP サーバーのセットを切り替えて暮らしている。 ただ今開いているページを LLM に読ませたい 普段はブラウザ操作をしたいわけではなく、今見ているページを LLM に読ませたいことが

この記事は はてなエンジニアアドベントカレンダー 2024 5 日目の記事です。 昨日は id:susisu さんの Data types à la carte in TypeScript でした。 本人が「アクセス増えたと思ったら別の記事で、全然読まれてない...」と言っていたので「いきなりフランス語で難しそうやからね」と伝えました。本文は日本語なので、みなさんも読んで下さい。 今日は最近見て面白かったコードの紹介です。 ChatGPT が流行って以来、アプリでストリームのレスポンスをよく見るようになりました。 LLM によるテキスト生成はわりと時間がかかる処理で、もしすべて生成し終えてからレスポンスするとユーザーを待たせてしまうからでしょう。テキストがちょっとずつ表示される UI は昔からあるものですが、LLM を使ったアプリケーションが出てきて以来、演出としてではなく実用としてよく見

はてな 生成AI×新規事業 の挑戦 〜生成AIを学びながら技術とチームを磨いた事業立ち上げの道のり〜 - connpass speakerdeck.com 何の因果か新規事業立ち上げ & AI 担当みたいな仕事をしております。 話題で分類するとなるとトピックモデルか? と思うけど、Vertex AI の Embedding API に task_type="CLUSTERING" を見つけ、クラスタリングでそこそこのものが出たのでそれで行くことに。改善の余地は様々ありますがとにかく HDBSCAN の性質に助けられた機能だったなと思います。 密度ベースのクラスタリング 異なる密度レベルのクラスタ得られる クラスタ形状の変化に柔軟 階層構造得られる ハイパラ調整がほぼ要らない 都合が良すぎる。 メイン図 手法の図

去年の9月末に買いました。 Series 9 41mm シルバー GPS 発表を見るたびに欲しいなと思うものの、冷静に考えると要らないよな、という結論に行き着くので買ってなかった。常にスマホ持ってるでしょ。欲しい → 要らん → 欲しい というのを年1でやりつつ、ついに買ってしまった。 買ってからは便利で、風呂と充電以外は常に着けている。 生活をシャキッとさせたい フルリモートなので家から出る頻度が減って、体力も落ちだんだん太ってきた。運動習慣を付けたいけど、無策では続けられないので記録を付けるおもちゃが欲しい。他にも睡眠や心拍など Watch で体をモニタリングして遊びたい。自転車に乗っていた頃は記録に楽しさがあった。サイコンつけるし心拍計も胸に巻いてた。変化が分かると成長が見えるし満足できる。 TODO リストをもっと生活に密着させる狙いもある。Things を愛用していたけど、ここ何

これは はてなエンジニアアドベントカレンダー2023 2日目の記事です。 はてなエンジニア Advent Calendar 2023 - hatena Developer Blog はてなエンジニアのカレンダー | Advent Calendar 2023 - Qiita トップバッターは緊張するけど、順番が回ってくるまで長い間ソワソワするのも嫌、という理由で例年2日目を狙うようにしている id:pokutuna です。今年も成功しました。 観光名所とは 目を閉じれば思い出す、あのコード... あの Issue... あなたが Web 系のエンジニアであれ、趣味で開発している方であれ、必要に応じてライブラリやフレームワークのコードを読むのはよくあることでしょう。公開の場で開発されているソフトウェアは、ソースコードだけでなく、開発コミュニティでの議論やバグ報告なども見ることができます。 リポ

やったー Google Cloud の主催する Google Cloud Innovators Gym Japan (G.I.G) というプログラムに参加して取りました。 Google Cloud を利用する企業を対象とした招待制のプログラムで、参加すると関連する Coursera コースへのアクセス、試験を受けるためのサポート、Google Cloud エンジニアの方によるハンズオンや質問できる機会が提供されます。 バッジ 以下の資格が対象。今回のプログラムは4月中頃に始まり、7月中頃までに Coursera のコースを終え合格報告をするスケジュール。お話を頂いて良い機会なのでチームの若者を誘って参加しました。 Professional Cloud Architect Professional Cloud Developer Professional Data Engineer poku

GCP 版 Dataform がついに GA になりましたね。同時に定期実行の仕組みも出て、一通りの機能が揃った感がある。いまこそ買収以前の SaaS 版(Legacy 版)から GCP 版に移行する時!! しかし GitHub リポジトリと連携する場合、登場人物が多くて難しくなっていると思う。 特に GCP に馴染みがなかったりデータ分析がメインの人は困りそう。公式ドキュメントには step by step で書いてあるものの、なぜ必要なのか分からないまま設定することになる。 なので全体像を図にしたり補足するという趣旨のエントリです。 Dataform とは Dataform とは...という話はしません。公式ドキュメントや世間のブログ記事を読もう。 Dataform を使うと、テーブル同士の依存に基づいて順番に SQL を実行してデータパイプラインを作ったり、依存関係を可視化したり、デ

この記事は はてなエンジニア Advent Calendar 2022 2日目の記事です。 みなさんは Slack の RSS アプリ を使っていますか? /feed subscribe FEED_URL で RSS や Atom フィードをチャンネルに流すことができます。 Slack に RSS フィードを追加する | Slack これを使って各種リリースノートやニュースサイトの新着をいろんなチャンネルに流しています。Slack をお使いの皆様もきっとそうしているでしょう。 フィードによって技術の最前線をキャッチアップでき、供給された話題は参加者同士の活発な議論を産む。学習とコラボレーションが同時に促進される素晴らしい機能と言えますね。 . . . 本当か??? 例えば BigQuery のリリースノートを流すとこうなる!! 激流 これ 5 記事あるわけじゃないからな。 フィード的には

Google Cloud で何かアプリケーションを動かしたい時、いつも App Engine (GAE) を第一の選択肢として挙げています。 なのにみ〜んな Cloud Run に行ってしまう。なぜなのか?? 確かに Cloud Run のほうが新しくて公式に露出が多いし、GAE はこういうランディングページからの言及も消えているので無理もない。Google Cloud 的にもあんまり使って欲しくない雰囲気が漂っている。 cloud.google.com App Engine は GCP 最初期からあるサービスで今年で 14 年目になるらしい。 当時学生だった僕はすげーのが出たぞと聞いて GAE を触っていた記憶がある。その頃は Google App Engine 単体で出ていて、他のサービスが続いて Google Cloud Platform になったような気がする1。 そんな歴史あるサ

Google Cloud で運用しているサービスの Cloud Storage 費用が10月の料金改定から爆増していた。 Cloud Storage 費用(オレンジ部分)が増加 料金改定のタイミングで Cloud Storage のマルチリージョンからマルチリージョン内のリージョンへの転送費用が無料じゃなくなっていた。 Docker イメージの転送費用によるものであれば、Container Registry から Artifact Registry へ移行することでこの費用は無にできる。 cloud.google.com 無料条件がなくなった Google Cloud 内の下り（外向き）ネットワーク費用を見る。 Internet Archive に残っている過去の料金表(2022-05-01)には以下の記述があった。 マルチリージョンにある Cloud Storage バケットからある 1

前回の記事では --project を毎回渡せという主張を展開していたけど切り替える話。 blog.pokutuna.com gcloud コマンドには構成を管理するサブコマンド gcloud config configurations がある。管理するプロジェクトが多くない場合は、カレントプロジェクトを設定しつつ切り替える運用でもよいのではないでしょうか。 また、複数の Google アカウントを切り替える場合も configuration を作って切り替えるのがいい。カレントプロジェクトは設定しない派だけど、個人の @gmail.com と勤務先の Google Workspace のログイン状態を切り替えるのに使ってる。 ちなみに configurations を切り替えても ADC はそのままで、最後に gcloud auth application-default login し

gcloud CLI にカレントプロジェクトをなるべく持たせないようにして暮らしている。 gcloud はデフォルトでカレントプロジェクトのリソースを操作する。操作するプロジェクトが 1 つなら良いけど、仕事でも遊びでもいくつもの GCP プロジェクトを扱っているので、うっかり異なるプロジェクトのリソースを操作してしまったり、意図しないプロジェクトに費用が計上されてしまうのが嫌だから。 カレントプロジェクトは設定しないようにして、gcloud を使う時は都度 --project=PROJECT_ID で渡すようにしている。 # カレントプロジェクトを確認するには以下のコマンドなど $ gcloud config get-value project $ gcloud config list # カレントプロジェクトの設定を消す $ gcloud config unset project ロー

メンバーやサービスアカウントの権限を考える際に、ロールの持つ権限を比較したいことがしばしばある。そういう時は gcloud と diff を使うことで比較できるという素朴なテク。 ロールと権限 ロール(role)は roles/{roleName}, roles/{service}.{roleName} などで表され、許可されている操作を表す権限(permission)の集合である。 例えば BigQuery データ閲覧者 (roles/bigquery.dataViewer) は、以下の permission を持つ。 bigquery.datasets.get bigquery.datasets.getIamPolicy bigquery.models.export bigquery.models.getData bigquery.models.getMetadata bigquery

この記事ははてなエンジニアのカレンダー | Advent Calendar 2021 - Qiita 2日目の記事です。 最近、データパイプラインの整備や営業チームの人力混じりの運用フローを機械化するなどの業務改善に取り組んでいます。 その過程で、運用ドキュメントを読んだりヒアリングして図を描くことがよくあります。 描いた図をもとに「この流れであってますか?」と確認したり「ここ手間結構かかってそうですが困ってませんか?」とコミュニケーションをします。暗黙的な業務の流れが明確になるだけでなく、改善点の発見にも繋がります。 ひととおり改善タスクが終わった後にも図を最新にします。ドキュメントと併せて成果物とします。 どんなデータがあってどのようにビジネスに使われているか、データがどのように取得&保存されているかを残しておくのは今後のデータ活用や改善のためにも必要です。 俺はそんな個々の業務のデー

公式ドキュメントで説明されているけど、同僚に何度か説明する機会があったり、作る必要のないサービスアカウントキーを目にすることも多いのでまとめておく。 認証情報が登場しないアプリケーションコード 例えば以下のコードで Secret Manager に保存したトークンを取得することができる。SecretManagerServiceClient にサービスアカウントキーを渡さずとも動作する。 const {SecretManagerServiceClient} = require('@google-cloud/secret-manager'); const client = new SecretManagerServiceClient(); (async () => { const [secret] = await client.accessSecretVersion({ name: 'proj

公式のガイドに従ってやればよい Migrating to Manifest V3 - Chrome Developers background pages が Service Worker に置き換えられた 各 chrome API の Promise 化 リモートのコードが実行できなくなる browser_action と page_action の統合 executeScript の変更 あたりが大きい cocopy の場合 blog.pokutuna.com browser_action と page_action の統合 Action API unification - Migrating to Manifest V3 - Chrome Developers 上記のように manifest を修正し、chrome.browserAction などの呼び出しを chrome.acti

App Engine や Cloud Function や Firebase プロジェクトのデプロイ時などでしばしばやる。 TypeScirpt などトランスパイルが必要な言語をデプロイする際に、実行に必要ないファイルをたくさんアップロードしていることがある。 .gcloudignore で全部 ignore して、必要な特定のファイルやディレクトリだけ指定して反映すると良い。 # ignore all * # upload list !. !package.json !yarn.lock !build/** gcloud topic gcloudignore  |  Cloud SDK のドキュメント  |  Google Cloud . を追加しないとカレントディレクトリのファイルがアップロードされないことがあるようだ(Cloud Functions で確認)。この設定で意図通り .g

この記事は はてなエンジニア Advent Calendar 2020 - Qiita の23日目の記事です。 qiita.com 昨日は id:Krouton さんの 30日でできる! OS自作入門 を読むために nasm_of_nask というコンパイラを作った話 - KRAZY感情STYLE でした。よかったですね。 コードでコピーするココピーです 今日はちょっと前に作ったブラウザ拡張、cocopy を紹介します。 chrome.google.com しゅぴっと拡張を開いてコピーするフォーマットを選択できます。 このアニメーションはコピー機がブーンとスキャンする感じをイメージしています。 利用者が js を書いてフォーマットを追加できます。 コードからは URL、タイトル、選択中のテキスト、ページの HTML にアクセスできます。 Markdown, Scrapbox HTML, は

こういう見た目のやつ loading 僕の Next.js で作ったポートフォリオサイト https://pokutuna.com/ では、blog エントリ情報や github の活動は、Cloud Firestore から読み込んで表示していて、その読み込み中の表示を作る話です。 よくあるのは、くるくる回るローディングインジケーター わかりやすいけど、ロード完了後に大きくレイアウトが変わってしまう。ガタッと見た目が変わるのは WebVitals の Cumulative Layout Shift 的にも良くない。 ガタツキを減らすには実際のコンテンツと高さのプレースホルダーを置いておくのが良くて、適当に領域を確保するのが簡単だけど、記事であることは分かりたい。しかし画像でプレースホルダを作ると追加の画像読み込みが発生してしまうし(SVG で埋め込んでおく手もある)、記事の見た目を変えた

まとめ BuildKit 使ってなくても COMPOSE_DOCKER_CLI_BUILD=1 を使う キャッシュが効いてない CI をいじっていてタイトルの問題に気づいたのが発端。 Cloud Build でキャッシュを使いつつ、ビルドとテストを実行するためにこうしていた。 1 前回のビルドのアプリケーションイメージを docker pull する 2 docker build --cache-from でキャッシュを利用しつつイメージを作る 3 docker-compose run で他のミドルウェア等を起動しつつイメージのテストを実行 4 テストが通れば 2 で作ったイメージを push うまくいくと思っていたけど、2 と 3 で都度アプリケーションイメージがビルドされてしまう。なんでだろなあ、と調べていた。 試していると、COPY を機に docker build と docker

いつも TypeScript 書いてるんですよ、そしたら function の前にコメント書くじゃないですか、/** ... */ で書いてるけど正直のところ中身は勘で書いている。@returns や @deprecated とかよく見るし、雰囲気で使っているけど、本来なんのタグが使えるかあんまり誰も分かってない。補完のときに表示されてラッキーぐらいの感覚。でも謎のタグを使ってるの見たら気になるし、今 TypeDoc でドキュメント生成していなくても、標準的なフォーマットがあるなら従っておきたいじゃん。そして TSDoc でインターネットを検索しても、こう書けばいいみたいな記事がすぐ見つからねぇ〜〜 まだ標準は無い リポジトリ見に行く microsoft/tsdoc: A doc comment standard for the TypeScript language ふむふむ、現行の多く

こういうやつ Google DataStudio1 でこういう表示をしたい場合は多い。目標の達成割合とか、アプリケーションログから何らかのアクションを取ったユーザの割合を出したりだとか。とりあえず使うだけなら簡単に使える DataStudio だけど、これはシンプルな表示のわりに妙なテクが必要なので書いておく。 サンプルデータとして、GitHub のリポジトリとライセンスの情報が入った公開データセットを使う、なぜならスキーマがめちゃ簡単だから2。bigquery-public-data.github_repos.licenses repo_name と license だけ ここでは、MIT ライセンスを応援しているとして、全体に対する MIT ライセンスの割合を表示したダッシュボードを作りたいとする。表で割合を出すのは簡単。一方スコアカードにするのは難しい、license="mit" み

GAE 便利さに気づいてからめちゃくちゃ気に入っている。 最近開発が活発な Cloud Run や、Firebase のバックエンド実行環境でもある Cloud Functions が話題に登りがちだけど、2nd gen になってからの GAE はめちゃめちゃいいです。 トラフィック分割などの機能も揃っているしハマりも少ないので Function レベルのコードを動かしたいときでも GAE を選びたくなることがある。GCP ドキュメントのサーバーレス オプションの選択フローチャートでも、おおよそ GAE に行き着くんじゃないかな。 最近個人ポートフォリオサイトを Next.js & GAE Standard Env で作ったので、その話を書く。 当初は単にこのブログに AdSense を貼りたかったんだけど、独自ドメインにしたので、まずルートドメインの AdSense 審査を通す必要ができ

Cloud Functions でしばしば見るエラー、Firebase Functions も中身は同じなので起きる。 なにやらちゃんと動いていないぞ... と Stackdriver Logging を見にいくと、こういうエラーメッセージが書かれている。 Error: Could not load the default credentials. Browse to https://cloud.google.com/docs/authentication/getting-started for more information. at GoogleAuth.getApplicationDefaultAsync (/srv/functions/node_modules/google-auth-library/build/src/auth/googleauth.js:160:19) at p

gts は Google の TypeScirpt style guide と Linter 設定が入った npm package。 googleapis 以下などの Google が公開している各種 TypeScirpt プロジェクトで使われている。 github.com TypeScript は大変気に入っているけど、新たにプロジェクトを作ってストレスなく開発するまで少し手間がある。 tsc --init して tsconfig.json を書き換えたり以前のプロジェクトからコピペしたり npm run build でコンパイルするように package.json の scripts を追加したり Linter や Formatter の設定も面倒くさい gts ならこれだけで十分設定されたプロジェクトができあがる。 $ npm init $ npm install --save-de

このまえ Nature Remo を買ったので作った、似たようなことは既に誰もがやっているけど 構成 Cloud Scheduler -> Cloud Pub/Sub -> Cloud Functions Cloud Scheduler が定期的(ここでは5分おき)に Pub/Sub へメッセージを投げる Pub/Sub を Subscribe した Cloud Functions がメッセージが来るたびに起動する Nature Remo Cloud API の値を整形して Mackerel へ投げる 使い方はリポジトリを見てください github.com 無料枠に余裕で収まるけど、この中では Cloud Scheduler の無料枠が厳しいかな、3 つを超えると課金される。Cloud Functions で外部アクセスをするには請求先アカウントの設定が必要だけど、まず請求されることはなか