アクセシビリティ改善中！ LIFULL HOME'S スマートフォンサイト - LIFULL Creators Blog
フロントエンドエンジニアの嶌田です。株式会社 LIFULL でプロダクトのアクセシビリティ向上をミッションとして活動しています。 本日は、不動産・住宅情報の総合サービスである LIFULL HOME'S のスマートフォンサイトにおいて、過去半年間で実施したアクセシビリティ向上施策をご紹介します。ご紹介する施策のうちいくつかは、内容を掘り下げて実装コードを交えて解説をしていきます。 それでは、早速アクセシビリティ向上のために実施した施策を見ていきましょう。 ボタンを正しくボタンにする 追加コンテンツを読み込む機能のフォーカス管理 チェックボックスに適切な名前を付ける カルーセルをアクセシブルにする スクリーンリーダーによる検索結果の件数の読み上げ そのほかの改善点 おわりに ボタンを正しくボタンにする ウェブサイトにおいて、ユーザーがアクションを実行するためにボタンが用いられます。ボタンは通
アイコン画像実装15年の変遷 - LIFULL Creators Blog
LIFULLでフロントエンドエンジニアをしている齋藤です。 2008年入社なので15年目ぐらいの古株です。今は LIFULL HOME'S の賃貸部門でフロントエンド開発をしています。 いきなりですが、みなさんはアイコンをどう実装していますか？ アイコンフォント、スプライト、一つ一つ切り出す。フォーマットもSVG、PNG、Fontなどなど。 実装方法はいろいろありますし、サイト規模や運用体制などでどれが扱いやすいかは変わってきますよね。 たかがアイコン、されどアイコン。 利用頻度が高く、大きさや色が微妙に違ったりすることも多くてこれまでいろいろと試行錯誤してきました。 そこで今回はLIFULL HOME'Sでどんなアイコン実装が行われてきたかを振り返ってみたいと思います。 これまでの歩み。 都度一つ一つ切り出しての対応 スプライト画像での対応 SVG symbolを利用した対応 data-
LIFULL HOME'S 賃貸物件詳細ページの基盤刷新について - LIFULL Creators Blog
プロダクトエンジニアリング部の海老澤です。 普段は LIFULL HOME'S の賃貸部門のフロントエンド開発をしています。 近年、LIFULL の開発部門では「開発生産性」という言葉が取り沙汰されるようになりました。 LIFULL HOME'Sの主要リポジトリは10年以上運用され続け、今も多くの開発者によって日々改修され続けています。 長い年月の中で小さな設計ミスも積み重なって大きくなり、ちょっとした実装でも入念な調査が必要となり開発生産低下の要因となっていました。 また10年以上前に採用したフレームワークで稼働しているため、今ではドキュメントを探すのも一苦労という具合です。 そこで主要開発部門では「自部門の機能はマイクロサービスへと切り離し、各々で面倒を見る」という方針になりました。 賃貸部門も同様に機能の切り離しを始め、先日「物件詳細ページ」のマイクロサービス化を行いました。 今回は
フロントエンドエンジニアが組織横断のアクセシビリティ専門部署を立ち上げた - LIFULL Creators Blog
フロントエンドエンジニアの嶌田です。2022 年 4 月からアクセシビリティ推進グループ（以下推進グループ）に在籍しています。今回はこの新しくできた部署について簡単に紹介します。また、会社や私がアクセシビリティに取り組む理由を語ってみようと思います。 弊社プロダクトのアクセシビリティを推進する取り組みは、これまでも有志が集まるワーキンググループの形で存在していました。ワーキンググループについては以前に Ltech という社外イベントで紹介しました。今年度からの新設部署はワーキンググループの流れを汲んでおり、推進活動に本腰を入れてコミットしていくために新設された部署です。 参考：Ltech#14 「LIFULL HOME'S」のフロントエンドについて語り尽くします！ 開催レポート - LIFULL Creators Blog 推進グループは上長１名に、ほぼフルタイムでアクセシビリティにコミッ
清く正しく「サービス共通ヘッダ・フッタ」を実装する - LIFULL Creators Blog
フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。 この記事では、LIFULL HOME'S のサービス共通のレスポンシブ版ヘッダ・フッタを実装するために動員した「強く・堅牢に実装するためのノウハウ」を紹介します。 どこにでも組み込めるように実装する 重複しないクラス名ルールを設定する 詳細度や継承とうまく付き合う プレーンな技術を使う ブレークポイントや z-index 等をカスタマイズ可能にする
コードで学ぶAWS入門
各方面でご好評をいただいている本講義資料ですが，この度増補・改訂のうえ書籍として出版することが決定いたしました！ 書籍限定の書き下ろしの３章 (約100ページ分！)を新たに追加して，2021年9月27日に発売予定です． この資料を気に入っていただいた方は，手に取っていただけるとありがたいです． ここで公開している資料は引き続きオンラインで無料で読めますので，ご安心ください🙇
スペシャリストから学ぶコンテナ技術 第 1 回 - 変化を求めるデベロッパーを応援するウェブマガジン | AWS
こんにちは、テクニカルソリューションアーキテクトの原田です。 普段は、業種業態や技術領域を問わず、様々なお客様の AWS 活用支援を担当しています。 皆さんは「コンテナ」という単語を聞いたことはありますか ? 今日、多くのお客様が本番環境でコンテナを採用し、ビジネスに活かしております。その一方で、「コンテナを使ってみたいけど、コンテナ自体がよく分からない」「何から勉強して良いのかわからない」「なんとなくコンテナを使い始めたけれど、これでいいのか不安」といったコンテナ自体に関するご相談をいただくこともあります。 本記事では、AWS 上でのコンテナの利用方法といった AWS 自体の話からは少し離れて「コンテナ」自体にフォーカスして、そもそもコンテナとは？なぜコンテナか ? (What Containers ? Why Containers ?) についてお話していきます。 今回は、コンテナスペ
GistでGemを公開
Gistにファイルを置くだけで、Gemとして公開できる。 最小構成だと、gemspecとソースコードをGistに配置すれば良い。 Gem::Specification.new do |spec| spec.name = 'my_gem' spec.version = '0.0.1' spec.authors = ['Your Name'] spec.email = ['[email protected]'] spec.summary = 'Summary of this gem' spec.files = ['my_gem.rb'] spec.require_path = '.' end # ここに好きなコードを書く 使う側では、gitプロトコルでGistのGitリポジトリとしてのURLを指定すれば良い。 gem 'my_gem', git: 'https://gist.github.co
技術的負債の返済の足がかりにテンプレートのParserを作った話 - LIFULL Creators Blog
プロダクトエンジニアリング部の中島です。 今回はフロントエンドのテンプレート部分についての負債やレガシーな機構に対する改善の取り組みについて紹介させていただきます。 背景 LIFULL社のメインサービスであるLIFULL HOME'SのメインリポジトリのサーバサイドはSymfony + Twig(※テンプレートエンジン)の構成を採用しています。 このリポジトリの歴史は古く、2011年頃から開発は行われており、今となってはレガシーな機構であったり、開発体験を損ねる負債的な記述も多くあります。 テンプレート部分で多くみられる問題のうちいくつかをピックアップすると弊社ではこのようなものが悩みのタネになっています 変数などを用いた動的な部分テンプレートの呼び出しによるgrepしやすさの低下 部分テンプレートをロードするときにスコープ制御(Twigだとonly属性)をつけ忘れてテンプレート間依存関係
フロントエンドエンジニアのわたしが大事にしている価値観について
マークアップエンジニアとしてウェブ制作会社に入社してから１０年になりました。若いね～と言われなくなってからも随分たちました。いろんな意味でひとつの節目に来たのかなと感じます。そこで、わたしがごく個人的に大事にしている、仕事とエンジニアリングについての価値観をまとめました。 意味もなく、これからの若手エンジニアに語りかけるようなまとめ方をしています。 基礎をかためること フレームワークやライブラリを用いれば、やりたいことはすぐに実現できるかもしれません。AI が台頭してくれば、これまでの制作フローがひっくり返るかもしれません。それでも、基礎をないがしろにしてはいけません。知識や経験は基礎の上に積みあがるからです。基礎こそ重要だと思います。 基礎を学ぶためのアプローチはいくつか考えられます。わたしのおすすめは、資格をとることと、普段の業務のどこか一部を低水準のやりかたでやってみることです。 資
partial with layout の微妙な挙動 - Qiita
ほとんど同じなんだけど、ちょっと違うpartialがある時に、partialにlayoutを適用するとDRYに書けたりする。 自分の場合は、メインメニューにおいて、ほとんど全てのメニューは一つのpartialでまかなえるのだが、通知メニューにのみ、未読の数字をバッジのようにつけたかった。partialに変数を渡してif分などで出し分けるということもできそうだが、読みずらくなりそうなので、layoutを使うことにした。 ただ、細かい挙動に関してあまりドキュメントが無いのでハマった。content_forで渡すセクションが二つあったが、なかなかその例がなかった。 試行錯誤過程については、ややこしいので、とばしてもらっても構いません。 試行錯誤過程 通知メニュー以外のメニューでは通常通りにpartialをrenderしています。(slimで書いてます）
高木浩光＠自宅の日記 - 魔女狩り商法に翻弄された田舎警察 Coinhive事件 大本営報道はまさに現代の魔女狩りだ
■ 魔女狩り商法に翻弄された田舎警察 Coinhive事件 大本営報道はまさに現代の魔女狩りだ 前回の日記（6月11日23時46分公開）の件はその後、以下のように展開した。 6月12日 他人PCで仮想通貨獲得 了解得ず「採掘」初立件 神奈川県警など,*1 毎日新聞, 6月12日朝刊 仮想通貨マイニング（Coinhive）で家宅捜索を受けた話, モロ@ドークツ, 6月12日9時43分 Coinhive設置で家宅捜索受けたデザイナー、経緯をブログ公開 「他の人に同じ経験して欲しくない」, ITmedia, 6月12日12時17分 仮想通貨「無断採掘」疑い サイト運営者を書類送検,*2 共同通信, 6月12日20時45分 Police to press charges over cryptocurrency 'mining' of computers without consent, The M
Latest topics > 古代のブラウザ戦争の歴史：MD5ハッシュ化された投稿の機密解除 - outsider reflex
Latest topics > 古代のブラウザ戦争の歴史：MD5ハッシュ化された投稿の機密解除 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « 「ツリー型タブ」が、Firefoxのアドオン管理画面にオススメとして表示されるようになりました Main 私達はここまで来た » 古代のブラウザ戦争の歴史：MD5ハッシュ化された投稿の機密解除 - Jun 06, 2018 Robert O'Callahan氏（Mozilla内では愛称の「roc」でもっぱら通っていたようです）が1月に公開されたブログ記事をえっちらおっちら勝手に訳してみました。多分誤訳してる所があると思うので、間違いを見つけた人は指摘して頂けると幸いです。 roc氏はFirefox以前から
Railsアプリケーションでフォームをオブジェクトにして育てる - クックパッド開発者ブログ
ユーザーエンゲージメント部の諸橋 id:moro です。 わたしはずっと、ユーザー登録やログイン周りという、サービス的には基盤的なところ、技術スタック的にはアプリケーション寄りのところに取り組んできました。関連する話を何度かこの開発者ブログにも書いています。 ユーザー基盤を作り直しながらRailsでのサービス層に向き合う 巨大なWEBアプリケーションに巨大な変更を取り入れるためにやったこと この記事で触れている「電話番号による登録」について、チームメンバーが別の側面を紹介してくれています。 今日はそのあたりの開発を通じて考えた、Railsアプリケーションでのフォームオブジェクトやサービス層といったものが何であるか、という問いに対する、現在の自分のスタンスを紹介します。 サービス層、サービスオブジェクト、フォームオブジェクト もともと Railsは Web 画面から DB 構造までをあえて密
標準偏差とは何か！その求め方と意味を図解で徹底解説
ここでは高校数学で登場し、統計学を学ぶ上でとても重要な役割を担う「標準偏差」について、図解を駆使し、その求め方と意味について解説していきます。 標準偏差の求め方や意味を理解するには、以下の4つのSTEPを踏めば簡単に理解することができます。 標準偏差は「式を覚える」のではなく「イメージ化」することがとても重要です。 4つのSTEPを本質的なイメージで捉えることで「標準偏差とは何か」や「標準偏差はどうやって求めるのか」がスッキリ頭に入ってきますので、ぜひ最後までお付き合い下さい。 標準偏差の求め方 標準偏差を求める式がこちらになります。 いきなりかなり難しい式が登場してきました（汗 この式を覚えることはなかなか厳しいですよね。 ただ、この式の記号のひとつひとつをイメージ化しながら読み解くことで、この難しい式が実はとてもストーリー性のある面白い構造をしていることが分かってきます。 ここではその
偏差値の求め方 - すぐる学習会
平均点： 分散： 標準偏差： 偏差値を求めるためには，平均点・分散・標準偏差を求める必要があります。 平均点については，求め方をよく知っていますね。 分散・標準偏差というのは，聞き慣れないことばだと思いますが，求め方はそれほどむずかしくありません。 １．平均点を求める 平均点は，得点をすべて足して，人数で割れば求められます。 （５０＋９０＋６０＋６０＋４０＋１００＋４０＋４０＋５０＋７０）÷１０＝６０ となるので，平均点は６０点です。 氏名
【Node.js】Esprima / Escodegen / Estraverseを試してみた |
Esprima / Escodegen / Estraverse を用いて, javascript code -> AST (esprima) -> javascript code (escodegen) を試してみます。環境は OSX 10.10 / Node.js v4.0.0です。 Esprimaは JavaScript Parserで AST (Abstract Syntax Tree) という抽象構文木を取得できる。 MozillaのSpiderMonkey Parser APIがこれまで実質的な標準だったが, 亜種が増えてきてこれ以上の乱立を防ぐために The ESTree Spec という標準化に向かったよう。[1] ASTはaltJSやLintツールの開発など幅広く使われる。 ES2015(ES6)では, 改行可能な文字列リテラルの Template string が使える
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ブログ開設しました | blog.mski.dev
はてな20周年祭
さらばメルカトル図法……Google マップが地球儀のように回せる仕様へとリニューアル【やじうまWatch】
