ヒーロー画像を様々なレイアウトで一括確認できる Hero Image Tester というものを作りました
はじめに ウェブサイトのデザインをするとき、メインビジュアルをどうしようかなとか、画像は支給されたけどどういうレイアウトがいいかなとか、メインコピーの位置をどうしようかなとか、ほぼ毎回同じようなレイアウトを作っては「これじゃない」「あれじゃない」ってやるわけですが、よくあるレイアウトはもう予め作っておいて、画像を差し替えるだけで一括確認できたほうがいいんじゃないかと思ったのがきっかけで、Figma の components、styles、auto layout、variants などを駆使して、Hero Image Tester というものを作りました。 Hero Image Tester まずは短い動画で雰囲気を掴んでいただければと思います。 Figma を使いこなしている方であれば、特に説明なども不要ですぐに使っていただけるかと思います。そうではない方向け、また、よりベターな編集方法な
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
【Chome126】View Transitions APIで滑らかな画面遷移を実装する
こんにちは！ Chrome 111からView Transitions APIが利用可能になりましたが、今まで試す機会がありませんでした。 今回満を持して試してみたところ非常に面白かったので、この記事で共有したいと思います。 また、2024年6月11日にリリースされたChrome 126からView Transitions APIが強化されましたので、その点についても触れてみたいと思います。 View Transitions APIとは View Transitions APIは一言で言うと、 異なる DOM 状態間のアニメーション遷移を簡単に作成する仕組み だそうです。 ほう...？？🤔 百聞は一見にしかずということで、以下のサイトにView Transitions APIを使ったデモがわかりやすくまとまっており、イメージがつきやすいので触ってみてください！ View Transiti
HAMWORKSのサイトをブロックテーマに変えていく
{ "name": "@hamworks/wordpress", "private": true, "version": "1.0.0", "description": "WordPress local environment for HAMWORKS Co., Ltd.", "main": "index.js", "scripts": {}, "author": "HAMWORKS Co., Ltd.", "license": "GPL-2.0-or-later", "homepage": "https://ham.works/", "volta": { "node": "18.19.0" } }
入力線画を全く変えずに画像生成AIに色塗りさせる方法
タイトル通り、入力線画を(基本的には)1pixelも変えずに画像生成AIに色塗りをさせる方法について解説していきます。 本題に入る前に そもそも画像生成AIによる色塗り（着彩）について知らない方向けに、既存技術でAIに色塗りをさせるとはどのような事を指すか？またどのような課題があるか？について一度整理します。 画像生成AIによる着彩 テキストから画像を生成できるという事で一躍有名になった画像生成AIですが、テキストだけでは生成したい画像を詳細に指示することが困難であるという課題を抱えていました。 そこで、テキストと比較してより具体的に生成したい画像を指示する方法として。ControlNetを用いた画像とテキストを入力して新たな画像を生成する手法が現れます。 この応用として、色塗りがされていない線画と指示テキストを入力することで、入力した線画に対し色を塗った状態の画像を生成するという方法が存
無料で商用にも使える日本の郵便番号APIをリリースしました
jp-postal-code-api https://github.com/ttskch/jp-postal-code-api 日本の郵便番号から住所のデータを取得できるWeb APIです。 GitHub Pagesを使用して静的なJSONファイルとして配信している ため、可用性が高いのが特徴です。また、オープンソースなのでクライアントワークでも安心してご使用いただけます。もしリポジトリの永続性や GitHub Pagesの利用制限 が心配な場合は、ご自由にフォークしてご利用ください。 日本郵便によって公開されているデータ を元に住所データのJSONファイルを生成して配信しています。JSONファイルには日本語表記・カナ表記・英語表記の住所データが含まれています。ただし、以下の注意事項があります。 大口事業所個別番号の住所データは以下のように出力されます（元データ の内容がそうであるため）
【随時更新】主要な大規模言語モデル比較表
これはなに？ 自著 「つくりながら学ぶ！生成AIアプリ＆エージェント開発入門」 に掲載するために作ったOpenAI・Anthropic・GoogleのLLMの一覧表です。 各社が新しいモデルを出すたびに本の内容が陳腐化するため、この記事に最新の情報を更新していきます。 各社のモデルの主要諸元・費用に加えて、自分の印象を書いてあります。 性能の目安としてChatbot Arenaのスコアを参考までに添付しています これはあくまで参考用かつ英語での評価なので、スコアが一番高いものがいい、もしくは低いからダメというわけではありません。 少なくともこの記事に掲載されているモデルは、スコアが低いものでも単純な翻訳などでは十分な性能を持っています。そして何より高性能モデルとは比較にならないほど高速です。 用途や使用言語によって試してみて最適なものを選ぶのが良いでしょう [PR] 宣伝 本の紹介は↓に書
OpenAI、次世代AIモデル「GPT-4o」を発表
日本時間2024年5月14日未明、OpenAIは新たなフラッグシップモデル「GPT-4o」を発表しました。このモデルは、音声、視覚、テキストのリアルタイム処理を可能とし、従来のAIモデルを大きく上回る性能を誇ります。OpenAIのCTOであるミラ・ムクティ氏は、「GPT-4oは、人間とマシンのインタラクションの未来を大きく変える一歩です。このモデルにより、コラボレーションがはるかに自然で簡単になります」と述べました。 「GPT-4o」の主な特徴を以下にまとめました。 他のモデルを凌駕する性能 GPT-4oは、OpenAIの以前のモデルであるGPT-4 Turboや、ライバル会社のClaude 3 Opusなどの大規模言語モデルと比較して、頭ひとつ抜けた性能向上を実現しました。サム・アルトマンCEOは、今年4月に "Chatbot Arena" でgpt2というコードネームでテストされていた
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
STUDIO開発で気をつけたいこと
私が直近（2023年10月〜2024年1月）のSTUDIOプロジェクトで直面した問題をもとに、3ヶ月前の自分に伝えたかったことを書き残したいと思います。 この記事は主にWeb開発者の方へ向けた内容となります。 STUDIOの読み込み速度には気をつけて STUDIOでページを制作する際は、十分に読み込み速度に配慮するようにしましょう。 PCは問題なくとも、スマホの読み込み速度が遅い傾向があり注意が必要です。 超特急で開発したものの、いざスマホ実機でページにアクセスすると重たいページで読み込みに10秒かかってしまう経験をしました。 これからSTUDIOでの開発を検討されている方は、 後ほど記載する点についても気をつけていただけたらと思います。 STUDIOの見解 STUDIO側もスマホ読み込み速度の遅さは認識しており、解決のために継続的に調査をされているようです。 現時点でSTUDIOが提案し
ずぼらな私の2023年のファビコン事情（SVGでダークモード対応）
2023/05/03: 下部にさらにズボラな案を追加、FAQも追加しました。 デモサイトを作りました。リポジトリはこちら。 favicon（ファビコン）てなに？ みんなだいすき、ブラウザのタブの妖精、この小さいアイコンたちです。 サイトに設定されているファビコンをチェックするには Chrome だと Favicon Detector 拡張を使うと便利。ぜひインストールしていろんなサイトを見てみてくださいね！ こちらは Spotify のファビコンを Favicon Detector 拡張でチェックした例です。 ところでファビコン、こんなにいる？ つらつらと…長い…全部いるのこれ？ <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-tou
大規模言語モデルはエリート就活生を超えるか
はじめに はじめまして、株式会社松尾研究所のきむ（@kangsoo_kim_）と申します。 松尾研究所で、さまざまなAIの社会実装の開発案件を手掛けてきたほか、金融に特化したチームの立ち上げなどを行ってきました。また、現在は経営戦略本部という社内外の特命のPJTを推進するチームを統括しております。詳細については下記記事もどうぞ。 入社３年目で最速で役員へ。データサイエンティストが経験した松尾研での0→1の新規事業開発と今後の展望。 大規模言語モデルに対する素朴な疑問 大規模言語モデル（LLM）の進歩が目覚ましい昨今ですが、ふと疑問に思ったことがあります。 確かにLLMは知識はすごい。けど彼らは本当に賢いと言えるのか。確率的に単語を予測しているだけで、本当に高い推論能力・論理能力を得られているのだろうか。 そこで、ちょっとしたテストをしてみたいと思っていたところ、ふと外資系の就活をしていた学
まだ日本ではWebアクセシビリティが義務化されません（2024年4月から6月の時点では）
筆者は、より多くのWebサイトやWebサービスが、より高いアクセシビリティをもつものになることを強く願っています。 （2024/02/04追記）もう少しわかりやすく書き直したものを投稿しました Webアクセシビリティと合理的配慮 「2024年からWebアクセシビリティ対応が義務化される」というようなことが書かれたWeb上の記事が増えているようです。 しかし、2024年1月現在、日本で「Webアクセシビリティ」について法的な義務が発生している・または2024年内に発生するようになる法的な根拠はおそらくありません。法律の改正が施行され、「やったほうがいい」度合いは高まっていると解釈できますが、「Webアクセシビリティは義務です」とまでは明言できないはずです。 ところが、「アクセシビリティ 義務化」などでWebを検索すると、「2024年にアクセシビリティが義務化します」と説明していたり、あるいは
あっ、そうだ！モダンCSSをまとめておこう
2023年もCSSの進化がすごかったですね！ その進化を2024年でも生かしていけるように、今回まとめておいていつでも参照できるように記事を書こうと思いました。 お読みいただけると幸いです。 一緒に2024年もスタートダッシュで走り抜けましょう。 まず、はじめに この記事では、最近登場した、エキサイティングで、アクロバティックでファンタジックなインパクトのある機能をピックアップして紹介したいと思います。 CSSの多彩な新機能を広く紹介することで、読者がこれらに触れる機会を持てるように努めています。 特に興味を引く機能があれば、他の媒体を通じて更に詳しく掘り下げることをお勧めします。 コンテナクエリ スタイルクエリ :has()セレクタ :nth-child()の「of S」構文 text-wrap: balance initial-letter ダイナミックビューポート単位 広色域のカラー
Google Apps Script は、もはやエンジニアが書かない方がいいまである
ラブグラフでエンジニアをしています横江 ( @yokoe24 ) です。 ラブグラフでは、エンジニア以外で Google Apps Script (GAS) を書く方も多く、 Slack通知の自動化など、業務の効率化がおこなわれています。 マジですごいと思います！ GASをエンジニア以外が書く問題点 一方で、コードを見るとプログラマーからするとムズムズするところもあります。 変数名に snake_case が混ざっている インデントが揃っていない for文の中で getValue() を回している Google Apps Script の getValue() メソッドはコストが高く、何度も実行するとタイムアウトの可能性が高まる == で比較している double quotes " と single quotes ' が混ざっている こういうコードを見ると直したくてウズウズしてしまいます。
Cloudflare Fonts試してみた
利用方法は非常に簡単で、CloudflareのWebコンソールからトグルをオンにするだけ。 オリジンの内容を変更したりなどの作業は一切不要。 サイドバーの Speed > Optimization を選択し、Content Optimization のタブの中にトグルが存在している。
CSSのSubgridが全ブラウザ対応。Gridの入れ子の基本から応用までを完全理解する
2023/9/12にChrome 117、9/15にEdge 117がリリースされ、CSSのSubgridが全ブラウザに対応しました。 Subgridとは、CSS Gridで新しく使えるようになった機能の一つ。行列（グリッド）を入れ子にして、親行列の行や列に子行列を整列させることが可能です。 この記事では、Subgridの基本から応用までを具体的なデモを交えて詳しく解説します。CSS Gridが初めての人でもわかりやすいよう、CSS Grid自体の解説も盛り込んでいます。 前提知識: CSS Gridとは CSS Gridとは、行と列を使ったレイアウトのことです。行・列とは、次の方向を指します。 CSS Gridを使うと、次のようなことができます。 ■ エリア名を指定して配置できる ■ 行列を繰り返したり、隙間をつくる ■ 行・列数の自動変更、敷き詰め 複雑な行列の入れ子と、subgrid
ネガティブマージンの使いどころ
はじめに こんにちわ、フロントエンジニアの川上です。今回は自分も初めて見た時に使い方に戸惑ったCSSのネガティブマージンについて記事を書かせていただきます。 ネガティブマージンとは、CSSのmarginにマイナス値を設定することを指します。大抵は正の数をしてしますが、負の数を設定するとどうなるのでしょうか。 特にCSSでは、この書き方でなければ問題が解決できないということは、ほとんどありません。CSSをコーディングする人によって書き方は無数に存在しますし、どの書き方でも見た目は一緒になります。しかし、CSSのプロパティの数やエレメントの数が少ないほど、見やすく理解しやいすいコードになり、それは良いコーディングのひとつであると考えます。 ネガティブマージンも良いコーディングのための書き方と捉えていただけると良いと思います。 ネガティブマージンの使いどころ ネガティブマージンの使いどころとして
レスポンシブをスマートに記述するためのCSS変数とユーティリティクラスの関係を考えてみる
ユーティリティクラスの作り方の試行錯誤のメモ。 --prop,--prop--sm,--prop--md,--prop--lgみたいな変数で、各プロパティの管理を楽にしたい ネストされた時に親要素の影響を受けないように注意する 現在、CSS設計理論というかフレームワークというか、なんと呼ぶべきかよくわからないものを作っているのですが、その設計に関して数ヶ月悩み続けてるので自分用にメモしています... .-fz{ --fz: 1rem; // 初期値 --fz--sm: var(--fz); --fz--md: var(--fz--sm); --fz--lg: var(--fz--md); font-size: var(--fz); @sm{ font-size: var(--fz--sm); } @md{ font-size: var(--fz--md); } @lg{ font-size
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WordPressのブロックテーマ制作手順まとめ
