January 7, 2010

【MODx】Dittoでカレントドキュメントと同じフォルダ内のドキュメントを抽出する

以下ウェブサイト「くらしの道具」の「くらしの道具たちを作家・工房別にみる／土井善男」さんをはじめとする各作家・工房別作品ページの Ditto のスニペット・コールの備忘録です。同じフォルダ内のドキュメントの作品サムネイルとリンクを取得します。

MODxのドキュメントツリー構成

くらしの道具 MODxドキュメントツリーキャプチャ

Ditto のスニペット・コール
次の記述でカレントドキュメントのと同じフォルダ内のドキュメントを抽出します。この1行のコードをカレントドキュメントに記述しておけば、作品ページ・ドキュメントのデータを増やしても自動的に更新されます。

[!Ditto? &id=`thumbnail` &parents=`[*parent*]` &depth=`1` &orderBy=`pagetitle ASC` &tpl=`doguByArtistWorkList`!]

パラメータの説明

parents=`[*parent*]　･･････カレントドキュメントの親ドキュメント id を取得
depth=`1`　･･････取得する階層の深さ。デフォルトが `1` なので記述しなくてもOKです
orderBy=`pagetitle ASC`　･･････pagetitleを昇順にソート
tpl=`doguByArtistWorkList`　･･････テンプレートを指定（チャンク doguByArtistWorkList に記述）

テンプレート・チャンク "doguByArtistWorkList"

<div class="thumbnail"><!-- ===== サムネイル画像 ===== -->
    <h6><a href="[~[+id+]~]">[+workImage+]</a></h6>
</div><!-- ===== thumbnail ===== -->

プレイスホルダの説明

[~[+id+]~]　･･････Dittoで抽出したドキュメントのURI
[+workImage+]　･･････Dittoで抽出したドキュメントのサムネイル用カスタムテンプレート変数

出力されるhtmlコード

<div class="thumbnail"><!-- ===== サムネイル画像 ===== -->
    <h6><a href="web/dogutachi/artist/doi/01.html"><img src="assets/images/dogu/doi-IMGP1090.jpg" alt="土井善男 白磁七寸皿 画像" /></a></h6>
</div><!-- ===== thumbnail ===== -->
<div class="thumbnail"><!-- ===== サムネイル画像 ===== -->
    <h6><a href="web/dogutachi/artist/doi/02.html"><img src="assets/images/dogu/doi-IMGP1091.jpg" alt="土井善男 白磁七寸皿 画像" /></a></h6>
</div><!-- ===== thumbnail ===== -->
<div class="thumbnail"><!-- ===== サムネイル画像 ===== -->
    <h6><a href="web/dogutachi/artist/doi/03.html"><img src="assets/images/dogu/doi-IMGP1092.jpg" alt="土井善男 白磁七寸皿 画像" /></a></h6>
</div><!-- ===== thumbnail ===== -->
<div class="thumbnail"><!-- ===== サムネイル画像 ===== -->
    <h6><a href="web/dogutachi/artist/doi/04.html"><img src="assets/images/dogu/doi-IMGP1093.jpg" alt="土井善男 白磁七寸皿 画像" /></a></h6>
</div><!-- ===== thumbnail ===== -->
<div class="thumbnail"><!-- ===== サムネイル画像 ===== -->
    <h6><a href="web/dogutachi/artist/doi/05.html"><img src="assets/images/dogu/doi-IMGP1094.jpg" alt="土井善男 白磁七寸皿 画像" /></a></h6>
</div><!-- ===== thumbnail ===== -->

以上です。この記事は下記のウェブを参考にさせていただきました。
Let's enjoy MODx･･････スニペット、モジュールの解説が大変充実しています。
ウェブ屋のCMS→modxヒキダス流（備忘録）／DittoのorderByパラメータによる、複数フィールドを使った並べ替え（ソート）･･････MODxを使っているウェブ制作会社のブログです。役に立つ記事が満載です。

投稿者 hyodo in コンピュータ | 記事本文 | コメント (0) | トラックバック (0)

January 5, 2010

【MODx】Dittoで子ドキュメントの概要を抽出する

ようやく Ditto も使えるようになってきました。以下ウェブサイト「くらしの道具」の「作家・工房紹介」での Ditto のスニペット・コールの備忘録です。

MODxのドキュメントツリー構成

くらしの道具 MODxドキュメントツリーキャプチャ

Ditto のスニペット・コール
次の記述で「作家・工房紹介」ドキュメントの子ドキュメントを抽出します。この1行のコードを「作家・工房紹介」ドキュメントに記述しておけば、子ドキュメント（各作家・工房の個別ドキュメント）のデータが増えても自動的に更新されます。

[!Ditto? &parents=`7` &randomize=`1` &tpl=`intro-box-1` &tplAlt=`intro-box-2`!]

パラメータの説明

parents=`7`　･･････抽出する子ドキュメントの親ドキュメントid
randomize=`1`　･･････抽出する順序をランダムにする（作家さんの表示順序をランダムにする）
tpl=`intro-box-1`　･･････テンプレートを指定（チャンク intro-box-1 に記述）
tplAlt=`intro-box-2`　･･････交互に適用するテンプレートを指定（チャンク intro-box-2 に記述）
このケースでは、リストを下図のように2カラムで表示したかったので、tplAltパラメータが非常に役に立ちました。

くらしの道具ブロック図

テンプレート・チャンク "intro-box-1"

<div class="entry">
<div class="intro-box"><!-- ===== 作家・工房紹介リストボックス ===== -->
    <div class="intro-img">
        <p><a href="[~[+id+]~]">[+thumbnail+]</a></p>
    </div>
    <div class="intro-tx">
        <h2><a href="[~[+id+]~]">[+pagetitle+]</a></h2>
        <p>[+introtext+]</p>
    </div>
</div><!-- ===== intro-box ===== -->

テンプレート・チャンク "intro-box-2"

<div class="intro-box"><!-- ===== 作家・工房紹介リストボックス ===== -->
    <div class="intro-img">
        <p><a href="[~[+id+]~]">[+thumbnail+]</a></p>
    </div>
    <div class="intro-tx">
        <h2><a href="[~[+id+]~]">[+pagetitle+]</a></h2>
        <p>[+introtext+]</p>
    </div>
</div><!-- ===== intro-box ===== -->
</div><!-- ===== entry ===== -->

プレイスホルダの説明

[~[+id+]~]　･･････Dittoで抽出したドキュメント（子ドキュメント）のURI
[+thumbnail+]　･･････Dittoで抽出したドキュメント（子ドキュメント）のサムネイル用カスタムテンプレート変数
[+pagetitle+]　･･････Dittoで抽出したドキュメント（子ドキュメント）のリソース名（タイトル）
[+introtext+]　･･････Dittoで抽出したドキュメント（子ドキュメント）の要約（序説）

出力されるhtmlコード

<div class="entry">
<div class="intro-box"><!-- ===== 作家・工房紹介リストボックス ===== -->
    <div class="intro-img">
        <p><a href="web/introduction/intro-shuji.html"><img src="assets/images/artists/shuji-IMGP0649.jpg" alt="山田脩二サムネイル" /></a></p>
    </div>
    <div class="intro-tx">
        <h2><a href="web/introduction/intro-shuji.html">山田脩二</a></h2>
        <p>カメラマンから瓦師（カワラマン）になった人です。達磨窯を地元に復活させ、土を焼く。瓦の原土で焼かれた皿は、いぶし銀でカッコイイ。</p>
    </div>
</div><!-- ===== intro-box ===== -->
<div class="intro-box"><!-- ===== 作家・工房紹介リストボックス ===== -->
    <div class="intro-img">
        <p><a href="web/introduction/intro-mayu.html"><img src="assets/images/artists/mayu-IMGP7624ic.jpg" alt="齋藤まゆサムネイル" /></a></p>
    </div>
    <div class="intro-tx">
        <h2><a href="web/introduction/intro-mayu.html">齋藤まゆ</a></h2>
        <p>やさしく、和やかな絵付け。様々な柄の組み合わせが彼女のスタイルをつくっています。食器や小物からインテリア、オブジェを制作しています。 </p>
    </div>
</div><!-- ===== intro-box ===== -->
</div><!-- ===== entry ===== -->

以上です。この記事は下記のウェブを参考にさせていただきました。
Let's enjoy MODx･･････スニペット、モジュールの解説が大変充実しています。
DAICHIFIVE「Dittoのプレースホルダ一覧」･･････MODxだけでなく、ウェブ全般のTipsが非常に役に立ちます。。

投稿者 hyodo in コンピュータ | 記事本文 | コメント (0) | トラックバック (0)

January 3, 2010

【MODx】Wayfinderでグローバル・ナビゲーションを表示する

昨秋、妻のショップのウェブ制作にMODxというCMSを導入しました。概念がわかりやすいので、HTMLとCSSが使える人ならば、チャンク（再利用する部分などをパーツ化したもの）やテンプレート変数（MTで言うところのカスタムフィールド）を使うだけでも効率よくウェブ制作できるのではないかと思います。

最近ようやくスニペットやプラグインを使えるようになってきました。この記事では、Wayfinder の使い方を備忘録としてまとめます。

実際の制作したウェブはこちら･･････くらしの道具

MODxのドキュメントツリー構成

くらしの道具 MODxドキュメントツリーキャプチャ

グローバル・ナビゲーション部分のチャンク・コード

<div id="global-navi"><!-- +++++ グローバル・ナビ +++++ -->    
[[Wayfinder?startId=`8` &level=`1` &excludeDocs=`236,254` &hereClass=`current`]]
</div><!-- +++++ global-navi +++++ -->

パラメータの説明：

startId=`8`　･･････リストアップする親ドキュメントのid
level=`1`　･･････リストアップする階層の深さ
hereClass=`current`　･･････カレントドキュメントに挿入するクラス。デフォルトでは"active"挿入されますが、僕の習慣で"current"と指定しています。
excludeDocs=`236,254`　･･････リストアップから除外するドキュメントのid（404ページと閉鎖中ページ）

出力されるhtmlコード

<div id="global-navi"><!-- +++++ グローバル・ナビ +++++ -->    
<ul><li class="current"><a href="http://www.hyodo-arch.com/dogu/" title="HOME" >HOME</a></li>
<li><a href="/dogu/web/kawaraban.html" title="かわら版" >かわら版</a></li>
<li><a href="/dogu/web/dogutachi.html" title="くらしの道具たち" >くらしの道具たち</a></li>
<li><a href="/dogu/web/introduction.html" title="作家・工房紹介" >作家・工房紹介</a></li>
<li class="last"><a href="/dogu/web/information.html" title="店舗案内" >店舗案内</a></li>
</ul>
</div><!-- +++++ global-navi +++++ -->

テンプレートにプレイスホルダを使ってチャンクを記述し、パラメータで指定すれば、様々な条件でリストアップすることができます。ここでは、デフォルトで十分でしたので、テンプレートは使用していません。

グローバル・ナビゲーション部分のCSS

/* +++++++++++++++ ヘッダー（グローバルナビ部分） +++++++++++++++ */
#global-navi	{clear: both;}
#global-navi ul {
	margin: 0px 0px 0px 5px;
	padding: 0;
	list-style-type: none;
	list-style-position: outside;
	}
#global-navi li {
	display: inline;
	padding: 0px 10px 0px 0px;
	font: bold 11pt Arial,sans-serif;
	}
#global-navi a	{
	color: #aaaaaa;
	text-decoration: none;
	}
#global-navi li.current>a {color: #555555;}
#global-navi a:hover	{color: #ff8c00;}

CSSのポイントは、li タグをインラインとし、a タグの色をカレントとカレント以外を分けて指定することだけです。背景などを使ってタブのイメージも入れていないので、ただ横方向にグローバル・ナビゲーションのテキストがリストアップされるだけのシンプルなものですが、カレントドキュメントを濃いグレーで、カレント以外を薄いグレーで表示させることが、このスニペット・コール1行で済ませられ、且つ複数のドキュメントで共用できるため、非常にメンテナンス性が良いです。ちなみにこのブログ「無聊写記」のグローバル・ナビゲーション（ブログ、フォト、ブックス、フリマ、プロフィール）は、各々のタブ（５種類）を作っているので、効率が悪いです(笑)

この記事は下記のウェブを参考にさせていただきました。
Let's enjoy MODx･･････スニペット、モジュールの解説が大変充実しています。

投稿者 hyodo in コンピュータ | 記事本文 | コメント (0) | トラックバック (0)

October 5, 2009

使用済トナーカートリッジを売ってみる

トナーカートリッジ回収

先日、レーザープリンタのトナーが切れてしまいました。
今回はトナーカートリッジの購入と使用済トナーカートリッジの買取についてレポートします。

僕が使用しているのは、CanonのLBP-1420という機種で、5年前に5万円くらいで購入したのですが、LBP-1420用の交換用純正品トナー(EP-65)はなんと定価42,000円もします。プリンタ本体を新しく買い替えられるほどの値段です。プリンタ本体とトナーカートリッジの価格比が非常にアンバランスなので、リサイクルトナーという市場が注目されてしまうようです。

リサイクルトナーカートリッジは純正トナーの1/3～1/6位の価格なので、大変魅力的なのですが、リサイクルされる前のトナーカートリッジの再利用回数や使用状況、更にリサイクル業者による品質のバラつきがありそうです。仕事柄、印刷の品質は非常に重要なので、純正かリサイクルか迷った末、純正品を購入することにしました。

純正品は日本向け製品と海外向け製品があります。日本向けは、実売3万円強、海外向けは、実売2万円強（先ほどカカクコムで調べたら2万円以下もあった）という具合にずいぶんと価格差があります。

結局、アスクルで海外向けの純正トナーを購入しました。トナーの入っている段ボール箱に貼ってある納品書の脇には、アスクルが使用済トナーカートリッジを無料回収する旨のFAX用紙が入っていました。

新しいトナーカートリッジに交換し、使用済カートリッジを段ボール箱に入れながら、このFAX用紙を眺めていると、下記のことがわかりました。

使用済トナーカートリッジは、リサイクル業者が欲しいと思っている。
無料回収するということは、その分の送料を負担しても儲かる。

ということは、買い取るという業者もいるのでは？と思い調べてみると、買取をする業者が結構あることに驚かされました。どの業者もEP-65の場合、買取価格が500円が上限で、切手や商品券での支払いが大半でした。ただ下記の点が心配でした。

僕が買い取ってもらう数量はひとつだけであること。
本当に切手や商品券を送ってくれるかどうか。

最初に連絡した業者は、買取申込書をFAXしても、着払い伝票をいつまでたっても送ってこない上、電話で連絡してもつながりませんでした。

そこで、次の業者を探し、(有)クレス　トナーステーション事業部に買取申込書をウェブ上のフォームから送信しました。しばらくして、運送会社が使用済トナーカートリッジを回収していきました。その後3週間程しても連絡が無いので、電話で問合せたところ、500円で買取るとの査定のメールがあり、しばらくして、1000円（なぜか倍の金額！）の商品券が郵送で届きました。ちょっと嬉しかったです。わずかな金額かもしれませんが、試してみて損は無いですよ。

上の写真は左から、

Canonのトナーカートリッジ回収の案内と地球の環境保全がウンタラカンタラ書いてある書類。解釈によってはCanonがリサイクルトナー業者を後押ししているようにも読み取れる？
アスクルのトナーカートリッジ無料回収のFAX申込書
僕が最初に買取申込をした連絡がつかなかった業者のFAX買取申込書

投稿者 hyodo in コンピュータ | 記事本文 | コメント (0) | トラックバック (0)

September 28, 2009

トップページ画像をランダムに表示する

ここひと月ほど時間のあるときに、嫁のショップのウェブサイトを制作していたのですが、その時にフッと表題のことは簡単にできそうだな、と思い調べてみました。多くの選択肢があるのでどれにしようか迷ってしまうのですが、その中でも特に簡単で良さそうな下記の方法にしました。

それは、A LIST apart に掲載されている Random Image Rotation です。

良い点は、とにかく簡単すぎることです。以下に列記します。

PHPスクリプトなので、ブラウザのJavaScriptの On/Off 設定に影響されません。と言っても、アクセス解析を見る限りOff 設定にしているケースはほとんど検索ロボットのみですが・・・。
設定のカスタマイズは、ランダム表示させる画像を入れるフォルダの作成しその中に画像を好きなだけ入れ、フォルダまでのパスをPHPスクリプトに指定するだけ。
更に、スクリプトをブラウザから直接実行すると、ランダムに表示される画像のファビコンまで自動生成して表示してくれます。

悪い点は、A LIST apart は英語のサイトなので、英語のドキュメントを読まなければならないことです。

その他の仕様ですが、デフォルトでは jpeg, gif, png ファイルのランダム表示のみ可能なのですが、カスタマイズによって、htmlの表示、テキストファイルのソース、tiff, pdf など他のフォーマットもランダムに表示させることができます。

以下設定メモです。

Random Image Rotation のページの下の方のリンク "PHP source right here" で表示されるPHPソースをテキストエディタにコピーして"rotate.php" というファイル名で保存する。
ランダムに表示させたい画像とrotate.php を任意のフォルダにアップロードする。その際、rotate.php の107行目のフォルダパスを指定しておくこと。たとえばサーバがxreaの場合は、

$folder = '/virtual/username/public_html/url/image/randomizer/';
というような感じ。フォルダのパーミッションは'755'。
表示方法は、直接urlを打込みアクセスする。htmlで表示させる場合は、たとえば下記のようにする。
```
<p>
<img src="http://url/image/randomizer/rotate.php" alt="random images"/>
</p>
```

で、嫁のウェブサイトのトップページ画像のランダム表示はこんな感じになりました。
＞くらしの道具
よろしければご覧ください。

投稿者 hyodo in コンピュータ | 記事本文 | コメント (4) | トラックバック (0)

« 前へ | 1 | 2 | 3 | 4 | 5 | 6 | 次へ »

January 7, 2010

【MODx】Dittoでカレントドキュメントと同じフォルダ内のドキュメントを抽出する

January 5, 2010

【MODx】Dittoで子ドキュメントの概要を抽出する

January 3, 2010

【MODx】Wayfinderでグローバル・ナビゲーションを表示する

October 5, 2009

使用済トナーカートリッジを売ってみる

September 28, 2009

トップページ画像をランダムに表示する

サイト内検索

カテゴリー

コンピュータの記事

タグクラウド

月別アーカイブ

無聊仲間

管理者のサイト

RSSフィード