馬場吉成 工業製造業系ライター。かつては光ファイバーや半導体関係の装置の設計とかをやっていたが、今はライターや飲食店経営。学生時代はプロボクサーだったことも。100kmぐらいなら自分の足で走ります。
「Web Speed Hackathon 2022」という「非常に重たいWebアプリをチューニングして、いかに高速にするかを競う競技」があります。 リモート参加で11月1日から27日まで開催されています。 ここで言う「高速」とはCore Web Vitalsのスコアが高いことを言い、Lighthouseのスコアをベースにした500点満点の争いです。 ISUCONのフロントエンド版ですね。 以前にも同じ課題で「学生向け」と「社内(サイバーエージェント)向け」が行われたらしく、まだ500点を出した人はいません。 そこで僕は「満点を出したい」と思い、初日から、いやむしろフライングしていたからその前から頑張ってきました。 そして、先日(17日)、ついに500点満点を出しました! たぶん、レギュレーションはクリアしている、はずです(もし違反してたらすいません…)。 自動で行われる「Visual Re
「日本人」を理由にしたくないし、「コードは全世界共通語」なのは分かっているけど、自分が日本人で日本語を母国語としていることはOSSにおいて不利になる。 この2年間のHonoの開発をしてきた経験で分かったことだ。 そこに目を瞑ってはいけないし、自覚することで世界と戦えるかもしれない。今回はそのことについて書こうと思う。 8k 現在、HonoのGitHubスター数は8,000を超えた。 これはとんでもない数字なんだけど、もっと伸びるべきで、早く1万を超えなくはいけない。 npmのダウンロード数は週間「46,000」とこれは相対的に低く、こちらも伸びるべきである。 数字が全てではないが、こうした数字は昨今のOSSにとって「一番の」指標であることは確かだ。 だから戦うことはこの数字を伸ばすことである。 なぜ「戦う」のか なんで「戦う」というおっかない言葉を使い、そして戦わなくてはいけないのか。 ま
本日4/17日(月)付でCloudflareに入社しました。ロールはDeveloper Advocate、日本法人との契約ですが、日本に限りません。入社へのプロセスではUS、ヨーロッパのメンバーとやりとりをして、入社後のボスはUSになります。「Developer Advocate」は日本はもちろんアジアでは初、Cloudflareの中でも新設される部です。扱うのは主にWorkers製品で、Honoなどのフレームワークやユースケースを示すアプリケーションの開発と、製品と開発者をつなぐことをやります。 経緯 Hono 僕がユーザーとしてCloudflare Workersに触れたのは、一昨年、2021年の10月です。ブログ記事を書いています。 Cloudflare Workers 面白い - ゆーすけべー日記 そして、同年の12月には、Cloudflare Workers向けのフレームワーク「
Web 開発者は HTTP レスポンスをよく見る。 以前 CDN を導入する際に、キャッシュがヒットしているかどうか、どこのエッジがキャッシュを返しているかを確認するためにヘッダをよく見ていた。また、ヘッダだけではなく、TTFB といったレスポンスタイムも気にしている。とにかく HTTP レスポンスをよく見る。 HTTP レスポンスを確認する3つの方法 Chrome さえあれば DevTools を見て一目瞭然である。 とはいえ、コマンドラインで確認したい時がしばしばある。 GUI を操作するよりも手軽である。 その場合はcurlコマンドを叩けばよい。 これでプロトコル、ステータス、ヘッダが分かる。 また、レスポンスタイムを測りたければ、その名もttfb.shというcurlをラップしたコマンドラインツールがある。 https://github.com/jaygooby/ttfb.sh この
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のスタ
会社の朝会で話す番が回ってくる。 メンバーが入れ違いで自己紹介をするんだけど、 それに加えて「自分なりのこだわり」みたいなことを話す流れになっている。 自分の場合、つくってきたもの紹介とそれから学んだこと、みたいなのはどうだろうか。 結局こういうキーワードが出た。 作者冥利に尽きる。 今まで原動力になっていたのは、 プロダクトを使ってもらって嬉しい反応をもらうことだ。 なので「もしよろしければ、みなさんも(一緒に、じゃなくてもいいけど)作者冥利に尽きる体験をしましょう」 という流れにしようかと。上からだけど、まぁありでしょう。 で、作者冥利に尽きるにはどうすればいいか。メモを残す。 つくってきたもの いわゆる「個人開発」というものをやってきた。 特にWebサービスをたくさんつくってきた。数えたらエロ含めて70個、除いて48個だった。 以下のスライドで全部網羅してある。 僕がつくった 70個
Next.js と microCMS と Vercel が面白い。それぞれ面白いし、組み合わせるとさらに面白い。なにせ、メディアサイトがデプロイも含めて 2 時間で出来る。 Next.js + microCMS + Vercel すごいな。メディアサイト(中身スッカスカだけど)がものの 2 時間でデプロイまでできた。 https://twitter.com/yusukebe/status/1435708770705760256 ということで、メディアサイトを作りながら、Next.js と microCMS と Vercel の面白さをまとめる。 2 時間で作るメディアサイト 例として「ラーメンまとめ!」というメディアサイトを作ってみる。このサイトには ラーメン屋 ラーメン屋のまとめ記事 の 2 つの種類のコンテンツがある。「ラーメン屋」が「名前」「場所」「ラーメン写真」というプロパティを持
追記 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。いわゆる
Jamstackを既存のシステムに導入するかを検討する機会があった。 紆余曲折したものの、未だに暫定的な結論しか出ていない。 とはいえ、わりと頑張った。 今回は Jamstackとはなんぞや? Jamstackの特徴 Jamstackの技術 弱みを解決する策 実際に検討した話 を雑に紹介したい。 個人的なメモなので、間違っているところがあるのを考慮願いたい。 Jamstackとは? JamstackのJamは以下の頭文字をとっている。 JavaScript APIs Markup まず、フロントエンドを持たないAPI群がある。APIはブラウザのJavaScriptから叩かれるかもしれないし、後述するようなSSG =「Static Site Generator」のフレームワークが叩くかも知れない。どちらにせよユーザーに配信されるのはSSGが出力した、Markup。つまりプリレンダリングされた
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に置き換えるというのをやりました。そのアプリケーションについては
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;
最近のCloudflare Workersについて、知らない方向けにざっくばらんに書いてみます。 連絡事項 自己紹介しておくと、僕はCloudflareのDeveloper RelationsチームにいてDeveloper Advocateをやってます。 一方で、HonoというCloudflareのみならずDenoやBun、Fastly等で動くWebフレームワークを開発してます。 Cloudflare Workersとは? 本題に入る前に、そもそも「Cloudflare Workersとは?」を簡単に紹介しておきます。 Cloudflare WorkersとはCloudflareのエッジで動くサーバーレス環境です。 基本的にJavaScript/TypeScriptでアプリケーションを書きます。 V8というJavaScriptエンジンの上でアプリを動かすのですが、これはWebブラウザのGo
Fastly の導入を検討している。検討しているだけで、導入していないので、参考にならないかもしれないし、間違っているかもしれないが、メモ。 動機 Varnish を使っていて、最初は Varnish の冗長化をしたい!だった。 まあそうなるよねえ。で、Fastly!となった。 ちなみに、Varnish を使ってる理由としては、以前も Jamstack を検討する - ゆーすけべー日記 Varnish で Stale-While-Revalidate を実現する - ゆーすけべー日記 で触れたとおり、 なるべく手間手前で、なるべく少ない箇所でキャッシュしたいからである。 Fastly でできること・したいこと Fastly でできることはたくさんあるので、その中でもしたいことを列挙。リバースプロキシ、ロードバランサの機能も含むのが便利。特に、パスごとに制御できる。なので、とあるパスはキャッ
はじめに こんにちは。コンシューマ事業部バックエンドエンジニアの高橋です。 今回は食事メニュー検索機能にOpenSearchを導入したことについて、お話しさせて頂こうと思います。 あすけんメニュー検索画面 なぜ導入しようと思ったのか あるデイリースクラムにて「『”水羊羹 とらや”』では検索できるのに、『”水ようかん とらや” 』では検索できない」という指摘がでてきました。確かにそれはユーザーにとって検索できない理由がわからず、ユーザビリティが低いと感じました。また、以前から「探したい食品がなかなか検索でヒットしない」という改善要望もありました。それらが今回の導入のきっかけです。 以前のメニュー検索 以前の検索ではデータベースに対しSQLの部分一致検索を行っていました。 OpenSearchで検索を行える状態にするためにはデータベースからOpenSearchへデータを同期する必要があり、また
AI Webcamについて紹介します。 AI Webcam AI WebcamはWebcamでとった写真についてAIが音声で返答してくれるというものです。AIのキャラクターというか音声は指定可能です。また文章のプロンプトでどのように返答するかも指定できます。 例えば、アメリカの若い女性「レイチェル」に自分の容姿を褒めてもらった時の大爆笑映像はこちらです。 元ネタ 実は元ネタがあって、Wes Bosというポドキャスターがやってたのを真似てます。コードも公開されているので、それを使わせてもらってます。みなさんもできます。 YAPCでLT あまりにも面白いので、先日のYAPC::HiroshimaのLTでこれを応用したものをデモしました。レイチェルだけを流しても尺が余るしインパクトにかけるので、YAPCっぽく「dankogai」さんと「papix」をAIにしました。 UIはこんな感じです。 例え
今日でCloudflareに入社してちょうど1年が経ちました。 DevRelチームに所属し、Developer AdvocateとしてHonoの開発をメインに活動してきました。 41歳にして初めての会社員ですが、楽しい時間を過ごしています。今日はそのことについて書いてみます。 入社までの経緯 詳しいことは入社時のブログに書いたのですが、その経緯を再び。 2021年の12月にHonoというCloudflareで動くWebフレームワークをつくり始めて、それがだんだんと人気を得ていきました。 2022年の10月、CloudflareのエンジニアGlenが「Cloudflareで働くのに興味はないか?」と声をかけてくれました。当時UKに住んでいた彼が、地元のオーストラリアに戻りたいので、同じタイムゾーンのエンジニア仲間を探していたのです。ちなみに、GlenはCSS in JS「styled-com
※俺は通して怒り顔で ひ「どうも、認知プロファイリング探偵暇空茜です」 な「助手のなるこです」 ひ「というわけで提訴しました」 な「政治家を訴える実績解除ですか?」 ひ「たしかに、住民訴訟やらで都知事小池百合子をバンバン訴えてるけど、あれは東京都を訴えてるわけだから、政治家個人を訴えるのはこれが初めてかも」 な「おま一般!」 アニメイト最低だな。暇空茜はColaboや仁藤夢乃さんへの誹謗中傷を繰り返して多大な実害を与え、東京都の女性支援活動を大後退させ、そのことをネタにして飯のタネにしている人間ですよ。 アニメイトは売れればなんでもいいんですか?社会性のかけらもないんですか? https://t.co/bTemqplZy8 — 🇺🇳羽鳥 だいすけ・中野区議会議員(日本共産党)🇵🇸 (@HatoriDaisuke) February 1, 2024 ひ「訴えたのはこのツイートだね。詳
🐳 @Ynq2iJ5HH1l @___na___00 めちゃくちゃ凄いですね👏✨ 私100点の食事の時でもゆで鶏胸、玄米、ブロッコリー、カボチャ、卵、などで塩分もすぐ越えちゃうので味付けなしと味噌汁1日1杯、サプリとプロテインと運動で無理矢理100点出してました💦 タンパク質をしっかり取るコツ教えて欲しいです🙇♀️ 2024-11-28 20:36:02 なちゃ @___na___00 @Ynq2iJ5HH1l 100点?!凄すぎます!😳 健康的なアスリートメニューですね!運動もしてて見習う要素しかないです🥹 タンパク質、中々とれないですよね〜、私も苦戦してます。 トマトリゾットにノンオイルのツナ缶を入れたらいい感じになりました!2~4位はのっけ丼の具です! pic.x.com/XAQ5AKGGdo 2024-11-28 20:58:46
TL;DR Ramen APIを作った REST API、GraphQLにも対応している 登録・認証いらず、完全無料 プロトタイピングやテストに使える 店ごとのラーメン写真が手に入る 現在、26店舗登録されている 例えば、Reactを勉強する時に使う GitHubリポジトリにてコンテンツを追加できる 詳しくはGitHubリポジトリを見てもらいたい Base URL: // GET https://ramen-api.dev/shops/yoshimuraya?pretty { "shop": { "id": "yoshimuraya", "name": "吉村家", "photos": [ { "name": "yoshimuraya-001.jpg", "width": 1200, "height": 900, "authorId": "yusukebe", "url": "https:
最近は Cloudflare Workers ばっかりいじってて、フレームワークまで作ってるのですが、これ、ちゃんとやればそれなりの立派な Web サイトができるので、紹介します。 できたサイト 「家系ラーメン食べたい!」というサイトを作りました。 管理者の僕が家系ラーメンを登録できて、トップでは一覧で見れて、 詳細ページに行くと写真と紹介文が見れます。 質素に見えますが、 コンテンツ(ラーメン屋)をどんどん追加できる。 プロパティを追加することも可能。 画像はリサイズされる。 速い。 OGP ちゃんと設定している。 favicon.icon もやってる。 と、「ちゃんと」してます。そう、ちゃんとしてます。 では、どう作っていくか。 Cloudflare Workers Cloudflare Workers 、そのユースケースについて。 CDN のエッジで実行される、ということでスクリプト
「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が重要だからであると同時
アニメ「ぼっち・ざ・ろっく!」2期制作決定! 特報映像解禁!メインスタッフ解禁!新キャラクターデザインの小田景門によるイラスト到着!キャスト・スタッフによる「【緊急】ぼっち・ざ・らじお!【特別編】」も公開!芳文社・『まんがタイムきらら MAX』にて連載中の、はまじあきによる人気 4 コマ漫画『ぼっち・ざ・ろっく!』。2022 年秋に TV アニメが放送されると国内外で絶大な支持を獲得し、音楽面では《結束バンド》のフルアルバム『結束バンド』が 2023 年のオリコン「作品別売上数部門デジタルアルバムランキング」年間 1 位や Billboard JAPAN「年間ダウンロードアルバムチャート」1位を獲得するなど、大きな旋風を巻き起こしました。 この度、2 月 15 日(土)に開催となった「結束バンド TOUR “We will B”」にて、 待望のアニメ 2 期制作決定がサプライズ発表されまし
ブログに画像を貼るのに、保存してリサイズして名前変えて、アップロードして… という作業がめんどくさい。 なので、Gyazo を使っていた。でも、Gyazo を使い続けるのもなんかアレなんで、代替の手段を考えていた。 macOS Monterey に「ショートカット」が入ったので Automator より触りやすいと試していたら、いつの間にか「Gyazo もどき」ができた。 バックエンドに S3、フロントの API サーバー に Cloudflare Workers を使った。 これ、なかなか面白いので紹介する。 デモ 右上のメニューバーより起動できる。 macOS のショートカット 最初に macOS の「ショートカット」アプリをどのように構成しているかを説明する。以下の通りである。 インタラクティブにスクリーンショットを撮る スクリーンショットを1000 x 自動高さ設定 のサイズにサイ
昨日、ワークショップの講師をしました。 華やかなものを作ってもらうはずが色々ありまして、 超簡易なブログのWeb APIが最終形になってしまいそうでした。めっちゃ地味です。見た目JSONです。 このまま終わると地味な印象で終わってしまうのがヤベーってなってその場で思いついたのが「ChatGPTにそのAPIを使わせるChatGPTプラグインを作る」です。 それをライブコーディングしたら湧いたのでその話をします。 ワークショップ ServerlessDay Tokyo 2023というイベントの一環で「Cloudflare WorkersとHonoのワークショップ」をやりました。 驚くべきことは「13時から17時」4時間という長丁場なことです。 未知です。 特にネタが尽きるの怖かったので、小粒な例題をいくつもつくっておきました。 想定外 いざ開始。 すると、別のワークショップとの会場が近く、声が
フレームワークを作るのが好きだ。 今、フレームワークを作っている。 楽しくてたまらない。 毎日少しずつコミットする。 毎日が楽しくてたまらない。 フレームワークを作るのが好きだ。 フレームワークとはつまり Web フレームワークだ。 ルーターにありもののテンプレートエンジン。 モデルのサポートはやめておく。 劣化版 Sinatra。 否、劣化版と言うのもおこがましい。 それでもとにかくフレームワークだ。 フレームワークを作るのが好きだ。 GitHub にあるだけでも 9 個作っていた。 途中で投げ出したものばかりだった。 突然フレームワークを作りたくなる時がある。 猛烈にフレームワークを作りたくなる時がある。 そう、それが今だ。 フレームワークを作るのが好きだ。 車輪の再開発と誰かが言うだろう。 自分でも分かっている。 それでもフレームワークを作るのが好きだ。 フレームワークを作るのが好き
ワンコロもちべヱ @WANKOnin ダ・ヴィンチWeb「放蕩ダイエッター、今日も食べる」連載中 描いてる人は恵水(けいすい)といいます 週に半分くらい絵日記漫画とか描きます ■livedoor Blog公式ブロガー ■【腱引き】筋整流法協会公認アンバサダー 他もろもろ→ https://t.co/PmCmHvVA9b 依頼→wankonin★gmail https://t.co/fI2JLTzeOy リンク あすけんダイエット あすけんダイエット - 栄養士が無料であなたのダイエットをサポート(サイト&アプリ) 「今度こそキチンと痩せたい!」そんなあなたを栄養士がサポートするダイエットサイトです。食事を記録するだけでカロリーや食事バランス、ダイエットアドバイスを確認できます。しっかり食べても痩せられるダイエット法で、理想のカラダを手に入れましょう。 43 users 1587
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く