他山之石～跡地 -Cyprus on the Web-

　初音ミクさん。
　台詞をつけるなら「・・・なにか？」かな。
　もしくは「・・・楽しいですか？」とか orz

　マイミクのさじさんかな？
　北海道の方にこんな拍手を頂いたので...

ふおぉっ、なんという究極の選択…！！…では、ツンの方で！ｗ

　釣り目な方を塗ってみましたとさ。
　こんな感じで宜しいでしょうか～？

　ちなみに大事な事なのだが、網野コハク氏に倣って僕も初音ミクの下着は黒だと思う派なので異議は認められない（ぉ
　ヘッドフォンはあみーご氏推薦のAKG製品。
　潰れてしまったけどちゃんとAKGって描いたんだぜッ！←無駄

　さて、明日からまた暫く札幌出張です。
　札幌市街地はイルミネーション始まったそーなのですが...ぶっちゃけ徹夜続きになりそーな予感なので見に行く暇は無さそう。
　帰ってくるまで日記絵は無いので悪しからず。
　当然冬コミ原稿なんて着手出来てないのでこちらも悪しからず（ぉ

　・・・寒いんだろぅなぁ～（T_T）

▼ありがとーございます。
■CG定点観測さま
■Mug-G'sさま
■せい☆どくさま

大小どちらでもいけるので問題ありません。

　そうです。大小は問題じゃぁないのですよ。
　大事なのはもっと（以下略

■るのーぶろぐさま
■みwikiさま
■初音ミク専用たんぶらさま

　あと、以下は個人的メモ。
　内容を入力中にページを移動する際に警告のメッセージを出す方法。

　WDPとかで本文を書いてる時に誤操作でページ移動をやってしまい入力中の文章が無くなる～なんて事がちょこちょこあったのでメモ。

　詳細なやり方は以下のページをご参考。
　→cl.pocari.org :: prototype.js の Event.observe を使った onbeforeunload について

　こちらの記事を参考に、WDPの場合をメモすると...

skin/header.html

<script type="text/javascript" src="${INFO_URL}skin/js/prototype.js"></script>
 

　</head>の直前にコレを加えます。
　prototype.js については配布中のスキンでも参考に。

skin/admin_form.html

<script type="text/javascript">
Event.observe(window, 'beforeunload', function(e) {
    // イベントをキャンセルする場合は、なにも返さない。
    return e.returnValue = '<任意のメッセージ>';
});
</script>

　<!--SKIN_FORM_END-->の直前にコレを加えます。
　任意のメッセージは適当に変えちゃってOK。

　これで終わり。
　問題といえば[確認する]とか[投稿する]を押した時でもアラートが出るとゆー点？ｗ
　まぁ自分用だから良し。

　「Web Liberty」にて、ないと様が配布されている Web Diary Professional（以下、WDP）のマルチカラムレイアウト（2段組 or 3段組）でサイドバー（ナビゲーション部）を丸ごと折りたたみ可能にします。

　機能的には「小粋空間」様にて配布されている「サイドバーの折りたたみ」をWDPに組み込んで使う、というモノです。
　※スクリプト本体は「小粋空間」様のエントリー「小粋空間：サイドバーの折りたたみ」から各自でダウンロードが必要です。

　サンプルページ
　→メニュー部にある「＜」「＞」をそれぞれ押してみて下さい。（要・Javascript）

　お約束ですが「改造」になりますので自己責任でお願いします。

以下、改造方法です。

　初音ミク。
　なんとなく歌詞を覚える時は眼鏡をかけていて欲しいんだがどうだろう。
　賛同者はいるか？ｗ

　さて本日のお題。
　Web Diary Professional のタギングプラグインで生成されるタグクラウドの色と大きさを変える方法。

　経緯的にはTag Cloudのスタイルというエントリーを見かけて思わず弄りたくなってみた訳で思い立ったのでやってみた。

　基本的な考え。
　フォントサイズ指定として入る数値をレベル指定にして、レベル毎に表示クラスを用意しておくことで色＆大きさを変えようという事。
　日本語になってるか微妙ｗ
　どんな感じになるのかは右のナビゲーション部「Tags」を見てもらえると分かるはず。

