Figmaのプラグインで、特定のノードを取得する方法
デザインエンジニアのりょーたです。 最近、「FigTodo」というFigmaのプラグインをリリースしました✨ 簡単にいうと、期限や担当者を設定できるタスク管理ツールなのですが、機能の１つに、アンカーリンクの作成があります。外部リンク（figmaファイル内の選択範囲へのリンクでない）であればブラウザでページを開き、ファイル内の特定のノードへのリンクであれば、そのノードの位置に移動します（下記参照） ノードとは Figmaにおけるノード（以降Nodeと記載します）とは、Figmaのドキュメント内の個々のオブジェクトや要素を表現するものであり、図形やテキスト、グループやセクションなど様々なオブジェクトに一意のIDが割り当てられています。 この記事は、取得したNodeの位置に移動させる処理を実装するのに試行錯誤したため、その手順について共有します。 この記事で紹介するのは、デバッグをしつつ考えた方
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
現場で使えるモードレスUIの具体例と実践テクニック
はじめに 先日「Modal、Dialog、Drawer の違い」について解説した記事を書きました。 この記事の中で「モードレス」について軽く触れましたが、 「そもそもモードレスってなに？」 「モードレスな UI ってどんなものがあるの？」 と疑問をもった方が多いかと思います。 本記事ではモードレスにフォーカスを当て詳しく解説します。また、記事の後半では厳選した具体例 5 選を紹介します。 この記事を読み終えれば、現場で使えるためのエッセンスが身についているはずです。 モードレスとは モードレスは言い換えると「モードがない」「モードを持たない」となります。 ユーザが特定のタスクを強制されることなく、任意の UI オブジェクトを操作できる状態を指します。 モードレスな UI は自由に操作できるため、ユーザビリティを向上させます。 アクセシビリティの観点でも短期記憶に負荷をかけないため、ユーザに
HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる）
HTMLを直接読み書きせず、スクリーンリーダーも使わずに、アクセシビリティを向上させられないだろうか（と思ってブラウザ拡張を作ってる） これまでの何年間か、Webアクセシビリティまわりのことをやってきた中で、「Webアクセシビリティに取り組む」上でいろいろな障壁を感じてきました。 「なぜWebアクセシビリティをやるのか」の理解を得る・得てもらうまでの障壁 イノベーター層・アーリーアダプター層な開発者（エンジニアやデザイナー）が取り組みを始める上での障壁 マジョリティ層が取り組みを始める上での障壁 今回はこの3つめの「マジョリティ層が取り組みを始める上での障壁」の話です。 残りの2つについては、私が執筆に参加したWebアプリケーションアクセシビリティが網羅的なガイドになってくれるはずです。しかしコイツは内容的にも物理的にもゴツすぎる問題があると思っていて、導入編としては見えにくい、読みにくい
リンクの入れ子は subgrid が最適解かもしれない
はじめに リンクの入れ子とは何かというと、以下のようなデザインです。 カード全体がリンクでクリッカブルになっていて、中のタグやカテゴリーもそれぞれがリンクになっています。ニュースやブログの投稿などでよく見るデザインだと思います。 しかし、以下のようにマークアップすることはできません。 <a href="https://example.com/posts/hello-world/"> <h2>Hello, World!</h2> <p>...</p> <a href="https://example.com/tag/hello/">#hello</a> <a href="https://example.com/tag/world/">#world</a> </a> HTML のルール的に <a> の入れ子はダメだからです。 Subgrid を使った方法 Subgrid がまだない時代からいろ
Reactは悪い意味でも現在のjQueryだし、それを受け止めないと前に進めないということ
HTMXのCEOに就任したので[1]、記念に記事を書きたいと思います。 HTMXサイトのエッセイ[2]はどれも珠玉の出来で評判ですが、それらを読んでもわかるとおり、HTMXは「Webはこうあるべき」という主義主張のあるライブラリです。その主義主張のかなり初歩的な前提を書きたいと思います。 Reactはなぜだめか、という話です。 21日追記 ちょっと誤解が生じているために書き足しますが、Reactのパフォーマンス(及びそれ以外のこと)への批判というのはHTMX固有のものではありません。SvelteやSolidJSといった新興JSフレームワークやRails等の非JS WEBフレームワーク、SSG開発者たち、それからReact開発者たち自身といった多様なWEB開発者たちに共有されている見方です。この記事の最後の方でReact批判記事のリンク集を引用していますが、そういった多様なバックボーンの人た
【WCAG2.2】コントラスト比の計算方法を学ぶ
はじめに テキストの読みやすさを大きく左右する要素の1つに、テキストと背景のコントラストがあります。これまで私は、何かしらのツールを用いてコントラスト比を確認することはあれど、その具体的な計算方法については理解していませんでした。 そこで、今回はWeb Content Accessibility Guidelines (WCAG) 2.2を参考に、コントラスト比の計算方法について学んだので、ご紹介します。 ウェブアクセシビリティにおけるコントラストとは 一般的に「コントラスト」という言葉には「対比」や「対照」という意味があります。中でもウェブアクセシビリティという文脈において、コントラストという言葉は、テキストとその背景のコントラスト（対比）を指すことがあります。 Many different visual impairments can substantially impact cont
Headless-CMSを自作する
. ├── backend │ ├── Cargo.lock │ ├── Cargo.toml │ ├── src │ │ └── main.rs │ └── target │ ├── CACHEDIR.TAG │ └── debug └── frontend ├── README.md ├── components │ └── Button.tsx ├── deno.json ├── dev.ts ├── fresh.gen.ts ├── import_map.json ├── islands │ └── Counter.tsx ├── main.ts ├── routes │ ├── [name].tsx │ ├── api │ └── index.tsx ├── static │ ├── favicon.ico │ └──
WCAGをやわらかい言葉に噛み砕く
このスクラップをZenn Bookとして再編集した、『【ゆるふわWCAG】中学生でもわかるウェブアクセシビリティガイドライン』を公開しています。 よければこちらをご覧ください。 目的 WCAGを理解したい けど、WCAG（およびその日本語版も）に記載されている文章は定義を記述したもので、理解するには難しい。 なので、難しいことが苦手な自分でも理解できるように簡単な日本語に変換していくことで理解したい。 人に説明するのが一番身につくって言うしね。 アクセシビリティ対応にハードルを感じている・どうやればいいかわからない人にも身近に感じてもらう 全体書けたら記事化したい。 気をつけたいこと あくまで「ガイドライン」だと思っているので、「制約」と感じるような表記にはしたくない。 「～しなければならない」じゃなくて、「こうだとハッピーだよね」にしたい。 抽象的な表現で、「それって、具体的にはどんなの
【2021年版】favicon（ファビコン）の設定方法と画像の作り方
はじめに 新しく作成したサイトにfaviconの設定をしようとしたら、たくさんの詰まりポイントがありました。 記述内容が多すぎる… 結局どれが必要なの？ ダークモードで画像が見えない！ Safariだけ画像が出てこない！ そこで今時の記述の仕方や、画像データの仕様について、まとめました。 同じように詰まった人の参考になれば嬉しいです。 結論 指定方法 faviconを表示させたいページのhead内に以下の記述を追加します。 <head> <link rel="icon" sizes="16x16" href="/favicon.ico" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="apple-touch-icon" href="/apple-touch-icon.png"> <link r
ずぼらな私の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
CSS・TypeScriptの相性が抜群。vanilla-extractが最高のCSS開発体験をくれた
私はこれまで、 React ・ Next.js でのスタイリングには、CSS Modules + Sass を使っていましたが、最近は vanilla-extract を使うようになりました。TypeScript との相性が良く、長い間求めていた CSS 開発体験が実現できるためです。 vanilla-extract とは、CSS を TypeScript で型安全に書ける CSS in JS です。 State of CSS 2022 でも満足度が高く、先日は Next.js の appDir でも正式サポートされました。 本記事では、CSS Modules から vanilla-extract に移行した経緯と、そのメリットについて紹介します。 CSS Modules で限界を感じていた CSS Modules を使っていた理由はいくつかありますが、主に次のようなものです。 従来の C
Storybookとは？Storybookを用いたフロント開発
はじめに 半年くらい前にプロジェクトにStorybook及びChromaticを導入したのでその知見を今更まとめたいと思います。Storybookに触れたことがない方・Storybookの導入を検討されている方向けの記事になります。 ChromaticはStorybookを用いた非常に強力なサービスです。Chromaticの記事も書いたので以下をご参照ください。 Storybookとは何か？ Storybookは「UIカタログ」です。それぞれのUIコンポーネントをブラウザで手軽にチェックすることができます。React以外にもVueやAngular、Svelteなどにも対応しています。オープンソースで無料のサービス（モジュール）です。 以下のように開発中のコンポーネントをブラウジングできます。 Storybookの利点として以下の点が挙げられます 手軽にUIのテストができる サーバー側の準備
Figma-tokensからJSON export→CSS variables化すると一部スタイルが正しく吐き出せない問題を解決する
この記事は、 エアークローゼット Advent Calendar 2022 13日目 Figma 開発 Advent Calendar 2022 13日目 の記事です。 株式会社エアークローゼットでエンジニアをしている小林です。 この記事ではFigma-Tokens + Style Dictionaryでデザイントークンをコードと連携するときのハマりどころについて書きます。 エアークローゼット社内では、デザイナーとエンジニアの協業を推し進める動きが今年はじめごろから活発化しはじめました。Figmaの導入を皮切りに、様々な作業フェーズで作業効率や成果物の質を高めるような試みが生まれています。 導入コストや浸透させるための取り組みなど、Figma導入に関するノウハウについては、昨日のアドベントカレンダーでかなり詳しく書かれていますので、興味があればぜひご覧ください！ 自分はエンジニアとしてこの
コーダーができるサイトの高速化10選
はじめに この記事では「コーダーが対応できるサイトの表示速度向上」についての具体的な手法を紹介していきます。 サイトの表示速度はユーザー体験を大きく左右し、サイトの種類によってはUI（サイトの見た目）より重要視される場合もあります。 2017年にはGoogleが「ページの読み込み速度によって離脱率が変わる」と発表しました。 ・1〜3秒の離脱率：32% ・1〜5秒の離脱率：90% ・1〜6秒の離脱率：106% ・1〜10秒の離脱率：123% 引用：https://www.thinkwithgoogle.com/ このようにサイトの表示速度はとても重要な指標になります。 サイトの表示速度向上には様々な手法が存在して、効果が出やすいものもあれば出にくいものもあり、実際に本番反映してみないと結果が分からないものもあります。また、難易度や実務上で許可を貰いやすいかなども考えなくてはいけません。 これ
ChatGPT APIに関するQ&A
2023/4/1追記 正確にはChatGPT APIではなく、OpenAIのChat Completion APIと呼ぶのが正しそうです。 先に結論 gpt-3.5-turbo と gpt-3.5-turbo-0301 って何が違うの？ → 一緒 GPT-4モデルは使えるのか → 2023/03/19時点では誰でもは使えない。 waitlist で予約した人から先行で使える。 なぜAPIリクエスト時の例に role: "assistant" が含まれているの？ → これまでの会話の文脈を理解させるため そもそもChatGPTのAPIとは OpenAIのAPIのうち、2023年3月1日に公開された「Chat completions」機能を指します。 （これまでも似たようなことを実現できたが、より低コスト・高速になった） 概要や利用方法については以下サイトが参考になりました。 APIリクエスト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
LangChainの概要と使い方｜サクッと始めるプロンプトエンジニアリング【LangChain / ChatGPT】
はじめに｜【ゆるふわWCAG】中学生でもわかるウェブアクセシビリティガイドライン
VS Codeエディタでできること｜VS Codeエディタ入門
【Figma Tokens × Style Dictionary】デザインシステムはじめの一歩
