来る2014年4月26日(土)・27日(日)に、「ニコニコ超会議3」が開催され、その中で「超チューニング祭 ～ニコニコを超快適にしてみた～」が開催されるそうです。 これは、現行のスマートフォンサイトのTopページのソースファイルを競技者がチューニングして、速度やデザイン・UIの改善をして、速度と使い勝手を競うのだそうです。 「これは面白そうだ! 会場は家から近いし!」と思って参加するつもりでいましたが、事前調査で計測してみた結果、フロントエンドのチューニングでは速くならないことがわかったので、その内容について説明します。 (主催者の方にも、フロントエンドのチューニングでは速くならないという情報は伝えてあります。) まずは、計測データ まずは実際のトップページ(http://sp.nicovideo.jp)の計測データを見てみましょう。 計測は、NTT DoCoMoとSoftBankの3G回

米Googleは2月27日（現地時間）、サードパーティーが「Google Maps Engine」で制作・公開した地図をまとめたWebサイト「Google Maps Gallery」を公開した。「Google Maps Engine公共データプログラム」の一環だ。 非営利団体や政府機関などによる、世界の気温分布や地域の土地開発、人口分布などのデータをビジュアル化したマップが閲覧できる。現在約22の地図が掲載されている。参加しているのは、世界銀行、世界自然保護基金（WWF）、米国地理学協会、NASAなど。20日に米環境問題シンクタンクのWorld Resources Institute（WRI）が公開した森林破壊の現状を示す地図も含まれる。

早稲田大学は2月25日、同大学の教材や講義動画などを集約したWebサイト「WASEDA COURSE CHANNEL」をオープンした。iTunes Uで公開している講義動画などを集約。3月末には動画を1000本に拡充し、その後も増やしていく。 「早稲田大学 Open Course Ware」で2006年から公開してきた教材と、09年から「早稲田大学 iTunes U」で公開してきた500本以上の講義映像を集約。同大の教育内容に興味を持つ受験生や在学生の保護者、一般など向けに公開する。 動画の配信プラットフォームにはソニービジネスソリューションのコンテンツ配信管理システム「OPSIGATE」（オプシゲート）を採用。システム構築はNECが行った。検索機能には富士ゼロックスの動画インデキシング技術を利用し、動画中のスライド資料などに含まれる文字列も検索できるようにした。 32年までに全授業を学内

Coding in colorという記事を読んだ。どのようなものか、通常の構文強調とはどのように違うか、は僕が言葉で説明するよりもそのデモを見てみた方がわかりやすい。記事ではtypoに気づきやすいとかあるけど、どちらかというと読むのに向いていると感じる。 GitHubのコード・ビューワーやウェブログの記事のコード・ブロックのように、ハイライト規則を読む人が知らない(ことがある)ようなケースだと、こういう色付けの方がスタティックな色付けよりも読みやすいような気がする。 とか書きつつ、結構前からウェブログのコード・ブロックには色付けは必要ないと考えていたりもする。色付けをしないと読みづらいほど長いコードを丸々載せると、記事の文章が分断されて読みづらくなるし、短いコードなら色付けが必要になることはまずない。コメント部分のみコントラストを下げるみたいなので十分な気がする、と、そういうJavaScr

インフォメーションアーキテクトの浅野です。 昨年10月、米国MITのオンラインマガジンに「The Decline of Wikipedia（ウィキペディアの衰退）」という、ややセンセーショナルなタイトルの記事が公開されました。 これは、ミネソタ大学の研究者アーロン・ハルフェイカー（Aaron Halfaker）らの調査論文を下敷きとしており、かなりの注目を集めました。 これを受けて、11月にはWIREDに「Wikipediaが岐路に立っている？」という記事が掲載され、また日本では「ウィキペディアの衰退」の翻訳が雑誌（アスキークラウド2014年2月号）に掲載されるなど、その反響が広がりを見せています。 ウェブ黎明期の2001年の英語版設立に始まり、誰もが無料で閲覧できるだけでなく、編集にも参加できるインターネット百科事典として、成長を続けてきたウィキペディア。今では、ネットでの探しものや

git-release.jsでファイルと行の指定をまとめて設定する良い方法を考えてた。結局はコロンでつなぐという古き良き感じにしたけど、ウェブではこういうのにも使えそうなのをRFC5147 - URI Fragment Identifiers for the text/plain Media Typeで仕様を決めているらしい。何行目かだけじゃなくて何文字目から何文字目までみたいなのが出来るようだ。 以下はExamplesの簡単なメモ。 http://example.com/text.txt#char=100 text.txtの100文字目。 http://example.com/text.txt#line=10,20 text.txtの11から20行目。line=10が10行目と11行目の境界ということ。 https://example.com/text.txt#line=,1 text.

図1：横に水平線のあるテキストの例 おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Hello</span></h2> マークアップはこのように二重の要素が必要です。外側の h2 要素の擬似要素で水平線を作り、内側の span 要素に背景色を指定してテキスト部分を隠します。 h2 { position: relative; text-align: center; } h2:before { border-top: 1px solid; content: ""; position: absolute; top: 5

このエントリーはGraphical Web Advent Calendar 2013 への参加記事です。 今日は12月3日、ということで Advent Calendar の3日目は私id:rikuoが担当します。今回はSVG画像ファイルを1バイトでも削るためのコードゴルフのTipsを紹介していきます。 コードゴルフって？ まずコードゴルフとはなにか？の説明から。 コードゴルフとは任意のソースコードを出来るだけ短く書くことを目的にしたものです。そのコードの動作を損なわなず、かつ可能な限り短縮して記述する手法を試行錯誤していく様子が、ゴルフのように少ない打法で競うところに似ていることからこのように呼ばれています。 またそれを競技としたコンテストも催されていますね。 画像のファイルサイズ低減策 JPEG、GIF、PNGといったビットマップ画像であればファイルサイズを低減する方法やソフトウェア・ツ

「暗黙のARIAセマンティックと強いネイティヴセマンティックについて」で、暗黙のARIAセマンティックをHTMLに指定するべきかどうか、に絡んだ話がされていましたので、この記事では私の考えを書きます。 私の考え 本来的には、HTMLのセマンティックは単独で伝わるべきもので、暗黙のARIAのセマンティックをHTMLに記述する必要はない 現実には、HTMLのセマンティックを支援技術に提供しないブラウザーが存在する それらのブラウザーの中にはWAI-ARIAをサポートしているものが存在する WAI-ARIAをサポートしHTML5をサポートしていないブラウザーの救済策としてWAI-ARIAを重複指定することが行われている Using ARIA in HTMLの推奨表は現時点での情報であり、将来的には変わるだろう はじめに WAI-ARIAのセマンティックは主に支援技術（スクリーン・リーダーなど）で

Webサーバーがレスポンスを発行する際に、HTTPレスポンスヘッダーに付けるとセキュリティレベルの向上につながるヘッダーフィールドを紹介します。 囲み内は推奨する設定の一例です。ブラウザによっては対応していないヘッダーフィールドやオプションなどもありますので、クライアントの環境によっては機能しないこともあります。 X-Frame-Options ブラウザが frame または iframe で指定したフレーム内にページを表示することを制御するためのヘッダーフィールドです。主にクリックジャッキングという攻撃を防ぐために用いられます。 X-Frame-Options: SAMEORIGIN DENY フレーム内にページを表示することを禁止（同じサイト内であっても禁止です） SAMEORIGIN 自分自身と生成元が同じフレームの場合にページを表示することを許可（他のサイトに禁止したい場合は主にこ

Internet Explorerはエンタープライズでの利用が想定されるため、Microsoft製品で広く適用されているサポート ライフサイクル ポリシーを確認すると、最低でも10年のサポートが受けられると考えている人も多いでしょう。IE8も9も10も、みんなそうなると信じて疑わないIT管理者の方も多いのではないでしょうか。 しかし、これは「誤り」です。 本記事では、最近やたらと複雑化の進んだIEのサポート期間の真実について解説します。 サポートライフサイクルポリシーとは？ そもそもですが、Microsoftの「サポートライフサイクルポリシー」とは何でしょうか。公開しているドキュメントを参照すると、以下の通りです。 マイクロソフトはビジネス、開発用製品に対して最短でも 10 年間のサポートを提供します。ビジネス、開発用製品に対するメインストリーム サポートは、製品発売後 5 年間または次期

先日AdobeからこのようなJavaScriptライブラリが公開されました Snap.svg http://plus.adobe-adc.jp/post-4817/ 以前から人気の高かった、IE6でもSVGを表示できるJavaScriptライブラリRaphaelの作者 Dmitry Baranovskiy氏による新たなライブラリで、Raphaelとの違いはSnap.svgではIEなら9以上対応とモダンブラウザを対象にしたこと。さらに自由度と表現力の高いことができるようになっているのが大きな特徴です。 こうしたJavaScriptライブラリがオープンソースで、そしてAdobeから公開されたのは大きなことでこれからSVGもどんどん普及していくのではないでしょうか。 まさに2013年こそついにSVG元年と言えるかもしれません*1。 ……とは言え、そもそもSVGってなに？という人もまだまだ少なくな

背景 自前のサービスでhttps通信をサポートするには、SSL証明書が必要になります。 自分で使用するだけなら、SSL証明書も自前で作成するいわゆるオレオレ証明書を用いても良いのですが、外部に公開するサービスの場合そうとも行きません。 SSL証明書というと値段が高い印象がありましたが、StartSSLというサービスで無料でSSL証明書の発行を受けられると言うことで試してみました。 StartSSLにユーザー登録する 証明書の発行を行う前に、StartSSLにユーザー登録する必要があります。 StartSSLから、"StartSSL Free (Class1)"を選択します。 Certificate Control Panelを選択。 Sign-upに進みます。 名前、住所、メールアドレスなど 個人情報の登録を行います。 登録したメールアドレスに本人確認のメールが届くので、受信したメールのa

これまで、MacBook Air 上で制作したWebページを IE 確認する時は、「VirtualBox」や「Parallels Desktop」という仮想PCアプリケーション上で Windows 8 などを起動し、そこで IE を起動して表示確認しています。 私は、 Windows XP – IE8 Windows 7 – IE9 Windows 8 – IE10 のように、なるべく一般的なOSとブラウザーのバージョンで合わせて個別の仮想PCをインストールしていますので、実機で確認するのと比べてもほとんど遜色のない精度でIEでの表示確認をすることができています。 その際、「Windows 8 – IE10」環境は、パフォーマンスが良いと聞いて購入した「Parallels Desktop 7」という仮想PCアプリケーションを使用していました。 しかし、OS X を Mavericks（10