小人さんテンプレートのスマートフォン対応（１）

小説HTMLの小人さんにて用意している本文テンプレートのうち、一部ページにスマートフォン対応のためのCSSを作成しました。
画面の横幅が480ピクセル以下の画面でスマートフォン用ＣＳＳが適用されます。

スタイルシート配布
タイプＢ、タイプＣ、タイプＩ用スタイルシート
　→　タイプＢ適用例
　→　タイプＣ適用例
　→　タイプＩ適用例

タイプＥ用スタイルシート
　→　タイプＥ適用例

適用例
１．上記のスタイルシートファイルを小説と同じフォルダに保存して下さい。
２，小説のファイルをメモ帳等のテキストエディタで開き、</head>の直前に、下記のコードを追加して下さい。

タイプＢ、タイプＣ、タイプＩの場合：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="smart_sm2_sm3_ct2.css" rel="stylesheet" type="text/css" style="color:red">

タイプＥの場合：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="smart_ct1.css" rel="stylesheet" type="text/css" style="color:red">

！！注意！！
配布しているテンプレートのうち一部に文字コードの記述のないものがありました（現在は修正済）。
文字コードの記述がないとスマートフォンで文字化けすることが多いので、タグすぐ下に

<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

がない場合は追加して下さい。（赤字部分は実際の文字コードに合わせてEUC-JPやUTF-8に変更して下さい）

これ以外のタイプに対応するスタイルシートも順次公開予定です。

VALUE DOMAINでサブドメインのみさくらのサーバに移転

【小説HTMLの小人さん】のサーバーを、長期にわたって利用してきたXREAからさくらインターネットのサーバーに移転しました。
小人さんはときどきエラーが起きる報告を頂いていたので、もしかしたらサーバの安定性の問題かな？　と、仕事とかで使えるようにとだいぶ前から借りていたサーバに移してみた次第です。
アドレスは独自ドメインですから、リンク変更とかは不要ですのでご心配なく。

ついでに宣伝リンク（笑）


（コスパのいい【ミニバード】とかの格安ハイスペックサーバとか、先日キャンペーンの紹介を書いたハイスペック＆サポート充実の【エックスサーバー】とか使ってみたいサーバあるんですけど、もうさくら契約しちゃってるから今回は浮気しません〜）続きを読む

nicky ネタバレ機能

あらら、公式サイトでの紹介記事が消えちゃってるんですねー。
とりあえず、うちで使ってるのを簡単にコピペしときます。
実装したのがずいぶん昔なので、これで全部かちょっと怪しいですが……。

続きを読む

自宅マシンでCGI（３）便利Tips

以前の記事▼
自宅マシンでCGI（１）AN HTTPDインストール
自宅マシンでCGI（２）Active Perlインストール

これまでに紹介した方法で、自宅マシンでのCGI動作確認はできるようになります。
が、実際にテストしてみると、サーバでの動作がうまく再現できない場合もあるかと思います。今回のエントリでは、自宅マシンのテスト環境を実際のサーバ環境に近づけるためのTipsを紹介します。

続きを読む

自宅マシンでCGI（２）Active Perlインストール

（２）Active Perlのインストール
前回のエントリ「自宅マシンでCGI（１）AN HTTPDインストール」に続いて、今回はプログラミング言語「Perl」を実行できるようにします。

続きを読む

自宅マシンでCGI（１）AN HTTPDインストール

自宅マシンでネットにつながずにCGIの動作テストをする方法を紹介します。
※Windows対応です。

続きを読む

標準準拠/過去互換とウィンドウの幅

すげーややこしい……

html4.01を標準準拠モードで書くか過去互換モードで書くかによって、javascriptでのウィンドウ幅の取得方法が変わってしまう模様。
しかもIEとFireFoxで微妙に挙動が違う！

とりあえず実験結果をまとめてみたですよ。
続きを読む

