はてなブックマーク

こちらの記事でClaude Code のタスク完了をスマホに通知できるようにしたのですが、適切なタイミングで通知を送ってくれず、困っていました。そんな中公式から /hooks という新機能が追加され、 「これを使ったら解決したよ」 というお話です。 TL;DR /hooksとは? Claude Codeが特定のタイミングで必ず実行するコマンドを設定しておける機能 現在は下記の4つのタイミングにコマンドを設定できるみたいです PreToolUse: Claude がツール パラメータを作成した後、ツール呼び出しを処理する前に実行されます。 PostToolUse:ツールが正常に完了するとすぐに実行されます。 Notification: Claude Code が通知を送信するときに実行されます。 Stop: Claude Code が応答を終了したときに実行されます。 詳しくはこちらの公式ド

はじめに 日々公開されるaiの最新論文、キャッチアップできていますか? 忙しい毎日の中で、「この論文、読まなきゃ...」 と思いながら、つい後回しにしてしまうことってありませんか? 最新の研究を追いかけたいけれど、英語を解読したり、数式を理解したりするのに時間がかかる。 結局、読む時間が取れずに気づけば新しい論文がどんどん溜まっていく...。 私自身そういう課題があったのでなんとかしたいと思い、「論文を読む」ではなく「論文を聞く」 という新しいインプット方法を試してみましたので共有の記事です。 そこで今回は、AIを活用して論文からPodcastを作成し要点だけを聞くという方法を試してみました! とりあえず、作ってみる まず、AIに論文を投げて会話形式のPodcastを作ってもらうことから始めました。 テーマとなる論文には以下のものを使わせていただきました A synthetic data appr

はじめに Docker ×ばつ VueやReactなどを使用して開発を行う方は多いかと思いますが、その際結構ハマるのがnode_modulesあたりではないでしょうか? 特にnode_modulesをバインドマウントすることによって、ホスト側のnode_modulesが空になったり色々とややこしいですよね。沢山の賛同の声ありがとうございます!そうですよね!(🤔) 実はDocker compose 2.22.0以降で使用可能となったCompose Watchの機能を使えば、ややこしいバインドマウントのことを考えなくても良くなったりします。 またnode_modulesに焦点を当てていますが、Compose Watchで以下のことが可能なので多くの人のためになるかと思います! ホスト側のファイルの変更をコンテナに反映させる package.jsonに変更が入ると自動で再buildしてくれる ぜひ

ローカルLLMの準備と使用 Ollamaのライブラリから好みのモデルを選びます。 ここではgemma2:9bモデルを例に説明します。 モデルのダウンロードと起動: 対話を終了するには、Ctrl + dか/byeコマンドを入力。 よく使うコマンド モデル一覧表示:ollama list モデルのダウンロードと起動:ollama run モデル名 モデルのダウンロードのみ:ollama pull モデル名 モデルの削除:ollama rm モデル名 VSCodeの準備 まだVSCodeを持っていない場合は、公式サイトからダウンロード。 VSCode拡張機能「Continue」の追加 VSCodeを開き、拡張機能タブへ。 「Continue」を検索。 Continue拡張機能をインストール。 VSCodeとOllamaの連携 VSCodeで「Select model」を選択。 「Add Mode

右2列(手段)については、どちらか一方しか用いないという縛りはもちろん考えません。 新めのやり方はそれはそれで特有の辛みも付随してきがちと考えます。 これらの手法の中には、それぞれの相性が非常によい、なんならお互いがお互いの成立前提になっているようなものもあると思います。 それらの組み合わせで、 ビジネスプロセス設計 <-> システム・コード設計 <-> チーム設計まで一気通貫した統一メンタルモデルで開発できる ビジネス変化に変幻自在に追随する アーキテクチャが可能になるのではないかと思い、実際に試してみようと思います。 また、上記それぞれの手法の個別の優れた解説記事は世に多いと思いますが、包括的な説明は多くは無さそうなので、それも試みられればと思います。 3 factor appがかなり似た概念であり、この紹介と言い換えても良いかと思います。 サンプルコード全体 何が嬉しいか ビジネス変

