Movable Type

MT生成のアーカイブリストを折りたたむJQ

月別アーカイブリストを年ごとに折りたたむjqueryにトライしました。
このサイトのサイドバーにも反映してみました。


参考にした本は、「Movable Type 4.x クリエイターが身につけておくべき100の法則。」(発行:インプレスジャパン)です。
4.xなので、もう使えない機能もたまにありますが、今回は5.04にも使えました。

ソースは以下です。

<dl>
<dt></dt>
<dd>
<ol>
<MTArchiveList archive_type="Yearly">
<li class="yearlyList"><$MTArchiveTitle$>の記事を見る
<ol>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>

</MTArchiveList></ol>
</li>
</MTArchiveList></ol>
</dd>
</dl>

基本は上記ですが、
今回、今年度のは別に記載したので、去年から過去の表示が欲しい。
と言うことで、ちょっとつけたし。


<dl>
<dt></dt>
<dd>
<ol>
<MTArchiveList archive_type="Yearly"><MTArchivePrevious>
<li class="yearlyList"><$MTArchiveTitle$>の記事を見る
<ol>
<MTArchiveList archive_type="Monthly">
<li><a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a></li>

</MTArchiveList></ol>
</li></MTArchivePrevious>
</MTArchiveList></ol>
</dd>
</dl>
------------

<MTArchivePrevious>タグを使います。

さて、

jqueryが入ってなければダウンロードして<head>内で読み込みます。
その下に新たにjavascriptを書くか、別ファイルにして読み込みます。

$(document).ready(function(){
$(".yearlyList ol").css("display","none")
$(".yearlyList").click(function(){
$(this).children().slideToggle("slow");
});
});


---------

スタイルシートは適宜入れてください。
1点。

.yearlyList{
cursor:pointer;
}

は記述したほうがいいです。しないと、オンマウスでもカーソル形状がかわりませんので、リンクなのかわかりづらいです。

さらに、注意。

「<$MTArchiveTitle$>の記事を見る」

の記述のところにスタイルを入れると、とたんにうまく行かなくなります。
「<$MTArchiveTitle$>の記事を見」る、は残ってて欲しいのに、表れた下層リストに押し出されて消えてしまうんです。

そこに背景バーイラストをおきたかったので、いろいろ試しました。
で、行き着いたのでが、
.yearlyListに背景画像をいれて、下のolにその分マージンを取るスタイルを入れました。
それで、なんとかうまく行きましたよ。

よく分からないけど、
js記述内の
.css("display","none")
が反映されちゃうんじゃないかと思うんですが、、、どうでしょうか。
詳しい人にめぐり合えたら聞いてみます。

InsertIconプラグインでアイコン管理

あるサーバにMTを構築したのですが、
お気に入りのエディタプラグイン「CKEditer」が機能しません。
インストールすると500エラーになってしまいました。。。。

なんとかせねば。。。
ということで、第一弾絵文字アイコンを入れるためのプラグインをインストールしました。

InsertIcon_1_20.zip

http://www.h-fj.com/blog/archives/2007/08/10-105920.php

藤本壱さまのサイトですね。
ファンです!!

使う絵文字を設定するのには手間がかかりますが、カスタマイズして載せられるので。
いいですね。

新規MT構築時の500エラー

仕事で新しくサーバにMTOSをインストールしました。
自動インストールでしたが、構築まではうまくいくのに、ブログのindex.htmlを表示させると、

Internal Server Error

File "/home/ドメイン/public_html/MT構築フォルダ/index.html" is writeable by group


suPHP 0.7.1

が出てしまう。。。

これは、サポートいわく、MT構築フォルダ/index.htmlのパーミッションに問題があるんだそうな。
FTPで確認すると「666」になってた。
これを「644」にしてみたら。

表示できました~。

良かったよ~~。
その先に、山のような作業目白押しの第一歩で、このようなつまづき。
胃がきりきりしましたさ。


【追記】
FTP触っただけでは再構築のたびに「666」に戻ってしまうので、
mt-config.cgiを書き換えました。

DBUmask 0022
HTMLUmask 0022
UploadUmask 0022
DirUmask 0022

をどこでもいいので追加しときます。コレで完璧。

新しい投稿に"new!"を、一定期間表示

記事の新着マークがあると、新鮮度がぐんとアップしますよね。
SEO的にも、ユーザビリティ的にも、効果は高いです。

MTで新着表示をつけてみたので、ご紹介します。

①</head>直前に以下を記述

<script type="text/javascript">
<!--
function newM(y,m,d)
{
newday=new Date(y+"/"+m+"/"+d);
oldday= new Date();
n=(oldday-newday)/(1000*60*60*24);
if (n <=3)document.write("new!");
}
//-->
</script>

これで、投稿3日以内に"new!"マークがつきます。
日数を調整したい時はif (n <=3)の数字をカスタマイズします。

②new!マークを入れたい場所に以下を記述します。

<script type="text/javascript">newM(<$mt:EntryDate format="%Y,%m,%d"$>)</script>

------------------
①の記述をちょっとカスタマイズ。
<span>でスタイルシートを指定することが出来る、<img ~>タグで画像アイコンも対応可、ということですが、私が今回触ったコードはかなり複雑にスタイルシートが敷いてあって、新しいスタイルを効かすための作業がめんどくさかったので( ̄Д ̄;)、Javascriptに直に書き込みました。ちょっとした指示だったので。

<script type="text/javascript">
<!--
function newM(y,m,d)
{
newday=new Date(y+"/"+m+"/"+d);
oldday= new Date();
n=(oldday-newday)/(1000*60*60*24);
if (n <=3)document.write("&nbsp;new!".fontcolor("red").fontsize(2));
}
//-->
</script>

