サーバーのセキュリティー

先日、とうとう私のサーバーがクラッキング被害を受けた。
当ウェブマイスターは大丈夫だったが、他３サイトに侵入を許してしまった。
その３サイト、同じパスワードをつかっていたため、３サイトにも及ぶ被害となった。

被害内容は、前年末に流行したMicrosoft XML コアサービスの脆弱性をついたもので、ページを表示させるだけで強制的にダウンロードが開始され、実行されるというもの。
去年１１月に修正パッチがリリース済みなので、被害は無しか軽微であった。

あらゆるサーバーログを調べ、犯人の大まかな行動や時間や環境を抜き出す事に成功。
サーバーのログを見ると、sshへの侵入が記録されている。suコマンドで他２ユーザーへ侵入したのも記録されていた。
他ユーザーへは侵入していなくて一安心。adminやrootはもちろん無事。
侵入したユーザーのsshコマンドログだけは、しっかり削除されていたが。

ここで教訓。
パスワードは全て違うものにし、被害を最小限に抑える事。mySQLのユーザーも同様。
sshにはアクセス制限を必ず行うこと。この場合、adminとroot以外を禁止することが最低限必要であった。
また、フォルダのアクセス制限もしっかり行い、、ユーザーのルートより上の階層へはアクセスできないように設定。
adminとrootだけは、もちろん除外。

破壊行為が目的でなくて助かった。

次にやっかいなのが、googleの危険サイトリスト入りになったことだった。
検索結果順序には影響ない（一位表示のまま）が、危険を知らせる警告文が表示され、リンクもされない常態となった。
これを正常にしてもらうには、googleのhelpによると、審査の申し込みをする必要があるとなっていた。
リンク先は、英語のサイト。申し込むフォームを見つけるだけでも大変だった。
英語が苦手な日本人なら、無理だと思う・・・・。
そのサイトに、審査をフォームで申し込むよう書いてあっても、そこにはリンクは無いという不親切さ。
やっとのことで、審査申し込みフォームを見つけ、いざ申し込み。というのが昨日。
申し込みは英文で状況を記入するのだが、いくつか例文が掲載されており、そのままコピペして送った。

手順が分からない人のために、手順を書いておきます。
１．最下行にあるボックスに、自分のサイトのアドレスを記入して送信。（http://を覗くドメインのみ）
２．ブラックリスト入りしていれば、そのボックスの下に情報が表示される。
自分のサイトアドレスをクリック。
３．これで表示されているのが、審査申し込みフォーム。
名前、メアド、サイトオーナーチェック、理由記述、補足事項記述、チェック、送信となる。
理由記述は、例文を翻訳機にかけて、該当する内容をコピペでよい。
今現在は、一行目の「サイトを正常化した」という内容のやつをコピペで良いだろう。
ちなみに他は、「おかしなところは無い。無害だ。」といった内容だ。
補足事項は何も書かなくて良い。
送信すると、申し込みを受理したという英文メールが送られてくる。
あとは、審査をまつだけだ。順番待ちとなり、自分の審査の番がくるのはいつになることやら。
審査結果は、メールで送られてくる。もちろん英語。

本日、何故かgoogleの検索結果から警告が削除されていた。
まだ審査が終っていないのに、何故なのだろう。
おそらく、googlebotが自動で認識したのだろう。
それじゃ、審査の意味は・・・・・。
どうせなら、StopBadware.orgからも削除してほしい。なんとも中途半端なシステムにも見える。

全ての作業を終えるのに丸一日以上かかった。ほとんどがサーバーのログ内容をあらゆる角度で検索だったが。
何はともあれ、もう二度とごめんである。

ちなみに犯人はおそらく日本に住む中国人か、日本に居る仲介人を介した中国人。様々なデータからそう判断できた。
ウイルスをばらまいているサーバーは国内ＩＰだが、ＯＳが中国語Windows。
アタッカーのＩＰは国内（ODN）だが、ＰＣのＯＳは英語（アメリカ）。

自サーバーの人は、必ず通る道（クラックされる運命）とも言われている。
そして私も例外ではなかった。

相対ＵＲＬと絶対ＵＲＬ

相対リンクは、ドメインを含めないアドレスで、絶対ＵＲＬとはhttpから始まるフルＵＲＬ。

遥か昔から議論されていた相対ＵＲＬと絶対ＵＲＬとＳＥＯの関係。
最近もまだよく言われている。
理由はなんであれ、絶対ＵＲＬが良いと言われていた。噂はいくつかある。
・外部リンクとして認識されるため、ページの評価があがるなど。
・インデックスされやすいなど。

そして、googleが正式にこれについて書いているのはご存知だろうか。
http://www.google.co.jp/support/webmasters/bin/answer.py?answer=35156&query=%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0&topic=0&type=f

『可能な場合は、相対リンクではなく、絶対リンクを使用します』

インデックスされやすいという噂はこれによりgoogleが認めた真実である。
正確には、相対リンクだとクローラーがたどれなくてインデックスされないことがあるということになる。

クローラーが相対リンクを発見したとき、これを絶対リンクへ変換してからアクセスする。
この変換に失敗すると、存在しないＵＲＬができ、リンクをたどれなくてインデックスされない。
ということなのだろう。（ここまで詳細に書かれていないので憶測ではある）

ユーザビリティ

ユーザビリティとは使いやすさのこと。使いやすいサイトとはどんなのだろう。
フレーム要素とターゲット属性について今更ながら見てみる。

■フレーム要素
タグで構成する要素で、主にメニューとコンテンツを独立させるために使用する。
だがもはや過去の技術となり、今はもうあまり見かけない。
しかし、常にメニューが表示されてて使いやすいという声も少ないが存在する。
個人的には、フレームでメニュー独立は非常に使いにくい。マウスの移動量が劇的に増えるからだ。
また、メニューのスクロールバーを非表示にする最悪のパターンも多く、やはり無い方が個人的には嬉しい。
他にも、ブックマーク問題等複数ページを一度に扱う事から利用者側に問題がいろいろ発生する。
ただ、初心者にはフレームサイトのほうがやさしいのかもしれない。つねにメニューが見れる安心感。
サイト作成も、初心者にはフレームのほうが簡単に作れるのも事実。だが便利性とは無関係でもある。

■リンクのtarget属性
他サイトは別窓で開くのが一般的である。そのためにtarget属性を使う事が一般的に好まれていた。
だが、これを嫌う人ももちろん存在する。
私はよくサボってtarget属性を付け忘れる。するとつけて欲しいという要望がくる。
他のサイトオーナーも同じ状態という話だ。
しかし、targetはブラウザの動作を操作するものであり、同じ窓で開きたくても開けないことから、反発する人も存在する。
その結果、非推奨となり、現時点のXHTML 1.1では抹消されている。
個人的には、なんでもいいレベル。targetある無しにかかわらず、他サイトはミドルクリックで別窓（タブ）表示の癖がついている。クリックする前にリンク先のＵＲＬを確認して判断している。
しかしこれは長年の知識と経験によるもので、初心者は左クリックしか知らないはずだ。
Shift+クリックなんて知らない。知ってるけど面倒だ。右クリックメニューは面倒だ。という声が多いのだろう。
また、targetが嫌いならば、これを無効にする手段は無いわけでは無い。
しかし、ＩＥでは中途半端にこれの無効化を導入してしまった。なんと、ポップアップブロックを高に設定すると、ブロックしてしまう。デフォルトは中なので気にする必要はあまり無いのだが。
そして嫌われたtarget属性にかわり、Javascriptで代用の人もでてきている。
もっとダメじゃん。

ということで、XHTML 1.1の改正版ではtarget属性が復活する予定になっている。
あくまで予定であり、復活する保障は無い。
無いと無いで、「いちいち別窓を開く作業がうざったい」という声がでたのだろう。
「いちいち別窓が開いてうざったい」という声と天秤にかけた結果、あったほうが有益というのが現時点の判断なのだろう。

ちなみに次期ＣＳＳ３では、この機能をさらに拡張してサポートする予定になっている。
ＣＳＳならばクライアント側で簡単に変更できるので、この議論に終止符が打たれるだろう。

デザイナーとユーザーとのギャップ

デザイナー（サイト作成者）と、ユーザー（サイト利用者）とのギャップで最も大きいのがこれだ。

デザイナーは視覚的なデザインに懲りたい。
ユーザーは素早く情報が欲しい。

昔からよく言われていることだが、未だに「デザインに凝らないと人がこない or デザインに凝れば人が来る」と間違った認識をしている人が後を立たない。
一般的には、デザインに凝るほど人が来ない。デザインに凝るほど使いにくく、分かりにくいサイトとなり、訪問者はすぐに去るというのが今や常識である。
（この場合のデザインは、視覚的かっこよさのデザインを指す）

サイトに必要なのは、かっこよさでは無い。情報への素早いアクセスだ。
かっこよく作れば、「かっこよいサイト」という内容でリンクされることもある。
すなわち訪問者は、サイトを見て「かっこいい～～」とデザインだけ見て去る。
それが目的のサイトなら良いのだが、情報や商売がメインなら意味がない。

ではどうデザインするのがベターか。
使いさすさを考えてデザインすれば良い。
１．訪問者は何を見たいのかを知り、それを目立つ場所に設置する。
目立たない所に置いては、たどり着く前に去ってしまう。
２．メニューを分かりやすくする。
日本語でわかりやすいメニューでなければ、意味がわからず去ってしまう。
３．ブックマークできるページにする。
たとえばフラッシュで作ったサイトは、ページをブックマークできない。
Yahoo!やGoogleから人が来ないし、ブックマークができないのは不便な場合もある。
４．表示に時間をかけない。
検索で情報を探している時、すぐにページが表示されなきゃ去って次のサイトへ行ってしまう。

これらを最低限守ってデザインするのが、良いサイトと言える。
商用サイトでは特に重要である。
最近の統計でもやはり、デザインに凝るほど客が少ないという結果がでている。
参考リンク

さらに言うと。基本が出来ている人なら、手抜きサイトほど良サイトになりやすい。視覚的デザインはめんどうだからね。重要な部分だけちゃんと作ってシンプルに終わり。これがよかったりする。
余計な知識が無い素人ほど良いサイトになりやすい。デザインに凝るだけの技術が無ければ、シンプルで良いサイトになりやすい。見た目がダサくてもね。

認識しなければいけないのは、一般訪問者はデザインを見に来たのではないこと。
ちなみに私が個人的に運営するサイトでもっとも人気があるサイトは、デザインを最も手抜きしたサイトだったりする。（結果的に、分かりやすくて使いやすさがダントツとなった）

ただ勘違いしてはならないのは、デザインに凝るのがダメということではない。
デザインの凝り方に問題があるという話である。
正しくデザインに凝れば、好感度アップなどで、さらなるアクセスアップに繋がるだろう。

最後に、究極のシンプルデザインはこのサイトかな？
Google

MySQL入門中の入門

今最もポピュラーなMySQLというデータベースシステムについて、基礎をまとめみてみる。

MySQLは、データベースを扱う言語の一つと思って良い。
すなわち、MySQLには、様々なデータベース形式(ストレージエンジン)が存在する。
中でも重要なのは、『MyISAM』と『InnoDB』の２種類だ。これ以外を使う事は無いに等しい。

■２種類を簡単に説明すると。
・『MyISAM』は、読み込みに特化した形式。大量の同時書き込みが苦手。
ある行を書き込み中は、他の行を書き込みできない。読み込み中も書き込みができない。
・『InnoDB』は、複数行の同時書き込みが可能。書き込みに特化した形式と思えば良い。
ただし、読み込みが遅く、メモリを大量に必要とする。

一般には、小さなサイトや、大量の同時書き込みが発生しないテーブルはMyISAMを使う。
個人サイトレベルはMyISAMと思っても良い。
逆に、大手サイトでは沢山のユーザーが同時に書き込みを行うから、同時書き込みができないMyISAMでは順番待ちでタイムアウトしてしまう。だからInnoDBを使うケースが多い。

