JavaScript, CSSライブラリの CDN

たくさんのライブラリをホスティングしているところ

RawGit
・（cdn.rawgit.comの方は）by MaxCDN
・Github上のライブラリが対象

jsDelivr
・by MaxCDN and CloudFlare

cdnjs
・by CloudFlare

OSSCDN
・by MaxCDN



特定のライブラリのみホスティングしているところ（と言ってもGoogleとMicrosoftはそこそこ揃ってる）

Google Developers Hosted Libraries
・by Google
・AngularJSあり

Microsoft Ajax Content Delivery Network
・by Microsoft
・Bootstrap、Knockoutあり

jQuery CDN
・by MaxCDN
・jQeuryファミリーのみ

Bootstrap CDN
・by MaxCDN
・Bootstrap、Font AwesomeとBootswatchのみ

Yahoo! Developer Network
・by Yahoo
・YUIとPure.cssのみ
・HTTPS不可


MaxCDNがんばってる


参考
floatingdays: JavaScriptフレームワーク/ライブラリの CDNいろいろ

サービス連携による情報収集の進化（あるいは退化）について

個人的な変遷を

1. 原始時代
   はてなブックマーク ホットエントリーなど（PC）
   
2. 石器時代（道具を使うことを覚える）
   はてなブックマーク、その他のRSS＋Pipes（バックグラウンド）
   ↓
   Google Reader（PC）
   
3. 古代（スマホにより機動力を獲得）
   はてなブックマーク、その他のRSS＋Pipes（バックグラウンド）
   ↓
   Google Reader（PC、スマホ）
   
4. 近代（PocketとiPad miniで文明開化）
   はてなブックマーク、その他のRSS＋Pipes（バックグラウンド）
   ↓
   Google Reader（スマホ、PC）
   ↓
   IFTTT（バックグラウンド）
   ↓
   Pocket（iPad、スマホ）
   
5. 現代
   はてなブックマーク、その他のRSS＋Pipes（バックグラウンド）
   ↓
   Feedly（スマホ、iPad）
   ↓
   Pocket（iPad、スマホ）

一連の流れからPCが無くなるなんて。思えば遠くへ来たもんだ。

JavaScriptフレームワーク/ライブラリの CDNいろいろ

prototype.jsとかは、もういいや。


プロダクト別CDN

• jQuery
• Google Libraries API
• Microsoft Ajax Content Delivery Network
• jQuery CDN
• cdnjs.com
• jQuery UI
• Google Libraries API
• Microsoft Ajax Content Delivery Network
• cdnjs.com
• jQuery Mobile
• Microsoft Ajax Content Delivery Network
• jQuery CDN （jQeury Mobile）
• YUI 3
• Google Libraries API
• YUI Configurator
• cdnjs.com
• YUI 2
• Google Libraries API
• YUI 2: Dependency Configurator
• Modernizr （yepnope.jsを含む）
• Microsoft Ajax Content Delivery Network
• cdnjs.com

（2013/3/19 追記）

• Twitter Bootstrap
• BootstrapCDN

（追記終わり）


CDNごとの特徴

• Google Libraries API
• HTTPS可
• マイナーバージョン（もしくはリビジョン番号）を省略すると、指定したメジャーバージョン（もしくはマイナーバージョン）内で最新のファイルをロードする
• 他にもprototype.jsやDojo、Ext core等メジャーなJavaScriptフレームワークがいくつかある
• Microsoft Ajax Content Delivery Network
• HTTPS可
• 他にもメジャーなjQuery Pluginがいくつかある
• jQuery CDN （jQuery CDN、jQuery CDN （jQeury Mobile））
• HTTPS不可
• YUI （YUI Configurator、YUI 2: Dependency Configurator）
• HTTPS不可
• 複数のファイルを結合して1ファイルとしてロードできる
• cdnjs.com
• HTTPS可
• 最新バージョンの適用タイミングは遅いかも？

結論

• Google Libraries APIが使えれば使う。
• jQuery MobileとModernizrはMicrosoft Ajax Content Delivery Networkを使う。

おまけ
以下のCDNは更新されていないようだ。

• Cached Commons
• JsLoad

関連

