toppage memoranda

（ここはbewaad institute@kasumigasekiの過去ログ倉庫です。コメント等は仕様上受付けを停止しておりませんが、こちらではご遠慮いただければ幸いです。何かございましたら、現行サイトにお願いいたします。）

2005|01|02|03|04|05|06|07|08|09|10|11|12|

2006|01|02|03|04|05|06|07|08|09|10|11|12|

2007|01|02|

2005-05-12

■ [notice]代替スタイルシートの導入

＃以下予定原稿を書いてpluginをインストールしたのですが、機能しません。もし何か思い当たる節がある読者の方がいらっしゃいましたら、ぜひともご教示ください。お願いします。

昨日予告のとおり、芸のないものですがとりあえず用意してみました。dan5さん作成のcustom_thema.rbによっています。使い方は、画面右上のサイト内検索用テキストボックスの下のリンクを選択して、スタイルシートを切り替えて下さい（defaultがこれまでのもの、alternativeが代替スタイルシートです）。要cookieで1時間切替が効きます。

＃現時点ではトップページ（このページ）のみの先行導入です。他のページは未対応です。

ところで、このpluginにつき、当サイトご覧の方々の中のrubyistsにお伺いしたい点がございます。まず、ソースを掲載します（GPLですので、ご活用の際にはその旨よろしくお願いいたします。なお、後の便を考え行番号が付してありますが、このエントリからコピペする場合、それを削除しないと使えませんので、できれば配布元から直接入手下さい（ただし、配布元のソースでは、下記で言えば行番号490と行番号590に文字化けと思われる箇所がありますので、ご留意下さい））。

010:# custom_thema.rb 
020:#
030:# Copyright (c) 2004 dan <<B style="color:black;background-color:#ffff66">dan@dgames.jp</B>>
040:# Distributed under the GPL
050:#
060:
070:module CustomThema
080:  def CustomThema.run(cgi, options)
090:    cookie = nil
100:    if cgi['custom_thema_css'].length > 0
110:      timer = 1
120:      cookie = CGI::Cookie.new({"name" => "custom_thema_css", 
130:                                "value" => cgi['custom_thema_css'], 
140:                                "expires" => Time.now + timer * 3600})
150:    end
160:    cookie
170:  end
180:end
190:
200:
210:def css_tag
220:  cookie_css = @cgi.cookies['custom_thema_css'][0]
230:  if cookie_css and cookie_css.length > 0
240:    css = cookie_css
250:  else
260:    if @theme and @theme.length > 0
270:      css = "#{theme_url}/#{@theme}/#{@theme}.css"
280:      title = css
290:    else
300:      css = @css
310:    end
320:  end
330:  title = CGI::escapeHTML( File::basename( css, '.css' ) )
340:  <<-CSS
350:<meta http-equiv="content-style-type" content="text/css">
360:  <link rel="stylesheet" href="#{theme_url}/base.css" type="text/css" media="all">
370:  <link rel="stylesheet" href="#{css}" title="#{title}" type="text/css" media="all">
380:  CSS
390:end
400:
410:
420:def custom_thema()
430:  case @cgi['custom_thema_mode']
440:  when 'input'
450:    html = <<HTML
460:<form method="GET" action="#{@index}">
470:<div>外部CSSのURL:<input type="text" name="custom_thema_css">
480:<input type="hidden" name="custom_thema_mode" value="reload">
490:<input type="submit" value="設定">
500:</div>
510:</form>
520:HTML
530:  when 'reload'
540:    html = <<HTML
550:<a href="#{@index}">再読込してください</a>
560:HTML
570:  else
580:    html = <<HTML
590:<a href="#{@index}?custom_thema_mode=input">CSSを変更する</a>
600:HTML
610:  end
620:  html
630:end
640:
650:
660:custom_thema_cookie = CustomThema.run(@cgi, @options)
670:if custom_thema_cookie
680:  if defined?(add_cookie)
690:    add_cookie(custom_thema_cookie)
700:  else
710:    @cookie = custom_thema_cookie if custom_thema_cookie
720:  end
730:end