■MyISAM
仕組みを分かりやすく説明すると
データベース　＝　ディレクトリ（フォルダ）
テーブル　＝　ファイル
となっている。
テーブル数の上限は、サーバーのシステムによって違う。
Windowsなどでファイルの多いフォルダを開く時、長く待たされることを経験した事は無いだろうか。
データベースでも同じである。テーブルが多ければ、接続時に時間がかかる。

■インデックス
インデックスとは、目次のこと。目的のデータに瞬時にアクセスするために必要なものだ。
ただし、初心者には少し難しいシステムでもある。

まず、インデックスが必要なのは、１万件以上に及ぶ大きなテーブルのみである。
千件程度の小さなテーブルでは、逆に遅くなる場合が多い。
また不必要にインデックスを増やせば、そのインデックスを作成するぶん遅くなる。

検索を行う時、最も適したインデックスが自動で選ばれて使用される。
ただし、使うインデックスはどれか一つのみである。
すなわち、複数のフィールドを検索（ソート）する場合、注意が必要である。
検索条件にあった複数対応のインデックスを用意しなければ意味が無い。
その他にも色々制約があるため、使いこなすにはマニュアルをよく読む必要がある。

■MySQL4.1以降
バージョン4.1から、文字コードの扱いが変更となった。
今までは、MySQLを呼び出すソフト側で文字コードを変換する必要があったが、4.1からはMySQL側が自動で行うようになった。
すなわち、自分で文字コードをいちいち変換させる命令を書く必要が無くなり、楽になったと言える。

これにより、実質、MySQL側の文字コードを気にする必要が無くなった。
MySQL上のデータがSJISだろうがEUCだろうが、関係なくなったわけだ。（ソース側の文字コードを気にする必要は今までどおりあるが）
ではデータベースの文字コードは何を意味するのだろうか。
それは、ソートである。どの文字コードでも意識しないで扱えるようになったが、ちゃんと指定しないとソートがうまくいかない。あたりまえである。
また、文字変換のタイムロスをなくすため、ウェブと同じ文字コードにすると良いだろう。
問題が無い限り、『ＵＴＦ８』をお薦めする。日本語特有の問題がなくなるからだ。

気をつけることは、ソース側の正しい文字コードをMySQLに知らせることだ。でなければ、コード変換が正しく行われない。あたりまえである。
iniファイルに記述する方法や、MySQL構文でそのつど指定する方法などがある。
正しく指定しなくても、読み書きは大抵正常に行われる。間違った変換で記録しても、読み込み時に元のコードに変換されるためだ。このため、ウェブ側では文字化けが起こりにくい。
ただし、ソートはめちゃくちゃとなる。
もちろん、他の違う文字コードで書いたソース（ページ）では、文字化けを起こす。
なので、きちんと文字コードを指定する必要がある。

一つのデータベースを使い、EUCで表示するページやUTF8で表示するページがある場合もあるだろう。
古いサイトはEUCで作られており、最近のサイトはUTF8で作っている人も多いはずだ。
この場合の文字コード指定方法の一つに
　mysql_query("SET NAMES UTF8"); （PHPでの書式）
がある。
データベースに接続後、一度だけこれをやれば、接続を閉じるまで有効となる。

■MySQL4.1未満から、4.1以上へ移転する場合
上記の文字コードの扱いのみに注意するだけである。
デフォルトの文字コードは、おそらく『latin1』となっているだろう。
エクスポート＆インポートで移転する場合は、注意が必要である。

まず、エクスポートしたファイルはEUCかSJISとなるはずだ。
この文字コードは、そのままにし、UTF8に変換してはならない。
そして、『CREATE TABLE』文の最後に、テーブルの文字コードを書き足そう。
『) ENGINE=MyISAM DEFAULT CHARSET=utf8;』
などとすれば良い。
そしてインポートすれば、正しく文字コード変換がされるはずだ。

以上が、まず知っておきたい基礎事項である。

ネタ記事

少し前に書いた、『ブログに人を集める方法 』の続編。

ちょこっとためしに、ある記事を投下したりして様子をみてみたのだが、予想通りの展開を見せた。
コメントは静かだが、あるサイトで多少の話題を呼べたので成功としておこう。
その道の人から見れば、当然の反応だ。(他言語愛好家の反感)
しかし、そういった人（目的）を対象にした情報ではないため、問題は無い。適材適所というわけだ。

これは、マスコミなどでは手軽に人を呼べるとして、ごく当たり前に行われている古くからある手法である。
極端にすればするほど人があつまる。過激にすればするほど人があつまるというわけだ。
しかし、あまりやりすぎると『祭り（収拾不能）』状態となるので注意が必要である。
ＴＶや雑誌では、収拾不能となり謝罪している場面もよく見る。

私がよく読む情報系ブログにも、この手法がメインのところがある。
内容は適度に攻撃的で、知らない人が見れば鵜呑みしてしまうというものだ。
やはり、こういった攻撃的内容を読むと、再認識や考えさせられる場としての面白みがある。
ただ残念なのは、そのブログのコメントは同意意見のみということだ。

以上のことから、軽度のものでは、反対意見のコメントがつきにくく、他サイトで話題になるのみに留まる傾向にある。
これは理に適っており、他のもっと大勢がいるサイトで反論した方が、仲間が多いためだ。
また、同じような事をする仲間が多いため、行いやすい。結果、反論が目立つ事になる。
その場が、『2ch』や『はてな』といった巨大コミュニティーサイトであり、こういった行為を『晒し』と言う。
そして、読者が多ければ、コメントで討論or祭りとなる。

しかし、毎日のように記事を書いている人はすばらしい。
ネタが続かないよ・・・・。

簡単擬似静的アドレス

ここで言う静的アドレスとは、cgi等のパラメーターが無い、静的ページのアドレスのこと。
たとえば、『 hoge.cgi?b=12 』といった、パラメーター付が動的アドレス。パラメーターの内容でページ内容が変わるのが一目瞭然だ。
『hoge/12/』といったアドレスは、一見CGIとはわからず、普通の静的ページのようだ。これを擬似静的アドレスと呼ぶことにする。現在ではこういったアドレスが多く、本当に静的ページか動的かは判別しにくくなっている。（しっかり作れば、完璧に判別不可能となる）

これのメリットは、かつてはＳＥＯ対策としてAmazonが真っ先に導入したのが有名だ。
動的アドレスだと、インデックスされにくかったからだ。特にパラメーターが多いと顕著となる。
もう一つ、もっと大切なメリットがある。パラメーターを勝手にいじる悪戯の抑止力となる。
他にも、アドレスを短くしたり、メールや掲示板にアドレスを書いた時の自動リンクを正しく行わせるメリットもある。
デメリットは何か。特に無い。

設定方法は慣れれば簡単で、既存のcgi等のスクリプトにも使える。
設定は、『.htaccess』に書くだけ。このファイルを扱えるサーバーでないとダメだが、バリュードメインやロリポップ！
といったメジャーなところでは使えるようになっている。

たとえばこのように記述する
RewriteEngine on
RewriteRule ^hoge/(.*)/(.*)/$ hoge.cgi?b=$1&t=$2 [L]

意味を説明すると、windowsのショートカット機能のようなもので、別のアドレスでアクセスできる機能である。
RewriteEngine on　は、アドレス置換機能のＯＮ。
RewriteRule ルール記述開始
^hoge/(.*)/(.*)/$ このアドレスでアクセスされたら
hoge.cgi?b=$1&t=$2　このアドレスの内容を表示する。
[L]　この行を処理したら、置換作業終了。

『^』は、ドメインの省略形と思って良い。『http://www.aaa.com/』の部分だ。
省略してもいいが、誤動作させないためにつけると良い。
『(,*)』（かっこ、どっと、あすたりすく、かっことじる）は、何か文字があったら、取り込むという意味と思えば良い。
その行の最後の$は、アドレスの終わりを意味する。省略できるが、誤動作に気をつけよう。省略すると、この部分にどんな文字列がきても反応してしまう。
$1や$2は、取り込んだ文字を挿入する命令だ。取り込んだ順番に$1、$2となる。
すなわち、 hoge/12/43/　でアクセスされたら、 hoge.cgi?b=12&t=43 の内容が表示されるようになる。
また、hoge/12/でアクセスされた場合は、条件にあわないので「404エラー存在しません」となる。
[L]は、以後に続く他の置換処理をさせないためである。

cgi側は、普通にパラメーターで受け取ることになるから、何の問題も無い。
ただ、cgiが生成するリンクアドレスは普通のパラメーター付きになるので、リンクアドレスをいじってやると完璧だろう。いじらなくても動作に支障は無いが、同じ内容のページが２つ存在することになる。（ＣＧＩが生成するリンクアドレスと、手動で作ったアドレス）

条件を増やせば、どんな複雑なアドレスにも対応できる。それには正規表現のお勉強も必要だが。
詳しく知りたい場合は、「RewriteRule」と「正規表現」で調べると良いでしょう。

お手軽 擬似cron

cronを使えるウェブサービスは少なく、国内で私が知っているのはバリュードメインのサービスぐらいだ。
cronを知らない人に簡単に説明すると、指定したスクリプトをスケジュール通りに自動実行してくれるシステムだ。
何に使うのかと言うと、定期的にログを削除したり、定期的にブログを投稿したり（ＭＴにある機能）、定期定期にキャッシュを作ったりと様々な事に利用できる。

cronが使えないレンタルサーバーを借りたとき、諦めるのはまだ早い。
WebCron という、定期的に指定したＵＲＬにアクセスするサービスが存在する。
左上メニューの『Register』でメンバー登録をすると無料で使えるようになる。

cronが使えないサーバーで定期的に実行させたい物がある時、使ってみてはどうだろうか。

お手軽携帯サイト作成

ＰＣ用と携帯用の両方作りたい場合。　面倒だ。
この面倒をやってくれるのが、自動変換システム。
AUでGoogle検索をしている人は、自動で使われているシステムだ。
http://www.google.com/gwt/n
ここに、自分のサイトのＵＲＬを入れれば、携帯サイトのＵＲＬの出来上がりだ。
No Imagesは、画像を表示させるかどうかで、通常はチェックして非表示にしたほうが良いだろう。

どのように変換されるかを見て、変換後も綺麗になるようにページを構成すれば完璧だ。

ＰＨＰでページを構成している場合は、もっと最適化することもできる。
ユーザーエイジェントに『Google Wireless Transcoder』という文字がある場合、余分な情報をカットするようにすると良い。
実際に携帯からこのシステムでアクセスする人は多く、別途携帯用ページを作るよりも有効かもしれない。
携帯用ページ作ったのに、携帯からのアクセスはＰＣ用ページばかりという状況もありうる。

ウェブリング

国内でウェブリングと言えば、かつての最大手『ウェブリングジャパン』だろう。
ついひと月ほど前に閉鎖となり、参加者は散り散りとなったが。
このウェブリングジャパンの閉鎖で、また一つ、インターネットも変わってきたなと実感した。

閉鎖理由はおそらくこうだ。需要の低下。
YahooやGoogleの検索が中心となった今、ウェブリングの必要性が急激になくなってきている。
今では、一部の女性向けジャンルの間で使われている程度である。

昔は私も活用していた。たとえば素材系サイトを探す場合、リンク集の一つとしてウェブリングも使っていた。（ウェブリングという形式の必要性は別として）
ウェブリングに参加すれば、沢山の人が自分のサイトにやってきた。そんな時代があった。

次に消えゆくサービスは何だろう。

サイトのプロフィール専用Wiki

今もなおβテストで公開されているサービス AboutUs。
これは、世界中のサイトの情報を集めたWikiサイトだ。
基本情報はサイトやWhoIs情報によって掲載される。
その他情報は、誰でも編集できるという、ちょっと怖くて楽しそうなアイディアだ。
自分のサイトの宣伝に使ってもらうのがメインなのだろうけど、他人が荒らす事もありえる。

使い方は、上の検索ボックスに自分のサイトのドメインを入れてみよう。
たとえばウェブマイスターならwebmeister-jp.comだ。
残念なことに、トップドメイン単位でしか対応していない。
すなわち、サブドメインのサイトはダメだ。