　基本的な設置方法はプラグインのlzhファイルに同梱されている readme.txt を参照の事。
　readme.txt に記載のある「使用方法」を読みナビゲーション部にタグクラウドが表示される事を確認した後に着手しませぅ。

以下、具体的なやり方

　初音ミク。
　謳うには準備が必要デス、な感じな何か風。

　準備という事で、恐らくツインテールから大地の道＜タオ＞を吸い上げて稼動するとかいう妄想が頭に浮かんだ。
　あ、冗談だから石とか投げないようにｗ
　ネタがわからないヒトはこちらを見よう。
　懐かしさにほろりと来る♪

※10/17追記：件数表示できました。
　改造方法＆スキンファイルアップしました。

　Web Libertyさまのサポート掲示板ネタ。
　→ http://www.web-liberty.net/cgi-bin/support/board.cgi?mode=res&no=2956

　コメント欄とトラックバック欄を折畳んで、リンクに件数表示をしたいとの事。
　折畳むだけなら割と簡単で、ウチで配布してるスキンを流用してみたら実現可能でした。
　サンプル作ってみましたのでどうぞ。
　→ http://www.psy-plus.net/cgi-diary/sample/fold/fold2.html
　急造なので装飾とか一切弄ってないけれども、ページ一番下の「コメント一覧」と「トラックバック一覧」のリンクをクリックすると折畳み⇔展開と動作します。

　んで、リンクに件数表示を...との件は考えてみたけど通常のスキンの編集じゃ無理っぽぃ。
　ないと様の解説してるWeb Diary Professional のスキン情報を読む限り、件数表示は'SKIN_DIARY'の中にしか用意されてない模様。
　Javascriptでカウントするか（できるのか？）、頑張って改造すれば出来ると思うんだけども...うーん。

　取敢えず時間無いので今回の検討は此処まで。
　半分だけしか解決してないのでサポート掲示板には書けないけど、一応メモしとく。

　それはそうと、亀田大毅、見苦しく反則で足掻いた割りにアッサリ負けましたね。
　これから大金積んで「無効試合やッ！！」ってやるんですよきっと。
　ホントに切腹すれば良いのに。

　個人的な予定ですが、明日からしばらく札幌出張です。
　直前の今日、ギリギリで気になる情報をゲット。
　それは...『行く先の会議室にどうやら暖房が無い』らしいです。

　気温は主に１０度以下。
　熱い議論で寒さなんて忘れる...訳ねーだろ、ボケぃッ！！！

　そんな劣悪環境なので泣きながら帰ってくるまで日記絵の更新はありませぬ。
　PCとタブレットなんて持って行けないからなッ！ｗ
　でわ、さよーならー♪

▼ありがとうございます。
■CG定点観測さま
■るのーぶろぐさま
■indimenticabile diarioさま

　白水着。胸は無い。
　とある某氏に捧ぐ（ぷ
　Yahoo！ミュージックで'All Time BEGIN'を聞いてたらなんとなく海に行きたくなったんだよねぇ...ふぅ（悩ましげに

　あと一応、今日は参議院選挙。
　ちゃーんと投票してきましたよ～。

　結果はテレビでやってる通り民主党の圧勝だけども...具体的政策の無い野党に議席を与えてしまって、野党に投票した日本国民は一体何をさせたいんだろう？
　きっと消費税を上げて欲しいんだろうな（けっ

　それはそうと、ＮＨＫ＆民放全てで参議院特集ってどーゆー事よ（怒
　最後の砦、テレビ東京ですら参議院特集に走ってしまって...違うだろ、此処は演歌とか旅番組やるべきだろテレビ東京は！！
　という訳で、きっと一番視聴率が高かったのは唯一違う番組を放送していた教育テレビだと思うｗ

　'Web Liberty'様にて Web Diary Pro のプラグインが追加になった模様～。
　早速、パンくずリスト表示プラグインとメニュー表示プラグインを導入してみた！

▼パンくずリストプラグイン
　こんな感じにパンくずが並ぶ～♪
　並ぶのは良いんだけれども、階層の一番上部、つまりトップページ（diary.cgi）を表示した時にウチでいうと「Diary Top」だけがポツンと残るのがなんか悲しい。
　トップページ表示時（階層リンクが何も発生しない時）には表示しない、とかゆー動作だと僕的には好み。
　でも'パンくず'は前から欲しかったので嬉しいね！

