ウェブサイトを閲覧していると「画像の読み込みが遅い」という場面に遭遇したことがある人は多いはず。画像はウェブサイトのパフォーマンスを左右する要素のひとつであり、ウェブ開発において取り扱いに注意すべきものです。そんな画像をウェブサイトで扱う際の最適化方法について、GoogleのエンジニアであるMalte Ubl氏が解説しています。 Maximally optimizing image loading for the web in 2021 https://www.industrialempathy.com/posts/image-optimizations/ ◆img要素にwidthとheightを指定する アスペクト比を維持したまま画像サイズを変更するには、「style」要素に「max-width: 100%」や「height: auto」と指定しておく手法がよく用いられます。この手法に加

はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove

ありがたいことに年末にメルカリの小泉さんとランチをご一緒させてもらいました。 CTO(@yutadayo)が作成した過去の失敗スライドに、リプライをいただいのがきっかけだったのですが、長らく競合事業(現ラクマ)をやっていたこともあり、きちんとお話ししたことがなく、とても学びが深かったので、ご本人に許可をいただいて、メモした内容と学びをシェアさせていただきます。 なんでメルカリに？噂ではフリルにも入社してもらえる可能性もあったとか？2007年よりミクシィに入社し、2012年の退任までCFOを務めていた その後、1年以上は他の会社の社外取締役をしたりフリーランスをしていた フリルは2012年夏リリース、メルカリは2013年春リリース 小泉さんは2013年冬にメルカリ入社 フリルのことは入社前から知っていて、2012年冬のIVSでコミュニティファクトリーの松本さんに「フリル知ってる？紹介してよ」

本サイトのHTTPS化にともない削除してしまった記事ですが、加筆修正を行ない再掲いたします！　「ふぅ～ん、昔、こんなことがあったんだな」という記録が、世界の片隅にポツネンと落っこちていてもいいかな、と思いまして。 霞のように消えたDTM 「DTMって市場自体が、霞のように消えちゃったんだろ」 先日、まったくの別件でWeb検索をしていた私の目に、突如この一節が飛び込んできました。出処は2ch（現5ch）の過去ログ、タイム・スタンプは2002年7月――「初音ミク」登場以前の“DTM暗黒期”の書き込みでした。 DTMユーザーにとっての1999年～2007年は、PC-9800シリーズからPC／AT互換機への本格移行、JASRACの方針変更、プロ向け電子楽器のコモディティ化、ソフト・シンセの台頭など、あらゆる苦難と迷いが重なった激動の期間にあたります。私は、その期間を“DTM暗黒期”と勝手に呼んでお

Youtubeで配信しながら全プロンプトを実行しましたので、各節へのリンクを整理しました。時間のところにYoutubeへのリンクになっています。 もしずれていたら、その時間まで移動して視聴ください。 はじめに (4:00) 1章 ChatGPTの基礎知識 (5:50) 2章 ChatGPTの基本的な使い方 (6:28) 3章 ChatGPT Plusのセットアップ (7:32) 4章 ファイルのアップロードとダウンロード (12:40)4.1 アップロード・ダウンロード (13:03) 4.2 扱うことができるファイル (16:02) 5章 繰り返し作業を一瞬で (16:55)5.1 文字列操作 (17:20) 5.2 正規表現でのパターンマッチ (25:36) →54ページの正規表現でできることの例の説明 (29:09) 5.3 ファイルの一括操作 (46:20) 5.4 QRコード作成

「カクダイV1」でアップスケールした画像（左）、「Midjouney v6」で作成したオリジナル画像（右） 画像の描き込みを増やして高画質にする、日本発の生成アップスケーラー「カクダイV1」が2月7日に発表されて話題になりました。東大出身ベンチャーのMavericksが開発したもので、画像生成AI「Stable Diffusion」生成環境「ComfyUI」向けの技術として無料公開されています。人気アップスケーラー「Maginific AI」を超える製品にまでに成長していくのか注目です。 Stable Diffusionのアップスケールは難しかった カクダイを紹介する前に、まずは画像生成AIとアップスケーラーとの関係についてお話します。 Stable Diffusion登場後の画像生成AI技術を使ったアップスケーラーは、単に画像を拡大させるだけの用途ではなくなりました。画像を拡大するとき、

DeepLを超えるやさしい翻訳アプリとGPTsを作りました 苦手な分野の英文を理解するのを助けてくれます。 なぜ翻訳アプリを作ったのか 私は最近ChatGPTのような大規模言語モデルに興味があり、AI開発者の方や、大規模言語モデル関連の情報を発信している方をフォローしていました。 すると最新の論文（英語）や英語のツイートが次々に流れてくるのですが、それらをGoogle翻訳したり、DeepLで翻訳しても、意味不明な場合が多いということに気づきました。 特に海外の方の1行だけのツイートなどは、DeepLで翻訳しても全く意味がわからない場合が多くて困っていました。 AI関連の論文は専門用語が多く、いちいち調べながら読んでいると、1日の大半の時間が情報収集だけで終わってしまいます。 これは要するに「自分の専門分野でない分野の英文を理解するのは大変」ということなので、例えば「Web制作初心者の方が海

