あちゃぴーの自転車通勤

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 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のスライダーを使って、バックグラウンドの色を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 =

最新各種ブラウザで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.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は最適かもしれない。 最近の流行？

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に前者を書いても機能するけど、すべての記事に有効になってしまうため、後者のようにした。

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

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進数になっているので、キーのコードを マイクロソフト などで調べて割り当てる。ドキュメントがあるので、そこにすべてのキーが書かれている。個人的な設定はこんな感じ。%以下はコメントです。書き込みはリトルエンディアンな

Windows版 Emacsである超多機能エディタMeadowを使ってみることにした。インストールから環境設定までのメモ。ちなみに、この素晴らしい環境はすべて無料です。 以前Linuxを使っていたときにEmacsをいじったことはあるのだが、GUIに慣れた身としては、とっつきにくい印象だった。独特のコマンドによる操作と、独特のショートカットがそれで、MacやWindowsとは随分違う。慣れが必要。また見た目があまりにもシンプルで何をしていいのか分からないぐらい。スクロールバーもメニューも非表示にできる。でも機能はありえないぐらい詰め込める。シンプルな初期状態から、自分の好みで機能をトッピングすればいい。はじめから重装備ではないので、動作はキビキビしている。また、ちょっとした機能を追加したい場合は、自分でスクリプトを書いてしまえばいい。かゆいところに手がいくらでも届くエディタではあるが、それなりの知識が必要とされる。マニアックなエディタなので、誰にでも勧められるものではないが。 導入理由 C、C++のエディタ、コンパイラー、実行までをシームレスで行いたかったから。ちょっとした小さいプログラムの実験なので、巨大なIDEは不釣合いだし、エディタとコマンドプロンプトの組合わせも煩雑に感じたので、コンパクトにサクサクやるにはMeadowが適当に思えたのだ。 Javaを書くのもMeadowを使ってみようかと思う。最終的にはEclipseを使うが、ちょろちょろコンソールで実験するときはMeadowで十分。 あとLaTeXをMeadowから使うという目的もある。今まではWinShellを使っていたが、せっかくなので、Meadowに移行しようと思う。数式を書くのはやっぱりLaTeXがいい。 導入の理由はこんなところ。あとはカスタマイズが半端なくできる魅力は大きい。 Meadowのインストール http://www.meadowy.org/meadow/ Meadow 2.10 (ASAGAO) -- リリース版 一通り必要なものがセットになって、設定までしてくれるので、随分楽できる。ありがたいことだ。 インストーラー(348KB)をダウンロードして、必要なパッケージにチェックしてインストールする。今回はネットインスト

インストール LaTeXは数式などをきれいに表示することができる組版処理ソフト。理数系の大学では論文用としてポピュラーなはず。 http://www.math.sci.hokudai.ac.jp/~abenori/soft/index.html TeXインストーラ3 0.81r7 インストーラーは上記のものを使わせてもらった。手動であれこれやっていたら、かなり時間がかかりそうなことを自動でやってくれるのでありがたい。それでもインストールはADSL環境で30分以上かかると思ったほうがいい。とにかくDLされる数が多く、容量がデカイのだ。 インストールはいくつかの箇所に行われる。GhostscriptとGSview以外はC:\w32texの中だと思われる。そのW32texのフォルダ容量は1.278GBにもなる。このデカさは、なんとかならないものか・・・。その中のフォルダは bin 88MB download 325MB dviout 6.2MB share　960MB という構成。downloadは削除しても問題ないが、しばらくは環境をいじくりまくるので、そのままにしておこう。インストールされたソフトは大きく分けて以下の通り。 W32Tex(LaTeX)  C:\w32tex\bin 87MB Path自動(C:\w32tex\bin;) 本体　主にtexで書かれたファイルをdviファイルに変換する。この中にある platexやdvipdfmxなど複数のプログラムを使う。コンパイルのときにC:\w32tex\shareの中も使う。また作られたdviファイルを元にPDFファイルにも変換する。texファイルからいきなりPDFファイルは作れない。 dviout  C:\w32tex\dviout 6.2MB dviファイルのビューア。これはMeadow上でtexファイルを編集しつつ、最終的なレイアウトや数式などを確認するのに必須のソフト。プレビューの質はアドビのPDFに比べて落ちるが、Meadow上でtexを編集しつつコンパイルするたびに、dvioutに表示されているその書類が自動更新される。使い勝手が抜群によく、texファイルを編集するときにはMeadowとセットで使うイメージ。 このプログラムは手動でPat

