サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
株式会社GENDA モバイル開発部の名取です。 この記事は GENDA Advent Calendar 2025 シリーズ2 Day 11 の記事です。 概要 この記事ではFlutterアプリ開発において、UIを洗練させるために個人的におすすめなpackageを10個厳選して紹介します。 Claude Codeをはじめとするエージェント型のコーディングツールが普及し個人開発を行う方も増えてきたと思います。私もその一人ですが、エンジニアが一人でアプリ開発を行うとどうしてもUIが質素になりがちです。FlutterにはUIをリッチにする素晴らしいpackageがたくさんあるので私が個人開発で使用しているものを中心にご紹介できればと思います。 1. dotlottie_loader lottieアニメーションを再生するためのpacakgeです。 公式サイトには数多くの無料で使えるアニメーションが
先日のパンくずナビのマークアップ論点列挙の記事でも少し触れたとおり、WCAGTechniques でパンくずナビの挿入位置のベストプラクティスが明言されることとなりました。 G65: Providing a breadcrumb trail | WAI | W3CTechnique G65: Providing a breadcrumb trail (position). · Issue #3891 · w3c/wcagG65 - breadcrumbs position by giacomo-petri · Pull Request #4545 · w3c/wcag本記事の投稿時点（10月16日11:30）で WCAGTechniques G65 のページはまだ更新されていませんが、PR はマージされたのでじきに反映されるでしょう。とりあえずはプレビューページ(deploy-pre
To open a <dialog> modally by clicking a <button> you typically need an onclick handler that calls the showModal method on that <dialog>. <button onclick="document.querySelector('#my-dialog').showModal();">Show Dialog</button> <dialog id="my-dialog">…</dialog> With invoker commands–available fromChrome 135–buttons can now perform actions on other elements declaratively, without the need for any J
Intro 「Background Fetch を使っているのが、世界であなたのサイトだけなんだけど、この機能消しても良い?」 と、TPAC 2025 の会場で、Chrome の Service Worker チームの開発者と話していた際に言われた。 Background Fetch Background Fetch は、Service Worker を使って、文字通り Fetch をバックグラウンドで行う機能だ。 特にAndroid では、ダウンロードのUI にプログレスが表示され、終わったら CacheAPI に保存されます。 筆者が運営している mozaic.fm のサイトは、Podcast アプリと同じようなことを Web でもできるように PWA 化し、様々な機能を試していた。 PWA: モバイルでインストールしてアプリとして使える Background Fetch: エピ
Published on December 8, 2025 Updated on December 8, 2025 Table of Contents Table of Contents はじめにCSS Masonry を振り返るCSS Houdini LayoutAPI Grid ベースとして黎明したネイティブCSS Masonry / grid-template-*: masonry; & masonry-auto-flow Firefox でのフラグ付き実装と Safari TP での実装 「Grid ベース」 か 「display: masonry」 か - “Just Use Grid” or “New Masonry Layout”?ItemFlow という転換点 The State ofCSS Masonry Grid-Lanes ✅Item Flow の導入
フロントエンドカンファレンス関西 レギュラートーク登壇資料 実装デモ https:/…
Previous slideNext slideToggle fullscreenOpen presenter view まずはクイズ！ MDN に掲載されているCSS プロパティは 全部でいくつあるでしょう？ color, font-size, margin, display... 正解: 532 個！ 532 個読んできたよっていう話をしますフロントエンドカンファレンス関西2025 このプロパティいつ使うん？ ~mdn のCSS リファレンス、全部読んでみた~ yata(@0e2b3c) 自己紹介 yata(@0e2b3c) 株式会社 LayerX バクラク勤怠 SWE 2025 年 新卒入社 スマブラとヨルシカと礼賛と ゆる言語学ラジオが好きです 今回話すこと MDN のCSS プロパティ リファレンスを全部読んできました その中で印象的だったものを 11 個紹介します FA
数週間前、私たちの本番アプリがハングし始めました。コンポーネントがランダムに読み込まれなくなったのです。ユーザーの画面ローディングスピナーの前で固まってしまいました。40時間デバッグした末に、私たちは気づきました。React Server Components（RSC）が問題だったのです。 イントロダクション：理想 vs. 現実 当初、React Server Components（RSC）は革命的であるはずでした。Reactチームは以下を強調していました： ✅ パフォーマンスの向上 ✅ バンドルサイズの削減 ✅ 自動的なコード分割 ✅ コンポーネントからのダイレクトなデータベースアクセス 私たちは彼らを信頼し、Next.jsアプリ全体をServer Componentsと共にApp Routerへ移行しました。 3カ月後、私たちのアプリは以下の状況に陥りました： 初期ロードが遅い デバ
🔀 🏠 ℹ️ ❌ About this tool This tool is part of https://scroll-driven-animations.style/ and should help you get a grasp of how all View Timeline Ranges work. cover: Represents the full range of the view progress timeline. entry: Represents the range during which the principal box is entering the view progress visibility range. exit: Represents the range during which the principal box is exiting th
3DコンテンツをJavaScriptであつかうThree.jsでは、3Dシーンに印象的な効果を加えるポストプロセスの機能があります。 ポストプロセスとは、レンダリングされた画像や映像に後からエフェクトを加える処理です。グリッチやノイズなどの演出を加えたり、色を変化させたり、独特のにじみを加えたりと、さまざまな種類があります。 この記事ではポストプロセスを使い3Dシーンにエフェクトを追加する方法を紹介します。以下のデモはオリジナルの3Dシーンにポストプロセスを加えたものです。見た目の大幅な変化とは裏腹に、実装は意外とシンプルなので試したことのない方はぜひチャレンジしてみてください。 サンプルを別ウインドウで開く コードを確認する ポストプロセスの事例 まずはポストプロセスが効果的に使われているウェブサイトを紹介します。 『WindLand - By Neotix』は、Three.jsを使った
こんにちは。株式会社EVERSTEELでソフトウェアエンジニアをしている日野原です。 主にフロントエンドを担当しており、技術としてはNext.jsを使用しています。（詳しい技術内容はこちらを参照） 少し前の話になりますが、ゼロからテストを導入したので、その過程や戦略について話していこうと思います。フロントエンドのテストを検討している方や、テストの運用方法を迷っている方の参考になるかと思います。Reactアプリにおけるテスト戦略と実践ガイド 一昔前はフロントエンド開発においてテストはあまり重要視されていませんでした。 しかし、フロントエンドの複雑さが増したため、最近ではテストが重要視されており、テストを書くことが求められています。 ただ、なぜテストが必要なのか、どのようなテストを書けば良いのか、どの程度のバランスでテストを構成すべきなのかは、十分に理解されていない場合も多いかと思います。
ホームニュース一覧デジタル庁デザインシステムの活用例：よくあるアクセシビリティの課題とその解決策 デジタル庁デザインシステムの活用例：よくあるアクセシビリティの課題とその解決策 目次 はじめにデジタル庁デザインシステムを採用するメリット最新のアクセシビリティの国際規格であるWCAG 2.2の達成基準86項目のうちの43項目で「適合」または「適合が容易」にサンプルコードをコードスニペットで提供、すぐに活用可能よくあるアクセシビリティの課題とデジタル庁デザインシステムを活用した解決策（1）具体的なアクセシビリティの性能について：視野狭窄の当事者による閲覧に対応視野狭窄を考慮したアクセシビリティ1：「操作対象から離れた重要なコンテンツの変化に気づけない」問題と解決策視野狭窄を考慮したアクセシビリティ2：「右端にある要素に気づかないことがある」問題と解決策視野狭窄を考慮したアクセシビリティ3：「右
導入：なぜ、あなたの「優しさ」は利用者を疲弊させるのか問題提起：「耳に余る」代替テキストの現状 最近、SNSやウェブサイトで、「ぎっちぎちに情報を詰め込んだ『俺の、俺の話を聞けー』っぽい」代替テキスト（alt属性）が増えています。 製作者側は「これだけ書けば大丈夫だろう」「情報不足を解消しなければ」という善意や努力のもとで記述しているのでしょう。しかし、その「過剰な情報提供」は、スクリーンリーダーを利用するユーザーにとっては、かえって大きな負担や苦痛となりかねません。 私たちは今、代替テキストの記述という技術的な問題ではなく、その背後にあるアクセシビリティの目的と哲学について、根本的に立ち止まって考える必要があります。 ジレンマの提示：「障害者のため、だけではない」の危うさ この議論を進めると、「代替テキストは障害者のため、だけではない」という意見が必ず出てきます。この言葉は、一見、正しい
2025年9月6日（土）に北海道札幌市で開催された 「フロントエンドカンファレンス北海道2025」に、テックタッチはゴールドスポンサーとして協賛しました。 当日はスポンサーブースを出展し、来場者を対象にフロントエンド技術に関するクイズを実施しました。技術系イベントでのブース出展は、テックタッチとして初の試みです🌟本記事では、ブース企画を担当した tsune、aki、shoko から、クイズの内容や結果をレポートします。 当日のブースの様子（左：フロントエンドエンジニアの tsune、右：プロダクトオーナーの kuni） ブース企画：テックタッチフロントエンドクイズ クイズ成績サマリー 問題と解説 Q1. document.elementsFromPoint() の結果に含まれる要素は次のうちどれ？ Q2. delete Date.prototype.toJSON した後に JSON.s
はじめに 昔からサービスの運営者を困らせてきたものはいくつかあると思いますが、 特に代表的なのが “自動化による悪用” です。スクレイピングによる無断データ収集や、予約システムを狙ったボット、さらには不正ログインを試みる自動化ツールなど、その形は時代とともに多様化してきました。 X (旧Twitter) には、今でも詐欺DMを送るボットが多いです。(自分は毎日来ます。) また、大阪万博の予約を勝ち取るために、サーバーに過度の負荷をかける形で自動化が悪用された事例もあります。 そして、最近はAIを利用した巧妙なものも増えています。 この記事を読んで、そのような事態に対処できるように知識が少しでも増えれば良いな、と思っています。 ぜひ少しでも役に立てば、いいね・他SNSへの共有など、よろしくお願いします！！ 実例 2025年現在、大阪万博なる物が開催されており、DX化の一環として予約をウェブ
この記事では、埋め込み動画の Youtube プレーヤーの再生ボタンやシークバーなどのコントロールを使わずに、JavaScript で動画の再生・一時停止や再生位置の移動を行う方法について説明します。また、HTMLコントロールからYoutubeプレイヤーを操作する実装例を紹介します。説明の動画例にはGoogle アプリの CM 動画を使います。 動画の埋め込み 自分で書く必要はありません。目的の動画の「共有」メニューから「動画の埋め込み」を開くと、次のようなタグを自動生成してくれます。特定の動画を埋め込む場合でも、src 属性を変更して読み込む動画を動的に指定する場合でも、ベースは同じです。 <iframe width="560" height="315" src="https://www.youtube.com/embed/ef41Q2-DQ2Q" title="YouTube vid
PrettifyCSS? Prettifying makes inspecting theCSS easier, but very slighty changes the numbers. The best way to analyze yourCSS is to use theCSS analyzer, but if you're in a hurry or if you want an opinionated tool, then you can use thisCSS Code Quality analyzer.It will use the output of theCSS analyzer to run a couple of checks and turn that into a set of recommendations for yourCSS.It wi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