今回は個人的に以前から気になっていた事について書いてみたいと思います。 きっかけは2022年に音楽メディア、Pitchforkが発表した「The 150 Best Albums of the 1990s」というこちらの企画でした。 1990年代にリリースされたアルバムの中で重要な意味を持つ、優れた作品を150枚選びランキング形式で発表するというこちらの記事。 実はPitchforkは2003年に同じ企画を行っていて、その時のラインナップと上位の顔ぶれがガラッと変わっていた事が当時話題になり、ネットやSNS上では様々な意見が見受けられました。 その当時自分もその変化ぶりに驚きつつも、時代の流れとはそういうものだよなと感じていたんですが、自分が思っていた以上に否定的な意見があった事も記憶しています。 「Pitchforkらしくない」とか、「ポップなラインナップ過ぎて面白くない」とか、「都合良く

ZAZEN BOYS加入からの5年間と、 アルバム『らんど』に込めた鉄壁のグルーヴ 前作から約12年ぶりとなるアルバム『らんど』を1月24日にリリースした、向井秀徳率いるZAZEN BOYS。本作でベーシストを務めるのは、2018年に吉田一郎の後任として加入したMIYAだ。ここでは彼女に、バンド加入後初のオリジナル・アルバムとなった本作を中心にZAZEN BOYSでの制作やライヴについて語ってもらった。1998年に結成したハードコア・バンドBLEACHで国外でも高い評価を集め、解散後は地元沖縄で385のベース・ヴォーカルとして活躍していた彼女が、どのような経緯でZAZEN BOYSに加入することになったのか？……まずはそこから話を聞いた。バンド加入時の逡巡から、ステージ哲学、使用機材、奏法（実演動画も！）まで、たっぷりと明かしてくれた本インタビューをお楽しみいただきたい。 ちょうど“ベース

いぐぞー ✈️ 旅するプログラマー @igz0 旅とプログラミングをこよなく愛します。 アメリカ大陸🇺🇸を横断しました！！小学生からプログラミング→新卒SIer→Webに目覚め個人事業主兼会社員。テレビ出演経験あり。 Webサービス制作者。読書・IT関連を中心にツイートします！！ネタツイート有。アイコンは@ixy先生に利用許諾済み。Amazonアソシエイト参加。 note.com/igz0/ いぐぞー ✈️ 旅するプログラマー @igz0 Twitter公式が「バズる」ツイートの法則を徹底的に統計解析して168ページの資料にした代物、SNSマーケティングやっているプロが全員廃業するレベルの化け物級の優良資料だった。 ちなみに無料。 SNSで「バズりたい」と思う人は全員これ読めばいいんじゃないかってレベル。 marketing.twitter.com/content/dam/ma… pi

メルカリで値段の「¥マーク」を小さくしたら購入率が伸びた理由、ペイディがサービス名を「カタカナ表記」にする理由など、プロダクトのマーケ施策まとめ30(2023) 2023年に取材した記事から、長く参考になりそうな施策をまとめました。※ 数値等はあくまで取材当時のものです。 1、商品ページの「¥マーク」を小さくしたら購入率アップ（メルカリ）メルカリでは、商品詳細ページの「値段の¥マーク」を小さくしたところ、購入率が大きく上昇した。 理由としては、¥マークを小さくしたほうが、心理的な「価格の圧迫感」が減って、心理的にすこし安く感じるためと考えられている。例えば、¥マークが大きいと桁数が多く感じたり、価格を高めに感じやすい。 この案があがったときには、社内でも懐疑的だったそうだが、テストすると小さな開発コストで大きなリターンを得られる施策になった。 元記事：https://markelabo.c

2024年1月時点のAWSベストプラクティスに従って作成しました 好評でしたら続編も検討します 1. 環境ごとにアカウントを分離する 本番、検証、開発ごとにアカウントを分割しましょう ✕良くない例 ◎良い例 最初にアカウント分割しておかないと、後で分割するのはとても大変です アカウントを分割することで「検証と思って作業したら、実は本番だった」のような事故を減らすことができます コストがアカウント単位で集計されるため、環境ごとのコストを簡単に算出することができます AWS Organizationsを使用することで、各環境に応じた権限設定が簡単にでき、ガバナンスを強化することができます AWSアカウントはAWS Control TowerのAccount Factoryを使用することで、クレジットカード情報を都度入力することなく簡単にアカウントの払い出しが可能です また、AWS Contro

