音楽図鑑 - 近況報告

はてなダイアリーから移行しました。

お仕事モード:wikiでのテーブル記法テストの巻

1.HTMLで普通にテーブルを書く。

こうやって書いてます。
<TABLE><TR><TD>あ</TD><TD>い</TD></TR><TR><TD>う</TD><TD>え</TD></TR></TABLE>
改行しないでズラズラ書き連ねなければならない。こんな記法じゃ小さな表でもタグの閉じ忘れで表示がバグる危険があって実用になりまへんがな。

2.上記のTABLEタグに border = 0 を追記して枠を消してみる。(CSSで規定されてるので消えませんw)

3.はてなテーブル記法Wiki風味)で書いてみる。

ひらがな カナ ローマ字
あいうえ アイウエ aiue
おっおっおw オッオッオw o..o..ow

※記法
|*ひらがな|*カナ|*ローマ字|
|あいうえ|アイウエ|aiue|
|おっおっおw|オッオッオw|o..o..ow|

HTMLより簡単&閉じタグ不要。構造化を考えなくていいので間違いにくく、記述バグも抑制できる。バグったとしても修正が容易。縦線と*は半角で書く。*をつけるだけで勝手に太文字&センタリングしてくれるのでラクラク。もっともこればかり使ってるとアホの子になりそうだがw

4.はてな記法で画像テーブルを作ってみる。
まずは練習

写真 解説
指の形がよくない例
指の形がよい例

楽勝。ここから本気出す。

画像 楽譜 コメント
左右のパッセージの幅が違うので、手のフィギュレーションも左右で異なる。弾きやすいフィギュレーションは個人差があるので、ロルティを真似ても弾きやすくなるとは限らない。このくらいの難易度の低いエチュードでそれぞれの手のもっとも弾きやすいフィギュレーションを研究すること。

IEでは画像幅固定で文字が追い出されてしまった。グーグルクロームだと勝手に画像を縮小して画面幅に収まるように調整してくれるが、これでは画像が小さすぎる。まずはIE対策で画像サイズをmediumに調整。

画像 楽譜 コメント
左右のパッセージの幅が違うので、手のフィギュレーションも左右で異なる。弾きやすいフィギュレーションは個人差があるので、ロルティを真似ても弾きやすくなるとは限らない。このくらいの難易度の低いエチュードでそれぞれの手のもっとも弾きやすいフィギュレーションを研究すること。

medium小さすぎw画像幅を250ピクセルで指定する。

画像 楽譜 コメント
左右のパッセージの幅が違うので、手のフィギュレーションも左右で異なる。弾きやすいフィギュレーションは個人差があるので、ロルティを真似ても弾きやすくなるとは限らない。このくらいの難易度の低いエチュードでそれぞれの手のもっとも弾きやすいフィギュレーションを研究すること。

IEはいい感じだが、クロームは相変わらず画像が圧縮されるので、文章部分に適当に改行を追加する。

画像 楽譜 コメント
左右のパッセージの幅が違うので、
手のフィギュレーションも左右で異なる。
弾きやすいフィギュレーションは個人差があるので、
ロルティを真似ても弾きやすくなるとは限らない。
このくらいの難易度の低いエチュード
それぞれの手のもっとも弾きやすい
フィギュレーションを研究すること。

このあたりで妥協か。画像幅を300ピクセルにするとIEでの文字領域が狭まりすぎるのでこれが限界。画像はクリックすれば大きくなるので、200ピクセルくらいにしてとりあえず雰囲気が伝わればいいという考え方もアリ。
ちなみにFirefoxの表示はIEとほぼ等価。safariの表示はグーグルクロームとほぼ等価。safariやクロームはWeb製作者がおかしなデータを作っても、画面幅に表示を押し込めてくれるという点でユーザには優しいと言える。
PC用のブラウザは上記4つでほぼカバーできるはず。最近のユーザ割合は他サイト実績からIE50%、クローム30%、サファリとファイアフォックスがそれぞれ10%ずつ。WindowsMacの区別なしです。スマホのことまでは考えられないのでごめんなちゃいw
はてな記法だとテーブルの項目幅指定ができないのが諸悪の根源です。なぜこんな中途半端な機能をリリースするんだろう。こんな仕事のやり方が許されるなんて、コンシューマIT屋ってラクな仕事だなあと思います。無料だからガマンするけど、有料でこんなことやってたらユーザ逃げるぞほんとに。