日記帳だ! with Tux on Libserver

来年になれば、年賀状を見てくる人もいるんだろうなとか。
まぁ確かにそれはいいんだが、このページは極端に読みにくいからねぇ。
そうなると定着しないかなという気もしますけどね。
それはそうと、今日は大晦日だと。
今年はさほど忙しくもなかったが、来年は大変だろうなとか思わないこともない。

---

どうも最近は年賀状で年始の挨拶をするでなしに、
これを電子メールでする人が増えているとか。
僕は特に挨拶をしておかないといけない人には年賀状を送ってきたけどね。
まぁそれはそうと電子メールですか。
トラフィックが集中するから困ると携帯電話会社は言ってるけどね。
まぁここではコンピュータから送ることを考えよう。
ただ大量に送るとなるとちょっとめんどくさい。
これについては2つの考えがあるな。
Bccで大量送信する方法。別にこれで通常はOKなのだが、Toがインチキな宛先になるのが欠点。
Bccだけで送るのは変だから、普通はToに自分のメールアドレスを入れたりするけどね。
BccはBlind Carbon Copyの略で、Ccのうちヘッダーに出てこないもののこと。
別にそれでもいいんだが、受け取った方はちょっと気分が悪い。
そもそも電子メールの送り先にはTo、Cc、Bccの3つがあって、
Toは本来の宛先。だから普段はここばっかり使うと。
Ccは参考に送付しておく宛先。その中で特にヘッダーに書かずに送付するのがBcc。
ToとCcはヘッダーに記載されるので、受けとった人がどこに送ったかわかる。
けどBccはヘッダーに記載されないので、宛先がばれることがないと。
ToとかCcで複数に送信すると、他に送信した人のメールアドレスがばれてしまうと。
大量に送信するメールですが、このメールは送り先全員がToに書くに値するものだから、
気分が悪いと言うことです。とはいえ実用的な方法なのでよく使われますね。
けど、1通1通Toの部分だけ書き換えたメールを作ってやればいいんじゃないかと。
そりゃ当然ですが、そんなこともできます。

---

実は結構苦労したのですが、こんなPerlスクリプトで送れそうです。

use strict;
use warnings;
use utf8;
use Encode;
use Mail::Sendmail;
use Time::Local;
my @list=qw{
  foo@example.com
  bar@example.com
};
my $body=<<'EOF';
あけましておめでとうございます。
今年もよろしくお願いします。
EOF
my %params=(
  'Smtp'        => 'smtp.example.com',
  'Content-Type'=> 'text/plain; charset=ISO-2022-JP',
  'From'        => encode('MIME-Header-ISO_2022_JP','Hidemaro '),
  'Subject'     => encode('MIME-Header-ISO_2022_JP','あけましておめでとうございます'),
  'Date'        => Mail::Sendmail::time_to_date( timelocal(0,0,0,1,1-1,2009) ),
  'Message'     => encode('iso-2022-jp',$body),
);
for my $to(@list){
  sendmail(%params , 'to'=>$to) or die $Mail::Sendmail::error; 
  print "Send : $to\n";
}

useだらけですね。まぁ初め3つは特殊なプラグマだけどね。
use utf8;してるからこれはUTF-8で書いてね。他のエンコーディングでもuse encoding ‘euc-jp’;とかすればいいけど。
このうちMail::Sendmailは特に導入する必要があります。

perl -MCPAN -e "install Mail::Sendmail"

このコマンド一発でインストールできます。
かなり怪しい動作をしてるように見えたけど、最終的には入りました。
今回のポイントはMail::Sendmailですね。
sendmail関数に内容を書いたハッシュを渡してあげればいいわけです。
さて、宛先リストの@listはqw{ }で、本文の$bodyはヒアドキュメントで作ってます。
それでsendmail関数に渡すハッシュを用意します。To以外はここで埋めてしまおうと言うことです。
Smtpにはメールサーバーを書きますよと。
From・Subject、ToにASCII以外を含む場合は、エンコードしないといけない。
これなんだが、EncodeのエンコーディングにMIME-Header-ISO_2022_JPってやつがあるから、
これを使えばいいそうだ。今回はFromはASCIIだけだが、説明のために使ってる。
Dateだが、指定しなければ現在時刻になるが、ここは1月1日0時0分とするためにやってる。
まずUNIXTIMEを用意しないといけない。これはTime::Localのtimelocalを使うと出せる。
引数は、秒、分、時、日、月-1、年となってる。月-1であるところに注意。
これをMail::Sendmail::time_to_dateでメール用の表記に変えてもらう。
Messageは日本で主流のISO-2022-JPにエンコーディングする。
実はContent-Typeできっちり指定してあります。
さて、各人に送るわけだが、%paramにtoだけ足せばいいと。
こういう関数は引数にハッシュを取ると言っても実は配列なんですよね。
だからこういう風な表記も普通に出来ると。
エラーは$Mail::Sendmail::error、結果のログは$Mail::Sendmail::logに入る。