▼メニュー表示プラグイン
　タイトル下部のメニュー一覧をプラグインの生成に置き換えてみた。
　見栄え的には全然変わってないぜよｗ

　スキン作成時に今まで ulタグ＆liタグ で一個ずつ打っていた箇所がサックリと済むとゆーのはメリットかな。
　もうちょぃ応用出来るのかもしれないけど、今は時間も無いしひとまず導入ってだけなのでコレはコレで良し。

　触ってみた感じの不具合（？）報告。
①URLに「?」が含まれていると登録後、削除できない。
②readme.txt内 誤記
　Web Site Professional → Web Diary Professional
　Menu/menu.txt → Menu/menu.log

　以下、私信返しとか？
続きを読む...

　以前にも書きましたが二次創作とは、著作権侵害行為なわけです。
　二次的著作物を作成する場合、私的なモノ以外は、原作者の許諾がないと、その時点で違法となります。

　著作者自身がガイドライン*1を作り、それに基づいて二次創作や同人誌の作成やWebでの著作物の利用を認めている場合、それに準ずる限りにおいて違法行為では無いです。
　当然「利用させて貰っている」という点に留意し、身勝手な拡大解釈等は行わないのがヒトとしてのマナーでせぅ。

　詳細は著作権法とか読んで下さいね。
　二次創作やるなら義務です。

　さて本日のお題「検索避け」です。
　取り上げるのは二回目になりますが...

　検索避けという行為自体の是非は決めかねるけれども、僕個人の話をするのならば、必要性を感じていないです。
　WWW（World-Wide-Web）の原則という面もありますし、強制収集していくロボットには無駄ですからね。

　ただ今回は「WDPで検索避けをどうやるの？」という質問が来たので回答という事もあり「検索避けは、セルフレイティング(ラベリング)の一種」と捉え、一応の方法をメモしておきます。

　ちなみに...
　検索避けをした処で許諾されていない二次創作は違法という点に変わりは無いです。
　検索避けは免罪符にはなりませんので勘違いしないように。
　検索避けはあくまで不快に思われそうな方への事前配慮です。

① metaタグを使用する

　skin/header.html の <head>～</head> に以下を追加する。

<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW" />
<META NAME="GOOGLEBOT" content="NOINDEX, NOFOLLOW" />
<META NAME="hatena" content="NODIFF,NOINDEX,NOFOLLOW,NOARCHIVE" />
 

　metaタグ はあくまで'お願い'であって強制収集するロボットには意味がありませんが、一応おまじないという事で記載しておきます。

② robots.txt と .htaccess を併用する

.htaccess の事前確認

　自分のサーバーが .htaccess が使用可能かどうか確認しておきましょう。
　使用できない場合はどうしようも無いので metaタグ のみで我慢して下さい。

　Windows で .htaccess という名前のファイルは作ることは出来ません。
　仮に htaccess.txt という名前のtextファイルを作成し、サーバーにアップロード後にファイル名を .htaccess に変更します。

robots.txt の事前確認

　robots.txt はサイトのルートパスに置かなければなりません。
　普通のディレクトリに置いても意味が無いので要注意。

　解り易く云うと、一般的なプロバイダ契約などで取れるユーザーアカウント、フリーのHPスペース等では、rootディレクトリには設置できない事が多いです。

　○ http://www.●●●/robots.txt
　× http://www.●●●/~▲▲▲/robots.txt

　詳しくは、自分のサーバーのヘルプデスク等で robots.txt が使用可能かどうか確認しておきましょう。
　robots.txt もあくまで'お願い'であって強制収集するロボットには意味がありません。

.htaccess に拒否したいものを追加する。

• 検索サイト
• ソーシャルブックマーク
• 特殊サービス
• 大陸サービス
• その他

　など。
　新しいサービスが出てきて結局はイタチごっこですけど...

　以下のように .htaccess を作成します。

<Files ~ "^\.ht">
deny from all
</Files>

<Files ~ "^robots\.txt$|\.(ico|swf)$">
Order deny,allow
</Files>

#検索エンジン
#MSN
SetEnvIfNoCase User-Agent "msnbot" shutout