これで、文字色赤、フォントサイズ2に指定OKです。

エディタプラグインCKEditerはいいゾ。

TinyMCEで emoddyを使う方法」という記事を前述しましたが、もっと良いプラグインを見つけました。



ckeditor.gif

このプラグインいろんなWEBアプリ版がでてるので、間違えないようにしてください。

実は、仕事で別サーバのデータ引っ越しがあり、MTOS4からMTOS5へ移行したのですが、やっぱり動かなくなるプラグイン続出で。。。

TinyMCEも不具合がでました。


CKEditerは絵文字も搭載してるので、emoddyプラグインの必要もなくなって、シンプルな使用感がうれしいです。


MultiBlog駆使!その1

今、データ集計をMTでやってます。

Aというデータの中に、複数の個別のデータが入っています。
Bというデータの中にも、複数の個別データが入っています。
Cというデータの中にも、複数の個別データが入っています。

A、B、C...Zまでの属性の一覧表示。
それぞれのデータを一番上の、システムのカスタムフィールドで分けて仲間ごとに表示。
などなど。。。

ポータルサイトの要領ですね。
kaisouimg.gif

困った点がいくつかあります。

<1>検索機能に、システムのカスタムフィールドが引っかかってくれない。
<2>ブログをカスタムフィールドでそれぞれの性格を分けて、それを集計して該当するデータの個数を表示する。ってのが出来ない。
まだまだありますが。。。順番に


<1>については、MTタグでやるには結構大変だったので、フリーの検索CGIのを設置しました。

お薦めCGIこちら。
SYNCKGRAPHICA|札幌ホームページ制作と無料メールフォームCGI

すごく面白いから、一度使ってみてください。
MTとも相性が良いです。(*^^)v


MTはMTで構築して、別のプログラムをかませてあげるってとこが、我ながらいい考え♪

カスタムフィールドを検索するプラグイン「SearchEntries」

MT標準の検索プログラム、<$mt:SearchScript$>では、カスタムフィールドの検索はできません。
プラグインが必要になります。

検索するとまず上がってくるのは、ToI企画さんの「CustomFieldsSearchだと思います。結構有名ですね。
しかし、MTOSでカスタムフィールドをプラグインで作った場合、上記プラグインは使えないようです。
エラーが出ます。

私は藤本 壱さんの「MTOS活用テクニック」を参考にカスタムフィールドを作っています。
mtosbook.jpg

この本の中に、この本を参考に作ったカスタムフィールドを検索するプラグインを紹介しています。
それが「SearchEntries」です。

ダウンロードは以下からできます。
http://www.h-fj.com/blog/archives/2010/04/03-102819.php

ただし、サイトに載っている情報は、MT標準のカスタムフィールドにしか対応していません。
「MTOS活用テクニック」を使っている人は、この本に出てくるタグを使わないとエラーが出ます。

素晴らしいプラグインです!
そして素晴らしい参考書です!!
激お薦め。

PostTweetでハッシュタグを入れる

ツイッターに連動させたので、ツイートにハッシュタグを入れたいというご要望にお応えし、方法を考えてみました。

新しくハッシュタグ用の<$mt:entryhash$>というカスタムフィールドを作ります。そこに前のつぶやき通り、大文字で#を入れた後にタグを入力してPostTweetを再投稿します。

これだけでは反映されないので、pluginsフォルダ内、「PostTweet/tmpl/message_format.tmpl」をエディタで開いて修正します。

---------
<mt:setvar name="title_len" value="100" />

<mt:setvarblock name="title"><mt:entrytitle remove_html="1" /></mt:setvarblock>

<mt:setvar name="category_len" value="100" />

<mt:setvarblock name="category"><$mt:CategoryLabel cutfirstchar="3"$></mt:setvarblock>

<mt:setvarblock name="link"> | <mt:entryshortenedpermalink /></mt:setvarblock>

<mt:setvarblock name="link_len"><mt:var name="link" count_characters="1" /></mt:setvarblock>

<mt:setvar name="entryBody_len" value="50" />

<mt:setvarblock name="entryBody"> | <$mt:EntryBody$></mt:setvarblock>

<!--これを追加-->
<mt:setvar name="entryhash_len" value="20" />

<mt:setvarblock name="entryhash"><$mt:Entryhash$></mt:setvarblock>
<!--これを追加 おわり-->

<mt:setvar name="title_len" op="|" value="$link_len" />

<!--ここもentryhashを入れて修正-->
<mt:var name="title" trim_to="$title_len" /><mt:var name="category" />&nbsp;<mt:var name="entryhash" /><mt:var name="link" /><mt:var name="entryBody" trim_to="38"$>...
<!--ここも修正 おわり-->

----------


最後の一文で<mt:var name="entryhash" />の前に&nbsp;を入れないと、ハッシュタグは機能しません。ご注意を。

PostTweetでmessage_format.tmpl書き換え時の微注意

EntryBodyはそのままだと、htmlタグも入れてしまいますので、
以下のようにします。
 
pluginsフォルダ内、「PostTweet/tmpl/message_format.tmpl」をエディタで開きます。

タイトルと短縮URL、本文を38文字まで表示、以降は...が表示される。
-----------------------

