主要ブラウザにおける SSL 3.0 無効化タイミングのまとめ
SSL 3.0 の脆弱性 （POODLE） の件で、10月に下記の記事を書いたんですが、その中でも触れた、各主要ブラウザにおける SSL 3.0 無効化タイミングだけ、わかりやすいように抜き出してこちらにまとめておこうと思います。メモ代わり。 SSL 3.0 の脆弱性 （POODLE） 対策で Web サーバの SSL 3.0 を無効にした件とブラウザ側の対処まとめ Internet Explorer SSL 3.0 が無効になる時期： 正式な時期は不明だが、数ヶ月以内 米国時間の 2015年 4月 14日以降、デフォルトで無効に。 「マイクロソフト セキュリティ アドバイザリ 3009008」 内では、下記の通り、（10月 15日から起算して） 数ヶ月以内に IE の既存設定 （および同社のオンラインサービス） で SSL 3.0 が無効になる旨がアナウンスされています。 マイクロソフト
Google 検索結果内の検索ボックスを有効にするための Microdata マークアップ
Google の検索結果内に表示される検索ボックス （Sitelinks search box） を有効にするための schema.org 語彙による Microdata を使用したマークアップについて解説してみます。 Google ウェブマスター向け公式ブログで、Google の検索結果内に表示される検索ボックス （Sitelinks search box） について刷新され、見せ方が変わったほか、この 「Sitelinks search box」 を表示するために必要なマークアップについて紹介されていました。 検索結果内の検索ボックスが新しくなりました ： Google ウェブマスター向け公式ブログ Sitelinks Search Box ： Google Developers Sitelinks search box は、検索結果で表示されるサイトリンクの下部に表示されるもので、以
position: absolute; の指定で要素が上下左右中央配置になる理由
人様の人気エントリーに乗っかる感じで恐縮ですが、「CSSで block 要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。」 という記事が話題になっていたので、なんでその指定で上下中央配置になるのか補足してみます。 詳しい話は下記のリンク先をご覧ください。 CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 ： バシャログ。 何でこういうことを書くかというとですね、例えば CSS でこういう指定をするとこう表示されるっていう話に関しては、仕様書を基準に話して欲しいのです。 「なんかよくわからないけどこういう風に書いたらこういう表示になった。よかったね」 で終わらせるのは個人の自由ですが、仕様書を基になぜそうなるのかの根拠を知るとより一層理解が深まると思いますので。 なので余計なお世話なんですが、下記に小難しく書きます。 解説のためのサンプルソース 例えば、下記の
Google Analytics に 「ロボットのフィルタリング」 機能が追加
Google Analytics の公式 Google+ アカウントに、「Introducing Bot and Spider Filtering」 と題した記事が投稿され、Google Analytics に検索エンジンのクローラーやその他ボットからのアクセスをフィルタリングする機能を追加したよとアナウンスされました。 Introducing Bot and Spider Filtering ： Google Analytics Google+ 日本語で使用している場合は、各プロファイルの、「ビュー設定」 内に、「ロボットのフィルタリング」 という項目が表示されますので、「既知のロボットやスパイダーからのヒットをすべて除外します」 にチェックを入れて保存すれば、この機能が有効になります。 設定してもすぐに数値は変化しませんでしたので、この設定を有効後のアクセスに対してフィルターが適用され
iPhone Safari などで Web ページ のタイトルと URL をコピーするブックマークレットを作った
iPhone 版 Safari など、モバイルブラウザで閲覧中の Web ページのタイトルと URL をコピーするブックマークレットを作ったので紹介します。プレーン、HTML、Markdown の 3つの形式でコピーできます。 タイトルで全部言っちゃってる感はありますが、iPhone 版 Safari を使っていてちょっと面倒なのが、見ているページのタイトルや URL を指定の形式でコピーすることができない点。Blog 記事を書いていたり、Twitter などに投稿する際に見ているページからこれらの情報を簡単にコピーしたいって時が多々あります。 一応、iOS には Safari から Twitter や Facebook にシェアする機能も実装されていますが、タイトルや URL を投稿時に編集できないし、コピーを選択すると URL だけしかコピーされないしってことで、ちょっと使い勝手が悪い
夜中に公開した Blog 記事を時間差で Twitter などに投稿するなら IFTTT と Buffer の組み合わせがいいと思う
ついさっき、Twitter のタイムラインにカイ士伝さんが書かれた下記の記事が流れてきたんですけども、その中で、「夜中に公開しちゃった Blog 記事の告知を、ソーシャルメディアには翌日の朝とかに投稿したい （夜中にソーシャルメディアに投稿しても誰も見てないし） んだけど、いいツールが見つからない」 というようなことが書かれていましたので、1つ楽な方法を書いてみようと思います。 RSSリーダー不在の時代におけるブログ更新はいかにあるべきか ： カイ士伝 知らない人に届けるつもりもないので友達に伝われば良いのですが、今までみたいに「何時に投稿してもちゃんと読んでもらえる」ような仕組みではなくなりつつあるなあと実感していて、ちょっとこのブログもどうしようか検討中。とはいえ記事書いておいて朝に予約投稿とかあんまり好きでないというか、やっぱり書いたらその時のテンションで投稿したいんだよなあ。 なの
Dropbox の 2段階認証を Google Authenticator を使って設定する
2段階認証というと、SMS や音声通話でセキュリティコードを受け取るイメージがありますが、アプリでも可能で、さらに TOTP に対応したアプリであれば複数の Web サービスのセキュリティコードを 1つで管理できます。ここでは Dropbox の 2段階認証を Google Authenticator を使って設定する方法を紹介します。 皆さん、2段階認証使ってますか？ 2段階認証を突破する方法なんかも取りざたされたりしている昨今ではありますが、とはいえアカウントへの不正アクセスを防ぐためには有効にしておいた方がいい 2段階認証。 Google の 2段階認証はよく取り上げられますが、それ以外にも Apple、Amazon （AWS）、Dropbox、Evernote、Facebook、GitHub、Microsoft、Twitter、Yahoo! 等でもこの 2段階認証は使用できます。
Twitter の新 UI がきたので試してみた。ヘッダ画像は 1500px × 500px、ツイートのピン留めも可能に
先日発表されて、各ユーザーに順次適用拡大していっていた Twitter Web 版の新しいデザインですが、自分のところにも適用されたので早速設定をしてみました。 下記の公式 Blog でも書かれていますが、ヘッダ画像のサイズが大きく変更されたり、ツイートの固定 （英語表記では Pin となっています） などもできるようになっています。 ウェブ版プロフィールを新しくしました ： Twitter Blogs Twitterのウェブ版プロフィールページを新しくしました。新しいレイアウトでは、プロフィール画像やヘッダーがより大きく見やすくなり、さらに人気があったツイート（ベストツイート）をハイライトする機能なども加わりました。 ウェブ版プロフィールを新しくしました ： Twitter Blogs から引用 プロフィール写真は 400px 四方を推奨 新しいデザインでは、プロフィール写真が 400p
jQuery が 1.12 以降のブラウザサポートについて発表。 IE6/7 のサポートは 1.12 まで
jQuery 公式サイトにて、年内にリリース予定の jQuery 1.12 以降のブラウザサポートについて、1.12 が IE6/7 をサポートする最後のリリースになると発表しました。 Browser Support in jQuery 1.12 and Beyond ： Official jQuery Blog 以前、この Blog でも書きましたが、jQuery 2.x 系はすでに IE6/7/8 のサポートはしていません。1.x 系がレガシーブラウザをサポートするバージョンですが、1.12 までは現在の最新版である 1.11 同様、IE6/7/8 をサポートするものの、次バージョン （2015年リリース予定） の 1.13 では IE8 以降のみのサポートとなります。 What's Changing? There are no firm dates, but we plan on r
新しい Google Maps Embed API が公開、埋め込み地図のカスタマイズが簡単に
Google が新しい Google Maps Embed API を公開しました。 埋め込む地図の URL に様々なパラメータをつけることで、ルート案内や周辺検索など、様々なカスタマイズを簡単に行いつつ、Web ページ上に地図を表示することが可能です。 Adding the new Google Maps to your website just got easier with the new Google Maps Embed API ： Google Geo Developers Blog Google Maps Embed API ： Google Developers Google Maps Embed API - Developer Guide 埋め込みコード生成用のページも用意されています。下記にアクセスしてみましょう。 Google Maps Embed API -- Ge
TinyPNG API を使って PNG 画像を最適化する grunt-tinypng 使ってみた
PNG ファイルの最適化 （減色 / 圧縮） を行うオンラインツールとして TinyPNG は有名ですが、開発者向けの API も提供されています。 この TinyPNG API を使った画像の最適化を Grunt タスクとして実行できる 「grunt-tinypng」 をここのところ試していたんですが、いい感じだったので紹介。これまでは 「grunt-pngmin」 を使っていたのですが grunt-tinypng に移行して試しています。 grunt-tinypng ： marrone/GitHub TinyPNG ： Compress PNG images while preserving transparency ちなみに、TinyPNG API は処理する画像の数によって有料になりますので、その点は注意が必要です。現時点での価格設定は下記のようになっています。 Free プラン
Firefox 27 が正式リリース、all:unset で CSS のリセットが可能に
Firefox の最新版、Firefox 27 が正式リリースされ、自動更新も提供開始されました。 CSS 関連では、all プロパティと unset 値に対応し、CSS のリセットが簡単に行えるようになった他、cursor プロパティ用の -moz-grab、-moz-grabbing 接頭辞が外れました。ベンダプレフィックスなしで使用できます。 Firefox 27.0 リリースノート Firefox 27 サイト互換性情報 Firefox 27 for developers all: unset で何ができるか 仕様的には下記にあります。 3.1 Resetting All Properties: the all property ： CSS Cascading and Inheritance Level 3 The all property is a shorthand that
Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩 | WWW WATCH
フロントエンドの開発を色々と捗らせてくれる Grunt について、初めて Grunt を使うならこれだけまずはやってみたら？ という入門的な解説記事を書いてみました。 この記事は公開からかなりの時間が経過して内容が古いのと、Gulp を使ったフロントエンド開発環境構築について新しい記事 「Web サイト作るお仕事をしている人向け Gulp で作るフロントエンド開発環境」 を書いていますのでそちらをご覧ください。 Grunt の導入記事なんか珍しくもないし、色々な方がわかりやすい記事を過去にも書かれていているので今さらではありますが...... とはいえ、まだ使ったことがない人もいるだろうということで、「Grunt って何ですか？」 とか「使ってみたいけどよくわからない......」 なんていう Web デザイナー （主に HTML や CSS を書くフロントエンドな人） さん向けに、初めて
世界各国の地図がベクターデータでダウンロードできる 「Free Vector Maps」
すでに他でも紹介されているかもしれませんが、ちょっと便利だったので紹介。 「Free Vector Maps」 は、世界各国の地図を、ベクター形式のデータ （ダウンロードデータには .ai, .esp, .jpg, .pdf, .png が含まれています） でダウンロードできるサイト。提供されるデータは、基本的に無料で、個人 / 商用利用を問わず利用できます。 Free Vector Maps ： Royalty-Free Vector Maps Free Vector Maps is a growing library of highly detailed free* and premium royalty-free vector maps created for designers all over the world. View the Library (*Attribution r
新しい picture 要素の仕様が公開、レスポンシブ・イメージ最新動向
HTML5 extension （HTML5 拡張仕様） として策定されている picture 要素に関して、最新の仕様が年明け、1月 2日に公開されましたので簡単に紹介。 所謂、レスポンシブ・イメージ （Responsive images） のお話ですが、HTML5 extension （HTML5 拡張仕様） として策定されている picture 要素に関して、最新の仕様 （Editor's Draft） が年明け、1月 2日に公開されました。 ちょっと時間が経ってしまいました （10日以上、下書きのままで放置されていたのはナイショ） が紹介と、レスポンシブ・イメージ関連の最新動向を簡単にまとめてみます。 The picture Element, Editor's Draft, 2 January 2014 ちなみに、1つ前の仕様は下記になります。 The picture elemen
CSS filter プロパティで 「半透明ガラス」 効果を再現してみる
2つ前の記事、「Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に」 で、::backdrop 疑似要素に色々スタイル当てて遊んでたとき、::backdrop 疑似要素に対しては半透明の白いレイヤーになるようにスタイル当てて、その上で、CSS filter プロパティを使って画面全体をぼやかしたら、iOS 7 （Windows Aero ...） とかで使われてる、所謂 「半透明ガラス」 っぽい効果が出せるんじゃね？ と思ってやってみました。 実際に iPhone の Safari で表示してみた例が下記の画像です。 ただし、dialog 要素や ::backdrop 疑似要素を使っちゃうと、現時点では Chrome Canary で、さらにフラグを立てないと動作しないっていう、ほとんどの人が試せない状態になってしまうので、今回は div 要素を J
Chrome Canary が dialog 要素に対応、ダイアログボックスの表示が簡単に
Chrome の Canary build が、HTML 5.1 で策定中の dialog 要素に対応したとのことで、HTML5Rocks でデモページが公開されています。その紹介と、dialog 要素についての簡単な解説。 HTML5Rocks の記事経由ですが、Chrome の Canary build が、HTML 5.1 で策定中の dialog 要素に対応したとのこと。 現状では、chrome://flags から enable-experimental-web-platform-features を有効にする必要がありますが、これによってダイアログボックス （モーダルウィンドウ） の表示を HTML と簡単な JavaScript API で行えます。また、::backdrop 疑似要素を使用することで、ダイアログボックス表示時の、画面背景を暗くするあれも CSS だけで簡単に
5分でわかる Snaptee の使い方。Tシャツデザインの作成から購入方法まで
5分でわかるシリーズ、Snaptee 編。Snaptee を使った Tシャツデザインの作り方から、実際にそれを購入する方法までを初めての人でもわかるように解説してみます。 Snaptee は、iPhone 向けに公開されている Tシャツデザインアプリで、iPhone 上で Tシャツデザインを簡単に作れて、世界中に向けて販売もできるサービス。 Snaptee ： T-shirt design is easy, get Snaptee from AppStore! Snaptee ： iTunes App Store その Snaptee を少し前から使ってるんで、ここらで毎度恒例の、5分でわかるシリーズ、Snaptee 編を書いてみたいと思います。Snaptee を使った Tシャツデザインの作り方から、実際にそれを購入する方法まで。また、最後に、本家の FAQ から一部を翻訳して紹介していま
Facebook のウォール投稿を外部サイトに埋め込む機能が使えるようになってた
Facebook がユーザー限定で提供開始していたウォールの投稿を外部サイトに埋め込む機能が一般に公開されたようです。埋め込んだ投稿に直接いいねしたり、シェアしたりすることもできます。 先日、Facebook がウォールの投稿を外部サイトに埋め込む機能を、一部の大手メディアに限定して提供開始したっていうニュースがあったんですけども、どうやら一般に公開され、誰でも使えるようになったみたいですね。 Facebook、ウォールの投稿を外部サイトに埋め込む機能を限定で提供開始 Facebook で一般公開としてウォールに投稿された内容を、外部 Web サイトなどに埋め込むことが可能で、さらに、埋め込んだ投稿対して直接いいねしたり、シェアしたりすることもできます。Twitter の投稿を埋め込むのと同じような感じで利用できます。 埋め込み方は簡単で、ウォールに投稿された内容の右上にある、矢印をクリッ
WebKit （Nightly Builds） で srcset 属性がサポートされたらしい
WebKit （Nightly Builds） で HTML の srcset 属性がサポートされたようですので、簡単に srcset 属性の仕様について解説してみます。 WebKit （Nightly Builds） で HTML の srcset 属性がサポートされたようです。 srcset 属性は、img 要素の属性として使用することで、高精細ディスプレイ （デバイスピクセル比に応じて） 向けや、ディスプレイサイズに応じて画像を出し分けるための属性。所謂、「Responsive images （レスポンシブ イメージ）」 を HTML のみで実現することができます。 Improved support for high-resolution displays with the srcset image attribute ： Surfin' Safari WebKit Nightly
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
