Web サイトの制作ガイドラインをクリエイティブ・コモンズ・ライセンスで公開しました
自分の会社ので作って使っていた Web サイト制作のガイドラインをクリエイティブ・コモンズ・ライセンスで公開しました。ライセンスの範囲内で自由に使っていただけます。 会社の方の Web サイトではすでに告知したんですけども、自分の会社で作って使っていた Web サイト制作のガイドラインを公開しました。 この制作ガイドライン自体は新しく会社を立ち上げた当初に整備し始めて、そのまま使っていたんですが、自社特有のルールを整理したり、書き方を少し汎用的に調整した上で、公開することにしました。クリエイティブ・コモンズ・ライセンスで公開していますので、ライセンスの範囲内であれば自由に使っていただけます。 弊社の制作ガイドラインをクリエイティブ・コモンズ・ライセンスで公開します ： バーンワークス株式会社 制作ガイドライン ： バーンワークス株式会社 更新の履歴は GitHub で見られます。制作ガイド
5分でわかる正しい Web サイト常時 SSL 化のための基礎知識
Web サイトを常時 SSL 化する場合に、最低限知っておかなければならない知識や、注意点、実際の設定方法まで、ひと通りまとめてみました。メリットやデメリット、証明書の種別からリダイレクト設定などについても解説しています。 HTTPS をランキングシグナルに使用しますと Google が公式に発表したあたりから、Web サイトの SSL 対応、特に Google が推奨している Web サイトをすべて HTTPS で配信する、所謂 「常時 SSL 化」 についての話を聞いたり、実際にお客様から相談されたりするケースが増えてきました。 そこで、いい機会だしその辺に関する情報をまとめておこうかな～ と思って書いてみた、恒例の （？） 5分でわかるシリーズ。書き終わって見たところ絶対に 5分じゃ無理っていう文章量になっててどうしようかなぁとも思ったんですが、気にせず公開してみます。 常時 SSL
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 を無効にしました。 そ
主要ブラウザにおける 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 が無効になる旨がアナウンスされています。 マイクロソフト
夜中に公開した Blog 記事を時間差で Twitter などに投稿するなら IFTTT と Buffer の組み合わせがいいと思う
ついさっき、Twitter のタイムラインにカイ士伝さんが書かれた下記の記事が流れてきたんですけども、その中で、「夜中に公開しちゃった Blog 記事の告知を、ソーシャルメディアには翌日の朝とかに投稿したい （夜中にソーシャルメディアに投稿しても誰も見てないし） んだけど、いいツールが見つからない」 というようなことが書かれていましたので、1つ楽な方法を書いてみようと思います。 RSSリーダー不在の時代におけるブログ更新はいかにあるべきか ： カイ士伝 知らない人に届けるつもりもないので友達に伝われば良いのですが、今までみたいに「何時に投稿してもちゃんと読んでもらえる」ような仕組みではなくなりつつあるなあと実感していて、ちょっとこのブログもどうしようか検討中。とはいえ記事書いておいて朝に予約投稿とかあんまり好きでないというか、やっぱり書いたらその時のテンションで投稿したいんだよなあ。 なの
OpenSSL の脆弱性 （Heartbleed Bug） に関連して、SSL サーバ証明書を再発行した件
先日、この Blog でも書きましたが、OpenSSL に脆弱性が見つかった件に関連して、自分のところで運用しているサーバで使用中の SSL サーバ証明書を再発行したので、その手順などをメモ。 ちなみに、私が使用しているのは Rapid-SSL さんなので、証明書再発行手続きの方法などは SSL サーバ証明書の発行元によって異なります。 なんで SSL サーバ証明書の再発行をするの？ OpenSSL の脆弱性 （Heartbleed Bug） によって、攻撃者は 「SSL サーバ証明書」 の秘密鍵 （Private Key） を手に入れる可能性もありました。入手した秘密鍵を悪用することで、攻撃者は暗号通信を解読して盗聴を行ったり、不正な SSL サーバ証明書を発行することも可能です。 Heartbleed Bug は 2年以上前から存在していた （公表以前から気がついて黙っていた人がいるか
OpenSSL の脆弱性 （Heartbleed Bug） に関する Q&A
OpenSSL に脆弱性が見つかった件で、この脆弱性に関する詳細を解説するサイト （heartbleed.com） をセキュリティ企業の Codenomicon 社が公開しています。 そこで、同サイトに掲載された Q&A の中から特に重要そうな部分を簡単に抜粋して翻訳してみました。あと、文末で OpenSSL のバージョン確認とアップデート方法についても簡単に解説しています。 The Heartbleed Bug 今回の脆弱性に関して詳しくは下記の記事などをあわせてご覧ください。（2014年 4月 15日 リンクを2件追加しました） JVNVU#94401838 ： OpenSSL の heartbeat 拡張に情報漏えいの脆弱性 OpenSSLの重大バグが発覚。インターネットの大部分に影響の可能性 ： TechCrunch Japan OpenSSLに脆弱性、クライアントやサーバにメモリ
新しい 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
CSS Flexible Box （Flexbox） を使ってみよう - 最新仕様対応版 | WWW WATCH
スクリーンサイズや可変するウィンドウサイズなどに柔軟に対応するレイアウトが可能な CSS Flexible Box について、最新の W3C 仕様に基づいた解説をサンプルソースを使いながらやってみます。 CSS3 のモジュールとして策定されている CSS Flexible Box （CSS3 Flexbox） は、CSS によるレイアウトを実現するための仕組み。 レイアウトのための CSS プロパティは他にもありますが、CSS Flexible Box は特にスクリーンサイズや可変するウィンドウサイズなどに柔軟に対応した、その名の通りフレキシブルなレイアウトが可能です。 現在最新の仕様書は下記。2012年 9月 18日付けで勧告候補になっています。 CSS Flexible Box Layout Module - W3C Candidate Recommendation, 18 Septe
改行削除するくらいなら gzip したらいいじゃない
CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ
Twitter のフィッシングサイト？
今日たまたま自分が過去に tweet した内容をさらっと探そうと思って google さんに聞いてみたら、その検索結果にシレっとフィッシングサイトらしきもの出てきて、ちょっと気になったので調べてみたのですが、そこでちょっと面白いことがわかったのでその経緯などを書いてみようと思います。 Twitter のフィッシングサイトに関してはかなり前から言われてて、日本の Twitter オフィシャル Blog の方からも警告が出されています。 フィッシング詐欺にご注意ください ： Twitterブログ これ自体は大きな問題としてありますし、皆さん気をつけてくださいなんですが、今日たまたま自分が過去に tweet した内容をさらっと探そうと思って google さんに聞いてみたら、その検索結果にシレっとフィッシングサイトらしきもの出てきて気になったので調べてみたのですが、そこでちょっと面白い（？）こと
HTML5 を学ぶための情報源まとめ
ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちょっと更新サボりすぎでしたが、最近 HTML5 関連の話もとっても増えてきましたので、ここらで HTML5 に関する情報を集めるときに情報源として有益なサイトをまとめてみたいと思います。 やはり、英語での情報が多くなってしまうので、英語能力が残念な私なんかは結構厳しいんですが、いくつか日本語での情報源も挙げてみましたので、併せて見ておくといいと思います。 ちなみに、XHTML 好きな私としては、XHTML5 で次のサイトリニューアルとか
5分でわかる foursquare の始め方
最近一部で話題になっているロケーションベースのソーシャル・ネットワーキング・サービス 「foursquare」 の基本的な使い方を解説しています。 Foursquare がリニューアルし、チェックイン機能が新しいアプリ、「Swarm」 に移行するなど大きく変更されました。詳しくはこちらの記事で書いていますのでご確認ください。 百式さんで取り上げられたからというのもあると思いますが、ここ数日 foursquare が話題です。 foursquare はロケーションベースのソーシャル・ネットワーキング・サービスで、GPS 機能付きのモバイル機器の使用が前提（*）です。単なるSNSではなく、ゲーム性を取り入れたというところが面白いところで、色々な場所（お店中心だと思いますが）に訪れて「check-in （チェックイン）」することで、その回数などに応じてバッジがもらえます。（ちなみにアメリカではお
セグメント別 Twitter アカウントまとめのまとめ
個人的に Twitter って誰をフォローするか （というかどういうタイムラインを作りたいか） が楽しむ上では一番重要かなと思うんですが、そういう意味では自分の所属する業界とか興味のある事柄に関連したアカウントからフォローして行くっていうのは、Twitterをスタートする時点では最も簡単で有効な方法だと思います。 ということで、人様の記事に乗っかる感じですが、業界とか別に Twitter アカウントをまとめてある記事とかサイトのまとめ。 フォローすべきTwitterアカウント一覧 ： IDEA*PAD 百式の田口さんがまとめてる Twitter アカウント一覧。芸能人とか経営者とか、カテゴリごとに分けて掲載されてるので見やすいですね。 以下、敬称略、順不同です。基本的に日本語のアカウントのみということで。 Twitterの有名人・公式・お役立ち情報アカウント一覧 ： できるネット＋ 編集部
MT の管理画面に Basic 認証 | WWW WATCH
.htaccess を使用して Movable Type の管理画面 「mt.cgi」 にのみベーシック認証かける方法と、管理画面 URL の変更方法。 知っている人には当たり前すぎて何をいまさらな話ですが、ちょっと質問されたのでメモついでのエントリー。 Movable Type の管理画面 （mt.cgi） が丸見えなんで、そこに Basic 認証をかけたいって場合、MT のインストールディレクトリ以下のディレクトリに普通に Basic 認証かけちゃうと、検索やらコメントやらトラックバックが軒並み認証通らないと使えなくなっちゃいますよね、mt.cgi にだけ認証かけれませんかというのがいただいた質問。 ということで、.htaccess で特定ファイルにのみ Basic 認証かける方法を。 Basic 認証自体がセキュリティ的にどうかという話もあるかもしれませんが、対象が Blog の管理
OPML の仕様に関するまとめ
OPML の仕様などについて調べてみたので書いてみることにしました。サンプルソースとして OPML 2.0 で RSS をまとめた文書を掲載しています。 先日、livedoor Reader 内、「おすすめフィード」 のコーナーに、当サイトも参加させていただいている AMN パートナーブログの OPML が掲載されたそうです。 で、告知だけだとあれなので、今回は OPML（Outline Processor Markup Language） について書いてみることに。というのも、OPML 自体はRSS リーダー等のサービス間でのデータ移動 （インポート、エクスポート） などを始め、ツールが生成したり、他の人が公開しているものを利用する側としてはかなり前から慣れ親しんでいるフォーマットですが、自分で書いて公開したことってほとんどなくて、その仕様なんかも詳しく調べたことなかかったことに気付き、
1つの DB で MT4 を複数インストール
共有タイプのレンタルサーバなどを使っていて、1契約につき、DB が 1つしか使えないような場合ってよくあると思いますが、そこに例えばバージョンが異なる複数の M... 共有タイプのレンタルサーバなどを使っていて、1契約につき、DB が 1つしか使えないような場合ってよくあると思いますが、そこに例えばバージョンが異なる複数の MT をインストールして別々に使いたいなんてこともあると思います。 SQLite は別として、MySQL、PostgreSQL を使用して 1つの DB に複数の MT をインストールしようとすれば、テーブル名が同じになるのですべての MT から同じデータしか参照できません。この場合は、各 MT が生成するテーブル名がかぶらないようにして変更あげればいいわけですが、その変更方法をメモがてら紹介してみようと思います。 MT は、インストール時に 「mt_」 という接頭辞
clip プロパティで画像をトリミング
phpspot 開発日誌さんで、「CSS の Overflow を応用して画像を綺麗にリサイズ表示するサンプル」 という記事が上がっていたのですが、この手の一部トリミングだったら clip プロパティがちゃんと用意されてるんでそっちを使ってもできるんじゃないかということで、clip プロパティを使用したサンプルを簡単に紹介してみます。 いきなりですが、サンプル。 clip プロパティで画像トリミングサンプル 通常は画像の一部のみが表示され、マウスオーバーで全体が表示されると思います。 ソースは下記。まずは XHTML ソース。 <p class="clipSample"> <a href="***"> <img src="***" width="240" height="180" alt="" /> </a> </p> CSS は下記のとおり。今回のサンプルは画像のサイズが、240px ×
MacBook に Vista 入れてみた
以前のエントリーにも書きましたが、MacBook に Leopard 入れたのがつい最近。で、Leopard といえば、Boot Camp の正式版、Boot Camp 2.0 が含まれています。 折角なのでその機能を活用したいなというのと、仕事に使う場合、どうしても Windows 環境が必要な場合っていうのがあって、今回、ウチの Macbook に Boot Camp 2.0 を使って Windows Vista を入れてみました。 今回は 「Windows Vista Home Premium」 を選択、ついでにパッケージ版ではなく、DSP版で。 DSP版は特定の PC パーツとバンドルして販売されたりする OEM 向けライセンス。今回は Vista とのデュアルブートにするのに備えてメモリの増設をしたので、そのメモリとセットで購入。ちなみに、購入時 1GB だったメモリを今回 2G
IE7 の隣接セレクタで気が付いたこと
「画像の使用を（略）CSS大会」 に応募した自分の作品を、IE7 で見てみたんですが、なぜか隣接セレクタ （E + F） がまったく適用されていないのに気がつき... 「画像の使用を（略）CSS大会」 に応募した自分の作品を、IE7 で見てみたんですが、なぜか隣接セレクタ （E + F） がまったく適用されていないのに気がつきました。 IE7 は隣接セレクタに対応してるはずなのでおかしいな、なんか自分の書き方がおかしいのかな？なんて思って、手元にある CSS をいじったりしてみたのですがまったく効果なし。何でだろうと思って HTML 文書の方を見て、何気なくソース内のコメントを削除してみたら...... 普通に適用されてる...... orz 該当する HTML ソースは下記の通り。 <div id="navigation"> <h2>Contents</h2> ...中略... </di
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