<mt:setvar name="title_len" value="140" />
<mt:setvarblock name="title"><mt:entrytitle remove_html="1" /></mt:setvarblock>
<mt:setvarblock name="link"> - <mt:entryshortenedpermalink /></mt:setvarblock>
<mt:setvarblock name="link_len"><mt:var name="link" count_characters="1" /></mt:setvarblock>
<mt:setvar name="entrybody_len" value="50" />
<mt:setvarblock name="entrybody"> | <$mt:EntryBody remove_html="1" $></mt:setvarblock>
<mt:setvar name="title_len" op="-" value="$link_len" />
<mt:var name="title" trim_to="$title_len" /><mt:var name="link" /><mt:var name="entrybody" trim_to="38"$>...


-------------------

<$mt:EntryBody remove_html="1" $>
ですね。

お薦めメールフォームプラグイン

MTにメールフォームを組み込むプラグインです。

http://www.h-fj.com/blog/archives/2007/01/25-085911.php

とても簡単に設置できました。
ダウンロードすると、ファイルが4つ現れます。
インデックステンプレートと、テンプレートモジュールを新規で作って、ファイルの内容をコピペで置くだけの簡単さ。
スタイルシートで、体裁を整えればできあがりです。

ブログ記事をFacebookに連動させる

Facebookって面白いですね~。ログインしてびっくり!
「友達かも」の欄に知り合いの顔がずらーっと並んでいます。
わー5年前派遣でお世話になった会社の上司がいる!Fさんお元気ですか。その節は大変お世話になりありがとうございました。


というわけで、ブログ記事の更新をFacebookと連動させる記事を探しました。
「むらごんの思い込みWeblog」の記事の中の、My Blog Postsを試しました。

http://muragon.boo.jp/blog1/2011/03/03_2226.html

むらごんさんありがとうございます。

プラグイン「PostTweet」でtwitter連動

PostTweetの導入方法はこちらをご覧ください。
http://m-logic.co.jp/mt-plugins/posttweet/docs/1.0.3/posttweet.html

結構簡単に、組み込めるプラグインです。

ディフォルトだと、ツイッターにはタイトルとURLしか表示されません。
そこに、カテゴリと、カスタムフィールドのテキストを表示するよう、カスタマイズしてみました。

FTPで、mtルートのpluginsフォルダ内、「PostTweet/tmpl/message_format.tmpl」をエディタで開きます。

**デフォルトでは、以下です。**

------------------------
<mt:setvar name="title_len" value="140" />

<mt:setvarblock name="title"><mt:entrytitle remove_html="1" /></mt:setvarblock>

<mt:setvarblock name="link"> - <mt:entryshortenedpermalink /></mt:setvarblock>

<mt:setvarblock name="link_len"><mt:var name="link" count_characters="1" />
</mt:setvarblock>

<mt:setvar name="title_len" op="-" value="$link_len" />

<mt:var name="title" trim_to="$title_len" /><mt:var name="link" />
------------------------



**カテゴリと<$mt:Entry006$>を表示できるようにしたのが以下です。
<$mt:Entry006$>は40文字以降は...で省略します。**

------------------------
<mt:setvar name="title_len" value="100" />

<mt:setvarblock name="title"><mt:entrytitle remove_html="1" /></mt:setvarblock>

<mt:setvar name="category_len" value="100" />

<mt:setvarblock name="category"><$mt:CategoryLabel></mt:setvarblock>

<mt:setvarblock name="link"> | <mt:entryshortenedpermalink /></mt:setvarblock>

<mt:setvarblock name="link_len"><mt:var name="link" count_characters="1" /></mt:setvarblock>

<mt:setvar name="entry006_len" value="50" />

<mt:setvarblock name="entry006"> | <$mt:Entry006$></mt:setvarblock>

<mt:setvar name="title_len" op="|" value="$link_len" />

<mt:var name="title" trim_to="$title_len" /><mt:var name="category" /><mt:var name="link" /><mt:var name="entry006" trim_to="40"$>...
------------------------



**カテゴリと<$mt:Entry006$>か<$mt:Entry001$>を表示できるようにしたのが以下です。
<$mt:Entry00n$>は40文字以降は...で省略します。
カテゴリは頭に3けたの連番をつけてソートしているので、その番号を消して表示します。**

------------------------
<mt:setvar name="title_len" value="100" />

<mt:setvarblock name="title"><mt:entrytitle remove_html="1" /></mt:setvarblock>

<mt:setvar name="category_len" value="100" />

<mt:setvarblock name="category"><$mt:CategoryLabel cutfirstchar="3"$></mt:setvarblock>

<mt:setvarblock name="link"> | <mt:entryshortenedpermalink /></mt:setvarblock>

<mt:setvarblock name="link_len"><mt:var name="link" count_characters="1" /></mt:setvarblock>

<mt:setvar name="entry006_len" value="50" />

<mt:setvarblock name="entry006"> | <$mt:Entry006 blog_id="6"$></mt:setvarblock>

<mt:setvar name="entry001_len" value="50" />

<mt:setvarblock name="entry001"><$mt:Entry001 blog_id="5"$></mt:setvarblock>

<mt:setvar name="title_len" op="|" value="$link_len" />

<mt:var name="title" trim_to="$title_len" /><mt:var name="category" /><mt:var name="link" /><mt:var name="entry006" trim_to="40"$><mt:var name="entry001" trim_to="40"$>...
------------------------
上記は、MTの中に複数のブログが入っていて、同じツイッターに連動させる時にこのような設定をします。

ツイッターに記事が現れると、最初めっちゃ感動します。


一つ置きに記事のスタイルシートを変えてみる

div class="styleA<MTIf name="__even__">  styleB</MTIf>">
以下でもOKです。
<div class="<mt:if name="__even__">styleA</mt:if><mt:if name="__odd__">styleB</mt:if>">

