jsDelivrから 最新の各種JavaScirpt / CSSフレームワークを読みこむ URL

jsDelivrから最新のJavaScirpt/CSSフレームワークを読みこむURLのメモ。

下記の「短縮形」は本来は複数ファイルをまとめる機能だが1ファイルでも使える。（URLが短くなり、キャッシュ期間が長くなる。）


■ jQuery

https://cdn.jsdelivr.net/jquery/latest/jquery.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery
↓
v3.0.0-alpha1

https://cdn.jsdelivr.net/jquery/2/jquery.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery@2
↓
v2.1.4

https://cdn.jsdelivr.net/jquery/1/jquery.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery@1
↓
v1.11.3


■ jQuery UI

CSS
https://cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.css

JS
https://cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery.ui

JSをjQuery(v2.X)と合わせて1ファイルにする
https://cdn.jsdelivr.net/g/jquery@2,jquery.ui

CSSでテーマを指定する場合
https://cdn.jsdelivr.net/jquery.ui/latest/themes/flick/jquery-ui.min.css
テーマを指定しないと"UI lightness"になる（参考：http://jqueryui.com/themeroller/#themeGallery）


■ jQuery Mobile

CSS
https://cdn.jsdelivr.net/jquery.mobile/latest/jquery.mobile.min.css

JS
https://cdn.jsdelivr.net/jquery.mobile/latest/jquery.mobile.min.js
短縮形 https://cdn.jsdelivr.net/g/jquery.mobile

JSをjQuery(v2.X)と合わせて1ファイルにする
https://cdn.jsdelivr.net/g/jquery@2,jquery.mobile


■ Bootstrap

CSS
https://cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.min.css

JS
https://cdn.jsdelivr.net/bootstrap/latest/js/bootstrap.min.js
短縮形 https://cdn.jsdelivr.net/g/bootstrap

JSをjQuery(v2.X)と合わせて1ファイルにする
https://cdn.jsdelivr.net/g/jquery@2,bootstrap


■ Bootswatch

例
https://cdn.jsdelivr.net/bootswatch/latest/cerulean/bootstrap.min.css
テーマもたくさん → https://www.jsdelivr.com/?query=bootswatch


■ Pure.css

https://cdn.jsdelivr.net/pure/latest/pure-min.css
短縮形 https://cdn.jsdelivr.net/g/pure


■ Normalize.css

https://cdn.jsdelivr.net/normalize/latest/normalize.min.css
短縮形 https://cdn.jsdelivr.net/g/normalize


■ Font Awesome

https://cdn.jsdelivr.net/fontawesome/latest/css/font-awesome.min.css
短縮形 https://cdn.jsdelivr.net/fontawesome/latest/css/mainfile

https://cdn.jsdelivr.net/g/fontawesome だとうまく表示されなかった。（フォントファイルへの相対パスがおかしくなる？）



ブラウザキャッシュ期間は1週間。
ただし、複数ファイルをまとめると max-age=15724800（約6ヶ月）になった。


【HTTP Response Header（抜粋）】

Server: nginx
Content-Type: application/x-javascript; charset=utf-8
Vary: Accept-Encoding
X-Version: 3.0.0-alpha1
Cache-Control: public, max-age=604800
access-control-allow-origin: *
X-Cache: HIT
x-edge-location: jptk
Content-Encoding: gzip
X-Firefox-Spdy: h2

ファイル名は"mainfile"でも代替可。minのJSまたはCSSになる。



参考：パブリックなCDNはjsdelivrかcdnjsでいいじゃん。 | Sorry for Team KILLing

2015年にもなったので font-familyを見直したら要らないものだらけだった

前提として、Windowsにヒラギノを入れてたり、Macにメイリオを入れてたりする、「ごく少数の人」は無視したい。それから、かなり古い環境や日本語以外の環境も除いて考える。

で、よくあるこんな無難なfont-familyを見て。

font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;

まず、Macは全角のfont-familyを無視するので、"ヒラギノ角ゴ ProN W3"は不要。

font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;

次に、Windowsでは全角のfont-familyを書いておけば良いので（両方、または全角のみを認識するブラウザはあるが、半角のみを認識するブラウザは無い。日本語環境なら）、Meiryoも要らない。

font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;

そして、Windowsのデフォルトは"ＭＳ Ｐゴシック"、Macは"Hiragino Kaku Gothic ProN"なので、sans-serifさえ指定しておけばこれらもわざわざ指定する必要はない。（ブラウザの設定を変えている人もいるだろうけど、そういう人は自分が設定したfont-familyで見せてあげたほうが良いと思う。）