nicky! スパム対策とコメント通知のカスタマイズ

nicky! を使ったブログへのスパムコメントがあまりにひどいので、対策をとってみました。
完全にブロックはできていないのですが、だいぶ減らせたので、ご紹介しときます。

それからついでに、コメント通知メールにコメントの内容を記載するようにしてみました。

続きを読む

nicky! ネタバレ機能カスタマイズ２

8/26の「nicky! ネタバレ機能カスタマイズ」の修正版です。
コメントにてご指摘いただいた部分のミス修正しました。8/29日中にこの記事のソースを利用された方は修正をお願いします。

以下、修正＆追加内容の概要。
１．FireFoxで「続きを読む」をクリックした際にページトップに移動するバグを修正。
２．「続きを読む」→「閉じる」→「続きを読む」と、同一記事を２回以上開閉した際に表示がおかしくなるバグを修正。
３．WinIEだと「閉じる」ボタンをつけていなかった記事にも「閉じる」ボタン追加

続きを読む

nicky! カテゴリ選択時にのみ記事リストを出す

nicky! で、カテゴリを指定した場合にだけ、記事のリストを表示する方法。

※カテゴリ機能は正式版には搭載されていないので、カテゴリ対応版プレリリース（初版）を参考に設置のこと。
続きを読む

nicky! ネタバレ機能カスタマイズ

【迷ログ】ではnicky! BBSにて紹介されているネタバレ・長文ボタン機能をカスタマイズして「続きを読む」リンクを搭載しているので、そのカスタマイズ方法を公開しときます。
8/29追記：一部スクリプトにミスがありましたので修正しました！

続きを読む

「最大幅750ピクセル」をIEでも実現

【迷ログ】（http://www.hanameiro.net/meilog/nicky.cgi）では、コンテンツの幅を770ピクセルに固定しています。さらに左に模様のあるタイプの背景を使っているので、実際の文章の幅は630ピクセルになります。文章を読む場合には、このくらいの幅が読みやすいと思っています。
また、背景は文章の読みやすさ優先で薄いグレイなのですが、全面的にグレイにするとちょっと暗い印象になる気がするので、コンテンツの幅より右は白地にして、画面を明るくしています。

しかし、コンテンツの幅をピクセルで指定してしまうと、指定した幅より小さいサイズのウィンドウで閲覧した際に横スクロールバーが出現して、かえって読みづらくなってしまいます。
続きを読む

別窓仕様を強制同窓

リンクは新しいウィンドウが開く（＝「別窓」）ほうがいいか、同じウィンドウで開く（＝「同窓」）ほうがいいか……なーんて議論を時々見かけますね。
個人的には、同一サイト内では基本的に同窓、別サイトへの移動は別窓、というのがわかりやすくて好きです。
W3C的にはターゲットの指定そのものがアウトだったりしますけどねー。むーん。

まあそれは置いておいて、同窓リンクを別窓で開く方法はわりと知られているみたいですが（Windowsの場合Shift押しながらリンクをクリックor右クリック→「新しいウィンドウで開く」）別窓リンクを同窓で開く方法はあんまり知られてないみたいのでご紹介しとこうかなと思います。

やりかたは、リンクをブラウザのアドレス欄にドラッグ＆ドロップです。
javascriptで開いているものは無理ですが、a href="〜" target="〜" のものはこれで強制的に同窓リンクに出来ます。
ちなみに、リンクを別のウィンドウの画面にドラッグ＆ドロップすればそのウィンドウで開けます。

ついでに、Ctrl+Nでアクティブなブラウザウィンドウをコピーできます。Ctrl+Wはアクティブなウィンドウを閉じます。（Ctrl+Wはいろんな場面で閉じるために使える便利なショートカット）

