Modx Dittoのfilterで50音別にリスト分け【表示スニペット】

Modx　Dittoのfilterで50音別にリスト分け

店舗名称や商品名称など、意外と50音順に並べ替えてみたい事が、時々あります。

今回は、Dittoのfilter機能を使って、50音順にリスト化するスニペットを作ります。

基本スニペット

[!Ditto? &parents=`指定id` &tpl=`指定テンプレート` &showInMenuOnly=`1`  &filter=`ふりがな,あ,6|ふりがな,か,5` &orderBy=`ふりがな ASC`!]

解説
parents
親ドキュメントの指定

tpl
表示テンプレートの指定

showInMenuOnly
メニュー表示がされているモノのみ選択。

filter
テンプレート変数：ふりがなの、【あ】という言葉以上を選び、or　ふりがなの【か】までを取得しなさい。※

orderBy
取得たデータのテンプレート変数：ふりがなを、【あ】から順番に表示しなさい。

filterパラメーターの書き方の詳細は、下記参照でお願いします。
http://www.modx.liolion.net/resource/ditto2.html

説明
指定した親ID以下のリソースページの【ふりがな】というテンプレート変数に入力された、テキストを抜き出し、そのテキストを、あ～おの順番に並べ変えて、表示しなさい。
と言った内容です。

このスニペットのキモは、やはりfilterパラメーターの扱いです。

今回の設定で言えば、【あ】よりも大きい。つまり50音で言う【あ】以降の文字全てを選びなさい。という条件付けがされています。しかし、このままでは50音全ての文字が取得されてしまうので、どこかで取得を止めなければなりません。そこでもう一つのパラメーターを設定します。

filterパラメーターは、複数条件の指定が出来ます。各条件の関連はORです。
通常で考えれば「AまたはB」という考え方になりますが、入力設定のmodeで抽出条件の設定を変えることで、取得を止めます。

今回は、【あ行】の取得が目的ですので、【お】までの文字列を取得できれば良いですから、下記のようなパラメーターを設定します。

【ふりがな,か,5】

これは、【ふりがな】から【か】以下※の文字を取得しなさい。となります。

つまり、「あ～お」までの値を抜き出した事になります。

これで、あ行の取得設定が出来たことになります。
同様のやり方で、か行以降のスニペットを作れば、50音全ての取得設定が可能です。

さて、カンの良い人はお気づきかと思いますが、この条件だと50音にしか対応していません。つまりアルファベットや数字には対応していない状態です。

アルファベットや数字の場合も同様のスニペット設定で取得が可能ですので、アルファベット用や数字用といったスニペットを用意すれば、それぞれのリスト制作が可能です。

今回あらためて、Dittoの強力なデータ抽出を実感しましたが、奥が深いというよりも、色々と実験してみて、初めて判ることがまだまだあるなぁと感心しました。と同時に、MODxは本当に「決まった型のない、カスタマイズ思考の強いCMS」だとあらためて思いました。

---

※本来はあ行であれば、あ～おなので、取得終了は【お】で良いのでは？と思われがちですが、
【お】で終了設定をすると、【お】が含まれない状態になるので、一つ先の【か】までを取得条件としています。

PCを快適に使うために 今さら……第40回

今さら聞けないネットのあれこれ。
今回は
「デスク　クリーンアップ」
についてお話します。


重要度：★★★★★
難易度：★

パソコンを快適に使うために、定期的なメンテナンスは必要不可欠ですが、意外と面倒だったり時間がかかったりして、おろそかにしていませんか？特にハードディスク容量の逼迫は、マシントラブルの元です、空き容量が少ないとOSが不安定になりやすくなります。いったん不安定になったOSを修復するのは、結構大変です。

パソコンは機械ですから、調子が悪くなっても自己修復はしてくれません。多少面倒でもある程度定期的にメンテナンスをする事が、トラブル防止の上で必要です。そこで比較的簡単に行える、メンテンスをご紹介します。

1.メールの削除
パソコンを使っていて、メールを使用しない人は多分いませんよね？
メールは日々蓄積されるデータです。
毎日メールの整理が出来れば理想ですが、そうもいきません。
そこで最低月1回、メールソフト内のメールを整理しましょう。