はじめに みなさん、ESLint の Flat Config 移行は進んでいますか? 先日、ESLint の Flat Config への移行に関するブログが公開されました。 ざっくり下記のような流れで移行していくとのことです。 ESLint v9 (今年末 ~ 来年の初めにリリース予定)で flat config がデフォルトになり、eslintrc は非推奨になる。 eslint v10 (2024年末 ~ 2025 年初頭にリリース予定)で eslintrc が削除される 徐々に Flat Config に移行していかなければ...ということで、以前、筆者が作成した vite-plugin-sri2 で使用している eslintrc を Flat Config に移行してみました。 本記事では移行する時に対応したことを列挙していきます。 移行前後の比較 先に移行前の eslintrc

アイデアが出ない... エンジニアの皆さんの中には、ポートフォリオを作成や個人開発をしてみたいけれど作りたいものがないという悩みを持っている人も多いと思います。 自分もよく新しいサービスのアイデアを考えることがあり、この悩みに共感できます。面白いサービスを企画する時にはとにかく多くのアイデアを出すことです。 そこでこの記事では個人開発のアイデアを大量に出す方法を紹介していきます。 孫正義さんの方法 SoftBankの創業者、孫正義氏は16歳の時に単身アメリカに留学し、1日24時間のうち睡眠にあてる6時間以外のすべての時間、食事中や移動中も教科書を開き勉強したそうです。 しかしそんな中、苦しい家計を助けるために発明をしようと思いつきます。特許を取りどこかの会社に売り込めば、ライセンスやロイヤルティーの形でキャッシュを得ることができます。 しかし一日18時間にも及ぶ勉強時間を削りたくないと考え

デモを試してみる 記事の中にデモがあったのでこれを試してみる。 デモサイトに遷移すると、Origin Private File System 上でDBの作成、テーブルの作成、レコードが追加される。(mydb.sqlite3 に出力されてる) 下記の拡張を使うことで、Origin Private File System の出力を確認することができるっぽいので見てみる。 拡張入れてから再度確認してみると、確かに mydb.sqlite3 が作られてる👀 次に作成されたDBの中身を SQL Viewer で見てみる。 ちゃんと登録されてる!これはすごい🎉 具体的にどういった場面で使えそうかパッと思いつかないけど、ざっくりできることは確認できたのでクローズする。

Robloxではじめてガチンコゲーム開発してみました。 その上で「Robloxすごいじゃん」って感じたことを振り返ります。 ちなみに作ったゲームはこちら↓、DEVLOXさん主催のRobloxのゲームコンテストで「HOUSE」をテーマにした作品募集で、作ってみたゲームです。 (よかったら遊んでみて下さいっ) すごいこと1:オンラインゲーム開発用のゲームエンジン Robloxの開発環境である「Roblox Studio」は、「オンラインゲーム開発環境(ゲーム開発エンジン)」です。 これ、Robloxがオンゲーなので当たり前なことのようですが、オンラインゲーム開発用ゲームエンジン、って僕の知る限り他にないんですよね。 オンラインゲーム(Server/Clientモデル)で作る前提となっているため、オンラインゲーム制作のための様々な要素がすでに組み込まれてます。 それらが、簡単なScript記述で

はじめに 最近オブジェクト指向とデザインパターンについて学び始めたので、勉強しつつ記事にまとめていきたいと思います。 初回はSOLID原則についてです。SOLID原則はオブジェクト指向プログラミングにおいて、開発者にとって読みやすく、メンテナンスが可能なプログラムを作成しやすくするために考えられたルールです。 この記事では、オブジェクト指向プログラミングの重要な開発原則であるSOLID原則について皆さんが想像しやすいマリオのクラス実装を例に解説していきます。 1. S (Single Responsibility):単一責任の原則 クラスは単一の責任を持つべきと言う原則です。 ここでの責任というのは、オブジェクトが持っている機能のことです。 一つのクラスができる機能(責任)が複数あると、クラス内部の関数が強い結合を起こす可能性が高ま理望ましくありません。 次のマリオクラスを見てみましょう。