ショートカットといえば、バックスペースは「戻る」、Shift+バックスペースは「進む」、スペースは下方向へのスクロールにそれぞれ対応します。
スペース、タブ、エンター、バックスペース、Shift、Ctrl、各種ショートカットを駆使すると、まったくマウスに触らずにページを行き来できます。サイトの確認作業とかはこっちのほうが楽だったりします。（たとえば大量のリンクを確認する場合に、いちいちクリックするよりタブ移動→Shift＋エンターで別窓オープン→OKならCtrl+Wでウィンドウを閉じる、のほうが楽だったり）

ローカルPCで動作確認

CGIはサーバーにアップする前に自分のPCで動作確認をしましょうという話。

実はCGIを使ってない人にとってもローカルサーバーでのテストはメリットがあるし、htmlファイルを作成するタイプのCGI（日記系のCGIとか、小人さんとかね）を使いたいけどうちはCGI不可だから〜って人にも使えるワザです。
最初だけちょっとめんどくさいけど、そこさえクリアすれば、あとはソフトをひとつ立ち上げて、お気に入りから自分のサイトを確認するだけ。簡単簡単。

続きを読む

デザイン変更機能

前の記事からまた半年経ってますが、デザイン変更ボタンのスクリプトを整理して配布できるようにしてみました。

csschange.lzh

設置方法については、readme.htmlを参照してください。動作はWin + IE6, Netscape7, FireFox1.0およびMac + IE5, Safari1で確認済。ポップアップ式に加えて、小説ページに埋め込んだりメニューフレームに埋め込んだりしても動作するように作ってみました。
サンプルもつけてますが、HTMLがまるきりわからない人はちょっと使い辛いかも。

CSSの解釈がブラウザによって違うので、ソースの書き方によっては表示に不具合が出る可能性はあります。これはscriptの不具合でなくCSSの不具合なんで自分で対応してください。
各種環境で確認が取れない人、不安な人は文字幅の変更は無しにしたほうがいいかもです。
あと、ルビが使えるのはWin+IEとFireFoxのみ（FireFoxはプラグインが必要？）なので、それ以外のブラウザでは設定に関わらず横に括弧書きになります。

サンプルCSSの３番目がIE以外では上手く表示されないのはご愛嬌（おいこら）
……いや、本館サイトのほうは条件分岐コメント使ってIE以外では選択肢を隠してますので問題ナシなんですよ。条件分岐コメントに関しては条件付コメント(Conditional Comments)実験ページがたいへん参考になるのでご参照ください。

メールフォーム送信時にページのタイトルを取得

ある日ふと、イラストページにもひとことフォーム置こうかしらと思ったんですが、公開しているカラーイラストだけでも30枚くらいあるわけで。
どのイラストについたコメントかわかるようにしたいのだけれど、イラストごとに送信する値を書き換えるのはめんどいなーと思って、ちょっと工夫してみました。

<script type="text/javascript">
<!-- 
function Post(Form) {
 // 空メールチェック
 if ((Form['感想'].value == 'ご感想・ツッコミなどお気軽に')||
  (Form['感想'].value == '')) {
  alert ('空メールはご遠慮ください。');
  return false; // 空だと送信しない
 }
 // サンクスメッセージ表示用小窓
 window.open('','thanks','width=300,height=200');
 // タイトルを取得
 Form['タイトル'].value = document.title;
}
 -->
</script>
<form method="post" action="xxx.cgi" onsubmit="return Post(this)" target="thanks">
 <input type="hidden" name="_set" value="2">
 <input type="hidden" name="_subject" value="イラスト感想">
 <input type="hidden" name="タイトル" value="">
 <input type="text" name="感想" value="ご感想・ツッコミなどお気軽に" size="60"
 style="color:#999999;border:solid 1px #999999" onclick="this.value=''">
 <input type="submit" value="送信"
 style="background-color:#ffffff;color:#999999;border:solid 1px #999999">
</form>