font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;

游ゴシックは…好みかな？
Mac：YuGothicあり or なし（ヒラギノ）

Windows："游ゴシック"あり or なし（メイリオ）

ということで、游ゴシックありなら、

font-family: "游ゴシック", YuGothic, "メイリオ", sans-serif;

游ゴシック無しなら、

font-family: "メイリオ", sans-serif;

でいいんじゃないかな？

ちなみにiOSはヒラギノ、（一般的な）Androidはsans-serifでデフォルトのfont-familyが適用される。

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いろいろ

CSSの font-familyについての参考サイト 2014

参考になったサイトいろいろ。


CSSのfont-family指定に関する考察 2014年版 ｜ セブンシックス

下記について触れられていて、参考になる。

• ブラウザ/OSのデフォルトフォント
• Macが全角のfont-familyを無視する件とその例外条件
• 游書体
• 大手サイトのfont-family

CSSでのフォント指定について考える（2014年） - DTP Transit（Mac OS X, OS X Mavericks, Web Fonts, Web制作, iPhone, フォント）

Win/Macの日本語/アルファベットのfont-familyのブラウザ別対応状況表あり。

游ゴシック体と游明朝体はWinodws 8.1では日本語名、OS X Mavericks（10.9）ではアルファベット名のみの対応であるため、両名の併記が必要となります。

Osaka−等幅は貴重なOS X唯一の和文等幅フォントであるため、monospaceでは利用します。

ブラウザ、モバイル、OSそれぞれにデフォルトでインストールされている日本語フォント一覧

ブラウザ/OSごとの、指定なし/serif/sans-serifそれぞれのデフォルトフォントを調べている。



「游ゴシック」フォントと「Yu Gothic」フォントの違い - ななふぉ

違うらしい。



「ヒラギノ明朝 Pro」と「ヒラギノ明朝 ProN」の違い - 強火で進め

分かりやすい。


上記を参考に、個人的な好みとしてはこんな感じ？

画面表示用（ゴシック）

font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif;

印刷用（明朝）

font-family: "游明朝", YuMincho, "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", serif;

優先順位は、

1. 游書体（Win用）
2. Yu書体（Mac用）
3. ヒラギノProN（Mac/iOS用）
4. メイリオ/MS P明朝（Win用）
5. デフォルトフォント

JavaScriptの HTMLエスケープ関数を 140字以内で書いてみる

JavaScriptで動的にWebページの内容を書き換える場合に、文字列のHTMLエスケープをしたい時がある。具体的には、「& " ' < >」の5つを変換したい。
PHPならhtmlSpecialChars()、Railsならh()でよいが、JavaScriptにはHTMLエスケープ用の関数が用意されていないので自分で書く必要がある。

せっかくなので、Twitterでつぶやける文字数以内で書くことを目指してみる。

で、こうなった。

