インターネット | プログラマーズ雑記帳

インターネットカテゴリ記事

ブログでコードハイライトする 2011-09-02
はてなブックマーク 2011-12-07
HTML5 Please 読み方ガイド 2012-03-05

JavaScript FC2ブログコードハイライト ex-html-mode.el

ブログに書いたコードにコードに色を付けて表示したいなということで、ブログでコードハイライトできるようにしました。
その方法を紹介します。

スクリプトをダウンロードする

コードに色を付けるにはコードハイライトの JavaScript を使う必要があります。
コードハイライト用のスクリプトはいろいろ公開されているのですが、私は対応している言語が多かった SHJS というのを使いました。
他にも SyntaxHighter というスクリプトが有名で試してみたのですが、こちらは何故かうまく色が付いてくれませんでした。 (^^;)

まず、以下のサイトから必要なファイルまたはコード一式をダウンロードしてきます。
http://shjs.sourceforge.net/index.html

自分のブログにファイルをアップロードする

ダウンロードしてきたファイルを自分のブログにアップロードします。このとき最低限必要なファイルは 2 つです。

スタイルシード sh_style.css
メインのスクリプト sh_main.js

後はハイライトしたい言語のスクリプト sh_xxxx.js をアップロードしておきます。

このとき後で使うのでアップロード先のパスをコピーしておいてください。

テンプレートを編集する

アップロードしたスタイルシートとスクリプトを呼び出せるように head タグ内に以下のような行を追加します。


<head>
                                            :
<link type="text/css" rel="stylesheet" href="http://blog.../sh_style.css" >
<script type="text/javascript" src="http://blog.../sh_main.js"></script>
<script type="text/javascript" src="http://blog.../sh_cpp.js"></script>
<script type="text/javascript" src="http://blog.../sh_html.js"></script>
<script type="text/javascript" src="http://blog.../sh_ruby.js"></script>
                                            :
</head>

あと、ページのロード時にスクリプトを実行するように body タグに onload="sh_highlightDocument();" の記述を追加しておきます。


<body id="pagetop" onload="sh_highlightDocument();">

これでコードに色をつけて表示することが可能になりました。

コードを書く

実際にブログ中にコードを書く場合には、クラス属性でコードを指定した pre タグ内に書きます。


<pre class="sh_xxx">
  色を付けたいコード
</pre>

ここの sh_xxx は言語ごとに変わるところで、スクリプトのファイル名の .js の前の部分です。

ただし、 html ファイル内では <, >, & は使用できないので、コード中の文字はそれぞれ <, >, & に変換しておく必要があります。

スポンサーサイト

はてなブックマーク

ブログ

最近使っているはてなブックマークについて。

私は RSS リーダーとかを使って、コンピューターや IT 関連の情報をチェックしてます。
そんなとき、思うのが次のこと。

気になったページをリンクをとっておきたい
そのリンクを自宅と会社で共有したい
そのリンクをブログなどで公開したい

とっておくだけなら、ブラウザのブックマークでいいし、共有するだけなら、 Google Crome でできます。

公開もということも考えるとソーシャルネットワークサービス(SNS)を使おうということになります。
リンクを取っておきたいページに Twitter や Facebook のいいねリンクはあることは多いのですが、これだと情報がしばらくすると消えてしますし(私が残し方しらないだけかもしれませんが)、リンクの情報だけ集めるのも難しいです。
Google+ はリンク情報を残したり、リンクだけ集められたりしているので、いいのですが、まだそんなに広まってないのか +1 のリンクがないページが多いです。

そんななか見つけたのが、はてなの はてなブックマーク の SNS です。
これは公開ブックマークの管理用の SNS ですし、リンクのボタンがなくても IE, Firefox, Chrome の拡張プラグインがあって、どのページでも登録することができます。

また、ブックマークを登録したとき、そのまま Twitter で流すこともできます。
Twitter にサイトのアドレスを書くとそれでほとんど制限まで埋まってしまうということがありますが、はてなブックマークだと Twitter のリンクがなくても、省略系のアドレスで書いてくれるので、 Twitter を使っている人にも便利です。

広告で収入を得ているタイプではないみたいなので、ブックマークの編集をしようとするとお金を払わないといけないなど不便な点もありますが、今、結構気に入って使っています。

