Sync A World You Want To Explore

関 信浩が2002年から書き続けるブログ。ソーシャルメディア黎明期の日本や米国の話題を、元・記者という視点と、スタートアップ企業の経営者というインサイダーの立場を駆使して、さまざまな切り口で執筆しています

Style Switcher

2003年05月08日

Blogging ，Movable Type ，Computing

styleswitcher.gif
Stylesheetを動的に切り替える「Stylesheet Switcher」ですが、一部でうまく動かないこともあるようでした。

Stylesheet SwitcherはCookieを使ってStylesheetを記憶させるのですが、Movable Typeが標準で搭載しているCookie管理用のJavaScriptコードとちょっとバッティングしそうだったので、Stylesheet Switcherのコードをちょっと手直ししてみました。

まずコード。切り替えられるStylesheetとしてはMTのデフォルトと、BlogstylesのPhoto Blogのスタイルを取り入れてみました。

ステップは二つあります
1)テンプレートにプログラムを埋め込む
2)テンプレートに切り替えるユーザー･インタフェースを埋め込む


まず以下のコードをStylesheet Switcherを使いたいテンプレート（Main IndexやIndividual Archive Index）の「<head>」と「</head>」の間に入れます。MTデフォルトのJavaScriptコードも一緒に入れたので、既存のJavaScriptコードは消してOKです（意味が分からなければ無視してOKです）。


<link rel="alternate stylesheet" type="text/css" href="<$MTStaticWebPath$>clean.css" title="clean" />
<link rel="alternate stylesheet" type="text/css" href="<$MTStaticWebPath$>trendy.css" title="trendy" />
<link rel="alternate stylesheet" type="text/css" href="<$MTStaticWebPath$>georgiablue.css" title="georgiablue" />
<link rel="alternate stylesheet" type="text/css" href="<$MTStaticWebPath$>gettysburg.css" title="gettysburg" />
<link rel="alternate stylesheet" type="text/css" href="<$MTStaticWebPath$>rusty.css" title="rusty" />
<link rel="alternate stylesheet" type="text/css" href="<$MTStaticWebPath$>plainjane.css" title="plainjane" />
<link rel="alternate stylesheet" type="text/css" href="<$MTStaticWebPath$>stormy.css" title="stormy" />
<link rel="alternate stylesheet" type="text/css" href="<$MTStaticWebPath$>photo_blue.css" title="photo_blue" />
<link rel="alternate stylesheet" type="text/css" href="<$MTStaticWebPath$>photo_red.css" title="photo_red" />
<link rel="alternate stylesheet" type="text/css" href="<$MTStaticWebPath$>photo_orchid.css" title="photo_orchid" />
<link rel="alternate stylesheet" type="text/css" href="<$MTStaticWebPath$>photo_monochrome.css" title="photo_monochrome" />


<script type="text/javascript" language="javascript">
<!--
function OpenComments (c) {
window.open(c,
'comments',
'width=480,height=480,resize=yes,scrollbars=yes,status=yes');
}

function OpenTrackback (c) {
window.open(c,
'trackback',
'width=480,height=480,resize=yes,scrollbars=yes,status=yes');
}

function MM_jumpMenu(targ,selObj,restore){ //v3.0
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}

var HOST = '<$MTBlogHost$>';

// Copyright (c) 1996-1997 Athenia Associates.
// http://www.webreference.com/js/
// License is granted if and only if this entire
// copyright notice is included. By Tomer Shiran.

function setCookie (name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) + ((expires) ? "; expires=" + expires.toGMTString() : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : "");
document.cookie = curCookie;
}

function getCookie (name) {
var prefix = name + '=';
var c = document.cookie;
var nullstring = '';
var cookieStartIndex = c.indexOf(prefix);
if (cookieStartIndex == -1)
return nullstring;
var cookieEndIndex = c.indexOf(";", cookieStartIndex + prefix.length);
if (cookieEndIndex == -1)
cookieEndIndex = c.length;
return unescape(c.substring(cookieStartIndex + prefix.length, cookieEndIndex));
}

function deleteCookie (name, path, domain) {
if (getCookie(name))
document.cookie = name + "=" + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
}

function fixDate (date) {
var base = new Date(0);
var skew = base.getTime();
if (skew > 0)
date.setTime(date.getTime() - skew);
}

function rememberMe (f) {
var now = new Date();
fixDate(now);
now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
setCookie('mtcmtauth', f.author.value, now, '', HOST, '');
setCookie('mtcmtmail', f.email.value, now, '', HOST, '');
setCookie('mtcmthome', f.url.value, now, '', HOST, '');
}