このメールの整理で、それなりにハードディスクの容量に空きが出ます。
1通のメールそのものは済少ない容量でも、蓄積されればそれなりの容量になりますから、不要なメールは削除しましょう。

一番いいのは、その場で不要なメールは削除する習慣を付けることです。
特にスパムメールはその場で削除する事で、ウィルス等への感染も防げます。



2.ディスク　クリーンアップ
これは、使用していない古いファイルを圧縮して、ハードデスクの空き容量を確保します。

パソコンには様々な形でデータが存在します。特に不可視ファイルと呼ばれる類のファイルは多数存在していて、我々の見えないところでデータとして存在します。
そう言ったファイルは、通常の削除作業が出来ません。

例えば、ごみ箱から削除したファイルを復活させるソフトがあります。そのソフトは、どうやってファイルを復活させるのでしょうか？削除されたはずのファイルが復活する？
そのからくりは完全に削除されていないからです。

つまり、見た目上は削除されましたが、別の形でまだ残っているのです。
復活ソフトの多くは、その残っているデータを元に戻すだけです。

その他にも、パソコンを快適に使うために多数の不可視ファイルを使用します。そう言ったファイルで、使用していないモノをを選び出し、削除する事が、ディスク　クリーンアップになります。

作業は簡単です。

Windows XP
[スタート] をクリックし、[すべてのプログラム]、[アクセサリ]、[システム ツール] の順にポイントします。次に、[ディスク クリーンアップ]を選択します。


Windows Vista　Windows7
アクセサリのシステムツールにあるディスク クリーンアップをクリックすると、PC上の不要なファイルを削除するツールが起動します。


ディスク　クリーンアップを定期的に行う事で、常に空き容量が確保されます。また定期的に行うメリットとして、ディスク　クリーンアップの時間短縮と言う恩恵があります。
これは定期的に行う事で、圧縮するファイルの数を少なくする事が出来るからです。不具合が出始めてからのディスク　クリーンアップは非常に時間がかかりますから、できるだけこまめにディスク　クリーンアップをするようにしましょう。

また、ディスク　クリーンアップをすることで、パソコンを立ち上げた時に、高速起動が可能になります。これは起動時に読み込む不要ファイルが減る事で高速の起動が出来るようになるものです。

いずれにしても、最低でも3カ月に1回ぐらいは、パソコンのメンテナンスをする習慣をつけましょう。

ブラウザーの検索方法 今さら……第39回

今さら聞けないネットのあれこれ。
今回は
「ブラウザーの検索テクニック」
についてお話します。


重要度：★★★★★
難易度：★



仕事柄、サーチエンジンでの検索は頻繁に行いますが、一般の方は検索テクニックを意外とご存じないようなので、検索テクニックについてのお話です。

通常、検索を行う際に複数の検索キーワードを入れて、検索する、いわゆるand検索とor検索と言うモノはご存知の方もいるかと思いますが、その他にもちょっと使える検索テクニックをご紹介します。


and検索
入力方法：●●　××
●●と××の間にスペース（全角でも半角でも可）を入れることで、複数のキーワードが入ったサイトページを検索します。このキーワードを増やすこと（3つから4つのキーワード）で、より探している目的に近いサイトページが見つかりやすくなります。

or検索
入力方法：●●　or　××
●●もしくは××のキーワードが入ったサイトページを検索します。
入力時に必ずorの前後にスペースを入れてください。スペースを入れないと「●●or××」という一つのキーワードでの検索になってしまうので、注意してください。

not検索
入力方法：●●　-××
ベースになるキーワードから、否定するキーワード文を指定することで、検索結果を具体的に絞り込むことが出来ます。
否定（除外）するキーワードの前に-（マイナス）を入れます。-は半角です。
例えば、プロ野球の情報で、巨人以外の情報が欲しい場合、「プロ野球　-巨人」とすれば、プロ野球という検索結果の中から、巨人と言うキーワードが入ったページを除外した検索結果が表示されます。

そのほか単語だけではなく、単語+接続詞や、より具体的な文章などを入力すると、検索結果の精度が上がります。

また、少し特殊ですが下記のような検索もできます。