Wiki を見ているとLaTeXのよさが見えてきて感心していたら、 MusiXTeX という楽譜作成を目的としたTeXを発見。どんなものかなとサンプルをコンパイルしたら、あれれ、出来てしまったよ。MusiXTeXの環境がすでに出来ていたのか？てっきりエラーが出ると思ったのに。出力結果は下のようなもので素晴らしい。でも上の文章を打つのと違って、これを打つのはかなり大変そうだな。それでも数式と楽譜を混在した文書を作るときには便利そうだ。すでに環境は出来ているのだから使うべきでしょう。覚えることが多すぎる・・・ サンプルのtexファイルと同じ階層にあったプラグインのstyファイルを移動する。 multicol.sty musixjdc.sty これを以下のディレクトリに入れることで、texファイルと同じ階層になくてもMusiXTeXを利用できるようになった。 C:\w32tex\share\texmf-local\tex\platex

HPF(ハイパスフィルター)は何かと必須だと思えて、AudacityのHPFやらEQやらVSTを試してみる。HPFは違いが音として分かりにくい側面があるのだけど、ミックスなどでは確かに質が変化してくる。目立たないけどめちゃくちゃ重要じゃないか？HPFって。 AudacityのHPFはIIRのButterworthタイプで高速に処理できるのはよいのだが、位相が変化してしまう欠点があるのと、効き方がどうしてもゆるくなってしまう。 次にVSTのHPFもいくつか試してみるがAudacityとの相性の問題も出てしまう。VSTのFIRタイプだと音が遅れてしまうのが普通なので、使えないという判断。 Audacity標準のEqualizationをHPFとして使う手もあると思って試してみる。フィルタータイプはおそらくFrequency Sampling MethodでFFTを使って高速処理しているようだ。直線位相なので、位相問題もなく、かなり高精度という印象。タップ数は選択可能で最大で8191使える。これで効き方なども調整できる。なかなか素晴らしいHPFという結論。ただ微妙な誤差が出ているように思うのは設定値の誤差なのか、FFTの計算上のものなのか分からない。量子化ノイズ程度なので、測定しないと分からない範囲ではあるが。 ということで、勉強も含めて精度優先でDFTを使ったHPFを作ってみた。速度を無視すれば楽に精度を上げられる。はっきり言って実用性はあまりない。リアルタイム処理なんて絶対無理。ただ試したかっただけ。処理時間は数分の入力信号でも、数十秒から分単位で計算する・・・。FFTで高速処理させないと実用にはならないと判断。FFTは原理のところからちゃんと勉強して誤差を最小にしたいところ。実現するには、それなりに勉強が必要そう。 現状では遅いのだが、floatの音声ファイルの処理なら、バイナリーレベルでチェックしても誤差0となった。またFIRの遅れもリアルタイムではないので、レイテンシー0に細工した。あと窓関数の種類でHPFのかかり方が大きく変化するので、その辺りもいろいろ試した方がよさそう。hammingはカットがあまくなるのでHPFには向いてない。hanningは結構鋭くかかるという印象でHPFには適していると思う。自分でHPFに最適な窓関数