以上がオリジナルのソースですが、サイト内でのCSS切替のみを念頭に置いていますので、行番号470を次のように変更したものをインストールしてあります。

470:<div>使用するCSS:<input type="radio" name="custom_thema_css" value="http://bewaad.com/bewaad.css"> default
475:<input type="radio" name="custom_thema_css" value="http://bewaad.com/bewaadAlt.css" checked="checked"> alternative

また、キーボードでのブラウザ操作の便を図る観点から、行番号590も次のように変更済みです。tabキー、またはaltキー＋cで変更のためのリンクを選択することができます。

590:<a href="#{@index}?custom_thema_mode=input" tabindex="1" accesskey="c">CSSを変更する [c]</a>

で、お伺いしたい点ですが、このpluginでは、「CSSを変更する」というリンクを選択した後でCSS切替に移ります。これを、最初から当該リンクの位置にラジオボタンを表示し、「設定」をクリックすることでリロードしてすぐに切り替わるという動作に変更できるのでしょうか? 素人ながらリファレンスなど見ながら考えたところ、行番号420から630までを次のように変更すればいいのかな、と思うのですが、もしよろしければ添削いただければ非常にありがたいです。

420:def custom_thema()
430:# 削除
440:# 削除
450:    html = <<HTML
460:<form method="GET" action="#{@index}" onSubmit="location.reload"> # onSubmit属性を追加
470:<div>使用するCSS:<input type="radio" name="custom_thema_css" value="http://bewaad.com/bewaad.css"> default
475:<input type="radio" name="custom_thema_css" value="http://bewaad.com/bewaadAlt.css" checked="checked"> alternative
480:# 削除
490:<input type="submit" value="設定">
500:</div>
510:</form>
520:HTML
530:# 削除
540:# 削除
550:# 削除
560:# 削除
570:# 削除
580:# 削除
590:# 削除
600:# 削除
610:# 削除
620:  html
630:end

＃meta要素でscript指定をしていないのでonSubmit属性は使えないのかな?

使ってみての感想やさらなるご要望などございましたら、遠慮なくお申し付け下さい。

本日のツッコミ(全4件) [ツッコミを入れる]

◆ 笹 (2005-06-19 17:22)

460行目の
method="GET"
を
method="POST"
にしたら、とりあえず動きました。

◆ bewaad (2005-06-20 07:48)

アドバイスいただきありがとうございます。ご指摘のように変更したものをアップしてみたのですが、当方の環境ではやはりプラグインとして機能していません。そちらの環境では、当サイトの変更後で動作しますでしょうか？

◆ 笹 (2005-06-23 23:09)

こちらで動いてます。
http://sasasin.sytes.net/~sasalabo/tdiary/

custom_thema()の中身はこのようにして、他の部分は一切弄りません。

def custom_thema()
html = <<HTML
<form method="POST" action="#{@index}" onSubmit="location.reload">
<div>使用するCSS:<input type="radio" name="custom_thema_css" value="http://bewaad.com/bewaad.css"> default
<input type="radio" name="custom_thema_css" value="http://bewaad.com/bewaadAlt.css" checked="checked"> alternative
<input type="submit" value="設定">
</div>
</form>
HTML
html
end

◆ bewaad (2005-06-24 04:34)

繰り返しありがとうございます。ちょっと今FTPが使える環境にないので、週末にトライしてみます。

ツッコミ・コメントがあればどうぞ! E-mailアドレスは公開されません。

[TrackBack URL: http://bewaad.sakura.ne.jp/tb.rb/20050512]

トップ «前の日記(2005-05-11) 最新次の日記(2005-05-13)» 編集

archives of BI@K

toppage memoranda

2005-05-12

■ [notice]代替スタイルシートの導入