そう・・・・ちょっと微妙。
共有サーバーで無料ドメインを利用している人は、無理ということだ。

もう一つ特徴的なサービスがある。
サーバーの細かな情報が見れるだけではなく、ＳＥＯの視点から見た評価も見れる。
サイト情報の右にある　「DomainTools.com」だ。
ページ内容を分析して、クリーンなＨＴＭＬであるかを判定してくれる。
クリーンなＨＴＭＬは結果的にＳＥＯに繋がるという考えなのだろう。
しかし、実際の判定方法には少し疑問も残るが。
何を直したらよいのかは、英語で表示される。
右のSEO Text Browserをクリックし、出てきたやつの左上隅にある「！」をクリックで解析内容表示となる。
そこに、何が悪いかが英語で表示される。
しかし、判定材料の種類も少ないので、まだまだこれからといったところだ。
imgタグに画像の大きさを指定しろなど、ＳＥＯと関係あるのか不明なものまで含まれている。
まぁ、指定するべきなのは確かだが。

ちなみに、ＵＴＦ８以外のページは一部機能が使えない場合がある。文字ばけが発生する。
どうもマルチバイトの変換が不安定のようだ。meta情報は日本語が通ってるのに、title情報は文字化けとか。

この機能の使い方は、指示にしたがってページを修正し、ツールのリロードボタンを押して再確認。
１００％を目指して修正していくというものだ。
機能が充実すれば、ＳＥＯとは関係無しにサイト作成の補助ツールとして便利かもしれない。

ブログに人を集める方法

争いが好きな人は多い。
人気サイトではよく討論が行われる。
昔から、掲示板は多少荒れた方が活気があって良いとも言われていた。

すなち、討論する場を与えれば、人があつまりやすい。
討論がされれば、立派な情報となる。
そしてそれはコンテンツにもなりうる。
そしてさらに人が増える。

こういった手法には、かっこいい英語名があったのだが・・・・・・忘れた。

ブログで言うと、記事の内容をちょっと攻撃的にするというもの。
たとえば、ある情報の反対意見を書くなど。
すると、それについての討論がコメントにずらずらという仕組みだ。
言うなれば、ブログの掲示板化だ。
記事をスレッドとして、討論しやすい内容でアップすれば良い。

とまぁ、書くのは簡単だが、肝心の人がある程度通ってくれないと意味は無いだろう。
あとはいかにして、多くの人に読ませるか。これが一番難しい気もする。

AJax フレームワークまとめ

Ajaxという言葉の流行とともに、ついにスタートラインに立ったJavaScript。
各社や個人が競って次々とフレームワークをリリースしていっている。
てことで、大雑把にフレームワークのまとめ。

Ajaxのフレームワークと言っても、大抵のメインはJavaScriptでコンテンツを操作するためのフレームワークだ。
したがって、Ajaxを使っていなくても利用価値は高い。

フレームワークの一部を取り上げると、こんなのがある。

・prototype
リファレンス
JavaScriptのプログラミングを楽にするためのワークフレーム。
あらゆる用途の基礎に使えるため、JavaScriptを使うときはとりあえず組み込むと良い。
また、フレームワーク/ライブラリによってはこれが必要になる場合も多い。

・Spry framework for Ajax （Adobe）
動作サンプル
デザイナー向けソフトを販売するAdobeなだけあって、フレームワークもデザイナー向け。
必要なのはhtmlの知識だけ。classを指定するだけで目的の動作が可能となる。

・Yahoo! UI Library
リファレンス
よく使われるJavaScriptライブラリを提供。
すなわちJavaScriptプログラマー向け。
クロスブラウザを考えながら１からつくる手間をはぶける。

・Google Web Toolkit
JAVAプログラマー向け。 JAVAをJavacriptにコンパイルするツール。
すなわち、整ったJAVA開発環境でAjaxアプリが作れる。

・マスカット (NTTデータ)
従来のWindows用アプリ開発ソフトのように、ドラッグアンドドロップで簡単にAJaxアプリが作成できる。
極端な話、プログラミングする必要さえ無い。
近い将来、このタイプのフレームワークが主流となるかもしれない。（Windows用アプリ開発のように）

有名なフレームワークは他にも沢山あるが、個人的に目に止まったものだけを紹介した。
色々なフレームワークを見たければ、ここやここも参考になる。

進化し続けるインターネットとサイト作成　Web2.0

とてつもなく久々のエントリー。もうすこしで一年経過してしまうところだった。
もうすぐ２００６年が終わるが、今年も劇的にインターネットが進化した時代だった。
今年のウェブの進化を一言で言うと、Web２．０だろうか。
もともとの意味は、情報発信の中心が企業から個人へのシフトを指していたのだが、今は新しいことの総称となっている。
実際は、インターネット初期の昔懐かしい内容まで２．０に入っているが・・・・。（Web０．１だろとつっこみたい物も）

Web２．０の中核は、なんと言ってもブログとWiki。この２つの存在が非常に大きい。
ブログとWikiによって、個人が情報を手軽に発信できるようになった。
また、ブログより後にヒートアップしたWikiは、Web2.0の代名詞とも言える存在だ。
ユーザー参加型情報発信ツールとてでも言おうか、キーワードである『ユーザー参加』と『個人発信』の２つとも含まれている代表的なWeb2.0と言える。

さて、意味の広がった現在のWeb2.0を見てみよう。
半分冗談のような物では、枠の角を丸くするというのがある。これもWeb2.0とよく言われている。
四角い枠はもう見飽きた、これからは丸角の時代だということなのだろう。
そういやIEのfield枠の角は丸い。元祖Web2.0なのか？（冗談ですごめんなさい）

他に新しく登場したものとして、Ajaxがある。ページ切り替えなしに裏でサーバーとやりとりし、ページの一部を書き換えるという技術の総称だ。（厳密には違うが、今はそういうことになっている）
これによって、ブラウザでも普通のソフトのような快適な操作が実現した。
技術そのものは新しいものではない。そのためどのブラウザでも動くのが特徴だ。
いままで登場しなかったのは、パソコンの性能や、通信速度が原因なのだろう。

また、個人レベルのサイトに革命をもたらしたのがAPIの流行。
他人の開放しているデータベース等へアクセスし、データを受け取れるという物だ。
これにより、自分のサイトで様々なサービスを行えるようになった。
有名どころでは、ネットショップのamazonがいち早く実装。数年の月日を経てようやく
各企業も実装に乗り出してきた。
今では個人サイトもAPIを公開しているところがある。

今年は取り上げるとキリがないほど様々な物がメジャーとなった。
まだまだ色々取り上げてみると・・・・

『タグ』の概念。少し前まではあまり見かけなかったタグ。
ここでの『タグ』とは、自由につけられる共用カテゴリと言えばいいのだろうか。
カテゴリのようでもあり、キーワードのようでもある３つめの分類方法だ。中間と言ってもいいだろう。
定義すとすれば、カテゴリとは、あらかじめ決められた分類であり、キーワードは検索に使う分類だ。
タグとは、この両方に使う分類と思えばよい。
同じタグをつけられた物同士がリンクし、カテゴリのように扱える。そして柔軟にどんどん種類が増える。
これもまた、分類わけにおけるWeb2.0と言える。
そして、タグの使用頻度を表した『タグクラウド（タグの雲）』というのがある。
これは、タグを並べた物で、使用率の高いタグほど大きく表示され、見た目で大まかな数がわかるというものだ。
ただ、あまりにも大きすぎて他のタグにかぶってたり、あまりにも小さすぎて文字が読めなかったりするが。。。

去年を振り返ってみると、ブログがブレイクした年だっただろうか。
ブログのおかげでCSSもブレイクし、マイナー（裏技とも呼ばれていた）だった記述方法がメジャー入りとなった。
しかし、まだまだ受け入れられない人も多いのも事実。ここは柔軟に世の中の流れに乗らないと、どんどん遅れてしまうぞっと。

たとえば、div要素について見てみよう。はじめは、tableの代わりとして注目された気がする。
しかし今やdivはtableの代わりではない、もうそんな目的を意識して使う時代はとうに終わっている。
tableよりぜんぜん便利だしね。
では、どんな目的なのかと言うと、分類わけだ。この部分は〇〇〇を意味するという使い方だ。
結果として、CSSでのレイアウトを柔軟に行えるというわけだ。
ま、こったデザインでは場合によってはこの範囲を超えそうなのもあるが、それはそれでデザイン以外の意味を持たせればよろしいかと。
たとえば、こんな例を見てみよう。以下は、あくまで説明しやすくするための例だ。

 <h1>タイトル</h1>
 <p>・・・・・</p>
 <p>・・・・・</p>

 <p>・・・・・</p>

 <p>・・・・・</p>

古いhtmlの仕様だとこれが理想だろう。
しかし、これういったのも量が増えると同じP要素ばかりで、分類わけがされていなくて管理しにくい。
各P要素に分類のためにclassを指定したら、それこそ大変だ。
コメントタグを使う方法があるが、他に良いのはないだろうか。
そこでdivの登場だ。xml風と言っても良い。すなわちxhtmlによろしいかと。

 <div class="title-page"><h1>タイトル<h1></div>

 <div class="maegaki">

   <p>・・・・・</p>

   <p>・・・・・</p>

 </div>

 <div class="honbun">

   <p>・・・・・</p>

   <p>・・・・・</p>

 </div>

上記の書き方が、理想的な書き方だ。
xhtmlの世界ではこれが基本であり、理想であるとも言える。
各部分を意味による分類がされており、把握が楽だ。
そして、テンプレートのように再利用が容易だ。すなわち新規ページ作成や更新が楽になる。
さらに、CSSとの相性抜群で縦横無尽にレイアウトが可能だ。
まさにこれからの時代のスタンダード、というかすでにスタンダードだ。
今の主流は、xhtmlになりつつあり、もっと広まっていくだろう。
ちまみに当サイトのソースは見ないほうが身のためだ。いろんなのが混在して混沌として最悪ソースだ。
様々な手法を実験した結果と思ってもらえると幸いだ。デザインも古すぎるし・・・・。

というわけで、来年はどういう年になるのだろう

非常に長いエントリーでごめんなさい。
というわけで、追記部分で続き！

来年はまず、APIとAjaxが加速していくはずだ。
すなわち、ウェブ上でのサービスが飛躍的に快適になる年となる。
ただ、この加速にブレーキをかける要素が無いわけではない。
それは、Flashがそんなに広まらない原因でもあったりする。（Flashは様々原因があるが）

『Google等で検索できない』

googleなどでの検索対象は、１ページごとの出力結果。
しかも、javascriptは切った状態でだ。
すなわち、Ajaxで動的にどんどんコンテンツ内容を変化させるページでも、
Googleに記録されるのは、最初の画面でJavascriptを実行しなかった場合の何もない画面。
検索エンジンが重要なこの世の中では、致命的な障害である。

よって、Ajaxを扱う内容は限りがでてくる。
元々検索対象にはならないような物のみだろう。
それでも劇的に便利になっていくことに変わりはない。
今よく見かけるのは、住所入力の自動化。郵便番号を入力すれば住所も自動で入力されるというものだ。
また、ウェブメールでは、従来のはいちいちページが切り替わって表示が遅かったが、Ajaxにより、ページの切り替え無しで普通のメーラーのように扱える物がでてきた。(Yahoo!やGoogle等)

じわじわ加速しているのはソーシャルサービス系で、来年さらなる加速が期待できる。
もっとも古参サービスの一つは、ソーシャルネットワークシステムだろうか。
一番有名なのはMixiだ。
閉ざされたネット空間で仮想社会を実現しようというコンプセントのシステムで、構築するためのフリーソフトがあるために今年にじわじわと増えてきているサービスだ。
ただ、閉ざされた空間、すなわち部外者お断りということから、どれだけ広がるかは正直わからない。
Mixiはブレイクしているが、他はまったくと言っても良いだろう。
これの真逆のコミュニティーが２ｃｈだろうか。

