通潤酒造株式会社様のウェブサイトをリニューアルしました。これでやっと長年の念願が叶い、システムを一新する事ができました。

今まではウェブサイトの一部のディレクトリのみにWordPressをインストールしていましたが、今回のリニューアルでウェブサイト全体をWordPressに移行しました。ショッピングカートのシステムもWordPressのプラグインとして開発しました。

オンラインストアでの買物にアカウント作成を必要とするのですが、その時にメールアドレスの確認ができますので、買物時にうっかりメールアドレスの入力を間違えるという事を防ぐ事ができます。住所なども、お買物の度に入力する事なく、ご注文できますので、煩わしさが軽減できると思います。

いくつかのページは少々かっこ悪かったりしますが、追々修正していきます。システム的にもいくつか改良案が頭の中にありますので、もっと進化していく事になると思います。

これからも山都町の地酒、通潤をよろしくお願いします。

という感じで開発途中のプロジェクトが三つも同時進行中です。

ひとつ目のはiWallMapと似ている部分がたくさんあります。サーバサイドはCakePHPというオープンソースのPHPのフレームワークを使用しています。これまでは自作のフレームワークを一から作ったものを使い回していろんなものを作ってきましたが、こういったオープンソースのフレームワークを使う事によって、コアな部分を自分で作る必要がなくなり、結果、開発の時間がかなり短縮できます。地図を操作してデータを表示する仕組みを作る為にGoogle APIを利用しています。そしてユーザの操作に直接関係のあるJavaScriptのコード作りには、これもオープンソースで開発されているjQueryというJavaScriptライブラリを使っています。JavaScriptはブラウザで実行される為にブラウザによって動作が違いますので、本来ならばコードの開発には細心の注意が必要です。しかし、JavaScriptライブラリを利用すれば、ブラウザの違いをあまり気にせずに開発ができる為、これもまた開発の時間の短縮に繋がります。こうして開発の手間を少なくする工夫をする事によって、ユーザの使い勝手や全体的なウェブアプリの質の向上に集中する事ができます。

ふたつ目は既存のサイトが固定HTMLで構成されているウェブサイト全体をWordPressで運営するようにシステムを移行します。昨年、株式会社ウエダ食品のウェブサイトも同様の事をしました。コンテンツはすべてデータベース化され、ウェブからのアクセスでコンテンツの管理ができるようになります。その他、必要な機能をPluginとして開発する事によって、簡単に追加する事ができます。システムがテンプレートを利用しますので、デザインも簡単に変更する事ができます。この他にも今回のリニューアルに伴ってGoogleカレンダーなど他のウェブサービスとの連携によっての複合的な情報発信をする事も提案しています。

みっつ目はオンラインストアの制作のお手伝いなのですが、システムとしてMakeshopを利用しています。デザイン担当の方が別にいまして、ページに独自デザインを反映させる為にHTMLのカスタマイズをしています。システムが自動的に書き出すHTMLに問題があって大変困っています。使いきれないぐらい機能が豊富な気がするのですが、ユーザインターフェースもとても分かりにくくなっていて、このシステムは好きになれません。個人的にはこのシステムをお薦めする事はないと思います。

というわけで日々、とても楽しくウェブ開発に打ち込んでいます！

• Fixed or fluid width? Elastic! | 456 Berea Street

僕が初めてこの Elastic Design という言葉を目にしたのはこの記事だったと思います。かなり前になります。実はるーと218も数ヶ月前にサーバを移動した時に少々CSSをいじってエラスティックデザインっぽくなっています。

エラスティックデザインというのはCSSのテクニックのひとつで、文字の大きさに合わせて全体の大きさが変化するようになっています。多くのウェブサイトは固定幅もしくは、ウィンドウの幅に合わせて変化するリキッド（fluid）デザインになっていると思います。固定幅ですと、背景画像など凝った装飾ができ、見た目をコントロールしやすいです。リキッドだと情報量の多いページでもウィンドウ幅が広ければ広い程コンテンツを上に詰めていく事ができ、スクロール量を減らす事ができます。ところが、固定幅ですと、文字を大きくすればする程、一行に入る文字数が少なくなり読みづらくなります。リキッドですと、広いディスプレイでウィンドウを広げて使ったりしていると、さっきとは逆で、一行に入る文字数が多くなり過ぎて読みづらくなったり、使いにくくなってしまうなどの問題点もあります。

Operaやインターネットエクスプローラ7では、ページ全体をズームイン（拡大）したりズームアウト（縮小）の操作が簡単にできるようになっていて、文字の大きさの調整よりこちらの方がスタンダードになる傾向にあります。リキッドデザインもまさしくこれらと同じで、Firefoxなどの他のブラウザでも同様にズームする事ができます。そして、ユーザが使っているウィンドウの幅や読みやすいの文字の大きさに合わせる事ができます。実際に企業のウェブサイトとしての活用の例は少ないかと思いますが、ブログなどの情報発信型のウェブサイトでは選択の中のひとつとしても良いかと思います。

あと、もうひとつ、今回のデザイン変更にともなって写真共有サイトZooomrの写真画像をページに載せる機能を作りました。epdsの活動が以前より伝わりやすくなっていればうれしいです。それでは、今後ともよろしくお願いします。