「intitle:○○」：ページタイトルに○○が含まれる
「inurl:○○」：urlに○○が含まれる

などの検索方法もあります。

サーチエンジンによっては、特殊な検索方法もあるので、検索のスピードUPを考えているのであれば、どのような検索方法があるのか探してみることも、面白いと思います。

---

※GoogleおよびYahooにて、上記の検索方法は可能ですが、他のサーチエンジンで上記の検索方法が行えるかについては、検証していませんので、ご了承ください。

基本構造は理解していますか？

初心者WEBデザイン？
【基本構造の理解】について


WEBサイト制作を勉強しようとした時に、まず思いつく事が、HTMLを勉強しよう。　と、誰しもが思うはずですが……　　ちょっと待ってください。

初心者がいきなりHTMLを勉強しても、おそらく上手くは行きません。
もちろん、HTMLを勉強する事は間違っていませんが、その前にブラウザーで表示されているHTMLや画像の構成や理屈は理解していますか？

最近は、HTMLやCSSをよくご存じのクライアントさんも大勢いるのですが、大元の基本構造を理解していない、あるいは間違って覚えてしまっている為に、ミスを犯すシーンを良く見かけます。

例えば、サイト上で使用する画像とHTMLとの関係は？
よく見るHowTo本では、「画像はimgフォルダーに入れて使用しましょう」と書かれています。もちろんこれは間違いではありませんが、少々言葉が足りません。（詳しく書くとややこしくなるので書きませんが）

また、外部からのプログラムをサイト内で利用する場合や、リンクと言う考えかたなど。

HTML以外にまず「HTMLを表示させる為の基本的な構造」を理解していないと、制作途中で躓いた時に、その原因究明に時間が掛かっていまいます。

例えばよく見かける、画像が表示されない状態になった時に、画像が表示される構造と条件を理解していれば、原因を突き止める事は容易ですが、その基本的な事を理解していないと「どうしてそうなっているのか」という簡単な事も解りません。原因が付きとめられなければ、修正も出来ません。

昨今は、情報が氾濫していて、HTML関係の記述テクニックや解説サイトが多数ありますが、WEBページの基本的な構造を解説したページは意外と少ないです。しかし、さほど難しい事でもないし、（だから見落とされがちなんですが）HTML関連の書籍の最初の方に必ず、その手の内容が記載されているので、読み飛ばさずに、最初からきちんと読んで理解することをお勧めします。

この部分の理解力いかんでは、その後の勉強の速度に違いが出る事があるので、じっくり勉強しましょう。

ターゲットブラウザー について

初心者WEBデザイン？
【ターゲットブラウザー】について

これは、殆どプロの領域なのですが、特定のブラウザーを決めて、そのブラウザーに対して正確に表示される為のサイト制作を行う。つまり、制作の基準となるブラウザーを決める作業の事です。

アマチュアであれば、今使っているブラウザーでの表示が出来れば、とりあえずOK？なのでしょうが、現在のインターネット環境には、複数のブラウザーが存在しており、必ずしも自分（制作者）と同じブラウザーでサイトを閲覧してもらえる訳ではありません。

そこで、閲覧するブラウザーを幾つか決める、つまり「ターゲットとするブラウザーを決定する事」を「ターゲットブラウザー」と言います。

本来は、閲覧される可能性のあるブラウザー全てをターゲットブラウザーとしたいところですが、何しろ、ブラウザーは各ヴァージョンによって、その仕様が変わるので、同じブラウザーでも、ヴァージョン違いで表示が全く変わる事は珍しくはありません。

つまり、全てのブラウザーを網羅する為には、各ブラウザーの全てのヴァージョンを揃えないといけません。
また当然ですが、元になるPCのOSによっても、違いが発生しますので、例えばWinとMacでは同じブラウザーの同じヴァージョンを使っていてもそれは「違うブラウザー」となります。

そう考えると、全てのブラウザーをターゲットとする事は現実的ではない。と言う事が解るかと思います。

では、どうしたら良いのか？
そこで登場するのが【ターゲットブラウザー】という考え方です。つまり特定の方法や、基準を用いて、ブラウザーを選定します。

