バカネコ日記

にゃんタグ物語

にゃんタグ　開発物語

第１章　　HTMLタグは覚えられない？

HTMLはたいへん

タグがなかなか覚えられない、面倒だとおっしゃる方が多い。
じゃ、ホームページ・ビルダーでも使えば？　というと
今度は、使いこなせないと、おっしゃる。

何がネックなのか、考えてみた。
ホームページを作るにはHTMLを覚えるか、ビルダーのような
作成ソフトを使いこなすか、２つにひとつである。

昔と違って、ホームページもブログで作れば、簡単にできるようになった。
楽天日記がいい例である。
しかし、それでも、HTMLと縁が切れるわけではない。

メールのように文字だけでよいのなら、話は簡単だ。
だが、リンクを張ったり、文字の大きさや色を指定するのなら
どうしてもHTMLを使う必要がある。

ビルダーで作っておいて、そのソースをコピペするという手もあるが、
自動改行の壁にはばまれて、あまりラクさせてもらえない。
もちろん出来るのだが、それが簡単にできるレベルの人は、
HTMLの基礎なんぞ、とっくに卒業してしまっている。

ソフトを使えばどうか

さて、HTMLを使うにあたって、何が問題なのか考えてみた。

確かに、いきなり覚えようとしても、量が多すぎる。
初心レベルであれば、何が重要で、何が重要でないかの区別もつかない。
この程度、覚えておけばこと足りる、という目安もない。
まるで、今からラテン語を覚えるようなものだ。

だからといって、ビルダーを覚えようにも、これまた機能満載で
使い方を覚えるのが大変だ。

では、何が、作成ソフトを使いにくくしているのか。
答えは、簡単である。
より便利にしようとして、機能を増やしすぎたためだ。

ＨＰ作成ソフトは、覚えるべき操作が多くて、ボタンを探すのさえ苦労する。
見たことのないようなアイコンが、どっさり並んでいるのだ。
見ただけでウンザリする。　いくら便利でも、消化不良。

しかし、低機能ではライバルに食われてしまうから、メーカーは
機能を増やさざるを得ない。

限られた面積で、多くの機能を持たせれば、その分だけ、
呼び出し方が、複雑になる。
つまり、何回かクリックしないと、目的の操作が呼び出せない。

何回クリックする？

例えば、語句の色を変える、という基本作業が、何回のクリックで出来るか、
数えてみた。
フロントページ2000で、１～４回、ただし、１回ですむのは
運良く、直前に使った色と同じ場合だけだ。

ホームページビルダーV9の場合は、カラーパレットが、
あらかじめ、表示されているとして２回だ。

実際には、色を探す以前に、操作に気をとられる。
クリック数は、さほど多くないにもかかわらず、面倒くさいと感じる。
そのたびに思考が中断されるからだ。
「えーと、どこをクリックするんだっけ？」

なるほど、クリック一発で色を変えられないか、という意見も分かる。
クリックは大した手間ではないが、その前に、どこをクリックするか、
探すことそのものが、面倒な作業なのだ。

ホームページビルダーV9は、ページ編集画面とHTMLソースを同時に表示できる。
最初は、「お、これはすごい！」と期待したが、使ってみると、思ったほどでもない。
ソース画面が勝手に動くので、編集位置を見失うのだ。
そのたびに探し回るのは、ストレスがかかる。

もう少し、おとなしくしてくれると、どこが変化したのか確認しやすいのに。
そしたら、初心者がHTMLを覚えるのも、ラクになるだろうに。
でも、HTMLをみんなが覚えたら、ビルダーが売れなくなるか．．．

第２章　　対数表代わりに電卓？

便利になった？

世の中には、パソコン用自動翻訳ソフトというのがある。
だが、ものすごい翻訳をしてくれる。　悪い意味で。
相当、手直ししなければ、ほとんど使い物にならない。
使うには、やはり英語の素養が必要だ。

そして世の中には、辞書ソフトというのもある。
マウスカーソルをあわせるだけで、訳語がぽんと出てくる。
瞬間的に辞書が引けるので、自分で訳す場合はこの方が、ラクだ。