• フリーで使えるJavaScriptと CSSの CDNいろいろ
• jQuery UIの Datepickerで日本語のカレンダーを表示する方法
• Googleの CDNを使って jQuery UI Tabsを使う例
• Google App Engineと Google Codeからのファイル取得速度の比較

大手サイトがやっている自サイト専用のURL短縮サービス

思いつくものをまとめてみた。
bit.lyによる独自ドメインURL短縮サービスで日本人にあまり馴染みのないもの（NY Timesとか）は除外した。

サイト	短縮URL	備考
Google Maps FeedBurner	goo.gl	Google Mapsは goo.gl/maps/xxxx FeedBurnerは goo.gl/fb/xxxx その他のサイトの場合、 goo.gl/xxxx
YouTube	youtu.be	後ろに動画のIDを付けると、その動画の短縮URLになる。 例： http://youtu.be/4qCbiCxBd2M
Yahoo!	yhoo.it	powered by bit.ly uk.yahoo.comやfr.yahoo.comは短縮してくれるが、 yahoo.co.jpは対象外。なぜかtw.yahoo.comも対象外。
Flickr	flic.kr
Delicious	icio.us	ドメインハックの先駆者がこんな形で再利用されるとは。
Bing	binged.it	短縮URLは既に機能しているが、 URL生成はまだプライベートBeta。
Amazon （USのみ）	amzn.com	後ろにASINを付けると、その商品ページの短縮URLになる。 例： http://amzn.com/B002FQJT3Q Kindleの場合、「amzn.com/k/xxx」のようだ。 アソシエイトはできるのかな？
Amazon	amzn.to	powered by bit.ly こちらはamazon.co.jpも対象。
Facebook	fb.me
Twitter	t.co
foursquare	4sq.com
MySpace	mysp.ac	powered by bit.ly
Ustream	ustre.am
Dailymotion	dai.ly	powered by bit.ly
Scribd	scr.bi	powered by bit.ly
楽天	r10.to	どこで生成できるか分からなかった
mixi	mixi.at
ニコニコ動画	nico.ms
はてなブックマーク	htn.to	powered by bit.ly （2011/3/21 訂正）
PIXIV	p.tl
日経新聞	s.nikkei.com	powered by bit.ly

日経新聞のサブドメインを使うやり方は好感が持てる。
Bingはよく考えたら自サイト専用じゃないけどまあいいや。
ところでyhoo.itはYahoo! Italia（it.yahoo.com）と間違えそう。

（2011/3/21 追記）

htn.toは、はてなブックマークだけでなく、はてな全般で使われているみたい。（これを書いた後で変わった？）

また、bit.ly proを使ってるわけではないようだ。

（追記終わり）

参考：
Bit.ly、月間47億クリック。Pro版も好調、Yahoo、MySpaceらも採用
bit.ly | Basic | a simple URL shortener
JSTwi

フリーで使えるJavaScriptと CSSの CDNいろいろ

httpsが使えるのはGoogleとMSのみ。
httpsに拘らないならCached Commonsがライブラリ豊富で便利そう。
でも使いたいライブラリがGoogle Libraries APIで間に合うならGoogle Libraries APIでいいんじゃないかな。レスポンス速度が速いし。
（レスポンス速度はminファイルのロード時間を4回計った2～4回目の平均値。状況によって変わってくるだろうから、参考程度に。）


Google Libraries API

• 主要なJavaScriptライブラリをホスティングしている
• バージョン指定でメジャーバージョンのみの指定や、マイナーバージョンまでの指定等が可能
• https可
• YUIはバージョン2しかない
• ブラウザキャッシュは1時間 or 1年間（参考：floatingdays: Google AJAX Libraries APIのブラウザキャッシュ期間）
• レスポンス速度
• jQuery：0.069秒 
• YUI 2 YUI Loader：0.066秒
  

Microsoft Ajax Content Delivery Network - ASP.NET Ajax Library

• ASP.NET関連以外ではjQuery関連の3つをホスティングしている。Validationプラグインは便利かも？
• jQuery
• jQuery UI
• jQuery Validationプラグイン
• https可
  
• ブラウザキャッシュは1年間（max-ageとExpiresが違う気がする？）
  

