投稿

3月, 2012の投稿を表示しています

HTML5 アウトラインを意識してみる

イメージ
h1~h4とsection&h1を使って実験 HTML5では、新たなセマンティック要素を規定している。これはホームページやblogなどの文章の見出しや本文などを構造化することで、検索や様々なサービスを行いやすくし、結果的にユーザーのメリットになるというもの。ただ多くの有名サイトでも、まだ本格的に導入されていない。でもGoogleの検索エンジンでは、この構造が徐々に重要になってきているように思う。 文章の構造はアウトラインとしてもブラウザー上でチェックすることができる。Google ChromeではHTML5 Outlinerという機能拡張がある。 これをインストールすると、omniboxにアイコンが表示されるので、開いているページで、このアイコンをクリックすると、そのページの見出しのリストであるアウトラインを見ることができる。これはページの目次のようなものなので、これだけ見て内容がある程度分かるようにしておくのがよいと思う。下はindexのページのアウトライン。こんな感じで階層化しておくと今後の様々なサービスに対応できそう。 html5以前ではh1~h6を使って見出しを定義するような仕様ではあるのだが、どうも積極的に使われていなかったりする。それに数値で階層分けをするのは、機械からみると理想的ではないし、階層の変更に弱い。html5では新たにsectionが導入された。これとh1などを組合わせてタイトルのツリーを作ることができる。これによって複数のhtmlファイルを組合わせても、正しい階層をキープできるなど、変更修正に強く柔軟性のある構造が実現できる。でも後方互換性のため従来のh1~h6も利用できるのが何とも中途半端だが。今後はsectionとh1だけを使う方法がベターだろう。 例えばこんな感じで。 <section> <h1> 大見出し </h1> <p>本文</p>   <section>   <h1> 中見出し </h1>   <p>本文</p>   </section> </section> 上記は section の中に section が存在していて、2階層に

HTML5 Canvasを試す