ところで、対数表、というのをご存じだろうか。
数学の時間に出てきた、Y = LogX なんたらかんたらの、アレである。
昔はこれを、対数の計算に使っていたのだ。

対数表は、５桁対数表と、７桁対数表があって、値段が大きく違った。
５桁用が１万５千円なら、７桁用は４万円というように。

理科系の学生には、対数表は必須なのだが、30年ほど前、
ようやく、個人向けの関数電卓が出回り始めた。

当時、18000円。　狭い学生アパートの３ヶ月分の家賃より高かった。
それでもずいぶん安くなった方なのだ。
それまでは、とても学生に買える値段ではなかった。

だが、７桁以上の精度があり、三角関数も平方根もすべて対応していて
なおかつ、値段は５桁対数表といい勝負だったので、迷わず電卓を買った。
そして、大活躍した。　対数表を引くよりも断然速いからだ。
アナログよりもデジタル、の典型例である。

HTMLは便利になったか？

さて、HTMLの場合を考えてみる。
楽天日記のようなブログで使うタグは、文字の大きさと色、
そしてリンクの指定が多い。

というか、それ以外はデザイン関係なので、すでに自動で作られているか、
タグの制限で使えなかったりする。

一番面倒なのが、カラーコード(RGBの16進数値)を調べることであろう。
コード表から、いちいち引っぱってくるのは、英語の辞書を引いたり、
対数表を引くのに似ている。
コピペできるとしても、あまりラクにならない。

ビルダーなどでやればいいのだが、操作を覚えるまでは、しんどいし、
ソースを単純にコピーすると、日記ページでは、自動改行という壁がある。

ならば、辞書ソフトのように、単機能に絞って、
必要なタグだけを、それも、ワンタッチで作ってくれる道具、
の方が使い勝手は良さそうだ。

いっそ、作れないか

うーむ。　口で言うのは簡単だが、実際作るのは面倒だ。
全部、ワンクリックで処理するなんて、いかにも無理っぽい。
なにせ、組み合わせが膨大だ。
語句の入力だって、右クリックでコピペしたにせよ、２クリックになる。

だが、ひとつの処理だけを、ワンクリックにするのなら？

たとえば、カラーコードを内蔵させておいて、色見本をクリックしたら、
即、そのHTMLタグを表示するとか．．．。
いわば、ワンタッチ式の自動カラーコード表である。

対数表代わりに電卓、みたいな発想だ。
これに、文字の大きさだの、太字だの、斜体だのを、
それぞれワンクリックでぶちこんでやるか。　それなら可能だ。

本当に作れるのだろうか、とか何とか言いながら、
結局、外殻だけは作ってしまった。
あとは、中身をなんとかしないと。

実は、それが大きな問題だったりする。
見てくれは、パーツがあるからすぐに完成するが、処理内容はひとつずつ、
プログラムを書いて実装しなければならない。

いよっ、大統領！　とかなんとか、ヨイショしたって、
そう簡単にソフトは出来上がってくれない。
はたして、バカネコ村の新兵器は、完成するのか。

第３章　　HTMLによる文字色の指定

まずは、HTMLのおさらい。
HTMLは、基本的に語句を、タグで挟むことで機能するのであった。
おぼえているかな？
で、文字の色を変更する場合も同じである。　タグで挟めばよろしい。

例えば、バカネコ、という文字を、赤くするには
その語句を、 タグ で挟むのだ。　つまり、以下のように書く。
 バカネコ 

これだけでは、色の指定がないので、軽～く、呪文をぶち込んでやろう。
 バカネコ 
何も難しくはない。　英語ではあるが、色は赤よ、と書いただけだ。

この、color="red" というのが、色を赤くせよという、呪文なのだが、
red の他にも blue だの、green だのと、いくつか使える。
ぱっと見にも、分かりやすいが、色の英語名は、数が少ないのが欠点だ。

その他の色を使うには、RGB方式で色を指定する。　例えば赤なら、こうだ。
 バカネコ 

