2009-05-26

はじめてのDrupal

cms drupal

Drupalをインスコロールしてみたのでメモ。

インストール

日本公式のクイックスタートを素直にやりましょう。
http://drupal.jp/

モジュールを入れる。

Drupalはインストールした時点ではいわば「ソフトの無いPC」状態で、画像投稿すらできません。MTで言うところのプラグインであるモジュールを入れます。
とりあえず個人的に必須くさいのを下記に。

FCKEditor ＋ IMCE

http://www.dakiny.com/archives/drupal_62_tinymcefckeditor/
http://jutememo.blogspot.com/2009/02/drupal-wysiwyg-fckeditor-imce.html
上記を参考。FCKEditorがあれば画像投稿専用のモジュールはあまりいらないかな。
でもカスタムフィールド的に画像をダイレクトに指定する機能はまた別にいるか。

ワークフロー

http://drupal.pineray.jp/project/workflow
まだ使い方よく分からず。
個人ユースはまず不要だけど、企業ユースだと必要に迫られることもありそう、というかウリになるので。

FCKEditorに伴う設定の調整

投稿のたびに「Full HTML」にチェックを入れるのは現実的でないので、「管理セクション＞サイトの環境設定＞入力の書式」より「Full HTML」をデフォにしておく。



modules/fckeditor/fckeditor/fckconfig.js

上記ファイルをダイレクトにいじってツールセットなども調整する。

管理画面とサイト側のテーマを分ける

「管理セクション＞サイトの環境設定＞管理用テーマ」より管理画面のテーマを固定できます。
MTから入った自分としては、管理画面は独立した画面でないと共通の運用マニュアルが作れなくなったりして困ります。

でも考えようによっては、管理者ログインしている状態を分かりやすく表示できていれば、サイトデザインと連動しつつ管理ができていいかも知れない…Amazon上部のアソシエイトバーみたいに。

Drupalに触れた感想

「これお客さん使いこなすの無理じゃね？」
というのが第一印象。
Webアプリの操作にバリバリ慣れており、読み解くことに抵抗の無いような人じゃないと、使い込むのもイヤになるようなインターフェース。そのインターフェース自体もカスタマイズできるのだとは思いますが、いかんせん項目数と、それに伴うクリック数が多い。
まぁ権限操作して記事投稿関連以外の項目を出さなければ、工夫次第で使いやすくはできると思います。

あとやはり日本語ドキュメントが少ないのが辛い。
公式もクイックスタートは親切だけど、それ以降の事は分かりづらいし。本買えってことか。買うほどやりこむかも分からないけど。
まぁ慣れではございますねハイ。

テンプレート、というかテーマのカスタマイズもぼちぼちと手を付けていきます。

2009-05-12

備忘録：FCKEditorの「スタイル」欄にAタグ用クラスは指定不可？

FCKEditorの「スタイル」メニューに項目を増やすには下記ファイルの修正で行えますが…

mt-static/plugins/FCKeditor/fckeditor/fckstyles.xml

リンクに対しアイコンを出すスタイルを設定しようと下記のように記述ました。



<Style name="a:icon_01" element="a">

	<Attribute name="class" value="icon_01" />

</Style>

で、コイツを実際にエントリー編集画面で使うと…
ほにゃらら■リンク
みたいに、カーソルがあった場所にアイコン(■)を置いてしまう。

Firebugでソースを覗いてみたところ



<a href="〜">ほにゃらら<a class="icon_01"></a>リンク</a>

こんな感じに、クラスだけ入れたカラの<a>タグを挿入してやがりました。

手打ちで「class="icon_01"」を指定したリンクに対して、スタイル欄から選択するとそのクラスを外すことは出来るんですが、また同じリンクにスタイル欄で指定しても上記のようにカラ<a>タグを挿入する始末。

<a>にクラスを指定したいってニーズは結構あるはずなんだけどなぁ。
今のところ解決策模索中…

2009-05-07

サイト訪問者が認識する順位

ui note

1. 目に飛び込んでくる要素

主にロゴ、グローバルナビゲーション等。
意識せずとも目に止まり、視界の端にあっても「それが何であるか」を漠然とでも認識できる要素。

2. 読みたい要素

主にコンテンツ。
ユーザが求め、最優先で探している本来の内容。求めるコンテンツが画像か文章かで目配せの早さは変わるが、認識の差はあまり無い。

3. 目立つ要素

主に画像(コンテンツでない)、バナーなど。
目立ちはするが「バナーである」という認識があるユーザにとっては読み飛ばされ意識的にフタをされるため、コンテンツより認識は低い。

4. 読める要素

主にパンくずリストなど、サイトの利便性に関わる仕組み。
「読んで分かれば良い」というレベルの要素。コンテンツではないため、主張は避ける。

5. 分からない要素

主にタグクラウドなど、サイト運営者へ効果のある仕組み
その内容、意図がユーザに伝わらない・意義の無い要素。主張せず、場合により掲載の検討を。
下記の6とは異なるマイナスのストレスが高まる可能性あり。

6. 読めない要素

本来改善すべき要素。もしくは意図的に読解できなくしている飾り。
「読めない」という時点で認識はされているため、読めないことに対して発生するストレスを意図した効果として狙っている場合は有効と言える。（やきもきさせる印象効果）

パンくずをやたら目立たせるような要望に対して考えた箇条書き。
あと個人的に、タグクラウドってSEO狙い以外は制作者のオナニーだと思ってます。タグクラウドが「何であるか」を知ってる人以外には意味不明な単語群なので、アクセシビリティはともかくユーザビリティに良いとは思っていません。
基本的に順位を崩さないことがユーザビリティとして良いと思いますが、プロモーション的には6が1になるといったケースも考えられるのでケースバイケースで。