もう一つ増え始めているソーシャル系は、ソーシャルブックマークサービスだ。
上の方で記述した『タグ』システムを広めたサービスである。
早い話が、個人のブックマークをネット上に置いて、皆にも見使ってもらうというもの。（見せないようにもできる）
これにより、有益な情報の発掘が手軽に行えるようになった。
従来では、有名なブロガーの情報や、ニュースサイトに頼るしかなかったからね。

そして上記２つをあわせた新たなサービスも登場している。

他には、ソーシャルサーチシステムがある。
GoogleやYahoo!が次期サーチエンジンシステムの中核と位置づけているものだ。
ログインしてから検索行為を行うと、その情報がデーターベースに登録され、検索の傾向が解析されていく。
そして、検索してサイトを訪れるという行為を繰り返すうちに、目的だろうのサイトが上位にくるようになってくるものだ。
これだけにとどまらず、他の人のデータや、ブックマークや評価といった様々な要素をからめて精度をあげることになる。
このサービスは一時期、従来のサーチエンジン対策が無力になるのでは？という内容で話題になった。
これはまだまだこれからの機能で、来年に大きな動きがあるかもしれない。

こうやって見ると、いろいろあるソーシャル系。ソーシャルという名称がついてなくてもまだまだある。
YouTubeを代表とする、動画ホスティング系。動画を自由にアップロードし、タグ付けをして公開できる。
Flickrを代表とする、静止画ホスティング系。YouTubeの静止画バージョンだ。

そしてついには、ネット内だけにとどまらず、実世界でのソーシャルサービスも開始している。
ソーシャル無線ネットワークシステムだ。
個人で家庭に設置したアクセスポイントを、他人が外から利用できるようにしたサービスだ。
これが広まれば、屋外での無線ネット利用可能範囲が劇的に広がるかもしれない。
国内サービスも存在していたが、ついに海外からも日本上陸をして広がりつつある？

ということで、来年度の注目度最有力はソーシャルサービスだろう。
これから最も加速していくサービスだ。
これにAPIとAjaxが加わり始めているので、言うこと無しだ。
各種ソーシャルサービスを連携し、さらにGoogleMapのような物が加われば、とんでもない化け物サービスが出来上がるかもしれない。

今までに無く長いエントリーとなってしまった。読む人なんているのだろうか。
では、来年度も良い年でありますよう。

ゲーム日記専門トラックバックセンター

ここ最近作っているサイトが一つある。
ゲーム日記のトラックバックセンターで、その名は『プレイヤーズビレッジ』！
ゲームプレイヤーの集まる村というイメージで命名。

そこらのブログツールを使ったトラックバックセンターと違い、本格仕様にしてみた。
今はまだ、こじんまりとしているが・・・。
これから関連サービスを開発していき、大きくできればなと考え中である。

ゲームブログをお持ちの方は、是非トラックバックを。

最近ゲームしてないなぁ・・・。

バナー規格や引用

２年以上ウェブマイスターを運営していて、最も注目度の高かった記事２つをピックアップ。

１．バナー国際標準規格
基本中の基本であるがゆえにあまり紹介されない規格。なんとなく皆が使ってる大きさを真似て使っている人が多いと思う。
別に規格に従った大きさにしなくてはならないという法律は無いが、従った方が何かと便利。
バナーを並べた時、皆違う大きさだと困るし、レイアウトにも困るもんね。
バナーを掲載してくれる相手の事を第一に考えるならば、規格に従ったほうが良いでしょう。

２．引用と転載
インターネットでは良くある問題事項といえる、引用。
転載のことを引用と言う人が非常に多いのが現状である。
なるべく分かりやすい言葉でまとめてみたので、違いが分からない人は読んで欲しい。
もっと短く説明すると、『本文と引用文は明確な主従関係を保たなければならない』。

MTをCMSとして使おう

Movable Type (以後MT)とは、ブログツールの一つで、ブログを管理するために作られたソフトだ。
広告無しのブログの大半は、ＭＴでブログを作成していると思っていいだろう。それだけメジャーで人気のあるブログツールである。

このＭＴは、無料で使えて、もっとも高機能なブログツールである。
有料ライセンスもあるが、個人で使う場合のほとんどは無料で大丈夫なはずだ。
（条件：１サーバーのみ。投稿者一人。個人サイト。他は全機能使用可能）

ＣＭＳとは、コンテンツマネージメントシステムの略で、簡単に言えば、サイトを作成管理するツールのことである。
ブログツールは、ＣＭＳの中でブログに特化したツールだが、だからといってブログにしか使っちゃいけないことはない。
普通にＣＭＳとして優れた潜在能力がある。

では、ＭＴを使って高機能な普通のサイトを作るヒントを紹介しよう。
対象は、最新のＭＴ３．２以降である。（３．２から仕様が大きく異なっているため）
一気に紹介するから、ちょっと長いよ・・・・・。

ＭＴはＣＧＩで作られているため、ＣＧＩ対応のサーバーに限られる。
マニュアル通りにインストールしよう。
大抵は、アップロードして、ＣＧＩファイルの属性を実行可能にセットするだけだ。

以下の説明は、実例をお見せできないので、ちょっと分かりにくいかもしれないがご勘弁を。
他の私のサイト（秘密）で使っているテクニックになる。

■ナビゲーション（パンくず）の設置

ＭＴ標準のテンプレートでは、各ページの上に

『前のページの名前　　メイン　次のページの名前』

というように、ナビゲーションリンクが表示される。
ただのブログではこれで良いのだが、普通のサイトを作りたい場合、これは問題である。

今どのカテゴリを表示しているかの道しるべを表示すると便利だ。
大手サイトでよく見かける。

『メイン　＞　第一カテゴリ名　＞　第二カテゴリ名　＞　表示しているカテゴリ名』

これを俗に『パンくず』と言う。
こうすることで、サイト観覧が非常にスムーズになるだろう。
やりかたは、テンプレートの各アーカイブに記述すればよい。

・カテゴリーアーカイブ

<a href="<$MTBlogURL$>" title="&quot;<$MTBlogName$>&quot;メインページへ">メイン</a> ＞
<MTParentCategories exclude_current="1"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a> ＞
</MTParentCategories ><b><$MTArchiveTitle$></b>

・エントリーアーカイブ

<a href="<$MTBlogURL$>" title="&quot;<$MTBlogName$>&quot;メインページへ">メイン</a> ＞
<MTParentCategory >
<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a>
 ＞ </MTParentCategory>
<a href="<$MTEntryLink archive_type="Category"$>"><$MTEntryCategory$></a> ＞
<strong><$MTEntryTitle$></strong>

■空の親カテゴリーのページ作成

パンくずを作った時の問題が、階層化したカテゴリの扱い。
エントリーを末端カテゴリにしか登録しな場合、浅い階層のカテゴリにはエントリーが無い状態となる。
そうすると、パンくずの便利さが半減。
『メイン＞第一＞第二＞エントリー』
上記のパンくずで、第一にエントリーが無い場合、第一をクリックしてもページがありません。
よって、メインまで戻らないと他のエントリーが見れない。　とても不便だ。
これを解消する方法を紹介しよう。

まず、カテゴリアーカイブに、子カテゴリ一覧を表示するようテンプレート編集。
エントリーとパンくずの間に表示させればいいだろう。

<MTSubCategories>                                                
<MTSubCatIsFirst><ul></MTSubCatIsFirst>                    
<MTIfNonZero tag="MTCategoryCount">                                
<li><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a>  
<MTElse>                                                                
<li><MTCategoryLabel>                                              
</MTElse>                                                                
</MTIfNonZero>                                                          
<MTSubCatsRecurse>                                                     
</li>                                                                    
<MTSubCatIsLast></ul></MTSubCatIsLast>                     
</MTSubCategories>

次に、題名本文ともに空のエントリーを投稿しよう。
これで、エントリー無しの子カテゴリメニューのみの表示が完成だ。
空エントリーは、そのカテゴリの説明等にしてもいいね。

■エントリーページで、同じカテゴリのエントリー一覧を表示

よく企業のニュース系サイトで見かける、エントリーの最後に関連記事一覧を表示する方法。
もっとも簡単なのは、同じカテゴリの記事一覧だ。
これは標準のＭＴではサポートしていないので、プラグインを使うことになる。

MTEntryCategoryEntries　このプラグインで簡単に実現。
プラグインは、pluginフォルダにコピーするだけで、自動認識するからお手軽。

使い方は、エントリーアーカイブに

<h2><$MTEntryCategory$>に関連する記事</h2>
<ul>
<MTEntryCategoryEntries lastn="10">
  <li><a href="<$MTEntryPermalink$>"><MTEntryTitle></a></li>
</MTEntryCategoryEntries>
</ul>

■ちょっとしたこと

・各アーカイブから、日付や投稿者情報などの表示は削除しよう。
ブログじゃないから、普通は要らないだろう。
コメントは運営方針によるが、あったほうが何かと便利かもしれない。

・ブログもやりたい場合。
通常のアーカイブテンプレートとは別に、ブログ用のアーカイブテンプレートを作成しよう。
複数のアーカイブを生成する機能を利用する。
カテゴリリストからブログのカテゴリを除外し、別にブログカテゴリのリンクを設置しよう。

■エントリータイトルをパーマリンクしよう
たとえばメインテンプレートの場合。

<h3 class="entry-header"><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></h3>

このように、タイトルをパーマリンクへのリンクに変更することは、非常に有益だ。
カテゴリアーカイブも同じように変更しておくと良い。

■カテゴリやエントリーの順番
順番は、標準ではアルファベット順となる。
順序は変えられるが、どのみちソートなので普通に固定順序化は難しい。
エントリーの表示順序は投稿日時なので、この日時を操作して順番を制御するしかない。
ただしこの場合、更新履歴が使えなくなるので注意。（日付がめちゃくちゃになるからね）
カテゴリの場合、カテゴリ名を１．２．３．といった数字を先頭に書いて操作するのが簡単な方法だ。
この場合、ＣＳＳでリストの先頭の「・」を削除しておくように。
順番を気にしないならば、何も特に何もしなくて良いだろう。

■メインテンプレートを編集しよう。
標準ばブログ用なので、最新のエントリーが全て表示されてしまう。
なので、普通のサイトっぽくするため、エントリーの表示を消して、普通のサイトっぽく作ろう。

■トップページを普通のサイトっぽくする方法のヒント phpとの併用

標準のテンプレートをちょっといじるだけだと、とてもさびしいトップになりがち。
普通のカテゴリリスト表示しか思い浮かばない？それ以外に何をしようか？
phpが使えれば色々なことができるよ。
phpがまったくわからない人はごめんなさい。

カテゴリ名（もしくはエントリー名）の先頭に、アイコンをつけよう。
これもMTタグとphpの併用で簡単に可能だ。
MTタグでphpにカテゴリ名を渡し、phpでアイコンを埋め込めば良い。
JavaScriptでもできるが、なるべくphpの方が確実でよいだろう。
これで、複数カテゴリの記事一覧を表示した場合、どの記事がどのカテゴリなのかも一目でわかりやすい。
たとえば、こういうときに便利。

記事は、第二カテゴリに登録している。
第一カテゴリで記事一覧を表示。
この時、複数の第二カテゴリの記事がごっちゃに表示される。
記事タイトル名の先頭にカテゴリアイコンがあれば、どの第二カテゴリに属しているのかわかりやすい。
記事のカテゴリは<$MTEntryCategory$>なので、これをphpの変数に渡せばいいだろう。
たとえば

<img src="<?=$icon[<$MTEntryCategory$>]?>">

この場合、$iconの定義はテンプレートで別に定義して、includeして使うと管理が簡単だ。

phpを使えば、アイディア次第でＭＴの機能を大幅にアップグレードできる。
高機能なＨＰを簡単に管理するのにもってこいだ。

他には、大きな画像などを使ってスペースを埋めて大きく見せるのもいいだろう。