画像を一つ置きに変えるなどの応用にも。
<MTIf name="__odd__"><img src="/img/imageA.gif" alt="" /></MTIf>
<MTIf name="__even__"><img src="/img/imageB.gif" alt="" /></MTIf>


覚書までに。

__first__
初回の繰り返しであれば1

__last__
最後の繰り返しであれば1

__odd__
奇数回の繰り返しであれば1

__even__
偶数回の繰り返しであれば1

__counter__
現在の繰り返し回数

<mt:Entries>で最新記事を除いて表示する

<mt:Entries offset="1">

offsetモディファを使います。
"0"は全件表示になります。
lastnモディファと組み合わせて使えます。

<mt:Entries lastn="10" offset="1">

最新記事1件を除いて、10件まで表示、
というようなふうに。

べんり。

MTでリベンジしよう

車で打ち合わせにでかけました。
会社が終わってから、夕方の国道246号線を走ります。
6時ころでそこそこ混んでました。

今回の打ち合わせの相手の名前、なんだか聞いたことがあります。
なんだろう・・・気のせいかなぁ。
4年くらい前にも一度打ち合わせした気がする。
確か、車の輸出業者で、社長さんは外人だった。

案の定、同じ会社でした。
事務所2年前に引越したそうで、場所が変わっていたので、すぐにはわかりませんでしたが。
ここの社長さん、前打ち合わせ行った時、自家製のカレーごちそうしてくれたっけ。
本場のカレーなのか、肉類が一切入ってなくて、ひよこ豆がごろごろ入ってた。
スパイシーでめちゃくちゃ美味しかったなぁ。

さて、案件内容は、素人でも商品の入れ替えをできるサイトを作って欲しい、とのことです。
前回、お打合せしたときは、私はMTの存在すら知らなくて、商品の入れ替えをホームページ作成ソフトでやらせようとしてた。(酷(^_^;))
見積的にも全く合わず、いいお返事がもらえなかったんだよな。

今の私にはMTがあるので、低コストなご提案が出来るでしょう。
物事は繋がっているんですね。
4年前のリベンジを。いざ。

メインページの文字数を一定以上でカットする

これは前にプラグインをいれてやったことがありましたが、もっと簡単な方法がありました。

以下、まずソースです。

-------------------

<mt:SetVarBlock name="charaCount"><$mt:EntryBody count_characters="1"$></mt:SetVarBlock>
<mt:If name="charaCount" gt="30">
    <p><$mt:EntryBody trim_to="30"$>...</p>
    <p align="right"><a href="<$mt:EntryPermalink$>">続きをみる</a></p>
   
<mt:Else>
    <p><$mt:EntryBody$></p>
    </mt:If>

------------------

<p><$mt:EntryBody trim_to="30"$>...</p>
で、30文字でカットするようにしてます。で...をつけているのですが、
30文字以内なら...が出ないように、その前の記述で代入、条件分岐させます。

後は「続きをみる」で、ブログ記事へリンクさせます。

ページを分割するプラグイン

PageButeというプラグインで、ページを分割して表示させました。

pagebute.jpg

これはずっと標準搭載の機能だと思っていましたが、プラグインが必要だったんですね。

ダウンロードページはこちらです。

スカイアークシステム
http://www.skyarc.co.jp/engineerblog/entry/2642.html

導入方法は、
解凍ファイルPageBute.pl を plugins ディレクトリにアップロードします。

システムのプラグインに「PageBute」が表示されていれば大丈夫です。

次にテンプレートソースを書き換えます。
私は以下のように書き換えました。

---------------

<mt:pageContents count="5">
<mt:Entries>

~ブログ記事(省略)~

<mt:pageSeparator />

</mt:Entries>

</mt:pageContents>

<div class="content-nav">
<mt:ifPageBefore>
  <span><$MTPageBefore delim="&#65308;"$></span>
</mt:ifPageBefore>
<mt:pageLists />
<mt:ifPageNext>
  <span><mt:pageNext delim="&#65310;" /></span>
</mt:ifPageNext>
</div>

---------------

5件づつ区切ってます。

また、ページ分割の表示は11件づつがデフォルトで、表示数を変えるなら

<mt:pageContents count="5" navi_count="6"> ~ </mt:PageContents>

で6件ずつになります。

注意点は、<mt:Entries>にlasten="n"を設定しないこと。
それと、ブログの設定で表示件数を設定しないことです。

 

カテゴリごとに表示スタイルを変える

制作中のサイトで、「交渉中」と「交渉可能」のステイタス分けをしてほしいとクライアントさんから要望がありました。

カスタムフィールドを作って、一度表示可能にしたのですが、これ「交渉中」ならそれだけ集めた表示ができるようにしたいなと思い、カテゴリー機能を使う事にしました。カテゴリ別ページが使えますから。

さて、カテゴリー分けするのは簡単ですが、「交渉中」と「交渉可能」が同じスタイルで表示されるのは分かりづらいですね。そこで、「交渉中」は赤、「交渉可能」は青で表示できるように、スタイルシートを設定しました。

以下、その部分のスタイルシート

--------------

.catstyleka {
 font-size: 0.75em;
 line-height: 150%;
 color: #005890;
}
.catstyletyu {
 font-size: 0.75em;
 line-height: 150%;
 color: #ff0000;
}
--------------

そして、以下はテンプレートに記述した分岐部分

---------------

<MTIfCategory name="交渉可能">
<span class="catstyleka"><$mt:CategoryLabel$></span>

<MTElse>
<MTIfCategory name="交渉中">
<span class="catstyletyu"><$mt:CategoryLabel$></span>
<MTElse><span class="catstyle"><$mt:CategoryLabel$></span>
</MTElse>
</MTIfCategory>
</MTElse>
</MTIfCategory>
---------------------