• レスポンス速度
• jQuery：0.161秒
  

YUI

• YUI 2と3をホスティングしている
  
• YUI 2: Dependency Configurator

• The YUI Configurator（YUI 3）
• httpsは使えない
• JavaScript、CSSをそれぞれ1つずつにまとめられる（Combine Files）のは便利
  
• ブラウザキャッシュは10年間
• レスポンス速度
• YUI 2 YUI Loader：0.181秒

Cached Commons

• メジャーなものから細かいものまで様々なライブラリをホスティングしている
  
• 特にjQueryのプラグインがたくさんある
• jQuery以外で目についたライブラリ
• 960 Grid System
• Blueprint
• Modernizr
• DD_belatedPNG
• SWFUpload
• YUI 3
  
• GitHubのCDNを使っているらしい
  
• httpsは使えない。残念。
• ブラウザキャッシュは1日
  
• レスポンス速度
• jQuery：0.213秒
• 参考：MOONGIFT : 各種JavaScriptライブラリをCDNで提供する「Cached Commons」 オープンソース・ソフトウェア/フリーウェアを毎日紹介
  

JsLoad: Remote loading API of JavaScript library

• Google App Engineで作られている
  
• 2008年10月から更新されていないようだ

JavaScript Host（←※リンク切れ）

• 閉鎖しちゃったみたい

(2010/10/19 追加)
jQuery Code Server

• jQuery自身によるjQueryのホスティング
• ダウンロード用のファイルをそのままhotlinkしてよいことにしたようだ
• jQuery UIとかプラグインは提供しないのかな？
  

参考

• CDN Catalog
• floatingdays: Google App Engineと Google Codeからのファイル取得速度の比較
  

検索サイトのリンクの色の比較

最適 なテキストリンクの色は？ | ウェブ力学に触発されて、大手検索エンジンの検索結果ページのリンクの色を調べてみた。


調査結果

	Google	Yahoo! JAPAN	Yahoo!	Bing
a	#1111CC	#0000DE	#0000DE	#0033CC
a:visited	#551A8B	#941D55※	#551A8B	#663399
a:active	#CC1111	#663399	#0000DE	指定なし
a:hover	指定なし	#CC3434	指定なし	指定なし

※Yahoo! JAPANのvisitedは、検索結果のリンクをクリックした後の色。再度検索すると、同じ検索結果でもvisitedにならない（また青色に戻る）。


所感

• Yahooは本家と日本で違う。
• hoverの指定をしないのが主流なのが意外だった。
• activeも指定しない方向で？
  
• Bingが一番すっきりしていて好き。

また、こんな調査結果もあった。

• 何事も普通が一番 - 検索エンジンにみるリンク色の違い - blog::tani.masaru
  
• 「:link」「:visited」について、どのような場合に必要な、どのように見せるのかを考える - blog::tani.masaru

自分が調べたのとちょっと違う。検索サイトも細かい改良をし続けているということかな？

HTMLの lang属性は大文字？小文字？

日本の場合はlocaleは"ja"とシンプルなので分かりやすいが、例えばイギリスだと"en-GB"か"en_GB"か"en-gb"か"en_gb"か？

Yahooイギリス版を見てみると、"en-GB"になっていた。（Yahoo! UK & Ireland）
でも台湾版だと"zh-tw"と小文字になっている。（Yahoo!奇摩）

とりあえずアンダーバー（アンダースコア）でなくハイフンというのは分かったが、大文字小文字の使い分け方は分からない。
文字コード指定の場合と同様にどっちでも良さそうな気がするけど、結局はブラウザ等の挙動に依存する。
各国・各地域のYahoo等のメジャーなサイトに合わせておくのが無難だと思う。

SEO 8か条＋2

経験上、学んだSEOのコツ。

1. タイトル要素には、検索で入力されるであろうキーワードを数個を、入力されるであろう順番に並べる。タイトルは20～30字程度で、かつ、検索結果に並んだときに検索者が見たくなる文にする
2. h1～h3要素には、検索で入力されるであろうキーワードを数個を、入力されるであろう順番に並べる
3. ページ内のテキストは多いほうが良い。（Text, Text, Text！）かつ、何らかの分野に特化する
   
