AI Webcam - ゆーすけべー日記
AI Webcamについて紹介します。 AI Webcam AI WebcamはWebcamでとった写真についてAIが音声で返答してくれるというものです。AIのキャラクターというか音声は指定可能です。また文章のプロンプトでどのように返答するかも指定できます。 例えば、アメリカの若い女性「レイチェル」に自分の容姿を褒めてもらった時の大爆笑映像はこちらです。 元ネタ 実は元ネタがあって、Wes Bosというポドキャスターがやってたのを真似てます。コードも公開されているので、それを使わせてもらってます。みなさんもできます。 YAPCでLT あまりにも面白いので、先日のYAPC::HiroshimaのLTでこれを応用したものをデモしました。レイチェルだけを流しても尺が余るしインパクトにかけるので、YAPCっぽく「dankogai」さんと「papix」をAIにしました。 UIはこんな感じです。 例え
Cloudflareに入社しました - ゆーすけべー日記
本日4/17日(月)付でCloudflareに入社しました。ロールはDeveloper Advocate、日本法人との契約ですが、日本に限りません。入社へのプロセスではUS、ヨーロッパのメンバーとやりとりをして、入社後のボスはUSになります。「Developer Advocate」は日本はもちろんアジアでは初、Cloudflareの中でも新設される部です。扱うのは主にWorkers製品で、Honoなどのフレームワークやユースケースを示すアプリケーションの開発と、製品と開発者をつなぐことをやります。 経緯 Hono 僕がユーザーとしてCloudflare Workersに触れたのは、一昨年、2021年の10月です。ブログ記事を書いています。 Cloudflare Workers 面白い - ゆーすけべー日記 そして、同年の12月には、Cloudflare Workers向けのフレームワーク「
1KBのWebフレームワークをつくる - ゆーすけべー日記
1KBのWebフレームワークをつくりました。 名前は「Pico」。 minifyしてビルドした模様。 コードはこれだけ。依存なし。ほんとにこれだけです。 Cloudflare WorkersとDenoで動きます。 今回はこのPicoというフレームワーク、 それに必要不可欠なURLPattern、実装について、 そして僕がつくっているもう一つのフレームワークHonoとの関係などを紹介します。 Hello World text/plainでレスポンスを返す、“Hello World"相当のコードは4行で書けます。 import { Pico } from "@picojs/pico"; const app = new Pico(); app.get("/", (c) => c.text("Hello Pico!")); export default app;
500点出す！ - ゆーすけべー日記
「Web Speed Hackathon 2022」という「非常に重たいWebアプリをチューニングして、いかに高速にするかを競う競技」があります。 リモート参加で11月1日から27日まで開催されています。 ここで言う「高速」とはCore Web Vitalsのスコアが高いことを言い、Lighthouseのスコアをベースにした500点満点の争いです。 ISUCONのフロントエンド版ですね。 以前にも同じ課題で「学生向け」と「社内（サイバーエージェント）向け」が行われたらしく、まだ500点を出した人はいません。 そこで僕は「満点を出したい」と思い、初日から、いやむしろフライングしていたからその前から頑張ってきました。 そして、先日（17日）、ついに500点満点を出しました！ たぶん、レギュレーションはクリアしている、はずです（もし違反してたらすいません…）。 自動で行われる「Visual Re
How I/we got 2k stars - ゆーすけべー日記
Honoという僕が作っているWebフレームワークのGitHubスター数が2,000に迫ってきた。これまで作ってきたOSSのソフトウェアでは最高で revealgo の221、次点で gh-markdown-preview の134だ。それが一気に2,000である。 もちろん、スターの数がソフトウェアの良し悪しを決めるものではない。 それに2,000はとりわけ多いわけではない。 でも、以前の自分には遥か彼方に見えていた数を獲得できたのは、とても嬉しいことだ。 去年12月から作り始めて9ヶ月間、552コミット。 今や使ってくれる人も増えた。 cdnjs のAPI Serverのバックエンドにも使われているし、 HonoをきっかけにGitHubスポンサーをしてくれている企業や人も現れている。 なにより、いろんなことを勉強させてもらった。 今回はHonoというプロダクトがどうやって2,000のスタ
Cloudflare R2もいいぞ！ - ゆーすけべー日記
CloudflareがSQLデータベースD1をアナウンスして衝撃を受けましたが、「R2もいいぞ！」というお話。 R2はS3みたいなストレージエンジンで、Sの前「R」、3の前の「2」ともじってて、AWS対抗といえます。で、ちょうどD1がアナウンスされた昨日にベータオープンしました。 A New Hope for Object Storage: R2 enters open beta 「ただのストレージだろ」とたかをくくってたんですが、使ってみてだいぶよいです。 先にまとめると以下の3つのことが言えます。 安い DX（Developer Experience）がよい Cloudflareの他の製品を組み合わせるとヤバい 詳しく紹介します。 作ったアプリ R2を評価するために、以前S3をバックエンドにして作ったアプリケーションをR2に置き換えるというのをやりました。そのアプリケーションについては
Cloudflare WorkersでちゃんとしたWebを作る - ゆーすけべー日記
最近は Cloudflare Workers ばっかりいじってて、フレームワークまで作ってるのですが、これ、ちゃんとやればそれなりの立派な Web サイトができるので、紹介します。 できたサイト 「家系ラーメン食べたい！」というサイトを作りました。 管理者の僕が家系ラーメンを登録できて、トップでは一覧で見れて、 詳細ページに行くと写真と紹介文が見れます。 質素に見えますが、 コンテンツ（ラーメン屋）をどんどん追加できる。 プロパティを追加することも可能。 画像はリサイズされる。 速い。 OGP ちゃんと設定している。 favicon.icon もやってる。 と、「ちゃんと」してます。そう、ちゃんとしてます。 では、どう作っていくか。 Cloudflare Workers Cloudflare Workers 、そのユースケースについて。 CDN のエッジで実行される、ということでスクリプト
macOSのショートカットとS3とCloudflare WorkersでGyazoができる - ゆーすけべー日記
ブログに画像を貼るのに、保存してリサイズして名前変えて、アップロードして… という作業がめんどくさい。 なので、Gyazo を使っていた。でも、Gyazo を使い続けるのもなんかアレなんで、代替の手段を考えていた。 macOS Monterey に「ショートカット」が入ったので Automator より触りやすいと試していたら、いつの間にか「Gyazo もどき」ができた。 バックエンドに S3、フロントの API サーバー に Cloudflare Workers を使った。 これ、なかなか面白いので紹介する。 デモ 右上のメニューバーより起動できる。 macOS のショートカット 最初に macOS の「ショートカット」アプリをどのように構成しているかを説明する。以下の通りである。 インタラクティブにスクリーンショットを撮る スクリーンショットを1000 x 自動高さ設定 のサイズにサイ
Cloudflare Workers 面白い - ゆーすけべー日記
追記 Cloudflare Workers向けのWebフレームワークを作っているので、そちらを是非チェックしてみてください！ honojs/hono: Ultrafast web framework for Cloudflare Workers. Fast, but not only fast. Cloudflare Workers が面白い。面白いので、いくつか簡単なアプリを作ってみた。例えば、そのひとつが Slack Bot で「yusukebe++」とかやるとインクリメントされるやつ。 今回は Cloudflare Workers の面白さについて解説する。より興味のある方がいれば、上記のコードを参考にしてもらうといいだろう。 Cloudflare Workers とは？ Cloudflare の CDN エッジでスクリプトが動くのが Cloudflare Workers。いわゆる
Next.js+microCMS+Vercel面白い - ゆーすけべー日記
Next.js と microCMS と Vercel が面白い。それぞれ面白いし、組み合わせるとさらに面白い。なにせ、メディアサイトがデプロイも含めて 2 時間で出来る。 Next.js + microCMS + Vercel すごいな。メディアサイト（中身スッカスカだけど）がものの 2 時間でデプロイまでできた。 https://twitter.com/yusukebe/status/1435708770705760256 ということで、メディアサイトを作りながら、Next.js と microCMS と Vercel の面白さをまとめる。 2 時間で作るメディアサイト 例として「ラーメンまとめ！」というメディアサイトを作ってみる。このサイトには ラーメン屋 ラーメン屋のまとめ記事 の 2 つの種類のコンテンツがある。「ラーメン屋」が「名前」「場所」「ラーメン写真」というプロパティを持
Fastlyを検討する - ゆーすけべー日記
Fastly の導入を検討している。検討しているだけで、導入していないので、参考にならないかもしれないし、間違っているかもしれないが、メモ。 動機 Varnish を使っていて、最初は Varnish の冗長化をしたい！だった。 まあそうなるよねえ。で、Fastly！となった。 ちなみに、Varnish を使ってる理由としては、以前も Jamstack を検討する - ゆーすけべー日記 Varnish で Stale-While-Revalidate を実現する - ゆーすけべー日記 で触れたとおり、 なるべく手間手前で、なるべく少ない箇所でキャッシュしたいからである。 Fastly でできること・したいこと Fastly でできることはたくさんあるので、その中でもしたいことを列挙。リバースプロキシ、ロードバランサの機能も含むのが便利。特に、パスごとに制御できる。なので、とあるパスはキャッ
Cloudflare面白い - ゆーすけべー日記
最近 Cloudflare を使ってみてるのだが面白い。このブログも現在は Cloudflare から配信している。Cloudflare、CDN としても CDN 以外の部分でも面白い。今日はそんな Cloudflare の面白い点について紹介してみる。 簡単 まずはこれ。他のクラウドサービスと比べても、簡単に設定ができる。ダッシュボードも簡潔でわかりやすい。 特に導入するのが簡単だ。以下がその手順である。 ドメインのレジストラで、DNS サーバーを Cloudflare のものにする 利用したいホストの A レコードの IP をオリジンに向ける Cloudflare にプロキシさせる たったこれだけで、あなたのサイトは Cloudflare の CDN を経由することになるのだ！！ AWS の CloudFront や Google の Cloud CDN なんかはだいぶ煩雑でガチっぽい
VarnishでStale-While-Revalidateを実現する - ゆーすけべー日記
Jamstackを「愚直に」実現しようと、静的HTMLを毎回一気に生成すると「問題」が出てくる。 その解決方法の一つとして、Next.jsの ISR（Incremental Static Regeneration） というテクニックが注目されている。これは Stale-While-Revalidate（以後SwR） と呼ばれる「キャッシュ戦略」に基づいている。 このSwRはISRだけに限った話ではない。昔からあるより大きい問題に対する答えである。 注目したいのは、HTTPヘッダCache-Controlの拡張にstale-while-revalidateがあることだ。このヘッダを利用することで上記したJamstackの問題を「ISR以外の方法」で解決することが出来る。ISRを運用に乗せるにはエッジサーバーにVercelを使うしかないが、SwRヘッダに対応しているCDNを利用することで、IS
Jamstackを検討する - ゆーすけべー日記
Jamstackを既存のシステムに導入するかを検討する機会があった。 紆余曲折したものの、未だに暫定的な結論しか出ていない。 とはいえ、わりと頑張った。 今回は Jamstackとはなんぞや？ Jamstackの特徴 Jamstackの技術 弱みを解決する策 実際に検討した話 を雑に紹介したい。 個人的なメモなので、間違っているところがあるのを考慮願いたい。 Jamstackとは？ JamstackのJamは以下の頭文字をとっている。 JavaScript APIs Markup まず、フロントエンドを持たないAPI群がある。APIはブラウザのJavaScriptから叩かれるかもしれないし、後述するようなSSG =「Static Site Generator」のフレームワークが叩くかも知れない。どちらにせよユーザーに配信されるのはSSGが出力した、Markup。つまりプリレンダリングされた
Core Web Vitalsを上げる - ゆーすけべー日記
「Core Web Vitalsを上げる」機会があったので、Core Web Vitalsについてまとめてみる。 これから書くことは今現在、僕が把握してることで、間違っていることがあると思うけど、そこはご愛嬌でお願いします。 1. Web Vitalsとは？ Web VitalsというのはGoogleが提唱したUXの指標である。GoogleはWebに対するUXのことを「ページエクスペリエンス」と呼んでいる。「Core Web Vitals」ってのは「Web Vitals」のサブセットになっているので、まずはそこを理解しておく必要がある。 なぜWeb Vitals？ 最近、Webのフロントのことについて調べることが多いのだが、やたらとこの「Web Vitals」もしくは「Core Web Vitals」という言葉に出会う。 「フロントの体験」としてWeb Vitalsが重要だからであると同時
Twitter以前のWebの言葉たち - ゆーすけべー日記
ぼくは大昔からインターネットを使っている。 だからインターネットで起こったことはたいてい知っている。 これは誇れることではないかもしれないけど、 最近は「インターネット老人会」なんて呼ばれていて、 少し救われた気分になっている。 誰でも同じ境遇の仲間をみつけるとホッとするものだ。 とりわけ僕が知っているのはWebについてだ。 具体的にはBlogとかWeb日記が好きだった。主に技術的な事柄だ。 Webという言葉はとても広い意味なのでふさわしくないかもしれないが、 ぼくはWebという言葉の響きがとても好きなので、使わせてもらう。 ここに書いていることはぼくのとても個人的な文章だから、 何をどう表現しても自由だと思う。 ぼくは2007年4月からTwitterをはじめた。 2007年というとだいぶ昔のことだと世の中の人はいうかもしれない。 でも、ぼくにとって2007年は最近のことな気がする。 だか
過去画像をInternet Archiveで取り戻せ - ゆーすけべー日記
年単位前から気になっていたことで、 この日記で掲載している画像の大半がみれないというものがあった。 というのも一時期、画像ファイルをすべてyusukebe.typepad.jpで配信していたんだけど、 今ではtypepad.jpは息をしていないし、 記憶が定かではないけど、 Typepadで管理していたブログもろとも削除してしまったかもしれないのです。。。 とにもかくにも、画像は全部404 Not Foundだし、元画像は手元にない！ で、どうしょうと考えた結果、 Internet Archiveから頑張ってひっぱってくる作戦を思いついた。 試しに、今ではNot Foundになってしまっているimgタグのsrc属性値である画像URLのひとつを Internet Archiveのフォームに打ち込んだら、 ちゃんと残っているじゃないか！ 全部試さずとも、だいたい残っているっぽい。 ってことで、
君はPornhubを知っているか - ゆーすけべー日記
Pornhubをご存知だろうか。 答えは当然Yesだろう。 ところがその本当の実態について我々は理解しているだろうか。 WikipediaのPornhubページには興味深い事柄が書いてある。 YouTubeに次ぐ世界第2位の動画共有サイト 360度動画を提供しており、PlayStation VRで視聴できる 上下運動で発電できるリストバンドを発明した 宇宙空間でポルノを撮影すると発表した VPNHubというVPNサービスを開始した これらのいくつかを恥ずかしながら私は知らなかった。 この恥ずかしさがモチベーションとなり、私はPornhubのポルノ以外のことを調べた。 出てくるものはアダルトコンテンツばかりだったが、 以下の3つのページに出会うことができた。 Pornhub Insights :: Digging deep into the data Interview with a Por
ゆーすけべー日記
ユーザーからのPOST等された入力値の妥当性をチェックする Validation をどこでやるか問題が個人的にありまして〜、DBを使わないケースならばいわゆるFomrValidator::*を使ってControllerでやればいいのですが、Modelを経由するようなアプリだとControllerだけじゃ不安よねぇ〜、Modelだけ使う時もあるし、Model単体のテストで再現出来ないよね〜なんて思ってます。で、実際の実装をControllerではFormValidator::Lite、Modelの一部にData::Validatorを使っているのですが、なんかコレも効率悪い感じしてたんで、ちょいと実験的に理想の一つを実装してみました。 こんな条件です。 エラーメッセージを簡単に設定したいのでValidationモジュールにはFormValidator::Liteを使う 色々錯誤していたらOR
ゆーすけべー日記
WEB+DB PRESS plusのムック本として Perl徹底攻略 Web開発の基礎徹底攻略 の2冊がいつもお世話になっている技術評論社さんから来週火曜日23日あたりに出ます。どちらとも以前WEB+DB PRESSに寄稿した僕の記事が一部もしくはだいぶ修正して掲載されています。著者として献本いただき昨日手に入れましたよ。 僕が関係している記事は Perl徹底攻略 だと、 Part.3 応用と実践 第1章「YouTube Data APIから学ぶWeb APIのキホン」 Pert.6 小飼弾のPerlハッカーに逢いたい♥「和田 裕介（ゆーすけべー）」 Web開発の基礎徹底攻略 は 一般記事「Twitter時代の技術者コミュニケーション術」 です。特に「YouTube Data APIから学ぶWeb APIのキホン」の場合、初出の記事ではTwitter Search APIを題材にしていたの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
