ウェブデザイン Archive

寒河江市商工会ホームページがリニューアル
寒河江市商工会よりホームページリニューアルの依頼を受けて制作作業を行っておりましたが、先月に完成し正式に公開いたしました。

寒河江市商工会ホームページ

今回のホームページでは、主ぬホームページの更新管理を職員で行いたいとの要望を受け、CMSにて構築しました。また、100万会員ネットワークの導入に伴い、寒河江市商工会ホームページのトップページへ、SHIFTのデータ読込欄を設けております。

完成後、操作説明会を開催いたしましたが、わかりやすく利用しやすいとのお話をいただけてホッとしています。

ホームページの更新はそれなりにHTMLの知識などが必要なわけですが、まったくHTMLの知識が無いお客様からの要望で簡単に更新できないか良く相談を受けることがあります。更新と言っても、その内容は様々な訳ですが、今回は、簡単にHTML内に表組みを挿入できる、更新の方法を紹介しましょう。

外部CSVをHTML内でテーブル表示させる方法
簡単な流れは、Excelなどで作った表を元に、CSV形式のファイルを作成し、Jquery+プラグインを使用して実現します。

1. 必要なファイルの入手
まず最初に、以下の2つのファイルを入手します。（※以下のリンク先よりダウンロードできます。）

1. jquery.js
2. jquery.csv2table.js

2. 表の作成
Excelを使用して、出力したい表を作成します。最初の行には、見出しになる項目を設定してください。2行目以降はそれぞれのデータを入れます。

3.CSV形式で保存
Excelで作成した表をCSV形式で保存します。まず最初に、表を表示させるHTMLファイルと同じ階層に「data」という名前で新しいフォルダを作成します。次に、CSVで保存します。「ファイル＞名前を付けて保存」を選択し、「ファイルの種類（T)」の箇所で「CSV（カンマ区切り）（*.csv）」を選択します。

4. 既存のHTMLファイルの設定
HTMLのヘッダー内に、手順1でダウンロードしたJSファイル（jquery.jsとjquery.csv2table.js）を読み込むための記述をします。

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.csv2table.js”></script>

5. 表出力のための設定
HTML内の作成した表を表示したい箇所に、作成したCSVファイルの読み込みのための設定をします。HTMLの表を表示させたい箇所に以下のように記述をします。