4. 内部リンクを網の目のように多くする
   
5. リンク（内部リンクも外部からのリンクも）に使う文字列は、検索で入力されるであろうキーワードを数個を、入力されるであろう順番に並べる。画像をリンクにする場合には、画像のalt属性にその文を入れる
6. リンク（内部リンクも外部からのリンクも）は、リンク元のページの本文の中に埋め込まれている方がより良い
7. トップページから末端ページまでたどり着くステップを少なくする
8. コンテンツを1つのドメインに集める。サブドメインに分けない
   

あと、外部からのリンクは多いほうが良いが、現実問題としてはなかなか難しい。
はてなダイアリーがSEO上強いのは、上記のうち 3、4、6、8 に該当するから。（もちろんはてなブックマークからの多大な恩恵もあるが。）


おまけ：携帯サイトの場合

1. 携帯サイトは、モバイルサイトマップをGoogleとYahooに登録する
2. 携帯サイトは、携帯サイトからのリンクを貼る
   

Googleがホスティングしてくれる JavaScriptライブラリに YUIが追加されていた

Serving YUI Files from Yahoo! Serversを見たら、CDN欄にいつの間にかGoogleが．．．。Google＋Yahooのコラボレーションがこんなところで実現。
Developer's Guide - AJAX Libraries API - Google Codeを見たら、YUIの他、SWFObjectも追加されていた。

google.load()によるYUIのロードは、 YUI Loaderが対象のようだ。
Google AJAX API Loader（http://www.google.com/jsapi） をロードして、それでYUI Loaderをロードして、それでYUIのコンポーネントをロードして．．．なんか冗長だ。

静的なホスティングもしてくれるようだが、それだとYahooによるホスティングと変わらない。バージョン番号をワイルドカードにできれば嬉しいんだけど．．．。CSSは静的なロードしかできなさそうなのが残念。

ところでYUI3は2009年にGAを出す予定みたい。また大きく変わるのかな。

携帯サイト向けクローラのUser Agent一覧

手元の専用ログから、モバイルサイト向けの検索エンジン等のクローラ（Bot）のUser Agentを洗い出し。2008年6月～11月頃のもの。


Google（AdSense絡みも含む。ただしNokiaは集計していない）

