はじめに 僕はウェブサイト制作会社でサイトの運用・アクセス解析担当をしている者です。 ウェブサイトの制作・リニューアルを受注した際にプロジェクトに参加し、クライアントの現状サイトのアクセス解析とレポート作成、リニューアル提案が主な仕事です。 クライアントと直接相対するディレクターから「GoogleAnalyticsの権限もらったからアクセス解析して」とオーダーを受け、アクセス解析を行うことになります。 そもそも、初めて見るサイトを構造から理解し、リニューアルに資する提案ができるようなインサイトを得るまで分析するのは本当に骨が折れます。 さらに（全くの主観ですが）、多くのクライアントはGoogleAnalyticsを「タグ貼っただけ」状態で放置しています。 そのため、計測したデータが整理されていない・そもそも正しく計測できていないということはよく起こります。 そして、そのような計測エラーがノ

いろいろな環境で動くプログラムでは互換性のためにその場しのぎのことをしないといけないことがよくあるけど、歴史が積み重なってくると、アドホックな技の上にアドホックな技が積み上がる喜劇的な状態になることがある。こういう問題は認識するのは簡単だが直すことは誰にもできない。まさに僕がそのような体験をしたのでちょっと説明したい。 僕は仕事としてオープンソースのlldというリンカを書いている。リンカというのはコンパイラが生成したバイナリファイルをつなぎ合わせて最終的な実行ファイルやDLLを作成するプログラムで、知らない人も多いと思うけど、何をコンパイルしても最後にはリンカが動いている。lldは既存プログラムより何倍も速くてビルドが早くなるというので最近は結構人気が高まっていて、FreeBSDなどのいくつかのOSが全面的にスイッチしようとしたり、あるいは大規模プロジェクト（Chromeや、どうもFire

ウェブ API の設計に携わっている方であれば、API で使う URL のスタイルに統一的な考え方がないことも、選択した URL スタイルが API の使いやすさや寿命に大きな影響を与えることも、よくご存じでしょう。Google Cloud の Apigee チームは、社内だけでなくお客様とも協力しながら、API の設計について長く検討を行ってきました。本稿では、私たちが設計の現場で実際に使用している URL のデザイン パターンと、それを使う理由についてシェアしたいと思います。 著名なウェブ API をご覧になれば、いくつかの異なる URL パターンがあることに気づかれるはずです。次に示すのは、極端に異なる考え方に基づいた 2 つのスタイルの具体例です。 https://ebank.com/accounts/a49a9762-3790-4b4f-adbf-4577a35b1df7 htt

最も人気が高くパワフルなWeb開発ツール。 Firebugはこれまでに驚異的な成功を収めており、その12年の歴史において、オープンソースのツールとして、Web開発者の間でカルト的な人気を築き上げてきました。登場したのは2005年、Firefoxブラウザでコードの検査、編集、デバッグをできるようにした最初のツールです。また、どのようなWebページにおいても、CSS、HTML、JavaScriptの調査を可能にしています。これは大きな前進でした。 Firebugは多くの人の注目を集め、現在でも100万人以上の熱心なファンがそれを使用しています。 そのような中、来月リリースされるFirefox Quantum (バージョン57) で、Firebugが終焉を迎えるのは残念でなりません。ただし、現在のFirefox Developer ToolsにFirebugの全ての機能が盛り込まれている点につい

マイクロソフト、Google、W3C、Mozillaらが協力。それぞれのWebブラウザのドキュメントをMozillaサイトに一本化。あちこちのWebサイトを見て回らなくても済むように Mozillaは、マイクロソフト、Google、W3C、サムスンなどと協力して、それぞれのブラウザなどに対応した技術解説のドキュメントを一本化し、Mozilla Developer Networkの「MDN web docs」にまとめて掲載する取り組みを開始したと発表しました。 Webブラウザに関するHTMLやCSS、APIなどの機能の解説は、そのWebブラウザを開発するベンダのWebサイト、例えばマイクロソフトならMSDN（Microsoft Develpers Network）、GoogleならChromeのWebサイト、MozillaならMDN（Mozilla Developer Network）のWe