選定方法で最も多い方法は、ブラウザーシェアによる選定方法です。
これは、インターネットで使われている、各ブラウザーのシェアの多いモノから順に選ぶと言うやり方です。

下の画像は、アクセス解析サービス「StatCounter」（アイルランド）が提供する「StatCounter Global Stats」より日本のブラウザシェアの統計グラフを掲載しています。

http://gs.statcounter.com/#browser-JP-monthly-201106-201206

これを見て頂ければ、IE（Microsoft Internet Explorer）が最も多いブラウザーである事が解ります。
次点としてFF（Mozilla Firefox）。僅差でCr（Google Chrome）が続きます。

この状況を見る限り、ターゲットブラウザーは、IE・FF・Crなどを選定しておけば、大多数のユーザーがカバー出来るようになります。

この統計は、ブラウザーのヴァージョンは明記していないので、あくまでブラウザーの種類別という大雑把な括りですが、ターゲットブラウザーを選定する目安としては、とりあえず十分だと思います。

別の選定方法もありますが、これは初心者向きでは無いので、またの機会に。

また、先日のモニターサイズと同じで、こちらもブラウザーのトレンド？があるので、1年に一回ぐらいは、ブラウザーシェアの動向は確認しておいた方が良いですね。

いずれにしても、WEBサイトを制作するのであれば、複数のブラウザーで、そのサイトがどのように見えるのかと言う事ぐらいは確認する必要がある。　というお話です。

サイト幅につてい

初心者WEBデザイン？
【サイト幅】につてい

たとえプロでもアマでも、WEBサイトを作る上で、一番最初に決めなければならない事があります。
それは、サイトの画面幅です。

サイト制作以前にデザインを起こすにしても、まずサイトの幅を決めない事には、デザインも作れません。

では、一般的にサイトの横幅は決まっているのか？
これが、具体的な数字は決まっていないと言うのが現状です。
（大まかな横幅はある程度決まっていますが。）

で、基本的にサイトをデザインする上での方法として、2種類の方法があります。

固定レイアウトとリキッドレイアウト

固定レイアウトとは、サイトの横幅を固定して、画面の大小にかかわらず、常に同じ大きさで表示をするレイアウトで大多数のサイトで導入されています。

リキッドレイアウトとは、サイトの横幅を画面（モニター）に合わせて伸縮するデザインで、主に情報系のサイトに多いレイアウトです。代表的なサイトはアマゾンやウィキペディアなどがあります。
これは、固定レイアウトとは違い、幅の指定を画面全体に対する％比率で設定しています。
つまり、モニターの表示解像度に対して自動的に変化する方法です。

どちらもの場合も、元になる最小限の横幅があります。リキッドレイアウトでも横幅に対して常に一定の比率で変化したのでは、画面を小さくした時に、レイアウトがおかしくなるので、変化の最小値を設定してあります。

最近ではサイトの横幅は900～980pxが大体の標準幅ですね。おそらくリキッドレイアウトでも、最小値は900pxあたりの数値を入れているはずです。この横幅であれば、17インチのモニターから、24インチのワイドモニターまで問題なく表示できます。ただし15インチモニターを考慮に入れると、800px程度までサイズダウンが必要になります。

ここ数年のモニタートレンドとして、縦横比が16：9の横長画面（ワイド画面）の液晶モニターが一般化しています。
この横長のモニターだと、今までの固定レイアウトでは、左右に大きな余白が生まれてしまい、どうもデザイン的に見栄えが悪い場合があるので、リキッドレイアウトが少しずつ増えている様です。ただ、リキッドレイアウトは横に伸びる性格上、画像の配置やテキストの長さなどに神経を配らないと、見た目が悪くなりリキッドレイアウトの良さが失われてしまうので、注意が必要です。

まぁ、これはあくまで2012年現在の話なので、5年後には21インチモニタが普及サイズになっていて、画面サイズも1200～1300pxになっているかもしれません。これは時代の流れなので、仕方がありません。
そう言った情報を集めて、日々何がベターなのかと言う事を自分の中に基準として作っておく事が、デザインをする上で必要になってきます。

初心者WEBデザイン

それ行け初心者　WEBデザイン

ブログの連載ネタの一つとして、WEBデザイン？の初心者向け講座的な内容をやっています。