• DoCoMo/1.0/N505i/c20/TB/W20H10 (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)
• DoCoMo/2.0 N905i(c100;TB;W24H16) (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)
• DoCoMo/2.0 SH905i(c100;TB;W24H16) (compatible; Mediapartners-Google/2.1; +http://www.google.com/bot.html)
  
• KDDI-CA34 UP.Browser/6.2.0.10.2.2 (GUI) MMP/2.0 (compatible; Mediapartners-Google/2.1; +http://www.google.com/bot.html)
• 機種はW42CA（参考：KDDI au: そのほかの技術情報 > ユーザーエージェント）
  
• SoftBank/1.0/911SH/SHJ001 Browser/NetFront/3.3 Profile/MIDP-2.0
  Configuration/CLDC-1.1 (compatible; Mediapartners-Google/2.1;
  +http://www.google.com/bot.html)

Yahoo!

• DoCoMo/2.0 SH902i (compatible; Y!J-SRD/1.0; http://help.yahoo.co.jp/help/jp/search/indexing/indexing-27.html)
• DoCoMo/2.0 N905i (compatible; Y!J-SRD/1.0; http://help.yahoo.co.jp/help/jp/search/indexing/indexing-27.html)
• KDDI-CA23 UP.Browser/6.2.0.5 (compatible; Y!J-SRD/1.0; http://help.yahoo.co.jp/help/jp/search/indexing/indexing-27.html)
• 機種はA5401CA II（参考：KDDI au: そのほかの技術情報 > ユーザーエージェント）
• KDDI-CA33 UP.Browser/6.2.0.10.4 (compatible; Y!J-SRD/1.0; http://help.yahoo.co.jp/help/jp/search/indexing/indexing-27.html)
• 機種はW41CA（参考：KDDI au: そのほかの技術情報 > ユーザーエージェント）
• Vodafone/1.0/V705SH (compatible; Y!J-SRD/1.0; http://help.yahoo.co.jp/help/jp/search/indexing/indexing-27.html)
• J-PHONE/2.0/J-SH03 (compatible; Y!J-SRD/1.0; http://help.yahoo.co.jp/help/jp/search/indexing/indexing-27.html)

goo

• DoCoMo/2.0 P900i(c100;TB;W24H11)(compatible; ichiro/mobile goo; +http://help.goo.ne.jp/door/crawler.html)
• DoCoMo/2.0 N905i(c100;TB;W24H16)(compatible; mobile goo; +http://emu.mobile.goo.ne.jp/)

livedoor

• DoCoMo/2.0 SH905i(c100;TB;W24H16) (compatible;* livedoor-Yill/1.0; *+http://helpguide.livedoor.com/help/search/qa/grp627)

はてな

• DoCoMo/2.0 D903i(c100;TB;W28H20) (compatible; Hatena-Mobile-Gateway/1.2; +http://mgw.hatena.ne.jp/help)

DeNA

• DoCoMo/2.0 N902iS(c100;TB;W24H12)(compatible; moba-crawler; http://crawler.dena.jp/)
  

雑感：

• docomoのみを偽装しているとこが多い
  
• auはCASIO製が人気、それ以外はN905iとSHARP製が人気。なぜ？
• docomoは902と905が多い
  
• Yahoo!はJ-Phoneまでフォローしている一方、SoftBankがまだ無い？親子断絶？
• Googlebot-Mobileはdocomoしか無い？
• あれ？F☆Routeが来てない．．．
  

参考：
　Google Japan Blog: Google モバイル検索についてのウェブマスター向け情報
　Utilz: 携帯クローラ
　モバイル検索サイト クローラー一覧 - sin-news.com
　携帯サイトオーナーズClub 携帯クローラ user-agent 一覧
　携帯検索エンジンのクローラーのメモ ([黒]黒豚備忘録)
　User Agentリスト - Mozilla Firefox まとめサイト

PCで携帯向けのWeb開発をするためのメモ

とりあえずメモ書き。整理できると良い。


モバイル検索結果をPCで見る

• Googleモバイル検索
• Googleモバイル検索
• 携帯でも同じURL（www.google.co.jp/m OR google.jp/m）で使える
• URL例： http://www.google.co.jp/m?q=[URLエンコードした検索文字列]
• URLエンコーディングはたぶんUTF-8で
• Yahoo!モバイル
• Yahoo!モバイル検索の結果をキャリア別に表示
• 検索結果から、そのまま携帯ブラウザのシミュレータでの閲覧ができる
  

シミュレーター（× シュミレーター）

• Firefoxでモバイル端末をシミュレートする独自アドオン「FireMobileSimulator」を公開します - 遙かへのスピードランナー

• Firefoxのアドオン
• http headerをいじったりできる
• 表示幅を携帯電話機種に合わせたサイズにできる
• ウノウラボ Unoh Labs: Ext JSをUIに使って携帯サイトのシミュレータを作ってみた
• PHPでサーバサイドで処理する
• Request/Responseの詳細などが見やすそう
• インストールが少し面倒そう
  
• CodeRepos::Share – Trac
• Rubyでサーバサイドで処理する
  
• Yahoo!モバイル
• 検索結果から、そのまま携帯ブラウザのシミュレータでの閲覧ができる
• 外部に公開していないWebページは見られない
• Yahoo!の検索エンジンが携帯サイトとしてインデックスしていないページも見られない

PCサイトを携帯用に変換するサービス

• Google Wireless Transcoder
• PCからも見られる
  
• 画像有無を選択できる
• 画像あり： http://www.google.co.jp/gwt/n?u=[URLエンコードしたhttpから始まるURL]
• 画像無し： http://www.google.co.jp/gwt/n?u=[URLエンコードしたhttpから始まるURL]&_gwt_noimg=1
• URLエンコーディングはたぶんUTF-8で
• 携帯用のページが指定されている場合はそのページにリダイレクトされる
  （参考：携帯電話での表示用にウェブ ページが調整される仕組みを教えてください。 - ウェブマスター向けヘルプ センター）
  

その他

• 無料アクセス解析 with 位置情報 「なかのひと」
• 携帯用の「うごくひと」が便利
  
• アクセスしてきた端末のキャリアのシェアや画面サイズの統計などが分かる
• 表示ページやリンク元などの統計は無い
• floatingdays : 携帯電話関連の日本製Apacheモジュール
• MobilePictogramConverter 絵文字変換ライブラリ
• PHP高機能日本語メール送信ライブラリ・文字化けフリー - Qdmail - PHP::Mail Library , Quick and Detailed for Multibyte
• （2008/1/12 追記）今見ているWebページのURLをQRコードで表示する - GreaseMonkey版 QR This! [ゼロと無限の間に：Sandbox]
• PCで見ているページを携帯で見たい時に一番手軽に見られる
  

参考資料

• 携帯サイトのDOCTYPEについてもう一度考えてみる。 携帯ホームページを作ろう！　-ちょっと詳しいモバイルサイトの作り方-
• ケータイサイトを作る時にやっていること。 - ぎじゅっやさん
• 世界四季報: [3キャリア対応携帯サイト]XHTMLテンプレート
• 参考になるリンクが多く、Updateされている
  

Googleモバイル検索に携帯サイトとして表示される方法

結果として、下記のようなサイトでGoogleモバイル検索に携帯サイトとしてインデックスされた。
ただし、これが最良の方法とは思えない。これ以外の方法もたくさんあるだろう。


文字コード
Shift_JISでOK。


マークアップ（HTML）
DOCTYPE無しのCHTMLでOK。
XHTMLは試してないが、DOCTYPEは気を付けた方が良さそう。
（GoogleはXHTML Basicを推奨しているが、他のフォーマットでも問題無し？
　参考：携帯サイトのDOCTYPEについてもう一度考えてみる。 携帯ホームページを作ろう！　-ちょっと詳しいモバイルサイトの作り方-）


MIME-Type
CHTMLなら text/htmlでOK。
XHTMLは試してないが、application/xhtml+xmlらしい。


URL振り分け
無し。PCと携帯で同じURLで、表示内容は別にしている。
ただしNokiaは対応（携帯向け表示）している場合も対応していない（PC向け表示）場合もあり。（両方ともインデックスされた。）
本来はPCと携帯は別のURLにすべき？


IP制限（携帯用IPのみ閲覧を許す）
していない。


半角カタカナ
英数字とカタカナはほとんど半角に変換して表示している。


絵文字
使っていない。


ページのファイルサイズ
携帯向けに小さくしてくる。


Sitemap
Googleにモバイルサイトマップを登録した場合も、登録しない場合（ただしPC用サイトマップは登録済み）も、両方インデックスされた。


Googleモバイル検索にインデックスされているかどうかは、携帯版Google検索で"site:example.com"で検索すれば分かる。
Yahoo!モバイル検索はYahoo!モバイルで同様に調べられる。

Yahoo!モバイル検索ではau向けは問題ないが、docomoとSoftBank向けで、インデックスされていたりされていなかったり．．．。


参考（今後改善するための参考として）：
　携帯サイトのDOCTYPEについてもう一度考えてみる。 携帯ホームページを作ろう！　-ちょっと詳しいモバイルサイトの作り方-
　モバイル検索エンジンのインデックス対策 - 携帯SEO・ケータイ検索エンジン最適化 - ププアブログ
　Googleモバイル（googlebot-mobile）にインデックスさせる - 携帯検索エンジンSEO - ププアブログ

検索エンジンによる自分のサイトのインデックス状況やSitemapを管理するまとめ

Google：Google ウェブマスター ツール - マイレポート

• サイトマップはモバイル・動画・ニュースなどいろいろ受け付けている
• iGoogleガジェットもここから取得できる
  

日本のYahoo!：サイトエクスプローラー（サイト管理者向けツール） - Yahoo!検索

• モバイル向けのフィード・サイトマップは受け付けていない
  

世界のYahoo!：Yahoo! Site Explorer

• モバイル向けのフィード・サイトマップも登録可能（xhtml or wml）
• Yahoo! JapanではなくYahoo.comのアカウントが必要