掲示板リニューアル

　掲示板をリニューアルした。これです。

　どしどし書いてやってください。

　Web製作らしく、リニューアルにあたって利用したところを紹介しよう。

　まずは、旧掲示板はレンタル掲示板だったが、今回のリニューアル版は独自ドメインページにCGIを設置した。その掲示板プログラムはCool Boadを利用させてもらった。さっぱりとしたデザインの割りに高機能なところがおすすめ。もっとCGI等を改造しようかと思ったが、なかなかいいアイデアが浮かばず気力が尽きたので、タイトル画像とアイコンを入れ替えたほかはそのまま使用。各種設定変更はもちろん独自のタイトル画像やアイコンの入れ替えもWeb上の管理画面からできるので、よっぽどの新機能追加をしない限りプログラムをいじることはなさそうだ。デザインの変更も外だしHTMLを編集すればCGIプログラムに直接手を加える必要がないし。まだデザインの編集はしていないけど。デザイン変更等のためにプログラムをいじると思わぬバグが出て手こずることが多い（経験者談）ので、これは便利。

　タイトル画像は無料バナー作成工房さんを利用。ここは独自の文言をバナーに入れることができるのだが、漢字も使用できて便利だ。気が向いたら競馬のお時間の新しいロゴでも作ろうかな。

　そしてアイコンはなまらファクトリーさんで配布されているフリー画像を使用させてもらうこととした。実はこのアイコンを選定するのが結構時間がかかった。既に誰かが投稿した場合、あとから差し替えってなわけにもいかないので、どういう路線でいくかを慎重に検討する必要があるし。適度にクールで適度にほのぼのしていて適度にかわいいという理由でなまらファクトリーさんのアイコンを使わせていただくこととした。掲示板用アイコン以外にもいろいろWeb素材があるので、ホームページの別な部分でも利用することを検討してみよう。

Firefoxの環境移行方法

　Firefoxで今使っている環境を他のPCに移行したい。それが意外と簡単にできることが判明したので手順をメモっておく。

　ブックマークやCookieなどはもちろん、拡張機能も含めてFirefoxの環境がすべて移行されるので便利。拡張機能あってのFirefoxだが、複数の環境で機能や設定を揃えるのは面倒だと思っていたが

手順１：移行先のPCにFirefoxをインストールする
　移行元と同じバージョンをインストールします。
　標準で問題ないですが、インストール最後の手順で、Firefoxを起動しないようにしてください。
　
手順２：移行元のマシンのFirefox環境ファイルをフォルダごと移行先のマシンにコピーする
　C:\Documents and Settings\[ユーザー名]\Application Data\Mozilla\Firefox
　配下の全てのファイルを新マシンの同フォルダへコピーします
　（ただし"Crash Report"というフォルダはコピーしなくても構いません）

手順３：新マシンでFirefoxを起動する
　これだけで移行元と同じ環境で立ち上がります

　PCを買い換えたときだけではなく、複数のPCで同じ環境を使用したい場合（たとえばデスクトップとノートとか自宅と会社とか）にも利用してみよう！

CSSだけで作れる吹き出しボックス

画像を一切使わずにCSSだけで吹き出しボックスを実現できるという技を発見したのでメモ。

これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌

これは便利そうなので今度試してみよう。

画像を使って吹き出しとかそういう中の文字と連動したデザインを実現しようとすると、どうしても見ている環境によっては文字と画像の位置がずれたり、はみ出したりする。それを防ぐにはCSSで文字の大きさをピクセル単位で強制的に指定するというという手もあるのかもしれないが、私のポリシーとして、「文字の大きさは見る側で自由に変えられる」様なページを心がけているのでそれはできない。文字の大きさはCSSのfont-size何パーセントとか、fontタグのプラスマイナスの様な相対指定以外はめったに使わないことにしている。

ちなみに、上記は日本語でかかれたブログ記事を紹介したが、そのネタ元となっているのがFun With CSS Shapes - Nettuts というページ。英語のページだが、いろいろとCSSを使ったテクニックが紹介されているようなので、こんどじっくり覗いてみよう。

色見本・色の名前

色見本のページですばらしいページを見つけたのでメモ代わりも兼ねて紹介する。

WEB色見本 原色大辞典 - HTML Color Names

かなりのサンプル数があり、また、単純に色とそれを表す16進数などのコード値を紹介しているだけではなく、「色の名前」についても記載されている。色の名前を調べたいときや、色の名前を聞いたときにそれがどんな色なのかを調べるのにも便利である。

原色(ブラウザで名前が定義されている140色)、和色(日本の伝統色)、洋色、webセーフカラー、パステルカラー、ビビッドカラーなど、さまざまな種類の「色」の名前を調べることができる。別にwebデザインをする場合だけではなく、「この色にはこういう名前があったんだ」とか「こういう色の名前を聞いたことがあるけど、それはこうい名前だったんだ」というような教養レベルで眺めているだけでも楽しい。ぜひおすすめである。