HTML5の目玉のひとつCanvas JavaScriptで絵が描けるというということなので、ちょっと試しに作ってみた。静止画では面白くないので、HTML5のスライダーを使って変化させられるようにした。赤ラインがサイン波で、緑ラインがコサイン波。青ラインがその合成となる。スライダーで赤と緑の周期をコントロール。今までJavaAppletでやっていたようなことが、Canvasで実現できるのね。これはいいかも。反応が思ったよりもよくてびっくり。動きも滑らか&アンチエイリアスもはじめからかかっていて、使えるという印象だ。 作ってから分かったのだけど、input type="range"タグってIE9でも見れないのね。IE8だとたぶん何も見れてないと思う。この手のhtml5は、まだ実験段階だわ。現時点ではJavaAppletを使った方がよさそうだ。 R G JavaScript部分のソースコード <script type="text/javascript"> <!-- function setControl() { obj = document.getElementsByClassName('change'); for (var i = 0;i < obj.length; i++) { obj[i].addEventListener ('input', function(){drawWave()}, false); } drawWave(); } function drawWave() { var canvas = document.getElementById("wave"); if(canvas.getContext) { var context = canvas.getContext("2d"); var r = document.frmControl.red.value; var g = document.frmControl.green.value

HTML5 JavaScript カラー

HTML5のスライダーを使って、バックグラウンドの色をRGBで制御するスクリプトを作ってみた。 R G B JavaScript部分のソースはこんな感じ。 <script type="text/javascript"> <!-- function setColor() { obj = document.getElementsByClassName('change'); for (var i = 0;i < obj.length; i++) { obj[i].addEventListener ('change', function(){changeColor()}, false); } changeColor(); } function changeColor() { var red = document.frmColor.red.value; var green = document.frmColor.green.value; var blue = document.frmColor.blue.value; var redStr; var greenStr; var blueStr; red = parseInt(red); green = parseInt(green); blue = parseInt(blue); document.body.style.backgroundColor = "rgb(" + red +","+ green +","+ blue + ")"; if(red < 16){ redStr = "0"+ red.toString(16); }else{ redStr = red.toString(16); } if(green <16){ greenStr =

HTML5 SVGを少々

最新各種ブラウザでSVG (Scalable Vector Graphics) が見れるようになってきたので、そろそろ実験レベルで試してみようと思う。でもSVG未対応のIE8(Internet Explorer 8)のアクセスが多いので、積極的には利用しないほうがよさそうだ。実際このBlogでもWindowsXP IE8で見ている人の割合は26%で一番多い。ちなみにこのBlogは毎日200人ぐらいのアクセスがあるのだが、人数に換算すると毎日50人ぐらいはSVGが見れないことになる。無視してはいけない数値だ。まぁIE8でもJavaScriptライブラリで表示させることは可能だが、そこまでやる人は少数派だろう。WindowsXPはIE8が最終バージョンで、最新のIE9の導入はできない。すでに時代遅れになっているので、できればChromeなどに乗り換えてもらいたいところだ。今回の記事はIE8ユーザーのことはあまり考慮していない。たぶん下の絵が見れているIE8ユーザーは少ないと思う。 さてSVGとは、HTMLで扱える画像フォーマットのひとつと考えるのが一番シンプル。JPEG,GIF,PNGなどが画素の集まりであるラスターイメージなのに対して、SVGはベクターイメージで、数値化した座標をもとに線やら図形やらを描画するので、拡大しても画像が荒れることはない。しかもテキスト(XML)で書かれている。JavaScriptで操作することも可能。SVGは企業間での開発競争の末、標準化されたフォーマットなのでオープンになっている。何かと期待したくなるフォーマット。 まずはフリーのドローソフトである Inkscape を使って絵を描いて、それをBlogに埋め込んでみる。Inkscapeは標準でSVGフォーマットで保存するので、親和性はかなり高いと思う。まずは立方体を描いてみる。 1.0 image/svg+xml cubic

シャープペンシル Campus Junior Pencil 0.9

イメージ
Campus Junior Pencil 0.9mm コクヨ 定価157円 発売日 2011年1月 軸径9mm 長さ139mm 重さ 約6g(実測) チップスライド 材質: 軸 ABS+TPE、ノック部 ABS http://www.kokuyo-st.co.jp/stationery/juniorpencil/ そもそもシャープペンシルは好きではない。子供のころからほとんど使っていない。社会人になって一時期、製図用で0.3mmと0.5mmを使っていた時期もあったが、1年少々でおしまい。その後は完全にCADへ移行したので、シャープペンシルはまた使わなくなった。シャープペンシルは削る必要がないので便利なのは理解できるが、それ以外は全く評価できない。とにかく折れやすく、表現力に欠けるという印象。個人的にはほとんど鉛筆か芯ホルダーを使っているので、シャープペンシルには全く興味なくリサーチもしていなかった。 景品でもらってきたシャープペンシルがこれ よくシャープペンシルとボールペンはもらう。今回もシャープペンシルか・・・と思ったら、クリップがない! これは好印象。クリップはいつも邪魔だと思っていて、 愛用の芯ホルダー もクリップを取り除いて使っているぐらい。クリップが邪魔な理由はペンを回転しながら書くから。そうすることでペン先を常に一定の形状に保っている。最近は構造的に回転させるものがあるけど、あれの手動版というところ。回転させたときに手にクリップがぶつかってしまっては不快なのだ。そのクリップがはじめからない。 芯の太さが0.9mm 普通のシャープペンシルと違って芯が太い。0.9mmだそうだ。芯ホルダーの2mmにはかなわないが、0.9mmなら削る必要もないので、手軽に使えるよさがある。それでいて、なめらかな書き味は0.5mmとは別次元。鉛筆に近い感覚で扱える。 特に譜面を書くときなどには、音符を塗りつぶしたりするので、この太さは具合が良いし、やや離れて見たときの視認性が抜群によい。0.5mmと比較すると効率が全然違う。譜面に限っては鉛筆よりもよいかもしれない。また木工細工などをするときにも便利。0.5mmでは繊細すぎて使えないし、鉛筆だと削る手間がかかるので、0.9mmは最適かもしれない。 最近の流行?

GoogleMapを埋め込んでみる

イメージ
HTML5の学習をスタート。実験を兼ねて、このブログに残して行こうと思う。 今回はHTML5ということでもないが、GoogleMapを埋め込み表示させてみた。GoogleMapから取得したコードをBlogに入れるだけ。このレベルのことだと、YouTube並みに手軽に実現できるのね。 デフォルトだとはじめから吹き出しが出るので、これを消して、マーカーをクリックしたときだけ吹き出し表示するようにした。また吹き出し内に写真を入れてみた。 より凝ったことをするには  Google Map JavaScript API  を使うようだ。HTML5に沿ってちょっと作ってみたら、本格的な開発も可能なことが分かった。試しに作ったので、Blog内に入れようと思ったら、いろいろ制限があって、簡単ではないようだ。Bloggerの制限をよく理解していないので、強引に表示することはできなかった。アップするよい場所がない・・・ GoogleSiteに置こうと思ったら、普通のHTMLをすべて拒絶する仕組みなのね。ということでペンディング。Bloggerにアップできる方法が分かったらアップします。 寝る前にちょっとがんばったら実現できたので、早速ブログにアップしてみた。内容は上記とあまり変わらないが、APIを見て機能を盛り込んでいけば、ストリートビューとの連動とか、いろいろ実現できる。JavaScriptの埋め込みについては、理解が足りないけども、Bloggerの場合、テンプレートにおくべきコードと、記事に置くべきコードを切り分けられれば何とかなる。今回のポイントは <body onload="init()"> をJavaScript内に window.onload = init; として書き直したところ。テンプレートのbodyに前者を書いても機能するけど、すべての記事に有効になってしまうため、後者のようにした。

Meadow フォントなどの設定

イメージ
フォントを Inconsolata & MiryoKe_Gothic へ デフォルトのままでは英字は小さく、日本語は大きく、アンバランスで読みにくいと感じたので、フォントの代替を含めて検討してみる。 Inconsolata http://www.google.com/webfonts/specimen/Inconsolata 英数字は、プログラムに使うことを考えると、数字の「0」と英字の「O」の判別が明確であることが重要。同じように数字の「1」と英小文字の「l」など。そういう基準で探すと、Inconsolataがよかった。プログラム用としては人気のフォントのようだ。マイクロソフトのConsolasもよかったけど、フリーで優れたものがあるなら、そちらを応援したい。 メイリオ フォント マイクロソフト Windows XP 向け ClearType 対応日本語フォント 問題は日本語なのだが、今までMSゴシックを使っていたが、小さい文字はビットマップでギザギザ。これが文字の並びによっては結構きつい。そこでマイクロソフトのClearTypeのメイリオ フォントの登場。よく調整されているフォントで小さい文字でも視認性がよいが、字間の幅が可変になってしまう。文字の固定幅(等幅)利用は、まだまだ健在なので、メイリオをいじった固定幅のMeiryoKe_Gothicを使うことにした。このフォントはメイリオ フォントにmeiryoKeジェネレータというパッチを当てて生成する。いろいろ微妙な気もするので、あえてリンクは貼りません。気になる人は検索して調べてください。MSゴシックの代替として使えるのでXPのシステムフォントとしてもスムーズな導入が可能。下のサンプルを見るとわかると思うが、オリジナル メイリオだと見た目のバランスは良いのだが、横に長くなってしまう。特に英数字がMSゴシックとは全く違う幅。 なお MeiryoKe_Gothic のフォントセットには以下の4種類が含まれている。 Meadowの設定 .emacsに書き込むことで適用する。英数字はInconsolata、日本文字はMeiryoKe_Gothicを表示するように設定した。 (w32-add-font "fontset-meiryoke"'(

Meadow キーボードのキー入替え

イメージ
JIS配列キーボードのキー入替えをレジストリで行う MeadowはWindowsユーザーからすると特殊なキーバインドなので、現状のキーボードのレイアウトでは使い勝手が悪い。これまでもCapsLockだけはCtrlにして使っていたけど、それだけでは不足で、今回思い切って以下のように配置した。 無変換 を Alt 変換 を 半角/全角 カタカナひらがな を BackSpace 無変換をAltにした理由はMeadowではM-x(Alt x)などのAltを使う頻度がかなり高い。これを左手親指で打つのだが、初期位置では親指を曲げて打たなくてはだめ。そこで無変換をAltにすることで素直に打つことが出来るようになる。 変換キーを半角/全角にした理由は、半角/全角キーの使用頻度が高いにも関わらず、一番端に配置され、小指をぐいっと伸ばさないと届かないので以前から不満だった。そこで、使わない変換キーに割り当ててみた。しばらく使うと、これは快適だった。もっと早くこうすればよかった。キーボードの1列目は本来打ちやすいのに、使わないキーが複数ある。有効利用しなくちゃもったいない。 カタカナひらがなキーも使わなかったキーのひとつ。しかも間違って押すとイライラするキーでもあった。ということでBackSpaceにした。BackSpaceも小指をぐいっと伸ばす位置にあるので、この位置に来たことですごく楽になった。JIS配列は小指の負荷でかすぎ。基本的な配置を崩さずにキーを詰め込んだ結果小指の担当キーが増えて、使用頻度の高いものが遠くへ移動してしまったわけだが。 キーの配置変更方法 (WindowsXP) ファイル名を指定して実行からregeditと打って開く。 HKEY_LOCAL_MACHINE > System > CurrentControlSet > Control > KeyBoard Layout > に入って新規でScancode Mapを作成する。すでにあれば、それに修正を加える。 16進数になっているので、キーのコードを マイクロソフト などで調べて割り当てる。ドキュメントがあるので、そこにすべてのキーが書かれている。個人的な設定はこんな感じ。%以下はコメントです。書き込みはリトルエンディアンな