小説サイト運営支援ツールを公開する【小説HTMLの小人さん】の管理人のブログ。ツール開発記録やβ版の公開、HTMLやCSSのテクニック、小説サイト運営に関係するニュースなど。小人さんテンプレートのスマートフォン対応(1)小説HTMLの小人さんにて用意している本文テンプレートのうち、一部ページにスマートフォン対応のためのCSSを作成しました。画面の横幅が480ピクセル以下の画面でスマートフォン用CSSが適用されます。適用例1.上記のスタイルシートファイルを小説と同じフォルダに保存して下さい。2,小説のファイルをメモ帳等のテキストエディタで開き、</head>の直前に、下記のコードを追加して下さい。style="color:red">!!注意!!配布しているテンプレートのうち一部に文字コードの記述のないものがありました(現在は修正済)。charset=Shift_JIS">がない場合は追加して下さい。(赤字部分は実際の文字コードに合わせてEUC-JPやUTF-8に変更して下さい)これ以外のタイプに対応するスタイルシートも順次公開予定です。【小説HTMLの小人さん】のサーバーを、長期にわたって利用してきたXREAからさくらインターネットのサーバーに移転しました。仕事とかで使えるようにとだいぶ前から借りていたサーバに移してみた次第です。アドレスは独自ドメインですから、リンク変更とかは不要ですのでご心配なく。ネタバレ機能あらら、公式サイトでの紹介記事が消えちゃってるんですねー。うちで使ってるのを簡単にコピペしときます。実装したのがずいぶん昔なので、これで全部かちょっと怪しいですが......。Perlインストールこれまでに紹介した方法で、自宅マシンでのCGI動作確認はできるようになります。実際にテストしてみると、サーバでの動作がうまく再現できない場合もあるかと思います。今回のエントリでは、自宅マシンのテスト環境を実際のサーバ環境に近づけるためのTipsを紹介します。HTTPDインストール」に続いて、今回はプログラミング言語「Perl」を実行できるようにします。HTTPDインストール自宅マシンでネットにつながずにCGIの動作テストをする方法を紹介します。※Windows対応です。標準準拠/過去互換とウィンドウの幅すげーややこしい......html4.01を標準準拠モードで書くか過去互換モードで書くかによって、javascriptでのウィンドウ幅の取得方法が変わってしまう模様。IEとFireFoxで微妙に挙動が違う!とりあえず実験結果をまとめてみたですよ。使ったブログへのスパムコメントがあまりにひどいので、対策をとってみました。完全にブロックはできていないのですが、だいぶ減らせたので、ご紹介しときます。それからついでに、コメント通知メールにコメントの内容を記載するようにしてみました。ネタバレ機能カスタマイズ」の修正版です。コメントにてご指摘いただいた部分のミス修正しました。8/29日中にこの記事のソースを利用された方は修正をお願いします。以下、修正&追加内容の概要。1.FireFoxで「続きを読む」をクリックした際にページトップに移動するバグを修正。2.「続きを読む」→「閉じる」→「続きを読む」と、同一記事を2回以上開閉した際に表示がおかしくなるバグを修正。カテゴリを指定した場合にだけ、記事のリストを表示する方法。※カテゴリ機能は正式版には搭載されていないので、カテゴリ対応版プレリリース(初版)を参考に設置のこと。BBSにて紹介されているネタバレ・長文ボタン機能をカスタマイズして「続きを読む」リンクを搭載しているので、そのカスタマイズ方法を公開しときます。【迷ログ】(http://www.hanameiro.net/meilog/nicky.cgi)では、コンテンツの幅を770ピクセルに固定しています。左に模様のあるタイプの背景を使っているので、実際の文章の幅は630ピクセルになります。文章を読む場合には、このくらいの幅が読みやすいと思っています。背景は文章の読みやすさ優先で薄いグレイなのですが、全面的にグレイにするとちょっと暗い印象になる気がするので、コンテンツの幅より右は白地にして、画面を明るくしています。コンテンツの幅をピクセルで指定してしまうと、指定した幅より小さいサイズのウィンドウで閲覧した際に横スクロールバーが出現して、かえって読みづらくなってしまいます。別窓仕様を強制同窓リンクは新しいウィンドウが開く(=「別窓」)ほうがいいか、同じウィンドウで開く(=「同窓」)ほうがいいか......なーんて議論を時々見かけますね。個人的には、同一サイト内では基本的に同窓、別サイトへの移動は別窓、というのがわかりやすくて好きです。W3C的にはターゲットの指定そのものがアウトだったりしますけどねー。それは置いておいて、同窓リンクを別窓で開く方法はわりと知られているみたいですが(Windowsの場合Shift押しながらリンクをクリックor右クリック→「新しいウィンドウで開く」)別窓リンクを同窓で開く方法はあんまり知られてないみたいのでご紹介しとこうかなと思います。やりかたは、リンクをブラウザのアドレス欄にドラッグ&ドロップです。ものはこれで強制的に同窓リンクに出来ます。ちなみに、リンクを別のウィンドウの画面にドラッグ&ドロップすればそのウィンドウで開けます。ついでに、Ctrl+Nでアクティブなブラウザウィンドウをコピーできます。Ctrl+Wはアクティブなウィンドウを閉じます。(Ctrl+Wはいろんな場面で閉じるために使える便利なショートカット)ショートカットといえば、バックスペースは「戻る」、Shift+バックスペースは「進む」、スペースは下方向へのスクロールにそれぞれ対応します。スペース、タブ、エンター、バックスペース、Shift、Ctrl、各種ショートカットを駆使すると、まったくマウスに触らずにページを行き来できます。サイトの確認作業とかはこっちのほうが楽だったりします。|2005年08月04日ローカルPCで動作確認CGIはサーバーにアップする前に自分のPCで動作確認をしましょうという話。実はCGIを使ってない人にとってもローカルサーバーでのテストはメリットがあるし、htmlファイルを作成するタイプのCGI(日記系のCGIとか、小人さんとかね)を使いたいけどうちはCGI不可だから〜って人にも使えるワザです。最初だけちょっとめんどくさいけど、そこさえクリアすれば、あとはソフトをひとつ立ち上げて、お気に入りから自分のサイトを確認するだけ。前の記事からまた半年経ってますが、デザイン変更ボタンのスクリプトを整理して配布できるようにしてみました。csschange.lzh設置方法については、readme.htmlを参照してください。Safari1で確認済。ポップアップ式に加えて、小説ページに埋め込んだりメニューフレームに埋め込んだりしても動作するように作ってみました。サンプルもつけてますが、HTMLがまるきりわからない人はちょっと使い辛いかも。CSSの解釈がブラウザによって違うので、ソースの書き方によっては表示に不具合が出る可能性はあります。これはscriptの不具合でなくCSSの不具合なんで自分で対応してください。各種環境で確認が取れない人、不安な人は文字幅の変更は無しにしたほうがいいかもです。あと、ルビが使えるのはWin+IEとFireFoxのみ(FireFoxはプラグインが必要?)なので、それ以外のブラウザでは設定に関わらず横に括弧書きになります。サンプルCSSの3番目がIE以外では上手く表示されないのはご愛嬌(おいこら)......いや、本館サイトのほうは条件分岐コメント使ってIE以外では選択肢を隠してますので問題ナシなんですよ。Comments)実験ページがたいへん参考になるのでご参照ください。|2005年03月16日メールフォーム送信時にページのタイトルを取得ある日ふと、イラストページにもひとことフォーム置こうかしらと思ったんですが、公開しているカラーイラストだけでも30枚くらいあるわけで。どのイラストについたコメントかわかるようにしたいのだけれど、イラストごとに送信する値を書き換えるのはめんどいなーと思って、ちょっと工夫してみました。('空メールはご遠慮ください。#999999"></form>(※フォームのアクション部分は書き換えてます。コピペすると私に届いちゃうのは勘弁)送信しようとすると、ページのタイトルを取得して「タイトル」という項目にその値を入れてくれるスクリプトつきの、1行メールフォーム。ついでに、デフォルト値や空欄で送信するとアラートが出て送信を止めるスクリプトも仕込んであります。formのターゲットを"thanks"に指定して、送信前にその名前をつけた空っぽの小窓を開き、送信後のありがとうメッセージはそっちに出しています。javascriptをオフにしていても、単に「タイトル」の項目が空の状態で普通に送信するだけだし、特に問題はありません。リファラ取れるCGIだし。問題はむしろ、閲覧者のめっちゃ少ないイラストコーナーにフォームを設置する意味がはたしてあるのかということかもしれない(笑)ちなみに、実際のページはこんなんなってます。|2005年03月08日メールフォームのソースから自分のアドレスを見られない方法プロバイダやレンタルのメールデコードサービス(メールフォーム)で、htmlのなかに自分のメールアドレスを書くタイプのものがありますね。niftyや、私も使っているぷららなどもそうです。このタイプのフォーム、自分のメールアドレスがわかってしまうから使いたくないというかたも多いと思います。サイトにアドレスを書かなくても受け取れるのがメールフォームの利点のひとつなのに、ソースを見ればわかってしまうというのでは、たしかに嬉しくないですね。回避手段としては、メールアドレスをhtml内に書かなくていい他のレンタルサービス(私がよく紹介しているFormMailerなどもそのタイプです)や、フリー配布のCGIを使うという方法が考えられるのですが、「無料レンタルは広告が出てしまう」「機能に不満がある」「CGI設置は出来ないサーバーだ」など、アドレスの問題がなければプロバイダ提供サービスを使いたいという人もいるでしょう。そこで、Javascriptを利用して「ソースを見られても、自分のアドレスを知られにくくする方法」を考えてみました。※あくまでも「知られにくい方法」であって「絶対わからない方法」ではありません。1.フォームのソースを全て外部Javascriptで書き出す。フォーム部分のソースをコピーして、テキストエディタに貼り付けます。VALUE="クリア"></TD>');document.write('</TR>');document.write('</TABLE>');document.write('</FORM>');こんな感じで、1行ごとにdocument.write('');で挟んでやり、そのファイルを拡張子jsで保存します。src="form.js"></script><noscript>Javascriptでフォームを表示しています。</noscript>のようにしてJavascriptを呼び出します。これで、元のページのソースを見ただけでは送り先のアドレスがわからなくなりました。Javascriptを無効にしている人にはメールフォームそのものが見えなくなっています。方法を知っている人なら簡単にform.jsの中身を見ることが出来ます。2.ダミーのアドレスを書いておき、送信時に正しいメールアドレスを書き込むソース内にはダミーのアドレスを書いておき、フォームの送信のタイミングで、正しいアドレスに書き換える方法です。テキストエディタに下記の関数を書いて、拡張子jsで保存します。'正しいメールアドレス';}※["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から呼び出します。呼び出し方は1を参照してください。head内でもbody内でも構いませんが、フォームのタグより先に書く必要があります。続いて、メールフォームの<form>タグにonsubmit="SendCheck(this)"と書き加えます。onsubmit="SendCheck(this)">この方法のメリットは、ぱっと見てアドレスを隠していることがわからないことですね。SendCheck関数に、ついでに未入力チェックのスクリプトも一緒に仕込んでみたりすると更に効果的です。この方法を使う場合、Javascriptを無効にしている人が使うと、ダミーのアドレスにメールを送ろうとしてしまいます。でたらめなアドレスを書いてしまうと他人に迷惑をかけてしまう可能性があるので、知られても構わないフリーの別アドレスを入れておくか、空欄にしておくなど、工夫してください。3.メールアドレスを暗号化するこれはすでにいろいろな場所で紹介されている方法なので、ここでは解説しません。検索してみてください。|2004年12月07日デザイン変更ボタンを搭載してみた1年近く前に「読みやすいレイアウト」という記事で呟いていた内容を思い出すきっかけがあって、本館搭載にチャレンジしてみた。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<big><small><strong><blockquote><del><ins><span><div><pre><tt>リンクルビテストどうぞタグOKの掲示板とかBlogとか日記とかで役に立つんじゃないかと。※Win+IE以外の動作保証はしません。登録方法は、使いたいBookmarkletを右クリック→「お気に入りに追加」。安全じゃないよと言われますがそのまま続行してください。あるので、お気に入りの中に専用フォルダを作っておくといいかもです。豆知識ですが、お気に入りの「リンク」の中に登録したものはツールバーに表示させてボタンのように使えて便利です。(出てこない場合はIEのツールバーで右クリックして「リンク」にチェック)私は「リンク」の中にさらに「Bookmarklet」というフォルダを作って、それにいろいろ入れております。文字編集ボタンをつけるCGIなどカスタマイズして文字編集ボタンをつけるワザ。フリー配布のCGIを使ってて、HTML部分をちょこちょこ変更するくらいならできるひと向け。(SeeSaaの編集フォームで使ってるののマネっこですが)1)編集フォーム部分を探す。CGIをエディタで開いて、<textarea>を検索すると見つかりやすいかも。2)下記のスクリプトとボタンを<textarea>の前に付け足す。Link()"><br>リンクの場合、クリップボードにhttpから始まる文字列があれば自動でプロンプトに入ります。これはとりあえずstrongとフォントサイズの大小、リンクだけですが、応用すればルビ振ったり右寄せしたり左寄せしたり取り消しにしたりいろいろいけます。strongやblockquoteのように属性値なしで使えるものなら、onclick=tag()のカッコ内にシングルコーテーションつけて要素名入れればOK。Win2000+IE6での動作検証は済んでますが、それ以外の環境で動く保証はしません。不具合ありましたらお気軽にどーぞ。それと、これをつけたからCGIが壊れたと言われましても責任は持てませんので、ご了承ください。SummarySeesaaブログ広告この広告は60日以上更新がないブログに表示がされております。以下のいずれかの方法で非表示にすることが可能です。「広告を表示しない」にチェックを入れて保存する。ブログ×この広告は180日以上新しい記事の投稿がないブログに表示されております。