あ、もちろんそれどれの色が16進数のコードでどんな値なのかは記載されています。そのための色見本なんだし(^^;。

それから色の名前といえばWindowsのフリーソフト「すぽいと君」というツールのも便利である。画面上のカーソルが当たっている場所の色コードを調べるツール、いわゆるスポイトツールなのであるが、単にコード値だけではなく、その色の名前まで表示してくれるという代物だ。もちろんHTMLやCSSでそのまま色情報として利用できる16進数のコードもあるので、web製作を行なっている人はぜひ使ってみよう！

Jimdoでページ作ってみた

　KDDIウェブコミュニケーションズがドイツの会社と提携して始めたオンラインのウェブページ作成サービス「Jimdo」の日本語版が公開された。

　Jimdoはウェブページの編集画面と完成画面を同一のインターフェースで表示するため、HTMLやCSSの知識がなくても直感的にページを作れる点が特徴だそうである。ページ編集、フォーム作成、ブログ、ソーシャルネットワーキングサービス（SNS）、フォトギャラリー、アクセス解析、外部サービスとのマッシュアップなどの機能を無料で利用できるらしい。まだ、全部の機能は試していないが。

　というわけでどんなものか感触を試す意味も込めてJimdoでページを作ってみた。とりあえず作ってみたバージョンで、試験運用中だがSmartBoy's Jimdo-Pageというものを作ってみた。興味のある方は訪問してみてください。まだ「内容が無いよう」状態だけど(^^;

　使い勝手は慣れれば使いやすいかな･･･って感じである。ブログよりも融通の利いたページを作れるのが特徴だといえるだろう。これからはこういうツールが主流になる時代がやってくるのかな？

はてなダイアリーで ping 送信先を追加する方法

Twitbacker - Pingでブログの更新情報をTwitterに！！

こんなツールを見つけた。Twitterユーザにとっては便利なツールである。しかし、はてなダイアリーではping送信先をはてながデフォルトで用意したもの以外を追加で設定できないからな･･･。

と思ったので裏技を考えてみた。はてなの設定ではデフォルトping送信先を追加・変更はできないのだが、編集画面のトラックバックURLのテキストエリアにデフォルトでURLが表示される様にすればいいのである。

通常は空白のテキストエリアにデフォルトで文字を表示する様にするには、Firefox の場合だとGreasemonkey という拡張機能を使えばよい。「Greasemonkeyって何？どうやって使うの？」という人はGreasemonkey入門 〜よくわかるグリースモンキーの使い方 〜というページに分かりやすく書かれているので、そちらを参照していただきたい。

ここでは、そのGreasemonkeyでデフォルトトラックバックURLを指定する方法を紹介する。
以下の様なスクリプトでデフォルトトラックバックURLが設定できる。

Greasemonkeyの「新規スクリプト」で適当な名前と適当な名前空間をつけて、実行するページを"http://d.hatena.ne.jp/yourname/edit*"とする。ここでyournameはユーザIDである。たとえばこの日記だと"smartboy"。
そして以下の様なスクリプトを記述すればよい。スクリプト自体は割りと簡単にできる（少なくとも私はGreasemonkey を用意したりすることの方が面倒だった･･･。）

// ==UserScript==
// @name           hatena track
// @namespace      http://d.hatena.ne.jp/yourname/
// @include        http://d.hatena.ne.jp/yourname/edit*
// ==/UserScript==

//この配列にping送信したいURLを書く
var pingurl =["http://ping.blogmura.com/xmlrpc/xxxxxxxxxxxxx",
              "http://twitter.cross-poster.com/ping/xxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
             ];

var tb = document.getElementById("textarea-tburl");
tb.innerHTML=""; //この行は確認後編集画面に戻った場合にURLが重複しないように一旦内容をクリア
for (i=0;i < pingurl.length;i++){
	tb.innerHTML += (pingurl[i] +"\n");
}

この例ではTwitbackerだけではなく、にほんブログ村へのpingも設定してある。要は配列 pingurl に(Javascriptの配列の要領で)設定したいURLを列挙しておけばよいのである。
（複数のURLが指定できるように配列を使用して汎用性を持たせてみました。）

というわけで Firefoxを使っている人は試してみよう！
なお、使用はあくまで自己責任でお願いします。特に既にGreasemonkeyで別のスクリプトをはてなダイアリーに対して使用している場合競合して誤動作する可能性があるので。
というかはてながping送信先URLを追加できるようにしてくれたらこんなことする必要もないのだが･･･。

オブジェクト指向的思考回路？

　今日の話題はちょっと専門的だが、ウェブページを作成していて思うことである。オブジェクト指向に興味の無い人は読まないほうがいいと思う。何を書いているのかわからないだろうし時間の無駄なので。

　スタイルシートとHTMLのタグとを紐付けるために使う"class"という属性はスーパークラス←→サブクラスの関係を持たせて、つまり継承を用いて定義できないものだろうか？

　「クラス」といえば、オブジェクト指向に慣れている人間にとっては当然「継承」可能な概念だと考えてしまうんだよな。クラス的なものを設計していると「他のクラスを拡張したもの」とか「他のクラスと似ているけど、部分的にちょっと違う部分があるもの」を使いたくなることは多々あるのだが、そのたびに同じようなコードを書かなければならないし、書くだけだったらコピペすればいいのだが、ソースが肥大化するしメンテしづらい。ソースを一見しただけで違いがわかる様じゃないとね。

　また、Javascript のインスタンス（オブジェクト）にしてもしかりである。こちらはインスタンスという概念があるのにクラスという概念が無い。オブジェクト指向の様に見せかけた非オブジェクト指向言語である。強いて言えば「オブジェクトという概念が存在する言語」といったところか。そもそも「Java」script と名乗っていながら全然Javaっぽくないし、紛らわしいのでJavaと付く名前はやめるべきである。それはそうと、せっかくオブジェクトという概念があるのなら「継承」というオブジェクト指向の基本的な概念ぐらい取り入れられているべきだと思うのだが･･･。