■テンプレートモジュール
以外と使われないこの機能。
テンプレートメニューにある、モジュール。
これは、ＣＭＳに欠かせない機能とも言える。（私は使っていないが・・・）
XoopsなどのCMS系ツールでは必ずあるもので、ＭＴはちょっと低機能だが、使えないことは無い。
これは、ページ内容をブロックで分け、ページに埋め込むというもの。
ＭＴの標準のメインテンプレートは、ずらずら全部書いてある。
もしテンプレートの内容が膨大になっていて、修正する時、この中から修正したい部分をさがすのは一苦労だろう。
通常のサイトの場合、php等で埋め込むのが一般的だが、phpが使えなくてもMTのモジュール機能で同じ事が可能というわけだ。
もしテンプレートの内容が膨大になる場合、使ってみるのも良いだろう。
また、複数のテンプレートに同じ内容を書く場合も、モジュールを利用すると管理が簡単になる。

■スタイルシートテンプレート
標準の設定では、再構築しないと反映されないスタイルシート。
中身を見ると、ＭＴタグは使われていない。すわち再構築するのは無駄な行為となる。
『このテンプレートにリンクするファイル』のところに、『出力ファイル名』と同じファイル名を書いて、『再構築オプション』のチェックを外そう。
これで、保存するだけで適用され、再構築は要らなくなる。

このように、ＭＴタグを使わないテンプレートは全て同じように設定しよう。

再構築の必要が無いので、ローカルで編集してアップロードした場合も、再構築無しに適用となる。

■他、便利な技

大きなサイトは普通、phpなりssiなりのスクリプトでファイルを埋め込む。
１ページを複数のファイルに分けて表示させるのが常識である。
MTでは、モジュール機能を使ってもいいだろう。
全ページ共通である、サイト上位の部分（サイトタイトル部分）と、最下部（コピーライト部分）の部分を別ファイルにするのだ。
こうすることで、１つのファイルを編集するだけで、全ページ適用となる。
ただし、モジュール以外の方法で埋め込んだ場合はＭＴタグが使えないので注意。
モジュールの場合は再構築が必要で、phpで埋め込む場合は不必要という違いも覚えておこう。

あと、ＭＴの標準ではトップページのみにメニューがあるが、メニューを切り離してメニューテンプレート（もしくはモジュール）を作り、それを各アーカイブに埋め込むのもいいだろう。

 

以上、非常に長いエントリーとなってしまったが、ＭＴでサイト作成ヒントの紹介終わり。

リンク集への申し込みを見る

当サイトのリンク集へは、毎日数十件の申し込みがきている。
しかし、大半は違反サイトなのだが・・・。

それはいいとして（よくないが）、各サイトを審査していると、色々なことが見えて面白い。

■ケース１

トップページはごく普通のサイトにみせかせて、審査を通過しようとするサイト。
実は全てのリンク先がアダルトサイトやランキングのみ。

ちゃんと各コンテンツをチェックしているので、残念ながら通用しないが、トップページしか見ないリンク集の管理人はひっかかるかもね。

■ケース２

数ページ程度の小さなサイトを大量に作成し、そのサイトのＰＲを上げてメインサイトのＰＲを引き上げる。

問題が無ければ登録している。

こうやって見ていると、検索エンジン戦争って感じかな？
google等の検索エンジンの検索結果は、フィルターを使って精度を高めている。
しかし、フィルターが厳しくなるほど、精度にも疑問がでてくる。
フィルターをOffにして検索すると、なんとOffのが使いやすいってことも。 }
（言語を英語に設定して、Advanced SearchでNo filiteringにセットする）

便利なスタイルシートのスタイル

今やスタイルシートの使用は普通となったが、なれるまでなかなか大変なものだ。
そこで、ある程度スタイルシートはわかるが、もうちょっと分かりやすくレイアウトしたいと言う場合のＴｉｐを紹介。

普通の人は、デフォルトの状態からの差分を書く。
分かりやすく言えば、初期状態のレイアウトから、変更したい部分だけどスタイルシートで指定する。

この場合のネックとなるのが、ブラウザやバージョンによって、初期状態が違うという事だ。
もう一つ、デフォルトのスタイルがどのように指定されているかが曖昧となりやすい。
なので、全体的に曖昧なデザインとなる。
曖昧が悪いというのではなく、むしろ曖昧なデザインが最も優れたデザインという見方もある。
しかし、世の中のデザイナーは、曖昧を嫌い、きっちりデザインしたいという人が多いのも事実。

そこでお勧めする方法は、スタイルを白紙に戻し、全てのスタイルを再指定する方法だ。
これにより、デフォルトがどのような設定なのかを理解し、スタイルシートの理解度が一層高まる。
一度これを作れば使いまわしができ、本来のスタイルシートのあり方に近づけるだろう。

では実際に、スタイルシートをどう書いていくかを説明する。

まず一行目に

@charset "shift_jis";

このように、文字コードを指定しておこう。
フォント名で日本語を使う場合に必要な指定だ。

次に

* {
margin: 0px;
padding: 0px;
font-style: normal;
font-weight: normal;
font-variant: normal;
}

このような感じで、全タグのスタイルを白紙に戻そう。
これで、タグによるデザインの違いがほとんど無くなる。
流行の指定はここままではやらず、marginとpaddingだけだ。
しかしここはあえて、weightもノーマルにしてみる。

そしてスタイルの再設定を行う。スタイルシートを何処まで理解しているかの腕ためしにもなる。
では、初心者がつまづく設定を紹介。

strong要素のスタイルを指定してみよう。

strong , strong * {
font-weight: 900;
}

ここで注意なのが、『strong * 』があること。strong要素内の全ての子要素にも適用させる。
もしこれが無いと、strong要素内で別の要素（たとえば a要素）を使った場合、strong要素の設定が無効になってしまう。

もう一つ初心者がつまづくのが p要素。

p + p {
margin-top: 1em;
}

同じ親要素を持つ２つ目以降の連続したp要素は、先頭に空行を入れるようにする。
簡単に言えば、p要素を並べた時、２つ目のp要素から先頭に隙間を作る。
emにしたのは、簡単に空行を入れるためであり、きっちりレイアウトしたい人はpxで指定しよう。

上記２つの書式を理解すれば、あとは簡単に設定できるはずだ。
曖昧なレイアウトが嫌いな人は、お試しあれ。

新 Yahoo!検索の影響

今月からYahoo!の検索エンジンが変わり話題を呼んでいるが、当ウェブマイスターへの影響を監視した結果では・・・

全体的にはほとんど影響無しとという結果になった。
今月１日からアクセス数が減っているが、これはYahoo!検索とは無関係である。
そもそも新検索は１日の時点ではまだ導入されていない。
ただし、部分的に見ると大きな影響を受けているコンテンツもある。
たとえばスタイルシート倶楽部では、Yahoo検索経由のアクセスが一日２００件減となった。しくしく

カテゴリ経由でのアクセスは今まで通りで変化無し。他の恩恵も考えると、カテゴリ登録の重要度は依然として高いと判断できる。

これからウェブマイスターをもっと大きく拡張する予定なので、影響をあまり受けず（？）にホッとした。

バナーメーカー仮設

サイト作成補助ツールの第二段として、バナーメーカーを作ってみた。
バナーメーカーと言っても、ただバナーに文字を入れるだけだったりするが。

売りは、あえて言うなら4列の文字列が扱えること。
いくらでも増やせるが、これだけあれば十分かな？
あとは、意外とどこも扱えないbmpに対応している。
もちろん画像フォーマットの変換にも対応済み。
バナー台をペインターで作って、文字入れはバナーメーカーってことも可能。

ある程度したら、これらアプリをまとめたコンテンツを立ち上げ予定。

ファビコンメーカー公開

画像ファイルをfavicon.icoへ変換するファビコンメーカーの試作ページを作ってみた。
他サイトでもこういったのを見かけるが、当サイトではビットマップ(BMP)形式に対応しているのが他とは違う。
Windowsならば最初から入っている『ペイント』でBMPファイルを作り、それをアイコン化することが可能となる。

ただし、試作段階で、動作テストは不完全である。
また、透過処理にはまだ対応していない。

faviconを知らない人は、過去の記事を参照されたし。
サイトを持っている人は是非導入してみよう。

左メニューと右メニュー

サイトには通常、メニューという物があり、目的のページへ誘導するために設置される。
このメニューの設置場所は、上・左・右・下などサイトによってさまざまだ。

今回注目するのは、左か？右か？
よく右メニュー型がユーザビリティにするれていると言われるが、実際はどうだろう。
このことについて、簡単に結論を書いてみる。

 

まず、日本人は左上から右したに向かって注目していく。
したがって、重要度は左上が高く、右下が低いことになる。
これにより、重要であるコンテンツを左に配置し、脇役であるメニューは目立たない右に配置するべきだという考えが生まれた。

ここで一つ、よく考えて欲しい。
必要の無いものは存在しえない、必要だからこそ存在するのがこの世の理。
左メニューにもしっかりとした存在理由があり、それを知らずして右メニューを謳うのはいささか疑問に思う。

左は、まず目につく場所であり、最初に認識される場所。
目的のページを探しやすいのは、左メニュー型だ。
最初に目次を知り、すぐさま好きなページへと飛べるため、これについてはユーザビリティに優れいると言える。
コンテンツタイプの大型サイトは、多くの場合左メニューが適している。
メニューでの移動を分かりやすくしたナビゲーションシステムだ。
だが、マウスが画面を横切るという機能面の無駄が生じる。

次に右メニューの場合。
一つは、メニューの理解よりも、操作性を重視した結果でもある。右にメニューがあることにより、マウス操作を最小限にとどめる事が出来る。
もう一つは、メニューは重要ではなく、メニューがサイト観覧の中心とならない場合。
左にコンテンツがあることで、まっさきにそれが読まれるという事を利用することになる。
多くは、トップページこそが注目のコンテンツで、メニューは過去ログを参照するという目的であるブログやニュースサイトで適している。
したがって、目的のページへ飛ぶためのメニューをすぐに認識できないデメリットを考えると、絶対的にユーザビリティに優れているとは言えない。

以上のことから、サイト内容と目的に応じた選び方がベストであり、どちらが良いという絶対的な指標は無いと結論付ける。

補足
上メニューは、スペースを最大限に利用するために使われる。
また、左メニューと組み合わせての利用や、注目メニューのみ上に別表示といった使い方もある。
下メニューは、別カテゴリのコンテンツへ誘導するのに使われる。

ちなみに
ウェブマイスターコンテンツの一部はサイトＭＡＰ型と（勝手に）言う旧式スタイルを採用している。実はこのサイトで初めての採用。
ただの好奇心からだというのはナイショ。
初めて来る人には分かりやすくて良いが、ＭＡＰを覚えてしまうと行ったり来たりが面倒になる。（戻ればメニューという使い勝手の良さもあるのだが）
しかし、作る側としてはとても楽で、小規模から大規模まで柔軟に使え、無駄を押さえられるので採用した。
またこのタイプは、階層が浅いサイト構成でないと迷路となるので注意。

最後に
サイトデザインのお勧め本を紹介。

やさしいWebデザインというデザイン入門書。
全ページフルカラーで、実際のサイトを例にして一通りのデザインを紹介している。
半分以上がサイトの写真や絵となっているので、すらすら一気に読め分かりやすい教本。
実は私が最近買った本である。

SEOとH1

SEOの産物である、ページの最上位にサイトの説明を一行で表す行為。
今はあたりまえとなって、どこでも使われている。
しかしよく考えると、ＳＥＯとは関係無しに、そうすることが好ましい行為であることに気が付く。
なんせ、一目でサイトの内容を把握できる。ユーザビリティーとしてもすぐれていると言えるのではなかろうか。
metaによるdescriptionの記述も同じで、SEOが無ければ書かないサイトも多いことだろう。
私は未だに書かないことが多いが・・・・。ついつい怠け癖。

スパムでよく騒がれるSEO業界だが、こういった良い現象も起きているのだと思う午後の昼下がり。(完)

要素のルートってどこ？

意外と知られていないスタイルシートの落とし穴。
大親玉の要素って、どれかご存知だろうか。

