してログ

嘘だろ~、っと半信半疑で覗いたら、ほんとでした。本家アドビの CS2 ダウンロードページに、シリアル番号と一緒に公開されています。利用にはアドビにユーザー登録が必要ですが、誰でも登録可能なので本来数十万円するような高価なソフトウェアが(旧バージョンとはいえ)無料で利用可能となっています。アドビはオラクルと並んであんまり好きじゃなかったんですが、これで一気にファンになってしまいました。

ただし、記載をよく読んでみると「既存の正規ライセンスを所有されている」人が対象のようです。アクティベーションサーバーの停止により利用できなくなるユーザーへの救済措置らしいです。が。

Adobe - CS2ダウンロード
http://www.adobe.com/jp/downloads/cs2_downloads/index.html
無料で使えるソフトウェア達
  • Creative Suite 2
  • Acrobat 3D 1.0 for Windows
  • Acrobat Standard 7.0
  • Acrobat Pro 8.0
  • Audition 3.0
  • GoLive CS2
  • Illustrator CS2
  • InCopy CS2
  • InDesign CS2
  • Photoshop CS2
  • Photoshop Elements 4.0/5.0
  • Adobe Premiere Pro 2.0

Google Maps API V3 のマーカーに追加になった、size と origin を使うと、大きい画像の一部分をアイコン画像として使うことができるようです。メリットとしては、サーバーとの通信を減らし読み込み時間を改善できる、ということなのでしょう。

昨日の Boeing 747 flight! に、上のような画像を用意して試してみました。例えば、赤いマークされたアイコンを表示するには、下記のようにします。

var mkr_plane = new google.maps.Marker({
	position: new google.maps.LatLng(37.954075, 139.113039),
	icon: new google.maps.MarkerImage("B747-400-99.png",
		new google.maps.Size(99, 99), // Size
		new google.maps.Point(189,99), // Origin
		new google.maps.Point(50, 50)), // Anchor
});

ちなみに、変更前はマーカーイメージ画像そのものを入れ替えてアニメーションさせていました。この方法を使った結果、チラツキがまったく無くなり非常にイイ感じです。

Boeing 747 flight!

GoogleMaps 201314

Google Maps V3 で少し遊んでみました。ボーイング747が Google マップ上を飛行するだけのものです。九州あたりを離陸した飛行機は新潟空港へ向かいます。目的地のマーカーはドラッグでき、移動させればどこへでも飛んで行くことができます。

Boeing 747 flight! (Google Maps)

久しぶりに算数をしたので、あんまりスマートな書き方にはできませんでした。加速度を入れていないので、旋回しても速度は落ちず常に一定の速度で飛行します。あと、日付変更線の付近をまたぐと、遠い反対側へ向かおうとしてしまいます。

このB747のイメージは、HDD の整理をしていて見つけたもので、今回は15°毎に回転イメージを作ってみました。もう少し細かくしても良かったかも知れません。

メインコンテンツが少ないときに、不恰好になってしまうサイトデザインになってしまうこと、ありませんか? このサイトもそうでした。メインコンテンツが長く詰まっているページだとイメージどおりでも、数行程度の短いコンテンツでは、広告ばかりが目立ち、コンテンツの終わりの枠が、赤ちゃんの“よだれかけ”のように捲れ上がってしまいます。

そんなときに便利なのが、min-height です。これを div などに指定すると内容が少なくてもそれ以下のサイズにはなりません。これを使えば、フッタにゴテゴテ入れた広告が必要以上にせり上がることも無くなり、非常に見た目がよろしくなります。マージン取るのに <br /> たくさん入れるのは止しましょう。

<div class="contents_outer" style="min-height:100em;">
  <div class="contents" style="min-height:40em;">
    ... メインコンテンツ ...
  </div>
  <div class="ad"> ... 広告のコード ...</div>
</div>

この例は、広告がトップから 40em 以下に上らないようにし、コンテンツの枠自体も 100em を切らないように制限した、当サイトの CSS の指定です。

YUI reset した後の CSS でいつもネックだったフォーム要素のデザインについて少し調べてみました。ここで言うデザインとは、グラフィックを使ったリッチなやつではなく、標準の要素の文字サイズのばらつきや、ボタンの高さについてです。文字サイズについては CSS で単に font-size 指定すれば揃えられます。

ボタンの高さ指定はなぜか無視されます。結論から言うと、ボタンが inline 要素として定義されているためのようです(インライン要素は高さ指定が無視されます)。これは、下記のように display: inline-block として定義しなおして解決できました。

input[type="button"],
input[type="submit"],
input[type="clear"],
input[type="file"] {
	display:		inline-block;
	height:			2.5em;
	padding:		0.2em;
}