以下は私のブックマークです。よかったら見てみてください。
http://b.hatena.ne.jp/yohshiy/

HTML5 Please 読み方ガイド

HTML5 CSS3 ガイド web制作使い方

Web 制作などで、非常に役に立つ HTML5 Please というサイトがあります。
このサイトの紹介と、ぱっと見は何が書いてあるのかわかりづらいところもあるので、読み方ガイド的なものを書いてみました。
英語のサイトですが、用語の意味さえ分かっていれば、英語があまり分からなくても、ある程度使えるのではないかなと思います。

どんなサイト ?

"HTML5 Please" は「 HTML5 をどうぞ」とか「 HTML5 をどうぞ使ってください」ぐらいの意味でしょう。要するに HTML5 を薦めているサイトです。 HTML5, CSS3 といった新機能に対して、メジャーなブラウザ(IE, Firefox, Crome, Safari, Opera)の対応状況を元にその機能をもう使っていいのか、まだやめておいた方がいいのかといった情報がコンパクトにまとめてあります。

このサイトでは機能のリストの一覧が表示されています。
このリスト項目をクリックすると各機能の説明が表示されます。ただし、利用に関する説明で機能自体の説明は書かれていません。 あらかじめ使いたい機能があって、それが使っていいのかチェックする という使い方になると思います。

さらに説明内の [View browser share %] のリンクをクリックするとブラウザごとの対応状況の一覧も表示されます。

use, caution, avoid

まず、大きく use, caution, avoid で分けられます。
use, avoid はわかりやすいでしょう。ブラウザが対応しているので、使ってもいいというのが use で、未対応のブラウザが多いので、まだ使わないほうがいいというのが avoid です。

では、 caution は何だろうというと、使ってもいいけど、使うのには注意が必要 という機能です。
たとえば、 caution になっているものに box-shadow という機能があります。これはボックスに影を付ける機能で、このブログではサイドバーの各要素の囲みに使っています。
この機能の説明では、あまり大きな領域に対して使うとパフォーマンスが落ちるので、気をつけた方がいいですよという但し書きが付いています。

ただ、 use でも注意しておいた方がいい点もあります。
それは基準が各ブラウザの最新バージョンで対応済みであれば、 use になるということです。
Windows XP だと IE 8.0 までしかアップグレードできないので、まだシェアは高いと思いますが、 IE 8.0 で使えない機能も use で表示されます。

また、理由はよく分かりませんが、 IE 9 で対応済みとされている機能が実際には対応していないということも多いです。
たとえば、境界線の角を丸く表示する border-radius という機能があります。これはこのブログでもナビなどのボタンやサイドバーの各要素の囲みに使っているのですが、私の環境の IE 9 では丸く表示されていません。
先ほどの box-shadow も同様に IE 9 では機能していません。

追記 2012-7-21

IE が IE7 のレンダリングモードで動作してるのが原因でした。
IE9 で動作するように指定すれば、 border-radius, box-shadow ともにちゃんと機能するようになりました。

IE を実際のバージョンで動作させるサイト側の指定方法 | プログラマーズ雑記帳

polyfill, fallback

use や caution の後に with polyfill や with fallback がついているものがあります。この polyfill, fallback とはなんでしょうか。

polyfill

polyfill というのは web 関連の造語で、ブラウザがまだ対応していない機能を提供する JavaScript やアドオンなどを指しています。ある機能に対応していないブラウザがあったとしても、その機能を実現する polyfill があれば、すべてのメジャーブラウザで機能を使えるようになります。
例えば、<canvas> という html 上に図を描画する機能は IE 9 ではまだ対応していませんが、 polyfill を使えば、 IE でも canvas が使えます。

HTML5 Please ではお勧め polyfill もリンク付きで紹介されています。

polyfill なんていう便利なものがあるなら、ブラウザが対応していなくても、新しい機能をどんどん使っていけばいいやと思う方もいるかもしれません。
しかし、この polyfill は大抵 JavaScript で無理やり実現させたもので、スクリプトのロード時間もあり、ブラウザで対応されている方が処理速度は速いです。
実現しようとする機能によっては、 JavaScript でやろうとすると著しく時間がかかってしまうものもあります。実は caution で紹介した box-shadow にはもう一つ但し書きがあり、そこには box-shadow の polyfill は遅くなってしまうので、使わない方がいいよと書かれています。