初めに 新しいサービスや製品を成功に導くのに必要なものは、何よりも「アイデア」です。 それが個人のスタートアップであれ、巨大企業の新規事業であれ、斬新なアイデアは市場を変革し、新しい価値を生み出す重要な要素となります。しかし、独自のアイデアを次々と生み出すことは、多くの開発者にとって大きな課題となっています。 特にアイデアを1人で考えていても煮詰まってしまい、似たようなアイデアが出がちになってしまい困っている人が多いのではないでしょうか? この問題の原因の一つとして「頭の中の固定観念に縛られている」というものが考えられます。 そんな中、SoftBankの創業者であり、多数の起業家を育ててきた孫正義さんは、その卓越したアイデア発想法で業界をリードし続けています。彼の成功の裏には、どのような考え方や手法が隠されているのでしょうか?この記事では、孫正義氏のアイデア発想の過程を詳細に探りアイデア発

はじめに 先日、Bun 1.0 がリリースされました🎉 これまで Bun の動向を追えていなかったのですが、ドキュメントを眺めていたところ、Bun + Vite でビルドする方法が記載されていたので試してみました。 また、Yarn + Vite で作成したプロジェクトとの比較もします。

はじめに Webフロントエンド開発の学習において、多くの人がまず最初にconsole.logの使い方を学びます。 console.logはデバッグの際に非常に便利なツールですが、JavaScriptにはこれ以外にも多彩なデバッグ機能が存在します。 通常のconsole.logだけでなく、さまざまなconsoleのメソッドを活用することで、デバッグ作業をより効率的に、かつ迅速に進めることができます。 console.log ブラウザの開発者ツールやNode.jsのコンソール上に、渡された引数を表示します

世界には多くの成功したインディーハッカーがいますが、成功するための画一的な方法はなく、誰もが独自の方法を持っています。 しかしその中にはいくつかの共通した習慣があり、それらを知ることは必ずあなたの役に立つでしょう。 そこで、この記事では世界の成功したインディーハッカーたちから学ぶべき5つの習慣を分析しています。 1.プロダクトの着想からリリースまでが早い 成功した多くのインディーハッカーは、プロダクトのリリースが早く、頻繁に発表しています。そうすることで多くのフィードバックを得ることができ、反省から学ぶことができます。 あなたのプロダクトが初期の段階では、特にこれを意識しMVPが迅速にリリースすることをお勧めします。 例 Samy DindaneはHypefuryの基本的な機能を3日で構築しました。 Sahil LavingiaはGumroadのMVPを週末で構築しました。 Pieter

個人開発をしているエンジニアにとって、成功した個人開発者(Indie Hacker)について調べることは多くの学びがあります。 この記事では、世界の有名な個人開発者がどのような考えを持ってプロダクトを立ち上げ、ユーザーと収入を得たのかを紹介します。 Pieter Levels(ピーターレべルズ) Pieter Levelsは、Nomad Listを個人開発したエンジニアとして有名です。Nomad Listは、世界中の都市をリモートワーカーやデジタルノマドにとっての魅力度でランク付けするウェブサイトです。 ピーターのアプローチ 一人でビジネスを成長させるのは非常に難しいです。個人開発者は不確実なものと向き合わなければならず、プロジェクトを立ち上げる際には時間や資金などのリソースが不足していることがよくあります。ピーターは以下の3点に焦点を当ててそのリソース不足を回避しました。 スピード:彼は

きっかけ 最近は色んな技術にあっちこっちに手を出してしまい浅い人間になってしまいそうで怖く感じていました。ある日ふと暇つぶしにYoutubeを開いていたら希望に満ち溢れたおじさんのサムネを見て興味のまま見てみました。 内容 サンドボックス上だったらI/Oプリミティブが操作できる メモリ管理が楽 Roc言語専用のエディタも制作している 参照先の情報が分かりやすいようなものにしたい(画像はゲームを作っているとき) 質問 elm言語に触発されている JSの過小評価されている部分を取り入れたい 公式ドキュメントを軽くまとめ はじめに 高速で使いやすく機能的な言語になることを目指している 絶賛開発中 ウェブサイトは言語が言って水準まで達したら洗練する Rocはmachineコード、WebAssemblyにコンパイルされる 最終的には高品質のサーバー、コマンドライン アプリケーション、グラフィカル ネ

