AMP （Accelerated Mobile Pages） HTML を出力するようにしてみたけど面倒くさかった話
Movable Type で運用している Blog の記事を AMP （Accelerated Mobile Pages） HTML で出力するようにしてみたけれど、とある自分の書き方の癖により既存の記事を AMP HTML に自動変換するのは結構面倒くさかったという話。 Google が発表したプロジェクト、Accelerated Mobile Pages （AMP） は、モバイル端末における Web ページの表示を高速化する取り組みで、超簡単に言ってしまえば、オープンソースで公開されるフレームワーク、AMP HTML の仕様に従って Web ページを作ってくれれば、その表示を大幅に高速化できますよという仕組み。 単にファイルサイズ的に軽いよというような単純な話だけではなく、キャッシュなど様々な技術を組み合わせることでページのロード時間を大幅に短縮する仕組みで、制作者側が AMP HTM
フィッシングに引っかからないためにアドレスバーをみるクセをつけましょう
Amazon の偽サイトに誘導し、そこでアカウント情報を盗むという、所謂フィッシングサイトが話題になっています。フィッシングサイト自体は別に珍しくないと思いますが、今回のは日本の Amazon （amazon.co.jp） を騙っているということで、引っかかる人が多そうという予感はします。 Amazon をかたるフィッシング ： フィッシング対策協議会 Amazon.co.jp からのEメールかどうかの識別について ： Amazon.co.jp ヘルプ とは言っても、各銀行のネットバンキングへの不正アクセスを狙ったフィッシングサイト （もちろん日本語） は以前からたくさんありますし、フィッシングの脅威自体は常に我々の周りに存在しているわけです。 で、そんな状況で何を今さらこんなこと書くかというとですね、どうも今回の Amazon 偽サイト騒ぎに関連して、朝の某情報番組で、フィッシングサイト
jQuery 3.0 および jQuery Compat 3.0 のアルファ版が公開される
jQuery 3.0 および jQuery Compat 3.0 のアルファ版がリリースされました。主に .show()、.hide() メソッドに対して行われた仕様変更について触れてみたいと思います。 米国時間の 13日付けで、jQuery 公式サイトにてアナウンスされましたが、jQuery 3.0 および jQuery Compat 3.0 のアルファ版がリリースされました。 現行版の jQuery 2.x 系の後継が 「jQuery 3.0」、1.x 系の後継が 「jQuery Compat 3.0」 と名称変更されてのリリースになります。大きいところだと .show()、.hide() メソッドの仕様が変わったみたい。 jQuery 3.0 and jQuery Compat 3.0 Alpha Versions Released ： Official jQuery Blog jQ
事前予告されていた OpenSSL のアップデートが公開されたので OpenSSL 1.0.2d を入れた件
OpenSSL に関して、7月 9日に重要度 「高」 の脆弱性修正をリリースするよと事前に予告されていた件で、予告通り 9日 （米国時間） にこの脆弱性修正が適用されたバージョンのリリースが行われましたので、自分のサーバ環境にも適用しました。 OpenSSL OpenSSL Security Advisory [9 Jul 2015] [openssl-announce] Forthcoming OpenSSL releases This issue affects OpenSSL versions 1.0.2c, 1.0.2b, 1.0.1n and 1.0.1o. OpenSSL 1.0.2b/1.0.2c users should upgrade to 1.0.2d OpenSSL 1.0.1n/1.0.1o users should upgrade to 1.0.1p This i
Google タグマネージャで Web ページに読み込む JavaScript を管理してみる
Google タグマネージャ （Google Tag Manager） をこの Blog 内の各ページで読み込んでいる JavaScript コードの管理に数ヶ月前から使い始めていますが、結構使いやすくて便利なのと、ページの表示速度的にもいい結果が出たので紹介してみます。 Google タグマネージャ公式サイト 機能 ： Google タグマネージャ Google タグマネージャとは？ Google タグマネージャは無料で簡単に使用できるタグ管理システムです。ウェブ上の使いやすい管理画面から自分でタグを管理してモバイル アプリを設定できるため、面倒なコード書き換えは不要で、IT 部門に依頼する必要もありません。 機能 ： Google タグマネージャ から引用 と公式には書いてありますが、簡単にいえば Web ページ内で読み込む各種の JavaScript コード、例えば Google A
当 Blog を SSL 対応させたので手順や修正が必要になった点などをまとめ
10年間運営されてきた自分の Blog を SSL 対応させるにあたって、その手順や、SSL 化したことで修正をしなければならなくなって大変だった点などを簡単にまとめてみようと思います。 なぜか先週末の夜中に急に思い立って、この Blog のドメイン用に SSL 証明書を購入し、急遽 SSL 対応 （HTTPS でアクセスできるように） してみたわけですが、その手順やら、SSL 化したことでちょっと手直ししないといけなくなって大変だった点などをまとめて見ようと思います。 ちなみに、まだリダイレクトや HSTS （HTTP Strict Transport Security） はドメインに対して有効にしていないので、現状は HTTP / HTTPS どちらでもアクセスできる状態。もうちょっと検証した上で HSTS を有効にして所謂、常時 SSL 化する予定。 10年間以上運営してきた Web
ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験
スムーズスクロール以外の方法で、ページ内リンクによって画面が切り替わったことを利用者にわかりやすく伝える方法はないかということで、ページ内リンクでの移動時に画面を一瞬点滅させるスクリプトを jQuery で書いてみました。 タイトルが （謎） な感じですが...... ページ内リンクでページ上部に移動させたりするとき、最近は所謂スムーズスクロールってやつを実装するのが当たり前になっていますよね。パッと瞬時に画面が切り替わってしまうと、ページ内で移動したことがわかりにくいので、スクロール処理を入れることでわかりやすくしてあげましょうって言う、親切心から採用されるケースが多いと思います。 実装方法は JavaScript と CSS アニメーションの組み合わせや、JavaScript （というか jQuery） でというのが多いと思いますが、今回はそのスムーズスクロールの実装方法はどれが良いの
Web サイトの制作ガイドラインをクリエイティブ・コモンズ・ライセンスで公開しました
自分の会社ので作って使っていた Web サイト制作のガイドラインをクリエイティブ・コモンズ・ライセンスで公開しました。ライセンスの範囲内で自由に使っていただけます。 会社の方の Web サイトではすでに告知したんですけども、自分の会社で作って使っていた Web サイト制作のガイドラインを公開しました。 この制作ガイドライン自体は新しく会社を立ち上げた当初に整備し始めて、そのまま使っていたんですが、自社特有のルールを整理したり、書き方を少し汎用的に調整した上で、公開することにしました。クリエイティブ・コモンズ・ライセンスで公開していますので、ライセンスの範囲内であれば自由に使っていただけます。 弊社の制作ガイドラインをクリエイティブ・コモンズ・ライセンスで公開します ： バーンワークス株式会社 制作ガイドライン ： バーンワークス株式会社 更新の履歴は GitHub で見られます。制作ガイド
事前予告されていた OpenSSL のアップデートが公開されたので OpenSSL 1.0.2a を入れた件
OpenSSL に関して、3月 19日に重大なアップデートをリリースするよと事前に予告されていた件で、予告通り 19日 （米国時間） に多数の修正が適用されたバージョンのリリースが行われましたので、自分のサーバ環境にも適用しました。 今回のリリースに関連して公開されている各バージョンと、セキュリティアドバイザリーは下記です。 OpenSSL OpenSSL Security Advisory [19 Mar 2015] アドバイザリーを確認する限り、細かい脆弱性に関する修正は行われているものの、思っていた程は重大な感じではなく、まずはひと安心でした （もちろん、修正版の適用はなるべく迅速に行うべきです）。 なお、「Severity: High （重要度 高）」 に分類されている FREAK に関連した修正 （CVE-2015-0204） に関しても、後述しますが重要度の再分類があったために
Google が言う 「モバイルフレンドリー」 とは？ モバイルフレンドリーテストツールで色々試してみた
Google が言う 「モバイルフレンドリー」 とは？ モバイルフレンドリーテストツールで色々試してみた Google がモバイル検索の順位決定時に 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表したことに関連して、そもそも Google は何を根拠に 「モバイルフレンドリー」 かどうかを判断しているのか、という点について調べてみました。 先週ですが、Google が Official Google Webmaster Central Blog で、2015年 4月 21日 （米国時間） から、モバイル検索の順位決定時に、その Web サイトが 「モバイルフレンドリー」 かどうかを重要なシグナルとして利用すると発表しました。 Finding more mobile-friendly search results ： Official Google Webmaster
FREAK （Factoring attack on RSA-EXPORT Keys） 対策で Web サーバに行った SSLCipherSuite の設定例
先週話題になっていた、輸出グレードの RSA 暗号をサポートしていたことに起因する脆弱性 「FREAK」 に関連して、Apache + OpenSSL で運用しているサーバに対して SSLCipherSuite の設定を見直してみたので、その方法と具体的な設定についてまとめておきます。 まず、FREAK に関しての詳細な情報については下記のリンク先などをご覧ください。この記事では件の脆弱性に対応するため、Web サーバ側で行った設定変更についてのみ触れています。 Attack of the week: FREAK (or 'factoring the NSA for fun and profit') FREAK についてまとめてみた ： piyolog 華麗なる因数分解: FREAK 攻撃の仕組み ： ぼちぼち日記 [FREAK] セキュリティアドバイザリ 3046015 「Schanne
IFTTT から Blog の更新を自動で画像付きツイートするためにフィードを少し直した件
この Blog が更新された時、IFTTT から自動的に自分の Twitter アカウントに 「画像付きツイート」 を投稿するための IFTTT レシピと、投稿に意図した画像を使ってもらうためにフィード側で行った修正についてまとめました。 この Blog を更新した際、IFTTT から自動的に自分の Twitter アカウントに投稿するっては昔からやっていたんですが、ちょっとそのツイートを画像投稿と合わせた、所謂 「画像付きツイート」 にしようと思って、やってみた件について書いてみたいと思います。 画像付きツイートってのは、Twitter に画像をアップロードして、それへのリンクもついたツイートのことですね。なので記事へのリンクとあわせて、ツイート内に URL が 2つ入ることになります。 具体的には下記みたいなやつ。 Blog更新 -> SVG のフォールバックは結局 Modernizr
SVG のフォールバックは結局 Modernizr に落ち着いた件
タイトルでほぼ言い切ってる感じなんですが...... SVG に対応していない環境 （IE8 以前とか、旧 Android の標準ブラウザとか） に対するフォールバックの方法はいくつかありますが、色々試して、最終的に img 要素で SVG を配置した上で、Modernizr と簡単な JavaScript （とりあえず jQuery） 書いて SVG 未対応ブラウザに対しては代替画像に差し替えるっていう手で落ち着きましたというお話。 SVG を使うにあたって、どの程度古いブラウザまで対応するかっていうのはありますが、今回対象にしている SVG は、ページ内で通常の画像 （普通の JPEG とか PNG） と同じように使われるものを想定していますので、いくら古いブラウザはサポート対象外とは言っても、文書内で大切な意味を持つ画像が表示されないのはまずいだろと。 あわせて対象となる SVG 内
常時 SSL 化による Web サイト表示速度向上の可能性について
常時 SSL 化が Web サイトのパフォーマンスに与える影響ついて、SPDY や HTTP/2 が利用可能になっている現在の状況から、その有効性や実際のパフォーマンス測定の結果についてまとめてみました。 先週、Web サイトを常時 SSL 化する場合に、最低限知っておかなければならない知識や、注意点、実際の設定方法まで、ひと通りまとめる記事を書きました。内容とは別に 「5分とはいったい......」 と 5分間という時間に対する禅問答的提起をした形にも、一部ではなりましたが （大げさ）。 5分でわかる正しい Web サイト常時 SSL 化のための基礎知識 さて、この中で、常時 SSL 化のメリットやデメリットについても簡単に書いたのですが、デメリットの中で、Web サイトのパフォーマンスについて、「SSL 化でパフォーマンスが悪化する可能性」 と、一方で 「HTTP/2 や SPDY が
5分でわかる正しい Web サイト常時 SSL 化のための基礎知識
Web サイトを常時 SSL 化する場合に、最低限知っておかなければならない知識や、注意点、実際の設定方法まで、ひと通りまとめてみました。メリットやデメリット、証明書の種別からリダイレクト設定などについても解説しています。 HTTPS をランキングシグナルに使用しますと Google が公式に発表したあたりから、Web サイトの SSL 対応、特に Google が推奨している Web サイトをすべて HTTPS で配信する、所謂 「常時 SSL 化」 についての話を聞いたり、実際にお客様から相談されたりするケースが増えてきました。 そこで、いい機会だしその辺に関する情報をまとめておこうかな～ と思って書いてみた、恒例の （？） 5分でわかるシリーズ。書き終わって見たところ絶対に 5分じゃ無理っていう文章量になっててどうしようかなぁとも思ったんですが、気にせず公開してみます。 常時 SSL
Accessible Rich Internet Applications (WAI-ARIA) 1.0 の日本語訳が公開される | WWW WATCH
Accessible Rich Internet Applications (WAI-ARIA) 1.0 の日本語訳が公開されるリッチなインターネットアプリケーションをアクセシブルにするための仕様、「Accessible Rich Internet Applications (WAI-ARIA) 1.0」 の日本語翻訳版 （2014年 3月 20日付け W3C 勧告の翻訳） が公開されました。 リッチなインターネットアプリケーションをアクセシブルにするための仕様、「Accessible Rich Internet Applications (WAI-ARIA) 1.0」 の日本語翻訳版が @momdo_ 氏によって公開 （翻訳中から公開されていましたので、正確には翻訳が完了した） されました。W3C の翻訳データベースにも反映されています。 Accessible Rich Internet
ブラウザから SVGO で SVG ファイルを最適化できる 「SVGOMG」
SVGO は SVG ファイルから不要なデータを取り除いたりして最適化してくれる便利なソフトウェアですが、これをブラウザの画面から使えるようにしたのが、「SVGOMG」 です。 SVGOMG SVGOMG ： GitHub 例えば JPEGmini の Web 版とか TinyPNG のような画像最適化ツールがありますが、これの SVG ファイル向けですね。ブラウザから簡単に操作できますし、最適化オプションの適用も画面上で SVG ファイルの変化を確認しながら行えますのでわかりやすいと思います。 SVGO には下記のようなオプションが用意されていますが、 cleanup attributes from newlines, trailing and repeating spaces → 属性値内の重複する空白や改行を削除 remove doctype declaration → DOCTYP
TinyPNG が JPEG ファイルの最適化にも対応、TinyJPG もローンチ
PNG ファイルの最適化 （減色 / 圧縮） を行うオンラインツール 「TinyPNG」 が JPEG ファイルの最適化にも対応しました。 これにあわせて、「TinyJPG」 も立ち上がりましたが、TinyPNG も TinyJPG も、どちらも PNG / JPEG ファイルの最適化を同時に行えるようになっていますので、サイト名が異なるだけで機能的には同じです。 上が元々ある TinyPNG で、下が TinyJPG のスクリーンショット。 使い方は同じで、パンダさんの横の ドラッグ & ドロップ エリアに、最適化したい画像をドラッグ & ドロップすればいいだけ （もしくはこの部分をクリックしてファイルを選択）。同時に 20 ファイルまで最適化できます。 今までの TinyPNG は PNG ファイル専用で、JPEG ファイルをアップロードすると当然ながらエラーになりましたが、今は JP
Web サイトのパフォーマンスレポートを自動で作成してくれる Google Pagespeed Insights for WordPress
PageSpeed Insights を使用した Web ページのパフォーマンスレポートを WordPress の管理画面上で作成して見ることができるプラグイン、「Google Pagespeed Insights for WordPress」 を使ってみたので紹介。 Google Pagespeed Insights for WordPress ： WordPress Plugins プラグインのインストール プラグインのインストールは管理画面から 「Google Pagespeed」 などと検索すれば出てくると思いますので、そこから行います。 Pagespeed Insights API キーの取得 ただ、このプラグインを使用するには Google Pagespeed Insights の API キーが必要ですので、そちらを先に取得しておきましょう。 APIs Console に G
SSL 3.0 の脆弱性 （POODLE） 対策で Web サーバの SSL 3.0 を無効にした件とブラウザ側の対処まとめ
SSL 3.0 の脆弱性 （POODLE） 対策で Web サーバの SSL 3.0 を無効にした件とブラウザ側の対処まとめ SSL 3.0 に存在する脆弱性、通称 「POODLE」 に関連して、自分が管理している Web サーバ （Apache） の SSL 3.0 を無効にした際の設定方法と、各ブラウザごとに SSL 3.0 を無効にする方法などをまとめています。 2014年 10月 14日 に発表された「Secure Sockets Layer（SSL）」のバージョン 3.0 （SSL 3.0） に存在する脆弱性 （CVE-2014-3566）、通称 「POODLE （Padding Oracle On Downgraded Legacy Encryption）」 ですが、これに関連して、自分で管理している Web サーバ （Apache） の SSL 3.0 を無効にしました。 そ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