で、どれにも当てはまらない場合のスタイルを<MTElse>で設定しましたが、当てはまらないカテゴリーが存在しないとエラーが出ます。
ダミーでもカテゴリーを何か作っておく必要がある模様。

社会保険労務士事務所サイト作成中

社会保険関係って、分かりずらいというイメージがありましたが。

原稿が送られてくるたび、組み立てる前に一読して、感動しています。
そんな仕組みだったとは!!!

今日は「年金」のページを組み立てたのですが。
年金って、きちんと申請しないと出ないのですね。
で、どう申請するのか。
ご参考ください。

http://miho-sr.com/

さて、トップページと更新情報ページのみ、Movable Type(OS)で組んでいましたが、はたと考える。

このサイト、全部MTで組んじゃって良くない?

気づくのが遅い自分に苦笑。
というわけで、MTへお引っ越し。

safariでの文字化けを解決!

美容院様のリニューアルを受注しました。

打ち合わせの為お店を訪問しました。白を基調にした明るい店内、ブルーの日よけとのコントラストが美しい、創作意欲を掻き立てる現場でした。

スタッフブログを入れたいのと、簡単な画像の差し替えはお店でやりたいとのことで、今回もMovable Type (MTOS)で作っていこうと思います。
ただ、店長さん曰く、お店のマシン(MAC)のブラウザはsafariを使っていて、良く文字化けする。そこは気をつけてほしいとのこと。

えー私のサイトは大丈夫かな。うちのMACのsafariでみてみたところ、びっくり。

何語だ?!これは!

すごい文字化けです。恥ずかしい。プロとして失格だ。

MTはWindowsのIEで組み立ててたので、MACのsafariでは確認してなかったです。

それで、解決方法をいろいろ検索してみました。MTのシステムプログラム側でいじる方法を試しましたが、うまくいきません。

safariのメニューのテキストエンコーディングをUTF-8にすると、きれいに表示されます。だから、システムじゃなくて、アクセス時に何か制御したり指定出来るようなものないかな。

で、.htaccessで制御する方法、「はてな」でみつけました。

-------------------

・テキストエディタで

AddType "text/html; charset=utf-8" html htm

とだけ入力。

・ファイル名を「htaccess.txt」で保存。FTPでアップして、名まえを「.htaccess」に変更。

-------------------

これでばっちり解決。.htaccessが使えるサーバに限りますが。
MTが使えたら.htaccessも使える可能性高いですよね。?

さて、このお客さん。どうもFlashが好みのよう。でも、iPhoneにも対応して欲しいとのこと。

.htaccessフル活用ですね。
デザイン提案画も結構きれいなのができて。

俄然、楽しくなってきた!

MTOSで新着更新

社会保険関係の会社様のサイト作成中です。

新着更新情報内容がとても旬で(みんなそうだろうけど)、多分キーワード検索でたどられる機会が多そう。

子ども手当の支給開始とか、 国保組合への国庫補助見直しへ、とか。

なかなかそんな条件の良い(?)サイトは無く、これは新着ページ更新しやすくして、アクセス数アップさせなきゃ!

というわけで、トップページと更新情報はMovable Type Open Sourceで、構築しました。

このクライアントさん、レンタルサーバは「さくらインターネット」をご利用です。
本当に使いやすい「さくらインターネット」。

もう1件、民間治療院様のリニューアルも同時進行していますが、プロバイダのスペースを使っているので、プログラムが一切使えません。
ドメインとったらいいのに・・・と思ってお勧めしてみましたが、いまひとつ乗り気になれないとのこと。(プレゼンの力不足ですね。)

Movable Type Open Sourceにカスタムフィールドを設定する方法も見つけましたが、まだ、忙しくて着手出来ないです。抱えてる仕事が一段落したら、いじり倒すぞ。Movable Type Open Source。

サーバさえ条件満たしていれば、最強のCMS構築できるクリエイター!

になりたいです。

カスタムフィールドが設定できることを発見した

100423_142333.jpgCMSに活用できるMovableTypeですが、
膨大なページを生成していく場合、もっと入力が簡単になればいいのに・・・と思っていました。

例えば、今作ってるポータルサイト。

各お客様の情報ページが、同じフォーマットで作られていくんですが、ファイルのコピペで作っていこうと思ってました。
でも、決まったフォームに入力していくだけなら、めんどくさくないし、CMSとしてもかっこいいです!

で、写真参考書を読んでいたら、「カスタムフィールド」、つまり自由な入力フィールドが作成できること発見。

まだまだ、未熟ですね。。。私。

で、作ってみたのが、「今日の一言」です。

残念なことに、Movable Type Open Sourceでは使えないみたい。カスタムフィールド設置したいポータルサイトはMovable Type Open Sourceで作ってるんです。
振り出しへ戻る。(でも、収穫あり(^.^)b)

Movable Type Open Sourceでつくったモバイルサイトの落とし穴

さて、前述のモバイルポータルサイトですが、ひとつ解決できずにGOが出てしまった問題があります。

それは、文字コードの問題です。
さくらインターネットのデータベースは文字コード「utf-8」で動いています。
Movable Type Open Sourceのシステム自体も、「utf-8」で構築されています。
携帯主要3機種docomo・au・softbankも問題なく表示はされます。

ただ、auは「utf-8」入力をサポートしていません。なので、検索窓に打ち込んだ文字は「Shift-JIS」でインプットされるためここで激しく文字化けが起こります。(文字化けに激しいもおとなしいもありませんが)