---

まぁこれを使えばうまく送れるんじゃないかなと。
このMail::Sendmailというモジュールは結構多機能みたいです。
実はPerlでメールを送る試みは初めてだったりする。
今まではPHPから送ることはあっても、Perlからは送らなかったしね。
Linuxから送るのなら、ひたすらパイプでmailコマンドに渡せばいいんだが、
Windowsではこうも行かないので、正攻法で書いてみた。
この方法ならば、何時に送っても1月1日の0時0分に送れるので、
トラフィックも安定してきましたなぁという時間に送ってもいいと思いますよ。
年始のご挨拶にご活用ください。

お正月が近づくとお餅をつくのは毎年のことですね。
まぁお餅をつくと言っても、実際は機械でこねてるわけだけどね。
つきたてのお餅はおいしいですね。

---

久しぶりにSimCity 4でいろいろ試してた。
NAMという交通関係の拡張プラグインを使って楽しい都市計画をしたいと。
以前GLRで遊んでたのですが、これがすごく維持費高くて経営難に。
GLRというのは路面電車ですが、まぁ維持費高いし駅も高い。
きれいなんだけどね。けど、バグばっかりねぇ。
しかし何のためにGLRを試したのかというと、線路をひくスペースをうまく確保したかったから。
GLRは、大通と高架鉄道を同一平面に統合したものになってるようです。

---

SimCityでは渋滞対策というのが重要なテーマだったりします。
SimCity 3000からかな。
まず一番大切なのはバスの普及ですね。そのためにバス停をたくさん設置します。
シムは歩くのが大嫌いなので、二街区先の商店に通勤するのでさえ歩きません。
放っておくと車で通うのですが、集合住宅とかだと一軒で何百単位で車が出てきます。
SimCity 4では道路と街路という二種類の道路があるのだが、
街路は団地の区画街路、道路は一般的な道路です。
街路のキャパシティは低すぎるので、道路に変更してしまうことは多いのですが、
そもそも何百単位で車が出てくるなら、道路でも耐えられませんからね。
確かにそれ以上の大通などを使えば解決できるかも知れないけど、
区画街路まで大通を使う必要が出てくる。正直無理。
というわけでバスを利用していただこうという話になるわけです。
一街区に1つバス停と公園を設置するというスタイルがいいのかな。
ただそれだけでは無理なんですよ。バスって遅いから。
そこで安定して高速な鉄道と組み合わせるわけです。
ただ、鉄道の線路を引くスペースの確保が難しい。
踏切は渋滞の原因となるし、まぁ配置には悩むんですよね。
あと、地下鉄と高架鉄道があるけど、高架鉄道は維持費が高いだけでメリットは少なすぎる。
地下鉄は建設費が高すぎる。あと駅がバス停程度の効果しかないので、維持費の高い駅をたくさん設置しないといけない。
まぁバス停併設すればそれなりに使えるとは思うけど…
普通鉄道は維持費安い、建設費安い、駅安い、貨物輸送もできる、
というわけで非常によいのですが、さっき言った通り配置が…

---

その配置の難しさを多少解消してくれそうなものがNAMにはありました。
道路と普通鉄道の二重交通ですね。
道路の下を普通鉄道が通るというものなのですが、
あくまでも普通鉄道なので維持費安いし、貨物輸送もできる。
けど道路と一体になってるので配置も簡単。駅の設置も沿線に駅を配置するだけ。
ただNAMというのはユーザーが作ったツールなのですが、
線路を配置するにしても、1マスずつ配置しないといけないんですね。
だからドラッグ・アンド・ドロップで配置できる標準の交通と比べると扱いはかなり難しい。
以前使ってたGLRはこれがとにかくひどかった。それに比べれば扱いは楽だけど…うーん。

---