2009-05-01

備忘録：MTNoSearch廃止対策

mt js

最新のMT4.25からはクレームが飛びまくったのかMTNoSearchが復活していますが、それ以前の4.2環境もまだまだあるワケで、その場合の対策。

機能概要

検索フォーム内に必ずデフォ文字か他の文字が入っている状態にする
検索フォーム内でのEnterキーを封じる

両者の合わせ技で、フォームが空の状態での検索を出来なくさせます。
Enterでサクッと検索できなくなるけど、仕方ないね。
JS OFF環境？しらんがな(´・ω・｀)

JavaScript



//**************************************************

//	inputFocus/Blur

//--------------------------------------------------

function inputFocus(obj,txt) {

	if (obj.value == txt) {

		obj.style.color = "#333333";

		obj.value = "";

	}

}

function inputBlur(obj,txt){

	if (obj.value == "") {

		obj.style.color = "#cccccc";

		obj.value = txt;

	}

}
//**************************************************

//	BlockEnter

//--------------------------------------------------

function BlockEnter(evt){

	evt = (evt) ? evt : event; 

	var charCode=(evt.charCode) ? evt.charCode : 

		((evt.which) ? evt.which : evt.keyCode);

	if ( Number(charCode) == 13 || Number(charCode) == 3) {

		return false;

	} else {

		return true;

	}

}

function attachBlockEnter(formid) {

	var elements = document.forms[formid].elements;

	for (var j=0; j < elements.length; j++) {

		var e = elements[j];	

		if (e.type == "text"){

			e.onkeypress=BlockEnter;

		}

	}

}

「BlockEnter」は下記URLのものを利用させていただきました。
http://blog.nomadscafe.jp/archives/000484.html

HTML側



〜

<form method="〜" action="〜" id="search">

<input type="text" name="search" value="検索キーワード" style="color:#cccccc;" onfocus="inputFocus(this,'検索キーワード')" onblur="inputBlur(this,'検索キーワード')" onkeydown="return BlockEnter(event);" />

〜

</form>

<script>attachBlockEnter('search');</script>

ご自由にご利用ください。

2009-04-28

ｶｶｯと

days

日頃の会話や人に指示する時に
「パパッと」「ササッと」「ズバッと」「スカンと」「グイィーッと」「こう、サーッとね」「プリッと」「ドカッと」「ズガガーンと」「ピューッと」
などなどの擬音を手振り付きで発しまくってるんですが、コレって他人から見てどうなんでしょうか。さすがに長嶋監督のようにイングリッシュを多用するわけではないんですが。
良いクセなのか悪いクセなのかよく分からないけど、頭がいいようには思えない。
ボキャブラリーが無いんですね、ハイ。

2009-04-23

はじめてのjQuery

web

規模の大きめなコーポレートサイトをMTのマルチブログで構築していまして、いわゆる「新着情報」に該当するブログで更新があった際、本体側でもエントリーを読み込んではいるのですが、ダイナミックパブリッシングしているわけではないので、本体側でも再構築が必要で面倒です。

そこで、開発スタッフが他の箇所で使っていたjQueryでもって、新着を読み込んでみた。
はじめて自分の手でjQueryというものに触れました。

本体側で



<script language="JavaScript" type="text/JavaScript">

$(document).ready(function (){

reload();

});

function reload(){

$("#news_list").load("news/top.html");

};

</script>

<div id="news_list"></div>

こんな感じに記述。

拍子抜けなくらい簡単に読み込めた。
うん、すごい簡単。流行るのもよく分かる。

読み込めはしたんだけど…激しく文字化けが発生。

jQueryはUTF-8で

読み込んでいたHTMLファイルがShift-JISで、どうにもjQueryはUTF-8のファイルでないとまともに読み込めないらしい。
いまさら出力側MTの文字コードを変えることはできず、jQuery側でShift-JISに対応するのもトンでもない手間なようなので、結局外部HTMLをSSIで読み込んだ。

使い慣れたSSI最強。

2009-04-01

ダイナミックパブリッシング時、PHPコード内でMTの値を使う

http://gedima.net/cms/use_mt_tag_in_the_template.html
コチラを参考にしました。

ダイナミックパブリッシングによりPHP化されているページでは、Pealで組まれたMTプラグインは利用できないことが多々あります。



<ul>

<MTTopLevelCategories>

<li><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel cutbefore="_"$></a></li>

</MTTopLevelCategories>

</ul>

例えば上記カテゴリーリスト中にある「cutbefore」は「Cutstring」プラグインによるものですが、見事にコイツが使えなくなっています。
Cutstringによる処理が使えないと困るので、せっかくPHP化されてるってことで下記のようなコードで対応しました。



<ul>

<MTTopLevelCategories>

<?php

$categoryLabel = smarty_function_MTCategoryLabel(array(),$this);

$archiveLink = smarty_function_MTCategoryArchiveLink(array(),$this);

$label = substr($categoryLabel, 4);

print "<li><a href='$archiveLink'>$label</a></li>";

?>

</MTTopLevelCategories>

</ul>

PHP中では<MTCategoryLabel>といったMTタグが使えないため、「smarty_function_」から始まる形でMT内の値を抜いてきます。
今回はカテゴリーラベルとアーカイブリンクを引っこ抜いてきて、「Cutstring」の処理に当たる、カテゴリーラベルを先頭4文字削った上で出力しています。

PHP中でMTの値を抜くにはコレ



$変数名 = smarty_function_[MTタグ名](array(),$this);

大事なことなので2回書きました。

:: Agnist in hatena ::