#Google
SetEnvIf User-Agent "Googlebot" shutout
SetEnvIf User-Agent "Googlebot-Image" shutout
Deny from 66.249.64.0/19

#Yahoo
SetEnvIf User-Agent "Slurp" shutout
SetEnvIfNoCase User-Agent "Yahoo" shutout
Deny from 72.30.0.0/16
Deny from 74.6.0.0/16

#Inktomi
SetEnvIf User-Agent "inktomi" shutout

#goo
SetEnvIf User-Agent "moget" shutout
SetEnvIf User-Agent "ichiro" shutout

#InternetArchive
SetEnvIf User-Agent "ia_archiver" shutout

order allow,deny 
allow from all 
deny from env=shutout

　トラックバックは受信したい、という場合は５行目を以下の様にします。

<Files ~ "^robots\.txt$|\.(ico|swf)$|^diary-tb\.cgi$">

　全てのロボットを弾く＝相手から送信してきたトラックバックのPINGまで弾く模様。
　これで受信が可能になります。（多分）

　余談ですけど、画像の直リンクを防ぎたい場合は

<Files ~ "\.(gif|png|jpg)$">
SetEnvIf Referer "^http://www\.●●●\.net" ShowOK
SetEnvIf Referer "^$" ShowOK
order deny,allow
deny from all
allow from env=ShowOK
</Files>

　を付け加えておくと良いでしょう。
　URLを記述する際には、「 . 」（ドット）は「 \. 」のように円記号（＝バックスラッシュ）を前に加えて記述します。

　もっと詳しく！とゆー方は.htaccess実践活用術など参考にしてみると良いでしょう。

robots.txt に拒否したいものを追加する。

　全てのロボットをサイト全体から弾く場合は以下のみでOKです。

User-agent: *
Disallow: /
 

　※「Disallow:」の後は１行空ける必要があるので要注意。

　画像ファイルのみを指定する場合は