テクニック的な部分は少なめにして、むしろ概論や構造などが主体になるかな。
例えばHTMLにしても、CSSにしても調べる気があれば、今のネット社会で、調べられないことは殆ど無いので、明確な答えが解る場合はネットで探して頂いて、どちらかと言うと、答えが曖昧な事についてお話して行こうかと思っています。

さて、と言うことでWEBサイト制作に必要な知識と言うのはどのくらい必要なのか？下記のリストをご覧ください。

このリストはWEBサイト制作に必要な知識です。もちろん専門知識もあるので、全てを覚える必要はありませんが、最低限でも必須項目ぐらいは、理解しておかないと、トラブル対応が出来ないので、最低限の概念として覚えておけばいいかと思います。


WEBサイト制作に必要な知識。

※は必須
▲概念として必要

言語
HTML※
JavaScript▲
CSS※
cgi▲
php▲
Mysqlに代表されるデータベース

ソフト
画像加工ソフト※
オーサリングソフト※
FTPソフト※

ハード
WEBサーバーに関して※
ドメインに関して※
WEBメールに関して
インターネットに関して
データベースに関して


ざっと見て、これだけの事を理解していないと、WEBサイトの制作は難しいです。
もちろん全てを覚える必要はありません。あくまで概念として、「これはどういったことなのか？」という事を覚えておく程度で問題ありません。

正直なお話、これだけ覚えるにはそれなりに時間とお金が掛かるので……
とわ言え、あくまで初心者向け？の内容なので、出来るだけ簡単に説明したいと思っています。

WEBで使用する画像の種類 今さら……第38回

今さら聞けないネットのあれこれ。
今回は
「サイトで使用する画像の種類」
についてお話します。


重要度：★★★★
難易度：★★★



サイト制作で使用する画像は大きく別けて、GIF・JPG・PNGの3種類があります。

当然3種類とも特徴があり、それぞれに適した使用目的があります。

詳しく話せば、小一時間は話が出来るほど、実は奥が深い話ですが面倒なので、ざっくり判りやすくお話します。

後ほどサンプル画像をよく見ていただければ、判ると思いますので、簡単に説明します。