せっかくなのでNAMの導入から書いておこう。
Simtropolisで公開されてるのでダウンロードすればいい。
NetworkAddon (April 2008) For PCよりダウンロード。
ユーザー登録してログインが必要ですよ。
それでインストールすれば終わり。
すると鉄道のところにUnderground Railとして追加されているはず。
それでTabで切替ながら部品を配置していけばいいわけです。
パイプみたいに見えるのが線路の方向ですね。
部品の回転はHomeキーとEndキーでできますね。
ただ道路との交差部分だけ厄介。ここはあらかじめ線路と道路を交差させて踏切を作ってから、
それにかぶせるように部品を配置する必要がある。
まぁめんどくさいのですが、きちんと配置できればそこに線路があるんです。
NAM – Network Addon Mod (04/2008) (SimCity4 – BAT & MOD & LOT of the World)のUnderground Railの項目を参考にどうぞ。
沿線には普通鉄道の駅を置けばOKです。
別に普通の駅でもいいんですが、なんかクールな駅はないんかというのはあるわな。
SimCity4 BAT for ブリピザの地下ホーム用鉄道駅を導入するとCOOLですね。
ファイルはMy DocumentsのSimCity 4\Plugins\に適当なフォルダを作ってdatファイルを投げ込めばOK。
なんかスマートですし、駐車場の機能がない代わりバス停の機能がありますからね。
どうせ車を使うやつは電車なんか乗らないよ。
というわけでバスとの乗り換えがスマートにできるこの駅は楽しいですね。
あと貨物駅も沿線に配置すれば使ってくれますよ。
工場が沿線にあれば、直接貨物を乗せてくれます。
というわけで工業団地への通勤と、貨物の輸出、どちらにも便利ですよと。
あとバス停ですが、道路と一体化したバス停もあるので、これも便利ですね。
これもSimtropolisに登録されてるやつをダウンロードするといいかなと。
Diagonal Intersection RoadTop SubwayBus Station
ログインが必要ですね。

---

まぁ結構愉快なものがあるものです。
こんなものを使って都市をつくるというのはどうなのだというのはありますが、
交通についていろんな選択肢がありそうなSimCity 4も、やってみると結構困るものです。
それを補完するツールだということです。
こうやってきれいな大都市を作れればいいんじゃないかなと思いますよ。
まぁ今の時点では大都市言うほど大きくないけどね。

部でTeX使って本作るよということがある。
まぁTeXの整形は編集者がやってくれるのですが、
いちいち指示を日本語で書くのはめんどくさいし、テキスト見てても何かいてるかわからないし、
何を言いたいかわかる程度にはTeXで書いて、書いたのを見ようかなと思った。

---

TeXですが、Windowsで環境を整えるのは至難の業。
というわけで便利なインストーラーを使うことにした。
作ったもの，書いたもの，その他 (あべのりのページ)にある、TeXインストーラ3を使います。
全自動です。まぁ別のインストーラが立ち上がる分は多少クリックが必要だが。
まぁそれにしても楽なもんです。

---

僕はめんどくさいので、何でもかんでもTeraPadで書きますよ。
というわけでTeraPadで試しにこんなのを書いてみた。

\documentclass{jarticle}
\begin{document}
\section{いらっしゃい}
\subsection{ようこそ}
\subsubsection{どうぞどうぞ}
\TeX のテストですよ。特殊文字も\verb@$sum+=$_ for 1..100;@
\footnote{Perlで$ \displaystyle \sum^{100}_{i=1} i $ を求めるプログラムですね。}
のようにすれば安心安心。

さようなら。
\end{document}

実際にこんなものでテストしたわけじゃないけどね。
まぁしかしやりたいことはこういうことだということです。
こういう章で、ここはこのまま出力してほしい、ここはこういう注釈、ここにこういう数式。
こういうことを書きたいと。
そうすれば編集者も、考慮してくれるんじゃないかなと思ってるけどね。
日本語で書くとめんどくさいからねー。
まぁこのままでいけるわけじゃないので、そういう面では苦労をかけるなぁと思いますけどね。
そして自分が読むためには適当な環境設定をしないといけない、
というわけでよく使われてそうなjarticleという環境を使ってると。
実際の本はそれ用の環境を作ってあるらしい。

---

さて、コンパイルだが、foo.texのコンパイルは、platex fooとやるのね。
久しぶりにやったら見事に忘れてて、困った。
そしてdvioutで見てみる。うまいことできてますね。
これを見ながら編集すればやる気も出てきていいですね。
まぁうまいことできてますね。

---