RGBなどの用語については、「色っぽい？」のページで解説してある。
気になる方は、あとで、読み返してみるのも、よろしかろう。
特に、RGBと聞いただけで、腰の引けるヒトは、これを読むと、
RGBの正体は簡単すぎて、たぶん拍子抜けする。

話がそれてしまった。
さて、color="#FF0000" の部分が、色を指定しているのだが、FF0000 というのも
これまた、16進数なので、ふだん使うには、便利とは言えない。

この数字をいちいち試しながら、色を決めるのは、あまりにも不便だ。
バカネコ村のみなさまのために､色見本を用意しよう。
216色作ったが、96色に絞った。　これでも、実用上は、おつりがくるだろう。

再現性を重視して、画像ではなく、HTMLで直接、書いた．．．のだが、
アップできなかった。
仕方ないので、出来るだけ変色しないように作った画像が、これである。
　　カラーコード表

16進データをコピペしたい方は、こちらを見ていただきたい。
これは、HTMLだけで書いてあるから、色の再現性は100%である。

実際に使うときは、フォントタグの中の、color= の値として、
色見本の右隣のデータを指定すれば、その色で、文字を染めることが出来る。
例：　バカネコ
　　　　　　　　　　　↓
バカネコ
ただし、「"」や「#」を書き忘れないように。

【ポイント】
１．字の色を変えるには、フォントタグを使う。
２．色の指定は、英語名の他、16進数が使える。
３．試すのが面倒なら、上の表からコードを取って、color= に指定する。
４．fontタグ以外の、color 指定にも使える。

【参考資料】
「色っぽい？」
「続・色っぽい？」
バカネコ講座

第４章　　「にゃんタグ」

みなさん、HTMLにはかなりアタマを悩ませていらっしゃるようだ。
HTMLオンチという言葉は初めて聞いたが、なるほど、言い得て妙だ。
ふむ。　こんなに反響があるとは意外だった。

筆者の友人にも、ホームページをいじる初心者がいるが、
「HTMLには泣かされる」と言っていた。

易しいやり方なのか、難しい手口なのかさえ区別がつかないから、
なんだか、見当違いの情報をネットで探し出してくる。
しかも、難解な方法を。
３日も、そんなことをやっていたというから、気の毒な話だ。

さて、HTMLオンチ用新兵器のテストサンプルが、やっと完成。
テストサンプルだから、色なんて赤と青だけ、文字は大小だけ、詳細モードは省略。
環境との相性と、操作感覚が確認できれば、いいのだから、超手抜き。

サンプルをダウンロードできるページを用意し、ついでに説明を載せた。
というか、説明ページに、ダウンロードボタンをくっつけただけだ（笑）
なんせ、手抜き用ツールなので、ページも手抜きである。

だが、もともと、説明の必要な道具ではない。
カナヅチの使い方を尋ねる人がいないのと同じである。

カナヅチは、叩いてみればよい。
こいつは、クリックしてみればよい。
簡単に実感がつかめる。

とりあえず、さわってみたい方は、バカネコ村に行って、
メニューから「同　説明＆ダウンロード」をクリックされたい。
出てきた説明ページの中ほどに、ダウンロードボタンがある。

ダウンロード終了後、解凍・起動が出来たら、あとはクリックあるのみ。
ぷちぷちと、好きなだけイジリ倒していただきたい。
クリックごとに、どのように変化してゆくのか、目で確認できる。

ただ、自動カラーコード表とはいうものの、色は２色しかない。
もともと動作確認用の単純仕様なので、予めご了承のほどを。
少なくとも、自分のパソコンで使えるかどうかは、無料で調べられる。

ここ数日、カラフルな文字で書いていたが、あれはサンプル版ではなく、
フル装備のものを使った。　さしづめ、実地演習といったところか。

そんなこんなで、バタバタしたが、要望が多かったので、
「にゃんタグ」と名付けて、楽天フリマで公開した。

ワンクリックで文字色変更。　リンクの色まで変えられる！
ブログの魔法の色鉛筆