この問題を解決するために、本当にいろんなことを試しました。
ネット検索するとそれらしい記事が出てきますが、片っぱしから試しても全くうまくいきません。
ファイルを全て「Shift-JIS」に変換してみるというご苦労なこともしてみましたが、データベースに情報を読みに行った時点で文字化けが起こります。

このポータルサイトの構造は、絵文字対策でトップページのみ、docomo・au・softbank用と振り分けて3つファイルを用意しています。
結果としてこのめんどくさい作業が身を救ったことになりました。
検索はトップページだけに設置されているのですが、納期も差し迫った極限状態の私、auのみ検索窓のない仕様でスタートさせてくださいとクライアントさんを拝み倒し、なんとかOK。

一応、検索窓部分はコメントアウトして、いつでも解決策が見つかったら復活できるようにしてあります。

良い解決策をお持ちの方は、コメントを心よりお待ち申し上げております。

Movable Type Open Source について

レンタルサーバさくらインターネットのウェブアプリケーションのところを見ていたら、「Movable Type Open Source」の文字が。

Open Source?Movable Typeとは違うのか?

早速、クイックインストールしてみましたところ、Movable Typeの簡易版にしては、十分な機能満載の優れたツールでした。しかも、商用でも無料。
こんないいツールがあったとは。

で、現在、これで携帯用のポータルサイトを構築しています。

各カテゴリーごとに情報を分類して自動的に表示したいので、とても便利です。
ただ、カテゴリ分けてで表示しようとすると、なぜか同じ情報が2回づつ表示されてしまいました。

なんでだろう・・・

考えてる時間がもったいなかったので、@をあたまに置いたプライベートタグタグでタギングしてアップしておき、タグごとに表示できるようにしました。こっちはうまくいくようです。

ひとつの情報に、@地域A・@職種Bなどのタグを設定しておきます。地域Aで検索する場合、地域Aのひな型ページを作成しておき、そこに@地域Aタグをもった情報が、入力の新しい順で表示されるようにします。

ブログのシステムって、前述の不動産の情報もそうですが、ブログ以外にもかなり使えます。
ひねりひとつ加えるだけですね。

ただ、携帯サイトで応用するには、多少問題が。
後日また、報告いたします。

不動産屋さんのHPにMovable Type

不動産屋さんからHPの依頼が入りました。納期1週間。(^_^;)

ま、トップ、概要、問い合わせ、情報の4ページだったので、ボリュームはないのですが、不動産情報を随時アップ/削除し、更新したいと。

待ってました!コンテンツマネジメントシステムの出番ですね。

サーバはMovable Typeライセンス付のものだったので、早速組んでみました。

情報ページにブログの要領で物件が表示され、「カテゴリ」を「キーワード」に文言を変えて、
例えば、「駅徒歩15分」とか「ペット可」とか「コンビニ近い」などのカテゴリをキーワードとして表示させました。

カテゴリをクリックすると、条件にあった物件がピックアップされる。

トップページには「更新情報」として、ブログで言うところの「最近の記事」を表示させ、詳細は情報ページへリンクさせる。

すごい。Movable Type。

できたサイトはこちら。
http://arrow-rec.grats.jp/

賃貸をお探しの方は、どうぞ。

メニュー部分をモジュール化

ごあいさつページを作成し、メニューとしてリンク表示させました。

このソース部分をモジュール化して各ページに表示します。

<$mt:Include module="独立ページのメニュー"$>
というタグひとつ入れればいいだけ。更新があればモジュールを修正すればいいんだもんね。
素晴らしい機能だ。

ただ、このインクルードタグのところ、モジュールの名前を日本語でいれるのって、なんか面白いですよね。
いや、参考書がたまたまそうなってて、普通は英数字で入れるのが流儀かも。

なんにしてもMovable Typeって、使えば使うほど面白い。

新しく受けた15ページもののサイト、Movable Typeで作ってみようかと思案中。再来週クライアントとの打ち合わせがあるので、打診してみます。

あけましておめでとうございます。

今年もがんばってカスタマイズします。
今日はカレンダー表示と、タグクラウドをつけました。

いつから仕事はじめようかな~。明日くらいからにしようかな~。
と思っていたのに、なんだかんだ仕事をしています。

1件年跨ぎのサイト作成が完成しました。クライアント様に気に入っていただけますように。
塗装業者様のサイトなのですが、簡単なテンプレートタイプのご注文でした。
ご自分で更新・修正なさりたいようです。

サイトを作ったはいいけど、作りっぱなしではアクセス数は上がりません。
自分で手を加えていこうという考えは、前向きでいいですね。
精一杯、シンプルな構造に作っておきましたので。(変な日本語)

昨日、ネットでこんな広告を見つけました。

「商用ブログでホームページ」

最近よく見る言葉ですが、やっぱりこれからは更新頻度が最大のキーワードではないでしょうか。
となるとMovable Typeでサイトを作って売る技術は、必須になってきそう。
ただ、広告を出している業者はサーバ管理もやっている。これは強い。
私のこれからのターゲットも、今は個人向けの仕事が多いけど、変わってくるのかも。

どんな一年になるのか楽しみ。

スタイルシートの勉強にもお薦め(^.^)b

Movable Type ちょこちょこカスタマイズしています。

昨日は、トップページだけ3段組み表示するCSSを入れました。
参考書通りに入力しているのですが、CSSの組み方で、自分のやり方と違う方法をみると、むちゃくちゃ勉強になるな~と思います。