function h(s){return s.replace(/[&"'<>]/g,function(m){return"&"+["amp","quot","#039","lt","gt"]["&\"'<>".indexOf(m)]+";"})}

123文字。
意外と余裕だ。



クォーテーションのエスケープをしないでいいなら（HTML要素の属性値のHTMLエスケープに使わないなら）、こんな方法もある。

function h(s,p){p=document.createElement("p");p.innerText=p.textContent=s;return p.innerHTML}

93文字。
（第2引数のpは変数宣言を避けて文字数を減らすためのダミーの引数なので、実際に使うときには第1引数のみ渡せばよい。）
innerTextはFirefoxでは使えないしtextContentはIEでは使えないので、両方に対応させるために両方書いている。


でも、innerTextには細かい問題ある（参考：DOM の textContent と innerText について - フリーフォーム フリークアウト）ようなので、環境依存を避けて丁寧にやりたいなら、少し長くなるけどdocument.createTextNode()を使った方が無難かも？

function h(s,d,p){d=document;p=d.createElement("p");p.appendChild(d.createTextNode(s));return p.innerHTML}

106文字。


でもでも、それなら最初の正規表現を使ったやり方のほうが短い。

function h(s){return s.replace(/[&<>]/g,function(m){return{"&":"&amp;","<":"&lt;",">":"&gt;"}[m]})}

99文字。



（2011/06/22 追記）
はてなブックマークやTwitterで教えてもらったので追記。


hatestさん

引数sがStringであることをチェックしてないから、{replace:function(){return "<script>"}}とかいうオブジェクト渡されたら終わるぞ

そうですね。用途によってはパラメータのチェックとか型変換とかすべきかも。


ひなしさん

function h(s){return s.replace(/[&<>"']/g,function(m){return "&#"+m.charCodeAt(0)+';'})} の88文字でよくない？

なるほど。こっちの方がスマートかつ短い。
（ところでTopsyの検索にひっかからないのは何故？）


uuuさん

最近はreturn s.replace(/["'&><]/g, function(m){return "&#"+m .charCodeAt(0).toString(16) + ";"})みたいのがマイブーム

こちらもcharCodeAt()。16進数なので"&#"のところは"&#x"の書き間違いと思われる。16進数にするメリットとかあるのかな？


ということでcharCodeAt()を使って書き直してみる。もうエスケープ対象文字の判別とか無しで、全てユニコード化してしまおう。

function h(s,i,t,r){for(i=t="";r=s.charCodeAt(i);i++)t+="&#"+r+";";return t}

76文字！

charCodeAt()を使っているのでJavaScript1.2未対応ブラウザ（IE3とか）では動かないだろう。あと文字コードによっては問題ある？
Null文字が入っていると変換の途中で終わってしまうが、NULL文字は非SGML文字らしいので良しとしよう。
インクリメントに使う「i」を空文字（""）で初期化するのは気持ちが悪いがとりあえず動くみたい。JavaScriptの仕様としてはどうなんだろう。微妙なところか？（参考：JavaScript講座 : インクリメント／1加算）
（追記終わり）


関連：floatingdays: JavaScriptで HTMLエスケープ

プログラム言語とフレームワークのオンラインマニュアル29選

Webで公開されている、プログラム言語・フレームワーク・DBのマニュアル（リファレンス）サイトへのリンクをまとめてみた。
選んだ基準は、できるだけ日本語で、なるべく分かりやすいこと。それを満たすなら公式リファレンスより非公式のものを優先している。

• JavaScript
• JavaScript
• とほほのJavaScriptリファレンス
  
• jQuery
• jQuery 日本語リファレンス
  
• Main Page - jQuery JavaScript Library （英語、公式）
  
• jQuery UI
• jQuery UI - Demos & Documentation （英語、公式）
  
• YUI
• YUI Library （英語、公式）
  
• HTML、CSS
• HTMLクイックリファレンス

• PHP
• PHP
  
• PHP: PHP マニュアル - Manual （公式）
  
• Zend Framework
• Zend Framework: Documentation: Zend Framework Manual （公式）
  
• PEAR
• Manual :: PEAR Manual （日本語の部分もあるが大部分は英語、またはソースを直読み。公式）
• CakePHP
• マニュアル :: 1.3コレクション （公式）
• Smarty
• Smarty 3：Smarty3 マニュアル | Smarty （公式）
• Smarty 2：Smarty マニュアル | Smarty （公式）
  
• Ruby
• Ruby
• 逆引きRuby - 逆引きRuby
  
• Rubyリファレンスマニュアル - Rubyリファレンスマニュアル （公式）
  
• Ruby on Rails
• Rails 3：Ruby on Rails Documentation （英語、公式）
• Rails 2：Ruby on Rails Documentation （英語、公式）
  
• Python
• Python
• Python 3：Overview — Python v3.1.3 documentation （英語、公式）
  
• Python 2：概要 — Python documentation （公式の和訳）
  
• Django
• Django 1.3：Django | Django documentation | Django documentation （英語、公式）
  
• Django 1.2：Django | Django documentation | Django documentation （英語、公式）
• Django 1.1：Django | Django documentation | Django documentation （英語、公式）
  
• Django 1.0：Django ドキュメント — Django v1.0 documentation （公式の和訳）
  
• Perl
• perldoc.jp （公式の和訳）
  
• Java
• 概要 (Java Platform SE 6) （公式）
  
• Objective-C
• Objective-C 2.0プログラミング言語 （公式）
  
• MySQL
• MySQL 5.5：MySQL :: MySQL 5.5 Reference Manual （英語、公式）
• MySQL 5.1：MySQL :: MySQL 5.1 リファレンスマニュアル （日本語だが一部は英語、公式）
  
• PostgreSQL
• PostgreSQL 9.0：PostgreSQL 9.0.3文書 （公式の和訳）
  
• バージョン別のリンク：PostgreSQL日本語ドキュメント（公式の和訳）
  

JavaScriptのマニュアルは他にも色々あり、使う人のレベルや用途によってどれが使いやすいかが変わってくると思うが、昔大変参考にさせて頂いた杜甫々版を挙げておいた。

Python、Perl、Objective-Cについては公式/準公式のリンクを書いたが、有志によるマニュアルでもっと良いものがあるのかもしれない。（これらの言語はあまり使わないので知らない。）

Webブラウザからコーディングができるオンラインテキストエディタいろいろ

Webブラウザを使ってサーバ上のソースコード（テキストファイル）を編集できる、Webベースのオンラインテキストエディタを調べたメモ。
（さらっとしか調べてないので勘違い等あるかも。）

• ecoder
• 画面イメージは上記のとおり
• 画面左にエクスプローラのようなディレクトリ内ファイルリストが付いていて便利
  
• サーバサイドはPHP専用？（HTML、JavaScript、CSSは対応している）
• 参考：Webベースのソースコードエディタ「ecoder」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
• Cloud9 IDE
  
• skywriter（昔はBespinという名前だった）を吸収したらしい
  
• 参考
• 詳細スキルのない人でもHTML5/JavaScript開発をクラウド上で簡単にできるCloud9 IDE
  
• InfoQ: 新しいセルフホスティングIDE: RedCarとJRuby、Cloud9 IDEとJavascript
• Eclipse Orion
  
• まだ開発中
  
• 参考：Eclipseをベースに実用性のありそうなWebベースの開発環境「Eclipse Orion」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
  
• Amy Editor
• 参考：体験必須！プログラミングもコラボレート「Amy Editor」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
  
• PHPAnywhere
• 自分のサーバにインストールするのではなく、PHPAnywhereのサイト経由で更新？
  
• 参考：外出中でも使えるオンラインPHPエディタ「phpanywhere」 – 3ET
  
• ShiftEdit
  
• Google Chromeのアドオン（拡張）
  
• 日本語を正常に表示できないらしい
  
• 参考：ブラウザ上の統合開発環境『ShiftEdit』が良いんだけど惜しい・・・ - IDEA*IDEA ～ 百式管理人のライフハックブログ
• Ymacs
• オンラインEmacs（でもEmacs使う人は素直にSSHでEmacs使いそう．．．）
  
• 参考：ブラウザでEmacsが動く「Ymacs」 : Happy my life
• 9ne
• これもオンラインのEmacs
• 参考：WebベースのEmacs「9ne」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ
  

今のところ、本命はCloud9 IDEで、それをEclipse Orionが追う形か。（Orionがリリースされたらいろんな状況が一変するかも？）
でもPHPだけならecoderでいいかな？grepができない以外は基本的なことはできそう。
ちなみに、ecoderを試しに使ってみたら良かったので、結局他のは調べただけで試してはいない。


参考

• 今使えるオンラインエディタ5 | エンタープライズ | マイコミジャーナル
• オンラインエディタ - DiaryException
  

JavaScriptによって動的に script要素を追加する場合のブラウザごとの挙動の違い

（2011/3/29追記：Firefox4の実行結果を追加）


JavaScriptによって動的にscript要素を追加する場合の、追加方法の違いによるブラウザごとの挙動を調べた。


調査に使ったJavaScript（HTML5なのでtype属性は省略してある。）

<script>
function test(value) {
    document.getElementById("test").value += value + ",";
}

window.onload = function() {
    // innerHTMLに外部JSの読み込みを突っ込む
    try {
        var div1 = document.createElement("div");
        div1.innerHTML = '<script src="test1.js"><' + '/script>';
        document.body.appendChild(div1);
    } catch(e) {
    }
    
    // createElementでscript要素を生成して外部JSを読み込む
    try {
        var script2 = document.createElement("script");
        script2.src = "test2.js";
        document.body.appendChild(script2);
    } catch(e) {
    }
    
    // innerHTMLに生のJSを突っ込む
    try {
        var div3 = document.createElement("div");
        div3.innerHTML = '<script>test(3);<' + '/script>';
        document.body.appendChild(div3);
    } catch(e) {
    }
    
    // createElementで生のJSを追加する
    try {
        var script4 = document.createElement("script");
        script4.innerHTML = "test(4);";
        document.body.appendChild(script4);
    } catch(e) {
    }
};
</script>

test1.js

test(1);

test2.js

test(2);

処理が実行されたら、表示用のテキストボックス（id="test"）に番号が表示される。

結果は下記の通り。

ブラウザ	1	2	3	4	表示順
IE 6/8	Ｘ	Ｏ	Ｘ	Ｘ	2
Firefox 3.6	Ｏ	Ｏ	Ｏ	Ｏ	1→2→3→4
Firefox 4.0	Ｘ	Ｏ	Ｘ	Ｏ	4→2
Chrome 4	Ｘ	Ｏ	Ｘ	Ｏ	4→2
Safari 4	Ｘ	Ｏ	Ｘ	Ｏ	4→2
Opera 10.53	Ｘ	Ｏ	Ｘ	Ｏ	2→4

innerHTMLにscript要素を入れるのはFirefox3.6以外では動かない。（セキュリティ的な施策？）
Firefoxでしか動作確認していないと嵌りそうだ。（というか嵌った。）

IEのことを考えると、生のcreateElementで生成したscript要素に生のJavaScriptを書くやり方も使えない。
（そんなことが必要になるケースは無いかもしれないが。）

素直にcreateElementで外部JSを読み込むのが良いようだ。


（2011/3/29 追記）
innerHTMLに生のJavaScriptを入れる方法としてinnerHTMLでscriptする - Thousand Yearsの方法があったようだ。
しかし現在のブラウザでは、IE8では動作したが、Firefox4、Chrome10、Safari5、Opera11では動作しなかった。

HTML5のテンプレート例

（2010/05/28 変更：Google Analytics非同期版が正式リリースされたので、Beta版から正式版に変えた）
（2010/08/30 変更：div構造を少しすっきりさせた）
（2010/11/04 変更：Google Analyticsのコードをhead要素内へ移動）
（2011/04/25 追加：IEの条件付きコメント（Conditional Comments）の例を追加）

Google Analytics非同期版とYUI 2 Grids CSSとjQueryを組み込んだHTML5の例。
header要素等のHTML5の新要素は使わない。（今のところあまりメリットを感じないので、）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>{{ TITLE }}</title>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="alternate" type="application/rss+xml" href="{{ RSS_URL }}" title="{{ FEED_TITLE }}" />
<link rel="alternate" type="application/atom+xml" href="{{ ATOM_FEED_URL }}" title="{{ FEED_TITLE }}" />
<link rel="stylesheet" href="{{ STYLESHEET_URL }}" />

<style>
{{ STYLE }}
</style>
<!--[if lt IE 9.0]>
<style>
{{ STYLE for IE8- }}
</style>
<![endif]-->

<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-{{ GOOGLE_ANALYTICS_ID }}']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>

<!-- @see http://developer.yahoo.com/yui/grids/builder/ -->
<body id="doc4">

<div id="hd">
{{ HEADER }}
</div><!-- #hd -->

<div id="bd">
{{ MAIN_CONTENT }}
</div><!-- #bd -->

<div id="ft">
{{ FOOTER }}
</div><!-- #ft -->

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="{{ JAVASCRIPT_URL }}"></script>
<script>
{{ JAVASCRIPT }}
</script>

</body>
</html>

使うときに不要な要素は減らす。
{{ }}のところは置き換える。

PHPの場合、default_charsetを設定してあれば<meta charset="UTF-8" />は無くても大丈夫。

YUI 2 CSS Toolsはcommon.cssとか作ってその中でimportした方が変更に強い。

Google Analyticsは外部JavaScriptファイルにした方がすっきりするけど、そのためだけにHTTPアクセスを1回増やすのもどうかと思う。
「http://www.google-analytics.com/ga.js#UA-XXXXXXX-X」の形で呼び出せるようにすればいいのに。
（ただし静的なHTMLに埋め込む場合は、変更が発生したときに全部変更するのは大変なので外出ししておいた方がよい。）

jQueryはプラグインをいろいろ使うならマイナーバージョン（1.4とか）まで指定しておいた方が無難。


（2010/11/04 追記）
Google Libraries APIのCDNから読み込むJavaScriptが複数ある場合は、google.load()を使って非同期で読み込んだ方が少し早くなる場合がある。

<!-- 例：jQueryとjQuery UIを非同期で読み込む -->
<script src="//www.google.com/jsapi?key={{ GOOGLE_LOADER_API_KEY }}"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
google.setOnLoadCallback(function() {
    $(function() {
        //初期処理
    });
});
</script>

注意点としては、google.load()を使うには先に http://www.google.com/jsapi 読み込む必要がある。これを読み込むコストを考えると、必要なJavaScriptが1つしかないならgoogle.load()を使ってもそれほど効果はないか、逆に遅くなる。


（2011/03/15 追記）
シンプル版も書いておく。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>HTML5 Simple Template</title>
<link rel="stylesheet" href="stylesheet.css" />
<style>
/* STYLE */
</style>
</head>
<body>

CONTENT

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="javascript.js"></script>
<script>
/* JAVASCRIPT */
</script>
</body>
</html>

HTML6の仕様を HTML5までに至る HTMLの進化から予想する

HTMLの記述は、HTML5の登場により劇的にシンプルになった。
試しに、HTML5の前バージョンの1つであるXHTML 1.0 StrictとHTML5をシンプルなWebページの記述例で比べてみる。


XHTML 1.0 Strict

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>XHTML 1.0 Strict</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<style type="text/css">
span.foo {
    text-decoration: underline;
}
</style>
<script type="text/javascript" src="javascript.js"></script>
<script type="text/javascript"> alert("hello"); </script>
</head>

<body>
<div>
<span class="foo">XHTML</span> <span style="color: #ff0000;">1.0 Strict</span>
</div>
</body>

</html>

XHTML 1.0の場合、head要素までの記述が大量かつ複雑であることが目に付く。
同じ内容をHTML5で記述するとこうなる。


HTML 5の例

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>HTML 5</title>
<link rel="stylesheet" href="stylesheet.css">
<style>
span.foo {
    text-decoration: underline;
}
</style>
<script src="javascript.js"></script>
<script> alert("hello"); </script>
</head>

<body>
<span class="foo">HTML</span> <span style="color: #ff0000;">5</span>
</body>

</html>

劇的にシンプルになった。
style（CSS）とJavaScriptのMime Type（Content-Type）についてデフォルトの値が定義されたことが地味に効いている。

素晴らしいことに、このHTML5は既存の主なWebブラウザで既に使うことができる。（※新しく登場した要素は除く）


しかし、賢明なる読者諸君にはここで考えてもらいたい。これは十分にシンプルだろうか？
いや、違う。マークアップエンジニアはまだ仕様に振り回されて不要な文字列をマークアップすることを強要されている。

来るべき次のバージョンのHTML、すなわち「HTML 6」では、さらに進んでこれくらいシンプルになるのではないだろうか？


HTML 6 ?

<html>

<head>
<title>HTML 6?</title>
<script src="javascript.js"></script>
<script> alert("hello"); </script>
</head>

<body>
<u>HTML</u> <font color="red">6 ?</font>
</body>

</html>

特徴的なのはstyle要素やCSSを排し、下線や文字色等について直接マークアップすることが可能になったことだ。
これにより、難解なCSSセレクタ間の力関係や醜悪なdiv地獄から開放されるかもしれない。

素晴らしいことに、このHTMLは既存のほぼ全てのWebブラウザで、もう既に使うことが可能だ。驚くことにここで言うWebブラウザには、世界からガラパゴスと恐れられ、聖域となる独自仕様に守られている日本の携帯電話のWebブラウザですら含まれているのだ。

今後の展望としては、JavaScriptを使わずにHTMLのマークアップだけでユーザーにハイパーなエクスペリエンスを提供するため、表示コンテンツを点滅させたり（blink）、文字を画面狭しと左右に走り回らせたり（marquee）といった機能も実装されるに違いない。

CSSも JavaScriptも使わずに HTMLだけで角丸を実現する方法

シンプルな方法

<input type="button" value="角丸だよ" disabled="disabled" />

↓



改行とか画像を入れる場合はbutton要素で。

<button disabled="disabled">
改行も<br />
できるし<br />
画像も入れられるよ<img src="hoge.jpg" alt="角丸の中の画像だよ" />
</button>

文字色はstyle="color:black"とかで変えられるけど、背景色や枠線のスタイルは変えられない。（角丸でなくなってしまう。）

JavaScriptで HTMLエスケープ

こんな感じ？

var h = function(str){
var tmp = document.createElement("div");
tmp.appendChild(document.createTextNode(str));
return tmp.innerHTML;
};

HTML要素にエスケープした文字列を追加できるようにするなら、こんな感じ？

Object.prototype.appendText = function(str) {
this.appendChild(document.createTextNode(str));
};

両方とも、クォーテーションはエスケープされないので属性の値に入れる場合には注意が必要。

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

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

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

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

Flexigridのサイトを見つけられない人へ

jQueryのプラグインでHTML Tableをリッチにするライブラリ"Flexigrid"のサイト（http://webplicity.net/flexigrid）をみようとすると、

This Account Has Been Suspended
Please contact the billing/support department as soon as possible.

と表示されて困っている人へ。

現在のサイトはFlexigrid - Web 2.0 Javscript Grid for jQueryですよ。
本体はGoogle Code上にあって、flexigrid - Google Codeですよ。

あと、flexigrid()のパラメータについては【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」 (4)（中略）マイコミジャーナルを参照。

でもGoogle CodeからのリンクはSuspendedされた方のURLになっている．．．。

YUIの Menu Control Widgetを最小限のコードで使う例

ページ上部のシンプルなメニューの場合。
YUI Loaderを使うと一瞬、素のHTMLが表示されるので、事前にCSS・JavaScriptを読み込んでセットアップしたほうが見栄えがよい。

（2009/03/15 追記：htmlのbody要素開始タグにclass属性を追加）


CSS

<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/yui/2.7.0/build/menu/assets/skins/sam/menu.css">

<style type="text/css">
.active-menu{
/* アクティブなメニューボタンの装飾をする */
background: #fff;
}
</style>

JavaScript

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/yui/2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/yui/2.7.0/build/container/container_core-min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/yui/2.7.0/build/menu/menu-min.js"></script>
<script type="text/javascript">
YAHOO.util.Event.onContentReady("menu", function(){ new YAHOO.widget.MenuBar("menu"); });
</script>

HTML

<body class="yui-skin-sam">
<div id="menu" class="yuimenubarnav">
<div class="bd">
<ul>
<li class="active-menu"><a class="yuimenuitemlabel" href="http://google.jp">google</a></li>
<li><a class="yuimenuitemlabel" href="http://yahoo.jp">yahoo</a></li>
<li><a class="yuimenuitemlabel" href="http://goo.jp">goo</a></li>
</ul>
</div>
</div>

携帯電話関連の日本製Apacheモジュール

mod_ktai

携帯サイトの場合、キャリア・機種によって絵文字の出力、表示可能データ量、画面の大きさなどが異なる為、キャリア・機種判別、絵文字の出し分け等、携帯サイト向けの知識が不可欠です。
mod_ktaiを使用すると、それらの処理を簡単に行なうことが可能です。

参考：

　ke-tai.org > Blog Archive > ゆめみのmod_ktaiがとうとうリリース、しかも無償利用が可能

　オープンソース研究室: mod_ktaiを試してみました




mod_chxj

国内の主要携帯(3キャリア)向けコンテンツ変換ミドルウェアをApache2.x用のモジュールとして作成します。
CHTMLや通常のHTMLで作成したコンテンツを出力時にUserAgentを見てそれぞれの端末用に変換します(画像はJPG、GIF、PNGからJPG、GIF、PNG、BMPへ)。
QRコード生成機能付。

参考：ke-tai.org > Blog Archive > 携帯向け自動変換用Apacheモジュール「mod_chxj」が0.10系にバージョンアップ



mod_cidr_lookup

mod_cidr_lookupは、アクセスしてきたクライアントのIPアドレスが、起動時に読み込んでおいたCIDRブロック群のいずれかにマッチするかどうかを判別するためのモジュールです。

参考：DSAS開発者の部屋:ケータイやクローラの判別などに使えるmod_cidr_lookupを公開しました

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 - ププアブログ

CakePHP1.2の layoutで使える Helperのまとめ

head要素内に記述する要素など、layoutに書く要素のうちHelperで作成できるもののまとめ。

• ドキュメント宣言 （参考：HtmlHelper::docType）
  

  //引数なしの場合はXHTML1.0 Strict
  echo $html->docType();
  

• Content-Typeのmetaタグ （参考：HtmlHelper::charset）※2008/09/13 誤り修正
  

  //デフォルトはPHPのdefault_charset？？？
  echo $html->charset();
  

• CSS （参考：HtmlHelper::css）
  複数ある場合は配列で渡せる。
  

  //webroot/css/foo.cssを読み込む場合
  echo $html->css('foo');
  
  //webroot/css/foo.cssとwebroot/css/bar.cssの2つを読み込む場合
  
  echo $html->css(array('foo', 'bar'));
  

• JavaScript （参考：JavascriptHelper::link）
  これも配列で渡せる。
  

  //webroot/js/foo.jsを読み込む場合
  
  
  echo $javascript->link('foo');
  
  
  
  //webroot/js/foo.jsとwebroot/js/bar.jsの2つを読み込む場合
  
  
  echo $javascript->link(array('foo', 'bar'));
  
  

  
  JavascriptHelperを使う場合、ControllerでこのHelperを有効にしておく。（「s」が小文字なので注意！）

  var $helpers = array('Html', 'Javascript');
  

• その他、$html->meta('xxx')で作成できるもの （参考：HtmlHelper::meta）
  
• RSS （'rss'）
  
  
• Atomフィード （'atom'）
• favicon （'icon'）
• デフォルトはwebroot/favicon.ico
  
• metaタグのkeyword（'keyword'）
• metaタグのdescription （'description'）

YUI Girdsを使うならこんな感じになる。

<<?php ?>?xml version="1.0" encoding="<?php echo ini_get('default_charset'); ?>" ?>
<?php echo $html->docType(); ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<?php echo $html->charset(); ?>
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title><?php echo $title_for_layout; ?></title>
<?php
echo $html->meta('icon', '/favicon.ico'); //サイト全体で共通のfaviconを使う場合
echo $html->css(array('foo', 'bar'));
echo $javascript->link(array('foo', 'bar'));
echo $scripts_for_layout;
?>
</head>

<body>
<div id="doc2" class="yui-t7">

<div id="hd">
ここにヘッダーを書く
</div><!-- #hd -->

<div id="bd"><div class="yui-g"><?php echo $content_for_layout; ?></div></div>

<div id="ft">
ここにフッターを書く
</div><!-- #ft -->

</div><!-- #doc/[2-4]?/ -->

</body>
</html>

少しくらいCSSやJavaScriptを書くだけなら、わざわざHelperを使わずに直接書いた方がいいかも。
JavaScriptは</body>の直前に書きたいが、これでは無理か．．．？

YUI Grid.css用の XHTML 1.0 テンプレート

YUI: CSS Grid Builderで作ったHTMLの冒頭部分をXHTML 1.0 Strictにしたもの。

横幅は950pxでカラム分割無し、文字コードはUTF-8の場合。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>TITLE</title>
<!-- Keywordsはもう要らないと思う
<meta name="Keywords" content="FOO,BAR" />
-->
<meta name="Description" content="DESCRIPTION" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="stylesheet" type="text/css" href="some.css" />
<!-- フィードの記述は種類による -->
<link rel="alternate" type="application/rss+xml" title="FEED TITLE" href="http://www.example.com/feed.xml" />

<!-- スタイルシートは別ファイル化を推奨 -->
<style type="text/css"> /* ... */ </style> </head>
<body>
<!-- ここのidとclassは横幅等で変わる。YUI Grid Builderで調べるのが楽。 -->
<div id="doc2" class="yui-t7">
<div id="hd">
HEADER
</div><!-- #hd -->
<div id="bd">
<div class="yui-g">
MAIN
</div><!-- .yui-g -->
</div><!-- #bd -->
<div id="ft">
FOOTER
</div><!-- #ft -->
</div><!-- #doc/[2-4]?/ -->
<!-- charsetはhtml本体と同じなら不要 -->
<script type="text/javascript" src="some.js" charset="UTF-8"></script>
<!-- JavaScriptも別ファイル化を推奨 -->
<script type="text/javascript">
//<![CDATA[
...
//]>
</script>
</body>
</html>

2008/12/22 変更：JavaScriptのHTMLコメント化をCDATAに変更

htmlでボタンに表示する文字列を途中で改行する方法

htmlフォームのボタン系input要素はvalue属性の値をボタン上に表示するが、その表示する文字列を途中で改行する方法。 下記のように改行したい箇所に、改行コードの実体参照である「&#13;&#10;」を入れる。

<input type="button" value="この後で &#13;&#10; 改行してね" />

Windows版Safariでは、改行はするがボタンの高さが1行分なので半分見えなくなってしまった．．．。 もしかするとWindows以外では表示が崩れる？（改行コードも違うし。） 素直にbutton要素とか使った方がいいかも。

<button>この条件で<br />絞り込む</button>

ただしbutton要素だと、submitボタンとかresetボタンを作るにはJavaScriptで動きを付けないといけなくなるが。type属性でsubmitボタンにしたりresetボタンにしたりできるみたい。（2009/06/16 修正）

参考：
　改行コード(HTML, Java, URL & エスケープシーケンス)
　GAC なぜなにGAC->HTML