（※フォームのアクション部分は書き換えてます。コピペすると私に届いちゃうのは勘弁）
送信しようとすると、ページのタイトルを取得して「タイトル」という項目にその値を入れてくれるスクリプトつきの、１行メールフォーム。
ついでに、デフォルト値や空欄で送信するとアラートが出て送信を止めるスクリプトも仕込んであります。 formのターゲットを"thanks"に指定して、送信前にその名前をつけた空っぽの小窓を開き、送信後のありがとうメッセージはそっちに出しています。

javascriptをオフにしていても、単に「タイトル」の項目が空の状態で普通に送信するだけだし、特に問題はありません。リファラ取れるCGIだし。
問題はむしろ、閲覧者のめっちゃ少ないイラストコーナーにフォームを設置する意味がはたしてあるのかということかもしれない（笑）

ちなみに、実際のページはこんなんなってます。▼
http://www6.plala.or.jp/HANAMEIRO/sketch/Chris_standing.html

メールフォームのソースから自分のアドレスを見られない方法

プロバイダやレンタルのメールデコードサービス（メールフォーム）で、htmlのなかに自分のメールアドレスを書くタイプのものがありますね。niftyや、私も使っているぷららなどもそうです。
このタイプのフォーム、自分のメールアドレスがわかってしまうから使いたくないというかたも多いと思います。
サイトにアドレスを書かなくても受け取れるのがメールフォームの利点のひとつなのに、ソースを見ればわかってしまうというのでは、たしかに嬉しくないですね。

回避手段としては、メールアドレスをhtml内に書かなくていい他のレンタルサービス（私がよく紹介しているFormMailerなどもそのタイプです）や、フリー配布のCGIを使うという方法が考えられるのですが、「無料レンタルは広告が出てしまう」「機能に不満がある」「CGI設置は出来ないサーバーだ」など、アドレスの問題がなければプロバイダ提供サービスを使いたいという人もいるでしょう。

そこで、Javascriptを利用して「ソースを見られても、自分のアドレスを知られにくくする方法」を考えてみました。
※あくまでも「知られにくい方法」であって「絶対わからない方法」ではありません。


１．フォームのソースを全て外部Javascriptで書き出す。
フォーム部分のソースをコピーして、テキストエディタに貼り付けます。（下記はぷらら提供のメールデコードの記述例をそのまま使っています）

document.write('<FORM METHOD="POST" ACTION="http://www6.plala.or.jp/cgi-bin5/mailsend.cgi">');
document.write('<INPUT TYPE="hidden" NAME="to" VALUE="[e-mail]">');
document.write('<INPUT TYPE="hidden" NAME="subject" VALUE="ホームページ感想">');
document.write('<TABLE>');
document.write('<TR>');
document.write('<TD>お名前</TD>');
document.write('<TD><INPUT TYPE="text" NAME="name" SIZE=30></TD>');
document.write('</TR>');
document.write('<TR>');
document.write('<TD>メールアドレス（必須）</TD>');
document.write('<TD><INPUT TYPE="text" NAME="from" SIZE=30></TD>');
document.write('</TR>');
document.write('<TR>');
document.write('<TD>コメント</TD>');
document.write('<TD> <TEXTAREA NAME="comment" ROWS=4 COLS=32> </TEXTAREA></TD>');
document.write('</TR>');
document.write('<TR>');
document.write('<TD><INPUT TYPE="submit" VALUE="送信"></TD>');
document.write('<TD><INPUT TYPE="reset" VALUE="クリア"></TD>');
document.write('</TR>');
document.write('</TABLE>');
document.write('</FORM>');

こんな感じで、１行ごとにdocument.write('');で挟んでやり、そのファイルを拡張子jsで保存します。（例：form.js）

続いて、html内のフォームを置いていた場所から、

<script type="text/javascript" src="form.js"></script><noscript>Javascriptでフォームを表示しています。</noscript>

のようにしてJavascriptを呼び出します。


