閲覧時にスタイル変更しよう

質問や感想は掲示板にお願いします。

2002/4/9 - ルビについて

文章中にルビがふってあると便利なことが多いです。現在のIEではルビがサポートされていますが、ルビをふった行だけ行間が広がってしまい、かなり見栄えが悪くなります。

そもそもIE以外のブラウザではサポートされていないようです。

スタイルシートを使えばなんとかなるのかと、試行錯誤したこともあるのですが、だめでした。

ところでルビの目的は何かというと、大抵の場合、難しい漢字にふりがなをふることです。人の名前などは本来の漢字の読みを無視したものもあるので、ルビがあると助かります。つまり、よみが分かればよいのであれば、 ACRONYMタグで代用すればよいような気がします。

使い方は、 <acronym title="かんじ">漢字</acronym>

ブラウザ上で漢字の上にカーソルを置くとふりがなが表示されます。

2002/4/1 remote script sample source code

remote scriptingのサンプルソースを載せわすれていましたので改めて掲載しておきます。このページの一番下です。

2002/2/13 ブラウザの横幅に合わせてフォントサイズを変更する

そういえばそんな機能もあったなあということで、ちょっと思い出したのでサンプルをアップしておきます。

このページについて

ホームページビルダーなどのホームページ作成ソフトでは、ホームページの作成者が自分の作ったコンテンツに対してスタイルを自由に選ぶことができるようになっている。一方インターネット上でそのコンテンツの閲覧者がスタイルを自由に選ぶことができないのはどうにもおかしい。これからのネットサーフィンはコンテンツ閲覧者が自分好みの色で、文字種類、サイズ、行間隔で、アクセスできるべきだ。

インターネットエクスプローラでは、ユーザー補助機能として、ある程度閲覧者側でコンテンツの見栄えをコントロールできるが、まだまだ不十分だ。

まずフォント名。通常のネットサーフィン時はMSPGothicで問題ないのだが、小説などを読むときはHG系のフォントでフォントスムージングのかかった文字で読みたいところだ。インターネットエクスプローラでは、フォントの切り替えは簡単ではない。

次に文字のサイズ。大、中、小と変えてみても、私好みの大きさ（１１ポイント）にはならない。また、HG系のフォントではスムージング（アンチエリアス）される文字のサイズがフォントによってまちまちでありサイズは自由に変更したいところだ。

そして行間隔。これもフォントによって、あるいは文字サイズによって微妙にいいポイントが違ってくるのできめ細かく制御したい。

ところが現実には閲覧者が制御できることはほとんどなく、製作者の提供してくれるものをただ受け入れるしかないのだ。

ホームページ作成ソフトには、「テーマ」というものがあったと思うが、これは、予めそのテーマに沿ったスタイルが定義されており、コンテンツ製作者が最終的にテーマを選び適用するのだ。閲覧者であるわれわれもこのテーマを閲覧時に設定できたとしたら、すばらしいではないか。

是非マイクロソフト社には、このスタイル変更のためのツールを用意してほしいものだ。希望としては、お気に入りや検索などのように、ボタンを押すと左にウインドウが開き、その中で設定できれば申し分ない。

しかし、無いものはしょうがない。では作ってみようかということでいくつかのサンプルを作ってみた。このページの概要はだいたいそういうことだ。

2002/1/9 - IEのフォントサイズ

私はＩＥのフォントサイズがどうにも気に入りません。

普段私はフォントサイズを「中」にして使っていますが、これときに表示されるサイズは私にとって大きすぎるのです。で、「小」にすると小さすぎるのです。

そこでスタイルシートの登場となるわけですが、例えば11ポイントなどの絶対指定をしてしまうと、閲覧者がそのサイズを変更するのが大変になりますから、WEBページ作成者は躊躇してしまうわけです。

NetScapeでは簡単にフォントサイズを細かく変更できるそうですが、 IEでもそうなってほしいものです。

前置きが長くなりましたが、フォントサイズの相対指定で、おおよそ 11ポイントを実現する方法を見つけました。以下サンプルhtmlコードです。

＜pre style="font-size:1em;"＞＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"＞＜html＞＜style type="text/css"＞＜!-- html {font-size:small} body {font-size:110%} --＞＜/style＞＜body＞「中」のサイズでだいたい11pt。サイズ変更もできる！＜/body＞＜/html＞

2001/10/19 - IEメニュー拡張なるものを知りました。

これまで、フレームやiframeなどで挑戦してきましたが、セキュリティにひっかかり、思い通りにcssの変更ができませんでした。最近ではhtml applicationで試行錯誤していたのですが、偶然 IEメニュー拡張を知りました。

これを使えば、javascriptを使ってIEを拡張できるのです。いろいろと制約はあるのですが、いわば一種の常駐スクリプトのように動作してくれるのです。

サンプルはcsschanger.html[右クリック保存（後ろのほうにゴミつき）:]です。

