はじめに 知っておくと仕事が捗るブラウザ上で動く超便利なツールを17個集めました。 Squoosh Googleが開発した画像変換・圧縮用のWebサービス。 プレビュー画面で変換前後の画質をリアルタイムで確認しながら圧縮設定を調整することができる。 Documatic Documaticは、プロジェクトドキュメントの開発プロセスを削減するためのツール。API リファレンスからユーザー ガイドまで、コード ベースを簡単に文書化できる柔軟なテンプレートとユーザーフレンドリーな編集ツールを提供する。 transform jsonからyamlの形式に変換したい等、あらゆるデータ形式から別の形式に変換するサービス。 jsonからyml、htmxからjsxへの変形、jsonやGraphQLのIDLからTypeScriptのinterfaceまでも、ブラウザ上で生成することができる。 Roadmap.s
はじめにTIG真野です。 秋のブログ週間2023 の3本目は、設計ドキュメントをGit管理して腐らせないようにがんばってみた話をします。 前段として6年前、「我々はいかにシステム開発におけるドキュメント腐る問題と戦えば良いのか」という記事を書いたのですが、その後の試行錯誤はどこにも残していないことに気づきました。普段のフューチャー技術ブログですとちょっと引け目を感じるテーマですが、秋の夜長を楽しむため読み物成分を多めに書くというテーマのこのブログリレーにピッタリな気がするため、この機会をお借りします。 ドキュメントも色々な種別があるかと思いますが、この記事では設計ドキュメントを指すことにします。設計ドキュメントは開発メンバーが参照するもので、ステークホルダーへの説明資料に引用して使うことはあれど、主目的は異なるという前提です。Design Docの場合もありますし、システム構成図、ERD、
エンジニアのための十徳ナイフ「DevToys」がバージョン２になってクロスプラットフォームやCLI対応しさらに便利すぎる - Qiita
はじめに 以前紹介させていただき、2022年Qiitaのいいねランキング18位、ストックランキング20位を記録したこちらの記事の続編です！ DevToysはリリース後しばらく定期的なバージョンアップが続けられていましたが、去年の7月からぱったりとアップデートが止まっている状態でした。 リポジトリや作者のXを見るとバージョン２の開発を行っているようで、今か今かと待ち続けていましたが数日前リリース予告のポストを見つけて、今日ついにプレリリースされました！ ということで早速紹介していきます！ DevToysとは DevToysは「開発者のためのスイスアーミーナイフ」の紹介文の通り、開発時によく使うツールを十徳ナイフのようにまとめたアプリとなっています。 JSONの整形とかエンコードデコードetc... プログラミングや保守運用の調査でやりがちな作業をいちいち変換サイトを探したり、エディター拡張機
フロントエンドのビルドツールが色々ありすぎて、何がどうなっているのかがわかりづらいため、 各ツールができること、特徴 ツール間がどのように依存しあっているか を一気に調べて整理した。(情報は2023/10時点) 概要 ツールの依存関係整理 上層: dev server付きのバンドラ/ビルドツール。アプリ開発者が直接configなどを書いて取り扱うのはここが多いと思われる。(Next.jsに関しては、ビルド機能に着目した場合) 下層: やや基盤的なdev serverなしのツール群。 矢印は、明示的な依存関係を表す。実際には、明示的な依存関係がなくても、下層のツール群は上層のバンドラ(やRollup)に対してプラグインを提供していることが多い。 各ツールのできること整理 ツールごとに、大まかな機能区分で、できることとできないことをまとめた。 各機能区分の定義は次セクションを参照。 ツールごと
チュートリアル: Yjs, valtio, React で実現する共同編集アプリケーション - ROUTE06 Tech Blog
Yjsは、リアルタイム共同編集を実現するためのアルゴリズムとデータ構造を提供するフレームワークです。Notion や Figma のように、1 つのコンテンツを複数人で同時に更新する体験を提供することができます。 Y.Map, Y.Array, Y.Text といった共有データ型を提供し、それらは JavaScript の Map や Array のように利用できます。さらにそのデータに対する変更は他のクライアントに自動的に配布・同期されます。 Yjs は Conflict-free Replicated Data Types (CRDT) と呼ばれるアルゴリズムの実装であり、複数人が同時にデータを操作してもコンフリクトが発生せず、最終的に全てのクライアントが同じ状態に到達するように設計されています。 クイックスタート Y.Map がクライアント間で自動的に同期されるコード例を見てみましょ
ブラウザ上で簡単にデザインができるFigmaですが、人気の理由のひとつがプラグインを活用すれば自分好みにカスタマイズできる点でしょう。 たとえば、「できるだけ効率よく作業時間を短縮したい」というクリエイターの願いを叶えるAI機能を生かしたプラグインや、統一感のあるWebサイトに欠かせないデザインシステム作成プラグインなど用途によってさまざまです。 しかし、いざ探してみると、どこから見つけていいのか迷ってしまうほど膨大な数が公開されています。 そこでこの記事では、デザインをつくるときに役立つFigmaプラグインに絞り、リスト形式でご紹介します。 しかも、どれも無料。気になるアイテムはどんどん試してみましょう。きっとこれまで以上楽にデザインを作成できますよ。 このリストはこんな人におすすめ デザインのアクセントになる「あしらい」をさくっと作りたい どのプラグインを使えばよいか迷っている まわり
【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】
【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】 🤔 Vue.js って何から勉強すれば良いですか？ この疑問は Vue.js に限らず、多くの初学者の中でホットなトピックです。 すごく端的にこの問いに答えてみると、「好きにすればいい、正解はない！自分で考えなさい！」です。 これは確かにとても正しい意見[1]だと思いますが、そうは言っても初学者にとっては何から手をつけたらいいのかわからない状況が多いです。 と言うことで、上記のような前提は持ちつつ「まぁ、とりあえずこんな感じで良いんじゃないですかね(安牌)」と言う私(筆者)なりのアイデアを書いてみたいと思います。 ご参考までに 😙 それではスタート 💨 Vue.js の公式ドキュメント 「おいおい、急にハードルが高すぎるだろ...」 そう思った方も少なくないかもしれません。
仕事が早い人は使っている最新Web便利ツール34選
「Webサイト制作がもっと楽になる方法ってないの？」 「Web制作の最新ツールを試してみたい」 そんな方へオススしたい、Webデザイン制作に役立つツールや素材をまとめてご紹介します。 「これ、もっと早く知りたかった」と思うような便利ツールを中心にセレクトしています。 2024年のデザイントレンドにもぴったりな新Webテクニックを、次のプロジェクトに活用してみてはいかがでしょう。 一緒に最新デザイン素材やツールも目を通しておくと良いでしょう、特に今回は豊作でした。 コピペ系CSSツール 60 CSS 3D Buttons Free Collection CSSとHTMLのみで作られた3Dボタンと、本物そっくりな見た目の「スキューモーフィック」ボタンのコレクション。クリックするとコピーできます。 275 CSS Gradients Collection 美しいCSSグラデーション250カラーが
Making of “Kindolphin” | 麦 Baku
group_inou / HAPPENING group_inouとAC部のミュージックビデオ作品『HAPPENING』をWebアプリ化しました。デザインと実装は僕一人です。元のビデオがGIFアニメ縦長漫画が歌詞に合わせて自動スクロールする仕様だったので、GIFの質感をロスレスかつ自分のペースで楽しめるように、某電子書籍アプリのような体裁でインタラクションできるようにした次第です。 We have just released a Webtoon app that highlights the lyrics of group_inou's music video "HAPPENING". You can switch between Japanese/English, change colors, stop and have a close look, or just scratch and
Web アクセシビリティに興味があったので、まず機械的なチェックツールから学んで知識を増やそうということでこのサイトに @axe-core/playwright と markuplint を導入してみました。 @axe-core/playwright のセットアップ 既に Playwright が導入されている状況を想定し進めます。まず@axe-core/playwright をインストールします。 pnpm add -D @axe-core/playwright このサイトの場合 VRT として Playwright を動かしているテストがあるので(過去資料)、そのプロセスに同居する形で axe を実行することにしました。 e2e.test.tsimport AxeBuilder from "@axe-core/playwright"; import type { Page, TestI
目次＃ 前編 準備段階：計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Googleフォント。 ビルドの最適化 JavaScriptモジュール、モジュール/ノーモジュールのパターン、ツリーシェイ
SQL/コマンドインジェクション、XSS等を横串で理解する - 「インジェクション」脆弱性への向き合い方 - Flatt Security Blog
こんにちは、@hamayanhamayan です。 本稿ではWebセキュリティに対する有用な文書として広く参照されているOWASP Top 10の1つ「インジェクション」について考えていきます。色々なインジェクションを例に挙げながら、どのようにインジェクションが起こるのかという発生原理から、どのようにインジェクションを捉え、より広くインジェクションの考え方を自身のプロダクト開発に適用していくかについて扱っていきます。 SQLインジェクションやコマンドインジェクション、XSSのようなインジェクションに関わる有名な手法について横断的に解説をしながら、インジェクションの概念を説明していきます。初めてインジェクションに触れる方にとっては、インジェクションの実例や基本的な考え方に触れることができ、その全体像を把握する助けになるかと思います。 また、既にいくつかのインジェクション手法を知っている方にと
unjs/nitro+satori+sharpで動的OGP画像を自動生成する - くらげになりたい。
Nuxtだと、Nuxt SEO Kitのnuxt-og-imageを使えば、 vueコンポーネントとかHMLTをOG画像にできるけど、 unjs/nitroでもできないかなと思い、 いろいろ調べてみたときの備忘録(*´ω｀*) nuxt-og-imageの中をのぞいてみたら、 satoriとsharpを使ってたので、それを参考に実装してみた satori+sharpを使った画像生成 この3つのライブラリを使うと、HTMLをPNGに変換できるっぽい vercel/satori ... ReactNode(VNode)をSVGに変換 lovell/sharp ... SVGをPNGに変換 natemoo-re/satori-html ... HTMLをVNodeに変換 satoriはVercel社が出しているライブラリで、JSX形式で利用するっぽい。 なので、HTMLといってもReactNod
刮目せよ!! 2023年秋、TS連携もファイルサイズもUIもイケるようになった最近のScala.js事情の紹介 - Lambdaカクテル
最近Scala.jsの話をすると結構な人がRTしてくれる。TypeScriptの他にAltJSには今どんなのがあるのかな、という話に引用RTでScala.js今アツいですよという話をしたら結構ウケた。世間的にはTypeScript alternativeに興味がある人も多いようだ。一方、ネットに残っているScala.js情報は数年前のものが多いようで、あまり積極的に日本語での情報発信がなされていない様子。そこで、ここ最近Scala.jsはどういう感じなのか、そしてどうすれば始められるのかという情報をまとめると需要があるかもしれないと思い、書くことにした。 Scala.jsは数年前まではオモチャみたいな感じだったんですが最近はTSのライブラリから自動で型が生える仕組みがあったりめちゃバンドル小さくなったりとめちゃくちゃ進化してます!! https://t.co/c06IZGWhYF— Win
Adobe公式サイトに記載のある通り、Adobe XDは今すぐのサポート終了ではないものの、サポート終了にむけて長期の予告期間となっているようです。新規の開発も終了しているようですね。それに伴い、XDの代わりとしてFigmaを検討されている方もいるかと思います。 弊社ではAdobe XDからFigmaへの移行を約2年前に行いました。そこで、これまでにエンジニアが両方のツールを使用して感じた、Figmaの利点と使いにくい点をご紹介します。 Figmaの利点 ページ機能でのアートボード整理が便利 Adobe XDでは1つのキャンバスですべてのアートボードを管理するような構造になっていました。 Figmaではページ機能があり、これを利用してアートボードをグループ化できます。ワイヤーフレーム、要件定義、デザインカンプなどのプロジェクトを各ページに分類・整理することで、作業が効率的に進むようになりま
Figmaはデザイナー向けのUIデザインツールのように思われがちですが、Figmaを使ったプレゼンテーションスライドの作成や、デジタルホワイトボードツールのFigJamを活用したアイデア出しやプランニングなど幅広い用途があります。そして2月1日から正式版となったDev Mode（開発モード）は、デザインデータやその仕様を元にプロダクトを構築するための機能が備わっています。 Dev Modeは主にはコードを書く開発者にとって便利な機能があります。コード生成や、デザインの差分比較、アノテーションによるデザイン仕様の把握、Dev Mode用のプラグインや、VS Code拡張機能などが主な機能です。あまりそれらを使いこなせている実感がある人はまだ多くないようですが、焦る必要はありません。使える機能から徐々に理解し、慣れていってもらえれば良いなと考えています。 一方で「そもそもFigmaに慣れていな
SSGにNext.js以外を使わなくてもいい時代に、私は、Vikeを使いたいのです2024/02/14 「なぜSSGにVikeを使うのか」というタイトルにしたかったんですが、ゼクシィのCM構文が流行っているような気がして、乗っかってみました。あの雑誌を読んだことがないので、どういった層をターゲットに作られているのかかなり気になっています。 Vikeについてここでは紹介しないので、適宜 https://vike.dev を見てください。いつの間にか vite-plugin-ssr が名前を変えてマイティ・ソーになっていました。 なぜSSGにVikeを使うのか簡素よくある Next.js is too much for us というモチベです。 fetchのキャッシュまで望んでいなかったり、案外作りたいものはfile based routingさえ枠組みがあれば他は自分で組みたいし、複雑なもの
【Next.js × @vercel/og】セミナー登壇者風に誰でも予定を告知できるアプリを作りました - Qiita
はじめに 突然ですがみなさん、 X（旧Twitter）でこんな感じのイベント告知画像を見たことはありますか？ 最近はセミナーや講演会に登壇する人たちが、イベント告知のためにこのような投稿をすることが増えているように感じます。 そして、こうした投稿を目にするたびに、自分は次のようなことを思います。 人生で １ 回でいいから！！こんな感じで予定を告知してみたい！！なんかすごそう！！ そんな（超どうでも良い個人的な）欲求を叶えるため、「誰でもセミナー登壇者風に予定を告知できるアプリ」 を作りましたので、簡単に紹介したいと思います。 （本当はクソアプリ Advent Calendarに投稿したかったけど、諸々の事情により断念） 作ったもの Seminar Post Generatorという 「セミナー登壇者風に個人的な予定を告知できるWebアプリ」 を作りました。 ▼サービスURL ▼リポジトリ
ソースコードを共有してみんなに見てもらう機会があるでしょうか。そんな時、せっかく見てもらうなら、美しく読みやすいコードを見てもらいたいと思うものです。今回紹介するJavaScript製のツール「Carbon」を使うと、手軽にソースコードを美しい画像に変換して共有できます。 ソースコードを画像に変換するJSライブラリ「Carbon」 見栄えの良いソースコードを共有しよう 昨今、プログラマーであれば、誰しも自分の書いたソースコードを誰かに見てもらう機会があります。プログラミングに関するコラムを書いたり、作成したライブラリの告知のためにSNSで共有したり、プレゼンテーションでプログラムのコードを解説したりと、みんなに見てもらうという場面が多くあります。 そんな機会に、より美しく見栄えの良いソースコードを見せたいと思うことでしょう。今回紹介するJavaScriptのライブラリ「Carbon」を使う
こんにちは。ひらやまです。 今回は、これまでフロントエンド環境を作ったり、運用したり、設計のアドバイスをしたりしてきた私がひとまずたどり着いた、このくらいの塩梅の設計が良いのではないかと考えている一つの案をみなさんに共有しようと思います。 フロントエンド設計の必要性 フロントエンドは JSON 色づけ係と言われることもありますが、ただ JSON をきれいにしてユーザに見せる以上の難しさを感じることもあるのではないでしょうか。 実装を完遂するために必要となるスキルが広いため、様々なバックグラウンドを持つ人がコードを書くことになりやすいです。フロントエンドエンジニアと呼ばれる人も、私みたいにマークアップエンジニアからフロントエンド領域に手を伸ばした人もいれば、デザイナーやバックエンドエンジニアなどの領域からこの環境に挑戦される方もいらっしゃいます。 このような様々な背景を持つ人たちが一つのコー
そもそもアクセシブルなサービスとは、どのようなサービス、実装を指すのでしょうか。 端的に表現するならば、「伝えたい情報が正しい文書構造によって実装されているサービス」だと考えます。 例えば以下のようなボタンの実装があったとします。 こちらがレンダリングされた結果です。 こちらがスクリーンリーダーの結果です。 (Macの場合command+F5でVoiceOverを使用することができます。) この例の場合、視覚的な情報と、支援技術を介して得られる情報とで差異が産まれてしまっています。これはアクセシブルではありません。（例外[1]もあります。） この例の場合、ボタンの働きが編集であれば、スクリーンリーダーにより取得した削除という情報は誤りになります。 スクリーンリーダーのような支援技術は、アクセシビリティツリーを元に情報の処理・出力を行います。 このアクセシビリティツリーは、DOMツリーという
AppleがiOS 17・iPadOS 17・macOS Ventura・macOS Monterey・macOS Sonoma向けにSafari 17.0を2023年9月26日にリリース予定です。リリースに先立って、Safari 17.0のレンダリングエンジンであるWebKitのアップデート内容をAppleのWebKit開発陣がブログでまとめています。 WebKit Features in Safari 17.0 | WebKit https://webkit.org/blog/14445/webkit-features-in-safari-17-0/ ◆HTMLのアップデート ・「search」要素をサポート 検索機能は多くのウェブサイトにとって重要な機能となっていることを受けて、新たに「search」要素が追加されました。従来は、全てのユーザーが検索機能を適切に利用できるようにするに
アセットの import を簡単にする TypeScript Language Service Plugin を作った - mizdra's blog
Web ページを作るときに、あらかじめファイルに書き出しておいた画像 (アセット) をページに埋め込みたいことがよくあると思います。例えばヘッダーにサービスのロゴ画像を埋め込む場合、以下のようなコードを書くと思います。 // src/components/Header.tsx export function Header() { return ( <header> <img src="/assets/logo.png" alt="Logo image" /> {/* ... */} </header> ); } 一方で、最近のWeb フロントエンドフレームワーク (例: Next.js, Remix) を使う場合は、import 文を用いて以下のように書くことが多いと思います。 // src/components/Header.tsx import I_LOGO from '../asse
はじめに 著名な Rubyist にインタビューを行う企画「Rubyist Hotlinks」。第 39 回となる今回は、古橋貞之さん。 では、お楽しみください。 インタビュー 聞き手 卜部さん (@shyouhei) 語り手 古橋貞之さん (記事中「古橋」) 野次馬（古橋さんの現職であるトレジャーデータの同僚と元同僚のみなさん） 国分さん、成瀬さん、田籠さん、金子さん、三村さん 日にち 2023 年 5 月 11 日 写真提供 : 目次 Table of content プロフィール 卜部 はい、じゃあお疲れ様です。ゆるりと始めていきますが。るびまのインタビューはポッドキャストにしないという信念の元に、ポッドキャストにしていなくて。 三村 そんな信念が。 卜部 なんでかっていうと、いくら迂闊なことをゆっても後から編集できるからっていう。これがね、やっぱ迂闊なことを言ってもらわないと楽しい
UnJS のライブラリ多すぎて結局何を使えば良いのかわからないという方は、とりあえずこの unkit を入れてみましょう。 31～40 31. 🛣️pathe ── あらゆる環境で統一的に使えるファイルパスモジュール resolve('../') のようなパス解決を行うモジュール。 node:path と同じようなことができますが、パスの区切りに使われる文字が、Windowsではスラッシュではなくバックスラッシュで書かれることがあり、どちらの書き方でも認識できるようになります。 第2引数でエイリアスを渡せる resolveAlias 関数なども提供されています。 ちなみに11/12時点で radix3 の Star数を抜いているので既に30位です。 32. 👂listhen ── HTTPリスナーを提供するパッケージ npx listhen -w ./index.ts のようなコマンド
こういう画像を作る仕組みを作った。 画像を生成したい人は世間にそこそこいるかもしれないし、自分は比較的？簡単な方法でそれを達成した。せっかくなのでやり方をみんなに教えようと思ってこの記事を書いている。 全てのソースコードは以下にOGImagekunという名前で公開している。 github.com OG:Image OG:Imageについて軽く説明しておく。知っている人は読み飛ばしていい。 Twitterやブログの埋め込み記事などで、このようなちょっと豪華な画像を見たことがあると思う。 最近のサイトでは、ユーザがより自分のコンテンツを見てくれるために、こういったサムネイルを表示するのが当たり前となっている。 これは、ウェブサイトや動画、記事などへのリンクをSNSなどに書き込むと、自動的にそのサムネイル的な画像を表示してくれる、という仕組みがそうしている。これはTwitterではTwitter
この記事は、爆速アップデートのSTUDIOに対応した「できること・ちょっと難しいことまとめ」です。あれってSTUDIOでできたっけ？と思った時にサクッとチェックできるような内容にしています。 そして、この記事を読む前にまず伝えたいのが「STUDIOは、必須なことはだいたいできる」ということです。Webサイトを制作・運用する上で必要な機能はしっかり揃っており、よりリッチに実装する場合に必要な機能の一部は未対応。例えば、パララックスのようなリッチな表現やECサイトのような専門的な機能などは未対応であるというニュアンスで捉えています。 また「機能はないけど再現できること」も補足していますので、STUDIOの学習やSTUDIOを用いたプロジェクトにご活用ください📝 ⚠️プランごとの機能や制限についてはSTUDIO公式ページの「プラン別機能比較」を参照してください 🔍使い方「cmd + f」や「
「Lottieロッティー」はAirbnb社が開発した、ベクター画像をアニメーションさせることができる技術・ファイルフォーマットです。 前回の記事では、Lottieの概要から、Figmaを使った作り方、LottieFilesを用いた書き出し方法を紹介しました。 本記事ではAdobe After Effectsを使ったLottieの作成方法から書き出し方、表示確認までを紹介します。 ▼Lottieの作例 サンプルを別ウインドウで開く ソースコードを確認する 作り方 - Bodymovinで書き出し After Effectsでアニメーションを作成し、After Effectsの拡張機能「Bodymovin」を使って書き出す方法と、「LottieFiles」で書き出す2種類の方法を紹介します。 ▼Lottieの作成・書き出し・実装までの一連の流れ 完成品のサンプルを別ウインドウで開く アニメーシ
文字・音楽・画像を同時に処理する「マルチモーダルAI」の性能がよく分かるGoogleの「Gemini」ハウツー動画11種を解説
2023年12月6日、Googleが文字・音楽・画像を同時に処理するマルチモーダルAI「Gemini」をリリースしました。リリースに合わせてGeminiの使い方解説動画がアップロードされていたので確認してみました。 How it’s Made: Interacting with Gemini through multimodal prompting - Google for Developers https://developers.googleblog.com/2023/12/how-its-made-gemini-multimodal-prompting.html Everything to know about Gemini, Google’s new AI model https://blog.google/technology/ai/gemini-collection/ ◆目次
皆さんこんにちわ。 フリーソフト紹介のコーナーです（新コーナー） 僕はフリーソフトの同人的な文化が割と好きなんですが、昨今のIT業界はマネタイズがどうのこうのといちいち恰好付けるのが上手になってしまいました。新しいアプリ作品も出てこなくなっている。 そんな中、Pythonで素晴らしいWindowsアプリを自作した方が居まして、紹介します。 www.youtube.com yukisakura001.github.io 機能概要 十徳ナイフのようなPC用便利アプリでして、なんというか、上げきれないほどの機能がボタン一つでアプリランチャーのように呼び出せる、そんなアプリです。 （’僕のと違い）インストーラが付いており、なかなか恰好いいです。 このように挙げきれないので文字起こししました。 カテゴリ 機能 テキスト・情報 空白削除、改行調整、重複削除、筆記体変換、テキスト編集、文字変換、ソート、
CSSで色変更もできるSVGアイコンを使うための3ステップ
こんにちは。みみほくろです。 Webデザインでアイコンをつけたいとき、何を使いますか？ 画像を読み込む、疑似要素を使って描画などがよくある方法かと思いますが、今回はSVGを使ったアイコン表示について紹介します。 SVGとは SVGはWebに適したベクターファイル形式の画像フォーマットの一つで、拡大縮小してもPNG画像やGIF画像のように解像度を損なうことがないという大きなメリットを持ちます。 また、図形をテキストで情報を保持しているため、ファイルサイズが小さく、テキストとしてSEO的にも効果があることもメリットの一つです。 ただ、写真のような複雑な画像には適していないので、アイコンのようなシンプルな画像に使うことが主な使用用途になります。 SVGの中身を見ると、簡単な図形であっても一見複雑なためにかなり取っつきにくく感じると思います。が、基本的に内容を大きく変えることはないので、画像自体の
Webサイトやデザイン制作で、やたらと時間がかかってしまうとお困りのクリエイターの方へ。 この記事では、SNSなどでいま話題の最新ツールやフリー素材を50個まとめており、制作時間を短縮したいというひとに選ばれています。 日頃のワークフローに活用して、ストレスのないクリエイティブな制作ライフを実現しましょう。 AI関連ツール RenderNet – Create AI images with Unmatched Control 一貫性のある同一人物によるキャラクター画像を生成できるAIツールで、人種やスタイル、性別などはもちろん、顔はそのままでポーズの変更や、背景の再生成などが可能。 Textify — Fix text in images — Storia AI 元の背景を維持したまま、シームレスに文字テキストのみを変更できるAIツール。既存のフォントスタイルに合わせることも、新しいものを
本記事はnote.comにて公開された記事の転載です。内容が開発者向けということもあり、Zennのほうにも投稿してみます。 Figmaはデザイナー向けのUIデザインツールのように思われがちですが、Figmaを使ったプレゼンテーションスライドの作成や、デジタルホワイトボードツールのFigJamを活用したアイデア出しやプランニングなど幅広い用途があります。そして2月1日から正式版となったDev Mode（開発モード）は、デザインデータやその仕様を元にプロダクトを構築するための機能が備わっています。 Dev Modeは主にはコードを書く開発者にとって便利な機能があります。コード生成や、デザインの差分比較、アノテーションによるデザイン仕様の把握、Dev Mode用のプラグインや、VS Code拡張機能などが主な機能です。あまりそれらを使いこなせている実感がある人はまだ多くないようですが、焦る必要は
「Brotliアルゴリズム」gzipに代わる高速圧縮術
どのようなサイトにおいても、スピードは重要です。高速読み込みの追求のために、さまざまな技術が利用されています。その中の一つが、サイトの機能に悪影響を与えることなく、使用するコードを最小限に抑えること。gzipでの圧縮でそれを実現することができますが、Brotliを用いた圧縮という新手法もあります。 これはGoogleが開発したアルゴリズムで、gzipを超える（あるいはそれに取って代わる）多くのメリットが豊富に詰め込まれています。今回の記事では、Brotliを用いた圧縮のスピードや効率を中心に、その技術に迫りたいと思います。 Brotliアルゴリズムを用いた圧縮について動画での解説もご用意しています。 Brotliを利用した圧縮とは何か、これがサイトで使用されているかどうかを確認する方法、そして、必要な場合に実装する方法も扱います。圧縮アルゴリズムにおけるBrotliの位置付けと、他の選択肢
最近は地図関係のアプリを開発してて、ライブラリも多く実装したものを定期的にメモに残しておこうと思う Google Map の API が高額でいろいろなレイヤーを重ね合わせるのが少し面倒そうだったので、OpenStreetMap を使う方法を探索した React Leflet (Leaflet) Deck.gl MapLibre GL JS (fork of Mapbox GL JS) react-openlayers OpenSteetMap を使えるライブラリはかなりたくさんあり色々試したが、本記事では React Leaflet でシンプルな地図を表示させたメモです 環境 React 18.2.0 leaflet 1.9.4 react-leaflet: 4.2.1 React Leaflet を使う準備 $ npm i react-leaflet leaflet $ npm i -
SVGファイルをDOMにレンダリングする仕組みで実装 mimo氏：このような技術選択を経て、Web Componentsとして自分たちで実装を進めることになりました。ここからは、Web Componentsを自前で実装することにした理由と方法を話します。 Web Componentsとして実装が決まった@charcoal-ui/iconsは、内部でSVGアイコンを文字列として取得して、HTMLにそのタグをレンダリングするという仕組みになりました。 使うアイコンだけをimportすることができ、特定のフレームワークに依存することなく実装ができたので、無理のない実装になりました。 ちなみに、「Ionic」というライブラリの中にある「ion-icon」というアイコンライブラリが、これに近い実装になっています。そのくらい良い手段だったのかなと思っています。 実際、作るにあたっては、Vue 3の実装
フォントを様々な形式に変換する fontconv を作りました。 .ttf, .otf, .svg, .woff, .woff2 の相互変換とサブセット化に対応しています。.eot も出力だけは対応しています。 なぜ作ったかというと、フォントを Web 上で利用するための woff2 最適化に苦労したからです。 私の場合は以前 ttf2svg を自作したので、 ttf2svg -> svg2woff2 の2回で woff2 は最適化できるようにしていたのですが、 巷のアイコンは woff2 形式でしか配布されていないことがあることに気付きました。 これがなかなか強敵で、woff2 をロードして最適化した後、 woff2 へ再変換できるライブラリが見つかりませんでした。 具体例を上げれば Material Icons の最適化は大変で、びっくりしました。 さすがにこれはおかしいなと思い、様々
Inertia.jsの基本的な特徴や仕組み（徹底解説）
Inertia.jsは、クライアントサイドとサーバーサイドの両方のレンダリングを組み合わせたSPA（シングルページアプリケーション）を作成することができる先進的な仕組みです。 この記事では、InertiaがいかにSPAの構築を容易にし、開発者が抱える他の多くの問題を解決できるのかをご紹介します。また、このツールの主要な機能も解説します。 それでは、サーバサイドアプリケーションとクライアントサイドアプリケーションがどのように機能するか、という基礎から理解を深めていきましょう。 サーバーサイドレンダリングとは サーバーサイドレンダリング（SSR）とは、アプリケーションがウェブページのコンテンツをブラウザではなくサーバー側でレンダリングまたは表示できるようにする仕組みを指します。例えばある人が「example.com」にアクセスしようとすると、その人の使用するブラウザはサーバーにリクエストを送信
Astro 2.x から 3.0 へアップグレードした際に、レスポンシブイメージは対応していないため、ビルトインされている <Image /> コンポーネントの導入は見合わせることにしました。 しかし、本サイトのブログ記事において、パフォーマンスのボトルネックとなっているのは画像ファイルです。また、別のプロジェクトで Astro を使用するときにも、この課題に向き合わなければなりません。 そのため、この記事では Astro でレスポンシブイメージを実装する方法を考えていきます。 以降、Astro の getImage() 関数でレスポンシブイメージを実装する方法を解説していますが、問題点も見つかりました。特に、ホスティングサービス側でビルドする場合には注意が必要です。 本記事における Astro のバージョンは 3.1.4 を前提としています。 まず、候補として挙がるのは「Astro Im
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
知っておくと仕事が捗る便利ツール17選 - Qiita
設計ドキュメント腐る問題、Git管理で運用してみた結果 | フューチャー技術ブログ
JavaScriptビルドツールの整理 各ツールの機能と依存関係
Figmaのデザイン制作が楽になる時短プラグイン30選
axe-core/playwrightとmarkuplintを導入しアクセシビリティの自動テストをできるようにした
フロントエンドパフォーマンスのチェックリスト2021年版（PDF、Apple Pages、MS Word）-後編 | POSTD
エンジニアがAdobeXDからFigmaに移行して感じたこと | techlab / baigie
Dev Mode活用の前に開発者が知っておきたいFigmaのこと10個+α｜Hiroki Tani
SSGにNext.js以外を使わなくてもいい時代に、私は、Vikeを使いたいのです
ゼロからはじめるJavaScript(31) 美しいソースコードを共有するJSツール「Carbon」を使ってみよう
いい塩梅を目指したデザインエンジニアによるフロントエンド設計 - estie inside blog
aria-labelで始める、アクセシビリティ改善活動
Safari 17.0がリリース、プロファイル機能のほか、多数のAPIや要素のサポートが追加される
Rubyist Hotlinks 【第 39 回】古橋貞之 さん
UnJS にどんなツールがあるのかすべて紹介してみた（後編）
自前でOG:Image生成メカニズムを構成する方法 - Lambdaカクテル
STUDIOでできること・できないことまとめ【2024.4月更新✍️】｜はるかな
最新版！ Lottieアニメーションの作り方 - After Effects編 - ICS MEDIA
【フリーソフト】Yukis Army knifeの紹介 - sheephumanのブログ
できるクリエイターへの近道、話題の最新Webツール・デザイン素材50選
Dev Mode活用の前に開発者が知っておきたいFigmaのこと10個+α
OpenStreetMap + React Leaflet で地図を表示したメモ - かもメモ
よりハイパフォーマンスに動くライブラリへ ピクシブ・デザインシステムの展望と乗り越えるべき課題
フォントを様々な形式に変換する fontconv を作った
Astro でレスポンシブイメージを実装する | grip on minds