<div id=”view1″></div>
<script>
$(function(){
$(’#view1′).csv2table(’./data/whatsnew.csv’);
});
</script>

以上で設定完了です。

補足事項

1. HTMLの文字コードにUTF-8を使用している場合は、手順3でCSVに書き出したファイルでは2バイト文字（日本語）は文字化けしてしまします。これを改善するには、一度書き出したCSVファイルをメモ帳で開き、内容はそのままで「名前を付けて保存」を選択、文字コードの欄の「ANSI」となっている箇所を、「UTF-8」に変更して保存します。
2. 表のデザインをカスタマイズするには、「jquery.csv2table.js」をメモ帳などで開き、任意の箇所を書き換えることで変更できます。ただし、HTMLとCSSの知識が必要です。

デザインのネタ探し
毎日デザインの仕事をしていると、どうしてもデザインのネタに困ることがありますね。そんな時、みなさんはどうしていますか？私の場合は、とりあえずは一旦仕事を中断して頭をリセット。その後、あちこちのサイトを回ってみたり、素材を配布しているいわゆる素材集サイトなんかを覗きにいきます。重要なことは、一旦頭をリセットすること。これで先入観なしで、他人のデザインを見ることができ、自分なりの新しい案が出てきます。一度試してみてくださいね。

デザイナーお助けサイト
でも、自分で一からデザインするのは結構な手間が掛かりますよね。そこで今日は、デザイナーには、とっても便利なお助けサイトを紹介しましょう。

Free Vector Graphics

このサイトは、いわゆる素材集サイトのようなものなんですが、単なる素材配布サイトではありません。ここでは、編集加工ができる、ベクター形式の画像を配布してくれている超役立つサイト！デザイナーの多くが使っているIllustratorやPhotoshopなどでそのまま使える点が便利。拡張子は「ai」「eps」「jpeg」などの形式で配布されていますので、ダウンロード後、そのまま使える優れもの。

ただし、「ai」などはIllustratorのバージョンによっては開けないこともあります。その場合は、epsかjpegなどで対応することもできる。私もいくつかダウンロードしてたまに使わせてもらってます。

デザイン作成の時間短縮にもなるし、中にはかなりクォリティの高いベクター画像もあるので、是非使ってみよう！以下はダウンロードできる画像のサンプルです。

★使えるオススメ素材集

スムーズスクロールは格好いいけど・・・
ホームページの1ページが縦長になってしまう場合、ページ内リンクを設置して、より情報を探しやすくする手法はよく用いられますね。単なるページ内リンクをするだけなら誰でも簡単に導入できるわけですが、ちょっとでも格好良く見せたいところです。そこで、良く使われるのがJqueryと「smooth.pack.js」を使ったスムーズスクロールの方法があるわけです。

スムーズスクロール「smooth.pack.js」の問題点
スムーズスクロールを実現するのに、あちこちのサイトでよく使われているのが「smooth.pack.js」というものだと思いますが、実はこの方法にはちょっと問題があります。このスクリプトでは、nameタグを使用してページ内の任意の位置にスクロールさせるわけですが、この方法では、現在のホームページ作成に求められる「ウェブ標準」の仕様に反する手法になっています。ウェブ標準ではXHTMLでコーディングするんですが、XHTMLではname属性だけのアンカーは使えないんですね（厳密には推奨されていないというべきか・・・）。

そこで取られてきた方法として、アンカーに以下のように記述する方法があります。

<a name=”top” id=”top”></a>

しかし、どうもスマートじゃないですね～。実際には推奨されていないname属性も使われているわけだし・・・。

ウェブ標準に準拠したXHTML対応版スムーズスクロール
そこで、あちこちググって探し回ってみたところ、「smooth.pack.js」の変わりになるものを見つけました。
http://coliss.comに「Page Scroller ver.3」なるものがあり、このスクリプトではid属性を使用してスムーズスクロールを実現できます。これにより、XHTMLにも準拠した正規の記述方法でページ内リンクをスムーズスクロールさせることが可能になります。

設置方法は簡単で、ヘッダー内に「Jquery」と「page-scroller.js」を読み込むためのタグを挿入するだけです。みなさんも是非使ってみてください。

★Jquery関連オススメBook

WordPress用ショッピングカートプラグインの検証
今、私が構築しているサイトはWordPressを使ってCMSを構築しているんだけど、今回のサイトでは、ショッピングカートも導入する予定です。で、できれば、WordPressの中で手軽に動かせるようなショッピングカートのプラグインなんかを使いたいところだけど、テスト用サイトでいろいろ試した結果、現在のプラグインではちょっと使えないな・・・という私的な率直な感想。

ということで、今回検証したのは以下の3つのショッピングカート用のプラグイン。

• WP e-Commerce
• YAK for WordPress
• PrestoGifto

まだ日本語環境で安心して使えるカートプラグインは無い
この3つのプラグイン、すべて外国で作られたプラグインで、日本語の環境で使うことを前提に作られていないというのが難点ですね。2番目の「YAK for WordPress」では、一応、日本語化されたファイルも公開されているということで、試しに使ってみましたが、安心して実用できるかと言われると、ちょっと疑問＆不安が残ります。

早々に日本語完全対応のWordPressショッピングカートプラグインの開発を望む
ということで、私的に、今現在は日本の環境でそのまま使えるような、WordPress用のショッピングカートプラグインは存在しないという結論です。これだけWordPressでのCMS運用も広がってきていて、ショッピングカートのニーズもかなりあると思うんですが、未だに対応したプラグインがないというのは、ちょっと残念ですね。かといって、自分で作れる程のプログラミングの知識も持ち合わせていませんので、大きな事は言えませんが。。。（-_-；

どなたか、早々に日本語に対応したWordPress用のショッピングカートプラグインを開発してくださぁ～い！

★WordPress関連オススメ書籍