タグ

webに関するnnnnnhisakunのブックマーク (281)

  • いま俺たちに必要なのはz-indexの明確な指標だ - Qiita

    こんにちは、@armorik83です。こういう煽ったタイトルを書きたいってずっと思っていたので今回やってみます。 z-indexの値付けどうしてる? z-indexの説明は省略しますが、この値は取りうる範囲が膨大1でそれに対する指標が無いことから、複数のWeb設計者が入り混じる場合にバッティングする恐れがあります。 1から10までの範囲で収めていた設計者のサイトに100刻みの値付けをするプラグインが導入されると、一気に関係が崩れてしまうことが想像できます。 W3Cではこの値についての明確な指標を載せていないようにみえます。(調査不足だったらすいません) 広告業界では Web広告業界の展開は日国内外問わず盛んで、さまざまな手法でうっとうしい広告を載せてきます。この時、元のコンテンツにオーバーレイする形で表示される広告や、マウスオーバーで拡大する広告などが普及してきたことで、2012年にこの

    いま俺たちに必要なのはz-indexの明確な指標だ - Qiita
  • GPUを活かせるCSSの工夫 - ワザノバ | wazanova

    http://calendar.perfplanet.com/2014/hardware-accelerated-css-the-nice-vs-the-naughty/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約1時間前 Ariya Hidayatが、サイトパフォーマンスの改善のためにGPUをうまく活用するポイントについて紹介してくれています。 まず、期待できるGPUの効果は、ページのレンダリングを加速してくれること。 アニメーションのフレームごとにピクセルを描くのではなく、ブラウザはDOMエレメントのスナップショットを撮って、それをGPUテクスチャ(レイヤ)として保存。後で、GPUにそのテクスチャを変換させ、DOMエレメントをアニメーションしているように見せることができる。 渋滞している高速道路ではス

  • 2015年のWeb標準 | gihyo.jp

    株式会社ミツエーリンクスの渡邉卓です。昨年の「2014年のWeb標準」と同様に、2015年もWebコンテンツのフロントエンド設計および実装に関連した各種標準や、周辺領域の動きに関する短期的な予測を寄稿させていただきます。 2015年のWeb標準については「より広範なHTML5仕様の一般化・HTML5.1仕様の利用増加」「⁠ECMAScript 6仕様の利用増加」「⁠IE7・IE8 未サポートWebサイト増加」をキーワードとして取りあげます。 より広範なHTML5仕様の一般化・HTML5.1仕様の利用増加 2014年10月28日、ついにHTML5がW3C勧告 (Recommendation) となりました。すでに多方面で利用されているHTML5仕様ですが、勧告になったことで、今まで利用を躊躇していた方々にも確実に浸透していくと予想できます。詳細は後述しますが、現役のWebブラウザでありながら

    2015年のWeb標準 | gihyo.jp
  • フロントエンドの実装から見る第四十七回衆議院選挙 開票速報ページまとめ - 暮らしの技術

    700億円ほどのお金がかかっているといわれ,why-kaisan.comなんてサイトも作られ巷を賑わせた第四十七回衆議院選挙の投票日が今日でした.投票日と言うことはその後に来るのは開票で,開票と言うことは開票速報がはじまるわけです. 報道各社を見てみますと,各々工夫を凝らした開票速報ページを用意しておりまして,これがなかなかおもしろいということで,その比較でございます. まとめ 長いので先にまとめです. まずテレビと新聞で圧倒的に態度が違います.テレビはあくまで番組の補助だったり宣伝が目的.ウェブページではあまり情報を出したくない様子です.一方新聞各社は トップページ上段,ファーストビューのど真ん中を思いっきり使い,文字通り全面展開といったパターンが多い. フロントエンドの実装から見ると,基的にグラフが必要な場面ではCSS,日地図が必要な場面では「画像+mapで部分リンク」か「要素の絶

    フロントエンドの実装から見る第四十七回衆議院選挙 開票速報ページまとめ - 暮らしの技術
  • 広告を消す拡張機能「Adblock」をネットユーザー全体の5%が利用している実態が明らかに

    ウェブページ上に表示された広告を消してしまい、サイトのコンテンツのみを表示することができるブラウザ拡張機能「Adblock Plus」は、閲覧する側のユーザーにとっては目障りな広告を見なくてすむために便利なものと評価が高く、全世界規模で利用者数を大きく伸ばしています。しかし一方で、費用を支払って広告を掲載している広告主や広告会社にとってはその存続にも関わる大きな問題となりかねません。そんなAdblockの伸びにまつわる現状と問題点について、フレデリク・フィユー氏がブログで語っています。 The Rise of Adblock Reveals A Serious Problem in the Advertising Ecosystem | Monday Note http://www.mondaynote.com/2014/12/08/the-rise-of-adblock-reveals-

    広告を消す拡張機能「Adblock」をネットユーザー全体の5%が利用している実態が明らかに
  • なぜHTTPSはHTTPより速いのか

    先週、httpvshttps.com というウェブサイトが公開されました。このウェブサイトでは、HTTP と HTTPS を用いてアクセスした場合のウェブページのダウンロード完了までにかかる時間の比較ができるのですが、多くの環境で HTTPS の方が HTTP よりも高速なことに驚きの声が上がっていました。 HTTP が TCP 上で平文を送受信するのに対し、HTTPS は TCP 上で TLS (SSL) という暗号化技術を用いて通信を行います。ならば、TLS のオーバーヘッドのぶん HTTPS のほうが遅いはずだ、という予測に反する結果になったのですから、驚くのも無理はありません。 実は、この結果にはからくりがありました。 Google Chrome、Mozilla Firefox、最近のSafari注1は、Google が開発した通信プロトコル「SPDY」に対応しており、HTTPS

    なぜHTTPSはHTTPより速いのか
  • 複数のWebサーバでSSLセッションキャッシュを共有してSSL処理を高速化(Apache + mod_ssl + mod_socache_memcache) - 元RX-7乗りの適当な日々

    HTTPS(SSL利用)サイトがSEO的に優遇されるトレンドで、世間的にもHTTPS接続でサイト運用するサービスが増えてきています。 これが、ハイトラフィックサイトになってくると、このフロントエンドでSSL処理させることが負荷的にもなかなか辛いのです。 で、Apache 2.3以降では、Shared Object Cache Providerとして、memcachedが選択できるようになっています。 この仕組みを利用して、Apacheとmemcachedを並べることで、各サーバでユーザのSSL Session Cacheを共有しながらHTTPSリクエストを負荷分散できる構成を作ってみました。 WebサーバでSSLオフロード 常時SSLを利用したWebサイトを運用するために、SSLアクセラレータといったアプライアンス製品だとか、ソフトウェアだとApacheやNginxのSSLモジュールを使う

    複数のWebサーバでSSLセッションキャッシュを共有してSSL処理を高速化(Apache + mod_ssl + mod_socache_memcache) - 元RX-7乗りの適当な日々
  • とあるサイトの高速化についてフロントエンドでやったことまとめ。 - Toro_Unit

    業務で携わっている案件なのですが、アクセス数の急増が見込まれるイベントがありまして。準備期間も少なく、バックエンド側でできることがほぼないという状況でサイトを落とさないようにがんばる!というお仕事でした。レガシーソースてんこ盛り。CSSプリプロセッサとか何それ状態。 そこで実施した対策のまとめです。サーバー・アプリケーション・サイトの構成によって、効果の大小はありますが、比較的効果があったと思われるものをつらつらと。 リクエストの削減とファイルサイズの最適化 まず一番最初に考えなければいけないのがリクエスト数です。すごいおおざっぱに言うと、WEBサーバー(ApacheとかNginxとか)への負荷は、PV数×リクエスト数です。PVがそんなに無くてもそのページのリクエストがめちゃくちゃ多いとそれだけでかなりの負荷になります。リクエストを半分にできれば2倍の人数がさばけるってことに、すげーおおざ

    とあるサイトの高速化についてフロントエンドでやったことまとめ。 - Toro_Unit
  • XMLHttpRequestを使ったCSRF対策 - 葉っぱ日記

    合わせて読んでください:Flashと特定ブラウザの組み合わせでcross originでカスタムヘッダ付与が出来てしまう問題が未だに直っていない話 (2014-02/07) XMLHttpRequestを使うことで、Cookieやリファラ、hidden内のトークンを使用せずにシンプルにCSRF対策が行える。POSTするJavaScriptは以下の通り。(2013/03/04:コード一部修正) function post(){ var s = "mail=" + encodeURIComponent( document.getElementById("mail").value ) + "&msg=" + encodeURIComponent( document.getElementById("msg").value ); var xhr = new XMLHttpRequest(); xhr

    XMLHttpRequestを使ったCSRF対策 - 葉っぱ日記
  • Google、ChromeでのNPAPIサポート完全打ち切りまでの日程公表 来年1月には全プラグインをブロックへ

    GoogleChromeでのNPAPIサポート完全打ち切りまでの日程公表 来年1月には全プラグインをブロックへ 米Googleは11月24日(現地時間)、9月に発表した「Netscape Plug-in API」(NPAPI)のChromeブラウザでのサポート打ち切りの日程を発表した。2015年1月には現在利用できているプラグインもデフォルトでブロックされ、9月にはNPAPIのサポートが完全に終了する。 NPAPIはブラウザ拡張の標準的な仕組みを初めて導入したAPIで、動画や音声のサポートといった機能を実現させてきた。GoogleはNPAPIサポート終了の理由を、このAPIが近年ではハングやクラッシュ、セキュリティ問題、コードの複雑化を招く筆頭原因になっていることと説明した。 9月段階では2014年内の終了を予定していたが、NPAPIを採用している多数のサービスの代替機能への移行が遅れて

    Google、ChromeでのNPAPIサポート完全打ち切りまでの日程公表 来年1月には全プラグインをブロックへ
  • TechCrunch | Startup and Technology News

    Cloudera, the once high flying Hadoop startup, raised $1 billion and went public in 2018 before being acquired by private equity for $5.3 billion 2021. Today, the company announced that…

    TechCrunch | Startup and Technology News
    nnnnnhisakun
    nnnnnhisakun 2014/11/19
    コアにMicrosoftやGoogleが入っていないのはどうなの。Firefoxしか信頼しないhttps実装になったら意味ないと思うけど。
  • Fetch API 解説、または Web において "Fetch する" とは何か? - Block Rockin’ Codes

    Update [14/11/11]: Chromium での実装が M40 からあるそうなので、末尾に引用追記させていただきました。 [14/11/12]: この記事を書くにあたって、色々なかたにレビューや助言を頂いたのですが、謝辞などが一切抜けてました、当にすいません。追記しました、ご協力頂いた方々当にありがとうございました。 WHATGW Fetch Spec WHATWG のメンテナンスするドラフトに Fetch Spec が追加されました。 もうすでに日語訳もあります、すばらしい。Fetch Standard 日語訳 この仕様には二つのことが定義されています。 "Fetching": Fetch するとは何か? の定義 "Fetch API": fetch() の定義 後者の定義に基づく fetch() という DOM API の実装も始まっています。(詳細は後述) しかし

  • Googleがウェブマスター向けガイドライン更新、CSSやJavaScriptのクロールをブロックしないよう求める ::SEM R (#SEMR)

    Googleがウェブマスター向けガイドライン更新、CSSJavaScriptのクロールをブロックしないよう求める グーグルのインデクシングシステムがモダンブラウザのようにウェブをレンダリングに基づいたシステムに変更されたことで、そのレンダリングを行うために必要な CSSJavaScript ファイルへもクローラ Googlebot がアクセスできるよう確認することをガイドラインに明記。意味もなく robots.txt でクロールを禁止すると、インデックスに問題が生じて自然検索順位に悪影響も。 公開日時:2014年10月28日 06:24 米Google は2014年10月27日、ウェブマスター向けガイドラインの「技術に関するガイドライン」を更新し、ウェブクローラが正しくサイトを認識するために CSSJavaScript などのウェブレンダリングに関連するファイルも巡回できるよ

    Googleがウェブマスター向けガイドライン更新、CSSやJavaScriptのクロールをブロックしないよう求める ::SEM R (#SEMR)
  • インターネット広告の料金一覧|相場や媒体まとめ【保存版】

    1. インターネット広告の料金一覧 インターネット・Web広告の料金は、広告手法や広告媒体によって様々です。ここでは、主要なネット広告手法と各有力媒体における料金相場をまとめました。 1-1. リスティング広告(検索連動型広告) リスティング広告は、GoogleYahoo!などの検索エンジンの検索結果ページに表示される広告です。 ネット広告といえば真っ先に思い浮かぶ代表格ですね。 ユーザーが入力した検索キーワードに関連して広告を表示することができるので、非常に費用対効果の高い広告手法です。 (※リスティング広告について詳しくは『リスティング広告とは』『リスティング広告のメリット・デメリット』でも解説しています。) リスティング広告は、広告がクリックされた時にだけ料金が発生するクリック課金型の広告です。また、広告の配信はキーワード単位で行われ、キーワードごとのオークション入札形式になります

    インターネット広告の料金一覧|相場や媒体まとめ【保存版】
  • 自分がプログラマになったときに、Webアプリケーション開発の独習で学びにくかったところをまとめる - Line 1: Error: Invalid Blog('by Esehara' )

    はじめに 独学でプログラミングを勉強しても実務に通用しにくい理由 - 25歳ニートが35万円で上京を企むブログを読んだときに、僕自身もまた不安定労働から、ある程度「これだったら自分できそうだ」という気持ちで取り組み、独習のつもりで幾つものプログラムを書いたりしていた。だから、ニートからプログラマを目指して、社員として今頑張ってます、というのはすごく仲間意識を持ってしまうし、同じように頑張ってほしいという気持ちはある。 確かに、上の記事の趣旨自体、つまり「独習で学ぶことは、実務上でカバーできない部分がある」という側面があることは認めつつ、しかし、自分自身は独習したことが案外実務上で役に立っている部分もあり、その部分は明確にしたほうが、今後同じように独習して、今度プログラマを目指す人々において役に立つのではないか、と思うので、この記事を書こうと思う。 この記事で扱う「Webアプリケーション開発

    自分がプログラマになったときに、Webアプリケーション開発の独習で学びにくかったところをまとめる - Line 1: Error: Invalid Blog('by Esehara' )
  • MEAN(MongoDB, Express, AngularJS, Node.js)スタックが優れている理由 - Mozilla Open Web Day in Tokyoを終えて - albatrosary's blog

    MEANとは、LAMP(Linux, Apache, MySQL, PHP)に変わる技術としてじわじわと注目されはじめているアーキテクチャです。このアーキテクチャMEAN(MongoDB, Express, AngularJS, Node.js)は、シンプルでかつ強力なアーキテクチャで、現在のJavaを利用したアプリケーション開発とは一線を画すところです。HTML5開発にとってJavaの役割が殆どなくなるというのも注目すべき点だと考えます。MEANで一般的に言われる注目すべき事項は次のところです: JavaScriptフルスタックである データモデルとしてクライアントからデータベースに至までJSON そして、この記事を書こうと思ったきっかけですが、2014/10/5(日) Mozilla Open Web Day in Tokyo | Mozilla Japan でのMEAN解説展示で、様

    MEAN(MongoDB, Express, AngularJS, Node.js)スタックが優れている理由 - Mozilla Open Web Day in Tokyoを終えて - albatrosary's blog
  • 不正なSSL証明書を見破るPublic Key Pinningを試す - ぼちぼち日記

    先日のエントリー 「TLSとSPDYの間でGoogle Chromeがハマった脆弱性(CVE-2014-3166の解説)」で予告した通り、今回不正なSSL証明書を見破る Public Key Pinningの機能について解説します。 Public Key Pinning は2種類の方法があります。あらかじめブラウザーのソースコードに公開鍵情報を埋め込む Pre-loaded public key pinning と、サーバからHTTPヘッダでブラウザに公開鍵情報を通知するHTTP-based public key pinning (HPKP)の2つです。 Chromeは既に両者の機能を実装済ですが、ちょうど近日リリースされる Firefox 32 の Stable バージョンから Pre-loaded public key pinning が実装されました。Firefox32リリース記念と

    不正なSSL証明書を見破るPublic Key Pinningを試す - ぼちぼち日記
  • 大手Webサービスがクライアント側で発生したJavaScriptのエラーをどう収集しているのか まとめ - Qiita

    Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

    大手Webサービスがクライアント側で発生したJavaScriptのエラーをどう収集しているのか まとめ - Qiita
  • フロントエンジニアに知ってもらいたいリバースプロキシの重要性 | RickyNews

    Randen Pederson 大規模なシステムであれば使っているであろうリバースプロキシ。 セキュリティや稼働率の観点からみて利用することは非常にメリットは高いです。 ただ、社内や周りであまり知見がなく、 「動くからいいや」という理由でApacheをそのままWebサービスの一次受けとして利用されている方も多いと思います。 動くという目的からすれば確かにその通りですが、ただ一枚リバースプロキシを入れるだけで ぐっと運用効率、稼働率も拡張性も上がります。 1. ルーティング処理の簡略化 例えばRESTfulな一般的なAPI構成を作りたいと思った時に以下のようなURL構成になると思います。 http://api.something.com/search/v1/item/list.json?cid=xxxx&gid=xxxxx もしアプリケーション側のルーティングしか知らなければframewor

    フロントエンジニアに知ってもらいたいリバースプロキシの重要性 | RickyNews
  • HTTPSを評価するアルゴリズムはページ単位

    [対象: 中級] HTTPS (SSL/TLS) を、評価を上げるランキング要因として組み込んだことをGoogleは先日発表しました。 このアルゴリズムはページ単位で適用されます。 サイト単位ではありません。 問い合わせフォームだけHTTPSだとどうなる? GoogleのJohn Mueller(ジョン・ミューラー)氏による、HTTPSへの移行に関する質問を紹介しました。 この記事のコメント欄で次の質問をコメント読者の方からいただきました。 通常は「http://www.example.com」なのですが 申請の入力フォームだけ「https://www.example.com/inquiry/」などの場合 というのはどう影響するのでしょうか。 「サイト内の、入力フォームがあるページだけがHTTPSの場合はどうなるのか?」という質問です。 とても良い質問だと思います。 僕は次のように返信しま

    HTTPSを評価するアルゴリズムはページ単位