はじめに CloudFront + S3 でホスティングしている Web ページで、S3にデプロイした時に CloudFront のキャッシュが効いて変更が反映されない事象がありました。CloudFront のキャッシュは画面上からでも削除できますが、毎回手動で対応する方法だと削除するのを忘れそうな気がするので、デプロイのフローの中でキャッシュの削除までできるようにします。 修正前の GitHub Actions のワークフロー やっていることはかなりシンプルで、ビルドとS3へのデプロイをしているだけです。 name: Deploy on: push env: AWS_ROLE_ARN: arn:aws:iam::${{secrets.AWS_ACCOUNT_ID}}:role/XXX permissions: id-token: write contents: read jobs: bu

目的 Windows10 で使っている GitHub 用の秘密鍵を、その Windows 下にある WSL2(ubuntu)からも使えるようにすること。 解決方法(結論) windows 側にある秘密鍵を wsl から ssh-add 秘密鍵 すれば目的がかなう。 しかし、ssh-add 秘密鍵のためには chmod 600 秘密鍵 としてパーミッションを変更することが必要。 さらに、そのchmodを成功させるためには、 自動マウントするWindowsのファイル(/mnt/c/ 以下のファイル)に「メタデータを追加する」ことが必要。メタデータ追加は、/etc/wsl.configの[automount]セクション下のoptionsキーに、値のひとつとしてmetadataを追加することで行う(書き換え直後は要再起動)。 上記のことを、試行錯誤の経過とともに詳述していく。 秘密鍵を ssh-a

はじめに 過去の記事『淡路島発着の高速バス検索サービス「GO TO AWAJI」をリリースした話』で Python を用いて個人開発サービスのバックエンドを実装したことを紹介しました。 勉強のためにこのサービスのバックエンドの一部を Rust で書き換えたので、本記事で紹介させて頂きます。 クローラーサービス 今回 Python から Rust に書き換えを行ったのはクローラーと呼んでいるサービスです。 これは GCP の Cloud Run 上で動いており、 Cloud Scheduler から定期的に実行されて以下のことを行っています。 クローラーサービスのシステム構成 各バス会社の新着情報をスクレイピングする 取得した新着情報を DB (SQLite) に保存されている過去の新着情報と比較する 新しい新着情報が存在する場合DBに保存し、SendGrid で筆者宛にメールで通知する な

はじめに ちょくちょく Terraform を触る機会が増えた @kt15 です。最近、E2E テストフレームワークを調査する機会がありました。E2E テストフレームワークは Playwright 以外にも Cypress などいくつかありますが、個人的には Playwright が1番しっくりきました。今回は Playwright の導入から GitHub Actions 上で実行するところまでを試したので、やったことを備忘録的に残しておこうと思います。 Playwrightとは E2E テストを自動化するフレームワークです。 個人的にはこの辺りが魅力的だと感じました。 クロスブラウザ(WebKit も含む)をサポートしている モバイルデバイスをエミュレート(ビューポートなど)してテストできる 構築していく! テスト用にサンプルアプリを作る 今回は Vite と React でサンプルア

