スライダーで動的に1行の文字数と文字サイズを変更・保存するスクリプト：ウェブログのIA研究(2)

1カラムデザインをもっと柔軟に

サイドバーいらない論では、1カラムのメリットを強調しましたが、その中のはてブコメントで、一段の文字数が短い方が読みやすいから（マルチカラムの方がよい）という意見がありました。

これに対して、私はCSSで最大幅を指定すればいいじゃないと言いましたが、どこか腑に落ちていない点もありました。というのは私が逆に文字数が断然多い方がいいタイプなんですね。

だからmax-widthで最大幅を指定されると、逆に幅が限定されて困るケースがあるんですよ。それにmax-widthで指定された「最適な」最大幅は、あくまで運営者が思っていることで、実際ユーザが最適だと思っているとは限らないんですね。

で、あるならばユーザがCSSを切り替えるように、自分の最適な1行の文字数を決められるのが最適解なんじゃないか、そう思ったんです。

ということで、既にサイト右下の方に実装した通り、1行の文字数と文字サイズをユーザーがスライダーで動的に変更できる仕組みを導入しています。なお、設定された値はCookieに保存していますので、一度設定すれば常時設定した文字数と文字サイズでサイトが表示されるようになります。つまり、サイトのカスタマイズができると言うことです。

やり口としては以下のエントリをかなり参考にしました。というか以下のエントリがなければできていなかったと思います。スクリプト WebFXの作者さんと紹介していたyujiroさん、どうもありがとうございました。

ちなみに今回のスクリプトはこれに以下の機能を追加した物です。

値をCookieに保存する
Cookieが設定されていれば、それをデフォルト値に設定し、幅・サイズ変更を実行する
max-width / font-size プロパティの最小値・最大値の振れ幅を設定する機能
max-width / font-size プロパティを変更する単位を設定する機能

なお、このスクリプトは現状ではIE6以下に対応していません（IE7には対応しています）。理由としては

max-widthプロパティに対応していない
position: fixedに対応していない
幅・サイズ拡大時にボックス幅が内容領域を超えてしまうことがある

ためです。ただ、前2つはjavascriptで同様の機能を実現するfixed.jsやminmax.jsを使えば解決できそうです。

問題なのは1番最後の物で、おそらくIEのバグではないかなと思っているのですが、解決できる方法を探しています。もし、解決法をおわかりの方がいましたら、コメントをお寄せいただければ嬉しいです。

というわけで、現状は以下のブラウザに対応しています。配布物にもIE5,6には出力しないように設定しています。

Windows Internet Explorer（バージョン7.0以上）
Mozilla Firefox
Opera
Safari for Windows

技術的な話

技術的にはスライダーの変更時にjavascriptで動的に本文^*1のスタイルを変える方法をとっています。なので、やろうとすれば文字幅・文字サイズだけではなく、行間や背景色なども変えられるでしょう。

当然ですが、このサイトのマークアップに最適化されていますので、導入される際はCSSのID名などは自分のサイトの物に書き換えてください。

なお、当サイトでのマークアップ図をページ末尾に書いてありますので、よければ参考にしてください。

導入について

では、WordPressへの導入方法について。まず、以下のファイルをダウンロードしてください。

ダウンロード: スライダ設定スクリプトセット (v0.1 20070810); スライダー表示PHPスクリプト (v0.1 20070811)
ライセンス: サイト全体と同じくCreative Commonsライセンス、ただしWebFXスクリプトはApache Software Licese 2.0を引き続き適用

更新履歴は先の記事をご覧下さい

ダウンロード後にファイルを解凍したら、「スライダ設定スクリプトセット」をそのままWordPressのトップフォルダにコピーしてください。その後、お使いのテーマに以下の記述を加えてください。

PHPソースコード （wp-content/themes/お使いのテーマ/header.php）

<link rel="stylesheet" type="text/css" media="screen, handheld" href="<? bloginfo('url'); ?>/wp-includes/images/slider/style.css" />
<script type="text/javascript" src="<? bloginfo('url'); ?>/wp-includes/js/slider/range.js"></script>
<script type="text/javascript" src="<? bloginfo('url'); ?>/wp-includes/js/slider/timer.js"></script>
<script type="text/javascript" src="<? bloginfo('url'); ?>/wp-includes/js/slider/slider.js"></script>

