爆安VPS + OpenClawにより月額2ドルでパーソナルアシスタントを召喚する | パソコンのブログ
※ 2026年2月時点での情報です。各々で確認してください。 名前に「JP」と入っているもの、たとえば「BudgetKVMJPVF-2」などが日本リージョンのものです。 どちらのプランもIPv4が1つ、IPv6の/64が付いてきます。OpenClawを動かすだけなら4GBプランで十分でしょう。年額$25って月額だと約$2ですからね。意味分からん安さです。 実際にGreenCloud で運用してみて 実際にGreenCloudの東京リージョンでOpenClawを動かしていますが、普通に快適です。NodeJS を入れてOpenClawのGatewayを立ち上げるだけなので、セットアップも特に詰まるところはありませんでした。 （デフォルトだとrootユーザーログインでセキュリティがザルなので、ちゃんとユーザー作って root ログイン禁止した上で ufw も設定しましょうね。） OpenClaw
UIデザインに特化！ 数学的な処理で一貫性のあるカラーパレットを生成する初のカラーツール -Harmonizer
UIデザインに特化され、アクセシブルでライトモードでもダークモードでも各レベルのすべてのカラーが同じ彩度とコントラストを保ち、数学的な処理で一貫性のあるカラーパレットを生成する初のカラーツールを紹介します。 カラーパレットを生成するツールはたくさんありますが、UIデザインに特化されたものとなるとかなり限られます。さらにTailwinds CSS用のコードをエクスポートしたり、Figmaプラグインも用意された優れものです。 Harmonizer 優れたカラーパレットを生成するツールは数多く存在しますが、これらの多くはUIデザインを考慮して作成されていないことがよくあります。 レベルの不一致: 同じレベルの色でも明度や彩度が異なります。 コントラストの推測: テキストの色はUI要素の背景に基づいて手動で調整する必要があります。 テーマのミラーリング: ライトモードとダークモードにはカスタムマッ
「Claude × Draw.io × スイムレーン」で業務フロー図のたたきを瞬時に作るプロンプト - Qiita
はじめに ご無沙汰しております。Cursor→Claudeとコスって開発PMを日々やっている中で、何を発信してよいやら迷走した1ヶ月でしたが復活しました。結局のところ、Tipsとプロンプトかなあというところに思い至りまして、そのまま使えずとも、「こんなことに使えるんだあ」という気付きになれば幸いです。 Claudeと言いつつ、ChatGPTでもGeminiでも行けるっちゃいけるんですが、Opusがやっぱり優秀なのでClaudeでやっています。 概要：ワークフロー図づくりで“詰む”前に── 「フロー図描いてって軽く言われたけど、そもそも何を聞けばいいんや……」――そんな若手の悲鳴を（また）聞きまして、プロンプトで一撃解決できんかと作ってみました。 「プロンプトはそのまんま載せてます。コピペして即生成AIに突っ込めば動くはず。 こんな感じのフローが簡単に作れるはずです 目次 なんでプロンプト？
なぜあなたは作り置きができないのか。私の週末作り置きシステムを伝える
私は料理が得意である。 スズキのパイ包み焼きソースショロンを作ることもできるし、江戸前鮨を握ることもできる。 しかし、私の一番の得意領域は、週末の料理の作り置きである。 買い出しは含まずに、1h～2hで家中のタッパーを埋め尽くすほどの作り置き（5～6品）を用意することができるし、 それによって、朝食の用意や弁当の用意が劇的にラクになり、あわただしい平日の朝を、比較的ゆったりと過ごすことができている。 思いっきり過言すれば、作り置きには料理と人生のすべてが詰まっている。 家庭料理であるし、特別なものではないから敷居は低い一方で、品質・速度・品数の三つを高めていくことを意識しながら取り組めば劇的な料理スキル向上に加え、仕事全般に生かしうる思考スキルの向上が期待できる。何よりも楽しい。 具体的には以下のスキルが、週末を重ねるたびに向上していくのを実感できるはずである ・限定された時間で品質高く食
Gemini CLI の簡単チュートリアル
この記事はほぼすべて Gemini CLI に書いてみてもらいました。ただし、ファクトチェック＆手修正済みです。もし間違えていたらこっそり教えてください。さいごにとおまけは人力です。 Gemini CLI チュートリアル tl;dr コマンドラインで対話的に使えるオープンソースの AI エージェント。 npx https://github.com/google-gemini/gemini-cli ですぐに利用開始。 @ でローカルファイルやディレクトリを AI のコンテキストに追加。 ! でシェルコマンドを直接実行、シェルモードへの切り替えも可能。 GEMINI.md ファイルでプロジェクト毎のカスタム指示を AI に記憶させる。 Google 検索との連携、安全なサンドボックスでの実行、ツールの自作など高い拡張性。 1. はじめに Gemini CLI へようこそ！ このドキュメントは、
書き捨てではなく継続開発可能なコードを Cursor Agent で書くために意識していること | DevelopersIO
また、Web 開発のチュートリアルには以下の記載があります。 すべてを自動化する必要はありません。システムが複雑になりすぎた場合は、Tab キーと Cmd+K キーを使って、より精密な編集を行ってください。 カーソルは、自動操縦ではなく副操縦士として機能した時に最も威力を発揮します。カーソルは、自分の意思決定に取って代わるものではなく、改善するために活用しましょう。 Cursor Agent にコーディングを一任するのであれば(いわゆる Vibe Coding)、Rules を整備したり、プロンプトエンジニアリングを頑張る必要があると考えていましたが、Cursor 公式の見解として、遂行したいタスクに応じて適切にツールを使い分けるべきという落ち着いた見解があったのは少し安心しました。 一方で Cursor Tab に頼りすぎでせっかくの Agent モードを使いこなせていないのは勿体無いの
中古マンション購入で失敗したくないと思ったらまず読むnote｜2LDK
なおマジレスすると「通勤時間から検索」については、指定駅から近い順に最大50駅までしか検索結果に表示されないゴミカス機能だから、特に駅の数が多い東京だと全然役に立たないよ。 https://t.co/VLXtNfNl0n pic.twitter.com/uzf7YD6Bsf — 中央区上落合 (@Kamiochiai_Chuo) February 26, 2025 マンション購入において新築と中古は気にするポイントやスピード感が全く異なります。一人一人丁寧に手取り足取り教えてくれて皆平等に抽選が行われる新築に比べて、中古は早いもの勝ちですし仲介業者の考え方や動き方を理解しておかないと普通に損します。人生が変わります。 一連の私のXの発信に対する引用リポストの内容が大変有益で一次取得の方に伝えるべきと思いましたので、一部ポストを参照させていただきつつ中古マンション購入にあたってのポイントをま
初心者向けJWT講座：JSON Web Tokenを使った認証の仕組み
JWTって何？ JWTはJSON Web Tokenの略です。 まずは完成されたJWTを見てみましょう。 eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c この文字列がJWTです。 JWTの特徴を見てみる よく見ると、この文字列は 「.」(ドット) で区切られています。 JWTは次の3つのパーツから構成されています。 ヘッダ（Header） ペイロード（Payload） 署名（Signature） ただの文字列じゃない？ JWTは単なる文字列ではありません。 実は、この「ヘッダ」や「ペイロード」をデコードすると、JSON形式のデータ
getServerSidePropsがわかれば'use client'がわかる
React Server Components (以下、RSC) は、Next.js App Router で先行導入されてから１年半以上の時間を掛けたのち、2024/12/05 に React 19 の一部としてリリースされました。 RSC は、コードを「サーバー」/「クライアント」の2つの環境に分割することが特徴であり、関連していくつかのマーカーが登場しています。 import 'client-only' import 'server-only' 'use client' 'use server' 巷では、これらのマーカーの働きについて、理解できず混乱する人が多く見受けられます。 🤔 'use server' を付けたら Server Component になると思ってた… 正解: Server Component には使わない。Server Function (Server Act
これだけは知っておきたい最新モダンCSSの書き方（2024年夏版） | PhotoshopVIP
このブックマーク可能なガイドの目的は、最近CSSに追加されたばかりの新機能や使い方を分かりやすくまとめることです。 「CSSって、こんなこともできるの?!」と思ってしまうほど、多くの人が知らない新しいテクニックが中心です。 また、たとえ知っていたとしてもよく理解できておらず、「それって何?」「なんで気にする必要があるの？」「サンプルコードがあると助かるんだけど、」そんな人におすすめしたい記事となっています。 周りがあっと驚くテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 これだけは知っておきたい最新モダンCSS（2024年春版） 最近CSSに追加された新機能のリストを提供するブックマーク可能なガイド。このリストに明確な基準はないが、すべてかなり新しいものであり、多くの人がこれらのことを知らないと思うものをピックアップ。 参考記事: What You Need t
Astro+WP APIでPageSpeedInsightsで簡単に100点取る
前書き WordPressで稼働しているリニューアル案件で、Astroを使って実装を行った。 ライブラリにサイトが完全に依存するデメリットもあるものの、 Astroを使用した理由としては、コンポーネント指向による保守性拡張性の観点からと、サイトの最適化の観点から採用した。 結果普通のレンタルサーバーでPageSpeedInsightsでほぼ100点満点。 SPの点数 PCの点数 使用感と感想 正直これまでのタスクランナーやモジュールバンドラーなどを使ったHTML開発は若干レガシー化している感があった。 そんな中、まさに現時点でのWeb開発ベストプラクティスを詰め込み、ほぼ何も考えずに最適化されたサイトを実装できる非常にすぐれたライブラリだと感じる。 また、これまでPageSpeedInsigthsの点数を上げようと思ったら、構築後、PageSpeedInsightsの助言に一つ一つ従いなが
macOS のファイルを断捨離して 60 GB 空ける
日々生活するにつれゴミが溜まるのは日常も PC も大差ないのですが，特に macOS は不要なキャッシュファイルが溜まりやすいと感じます．ディスク容量が逼迫し続け 10 GB を切り，いよいよ Photoshop も開けなくなってきたので，不要なファイルを 60 GB 分削除しました．以下メモです． 便利コマンド # ルートから 5 個下の階層までに存在する，100 MB 以上のファイルを検索 sudo du -x -m -d 5 / | awk '$1 >= 100{print}' # 現在のディレクトリ以下に存在する，50 MB 以上のファイルを検索 du -x -m | awk '$1 >= 50{print}' # ディレクトリを削除する rm -rf
スムーススクロールの実装例 – TAKLOG
スムーススクロールの実装メモです。このブログの見出しのページリンクやトップへ戻るボタンで使われている実装と同じものになります。 そもそもスムーススクロールは必要か？という議論は置いておいて、現在ではCSSのみでスムーススクロールの実装はできますが、当ブログではそれを使用せずにJSで実装を行っています。 スムーススクロールのコードと実装例スムーススクロールの実装例
Macで使用中のアプリのショートカットキーを一覧表示してくれるユーティリティ「KeyCluCask」が、macOSのキーボードショートカットの表示に対応。
Macで使用中のアプリのショートカットキーを一覧表示してくれるユーティリティ「KeyCluCask」が、macOSのキーボードショートカットの表示に対応しています。詳細は以下から。 KeyCluCask(KeyClu)はKeyCueやCheatSheetが有料/開発終了したことから、Travian Games GmbHでソフトウェアエンジニアを務めるSergi Tatarenkov(Anze)さんがオープンソースで開発を開始したショートカットキーのチートシートアプリで、Macで使用中のアプリのショートカットキーの一覧を表示してくれる機能がありますが、このKeyCluCaskがmacOSのキーボードショートカットの表示に対応しています。 added possibility to list macOS Keyboard Shortcuts (Integrations section) リリース
Q&A形式で分かる 量子コンピューターの 基礎知識
Fundamentals of Quantum Computing Q&A形式で分かる 量子コンピューターの 基礎知識 次世代コンピューティング技術として注目される量子コンピューター。原理や実装方式など、量子コンピューター関連記事を読む上でのガイドとなる基礎知識をQ&A形式でまとめた。（文：宇津木健 監修：藤井啓祐＝大阪大学教授） by MIT Technology Review Japan2022.12.15 35 15 Q：量子コンピューターとはどんなものか？ A：量子力学の原理に基づいた新しいコンピューター 量子コンピューターは「量子力学特有の物理状態を積極的に用いて高速計算を実現するコンピューター」と言える。量子力学特有の物理状態とは、たとえば原子や電子、光子などのミクロな世界で見られる「量子重ね合わせ状態」や「量子もつれ状態」という、量子力学によって説明される状態のことを指す。こ
あっ、そうだ！モダンCSSをまとめておこう
2023年もCSSの進化がすごかったですね！ その進化を2024年でも生かしていけるように、今回まとめておいていつでも参照できるように記事を書こうと思いました。 お読みいただけると幸いです。 一緒に2024年もスタートダッシュで走り抜けましょう。 まず、はじめに この記事では、最近登場した、エキサイティングで、アクロバティックでファンタジックなインパクトのある機能をピックアップして紹介したいと思います。 CSSの多彩な新機能を広く紹介することで、読者がこれらに触れる機会を持てるように努めています。 特に興味を引く機能があれば、他の媒体を通じて更に詳しく掘り下げることをお勧めします。 コンテナクエリ スタイルクエリ :has()セレクタ :nth-child()の「of S」構文 text-wrap: balance initial-letter ダイナミックビューポート単位 広色域のカラー
【Mac/Win対応】DockerでPHPローカル開発環境の最強構築方法
こんにちは、タカフです。 Dockerでローカルマシンに開発環境を構築する時の悩み・やりたいことって色々ありますよね。 例えば僕の場合はこんな感じです。 コマンド一発でローカルマシンにLAMP開発環境を作りたい おなじみのポート番号アクセスはやめてドメインアクセスにしたい ローカル開発環境とてSSLで開発を進めたい DocumentRootはプロジェクト配下のサブディレクトリ(public/htdocs等)にしたい PHPのXdebugは使えるようにしたい（もちろんWebもCliも） MySQLのDBデータはホスト側にもって永続化させたい といったところでしょうか。 もしあなたがDockerでLinux・Apache・PHP・MySQL開発環境を作るにあたって、この中に該当するものがあったなら本記事の内容はお役に立てるかもしれません。 今回全て解決して、その構築方法を記しました。 コマンド
CSSで句読点括弧のカーニングができるようになるぞ！ 日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能のまとめ
CSSのこの機能を待っていた人も多いと思います！ CSSで、句読点括弧のカーニングが自動でできたり、フレーズの途中で改行されないようにしたり、日本語と英語が混在したテキストでスペーシングが自動調整されたり、10px以下でも指定サイズ通りに表示されたりなど、日本語が読みやすくなる最近サポートされた・近日サポートされるCSSの機能を紹介します。 Introducing four new international features in CSS by Jack J 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに word-break: auto-phrase;によるフレーズで自動改行 text-autospaceによる文字間のスペーシング text-spacing-trimによる句読
CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hypervelocity Engineering - beyond Vibe Coding -