はじめに Makefileについてわかりやすい解説が少なかったのでまとめて見ました。 Makefile初心者が初心者向けに書いたものになります。 主にGNU makeの記述を訳しています。不自然な点、間違いがあったらご指摘いただければ幸いです。 Makeを理解するには、コンパイルへの理解が重要です。 コンパイルについては別記事でまとめています。よければどうぞ。 【gccの概要】コンパイルについてまとめ。 基本 主にMakefileはmakeにプログラムのコンパイルおよびリンク方法を指示します。(応用することで他の使い方もできます) Makefileに依存関係(プログラムの前提条件となるファイルとの親子関係)を記述しておくと、各ファイルの更新を取得して必要なものだけをコンパイルしてくれるようになります。 Makefileに含まれる情報は主に3つです。 変数の定義(変数、自動変数、暗黙の変数、

はじめに 先日 Chromium ベースのブラウザでも structuredClone がサポートされましたね🎉 既に Firefox でもサポートされているので、いよいよ使えそうかな?と思ったのですが、まだ型が追加されていませんでした。 structuredClone の型は lib.dom.d.ts に追加されるだろうという目星はつけたのですが、 ふと「lib.dom.d.ts はどのように更新されているんだろう」と疑問に思い、少し流れを追ってみました。 同じように気になった人の少しでも参考になれば...と思ったので、記事に残しておこうと思います。 間違っているところがあれば、優しくコメントいただけると助かります🙏 lib.dom.tsとは TypeScript をインストールした時に付属している型定義ファイルです。 先日公開された、TypeScript 4.6 RC の lib.

概要 GitHub上にコミットが行なわれたタイミングで静的ファイル化したStorybookを閲覧できるようにする方法をまとめました。 これを行なうことでコードレビュー時にUIの変更点を確認がやりやすくなります。 Storybook公式 で紹介されている方法です。 今回は実際に自分が 友人 と開発・運用しているサービス LGTMeow にこれらの設定を追加したので、実際の設定内容を踏まえて解説します。 対象読者 GitHub上でコードレビューを用いた開発手法を実践している人(もしくは実践したいと思っている人) Storybookを利用したことがある人 筆者のバックグラウンド エンジニア歴はもうすぐ8年程です。 バックエンドやクラウドがメインでしたが、ここ1年半ほどはフロントエンドメインです。 業務でも個人開発でもNext.jsを利用しています。 ちなみに最初にこの方法を知ったのは READY

Overview og_image_wrirter というOG画像を生成できるRustのライブラリを作りました。 このライブラリはwasmを通してどこでも動きます。WebでもEdgeでも動きます。 wasiでも動くので、試せてないですがFastlyのlucetなどのruntimeでも動くはずです。 先日Cloudflare Workersで実際に動かす記事を書きました。 APIはCSS likeなスタイリングをサポートしており、比較的直感的にスタイリングできます。(現状、完全に仕様に準拠しているわけではないです、、) 今回は主にRustでの使い方について紹介します。 また、現状最低限の文字列操作と画像操作、単純なレイアウトしかサポートしていないので他にも欲しい機能などあればissueを投げていただけるととても嬉しいです。 使い方 背景画像に対して描画する 以下のような背景画像に対して 中央

はじめに 普段の業務では、主に Vue.js や Rails を書いている @kt15 です。最近、Vitest が爆速らしいという情報を耳にしました。早速試そうとしたのですが、せっかくなら筆者がよく使う Vue.js と組み合わせて使ってみようと思ったので、まずは環境構築からやっていきます。本記事では、Vue.js + Vitest でテストを実行できる環境を作るところまでをゴールとします。 Vitestとは? Vitest は Vite ベースのユニットテストフレームワークです。 特徴はやはり爆速なところでしょうか。速度面についてはこちらの記事で触れられており、 Jest との比較もあって分かりやすかったです。 Given Jest's massive adoption, Vitest provides a compatible API that allows you to use i

概要 Next.jsにGoogle Tag Manager(以降はGTMと記載します)、Google Analytics 4(以降はGA4記載します)を連携させる手順をまとめた記事です。 対象読者 以下の条件を満たす人を対象読者とします。 Next.js(TypeScript)で開発をしている GA4でアクセス解析をやりたい 前提条件 Next.jsで運用済のアプリケーションが存在する GA4のプロパティを作成してある 具体的な手順 ここからは具体的な手順になります。 私が友人と開発している、猫のLGTM画像を共有できるサービス「LGTMeow」に設定した例を元に解説します。 GTMの設定 GTMのアカウントを作成 以下の情報を入力します。 アカウント名 コンテナ名 ターゲット プラットフォーム アカウント名はわかりやすい名前であれば問題ありません。 コンテナ名は対象サイトのドメイン名を入

概要 タイトルの通りですが、自作したReactComponentをnpm packageとして公開するまでの手順を記載します。 private packageなのに公開という日本語を使っているのは少々違和感がありますが、GitHub Organization内で共通利用できる状態にすると考えていただければ問題ありません。 この記事で説明すること GitHub OrganizationのGitHub Packagesにprivate npm packageを公開する手順を説明 公開されたprivate npm packageをVercel、GitHub Actionsで利用する方法を説明 GitHub Packagesへの公開をGitHub Actionsで行なう方法を説明 プロジェクトの作成手順とサンプルコード 以下は具体的な手順になります。 下記は最終的なプロジェクト構造になります。 こ

フロントエンド Next.js + バックエンド Rails のセットアップ手順を整理します。 1. リポジトリの作成 GitHub 上に新規リポジトリを作成し、ローカルにクローンします。