iOS 11が本日リリースされ、iPhone Xの発売を楽しみにしている人も多いと思います。 しかし、Web制作者やブログのオーナーはiPhone Xに対応しておく作業が増えるかもしれません。 iPhone Xではスクリーンが変更され、それに対応するための解決方法を紹介します。 Removing the White Bars in Safari on iPhone X 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 iPhone XでWebサイトを表示した際の問題点 解決方法 その1: background-color 解決方法 その2: viewport-fit 解決方法 その2 補足: safe-area-inset-* iPhone XでWebサイトを表示した際の問題点 新しく発売されるiPhone Xは、美しいディスプレ

NGINXからアプリケーションサーバ「NGINX Unit」がオープンソースで登場。PHP、Go、Pythonに対応。Java、Node.jsにも対応予定 NGINX UnitはNginxの開発者であるIgor Sysoev氏が設計し、NGNIXのソフトウェア開発チームが実装したもので、同社としてはNginxと同等の開発プロセスと品質を実現しているとしています。 現時点でPHP、Go、Pythonに対応。Java、Ruby、Node.jsにも対応予定です。 NGINX Unitの最大の特徴として挙げられているのは、最初から動的制御が可能なように設計されており、アプリケーションの入れ替えやバージョンアップなどを再起動することなくシームレスに行えるところです。 RESTful APIやJSONによるコンフィグレーションの変更やリロードもリアルタイムかつ動的に反映されるとのこと。 また、同一サー

当記事は現在執筆途中であり、正式版ではありません。記載ミスや実際と異なる情報などがありましたらコメント欄でご指摘ください。ブラウザの開発に関わっている方、開発をウォッチしている方からの情報は特に歓迎します。 （2017年9月7日更新）前回のまとめから時間が経過し、状況にいくらか変化が生じてきていること、伝聞に基づく検証を伴わない情報が多く流通しているとみられる現状を考慮し、あらためてまとめを書き直すことにしました。 Webを通じて触れることのできる、色々な方のコンテンツ・作品を自分の環境において発信者の意図に沿ったかたちで閲覧・鑑賞できているかを考えるためのひとつの材料としてこの記事を活用していただければ幸いです。 ご覧になる際は以下の点にご注意ください。 記載の情報は執筆時点での最新情報です。必ず記事の投稿・更新日時を確認してください。 複数のプラットフォームに対応したブラウザについては