fallback

fallback は日本語ではいざという時の予備品，代替物といった意味になります。
これが付いている機能はブラウザが対応していないときの備えをしてから、使おうということになります。

例えば、 fallback になっている機能に gradient という CSS の機能があります。これはグラデーションをかけて色を付けることが出来る機能で、このブログでは記事タイトルなどに使っています。

この機能はグラデーションのついた画像を背景に使うことで代用することが出来ます。ただし、画像の方が遅くなりますし、長くなって 2 行になった場合などではきれいに表示できません。
HTML5 Please では画像を使う方法や単一の背景色を指定することで、対応していないブラウザに備えておくことが推奨さています。

ちなみにサイトでは理由までは説明さていませんが、 gradient に関しては border-radius や box-shadow と違い、対応ブラウザの備えとして背景色の指定はやっておいた方がいいです。
というのも、 gradient に対応していないブラウザでは、背景色が描画されないためです。正確には、 <body> などのベースとなる要素の背景色になるのですが、背景色が期せずして使われると、情報を伝えるというところにも影響を与えることがあります。例えばその背景色が白で、文字色も白に近い色だった場合、コンテンツの内容が読めなくなってしまいます。

また、 gradient の説明にはベンダープレフィックスを付けるように薦められています。
ベンダープレフィックスというのは仕様の確定していない機能に対して、ブラウザごとの書き方をするものです。詳しくは以前の記事に書いたので、そちらを見てみて下さい。

ブラウザとレンダリングエンジン#ベンダープレフィックス

    background-color: #F5F5F5; /* 代用色 (gradient に対応していないとこの色になる) */
    background: linear-gradient(top, white, silver);
    background: -moz-linear-gradient(top, white, silver);
    background: -o-gradient(top, white, silver);
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(silver));

polyfill か fallback か

未対応のブラウザがある機能を使う場合、 polyfill か fallback かということになります。 HTML5 Please ではこれはどのように選択されているのでしょうか。

この選択の説明の前にまず、最近 web 制作で主流になりつつある プログレッシブエンハンスメント という考え方について説明しておきます。
これは 高機能なブラウザではかっこよく、そうでなくてもそれなりに という考え方です。モダンなブラウザを使っている人には新しい技術を取り入れた高度な見せ方で提供して、そうでない場合でも、見え方はシンプルになるけど内容は損なわないようにしようということです。

クロスブラウザはもう古い！ HTML5 ＋ CSS3 時代のプログレッシブ・エンハンスメント - @IT

いままでに紹介した border-radius や box-shadow などは角を丸くしたり、影を付けたりするだけで機能していなくても、中身に影響はないので、どんどん使っていくべきです。
それに対して <canvas> といった新しいタグを使うと解析に失敗したりするなどして表示自体できなくなったり、内容を損なったりします。こういった場合は polyfill を使うか、まだ使用を避けるということになるでしょう。

HTML5 Please もこういった思想を元に作られているようです。
基本的に表示の装飾だけに関係するものは fallback になっていて、 機能しないと困るようなものは polyfill というようになっています。
また、 JavaScript で作られた polyfill だと処理速度がかかるので使わない方がいいという情報や、逆に fallback でもお勧めの polyfill がある場合には、その polyfill へのリンクが紹介されています。

フィルター

最後にフィルター機能について紹介したいと思います。
ページの上部にあるテキストボックスやリンクで表示内容をフィルタリングすることができるようになっています。テキストボックスのフィルターも便利なのですが、リンクも use だけ、 css だけといった感じでフィルタリングができ、知りたい情報をピックアップしてみることが出来ます。
中でも便利な 2 つのフィルターをあげておきます。

IE8+: まだシェアの広い IE 8 から対応している機能のみを表示します。
prefixes: CSS のベンダープレフィックスが必要な機能のフィルタリングです。

日	月	火	水	木	金	土
-	-	-	-	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	-

プログラマーズ雑記帳

ブログでコードハイライトする