僕はTeXは普段使わないと。
だからこうやってインストールしたんだけどね。
僕が覚えてるTeXは数式表現だけ、それ以外はリファレンス見ながらやってます。
OpenOffice.org Mathの数式編集はTeXの表現をもとに作られているので、
TeXでの書き方との違いを知って使えば、うまいこといきます。
あと、TeXの表現で書くと言えば、MediaWikiの編集か。
まぁ文字についてはわかりにくいからリファレンス見るけど、
基本的な数式をすらすら書けないと不便ですからね。だから覚えてるの。
まぁ数式はTeXが共通語なのね。なぜか知らないけど。

昨日のHTMLの話の続きみたいなもの。
さて、下のを見て欲しい。

+--------------------------------------------------------------------------------------------------------+
|abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ|
+--------------------------------------------------------------------------------------------------------+

まぁあんまりこんなものは見せたくないけどね。
横幅が足りないと、pre要素の中身が枠からはみ出る。
IE 6では枠の大きさを大きくしてしまって、サイドバーがくずれるかな。
中身が収まらなくても枠が大きくならないのがCSSでの標準です。
overflow:visibleが標準ですからね。枠の大きさを広げずはみだして表示と。
なのでCSSの標準に従うブラウザでは、はみ出た分が見えません。
なんで折り返されないのというのはpre要素の意味にかかわることだからですね。

---

pre要素は整形済みテキストを表す要素です。
整形済みテキストの代表例はASCII artでしょうかね。
いや、日本のアスキーアートはHTMLの上で表示するの前提だからちょっと違うけどね。
HTMLの規格では、空白文字はどれもスペースとして取り扱われて、2つ以上連続してても1つにまとめられる。
どういうことかというとこういうことです。→ ←
→←間には多数のスペースがありました。けど1つのスペースにまとめられた。
これでは困る、というので整形済みテキストというものがあるのですね。

→                                                   ←

ほら、たくさんの空白が維持されてるでしょ。
このBlogシステムでは無理だけど、改行も維持されます。
このような性質から、ソースコードの記述によく使いますね。

---

ところがその性質上、折り返しとかしちゃいけないと。そう思うわけだ。
しかしCSSでは指定されたブロックの幅を広げてはいけないと。
さてどうするか。
1つはブラウザにはみ出ないように折り返していただこうと。
CSS3ではwhite-space: pre-wrap;とすればできるみたいです。
結構なブラウザで使えるので試してたけど確かに使えますね。
けど問題がある。というのはアルファベットでの単語の取り扱い。
これはpreに限った話じゃないけど、preで問題になることが多そうです。
単語の中では折り返さないというのが英語などでの普通の取り扱いだと。
もし折り返すならハイフンを加えたりして、単語終わってないよとしますよね。
日本語では、行頭に句読点やらが出てこなければどう折り返してもOKですね。
で、これはソースコードでも例外でなく、ブラウザが単語だと判断すればその中で折り返さないと。
hidemaro.helloworld.helloworld.helloworld.helloworld.helloworld.helloworldclass.helloworld(null,null,null);
も単語とみなされます。
だからwhite-space: pre-wrap;ではちょっと困るなぁと…
というわけでもう1つの解決法、overflow:scrollとかoverflow:autoとすること。
scrollははみ出た場合もスクロールして見れるようにするというものですが、
常にスクロールバーが付くのでかなりうっとうしいです。
そこでautoと設定することが多いですね。autoはブラウザ依存ということです。
が、これは必要に応じてスクロールバー表示としているブラウザばっかりです。
というわけでこれを採用しました。

---

さて、これで長いソースコードも見れないことはないですね。
今まであんまり気にしてこなかったのですが、
1024×768の画面ですらはみ出るという実情を考えると、
どうにかしないとなと思ってやってみました。
今までより悪くはならないと思うのだけど、どっちにしても見にくいことには違いない。
そんな時は手間になりますが、内容を全部テキストエディタにコピペして見るとか、
そういう風にしていただくと快適だと思います。
どんな画面幅にも対応できますようにと言ったけど、pre要素には困ったもんです。

Webページ作るのに何が大切なのと言われると、
それは多分HTMLをきれいに作ることでしょうねぇ。
まぁXHTMLでWebページを作る人とかもいるだろうけど。
どちらにせよ大切なのはこれのつくりです。

---