次にスライダーを動作させるjavascriptを読み込む部分を記述します。まず「スライダー表示PHPスクリプト」をお使いのテーマのフォルダにコピーした後、テーマの</body>の直前に以下の記述を加えてください。

PHPソースコード （wp-content/themes/お使いのテーマ/footer.php）

<? include ("module/make_slider.js.php");?>

そして、そのスライダーを表示する部分を記述します。絶対配置しているので、場所はどこでもいいのですが、body開始タグの直後あたりに以下を記述してください。

PHPソースコード （wp-content/themes/お使いのテーマ/header.php）

<? include_once ("module/show_slider.inc.php"); ?>

最後にテーマのCSSに以下を記述します。

CSSソースコード （wp-content/themes/お使いのテーマ/layouts/???.css）

/* Slider */
 
.slider{
    opacity:                0.6;
}
 
.slider:hover{
    opacity:                1.0;
}
 
div#slider-1{
    position:            fixed;
    right:                10px;
    bottom:                40px;
}
 
div#slider-2{
    position:            fixed;
    right:                10px;
    bottom:                10px;
}
 
#slider-icon{
    position:            fixed;
    right:                160px;
    bottom:                10px;
}
 
#slider-icon img{
    display:                block;
}

設定は以下のファイルで行います。ここでは最大幅とフォントサイズの単位・振れ幅を設定できます。なお、単位が%以外の際は（つまり基準が100%ではない場合）、基準を設定する必要があるので、必ず入力してください。

PHPソースコード （wp-content/themes/お使いのテーマ/module/make_slider.js/php）

// max-width や font-size の単位
define("unit_width", "em");
define("unit_fontsize", "%");
// unit_xxx が "%"以外の場合は基準となる値を設定
define("default_width", "55");
define("default_fontsize", "");
// max-width や font-size の振れ幅
// ex: [最小] 40% <== $range_fontsize(%) ==> 100% <== $range_fontsize(%) ==> 160% [最大]
// （この場合の range_fontsize は 60）
define("range_width", "25");
define("range_fontsize", "60");

なお、最大幅やフォントサイズの変更に影響されたくない要素（長くなる傾向にあるソースコードやテーブルなど）があれば、スタイルシートで!important命令付きで個別的に指定してください。

導入方法は以上です。

結びに

というソリューションを提案してみたわけですが、いかがでしょうか > 行間が狭い方が読みやすい派の方

ちなみに、マルチカラムでの導入方法はこの次の記事で書きます。このサイトでは、これからも1カラムの理想的なデザインを模索していくつもりです。

スライダーで動的に本文とサイドバーの比率を変更・保存するスクリプト（2カラム版）にて2カラム版を書きました。なお、この手のスクリプトにありがちですが、空divなどを2つほど生成しています。strict派な人には気になるかもしれませんが、私はアクセシビリティ確保のためには、現状はある程度このようなイレギュラーなマークアップをすることもやむなしと考えています。むろん、このようなマークアップをすることナシにブラウザ側がユニバーサルにコントロールできることが理想的ではありますが。

このサイトのマークアップ図、単体記事表示のサイト複数記事表示の際はマークアップが異なります

当スクリプトではdiv#contentの内容。なお、変更時に背景が見えないように親要素に白の背景色を設定しています[戻る]

キーワード：

この記事はシリーズものの一篇です。ブログのIA研究シリーズのそのほかの記事もよろしければご覧ください
このシリーズ記事のフィード

読者のコメント

お名前
シンゴロ
投稿日時
2007年09月02日
9時ごろ
Comment No
#1
初めまして。シンゴロと申します。
こちらの記事で紹介しているsliderフォント制御に興味があり色々と試してみまして、デザイン上は納得のいくものができ無事組み込むことに成功したのですが、やはりクッキーに対応していないというのが悩ましいところでしてこちらに辿り着きました。
私は基本的に私はphpは全く解らず、jsはフリーのものを拾ってきて調整しているくらいの知識であります。

やりたいこととしては、jsファイルの添付のみでクッキーの機能をつけることです。
Liner Note様のこちらの記事も参考にさせて頂きかなり触ってみたのですが、やはりどうにもならずで悩んでいます。
何か良い方法がありましたらと思い書き込み致しました。