これで、元のページのソースを見ただけでは送り先のアドレスがわからなくなりました。
ただし、Javascriptを無効にしている人にはメールフォームそのものが見えなくなっています。また、方法を知っている人なら簡単にform.jsの中身を見ることが出来ます。


２．ダミーのアドレスを書いておき、送信時に正しいメールアドレスを書き込む
ソース内にはダミーのアドレスを書いておき、フォームの送信のタイミングで、正しいアドレスに書き換える方法です。

まず、テキストエディタに下記の関数を書いて、拡張子jsで保存します。

function SendCheck(Form) {
Form["to"].value = '正しいメールアドレス';
}

※["to"]には、お使いのデコードサービスで、メールアドレスを記述する部分のname属性を入れます。ぷららですと「to」（http://www.plala.or.jp/access/community/phps/cgi_main.html参照）、@niftyだと「to_mail」（http://homepage.nifty.com/mail/sample.htm参照）等となります。

このjsファイルをフォームを置いたhtmlから呼び出します。呼び出し方は１を参照してください。head内でもbody内でも構いませんが、フォームのタグより先に書く必要があります。

続いて、メールフォームの<form>タグにonsubmit="SendCheck(this)"と書き加えます。こんな感じです。

<FORM METHOD="POST" ACTION="http://www6.plala.or.jp/cgi-bin5/mailsend.cgi" onsubmit="SendCheck(this)">

この方法のメリットは、ぱっと見てアドレスを隠していることがわからないことですね。
SendCheck関数に、ついでに未入力チェックのスクリプトも一緒に仕込んでみたりすると更に効果的です。

ただし、この方法を使う場合、Javascriptを無効にしている人が使うと、ダミーのアドレスにメールを送ろうとしてしまいます。でたらめなアドレスを書いてしまうと他人に迷惑をかけてしまう可能性があるので、知られても構わないフリーの別アドレスを入れておくか、空欄にしておくなど、工夫してください。

３．メールアドレスを暗号化する
これはすでにいろいろな場所で紹介されている方法なので、ここでは解説しません。検索してみてください。

デザイン変更ボタンを搭載してみた

１年近く前に「読みやすいレイアウト」という記事で呟いていた内容を思い出すきっかけがあって、本館搭載にチャレンジしてみた。

こんな感じ。→　実験中（白珠の巫女　STAGE1）
仕組みはhttp://www6.plala.or.jp/HANAMEIRO/novel/csschange.jsおよびhttp://www6.plala.or.jp/HANAMEIRO/novel/css.htmlを参照のこと。

いまんとこWin+IE5以上のみです。もちろん他ブラウザへの対応もしたいんですけど、ちょっと根性が……。まあとりあえず実験ということでお許しください。条件分岐コメントを使って、それ以外のブラウザではボタンすら出ないようにしているので、不具合とかは特にないはず。たぶん。

変更できるのは、外部スタイルシート（主に配色、配置指定用）と、文字サイズ（大・中・小）、行間（広い・普通・狭い）、一行文字数（多・普通・少）、ルビの表示方法（ルビ・〔〕くくり）。

現在のデザインでも文字サイズ指定無し・行間150%・一行に30文字前後表示、という設定なので、そんなに読みにくいことはないと思うんですけどね。
でも、読みやすいデザインってのは、最大公約数は確かにあると思うけど、そこから先は個人差が大きいから。白背景（実際はうちのはものすごく淡〜いグレイなんですが）だとまぶしくて苦手、とか、もうちょっと大きめの文字サイズが好み、とか、ウィンドウをすごく狭くして読んでいるのではみ出る、とか、行間はもっと広いほうがいい、とか。逆に普段文字の小さいサイトに行くことが多くてそっちで慣れているから、大きい文字が読みづらい、とか。ブラウザ画面を印刷しちゃいたいけど左右の余白が邪魔だー、とか。うちだったらそういうご要望はあるんじゃないかなと思うんですよ。（最後の印刷云々はさすがに今時はないかな？）
そういう個別のニーズに対応することで、快適に閲覧できる人がもっと増えるといいなあ。