答えは html要素

これを知らないと、レイアウトによっては非常に苦労することになる。

ページを書くとき、必ず出てくる要素は、htmlとbody。
古いブラウザではこれを要素として正確に処理はされないが、今出回っているブラウザは要素としてしっかり扱える。

どうなっているか分かりやすく説明すると。
html要素は机。body要素は紙と思えば良い。
そして、その２つの要素にも、普通にスタイルシートが扱える。
bodyにスタイルシートを適用するのは常識ではあるが、制限があると思い込んでいるはず。

これが何故重要なのかと言うと。
body要素の高さや幅を指定したとき、html要素のスタイルが影響することにある。
たとえば、body要素より外側の背景色はhtmlの背景色となる。
body要素の高さを%で指定した場合、html要素の高さからの%となる。
もし、html要素で高さを指定していなければ、body要素の%はもちろん意味をなさない。

ここで注意が必要なのは、htmlの背景色は、htmlの背景関連を指定しないかぎり、bodyの背景が適用される。
すなわち、従来どおりということになる。
これは、IEでもGeckoでも同じ動作になる。（最近のバージョンから。ＩＥは６以降）

これを知っていれば、ページ全体をdiv要素で囲むという事を、場合によっては無くせる。
body要素で同じことができるからね。

あともう一つ、div要素で表示領域全体を囲みたい場合。すなわち高さ100%でブラウザの高さめいいっぱいにしたい場合。
親要素の高さが100%でないと駄目なので。
そのdivの親のbodyを100%にセットし、さらにbodyの親のhtmlを100%にしなくてはならない。
これは意外と需要のある技ではないだろうか。

これらを知っていれば、楽にレイアウトできることもあるので、ぜひ頭に入れておこう。

アクセス数とは

ごくまれに、アクセス数について勘違いしている方を見かけるので、簡単にせつめいしてみる。

■アクセス数は、２つの見方がある。
・サーバーアクセス数
これは、ヒット(HIT)数と呼ばれ、サーバーに何回リクエストがきたかの数。
ページを表示した回数ではなく、リクエスト回数なのに注意。
たとえば１ページ以内に画像が５つあれば、１ページ表示するのに最低６ヒットとなる。

・サイトアクセス数
これはページビュー(PV)と呼ばれ、一般にアクセス数と言えばＰＶのことを指す。
これは、サイト全体でページが何回リクエストされたかの回数をあらわす。
５人の人が１ページのみ見た場合のＰＶは５、１人で５ページ見てもＰＶは５となる。
当サイトのカウンターも、もちろんＰＶである。

■サイトアクセス数にも、もう一つある。
一般的なＰＶの他に、ユニーク数（ユニークビュー）というのがある。
これは、できるだけ同一人物からのアクセスを排除した数である。
本来カウンターはＰＶを表示するものだが、いたずらを避けるためにこのユニーク数を表示するタイプもある。
このユニーク数表示をしている方に限って、通常のＰＶ表示を批判する人が多いが、逆なので注意しよう。

■ＰＶとユニーク数
重要度は、ＰＶ＞ユニークである。
ＰＶは、サイトの価値を測るのに適した数値である。
ＰＶは、訪れた人数x見られたページ数という、総合的なサイト価値を見るのに適した数値と思って良い。

ユニーク数だけではサイトの価値を判断できない。
いくらユニーク数が多くても、ＰＶと差が無ければ、それだけ価値が低いことになる。
また、ユニーク数が多くても、トーップページを見てすぐ閉じられてしまうサイトに価値が高いとは言えない。
ＰＶ数との比較ではじめてユニーク数が意味を持つ。
しかがって、ユニーク数はＰＶほど重要ではない。

以上は、通常の視点である。
目的によってはＰＶよりもユニークが重要になることも、もちろんある。

複数ブラウザのスクリーンショット

サイトを作っていて気になる事の一つに、他のブラウザではちゃんと見れるかな？というのがある。
BrowserShotsでは、そんな人のために、複数のブラウザのスクリーンショットを無料で取ってくれるサービスだ。
さっそくウェブマイスタートップのスクリーンショットを取ってみた。

ＵＲＬを入力すると、順番待ちに入り、ブラウザごとの撮影予定時間が右に表示される。
見たところ、１０時間後や９時間後ばかり。
ちょっと実用には難しいかな。

あなたは何処からここへ？

サイトを運営していて気になることの一つが、どこから人が来ているか。
アクセス解析を導入し、リンク元をたどり、批判されていたら落ち込み、誉められていたら嬉しくなり更新をがんばるものである。
そこで得られるものは、訪れている人が自分のサイトにどのような価値を下しているかだ。
わかりやすく言えば、需要を知ることができることで、とても重要である。

しかし、毎日アクセス解析をチェックするのも大変な作業。
そこで登場したのが、新着リンク通知サービス『track　feed』。
新たな場所から人が訪れると、RSSで知らせてくるもの。
前提条件として、RSSリーダーを使用していることが必要だが、とても便利なサービスと言える。
アクセス解析サービスにも、このような機能があったらいいのにね。

Yahoo！カテゴリに登録

どうもここ数日アクセス量が伸びてると思ってログを見ていたら・・・・・。
当サイトのコンテンツの一つ、『スタイルシート倶楽部』がＹａｈｏｏ！のスタイルシートカテゴリに登録されていた。
メールをあさってみたところ、あったあった登録完了通知。
そろそろメールのフィルターを更新して、大切なメールが埋もれないようにしなければ。
何はともあれ、めでたいめでたい。

『スタイルシート倶楽部』は、かなり前からあるコンテンツだが、内容がまだ少ないのでずっとYahoo!カテゴリへの自薦をしないでいた。
だが、ちょっと気まぐれで、一週間前に自薦！（ついでにサイト更新！）
そしたら、なんと審査が通過したではないか。
もっと前に自薦をしていればよかったかな。

これで、当サイトの２つコンテンツがYahoo!カテゴリに登録されたことになる。
一つ目は本館で、ホームページ作成カテゴリに登録されている。

しかし、何かを作るって楽しいね。

解像度

モニターを変えてから、気がつくことが一つあった。
今の解像度は1024×768という、過半数の人に使われている解像度なのだが。（当サイト調べ）

スクロールバーを消しているサイト（ページ）

有名企業のサイトでもたまに見かける。
そして、もっとも多い1024×768という環境にもかかわず、ＩＥのフルクスリーンモードでぎりぎりという事が多い。
私はタブブラウザを使っているので、残念ながらとても不便な状態となる。
なぜスクロールバーをわざわざ消すのかも理解不能である。
小さなページではともかく、大きなページで消すのは止めて欲しいと思う今日この頃である。
タブブラウザを使っている人にとっては、小さいページでもバーが消される事自体がとても迷惑なことである。
タブブラウザはこれを標準で禁止してくれればいいのだが。

スクロールバーを消す場合、よく考えてから行って欲しい。
『本当に消す必要があるのか』
他人の環境を勝手に操作する行為となり、快適な操作を妨げる場合が多いで注意しよう。
これはマナーに関わる問題だと私は思う。

インターネット一時ファイル

最近、マウスオーバー時に画像を切り替えるＣＳＳの説明で、座標ずらしテクニックを多く見るようになった。しかし私は、この方法はベターであり、ベストでは無いと断言する。

知らない人に説明すると。リンク要素のバックグラウンドにＣＳＳで画像を適用し、マウスオーバー時に別画像へ切り替える応用テクニックである。
昔はJavaScriptでこれを行っていたが、今ではＣＳＳで行うのが主流となりつつある。お手軽だからね。
この時問題となるのが、画像切り替え時の読み込み。
ただたんに切り替えるだけでは、切り替えるたびに画像をサーバーへ読みに行ってしまう。
そのために、何も表示されない時間ができてしまい、ちらつく結果となる。
そこで現在、これを解決する２種類の方法が使われ始めている。

一つ目は、２つの画像を重ねて表示し、片方を消したり表示したりする方法。
常に裏の画像が表示されるので、切り替え時のちらつきが無くなる。

二つ目は、２つの画像を一つに連結し、表示させる座標を切り替える方法。
これは、ブラウザのキャッシュ機能を利用したもので、動作はブラウザとその設定に依存する。

前者はキャッシュに依存しない確実な方法だが、後者はクライアント環境に依存する。
このこともあり、スタイルシート倶楽部では、現時点では前者のみを紹介している。
しかし、この後者のデメリットがまったく知られていないのが現状である。
ちなみに両者とも、ＩＥ向けの方法であり、ネットスケープの初期設定ではこの技を必要としない。

座標ずらしが有効ななのは、ファイルの更新を調べない時である。
デフォルトでは『自動的に確認する』となっており、これはファイルの更新を一定時間調べないことを意味する。
すなわち、キャッシュが時効になるまでは、サーバーへのアクセスはしないということだ。
初期設定がこれなので、多くの人がこの設定になっている。そのおかげで、座標ずらしが有効な技の一つとなっている。

しかし、サイトを頻繁に更新している人ならば気が付くだろう。
この設定だと、サイトを更新しても、キャッシュの内容が表示されてしまい、更新後のページがなかなか見れないという問題が起きるときと起きない時がある。
知人からよく訪ねられるサイト作成時の問題で一番多いのがこれだ。
　知人：「更新してもサイトのレイアウト（画像）が変わらないんだけどどうして？」
　私：「キャッシュを消してみな。」
その後、毎回こんなことで尋ねられるのもなんなので、キャッシュの設定を変えてあげている。

私がお勧めするのは、「ページを表示するごとに確認する」という設定。
更新後のサイトの内容が見れなくて困ることが多い人は、これに設定すると良い。
ただし、ファイルの更新をチェックするために、表示に一瞬のタイムラグが発生する。
このため、座標ずらしテクニックの意味がなくなってしまう。
しかし、安定して最新情報を得られるようになる。（これでも１００％とは言えないが）

このことを知った上で、どの方法をとるかを選ぶと良い。場合によってどちらがいいかも変わってくる。
願わくば、ＩＥ側でこの画像ちらつき問題を解決してくれることだ。（技術的には簡単だ）

素材辞典イメージブック１０を買ってみた

素材辞典フォトバイブルを愛用しているのだが、使ってるともっと色々な素材で遊びたくなり、素材集売れ筋ランキング２位の素材辞典イメージブック１０を買ってみた。

まず、イメージブックの表紙。
どうみても、アイドル写真集にしかみえない！
女性の写真が半数を占めるのが売りとも言えるこの素材集。モデルの質もなかなか良い方ではないだろうか。

それにしても、素材辞典は安いし使いやすくていいね。
もっと欲しい素材集はあるのだが、やっぱいいやつはどれも数万するからな・・・。

フリーソフト配布コンテンツオープン

コンテンツが浅く広くなっている気がしないでもないが、私が作って使っているソフトを無料配布することにした。
配布するのは、今のところサイト関連のPHPソフトで、順次アップロードしていく予定である。
感想やバグ報告、要望等は、各ソフトのページにある掲示板に気軽に書き込んでもらえると嬉しいな。

＞フリーソフト配布場

Table to CSS

久しぶりにCSSネタを一つ。
最近はすっかりCSSが定着したウェブ業界ですが、まだまだレイアウトのためにテーブルを使う事が多い人もいるはず。
無理にCSSを使うのは効率が悪いが、むやみにテーブルを使うのも効率が悪いとも言えよう。

そこで、もっともTable使用頻度の高いレイアウト、『画像の枠組み』をＣＳＳで簡単で行う方法を簡単にご紹介。

テーブルで枠組みを作る場合、大雑把にはこうなる。
<table>
<tr><td><img></td><td>タイトル</td><td><img></td></tr>
<tr><td></td><td>文章</td><td></td></tr>
<tr><td><img></td><td></td><td><img></td></tr>
</table>

見てのとおり、とてもわかりにくく、面倒な記述となっている。
上記は説明のために単純化してあり、実際はもっと長いソースとなる。
これをCSSで見やすく簡単に扱ってみると。