非常に有名なブラウザにLynxというのがあります。
このブラウザはテキストでしか表示できません。
まぁ実際使うにはちょっと操作がややこしいのだが、一回見ておくといい。
lynxはちょっと…という人でもテキストばっかり見てみればいいじゃないの。
Mozilla Firefox使ってる人ならWeb Developerを使えばある程度体験できます。
画像を無効化する>全ての画像、CSS>CSSを無効にする>すべてのCSS、無効化>JavaScriptを無効にする>全てのJavaScript
として見ましょう、するといろいろ見えてきます。
これでみて前後のつながりがおかしくなってないか見ましょう。
一体それは何のチェックだという話ですが、
CSSの絶対座標指定とかでブロックを配置することができるので、
それを使うと一見うまく見えるけど、実際のHTMLの構成はぐちゃぐちゃだと。
そういうのは危険ですからね。絶対座標指定はトリッキーなのでよく勉強して使ってください。
あと、読みにくいなぁと思ったらHTMLの構成を見直すといいですね。
例えばBlogの本文より前に延々とサイドバーが書かれているとか。
僕はサイドバーは後ろに持ってきた方がいいと思うよ。CSSのfloat要素でなんとかなること多いし。
h1・h2・h3…と整然と見出しが並んでますか。なかなか見ててもわからないけどね。
なので、枠表示>h要素を枠で囲うとしましょう。
h1からh6の順に赤・黄緑・青・紫・橙・茶の色で囲まれるので確認するといいですね。
この見出し要素というのは大切な要素です。
見出し要素だけ抜き出して利用すると便利ですから。
例えば音声ブラウザとかね。残念ながら音声ブラウザ使ったことないから知らんけど。

---

HTMLを極めるのが基本です。
さっきのチェックでHTMLだけでよくできているページを作るのがまず大切。
次に大切なのはHTMLの文法ですね。The W3C Markup Validation Serviceを使うといいかな。
まぁこれでHTMLはOKだと思います。
ちなみにこのページチェックすると空ul要素でError出ますね。
どうにかしたいのですが、テンプレートの限界なので。けどあんまり問題ないはず。

---

さて、これにCSSでいろいろやっていくわけですが…
これが難しい。どうすればうまいこと見えるかということです。
このページの設計するとき、どんなフォントサイズでも、どんな画面幅でも快適に見えるようにしよう、
と考えたわけです。まぁ結構うまいこといってます。
まずフォントサイズの方は、CSSでのサイズ指定の単位に専らemを使いました。
emは親ブロックのフォントサイズ(bodyでは標準のフォントのサイズ)を1emとする単位。
この単位がなぜいいのかというと、標準のフォントサイズと連動して変化できるから。
活用できてるページとできてないページを見分けるのは簡単かな。
Mozilla Firefoxでは表示>ズーム>文字サイズだけ変更にして拡大・縮小してみよう。
極端なサイズでなければうまくいくといいですね。このページはOKかな。
このページは全体的に字が小さめになってるので目が痛い人がいるかもしれない。
そういう人はどうぞ文字サイズを上げてください。
そのためにはemでいろいろなものの寸法を定める必要があるわけです。
ただ、こういうことの障害になるのは、画像なんですよね。
画像の寸法をemで定めるのは厳しいものがあるよねぇ…
だから僕は画像をあんまり使わない。
そういうことを一般に言うと、結構怒られるのよね。画像使わんでどうするねんと。
その辺は僕もいろいろ考えてますけど、なかなか。
それともう1つ言ったのが、どんな画面幅でも快適に見えるようにということ。
普通こういうのは狭い方に注目するけど、広い方にも注目しよう。
僕の画面は1600×1200という解像度でして、
幅をもてあますページも多いわけです。
こちらは幅をパーセント指定するという方法はありますよね。
けどこれも画像使うと問題ありますよね。うーん…

---

さて、ちょっとHTMLを見直しました。
そんなに変わってないですけど、以前かなり不気味な構造になってたので。
それで改めて表示チェックをしました。
基本にしてたブラウザはMozilla Firefox 3.0ですね。
もう2.0から3.0に移った感じはしますよね。だからこれでいいよね。
Operaは現在最新の9.6でチェックしました。
まぁこの2つでのチェックは簡単にできたんですけどねー。
次にInternet Explorer 8のBetaでチェック。これはうまくいきますね。
そして互換モードでIE7での表示を試してみたら、これでもまぁOK。
あと有名なブラウザでは試しておきたいよね。
まずSafari 3.2、まぁこれでもOKですね。
あとLunascape、これはIEエンジン以外のGeckoエンジン。Lunascape 4でもOK。
ついでにLunascape 5のBetaでも試した。
これはGeckoとWebKitにも対応。一体なんだこれ。
予想通りOK。
というわけできれいなHTMLをお楽しみください。