今なぜHTTPS化なのか？インターネットの信頼性のために、技術者が知っておきたいTLSの歴史と技術背景
【変更履歴 2018年2月15日】当初の記事タイトルは「いまなぜHTTPS化なのか？ 技術者が知っておきたいSEOよりずっと大切なこと ― TLSの歴史と技術背景」でしたが、現行のものに変更しました。現在GoogleではWebサイトのHTTPS対応と検索結果の関係を強調しておらず、本記事の趣旨の一つにも本来は独立した問題であるSEOとHTTPS化を関連付けるという根強い誤解を解くことがありますが、当初のタイトルではかえってSEOとHTTPSを関連付けて読まれるおそれがあり、また同様の指摘もいただいたことから変更いたしました。 HTTPとHTTPSは、共にTCP通信上で動作します。したがって、いずれもTCPハンドシェイクで通信を開始します。 HTTP通信の場合には、このTCPハンドシェイク直後に、HTTPリクエストとレスポンスのやり取りが始まります。このHTTPのやり取りは平文通信であり、途
Favicon Generator for perfect icons on all browsers
Your favicon is transparent. This is usually a good thing, but not for iOS Web Clips which are supposed to be opaque. Look at the sample on the left, this is how a user would see your favicon as a Web Clip on his device. What to do about this? Your favicon is not transparent. This is a good thing for iOS Web Clips. Yet, web clip corners are rounded. Depending of your favicon, it may disrupt its de
クリエイティブなファビコンを設置しよう
2017年9月22日 Webサイト制作, 便利ツール Webサイトの制作時に、特に初心者さんが設置を忘れがちなファビコン。Webサイトをブックマークした際や、タブ表示した際にサイト名の横にちょこんと表示されている小さなアイコンのことです（Favourite + Icon = Favicon）。デバイスが増え、これまでとは設置方法が少し変わってきているのと、機能のついたファビコンも増えてきているので、その辺もあわせて紹介します！ ↑私が10年以上利用している会計ソフト！ ファビコンをデザインする ファビコンは16×16ピクセルとかなり小さいながらも、その存在は偉大です。複数のタブを開いている時や、ブックマークリストの中から、ひと目見てどのサイトか区別できるからです。 多くの場合、そのWebサイトのロゴマークを縮めたり、簡略化したものがファビコンデザインとして採用されています。CHANEL、A
HTMLのheadの書き方、head内に記述する要素の総まとめ
HTMLページのhead内に記述する最小限の構成、そしてmeta要素やlink要素、ソーシャルサービス用の要素、デスクトップ・スマホのブラウザ用の要素などがまとめられた「<head> cheatsheet」を紹介します。 <head> cheatsheet 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 去年紹介した以前の版からいろいろと変更されています。 head内に記述する最小限の構成 head内の要素 meta要素 link要素 ソーシャル関連のhead内の要素 ブラウザ・プラットフォーム関連のhead内の要素 メモ head内に記述する最小限の構成 下記はシンプルなWebサイトで必須となるhead内に記述する最小限のタグです。 <meta charset="utf-8"> <meta http-equiv="x-ua-c
【2016年版】Facebook、Twitterに最適なOGP記述設定まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、ディレクターのエリカです。 突然ですが、OGPの記述って意識していますか？ OGP（Open Graph protocol）とは、単刀直入に言うとSNSでシェアしたときに表示される情報のことです。 OGP記述を設定することで、SNSでシェアされたときの視認性が高まるので、設定は必須としたいところです。 過去に何度か設定変更があり、いつも「何が最新なの？」と迷ってしまうので、2016年最新版をまとめてみました。 OGPの記述設定 HTMLの内に下記を記載します。 //共通項目 <meta property="og:title" content="ページのタイトル" /> <meta property="og:type" content="ページのタイプ" /> <meta property="og:url" content="ページのURL" /> <meta property=
レトロエンジニアのための近代Webフロントエンド事情 - Qiita
フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には新しい気付きが与えられるかもしれない。 詳しい人の添削・ツッコミは大歓迎。 詳細はリンク先に任せ、私が思う「わかりやすい順序」で、調べたことをざっと紹介していく。 きっかけ 読み飛ばしてもよい。 Reactを使うとなぜjQueryが要らなくなるのか 数年前、
Service Workers Push API Hands-on
最近はやりのjQuery Hateの謎に迫る！ （というか、これであってるのか教えてほしいという発表）
Chrome で Push API を試す - miso_soup3 Blog
2015年4月にリリースされた Chrome 42 で可能になったという、”ブラウザを閉じていても届くプッシュ通知”というものを試してみました。 「Google Chrome 42」安定版リリース プッシュ通知機能追加と45件の脆弱性対処 ※正式版ではないので以下の内容は間違っている可能性があります。 実装方法はググるとたくさんの記事がでてきます。この記事では試したときのメモを。 使用するものは、 Google Cloud Messaging （Android、iOS、Chrome の複数のプラットフォームにメッセージを送信） Push API Push API とは W3C が定める仕様で、Web Worker の中の一つ。Web Worker ではいくつか分類されていて、 Web Workers API Shared Worker Service Worker Chrome Worke
「Firefox 44」安定版リリース──タブを閉じてもプッシュ通知が可能に
米Mozilla Foundationは1月26日（現地時間）、Webブラウザの安定版アップデートとなる「Firefox 44」をWindows、Mac、Linux、Android向けに公開した。 ユーザー向けの新機能としては、Webサイトのタブを閉じた状態でもそのWebサイトからのプッシュ通知を表示する機能（デスクトップのみ）が追加された。 Webオーナー側が「Push API」と「Notifications API」を使ってプッシュ通知を送っており、ユーザー側が通知を許可した場合に、タブを閉じていてもプッシュ通知が表示される。この機能は米GoogleのChromeブラウザには2015年4月にリリースのバージョン42から備わっている。 Webアプリ版のメーラーやオークションサイトなどで許可しておくと便利だろう。 この機能をサポートするWebサイトを開くと、アドレスバーの左端に下図のような
ChromeでW3C Push APIを使ってみた - Qiita
※ (2017/7/4: Chrome以外のブラウザとの相互運用性を考慮する場合は、Web Pushへの移行を推奨します。Web Pushについては[改訂版] Web Pushでブラウザにプッシュ通知を送ってみる[旧仕様対応版]にまとめています。(なお、AndroidやiOSへのFirebaseプッシュ通知と統合して運用する場合は、Firebase JavaScript SDKの利用を検討した方がよいかもしれません。)) ※ (2015/11/27: 関連してFetch APIの使い方を簡単ながら別記事に書いてみました。) もう既に、ググると参考記事がいくらでも出てくるような内容ではありますが、個人的にいろいろと上手く行かなかったりしたこともあるので、参考までにまとめてみました。 さて、Chrome 42 (Android版を含む(!))では、Service Workersとの組み合わせで
Manifest file format | Chrome for Developers
Minimal manifest{ "manifest_version": 3, "name": "Minimal Manifest", "version": "1.0.0", "description": "A basic example extension with only required keys", "icons": { "48": "images/icon-48.png", "128": "images/icon-128.png" }, } Register a content script{ "manifest_version": 3, "name": "Run script automatically", "description": "Runs a script on www.example.com automatically when user installs th
Chrome拡張で他サイトの情報を定期取得（スクレイピング） | 七ヶ国語できるITエンジニアを目指す
気になる情報を、サイトから定期的自動取得し、Chromeツールバーのアイコンに表示させる拡張を作りました。 例えば「０６７０」は為替USD/JPYのレート「１０６．７０」の最後四桁です。 為替はいつも変化しているもので、１０秒毎に新しいレートを指定のサイトから取得してくれます。 レートが10秒前より下がった場合は青アイコン、上がった場合は赤アイコンに差し替えられる。 これを実装したときに使ったコードをメモします。 設定部分(manifest.json) サイトアクセス許可 直接アドレスを入れればいいです。 自分用なら、「<all_url>」ですべてのURLを許可してもよいでしょう。 "permissions": [ "http://www.google.com/" // ,"all_url" ] バックグランドで定期実行 実際の情報取得の実装はbackground.jsですが、 jQuer
WEBページに設定しておくと良いHTTPヘッダとかメタタグとか - Qiita
header('Vary: User-Agent'); header('Vary: Accept-Encoding'); header('Vary: Accept-Language'); header('Vary: Cookie'); プロキシサーバなどのキャッシュを適切に行ってもらうために必要 UserAgentなどの条件によってコンテンツの内容が変わる場合は、別々にキャッシュしてもらう。 HTTP圧縮に対応しているなら、Accept-EncodingをつけるとブラウザがHTTP圧縮したコンテンツを受けてくれる。 参考 http://web-tan.forum.impressrd.jp/e/2013/05/17/15269 http://kaigai-hosting.com/opt_site-specify-vary-header.php Cache-Control: Webサーバから返
UserAgentからOS/ブラウザなどの調べかたのまとめ - Qiita
WEBサイトにアクセスしてくる利用者の情報をUserAgentから調べることが出来るが、どんな情報がわかるか調べてみた。より詳しい情報は参考に使ったサイトを参照で。 はじめに GoogleがChromeにおいてユーザーエージェント文字列を段階的に廃止することを発表しています。 段階的にUserAgentが削除版UA文字列に置き換わっていきChrome 113で完全に削減版の UA 文字列となってしまいます。 削除版のUA文字列は以下の通りです。 User-Agent Reduction # Desktop (user on Windows 8.1, for example) # 旧 UA文字列 Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.1234.56
ChromeとSafariが増加 - 12月ブラウザシェア(モバイル) | マイナビニュース
Net Applications - Usage Share Statistics for Internet Technologies. Net Applicationsから2015年12月のモバイル/タブレット向けブラウザのシェアが発表された。12月はChrome、Safari、Opera Miniがシェアを増やし、Android Browser、Microsoft Internet Explorer、Symbianはシェアを減らした。ChromeおよびSafariの双方で最新版への移行が進んでいる様子がわかる。 Chromeはデスクトップ向けペレーティングシステムにおけるWebブラウザに加え、モバイルプラットフォーム向けのオペレーティングシステムとしても高いシェアを確保している。双方のプラットフォームにわたってこれほど高いシェアを確保しているWebブラウザはChromeのみであり、ユー
Material Design Lite
Material Design Lite Material Design Lite lets you add a Material Design look and feel to your websites. It doesn’t rely on any JavaScript frameworks and aims to optimize for cross-device use, gracefully degrade in older browsers, and offer an experience that is immediately accessible. Get started now. Templates The MDL components are created with CSS, JavaScript, and HTML. You can use the compone
ダウンロードファイル名の文字化け
上記の結果は、最初にこの記事を書いた 2011 年 3 月 20 日の時点で検証に使ったブラウザ IE8, Firefox 3.6.15, Chrome 10.0.648.151, Safari 5.0.4, Opera 11.01 でも、この記事を改版した 2014 年 3 月 2 日の時点で検証に使ったブラウザ IE9, Firefox 27.0.1, Chrome 33.0.1750.117, Safari 5.1.7, Opera 12.16 でも同じでした。 Firefox と Safari の場合は、UrlEncode するのはダメで、%e6%97%a5%e6%9c%ac%e8%aa%9e.xls のようなエンコードされた名前になってしまいます。Chrome と Opera は UrlEncode 有り／無しどちらも OK でした。 また、IE の場合でも、ファイル名に半角空白
Servletで日本語名のファイルをダウンロード
なんかものすごく忙しくて更新する暇が全く無い状態です・・・。 さて、今日は実際直面した問題をメモ代わりに書いておきます。あんまり日本語ファイル名を扱わないので忘れがちなので。 ダウンロード時にファイル名を指定する場合は、Content-Dispositionヘッダを使いますが、日本語の場合そのまま指定すると文字化けを起こしてしまいます。 しかもブラウザによって挙動が異なるという・・・。どうしたらいいのでしょう。 解決方法 まず、MS-IEでは「ファイルをダウンロードする ASP.NET Web ページで日本語ファイル名が文字化けする 」にあるように、以下のような仕様になっているようです。 Internet Explorerでは、Content-Disposition ヘッダが送信された場合、送られてきたコンテンツをそのままブラウザで開かずにファイルダウンロードダイアログを表示するようになっ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
知っているようで知らないWebサーバアーキテクチャ
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