<div class="box">
<div class="title"><h2>タイトル</h2></div>
<div class="content">文章</div>
</div>

非常に分かりやすいソースであり、使いまわしも簡単である。
上記は説明のための省略が一切無い、フルソースだ。
そしてCSSで枠組みの画像を指定するだけだ。
枠組みの画像を変えたいときは、CSSの画像アドレスだけを変更すれば良い。

用意する画像は４種類。
左上用、右上用、左下用、右下用。
cssの例を書くと・・・

div.title {
background-image: url(title-right.gif);
background-repeat: no-repeat;
background-position: right top;
}
div.title h2{
background-image: url(title-left.gif);
background-repeat: no-repeat;
background-position: left top;
}
div.box {
background-image: url(content-right.gif);
background-repeat: no-repeat;
background-position: right bottom;
}
div.content {
background-image: url(content-left.gif);
background-repeat: no-repeat;
background-position: left bottom;
}

このように、各要素の背景画像を指定して枠組みを再現する。
注意するのは、画像の表示する順番だ。
何故かと言うと・・・

title-left.gif : 左上用画像。横は短く高さがある。

title-right.gif : 右上用画像。横と高さ共にある。枠組みの横幅を可変とするため。

まず、title-right.gif を表示させる、次に title-left.gif を表示させる。
表示される画面は、その順序で合成された画像となる。

もし表示させる順番が逆となる場合。

このように、左の画像が、右の画像に埋もれる。

div.box div.contentの画像も、同じ考えでやれば、枠組みの完成である。

実際作るときのＣＳＳは、div.title h2 や div.content という内側に位置する要素で padding を指定してテキストが丁度いい位置になるよう調節しよう。

FavIconは設置してますか？

FavIconとは、ホームページのショートカットアイコン。
お気に入りに登録したときや、ホームページを表示したときに、アドレスの横などにでてくるアイコンだ。

これは、ユーザビリティー面でも意外と重要な要素だったりする。
これはホームページを分かりやすくする働きがある。
文字とは意外と覚えにくいもの。　でも小さなアイコンだと覚えやすい。
サイト名を忘れても、アイコンで思い出したりする。
沢山のブックマークに埋もれていても、アイコンでサイトを思い出してアクセスしてくれるかもしれない。
特にタブブラウザを使っている人は、このアイコンのありがたみがわかるはず。
どのタブがどのサイトかというのが、一目でわかる。

しかし、作り方がわからない人も多いだろう。
本館コンテンツでも簡単に説明してあるので見て欲しい。

ようは、16x16の画像ファイルを作り、それをICON化するだけだ。いたってシンプル。
アイコン変換ソフトをダウンロードするのも面倒だという人は、オンラインサービスでやると良い。
http://www.chami.com/html-kit/services/favicon/
ここで画像ファイルをアップするだけで即座に変化してくれる。
もちろん無料サービスだ。
あとは、自分のサイトにアップロードするだけで、htmlファイルは別に編集する必要は無い。

アイコンは別に凝る必要性は無い。
ただ、判別がつけばいいだけである。
まだの人は、是非やってみよう。

RSSへ変換サービスみっけ

今年はブログの年であった。
昨年からブロッガーが急増し、今年はそのピークだったと言える。
ブログサービスのＴＶＣＭまで登場するぐらい、ブログ界は大繁盛している。

その影響で、ブログで標準的に使われれている技術も急速に広まっている。
その一つＲＳＳと呼ばれる、記事の見出し一覧に使われているフォーマットだ。
先日はＲＳＳリンク集サイトを企業が立ち上げた。
記事のＲＳＳ化はこれからどんどん注目される技術と思って良い。
そして海外には、こんなサービスもあった。

NewslettersByRSSは、受信メールをＲＳＳ化してくれるサービスだ。
これは、メールマガジンやメーリングリストをＲＳＳ化しようというものだ。
自分でＲＳＳ化システムを導入するのが大変だという人は、こういったサービスを使うと良い。
登録すると専用メールアドレスが貰え、そのアドレスにメルマガを配信すればＲＳＳ化してくれる。
メルマガのＲＳＳ化は、さらに上をいくには、これから必修となってくるサービスとなるはずだ。

ブログツールを使おう

ブログツールとは、ブログサイトをつくるためのソフトのことであり、このページを作っているMovable Typeもその一つだ。
今回の話題は、ブログを作る事ではなく、従来のサイトをつくることに焦点をあててみる。

サイトを作る場合、手書きや支援ソフト(Dreamweaver等)を使った最も基本的な方法か、Xoopsのようなコミュニティーサイト構築ツールを使うか悩む人もいる。
他にはWikiといった皆でサイトを作るツールもある。
もっとさぐれば、フォーラムサイトが作れる多機能フォーラムだってある。
このように、世の中には目的に応じた様々なツールが存在している。

この時の選択脇に出にくいのがブログツール。
ブログツールはブログを作るために開発されたツールだが、なにもブログを作らなきゃいけないってことではない。
普通のサイトを作るのにも、ブログツールは有効な選択脇の一つになる。
実際にブログツールを使ってブログ以外のサイトを作っている人も多くいる。

では、ブログツールの有効性について考えてみよう。
・記事が全てデータｰベース化されるので、後からのレイアウト変更が自由自在に行える。
・更新履歴が自動で作成される。
・メニューも自動で作成される。
・記事本体を書くだけでよいので、更新が楽になる。
・月単位、日単位などのアーカイブが作れるので、ページが増えて検索に引っかかりやすくなる。
・ページごとにBBSを設置できる。
・はやりのトラックバック/PING機能が簡単に使える。

では、難点はどうだろうか。
・最初のサイト構築にもっとも時間がかかる。
ブログツール専用のタグの使い方を覚えなければならない。

これらから、ブログツールで普通のサイトを作るのは初心者にはきついが、いったん作れば後は非常に楽となる。
有効と思われるサイトは、決まったフォーマットのページが多いサイト。
当サイトで言えば、本館コンテンツがそれにあたる。

このようにして、視野を広げて各種ツールを別用途に使うと、快適なサイト運営を手に入れることも可能だ。

ちなみに当サイトの次コンテンツはブログツール(MovableType)を使用して作成中だ。
まだ未完成だが、こちらとなる。

最後に、他のツールの選び方を少し紹介。(検索して調べてね)
・Xoops
コミュニティーサイト構築ツールの代表ツール。
多機能サイトを作りたい人向け。数多くのプラグインにより簡単に様々ざまな機能を取り入れられる。
・PukiWiki (他にも様々なWikiが存在する)
データサイト構築ツール。（と私は思っている）
皆で協力してデータを提供しあうサイトが作れる。
ゲームデータや、プログラミングリファレンスなどでよく使われる。

サイト作成ソフト Nvuベータ公開

とうとうきた、Webオーサリングソフトのオープンソースなやつ！
簡単に言えば、Dreamweaverのフリーソフト版。
このNvuは、Netscape Composerを受け継ぎ、オープンソースとして高機能化したものだ。
ソースコードはもちろんのこと、各プロットフォーム用のバイナリも用意されている。
プログラマーな方なら、自由に機能拡張をして、それを再配布することができるのがオープンソースの良い所。

しかし残念なことに、今はまだ英語版しか存在していない。
とはいえ、近いうちに誰かが日本語化したものを配布しだすだろう。

どこまでの機能を搭載しているかはわからないが、ひょっとするとサイト作成ソフト業界に大ダメージを与えるほどの内容になっていくかもしれない。

かつて、ネットスケープは有料ソフトだった。他のブラウザも高機能なものは有料だった。
しかしマイクロソフトが無料でインターネット・エクスプローラーを配布したため、それらがまったく売れなくなり、最後には全て無料となった。
Dreamweaver等もこの二の舞となるのか、さらに引き離す高機能を搭載していくか、気になるところだ。

私のサイト管理法

サイトが大きくなったり、多くのサイトを運営しだすと管理が非常に大変になる。
普通にがんばって管理しても良いが、ここは効率よく管理する方法を考えてみはどうだろうか。

そこで、今現在の私のサイト運営環境を紹介する。
これはあくまで一例であり、もっと効率の良い方法があったら教えてくれるとありがたい。
同じように環境を公開したトラックバックも大歓迎だ。

■全情報管理： PUKIWIKI を使用。
サイト管理に欠かせない情報を逐一記録。
各サイト(コンテンツ)へのリンクや、各官吏画面へのリンク、よく使う情報へのリンクや大切なメモ等を記録。
これをブックマークなどでやっていたら非常に大変だ。
もちろん参照元隠しのクッションページを使って、管理ページのURLを隠す。
管理画面はパスワードをかけるなどの処置は最低限行う。

■サイト作成ツール： Dreamweaverを使用。
もはやウェブデザイナー定番の最強ソフト。
無駄な時間を使わずにコンテンツ充実に集中できる。
機能を使いこなすほど作業効率が上がり、より高度なサイトが手軽に作れるようになる。

■通常エディター： EmEditor
これも古くからバージョンアップを重ねてきた物で、現在最強とも言えるテキストエディター。
様々な文字コードがネット上に存在する今、こういったエディターが無ければ不便だろう。
全てをDreamweaverで行っていも良いが、起動に時間がかかるので、こういったテキストエディターがあると便利。
右クリックの送るに登録しておくと、さらに便利。

■ メモツール： 紙
ちょっとしたメモに非常に便利なツール。似た目的のツールが色々あるがこれが最強と言える。
また、Wikiとは別目的のデータｰベースとして使用すると良い。

■ ブラウザ： FirFox
現在最強の名をほしいままにしているブラウザー。機能拡張が自由に行え、かなりの高機能になるので便利このうえない。

■ RSSリーダー： Bloglines
情報集めに欠かせないのがRSSリーダー。
素早く情報をキャッチし、ブログを書くという人には必修ツール。
多くのリーダーが存在する中、これはあらゆる機能が搭載された万能リーダーと言える。
登録したらまず、「通知機能をダウンロード」と「ブックマークレットの簡単登録」を行おう。
通知機能をDLし、インストールしたら、タスクトレイに駐在するので右クリックして設定。

他には、素材作成にPhotoshop、FTPソフトにFFFTPなどを使っている。

ということで、便利ソフトを一まとめに紹介した。
もちろん人によっては違う場合もあるだろう。
環境構築の参考にどうぞ。

トラックバックレンタル