function forgetMe (f) {
deleteCookie('mtcmtmail', '', HOST);
deleteCookie('mtcmthome', '', HOST);
deleteCookie('mtcmtauth', '', HOST);
f.email.value = '';
f.author.value = '';
f.url.value = '';
}

function mouseover(el) {
el.className = "raised";
}

function mouseout(el) {
el.className = "button";
}

function mousedown(el) {
el.className = "pressed";
}

function mouseup(el) {
el.className = "raised";
}


function format_me(v) {
var str = document.selection.createRange().text;
document.comments_form.text.focus();
document.selection.createRange().text = "<" + v + ">" + str + "</" + v + ">";
return;
}

function insert_link() {
var str = document.selection.createRange().text;
document.comments_form.text.focus();
var my_link = prompt("Enter URL:","http://");
if (my_link != null) {
document.selection.createRange().text = "<a target=\"_blank\" href=\"" + my_link + "\">" + str + "</a>";
}
return;
}
function format_code() {
var str = document.selection.createRange().text;
document.comments_form.text.focus();
document.selection.createRange().text = "<div class=\"code\">" + str + "</div>";
return;
}
function format_quote() {
var str = document.selection.createRange().text;
document.comments_form.text.focus();
document.selection.createRange().text = "<div class=\"quote\">" + str + "</div>";
return;
}
function deCode() {
strSelection = document.selection.createRange().text
strSelection = strSelection.replace(new RegExp("<","g"), "<");
strSelection = strSelection.replace(new RegExp(">","g"), ">");
document.selection.createRange().text = strSelection;
return;
}

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return null;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
) return a.getAttribute("title");
}
return null;
}

window.onload = function(e) {
var cookie = getCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}

window.onunload = function(e) {
var title = getActiveStyleSheet();
var now = new Date();
fixDate(now);
now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
setCookie('style', title, now, '', HOST, '');
}

var cookie = getCookie('style');
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
//-->
</script>


次に、Stylesheet Switcherを表示させたい場所に、次のコードを埋め込みます（このコードは、サイドバー（<div id="links">）に置くことを想定しています）。なおデザインはGoing My Wayのものを参考にさせていただきました。


<div class="sidetitle">
Style Switcher
</div>
<div class="side">
<a href="#" onclick="setActiveStyleSheet('default'); return false;">default</a> 
<a href="#" onclick="setActiveStyleSheet('clean'); return false;"><img alt="clean" border="0" src="http://www.syncworld.net/mttrial-statics/images/clean.jpg" /></a> 
<a href="#" onclick="setActiveStyleSheet('trendy'); return false;"><img alt="trendy" border="0" src="http://www.syncworld.net/mttrial-statics/images/trendy.jpg" /></a> 
<a href="#" onclick="setActiveStyleSheet('georgiablue'); return false;"><img alt="georgia blue" border="0" src="http://www.syncworld.net/mttrial-statics/images/georgia_blue.jpg" /></a> 
<a href="#" onclick="setActiveStyleSheet('gettysburg'); return false;"><img alt="gettysburg" border="0" src="http://www.syncworld.net/mttrial-statics/images/gettysburg.jpg" /></a> 
<a href="#" onclick="setActiveStyleSheet('rusty'); return false;"><img alt="rusty" border="0" src="http://www.syncworld.net/mttrial-statics/images/rusty.jpg" /></a> 
<a href="#" onclick="setActiveStyleSheet('plainjane'); return false;"><img alt="plain jane" border="0" src="http://www.syncworld.net/mttrial-statics/images/plain_jane.jpg" /></a> 
<a href="#" onclick="setActiveStyleSheet('stormy'); return false;"><img alt="stormy" border="0" src="http://www.syncworld.net/mttrial-statics/images/stormy.jpg" /></a> 
<a href="#" onclick="setActiveStyleSheet('photo_blue'); return false;"><img alt="photo_blue" border="0" src="http://www.syncworld.net/mttrial-statics/images/photo_blue.jpg" /></a> 
<a href="#" onclick="setActiveStyleSheet('photo_red'); return false;"><img alt="photo_red" border="0" src="http://www.syncworld.net/mttrial-statics/images/photo_red.jpg" /></a> 
<a href="#" onclick="setActiveStyleSheet('photo_orchid'); return false;"><img alt="photo_orchid" border="0" src="http://www.syncworld.net/mttrial-statics/images/photo_orchid.jpg" /></a> 
<a href="#" onclick="setActiveStyleSheet('photo_monochrome'); return false;"><img alt="photo_monochrome" border="0" src="http://www.syncworld.net/mttrial-statics/images/photo_monochrome.jpg" /></a> 
</div>

---
scripttygoddessにも似たような話が載っていましたし、Stylesheet SwitcherのA List Apartには、Backward Compatible Style Switcherなるコラムもあったので、今度はこちらにも挑戦してみます。