Disallow: /*.jpeg$
Disallow: /*.jpg$
Disallow: /*.gif$

　など、robots.txt の応用方法は色々あります。

ファイルをサーバーに置く。

　サーバーのrootディレクトリにrobots.txtをアップロード。
　htaccess.txtをサーバーにアップロード後、ファイル名を .htaccess に変更。

③WDPの環境設定を変更する。

pingを送信しない

　環境設定 > 更新PINGの設定：「通知しない」
　→折角検索避けを行っても更新PINGを送っては意味がなくなります。

RSSを配信しない

　環境設定 > RSSの設定 > RSSの配信件数：「0」
　→オンラインRSSリーダーなどへの登録を避ける事ができます。

　更に徹底するのならば skin/header.html の26行目あたりにある

<li><a href="${INFO_PATH}?mode=rss">RSS</a></li>

　を消すと効果的です。

＜2007/10/07 追記＞
　以下、ないとさまから指摘頂きましたので追記。

　さらに skin/header.html にある

<link rel="alternate" href="${INFO_PATH}?mode=rss" type="application/rss+xml" title="RSS" />
 

　この行を削除しておくと完璧です。
　このタグがあるとFirefoxなどで、RSS登録用のアイコンがステータスバーなどに表示されます。あっても問題ないですが、RSSを配信しない場合は削除しておいた方がいいかもしれません。

④最後に

　検索避けの方法を簡単に説明してみました。（間違ってたらゴメン）
　ここまでやっても、強制収集していくロボットには意味がありません。
　もし本当に見られたくない物があるのなら .htaccess でディレクトリに入れなくするとかパーミッションを外部からの閲覧不可にするとか別の方法でアクセス制限を掛けないと駄目です。

　一先ず疲れたからおしまい。
　何かご指摘等あれば教えて下さいませ。
　適宜、追記・修正します。

*1：各社の定めるガイドライン例
▼許諾ガイドラインの例（あくまで条件付き）：
　ALICE SOFT
　AQUA PLUS
　Key
　TYPE-MOON
　18禁ソフトメーカーは条件付で許諾している場合が多いです。
　個々のメーカーによって条件が異なるので逐次確認してから二次創作しましょう。


▼禁止の例（ネット、紙媒体などジャンル問わず活動禁止）：
　小学館
　講談社
　白泉社
　サンライズ ※例外あり
　出版社は概ね禁止しています。
　集英社、秋田書店はガイドラインが公開されておらず詳細は知りませんが、まず禁止と思って間違いないです。

　メディアワークス
　出版社の中で条件付で許諾しているのは此処ぐらいでしょうか？

　久遠寺 未有 from '君が主で執事が俺で'
　高校卒業してて職業フリーターなんだって。
　それってニートぢゃん？

　週休三日制復活の烽火を上げよ！！とゆー訳で休み。
　休みったら休み。

　昼過ぎまで惰眠。
　灰汁を取りｘ２作った、鶏肉＆豆のトマト煮込みも美味美味。
　単体でも十分美味いけど、パスタなんか茹でて和えたらかなりGooな予感。
　絵描いて、HP弄って、夕方前から長風呂～。
　皆が仕事してる時に風呂で伸びてるとゆー状況が堪らんｗ

　18時頃から家の用事で外出。
　日付が変わる頃に帰宅...はぁ...明日からまた仕事ですな。
　とりあえず、気分をリセット。

　あー、今更だけどこの雑記帳'他山之石'は現在改修中ナリよ。
　改修終わるまでチマチマあちゃこちゃ変わると思う～。
　右のナビゲーション部はCookieで状態保持するんで、自分の好みな（必要な）項目だけ表示しとく...とゆー使い方で宜しく。

　他所様のHPによくある「about」ってヤツ、なんか良い～と思ってWDPの'コンテンツ管理プラグイン'を使って作ってみた。
　コレ。もしくは上段メニューのリンクからどーぞ。

　例によって中身は超絶適当なので気にしないｗ
　一つだけ新規要素。
　なんとなくな思いつきで'Web Liberty'様提供の'Web Sender'を組み込んでみた。
　需要があるかどーかは知らないけど、携帯に簡単にURLを送れる～とゆー良くあるヤツですな。
　試したかったのは'コンテンツ管理プラグイン'の中に form タグをダラダラ打って動くんかぃなー？とゆー点。

　結果からゆーと当然出来る。
　けど、XHTML1.0 Strict で Valid にするには書き方に注意する必要アリ。

　「改行を変換する」にチェックを付けた状態で

</p><form action="http://～自分のURL～/sender.cgi" method="post"><p><input type="hidden" name="mode" value="send" /><input type="text" name="account" size="15" value="" />@<select name="domain"><option value="docomo.ne.jp" selected="selected">docomo.ne.jp</option><option value="ezweb.ne.jp">ezweb.ne.jp</option><option value="t.vodafone.ne.jp">t.vodafone.ne.jp</option><option value="k.vodafone.ne.jp">k.vodafone.ne.jp</option><option value="d.vodafone.ne.jp">d.vodafone.ne.jp</option><option value="h.vodafone.ne.jp">h.vodafone.ne.jp</option><option value="c.vodafone.ne.jp">c.vodafone.ne.jp</option><option value="r.vodafone.ne.jp">r.vodafone.ne.jp</option><option value="n.vodafone.ne.jp">n.vodafone.ne.jp</option><option value="s.vodafone.ne.jp">s.vodafone.ne.jp</option><option value="q.vodafone.ne.jp">q.vodafone.ne.jp</option></select><input type="submit" value="URLを送る" /></p></form><p>　携帯電話に送信できます。

　のような感じでダラダラ書くと valid になる～。

• p タグの中に form タグ書いちゃダメ。逆はOK。
• option はどれか一つ selected 属性つけとく。

　って感じで気をつけとけば良し。

　式部 from '戦国ランス'
　普通にこんなヒトが寺から出てきたら怪しいっつーか、危ないだろー...とか思った。
　あんまり目立たない敵キャラだったなー。
　絵クリックで拡大表示。

　'Web Diary Pro v4.57'がリリースされたので入れ替え～。
　プラグイン関係の動作が変わったとの事で、以前書いたプラグイン動作時に拡張設定(rewrite_mode)が有効にならない点も変わるかと思ったけど変わらず～。
　ウチの記述方法が悪いんかなぁ～？　良くわからん。

　まー良いや。
　ver.upに伴い、画像代替テキストの仕組みが変わったので'Litebox'用に書き換えてた'lib/webliberty/App/Diary.pm'の書き換え箇所も変わったのでメモ。

▼アップロード画像に「rel="lightbox"」を自動付与する for WDP v4.57
　自分用とゆー事で'秀丸マクロ'で記述しとく。

gofiletop;
replaceall "$file = \"<a href=\\\\\"$info_path\\?mode=image&amp;upfile=$_\\\\\"$target><img src=\\\\\"$file_path$_\\\\\" alt=\\\\\"ファイル $_\\\\\" width=\\\\\"$width\\\\\" height=\\\\\"$height\\\\\" /></a>\";" , "$file = \"<a href=\\\\\"$info_upfile_path$_\\\\\" rel=\\\\\"lightbox\\\\\" title=\\\\\"$subj\\\\\"><img src=\\\\\"$file_path$_\\\\\" alt=\\\\\"ファイル $_\\\\\" width=\\\\\"$width\\\\\" height=\\\\\"$height\\\\\" /></a>\";" , regular, nocasesense;
if( ! result )  beep;
 

　を適用。

　手作業なら979行目(v4.57同梱の物の場合)を

$file = "<a href=\"$info_upfile_path$_\" rel=\"lightbox\" title=\"$subj\"><img src=\"$file_path$_\" alt=\"ファイル $_\" width=\"$width\" height=\"$height\" /></a>";
 

　に変更。

　シィル・プライン from '戦国ランス'
　息の長ぁ～ぃヒロインだねぇ...10年以上か？
　どうも最近はシィルより人気の出るキャラに押され気味な感じもするけど（苦笑

　'ナビゲーション部折畳み'スキンも、だいたい形になった感じ。
　基本形は'2段組の右配置'。
　応用形として作るなら'2段組の左配置'と'3段組'ってーのもありかな？

　この他力本願なスキンを配布するかどーかでちょっと迷ってる。
　自分で配布して後々までフォローすんのもダルぃ大変かなぁ～とかｗ
　まぁ、そもそも使うヒトそんなにいなぃんだろーけど（苦笑
　さてどーするか...

　黒姫 from '戦国ランス'
　今回は白鯨とは繋がってないけど、やりたい放題やられちゃってる不幸キャラなのは変わりないかな～...
　絵クリックで拡大表示。

▼'Web Diary Professional'の動作で気になった点。
　作りかけスキンで、ギャラリー表示プラグインの動作時にスタイルシートを切り替えようと思い立ち...

　lib/webliberty/App/Init.pm で

rewrite_mode => 1,

　にした上で

#拡張設定
%{$init->{rewrite}} = (
'{query}{plugin}={Gallery}' => '{skin_header}={header2.html}',

　と記述しても、反映されない。
　'mode'で'admin'なんかにするときちんと動作してたから、おそらく'plugin'に対しては拡張設定が有効にならないっぽぃ？
　うーむ残念。別の方法考えるか諦めるかぁ～...

▼画像を写真風にして影を付ける方法の検討。
　参考にした記事は下記です。ありがとーござーます。
　→小粋空間：CSSで画像に影をつける（ドロップシャドウ）
　→小粋空間：標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する
　→All About：画像と枠線の間に余白を設けられますか？

　結論から言うと、'Web Diary Pro'採用している'XHTML1.0 Strict'の場合、IE6は後方互換モードとなるので単純な方法では「CSSで写真風にして画像に影をつける」ことは出来ない。
　imgタグのpadding要素が無視されちゃうんですねぇ～...うむ。

　'Web Diary Pro'で各種ブラウザエンジンで互換性を持たせたまま写真風画像に影をつける方法ないものかな～...という事でやってみた。
　JavaScriptを有効にした上でアップロードファイル一覧表示（ALBUM MODE）を参照。

　やってる方法は単純。
　枠＆影を付けた画像を表に出して、表示させたい絵をCSSで背景に回す。

　今まで使ってた枠画像を影つき画像に入れ替えただけとゆー噂もアルが...まぁ見かけ上、実現してるから良しｗ
　ウチみたいに同じサイズの画像を羅列したい～というニーズには十分対応できる。
　欠点は表示サイズが固定されちゃうってー処だろーがウチはバラバラサイズの表示はやらないから問題ないｗ

　・・・って、わざわざ'アップロードファイル一覧表示'は見辛くしてたのになんだか見やすくなってしまった！？
　ガーン。