衝動性や過活動、不注意などが症状として現れる「注意欠陥・多動性障害(ADHD)」は、一般的に心理療法や薬物療法による治療が行われます。ハーバード大学医学部で精神医学の臨床准教授を務めるジョン・レイティ氏が、ADHDに対する運動の効果について解説しています。 The Benefits of Exercise for the ADHD Brain https://www.additudemag.com/the-adhd-exercise-solution/ これまでの研究では、運動を行うと、体内で神経伝達物質であるドーパミンとノルアドレナリンの量が増加することがわかっています。そして、ドーパミンとノルアドレナリンの増加は、ADHDの症状緩和につながることが報告されています。定期的な運動を行うと、特定の脳領域での新しい受容体の成長が促進され、体内におけるドーパミンとノルアドレナリンの基本的な量を

何年か前にLo-Fi Hiphopが流行り始めてから、主にキュレーションサイトやキュレーションに毛が生えたような個人ブログで、J DillaとNujabesがその原点であり教祖であるような言われ方をするようになった。 二人は共に生まれた日が同じ1974年の2月7日であり、片方は病気、片方は事故により若くして亡くなっている。その結果、（特にこの日本では）共に死後あまりにも神格化され過ぎてしまった。 後追いで語ってる人の中には、二人を同じ時代に同じ志や同じ考え方を持って音楽を制作してたように見たがる人がいるみたいだけど、当時をリアルタイムで体験してた世代からすると、その語り口はなんだかとても違和感。 Nujabesの方はJ Dillaのことを知らないわけがないけれど、もしかしなくてもJ Dillaの方は多分、Nujabesのことなんて全く知らなかったんじゃないかな。 そこで今日は僕が思っている

私たちの足腰や体幹の筋肉は、加齢や不活発な生活を続けることによって、どんどん弱ってしまいます。30歳から80歳までの間に、普通に生活しているだけで、太もものサイズと筋力は、およそ半分に減るのです。 しかも、これらの弱りやすい筋肉はすべて、「立つ」「歩く」「座る」といった、ふだんの生活での基本的な動きを支えているものです。これらの筋肉が弱ってしまったら、日常の基本動作さえ、おぼつかなくなります。 スクワットは人間の動作の基本中の基本 私がスクワットを皆さんにお勧めする理由が、まさにここにあります。スクワットは、しゃがみ込んで、そこから立ち上がる動作を繰り返します。非常に単純な運動ですが、この動きは、人間の動作の中でも基本中の基本の動きです。 ハイハイしていた赤ちゃんは、まず立ち上がろうとします。歩き出すのは、立つことが前提の運動です。赤ちゃんが立てるようになるというのは、極めて大事な瞬間なの

アプリの画面をデザインする際、エンジニアさんに 「なにも登録データがない場合、どう表示しますか」「選択したときの状態ってどんなデザインですか」などと聞かれて 「ｳﾜｱ考えてなかったすみません、今作ります。。」 （なんて自分はポンコツなんだ、、ｳｳｳ） と、なりたくないですよね。 UI Stackは👆のような状況を回避するのに便利で大事な考え方だと思ったので、言葉の意味を知らない方はぜひ読んでってください！ UI Stack アメリカのプロダクトデザイナー Scott Hurff さんが世に出した 「UIの考慮すべき5つの状態」という考え方です 5つの状態 ・Blank State（空っぽの状態） ・Loading State（ローディング状態） ・Partial State（部分達成状態） ・Error State（エラー状態） ・Ideal State（理想状態） 一つ一つ参考を交えな

WebサイトやアプリのUIで、スイッチを実装するのはなかなか面倒です。CSSで書くと、なかなかのボリュームになってしまいます。 そんなスイッチがHTMLだけで実装できるようになります。 Release Notes for Safari TP 185によると、HTMLの新機能としてswitch属性がサポートされました。これにより、スイッチUIがHTMLで簡単に実装できるようになります。 switchについては、かなり前から実装についてGitHubで議論されていました。スイッチは人気のあるUIコントロールだけど、CSSで実装するのは簡単じゃないよね、簡単に実装できるようにしよう。という感じです。 スイッチUIを実装するHTMLは、下記の通りです。

はじめに 最近、Next.js、TypeScript、Tailwind CSSを使って技術ブログを立ち上げました。（まだあまり更新は進んでいませんが…） このプロジェクトを通じて構築した開発環境がわりと快適だったので、誰かの参考になるかもしれないと記事を書いてみることにしました。 できる限りわかりやすく詳細な説明を心がけましたが、その結果、記事のボリュームが大きくなってしまいました。長文ですが、興味のある方はぜひ読んでみてください🙏 また、この記事内で紹介した内容をセットアップしたリポジトリを公開しています。 Next.jsのボイラープレートとして活用可能ですので、興味のある方はぜひ覗いてみてください。