今朝は、検索窓をつけて、検索結果ページのシステムテンプレートを、カテゴリ別ブログ記事のテンプレートからコピーして作成しました。
参考書通りにやったのに、エラーが出ます。
<$mt:CategoryLabel$>タグは、カテゴリ別ブログ記事のページにしか使えないとあるので修正したのですが、エラーは<mt:CategoryPrevious>タグを使っていることに、怒っているらしい。
確かに次のカテゴリへのリンクで使ってる。検索結果ページには使えないだろうことも予想出来たので、

-----------------------

<p class="pagelink">
<mt:CategoryPrevious>
<span class="pageprev">&laquo; <a href="<$mt:CategoryArchivelink$>"><$mt:CategoryLabel$></a>
</span>
</mt:CategoryPrevious>

<mt:CategoryNext>
<span class="pagenext"><a href="<$mt:CategoryArchiveLink$>"><$mt:CategoryLabel$></a> &raquo;</span>
</mt:CategoryNext>
</p>

--------------------

までをコメントアウトしてみた。
でも、まだ同じエラーが出るので、思い切って削除してみたら、検索ページきれいに表示されました。
めでたし。

コメントアウトは効かないのね。ざくざく削除する度胸がないといかんのですな。ふむ。

ヘッダーの画像をJavaScriptで時間差し替え(*^^)v

久しぶりにカスタマイズ没頭。
ヘッダーのタイトル「Movable Typeカスタマイズ中です(-_-)v」画像を、時間ごとに差し替えるというJavaScriptにチャレンジです。

画像差し替えは、大昔、自分のサイトでやってました。
最近受けた仕事では、月ごとにFlash画像を差し替えるというのをやってみましたが、これはおもしろかったです。
http://www2.ocn.ne.jp/~sagajyun/
Flashのスクリプトを別jsファイルに置いて、そこに差し替えJavaScriptを別jsファイルから読み込ませて・・・。
プログラマーではないので、高度な事をするとなんか自分すごいじゃんとうぬぼれてしまう。(^_^;)

さて、今回はどうやったかと言うと。

まず、スクリプトを用意。
-------------------------------------
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
stcnt = 0;
d=new Date();
h=d.getHours();
if (h >= 0 && h <= 4) {img = "サーバ名/img04.jpg";}
if (h >= 5 && h <=11) {img = "サーバ名/img01.jpg";}
if (h >= 12 && h <=16) {img = "サーバ名/img02.jpg";}
if (h >= 17 && h <=21) {img = "サーバ名/img03.jpg";}
if (h >= 22 && h <=23) {img = "サーバ名/img04.jpg";}
document.write('<a href="インデックス"><IMG src="'+img+'" border="0"></a>');
// -->
</SCRIPT>
-------------------------------------

サーバ名は絶対パスで書きました。テンプレートタグを使うといいのでしょうが、その辺はおいおい知識が増えてから。
それから、テンプレートモジュールのバナーヘッダーを書き換えました。div id="header"を残して、すべてを上記JavaScriptと差し替え。
そのあと、各ページのヘッダー部分を、サイドバーを組み込んだ要領でモジュールを呼び出し。
<$mt:Include module="バナーヘッダー"$>

動作確認は、パソコンのコントロールパネルから「日付と時間」を選び、一時的に時間を変えてその時間の画像が呼び出されるか確認します。(確認後元に戻すのを忘れずに。)

さて、この設定で現在4パターンの画像が差し替えられています。
もう少し増やしてみよう。あと、画像ももうちょっとひねりを加えたいものだ。