最近のブログブームの影響で、従来のホームページにもブログと同じ機能を提供するサービスもでてきている。~ その一つがトラックバック機能を提供する『[[レントラ>http://rentra.zansin.jp/]]』~ これは特に、ブログツールではなくニュースツールを使用している情報サイトには便利なのではなかろうか。~ もちろんPINGも送る事ができる。~ ホームページはどんどん高機能に便利が標準となりつつあり、未来はどのような環境となっているのか楽しみだ。~ これは逆に、ホームページ作成者の必要知識レベルが止まる事無く上がっている事も意味する。~ いつの日か、義務教育課程でホームページ作成科目が追加されるかもしれない。~

Yomi-Search Ver4.20登場

リンク集作成ＣＧＩの最大手[[Yomi-Search>http://yomi.pekori.to/]]がついにバージョンアップした。~ 内容はバグ修正のみで機能追加は一切無し。~ 当ウェブマイスターでもこのＣＧＩを使用しており、ちらほらバグによる問題も起きているので近いうちにアップデートする予定。~ その後、色々と弄りまわしてさらに機能を改善していきたいと思っている。 また、これと同時に動作テスト目的に設置してある[[本家リンク集>http://yomi.pekori.to/s/yomi.cgi]]のデータがリセットされ、登録サイトの募集が開始されている。~

日本語ドメイン

日本語ドメインが使えるようになってからだいぶ経つが、ほとんどの人が「見たこと無い。」と言うだろう。
調べてみれば大手企業各社は日本語ドメインを取得しているし、個人でも意外と多い。
しかし、大抵は日本語ドメイン取得前からサイトを持っている。
そういったところは、日本語ドメインでのアクセスがあったら、通常の英数字ドメインへリダイレクトするようになっている。
実はウェブマイスターのトップページもこの方式になっている。
http://ウェブマイスター.com/
Punycode : http://xn--eckdd7e4azk6b9n.com

一番目のＵＲＬは、直接日本語ドメインを記述したものである。
このＵＲＬでアクセスするには対応しているブラウザが必要となる。
二番目のＵＲＬは日本語ドメインをPunycodeと呼ばれる英数字へ変換した物だ。
二番目のＵＲＬならば、全ての人がアクセス可能となる。

現時点では、日本語ドメイン利用可能者はどのくらいだろうか。
最近のパソコンに標準で日本語ドメイン対応プラグインがインストールされていれば期待できる。
そうでなければ、日本語ドメインへのアクセス量は絶望的だ。
プラグインを自らインストールする人の数はたかがしれているだろう。

そこで、頼もしいサービスがあるので少し紹介しておく。
::日本語jpナビ
日本語jpドメインの処理に対応していないブラウザでのアクセスがあった場合に、案内ページへと導くものだ。
日本語ドメインを一般に広めるため、こういったサービスに各業者が積極的に取り組んで欲しい。
一番はやいのが、インターネットエクスプローラーが標準で対応することだが。

お使いのブラウザが日本語ドメインに対応していない場合はこちらへ。

では、ブラウザ環境が普及すれば日本語ドメインを普通に直接つかえるか。
答えはわずかにＮＯだ。
掲示板などでのＵＲＬ自動リンク機能（記事中のＵＲＬ文を自動でリンクにする機能）は正しく機能しないが普通だ。
一番問題となるのがメールアドレスだろう。メーラーももちろん日本語ドメインに対応しているものでないと無理だ。
このように、ブラウザ以外でも日本語ドメイン処理に対応していない環境には使えないということである。
したがって、日本語ドメインのみしか取得していない人は、この現状ではそれなりの覚悟が必要となるであろう。

以下、私がどこでドメインを取ってるか紹介。
・バリュードメイン
中級者以上向け。ドメインをフル活用したい人、安くすませたい人向け。
ウェブマイスターの日本語ドメインをここで取得・管理。サーバーレンタルもここを使用中。
・★可愛いレンタルサーバLOLIPOP!
初心者向け。簡単に安く済ませ、ある程度ドメインを使いこなしたい人向け。
ウェブマイスターの英数字ドメインはここで取得管理。一部のサブサイトはここのレンタルサーバーを使用。

ランキングサイトのあれこれ

ホームページを作成したらランキングに参戦する人も多いことだろう。~ そこでどのランキングに参戦するか、どれをメインで参戦するかを決める事になる。~ そこで、ランキングサイト選びのヒントに少し触れるとする。~ まず、ランキングの仕組みを見てみる。~ 純粋なランキングサイトの場合、ランキング参加用コードを自分のサイトに張り、そのリンクから訪れた人の数でランキングが決まる。これがランキングに表示されるＩＮのポイントに影響する。~ 凝ったランキングでは、ＯＵＴポイント（ランキングサイトから該当ホームページへ行く人の数から算出）も順位に影響する。~ ここで注目するのは、ランキング共通用語であるＩＮとＯＵＴである。~ これは、単純に訪問数を表している場合もあれば、訪問数を数倍から百倍に増幅させた数値と様々だ。~ あと、大抵ＩＮの数は同じＩＰによる連続カウントは行われない。(純粋なランキングサイトは一日単位)~ ＯＵＴは順位に無関係ならば同じＩＰで連続カウントされる場合がほとんどである。~ これら仕掛けはそのランキングサイトが活発だと錯覚させ、多くの人を招き入れるための罠である。~ 実際、これら仕掛けをしているランキングサイトは成功し、多くの人が出入りするようになる。~ 結果、罠にはまってもなんら問題なく、逆に良かったとなるケースが多いとも言えよう。~ 何を言いたいのかと言うと。IN/OUTの数値に疑問をもっても無視しようということである。~ もう一つ注目すべきは、ランキングリセットのタイミング。~ ランキングサイトによって、一日単位、週単位、月単位でランキングリセットが行われる。~ そして、人気ランキングサイトではリセット直前から戦争が開始される。~ リセット直前に自分のサイトからそのランキングサイトへ客を集中的に流すようにするのだ。~ そうすることで、リセット直後からランキング１位を狙う。~ そう、リセット直後はランキング上位を簡単に狙えるわけだ。~ これでランキング上位になれば、無論そこから逆に人が自分のサイトへ沢山流れてくる。~ この仕組みを理解しうまく活用すれば、より多くの客を確保できるということになる。~ 詳しく書くと怒られるので、そこは各自で考えて工夫してみよう。~ 次にランキングサイトの形式を見てみることにする。~ ランキングサイトでもっとも効果があるのは、自分の参加するランキングページへ飛んでくれるランキングサイトだ。~ もっとも効率的に人が出入りする形態である。ただし人気のあるランキングでないとダメだ。~ ランキングサイトの形式にはもう一つある。ランキングページへ飛ばずに、ランキングサイトのトップへ飛ぶ形式だ。~ ランキングサイトのトップには様々なカテゴリのランキングページへのリンクとなる。~ これは、人の出入りが少ないランキングは救済されるが、逆に多いランキングではマイナスとなる。~ 人が分散されやすく、また、同ジャンルランキングへ行かずに閉じられやすい。~ ランキングリニューアルと同時に形式が逆転し、一気に訪問者数が減ることもあるので注意。~ 極端な実例では、ランキングそのものが大幅縮小化し、効果が大幅減となったサイトもある。~ これは、ランキングを張って放置ではなく、よく解析したほうが良いということに繋がる。~ もう一つ、通常のサイトのトップページに小さなランキングを貼り付けているところもある。~ ランキングサイトではないが、サービスの一つとしてランキングも行っているというやつだ。~ [[ウェブマイスターのトップページ>http://www.webmeister-jp.com/]]右にあるランキングがそれにあたる。~ これは通称「逆リンクランキング」と呼ばれるもので、専用リンクコード無しで単純に訪問客がどのサイトから訪れたかをランキングするものだ。~ 最近はこれを導入するサイトも非常に多い。それだけ効果があるからである。~ ランキングサイトでは無いので、そのサイトを宣伝しやく、人を流せやすい。~ 自分のサイトでもそのランキングを行えば、リンクを張ってもらう可能性が増える。~ とまぁ、便利なシステムである。~ 人気サイトとなれば、このランキングのみで相互に客が出入りしている状態というのも珍しくない。 と、色々書いている私のほうはどうかと言うと、半年も放置した結果、訪問者数激減となっている。~ 日ごろから注意して最適化を施さないとだめということを身をもって知ったしだいである。~ もちろんコンテンツの充実もである。~ そこで最近注目したのが、ランキングに力を入れず、検索で訪れやすいページ作りである。~ これについては、またいつか書くことにする。~ やりたい事が多くて中々先に進めない今日この頃である。~ 最後に、ブログ用ランキングを簡単に紹介する。通常サイト用ランキングは[[マイスタートップの中段>http://www.webmeister-jp.com/]]を参考にどうぞ。 ・[[人気サイトランキング blog>http://ninkirank.misty.ne.jp/29/enter.cgi?id=wmblog]]~ 有名なランキングサイトに新たに加わったブログカテゴリ。~ 新しいカテゴリなだけあって参加サイトは少なめ。~ ・[[with2 人気blogランキング>http://blog.with2.net/link.php/2500]]~ ブログ界ではメジャーなランキング。多くのブログが参戦している。~

タグふれんず

ふと、面白いサービスを発見したので紹介。~ [[タグふれんずと>http://tagfriends.jp/]]は、自分のサイトに専用タグを埋め込んで表示させる形式のアバターコミュニティーである。~ 簡単に言えば、共有掲示板のアバターチャット版となるのだろうか。~ これと似たサービスはリブリという育成型アバターチャットでも行われているが、タグふれんずは特化しているだけに使い勝手がよさそうだ。~ グラフィックは良いとは言えないが、なかなか面白いツールで、もちろん各ブログにも対応している。~ 実際に使っているサイトを見たい場合は、Google当で検索してみよう。~

QRコードを作ってみよう

今じゃ知らない人は居ないQRコード(携帯で読み込めるバーコード)。活用している人もだいぶ増えてきた。~ でも、どうやって作るの？という人も多いと思う。そこで便利なサイトを紹介しよう。~ [[QRコードのすすめ>http://qr.quel.jp/]]~ このサイトに行けば、好きなQRコードを無料で手軽に作れる。~ 名刺に利用したり、携帯サイトへの案内として使ってみよう。~ また、手紙などに秘密の暗号として印刷するのも面白い。

IEで画像を正常に保存できい時の解決方法

長いことＩＥ(インターネットエクスプローラー)を使っていると、ソースの表示を行おうとしても無反応だったり、画像をドラック＆ドロップして保存しようとしても、それができなかっり、右クリックから画像を保存しようとしたら無題.bmpとなることがある。~ 原因は、キャッシュファイルにトラブルが発生しているからだ。 ＩＥのキャッシュファイルは非常に不安定で昔からバグが多く、ファイルが多くなると様々な障害が出やすくなる。~ なので、こういった問題が発生したらキャッシュファイルを全て消さなくてはならない。~ ＩＥ６ならば、[ツール][インターネットオプション][ファイルの削除]の順に押していけば良い。~ また、事前にこうならないよう設定することも可能だ。~ [インターネット一時ファイルの項目]にある[設定]で、使用するディスク容量を小さくする。~ １００Ｍ程度にしておけば、めったにキャッシュファイルが壊れることは無いだろう。~ この数字が大きいほど、キャッシュファイルが壊れる可能性が高まっていく。 ついでにここで[ページを表示するごとに確認をする]になっているかをチェックしよう。~ ホームページを作成する人は、かならずこれに設定しなくてはならない。~ でなければ、ページを更新してもキャッシュにある古いデータとまざり、正常に最新のページを表示させることは不可能だ。

マウスチェイサー

パソコンの性能があがるにしたがい、最近は様々な面白いマウスチェイサーが存在する。 マウスチェイサー(mouse chaser)とは、マウスカーソルを"何か"が追っていくもののことで、JavaScript等を使って文字や絵がマウスを追うようにした物を指す。~ しかし日本では、これのことをマウスストーカーと呼ぶ人のほうが多い。~ 英語を知っている人は、マウスストーカーと呼ぶのは間違いだと思うだろう。普通に命名すると マウスチェイサーになる。（まったくストークしてないもんね）でも広まってしまったものはしょうがない。 なかなかびっくりする動きをする物も多いので、知らない人は一度見てみるのもいいだろう。~ ただし、うざったいと嫌がられる場合もあるので、そこは臨機応変に。~ 現在、プライベート的な個人サイト間で流行っている。 Yahooや[[Google>http://www.google.co.jp/custom?hl=ja&inlang=ja&ie=UTF-8&oe=UTF-8&c2coff=1&cof=AWFID%3AFSjabbbfc4550aa6b0cd%3BL%3Ahttp%3A%2F%2Fwww.webmeister-jp.com%2Fimg%2Fbanner%2Fgooglesarch_b.jpg%3BLH%3A60%3BLW%3A340%3BAH%3Acenter%3BS%3Ahttp%3A%2F%2Fwww.webmeister-jp.com%2F%3B&domains=webmeister-jp.com&q=&btnG=Google+%E6%A4%9C%E7%B4%A2&sitesearch=]]等の検索で、マウスストーカー 、 mouse chaser 、 マウスチェイサー のいずれかで検索してみるといいだろう。

アニメGIF作成ソフトnatm

アニメGIFを手軽に作成できるツール [[natm>http://www.geocities.co.jp/Playtown-Spade/6515/brokenitemtop.html]] がリリースされた。 この手のツールは数多く存在するが、このツールのもっとも独特的な部分は、エラーメッセージだろう。 是非エラーメッセージを見てもらいたい。~ ともあれ、これさえあれば手軽にアニメGIFが作れるので、作りたい人はためしてみよう。