All-passフィルタを組み合わせて実際にエフェクタを作ってみようと思う。参考にしたエフェクタはAudacity標準のPhaserとVSTのClassic Phaserの２つ。一通り試してみたが、パラメータに不明な部分がある。StagesやLFOの速度、Feedbackなどはよいのだが、Depthの考え方にバラツキがあるように思えた。PhaserのDepthは一般的にLFOの揺れ幅を示すと思う。実際に加工してもそのように動作しているものが多そうだ。しかし、基準値が不明なのだ。Audacity標準Phaserでは、Depthが255だと0～約11kHzの間を回っているようだが、浅くしていくと、上限の周波数が低くなっていくようだ。Classic Phaserは動きが違っていて、常に0～21kHzまで効くようだ。DepthはノッチフィルターとしてのQの幅が変化、もしくはミックスの割合が変化。LFOの周期は一定。高域の特性はローパスフィルタで調整している。他のVSTのPhaserのパラメータを見ても、いろいろな表現があるようだし、それぞれの解釈で動作している。 wiki ではDepthはWetレベルを指している。自作は、いろいろな解釈があるDepthはやめて、LFOの範囲を周波数で設定することにした。例えば0～12kHzの間をLFOの周期で回るというイメージ。なるべく明確な設定が出来るようにしようと思う。 資料に関して 今まで作ってきたエフェクタの多くは、英語版Wikiなどに、それなりにまとまった情報があって、それを元に作ることが出来たりしたけど、今回は数式からそのまま作るようなことが出来なかった。原理の説明もほとんどなくて、ネットで見つけた情報にも明らかな間違いがあったり・・・　特に自ら製作していない人の説明は当てにならない。結局、自分でプログラムを組みながら、様子を見るという方法をとった。原理的に大きな間違いはないと思うけども、解釈にズレはあるかもしれない。 Stagesの実験 ステージはAll-passフィルタのタップ数を指している。基本的には2タップ一組になっている。これらを共通のパラメーターのまま直列につなぐだけで、落ち込む周波数の谷の数が変化する。まずは各ステージにチャープ信号通して、原音とミックスしてみた。 2stages DryとWetを

オールパスフィルター(All-pass filter)ってちょっと不思議。振幅をいじらず、特定の周波数を中心に位相だけを反転するフィルター。何に使うの？という感じだが、フェイザーというエフェクトを調べていたら、オールパスフィルターを使っていたので、まずはこの原理を理解することから始めたいと思う。 AudacityのNyquistにもオールパスのコマンドはあった。 (allpass2 signal hz [q]) というもので、具体的には (allpass2 s 1000 1) こんな感じで使う。Effect メニューの Nyquist Prompt に以下のように入力するだけで実行できる。 sは選択範囲のサウンドで、1000は反転したい周波数。単位はHz。1はその影響する範囲。とりあえず、これを使って加工してみる。100Hzから15000Hzのチャープ信号を作る。拡大すると下のような波形で、低いサイン波から始まって、段々と周波数が上がっていくもの。 この信号に (allpass2 s 1000 1) コマンドを通す。出来たサウンドは何の変化も感じられない。聴いても同じようにしか聴こえない。でも拡大してみると、ちゃんと1000Hzで位相が反転しているのが分かる。 さらにオリジナルのチャープ信号と合成すると明らかになる。1000Hzは位相が反転しているので、打ち消しあって、振幅は0になる。他の周波数は位相が揃っているので、2倍の振幅になっている。 ということで、オールパスフィルタのイメージがつかめたところで、数式から追ってみることにする。最終的にはIIRの2次で実現してみようかと思う。ブロック図はこれを採用する。 オールパスの数式を探してみる。WIKIだと、アナログに関して書かれているが、ちょっとこれからの変換はイメージできない。もう少し調べると、Robert Bristow-Johnsonという人が書いた 「Cookbook formulae for audio EQ biquad filter coefficients」 を利用している人が多いようだ。確かに２次のbiquadが一通り書かれているので、そのまま使えば簡単に実現できるようだ。そのままコピーも面白くないので、自分で計算することにした。でも下記の式だけは参考にさせてもらっ