GIF画像
主に画像変化の少ないイラストなどに用いる。(グラデーションが多用されていると、問題あり）

短所
表示色数が最高で256色しかないために、写真などの保存にはあまり向かない。
またデータ保存の方法により、グラデーションの表現が弱く、綺麗に表示できない。


JPG画像
主に写真などの色数の多いものや、グラデーションが多用された画像に用いる。

短所
JPGは保存を繰り返すと、データの劣化が進み画像が荒れる特性を持つので、可能な限り保存を繰り返さないようにする。また、広い面に単一色（バックグラウンド等）が適用された画像などでは、極所的に画像の荒れが起きてしまうので、注意が必要。


PNG画像
イラスト・写真など特にデザインを選ばない。また画像の透過※1も出来るので、WEBには非常に向いている形式。

短所
JPG のように画像劣化が起きない分、綺麗な画像を制作できるが、その反面ファイルサイズが肥大化してしまうので、使用する場合は注意が必要。


ざっくり説明すると以上のようになります。

実際、私の場合は複数の保存データを作って、どれが最適か？という作業をします。
まずは、画像の劣化を確認して、その上でファイル容量の軽い（少ない）画像を選びます。

1.複数のフォーマットを見比べて、劣化の少ない画像を選ぶ。
2.選んだ画像のファイル容量の少ない画像を選ぶ。

特殊な使用目的、またはどうしてもその画像フォーマットでなければならない場合以外は、上記の方法で、画像を選定しています。

まぁ、基本的に綺麗であれば、良いとは思いますが、あまり画像容量の多き画像は、表示に時間がかかったりするので、気を付けてください。


サンプル画像　どの画像も　画像サイズ　横400　縦300px　で制作してあります。

写真をベースとした各種フォーマット画像

GIF　128色
容量：38.2 KB

解りにくいかもしれませんが、おでこ付近の色がグラデーションでは無く、段階的にトーンを配置している様になっています。

 JPG 60%圧縮
容量：9.15 KB

WEBで使用する一般的な圧縮率60％の画像。
全体的にシャープ感に欠けるぼやけた感じ。
しかし、画像容量としては非常に軽くなっている。

PNG-24

容量：163 KB

JPGに比べて約16倍という非常に容量のあるデータ。
しかし、画像の劣化は少なく非常に綺麗な仕上がり。















イラストをベースとした、各種フォーマット画像

GIF　128色
容量：45.6 KB

赤のグラデーション部分が段階的なトーンに変更されている。
また画像容量も、肥大化している。

JPG 60%圧縮
容量：28.1 KB

写真同様、全体にぼやけた感じでの仕上がり、また【JPG】と書かれた文字の脇付近で画像の劣化によるバターンが確認できる。

PNG-24
容量：163 KB

写真の時と同様、綺麗な画像だがやはり容量はかなり大きい。














それぞれの、画像の中から、使用する画像を選ぶとすれば、ここはやはりJPGの圧縮率を上げた画像（80％圧縮）程度を使用する事がベターだと思う。

もちろん、画像の綺麗さを強調する必要なサイトであれば、やはりPNGを選択するだろう。
また、今回のサンプルはグラデーションのキツイモノを選んだので、GIFの出番はありませんでしたが、シンプルなイラストの場合は、やはりGIFが一番良いです。

このように、使用する画像の構成によって、フォーマットを変える事で、より快適で綺麗なサイト制作が出来ます。


透過※1
PNGは、画像そのものを透過させる事が可能な形式で、特殊な効果を使いたい時に、重宝する形式です。ただし。透過PNGはファイル容量も大きくなるので、扱いは十分に検討してかが良いでしょう。

無料の画像加工ソフト 今さら……第37回

無料の画像加工ソフト　今さら……第37回

今さら聞けないネットのあれこれ。
今回は
「無料の画像加工ソフト」
についてお話します。

重要度：★★★
難易度：★★★

最近はサイト管理もCMSなどを使って、ユーザーが変更・更新を行えるシステムが増えています。また、ユーザーの中には、HTMLやCSSを理解している方も数多くおられます。しかし……　サイト内で使われている画像を加工しようと思った時に、画像加工ソフトが無い為に、困った。というお話を伺います。

そこで調べたのですが、今はフリーソフトで高機能な物も数多く出ているので、それらを試すのもよいでしょう。

http://freesoft-100.com/pasokon/viewer.html

http://www.solapane.info/

上記の2サイトからそれぞれの加工に特化したソフトを3～4本選べば、おそらくフォトショップと遜色のない加工が可能になるはずです。

また、最近はオンラインでの画像加工サービスも出てきているので、ソフトをインストールする必要が無いものもあります。

そう言った、サービスを利用する事で、高価なソフトを購入しなくとも、綺麗な仕上がりの画像が加工できるようになります。

Facebookアプリページのスクロールバー

フェイスブックはすぐに仕様を変更するから……

先日、アプリページのスクロールバーを消せない……
と記事を書きましたが、どうやら消す事が出来ました。






下記のコードを</body>の直前に書きます。


<div id="fb-root"></div>
<script>
(function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
    document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
    FB.init({
        appId: 'アプリID',
        status: true,
        cookie: true
    });
    FB.Canvas.setAutoGrow();
};
</script>



これで、先日まで苦労？していたスクロールバーともオサラバ出来ました。

普通に制作すれば……

実は、アプリページ内にシェアボタンを設置すると、スクロールバーが表示されます。
どうも、シェアボタンで使用している、FB.Shareのjavascriptが絡んでいるようで、今回もお手上げ……

しかし「いいねボタン」であれば、スクロールバーは表示されないので、いいねボタンを使えば、問題ありません。

現在フェイスブックとしては、シェアボタンは正式に対応していないボタンなので、いいねボタンに対応させる為の嫌がらせ？のように見えてしまうのは、私だけ？

まぁ、そんな事を言っても、この方法もいつ使えなくなるかわからない。
そう、facebookは簡単に仕様変更を行って、「変えたから、宜しくね！」と言って終わらせるからなぁ。

しかも技術関連のレポートは翻訳しないし……
仕様の変更はかまわないけど、もう少し情報をわかりやすくアナウンスしてほしいもんです。