このサンプルは http://www.uryusoft.com/のゆなtoysに入っているゆなスタイルを多少変更したものです。使い方などもゆなtoysに準じています。面倒なので使い方の説明などは全て省略します。

ナビゲーションバーを追加

frm.htmlを更新。link rel=contents,start,prev,next をieで実感できます。スクリプトは作ってありますが、表示すべきコンテンツが未完成なのでサンプルではピンとこないかもしれません。

2001/10/3- CSSを動的に変更できるサンプルを作りました。

frm.htmlです。これは、フレームを使用して画面の上部に各種のスタイルシートを変更できるツールを貼り付けたものです。

このサンプルは、主ドキュメント2.htmlとＣＳＳコントローラであるcssCtrl.html そしてフレームソースとしてのfrm.htmlからなります。ここでやっている主なことは、ページがロードされたときに、htmlの書き換えをしています。具体的には htmlソースに４つのスタイルタグを追加しています。この４つのスタイルはＣＳＳコントローラから適用の有無を設定できます。そして縦書き用にhtml全体をdivタグで囲みます。

このサンプルではページ閲覧者がフォントサイズや行間隔、フォント名を自由に変更することができます。

このサンプルのミソは、主ドキュメントである2.htmlには、スタイル設定の全くない「純粋html」であることです。この純粋なhtmlに対してスタイルを動的に変更しているところに注目してください。

このやり方は、真に構造と見栄えを分離しているように思いますがどうでしょうか。

このサンプルを作ってみて、htmlは内部にスタイルを一切持つべきではないと思うようになりました。

もうひとつ思ったことは、このＣＳＳの変更はブラウザがサポートするのが本当ではないかということ。

縦書き表示サンプル

縦書き表示サンプルはf1.htmlです。使用するキーはPageUp,PageDown,Home,Endキーでx,b,f,sキーでフォントなどが変わったと思いますが、よく思い出せません。詳しくは javascriptのソースを見てください。 pageup,downで横スクルールするのがミソ。

csschanger.html[右クリックで保存]（バナーのゴミがついてます）
f1.html
index.html
normal.css
tate.css
tate.js
vwrite.css
vwrite.js
frm.html
cssCtrl.html
2.html

2002/1/12 - 私の他サイトリンク

domaindlx.com/exu/

domainDLXはMS-Accessが使える無料ホームページです。

ここでは、ASPを使い、Web上から新規にデータベースを作ったり、テーブル編集をするためのサンプルを作って公開しています。

SQL Manager DEMOで実際にテーブルの作成、データ登録、変更、削除、問い合わせが、SQLを知っていれば可能です。

テキストファイルのプログラムソースをダウンロードできます。ただ、開発途中で忙しくなってしまい、中途半端な状態での公開です。

もうかなり前に作ったものなので、よく思い出せないのと、今は .NETの時代になってしまったので、完成させる気はありません。

しかし、興味のある人は多少参考になるロジックもあるのではないかと思います。

根性と時間があれば、MS-Access風のテーブルデザインユーザーインターフェイスもASPで作ることができます。

Remote Scripting Sample Page

brinksterに開設したリモートスクリプトテストページです。

brinkster.comもMS-Accessが使える無料ホームページです。さらに広告なしというのもうれしいところです。

startボタンを押すと、時計が動き出します。この時計はアメリカにあるサーバーが表示しているのです。stopを押すと時計が止まります。

brinksterは転送制限が厳しいのでstartしたままほったらかしにしないでくださいね。といっても大したトラフィックではないですが

計算はボックスに数字をいれると足し算されて答えがでます。答えがでるまで１秒ほどかかります。なぜならアメリカで計算しているからです。

リモートスクリプトはだいたいそういうものです。

早い話、自前でチャットが作れます。この画面初めはチャットを作るつもりで、でかいテキストボックスを用意したのですが、やる気が失せて、そのままになっているのです。

うまく作ればnetscapeでも動くそうです。私のサンプルはIE専用ですが。

remote scriptingに興味のあるひとは、 Windows Scriptサイトにダウンロードと開設があります。

ただ、リモートスクリプトも以前からありましたが、メジャーになる気配さへありません。

srvtime.asp
<%@ LANGUAGE=VBSCRIPT %>
<%
class clstimer
	public function getsrvdate()
	getsrvdate = now()
	end function
public function comp(a,b)
  comp = cint(a) + cint(b)
end function
end class
set public_description = new clstimer
RSDispatch %>

srvtime.html























計算:
＋
＝









にぎわいネットHOME 　タイカレー本場の味をご家庭で！　　料亭の味　伊勢醤油
<script language="javascript" src="servlet/jsbanner-sid-2040413-pid-870221047.js">
</script>
<noscript></noscript>



 
	TextAD.net :

にぎわいネットHOME 　タイカレー本場の味をご家庭で！　　料亭の味　伊勢醤油 <script language="javascript" src="servlet/jsbanner-sid-2040413-pid-870221047.js"> </script> <noscript></noscript>

TextAD.net :