Web 技術解体新書「第二章 Cache 解体新書」リリース Intro 「Web 技術解体新書(Web Anatomia)」の第二章として「Cache 解体新書(Cache Anatomia)」をリリースしました。 これで予定している八章のうち二章が終わりました。 第一章: Origin 解体新書 第二章: Cache 解体新書 Cache 解体新書 以下の Response Header Field がどういう意味を持つか正確に説明できますか? おそらく多くの Web 開発者が一度は見たことがあり、これを「1 時間キャッシュする」という意味で指定している人もおおいでしょう。 では、どこから 1 時間で、 1 時間経ったらなにが起こるのか、これが Response でなく Request に付与されたらどう変わるのか、きちんと把握できていますか? そもそも、一般的にキャッシュ機構における

OpenStreetMap をウェブサイトに埋め込む方法です。 手作業で取得する方法 http://www.openstreetmap.org/にアクセスします。 「share」をクリックします。 リンクを貼る場合はLinkを、埋め込む場合はHTMLを選択します。これでOKです。「Include marker」をチェックするとピンを打つことができます。 手作業で処理するのが面倒、という方にCMS地図プラグイン CMS(Contents Management System)を利用します。 日本で使われている有名どころのものでOSM地図に対応しているCMSは、 concrete5 Drupal Joomla Novius OS WordPress があります。他にもOSMプラグイン／アドオンがありましたら、お知らせください。 自分でシステムを対応させるぜ、という方に 自分が使っているシステムで

iPhoneやMacなどにプリインストールされるブラウザアプリのSafariのユーザーが初めて10億人を突破し、Google Chromeに次ぐ世界第2位のシェアに達したことが明らかになりました。 Apple’s Safari browser now has more than 1 billion users - Atlas VPN https://atlasvpn.com/blog/apples-safari-browser-now-has-more-than-1-billion-users VPNサービスを展開するAtlas VPNがウェブトラフィック解析サイトのStatCounterのデータを用いて試算したところ、2022年4月時点での世界のブラウザシェア第1位はGoogle Chromeで、ユーザー数は約34億人に上ることが分かりました。これは全体の約65％に当たります。さらに、S

2018年4月5日 CSS 画像の一覧を表示する時などは、画像のサイズが統一されていると並べて表示させてもすっきりキレイに整って見えますが、必ずしもサイズが同じとは限りません。かといってPhotoshopを使ってすべての画像をリサイズできない…ということもあるでしょう。そんな時はCSSでトリミングすると楽です！今回は「object-fit」というプロパティーを使って、画像の縦横比を保ちつつトリミングする方法を紹介します。 ↑私が10年以上利用している会計ソフト！ 画像を中央の位置でトリミングする まずはこの縦長の画像、横長の画像を並べ、縦横250pxの正方形の形で表示させてみましょう。 img { width: 250px; height: 250px; } CSSでこのように画像に対してサイズを指定すると… こんな感じでグチャッとつぶれて表示されちゃいます…。 そこで画像に対して obj

完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH

アクセシビリティとは可能な限りの多くの人々が利用できるようにする状態のことを指します。 ウェブサイトで言えばスクリーンリーダーを利用している人や、モバイルデバイスで見る人、キーボード操作のみ行う方などすべての人が利用できるような状態です。 例えば、ハンバーガーメニューで「≡」のアイコンデザインをよく見かけませんか？あのアイコンにtabキーで移動でき、キーボード操作だけでメニューの開閉ができるサイトはアクセシビリティを意識しているのだなと思います。 首相官邸ホームページを見てみるとtabキーでメニューを移動できます。また画像の黄色い線で引いたところは、WAI-ARIAを使用していました。 アクセシビリティを高めて、多くの人に情報を届けようとしているなあと思いました。 首相官邸ホームページ アクセシビリティの向上には、HTMLの適切タグを使用したマークアップやWAI-ARIAの手法が挙げられま