ただし、file タイプだけは残念な表示(ブラウザによっても異なる)になってしまいました。また、Firefox のみ半角英数字だけのボタンと、全角文字入りのボタンで1ドット違っています。これは半角英数字を日本語フォントで表示させてみても解決できず、課題として残ってしまいました。しかし、遠目で見れば、その違いは分からず違和感がある程度です。今のところ、ボタンの中に全角文字を入れる、くらいしか解決方法は無いようです。

昨日取り付けたばかりのコメントシステムだが、最初のコメントは案の定、スパムコメントでした。しかも何と早いことか。昨日の今日で、バ○アグラがなんたらとか言う英語のスパムが書き込まれてしまいました。検索エンジンのスパイダーと違って、UA 偽装してたりするだろうから、本当に迷惑な話だと思います。

こういったスパム対策はユーザーの利便性を損ねないと完全に解決することができないだけに、いつも悩む点であり、ウェブで何かを運営する際に萎えてしまう点でもあります。この先、画像認証を導入するのか、承認制を導入するのか、ロボット判定を頑張るのか、何れにしても楽しくない作業が待っています。

よく使われる画像認証は、本来と無関係な作業をユーザーに強いてしまう、障害を持った人を排除してしまう(聴覚を使った認証もあるが)、などあまり好きな解決方法ではないです。画像認証以外の人間らしさの判定も幾つかあげてみます。

  • あり得ない速度での投稿(フォームの提供から投稿ボタンを押されるまでの時間が余りにも短いとき)
  • ページ内の画像などが要求されていない(フォーム狙いでクロールされているなら画像は要求しないだろう→見えない画像タグに投稿トリガーを仕込んでおく)
  • JavaScript でキーイベントを見る(フォームに実際入力されたか判断できそう)
  • JavaScript で確認ダイアログを入れる
  • submit ボタンをやめて、通常ボタンと JavaScript で投稿させる

まあ、上にあげたようなことは、昔あるプロジェクトで散々やりましたが、結局どれも突破されてしまうんですよね。画像認証にしても OCR と組み合わせて突破するプログラムもあるし、JavaScript で色々工夫しても実際のブラウザを自動運転するようなやつが相手だと意味が無いです。

キャッシュファイル処理などでよく使う手法で、mod_rewrite を使い実ファイルが存在していればそれを表示し、まだ作成されていなかったらスクリプトを動かしてレスポンスを返しつつファイルを保存する、という常套手段があります。それを実現するには、下記のようにしますが、少し盲点があります。

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+\.html)$ /_system/doc.php?d=$1
RewriteRule ^(.+\.htm)$ /_system/doc.php?d=$1

一行目の指定は、実ファイルがあれば RewriteRule を適用しない、という意味になりますが、これは直後の RewriteRule にしか効かないため、三行目の指定は実ファイルがあってもスクリプトが常に動くことになります。三行目も同様にしたい場合は、下記のように書きます。

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+\.html)$ /_system/doc.php?d=$1
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+\.htm)$ /_system/doc.php?d=$1

分かっていないと「何で~」と悩むに違いない盲点です。

Open Web Analytics は、PHP と MySQL で作られたオープンソースのアクセス解析システムです。画面は、Google Analytics にそっくりで、ぱっと見たら見分けがつかないくらいよく似ています。

Open Web Analytics
http://www.openwebanalytics.com/

インストールは、MySQL のデータベースを作り、サイトに展開した OWA の install.php を実行すれば、後は指示に従うだけとなります。インストール後は、Google Analytics と同じような JavaScript をコントロールパネルから発行でき、解析したいウェブサイトに埋め込むことで解析が始まります。また、埋込み用 PHP コードもあり、もっと細かく制御することが可能です。

機能的には Google Analytics の代わりとして十分であり、代替えの選択肢となり得ます。

制作中の当ブログにコメント機能を追加しました。コメント機能はブログとは独立した実装にして、他の一般ページでも利用できるように工夫してあります。当サイトのCMSも同時並行で開発していますが、ドキュメントやシステムのリリース時に、ひとつタグを入れるだけでコメント欄を付加することができます。

トラックバックについては必要性が感じられないことから、しばらくは実装しません。仕組みとしはコメントとほぼ同じで、POSTデータを外部から受け取れるようにするだけです。コメントシステムと統合しても良いと思います。

あと、ソーシャル系ボタンをコメント欄に移動しました。Facebook は URL パラメータがあるので、リクエストされた URL を与えています。Twitter と Google+ はそれをボタン側で行うようなので、どのページに設置してもコードを変更しなくて良いようです。ただ、デフォルトドキュメントが省略された場合と、指定された場合でカウントがどうなるのかちょっと分からないです。これらボタンは、最近のトレンドなので入れただけで、自分ではまず使わない機能なんですけどね...。