[20170809追記] nginx-1.13.4に ngx_http_mirror_module は含まれました Nginxで、リクエストを複製するmirrorモジュールがコミットされ、何もせずとも使用できるようになりそうです(現状最新コミットをビルドする必要あり)。 例えば本番環境のproxyからリクエストを複製して開発環境に流すような事も出来ます。もちろん複製処理は本来のリクエスト処理をブロックしません。 例えば以下のように、mirrorに来たリクエストを複製してバックエンドサーバに投げるようにしてみます conf server { listen 80 ; server_name localhost; mirror_request_body on; log_subrequest on; location /mirror { mirror /proxy; #/proxy宛にリクエストを

It’s that time of week again, folks. Welcome to Week in Review (WiR), TechCrunch’s regular digest of the past week in tech. New here? Not to worry — sign up here to get WiR in your i

About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-

Windows 10の標準ブラウザ「Microsoft Edge」のユーザーエージェントがカオスです。下記の太字部分に注目してください。 Mozilla/5.0 (Windows NT 10.0; Win64; x64; ServiceUI 11) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299 （Microsoft EdgeHTML 16にて確認） なんと、Microsoft EdgeはWebkit系エンジンではない（EdgeHTMLエンジンといいます）にも関わらず、AppleWebkit、Chrome、Safariという文字列が入っています。これは、Webkit系ブラウザと互換性を持たせ、WebKitブラウザ用の処理も実行できるようにするためです。 (参考：M

インターネット上の通信を暗号化するTLSの普及を目指し、無料サーバ証明書を発行する非営利認証局（CA）のLet's Encryptは7月6日、1つの証明書で複数のサブドメインの暗号化を実現できる「ワイルドカード証明書」の発行を2018年1月から開始すると発表した。「HTTPSの100％普及に向けた進展を加速させたい」としている。 ワイルドカード証明書は、ベースドメインのサブドメイン（例えば*.example.com）で無制限に利用できる。管理者は1つの証明書と鍵の組み合わせを、1つのドメインとそのサブドメイン全てに使うことができ、「HTTPSの導入がはるかに容易になる」とLet's Encryptはいう。 ワイルドカード証明書は、ACME v2 APIエンドポイント経由で無料にて提供する。当初はDNS経由のベースドメイン認証のみをサポートするが、いずれは追加的な認証オプションも検討するかも

このブログを運営して1年半程度ですが、ありがたいことに月間数十万アクセスをいただくようになりました。 といっても、ここ数ヶ月は月に数記事書けば良い方ですが…（がんばります） さて、長くブログを運営していると、記事をコピーされたり、画像が転載されたり…被害にあった話をよく聞きますね！ 対策としては、晒しあげて血祭りに上げる…もとい！筆者に連絡したり、削除申請したり様々です。 メインブログ（ここ）は最近あまりお世話できていないのですが、先日たまたまGoogleのサービス（Google AnalyticsやGoogle  Adsense、Search console）で自分のサイトデータを調べていたら… コピーサイトばっかやんけ(°_°) マジか… いずれも海外のサイトだったり、筆者がSNSを持っていない＆お問い合わせがないサイトばかりだったので、今回はGoogleに連絡してインデックス削除申請

メルカリは2017年6月27日、メルカリWeb版での個人情報流出に関して新たな情報を同社の技術ブログで公開した。CDNのキャッシュの動作について、CDNプロバイダーと仕様について確認し検証した結果だという。同月26日までの説明とは一部異なっている点があり、ブログエントリを加筆修正した。 メルカリは当初、「Expiresヘッダーが過去の日付であっても、Cache-Controlヘッダーが存在している場合、Expiresヘッダーの情報は考慮されない仕様になっていた」と説明していた。しかし、この内容が正確ではなかった。 正確には、Expiresヘッダーは、Cache-Controlヘッダーにmax-age（キャッシュの有効期限を設定するキー）またはs-maxage（共有キャッシュの有効期限を設定するキー）がないときに機能していた。ただし、Expiresヘッダーに過去の日付が指定されていた場合は、

- はじめに - 最近はWebスクレイピングにお熱である。 趣味の機械学習のデータセット集めに利用したり、自身のカードの情報や各アカウントの支払い状況をスクレイピングしてスプレッドシートで管理したりしている。 最近この手の記事は多くあるものの「～してみた」から抜けた記事が見当たらないので、大規模に処理する場合も含めた大きめの記事として知見をまとめておく。 追記 2018/03/05： 大きな内容なのでここに追記します。 github.com phantomJSについての記載が記事内でありますが、phantomJSのメンテナが止めたニュースが記憶に新しいですが、上記issueにて正式にこれ以上バージョンアップされないとの通達。 記事内でも推奨していますがheadless Chrome等を使う方が良さそうです。 - アジェンダ - 主に以下のような話をします。 - はじめに - - アジェンダ

メルカリでCDNにキャッシュされるべきでないページがキャッシュされることにより個人情報の流出が発生してしまうインシデントがありました 自分は動的コンテンツをCDNで配信することにあまり積極的ではない立場だったのですが流出への反応を見るとCDNを利用しているサービスはかなり増えてきているようです 個人情報やユーザーのプライベートデータを決して流出しないようにしつつCDNを利用する方法を考えてみました CDN利用のメリット このふたつ 経路が最適化されレイテンシが小さくなる DDoS対策となる キャッシュされないようにする方法 Twitterで動的コンテンツもCDN通すの当たり前でしょーと言ってる人にリプしてきいてみました CDNとレスポンスヘッダで二重にキャッシュを無効化する キャッシュを細かくコントロールCDNを使う ホワイトリスト方式で特定のパスのみキャッシュを許可 ログインセッションを

こんにちは、ほけきよです！ ある程度経験を積んだブロガーなら、Google Search Consoleを使っていることでしょう。 自分の記事にどういう単語を調べた結果辿り着いているかがわかるツールです*1 ブログも開設して時間が経つたびに、「検索流入」の重要性をひしひしと感じるようになります。 そんな時にSearch Consoleを使うと、リライトすべき記事が浮き上がってくる。というわけです。 私の記事も検索流入がちょっとずつ増えてきたので、 Search Consoleでの結果を分析することにしました。*2 Search Consoleで抜き出したデータ 1-10位 1-30位 1位-30位 (表示回数で分けたver.) これからの戦略を練る バズった記事はレッドオーシャン戦略 11-15位はブルーオーシャン戦略 まとめ Search Consoleで抜き出したデータ まず、はじめに