WAI-ARIAとはなにか 「Web Accessibility Initiative - Accessible Rich Internet Applications」 の略で、 「ウェイ・アリア」 と読みます。 WAI-ARIAをつかえば、HTMLだけでは不足している セマンティクス（意味） を属性で補完することができ、 支援技術（スクリーンリーダーなど）を通じて、障害をもつ人に対し適切な情報を伝えられる ようになります。 WAI-ARIAの注意点 あくまでも 「必要な場合のみ使用する」 技術です。 HTML5タグのセマンティクスで解決できるのであれば、 HTMLで対応するのが基本 です。 WAI-ARIAのつかいかた 決められた 「属性」 をHTMLタグに追記して使用します。 以下、すぐにでも導入が可能で効果が期待できそうな項目を挙げてみました。 （その他、詳細については参考サイトをご

『無料コーディング練習所』では、完全無料のコーディング教材を提供しています。 入門編から上級編まで６サイトをコーディングすることで、 HTML・CSS・jQueryの基礎スキルがしっかり身につくカリキュラムになっています。 デザインカンプと完成版コーディングデータ付きです。 この教材は制作会社の新人コーダーの教育にも使用されています。 さぁ、楽しみながら一緒に勉強していきましょう♪

Google ChromeやMicrosoft Edgeなどのウェブブラウザには、ウェブページの要求に応じて画像を描画したり拡大・縮小などの加工を施す機能が搭載されています。しかし、これらの機能では画像の色を正しく扱えず、表示させたい色とは異なる色が表示されてしまうことがあります。そんな「ウェブブラウザで色がおかしくなる現象」の事例や原因についてまとめたウェブサイト「Web color is still broken」が公開されています。 Web color is still broken https://webcolorisstillbroken.com/ ◆グラデーションが汚くなる 以下のグラデーション画像は、画像編集ソフト「GIMP」で作成したものです。赤から緑・緑から青・青から赤・紫から緑という4種類のグラデーションが描かれており、全てなだらかにグラデーションが描画されています。

Googleのデジタル広告に対する独占禁止法違反の訴訟に関した訴状の中で、GoogleがAMP優遇のため、非AMPの広告表示を遅くしていたことが指摘されています。 UNITED STATES DISTRICT COURT SOUTHERN DISTRICT OF NEW YORK - IN RE: GOOGLE DIGITAL ADVERTISING ANTITRUST LITIGATION - Civil Action No.: 1:21-md-03010-PKC (PDFファイル)https://storage.courtlistener.com/recap/gov.uscourts.nysd.564903/gov.uscourts.nysd.564903.152.0_1.pdf Chrome Dev Summit 2021 livestream - YouTube Let's tal

by Cesar Solorzano Googleがスマートフォンやタブレットの読み込み速度を高めるとして推し進めてきた「Accelerated Mobile Pages(AMP)」について、Google検索やGoogleニュースなどにおける「AMPの優遇」が2021年6月に終了します。 Google AMP is dead! AMP pages no longer get preferential treatment in Google search | Plausible Analytics https://plausible.io/blog/google-amp Google Search ranking factoring 'page experience' from June - 9to5Google https://9to5google.com/2021/04/19/googl

[レベル: 中級] ユニバーサル アナリティクスのサポートを2023 年 7 月 1 日をもって終了することを Google は公式ブログでアナウンスしました。 アナリティクスのヘルプ記事でも通達が出ています。 ユニバーサル アナリティクスのサポート終了にともない、Google アナリティクス 4 (GA4) への早期の移行を促しています。 今後の流れ ユニバーサル アナリティクスのサポート終了の流れは、大まかに次のとおりです。 2023 年 7 月 1 日までは、ユニバーサル アナリティクス プロパティで引き続き、新しいデータの使用および収集が可能 2023 年 7 月 1 日以降は、ユニバーサル アナリティクス プロパティでのデータ収集が停止 2023 年 7 月 1 日よりも前にユニバーサル アナリティクス プロパティで処理されたデータには少なくとも 6 か月間はアクセス可能 UA