参考書には載ってないけど工夫を凝らして出来ると、嬉しいものです。
あと1週間は楽しめそう(^^♪

ブログパーツを置いてみた!(^^♪

ニコニコ動画のデジタル時計のブログパーツがシンプルで良かったので、サイドバーテンプレートに埋め込んでみました。

それから、地球の名言シリーズから、「夢をかなえるための名言」のブログパーツを置いてみました。更新のたびに変わるので、更新かけまくってます。アクセスカウンタすごいことになりそう。

イチローの名言。かっこいい(*^_^*)

http://www.blog-parts.com/から、頂いてきました。いろいろあって面白いです!

YouTubeのPV特集のブログパーツもあって、置いてみたけど、ページが飛ぶたびに音楽がぶつっぶつっと切れるので、外しました。

完成したら、アフェリエイトにも挑戦しよう!

Movable Type お引っ越し(^_^;)

お薦め参考書のところで書きましたが、今見てる参考書通りに作業したければ最初の設定を「既定のブログ」にする必要がありました。
でも別の設定にしていたため、テンプレート数が参考書より少なくて。。。まいっか、で進めているうちに、良く分からない状態になってしまいました。

そこで、もう一度ブログを設定しなおすことに。

まず、ツールメニューのエクスポートでブログをバックアップ取ります。テキスト形式で保存されるので、デスクトップに保存用フォルダを作り、入れておきました。

それから、デザインメニューのテンプレートを開いて、手を加えたメインページのソースやスタイルシート、その他の各テンプレートをそれぞれコピペでエディタソフト文書にコピーを作り、また保存用フォルダへ入れました。

そして、いよいよ、ブログの削除(ドキドキ)。

それから、同じタイトル名でまた、新規作成メニューからブログを作り、今度は「既定のブログ」で設定。
そしてツールメニューのインポートでブログ記事を入れる。
次にメインページやスタイルシートやテンプレートのソースをコピペで写す。

かくして、15分で参考書通りの仕様に。

また、ストレスがひとつ減った。幸福感。

モジュール。あるなら早く言ってよ、な機能 (-_-;)

サイドバーの一括更新て、できないものか。。。
参考書通りに各ページにタグを埋め込みながら思う。
と思っていたら、出ました。センテンス「モジュール」。
Dreameweaverで言うところの、ライブラリですね。
こんな機能があるのに、わざわざ各ページタグうちさせてたわけだ。
この参考書、人が悪いわね。(楽させてたら勉強にならないけどね)

でも、たった一行のタグで、全頁更新される爽快さ。

快感。

MovableTypeお薦め参考書

今日もMovableTypeのカスタマイズ。

ダウンロードからインストール、初歩の初歩の操作までは、
株式会社技術評論社の「これからはじめるMovableTypeの本」を参考にしてました。分かりやすくて良かったです。

お薦め参考書0001

今使っている参考書は、ソシム株式会社の「MovableTypeレッスンブック」(写真)。
数ある参考書の中で、カスタマイズを一から丁寧に教えてくれる。
MovableTypeビギナーにはかなりお薦め。
ちなみに、この本のとおりの操作をしたいのであれば、最初の設定でタイプを「既定のブログ」にします。
でないと、アーカイブテンプレートの仕様が同じになりません。
本の通りにタグを入れると、エラーが連発する個所が出てきて、慌てます。

デザイン等はいじらずMovableTypeを使うだけの場合は要りませんが、思い通りに変えてみたい!という要求(欲求?)のある場合はいいでしょう。

この先、いろいろやってみたい。

サイト全体もMovableTypeで作ってJavaScriptも組み込んでみたいところがある。Flashは置けるかな。

今年の冬は楽しくなりそうだ(*^^)v

スタイルシートファイルの反乱<(`^´)>

朝からMovableTypeカスタマイズしてましたが、
スタイルシート保存するたびに、改行が自動で増えていきます。
これはどういう現象なんだろう。

4000行になったところで、フリーズして動かなくなってしまった。

そりゃそうだよね。
私だって4000メートル行き来するの嫌だもん。
スタイルシートの気持ちもわかるわ。

そこで、スタイルシートだけ、FTPで上げ下げして、
使い慣れているエディタソフトで作業することにしました。

結果としてこれが大正解。
要はCMSなので、ネットを介して更新かけるから、ちょこちょこローディングの時間が食うのだけど、
このやりかたならローカルで作業できるから、早い早い。
ストレスもなし。(←超重要)

この辺のフレキシブルさ。(自画自賛)
世間の荒波を犬かきで渡ってきた、貧乏WEBクリエイターが得た知恵なのだ!
(意味不明)

Movable Typeで携帯 (^^♪

今日はMovable Type関係のお仕事。

Movable Typeで作ったページを、携帯で見られるようにしなくちゃいけないので、モバイルサイトmakerというソフトをダウンロードして試用してみました。

http://mobilesitemaker.jp/function/

サーバにインストールするタイプのアプリケーション。

もう、CMS全盛期ですね。昨日のEC-CUBEといい、Movable Typeといい、このモバイルサイトmakerといい。カスタマイズの受注、増えるかしらん?

携帯サイトの場合、キャリア分けの問題があるのですが、これは分けてくれちゃうんですね~。

いろいろやらなきゃならないとパニクっちゃう私に最適!

で、作ってみたデモ版がこちら。

PC http://watase.bz/zakkawatase/

モバイル版 http://watase.bz/zakkawatase/mobile/

同じデータから生成されている。技術の進歩ってすごいな~と思う。純粋に。

 

それにしてもなんだか、本当に雑貨やの店主になった気分。 

サーバー乗り換え~♪

EC-CUBE(ECサイト構築ソフト)のスタイルカスタマイズの仕事が入った。

私の契約中サーバ(さくらネット)にはインストールできないので、解約することにしました。(まだお試し期間中だったのでセーフ)。結構良かったですけどね、さくらネット。

そして、Ablenetを契約。容量5GB。

サイトで結構丁寧にいろいろ説明しているけど、やってみるとシステムエラー起こすわ、リンクはつながんないわ。手落ちの多い会社だなぁぁ。バグ取り、雇ってくれればやるのに。

ならば、何故選んだのかというと、月々の利用料金が1000円を切っていたのが決め手。

この辺の金銭感覚が、主婦だなぁ・・・。私。

 

さっそく、Movable Typeをインストールしました。

さくらネットの今までのブログデータは引っ越しできるだろうけど、忙しいので(主婦だから)、暇なときに。・・・あ、解約するから削除されちゃうんだった。

ま、いっか。

さー。いじり倒すぞぉ。わくわく。

Movable Type をインストール (*^_^*)b

先日、図書券をいただく機会がありました。

なかなか興味のあることをネットで調べ上げるのにも限度があり、

参考書ほしいなぁ・・・。と思っていたので、とても嬉しかったです。

 

で、Movable Type 関連の本を購入。

ブログだけでなく、CMSに活用したかったので。

ケータイキットをインストールすると、携帯サイト用ブログも構築できるらしいです。

キャリア(docomo、au、softbank)の問題もクリアするそうです。

 

しかし、

Movable Typeをインストールするのにはデータベースが使えなくてはなりませんが、利用中のサーバは非対応でした。

そこで、希望にかなう安いサーバを比較ドットコムで探しました。(http://www.hikaku.com/server/

そして「さくらインターネット」のスタンダードプラン3GB月額500円(驚)を契約。

サポートも充実、サイトも分かりやすい、手続きも早い。

お薦めです。「さくらインターネット」(http://www.sakura.ne.jp/

 

さて、Movable Typeをさっそくインストール。

このあと、CSSカスタマイズして、トップ画像差し替えて...記事も充実させるぞ。

やってみたいことがたくさん。わくわくする~。

幸せな気分のwataseなのでした。