現状は単純にデザインを変更しただけです。
Blogに組み込むというわけではなく、xhtmlで制作しているページ（下記）です。
左メニューの水色のボックスがそれです。
まだまだデザインが組み上がっているわけではなく、お見苦しいページかとは思いますが・・

もしお時間あるようでしたらご教授頂けないでしょうか。
お名前
シンゴロ
投稿日時
2007年09月02日
9時ごろ
Comment No
#2
すみません・・URL貼り忘れました。
こちらです。
http://gorosta.com/gorosta_html/about/index.html
お名前
leva
投稿日時
2007年09月02日
16時ごろ
Comment No
#3
HTMLの末尾に呼んでいるスクリプト部分がいわばこのスクリプトのフロントエンドですが、ここでPHPを使っているのはjavascriptの動的生成を簡単やりたいからで、やろうと思えばjavascriptのみでももちろんできます。

詳しくは検索して欲しいのですが、このスクリプトの動作としてはスライダの値を userFont と定義して、これが変更されたとき（userWidth.onchange）に、逐次 setCookie(”userFont”, userFont.getValue()); を呼んでクッキーに書き込むようにしています。また、ページ読み込み時にそこで設定した値が反映されるよう、クッキーを読み込み、変数 userFont がクッキーにある場合のみ、該当の値を div#content のフォントサイズに指定しています。

クッキーの読み書きさえわかれば簡単にできると思うので、がんばってみてください。
お名前
シンゴロ
投稿日時
2007年09月04日
15時ごろ
Comment No
#4
ご返信ありがとうございます。
おかげさまでクッキーを保存することは出来ました。
http://gorosta.com/gorosta_html/about/index.html

現状は値を50としていますが、
userFont.setValue(50);

この部分を
「クッキーが保存されていない場合は値を「50」、されている場合はその値を反映する」
の1文に変えたいのですが、どうしてもうまく書くことが出来ません。
すみません！
こちらヒントでも頂けると助かるのですが・・
お手数お掛け致します。
お名前
leva
投稿日時
2007年09月04日
17時ごろ
Comment No
#5
試してませんが、javascriptのみだと多分こんな感じじゃないでしょうか。
クッキーを読むメソッドは別所から転載しています。
（http://www.koikikukan.com/archives/2006/05/18-013812.php）

// クッキーを読み込む
var def = readCookie(’userFont’);
// デフォルト値を決定
if (def){
val = def + “%”;
} else{
val = 50 + “%”;
}

// フォントサイズを変更
document.getElementById(”content”).style.fontSize = val;

// スライダのデフォルト値を設定
var userFont = new Slider(document.getElementById(”slider-1″), document.getElementById(”slider-input-1″));
userFont.setValue(def);

// クッキーを読むメソッド
function readCookie(name) {
var nameEQ = name + “=”;
var ca = document.cookie.split(’;');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
お名前
シンゴロ
投稿日時
2007年09月05日
3時ごろ
Comment No
#6
かなり試行錯誤しましたが、levaさんのおかげで無事稼働しました。
本当にありがとうございました！感謝致します。

しかしながら、ご助言頂いた方法では力量不足のためうまく反映できず、
各パーツをみながら、転載して頂いたページを参考にしました。

方法としましては、
クッキーの読み込みメゾットはヘッダー内（外部js）に置き、それぞれのページでvalueがあればそれを反映、なければデフォルト（50）の値を返すという方法で稼働しました。

ここまで書いたのは初めてですので、ちょっとjsに興味が湧いてきました。
今後も励みます。それでは失礼致します。
お名前
名無しさん
投稿日時
2009年03月04日
20時ごろ
Comment No
#7
最高です

他サイトの関連記事

トラックバックはまだ寄せられていません

トラックバックとは: この記事に言及したサイトをこちらに掲載する仕組みをトラックバックと言います。ここでは、このサイトに頂いたトラックバックを一覧表示しています。
トラックバックしてくださる方へ: この記事への言及がない記事など、トラックバック受信方針に沿っていないものは、読者にお見せしても仕方ないこともあり削除させていただいることをご了承ください。

トラックバックを受け取るためのURI

Liner Note

検索