便利（？）Bookmarkletいくつか

便利げなBookmarkletを開発してみた。

クッキーを表示するBookmarklet

クッキーを表示

選択文字列をタグで挟むBookmarklet

<big>

<small>

<strong>

<blockquote>

<del>

<ins>

<span>

<div>

<pre>

<tt>

リンク

ルビ

テストどうぞ
タグＯＫの掲示板とかBlogとか日記とかで役に立つんじゃないかと。
※Win+IE以外の動作保証はしません。登録方法は、使いたいBookmarkletを右クリック→「お気に入りに追加」。安全じゃないよと言われますがそのまま続行してください。
たくさんあるので、お気に入りの中に専用フォルダを作っておくといいかもです。

さらに豆知識ですが、お気に入りの「リンク」の中に登録したものはツールバーに表示させてボタンのように使えて便利です。（出てこない場合はIEのツールバーで右クリックして「リンク」にチェック）
私は「リンク」の中にさらに「Bookmarklet」というフォルダを作って、それにいろいろ入れております。（Bookmarkletをそのフォルダの上にドラッグ＆ドロップしてどんどん追加登録できるので、楽で良いです）

文字編集ボタンをつける

CGIなどカスタマイズして文字編集ボタンをつけるワザ。
フリー配布のCGIを使ってて、HTML部分をちょこちょこ変更するくらいならできるひと向け。
（SeeSaaの編集フォームで使ってるののマネっこですが）

１）編集フォーム部分を探す。
CGIをエディタで開いて、<textarea>を検索すると見つかりやすいかも。

２）下記のスクリプトとボタンを<textarea>の前に付け足す。

<script type="text/javascript">
function tag(TAG){
 if (! document.selection) return;
 var SELECTED = document.selection.createRange();
 if (! SELECTED.text) return;
 SELECTED.text = 
  '<' + TAG + '>' + SELECTED.text + '</' + TAG + '>';
 }
function Size(SIZE){
 if (! document.selection) return;
 var SELECTED = document.selection.createRange();
 if (! SELECTED.text) return;
 SELECTED.text =
  '<span style="font-size:' + SIZE + '">' + SELECTED.text + '</span>';
 }
function Link(){
 if (! document.selection) return;
 var SELECTED = document.selection.createRange();
 if (! SELECTED.text) return;
 if (clipboardData.getData('text')) {
  linktext = clipboardData.getData('text');
  if (linktext.match(/^http:/)) {
   URL = window.prompt("リンク先URL", linktext);
  } else {
   URL = window.prompt("リンク先URL", "http://");
  }
 } else {
  URL = window.prompt("リンク先URL", "http://");
 }
 if (URL == null) {
  return false;
 } else {
  SELECTED.text = 
   '<a href="' + URL + '" target="_blank">' + SELECTED.text + '</a>';
 }
}
 -->
</script>
<input type="button" value="強調" onclick="tag('strong')">
<input type="button" value="大" onclick="Size('large')">
<input type="button" value="小" onclick="Size('small')">
<input type="button" value="ﾘﾝｸ" onclick="return Link()">
<br>

リンクの場合、クリップボードにhttpから始まる文字列があれば自動でプロンプトに入ります。

これはとりあえずstrongとフォントサイズの大小、リンクだけですが、応用すればルビ振ったり右寄せしたり左寄せしたり取り消しにしたりいろいろいけます。 strongやblockquoteのように属性値なしで使えるものなら、onclick=tag()のカッコ内にシングルコーテーションつけて要素名入れればOK。

Win2000+IE6での動作検証は済んでますが、それ以外の環境で動く保証はしません。不具合ありましたらお気軽にどーぞ。 それと、これをつけたからCGIが壊れたと言われましても責任は持てませんので、ご了承ください。