画像最適化に必要なサービスとツール まずは、Webブラウザ上で画像圧縮ができるサイトが色々あるなかで、コレ！ というサービス2つと、Macで使えるフリーソフトを紹介します。 Squoosh（Google） Squoosh JPG, PNG, WebPに変換が可能で、一枚一枚の画質を確認、調整しながら丁寧に変換できます。さらに画質やフィルタを設定する Edit という小窓の右上、[ >_ ]　こんな感じのアイコンをクリックすると、設定した内容のCLIコマンドをコピーできます。 そのため、設定が決まったらコードをコピーしてコマンドラインで一気に変換なんてことも可能になります。素晴らしい。 「Commandとかは無理、だけど数十枚〜一括で変換したい」という方にとっては、一枚ずつしか変換できないというのは厳しいですよね。その場合はもう一つのサービスが使えます 以上、コマンドを叩くか、上記2サービス

現行法第15条1項に、「個人情報を取り扱うにあたっては、その利用の目的…を『できる限り』特定しなければならない」とあります。この「できる限り」という若干あいまいな文言に関し、改正法のガイドラインではより厳しく、「本人が…合理的に予測・想定できないような場合は、…できる限り利用目的を特定したことにはならない」と示されました。 多くの企業のプライバシーポリシーには「お客様の個人情報を広告配信のために利用します」とは書いてあっても、お客様の個人情報のうちどれを利用しているかは特定されていません。企業は2022年3月31日までに閲覧履歴や購買履歴等といった分析の際にインプットする情報を特定する必要があるので、早めに着手するのがよいでしょう。

ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュース を担当しているエンジニアの喜楽です。 今回は、Yahoo!ニュースが取り組んでいるブラウザバック時の表示最適化手法について紹介します。 なぜブラウザバック時の挙動に注目するのか ユーザーがYahoo!ニュースのページを閲覧し、別のページに遷移する方法は大きく分けて以下の2つが考えられます。 （A） リンクをたどってページを遷移する （B） ブラウザーのナビゲーションボタンまたはスワイプ操作によって遷移する 「戻る」による遷移（ブラウザバック） 「進む」による遷移（ブラウザフォワード） Yahoo!ニュースでは総PVのうち一定程度が(B)のブラウザバックまたはブラウザフォワードによるページ遷移時のも

URLを入れるだけでサイト内部の問題を一括検出 Googleと同じ視点でサイトをクロールして、 大規模サイトでも手軽に高度なSEO分析ができます！ まずは無料デモクロールを試して、あなたのサイトの問題点を一括検出！ 通常の検索結果と比較して、視覚的・操作的な機能が追加された検索結果をリッチリザルトと呼びます。 自社サイトのCTRを高めるため、獲得が推奨されるリッチリザルトですが、構造化マークアップの知識と技術が必要になるため、すぐには実装できないというWEB担当者も多いようです。 今回は、構造化データの基礎情報や、構造化データを構成する2つの要素について確認するとともに、自社サイトの保有ページがリッチリザルトに対応しているかどうかの検証方法を解説します。 まずは構造化データにどのような役割があるのかを知り、構造化マークアップが自社サイトに必要な施策かどうかを検討しましょう。 構造化データと

ページのコンテンツが少なくても、フッタを一番下に配置するCSSのテクニックを紹介します。コンテンツが多ければ、成り行きで配置されます。 フッタの高さは自由で、CSS GridやFlexboxやcalc()は使用せず、追加のラッパーも必要ありません。シンプルなHTMLに、数行のCSSで簡単に実装できます。 A Clever Sticky Footer Technique by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コンテンツが十分な量でなくてもフッタを一番下に配置する方法 はじめに 「スティッキーフッタ」というと、ページをスクロールした時にぴたっと固定表示されるposition: sticky;を思い浮かべる人が多いと思います。 しかし、それはここで話すこととはすこし異なります。 「ス

Webサイトやアプリをレスポンシブ化するためにメディアクエリに頼っているのであれば、CSSの機能を見直して、昔ながらのブレークポイントを新しい流動的なアプローチで実装ができないか検討する時期かもしれません。 CSSの実装はデバイスベースからコンテンツベースに移行しているのが現状です。grid, flexbox, vh, vw, calc, clamp, min, maxなど、CSSの機能を使用してレスポンシブ対応にするテクニックを紹介します。 You Probably Don't Need Media Queries Anymore by Kathryn Grayson Nanz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 大局的なgridとflexbox 活躍するCSSのプロパティ 完全に機能するCSSの数学関数