動物病院ホームページサンプル先日からチョコチョコと空き時間に作っていた動物病院ホームページサンプルです。

今回の技術テーマは「Movable Type」 + 「jquery」 + 「PNG画像(アルファーチャンネル付き画像)」 + 「PCサイト」 + 「携帯サイト」です。

 

とくに、今回の自分の中でやってみたかったのは、Movable Typeで特定カテゴリー「病院からのお知らせ」だけを携帯サイトへ吐き出すテンプレートの作成。
最初は手こずるかと思っていたけど、ものの1時間でDOCOMO・au・SBの3キャリア対応テンプレートが出来あがってしまったよ。

 

反対に、今回のデモサイトで以外に時間がかかってしまったのが、jqueryを使ってオンマウスでボタン画像を130%拡大する仕組みと、カテゴリーごとの<body>で使うcss(backgroundプロパティ )です。

本当はbackgroundプロパティに関しては、もっと良い対処方法が有ったんだけど、marginプロパティ・paddingプロパティでIE6のバグに泣かされる羽目に・・・・。 結局はPNG画像をIE6でどうやって処理するかの問題なんだけどね。

 

お暇な方は、一度サンプルサイトを見てやってください。
動物病院サンプルサイトはこちら

この不景気を乗り切らなくちゃ! 個人事業主だから営業も自分で頑張らなくちゃ!
ってことで、新しい営業ツールサイトを制作中です。

 

どうせ営業ツール作るんだったらjqueryの勉強も兼ねて「Movable Type」 + 「jquery」 + 「PNG画像(アルファーチャンネル付き画像)」 + 「PCサイト」 + 「携帯サイト」を作ろうと手をつけだしたけど、やはり変なスパイラルに入ってしまった。

ま~。ここからは愚痴だらけなので、お暇なら読んでください。
※簡単に言えばIE6でPNG画像表示方法とLightBOXに代わるjqueryの話です。

cubes055.jpg

昨夜、嫁と雨の中ミーシャのコンサートに行ってきました。
コンサートタイトルは「星空のライブ」だけど、雨男のオイラはやはり雨。(我ながらすごいね)
雨だったけど、コンサート会場は大阪城ホールなので自宅から電車一本で行けるお手軽な場所で助かったよ。

さてさて、コンサートの内容は・・・・。時間が短い。
5時スタートだったけど始まったのは5時20分ぐらいだったかな~。終わるのも早かったし、実質コンサート時間は2時間も無かったんじゃないかな。

さすがに歌はミーシャだけに上手く「すげ~な~。あんなに声が出るもんだと」感動。しかし、仕事中にBGMにミーシャを流すこともあるので・・・・・。

「あっ!あそこのCSSはこーした方が良いかな?」「jqueryのソースをいじらなくちゃ」なんて事がコンサート中に何度か頭を過ったりして。(良い気分転換になりましたけどね)

そうそう!頭を過ると言えば!
ミーシャの歌を聴いているのに「森三中の黒沢」が頭を過る。
恐るべしバラエティー・恐るべし森三中。恐るべしクロサワ。

 

会場出て帰ろうと駅へ向かっていると知り合い夫婦から「飯でも行かない?」って連絡。
知り合い夫婦もミーシャのコンサートに行っている事は知っていたけど、流石に席も離れているしコンサート終わってから合流は難しいだろうと思ってただけにビックリ。

しかも知り合い夫婦は車で来ていたらしく、ちゃっかり自宅まで送ってもらいました。

 

あ~。たのしかった。

堂島ロール

先日、知り合いのデザイナー事務所さんに仕事のことで相談に出かけたときに、手土産に堂島ロールを購入。

色々と勉強になる話をうかがって、その後は一人で大阪はミナミをウロウロ。
ミナミ方面は久しぶりに出たので、欲しかった参考書や、備品を買いに南堀江から本町まで雨の中を歩い数店ほどハシゴ。

さすがに荷物を持って雨の中歩くのは疲れてきたので帰宅しますか。
でも、そのまま自宅へ帰るのもなんだかな~。って事で、もう一度、堂島ロールへGO!!
そう、嫁にお土産。
いつもバックアップしてくれる嫁へチョットした感謝の気持ちです。

現在、jqueryのテストサイトを作っているんだけど・・・・。

png画像をpositionプロパティ・z-indexでレイアウト作っているんだけど・・・・。

あ~。IE6がウザイ。

 

なんでチャンとCSSを解釈してくれないんだ~。
オイラのお客さんの数社のアクセスログを見てみると、IE6のユーザーの割合はは2~3割。
まだ無視するには大きな数値です。(無視したいけど)

png画像使うだけならDD_belatedPNGを使うだけで良いんだけど、jqueryで色々とギミックを加えていくとjqueryDD_belatedPNGが喧嘩してしまう個所も出てきてギミックが動かなかったりするので苦労しています。

 

IE6がCSSだけでも、もう少しまともに解釈してくれればいいんだけど・・・・・・。
と前置きが長くなりましたが、そんな悩みを少しは解決してくれそうなJavaScriptを見つけたので自分用にメモしておきます。

JavaScript配布元はGoogle。
head内に記述するだけで、IE5・IE6をIE8並にWeb標準サポートしてくれるJavaScript。
ソースはこれだけ。

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

 まだベータ版なので、PNGがちゃんと表示されませんが、今後に期待できるかな。

詳細は http://code.google.com/p/ie7-js/ です。

 

最新ドライバー HPOfficejet7000ですが、ほかのHP製品と同じく簡単な説明書のペラと数枚の多言語のペラが入っているだけです。

良く言えばシンプル!悪く言えば簡略化しすぎ。

 


いつもHP製品を購入すると「初めて、HP製品買った人はビックリするんじゃない?」と思うぐらい説明書らしきものは有りません。(apple製品も同じだけどね)
ま~。単機能プリンターにゴチャゴチャ書いたマニュアルは必要ないんだけどね。

 

ドライバーCD-ROMもなんと不親切なパッケージで、
パっと見はWindows版とMac版の2種類が有るように思えますが、良く見てみると1枚は下記リスト用。

  • Windows-XP
  • Windows-VISTA
  • Mac OS-10.4
  • Mac OS-10.5

そして、もう一枚がWindows7用です。
しかもWindows7用のドライバーCD-ROMのWindowsって文字が目立つだけに最初はXP・VISTAのドライバーは付属していないのかと思ってしまった・・・。

たぶん、もともとは1枚だったけど、Windows7発売後にWindows7用ドライバーCD-ROMを付けた?(Mac 10.6 Snow Leopardのドライバーは無し?)

 

 

ん~。PCに詳しい、もしくはHP製品に慣れている方は「ハイハイ~」って感じで、

  1. イーサー接続
  2. ヘッド装着
  3. インクカートリッジセット
  4. 電源ON
  5. PCにドライバーインストール

と簡単な事なんだけどデジタルデバイドの低い人には、この簡単なパッケージングがなんとも不親切なんだよね~。

 

p.s.
決してHP製品を貶しているわけじゃないですよ。
オイラはHPプリンター4台&HPノートパソコン1台を所有しているHP好きですから。
もう少しコンシューマーにやさしいパッケージングだとHP製品が売れるんじゃないかと残念がっている1ユーザーです。
(国産メーカーの異常なまで親切丁寧な説明書・説明DVDや付属アプリが嫌いってこともあるけど。)

Officejet 7000 先日購入したHP Officejet 7000をやっとセットしました。
試し印刷してみたけど。まさに吉牛プリンター!

ズバリ「速い」「安い」「綺麗」の3拍子。
オイラの場合は写真印刷は無し。企画書や階層設計図印刷専用なので、まさにベストA3プリンターです。
しかも標準でネットワーク対応なので5台のマシンから印刷可能だ!!ウッシッシッ。
ほんと、2万円を切る価格でこの性能は安い!!
しかも独立インクなのでコストパフォーマンスも良いぞ。

 

大きさもA3プリンターだからデカイぞ!!と思っていたけど、以外にコンパクト。
印刷した感じは墨がチョット盛り気味(ツユダク)かな?(これも吉牛と同じなのか?)
盛り気味印刷なのでインクが乾いていないのかと思って、軽く指で擦ってみたけど全然問題なし。


ヘッドの大きさはHP130カートリッジより小さく感じたけど、HP130より細い罫線(0.2pt)も綺麗に出ています。しかも顔料なので質の悪い紙に印刷してもニジまないしね。
※なんだかんだで、この HP Officejet 7000 で仕事に使っているHPプリンターが4台になってしまった。

あとは、詰め替えインクでも問題なく綺麗に印刷してくれるかだな。

先日届いたプリンターも箱のまま。
これといった仕事は現在動いていないんだけど、こんな時だからこそ勉強しようと、こんなことしてたりして。

  1. SEO・SEMテスト
  2. Ajaxテスト
  3. ALL PNG画像でテストサイト構築
  4. Movable Typeでモバイルサイトテンプレート制作
  5. それらのテストを行うサーバ構築(Fedora11)

そうそう、あとはモバイルサイトのアクセスログ集計方法で良い物が無いか物色中。

現在、テストで思ったように動いてくれないのが、4番のMovable Typeでのモバイルサイトテンプレート。

簡単なテキスト&固定画像のモバイルサイトだと問題ないんだけど、Movable Typeでエントリー吐き出したときに3キャリアそれぞれに合った画像を生成するところで、引っかかっています。

 

取りあえず、近況報告ナリケリ

HP Officejet 7000

じゃじゃ~ん。出かけている間に届いていました。HP Officejet 7000

最後まで、EPSON PX-1001 と悩みましたが、最終的には使い慣れたHP製品に決定!

と言いながら、いまだに PX-1001には後ろ髪ひかれていますが・・・。4色オール顔料&DVDラベル印刷が・・・・。

 

本日は遅いので、明日にでもセットアップしますか。

そうそう、箱が大きく最初はビックリしましたが、持ってみたら軽い事・軽い事(B9180と比べて)もしかしたら中身がスカスカだったりして。

ちなみに箱の大きさはこちらです。大きさ比較になるか分からないけど比較対象に雑誌をポッイとな。

でかい箱だけど軽いよ

只今、携帯サイト制作中です。
いままでも、携帯サイトは何度も作っていたから手なれたもんですが、今回はチョット小細工を。
 

小細工と言っても大した事じゃないんだけど、アクセスしてきたキャリア毎にキャリア専用ページへ振り分けです。

  • docomoからのアクセスはdocomo専用ページへ
  • auからのアクセスはau専用ページへ
  • ソフトバンクからのアクセスはソフトバンク専用ページへ
  • パソコンからのアクセスはPC専用ページへ

今までは携帯キャリアごとにページ振り分けするのに.htaccessを書いていましたが、今回はPHPでキャリア振り分け。と言っても、フリーで良い物が見つけたので使いたかっただけですが。

 

携帯キャリア振り分けに興味のある方は、こちらのZERO-SKYさんにて携帯・PCアクセス振分けプログラム無料配布しておりますの参考にどうぞ。

先日から悩んでいたA3プリンターですが購入しました。
本日発送で明日到着予定。

 

新規購入なら、EPSON(PX-1001)・CANON(PIXUS IX5000)・HP(Officejet 7000)のどれか。もしくはHP Photosmart Pro B9180のインクを購入しようかと色々悩みましたが、現在所有のフォトプリンターHP Photosmart Pro B9180は4色インク切れ。

インク4本交換で1万6千円・・・。
やはりフォトプリンターで普通紙へ資料印刷はコストが合わない・・・。
「資料印刷用プリンター購入したほうが良いか」ってのが理由。

HP Photosmart Pro B9180は写真プリント用に保管しておこう。

さてさて、肝心の購入したA3プリンターですが、
それは、明日到着してからの発表ってことで。

 

 

ちびチャコ

ちびチャコが我が家に来てくれて1年。

今では13kg。もう全然チビじゃないけど、あだ名はちびチャコ。

オイラに似て外出(散歩)が大嫌い。散歩が嫌いだから楽と言えば楽だけど・・・。
先代チャコは散歩大好きだっただけに、なんだかチビと散歩に行っても物足りない。

そうそう、チビは車にも弱い。
徐々に車に慣れては来たけど車に乗せると、やはり車酔いでゲロッパです。
愛車CUBEはベンチシート。運転席から助手席までが一つのシートになっているので、チビを助手席に乗せても気分が悪くなるとオイラに持たれて「気分悪い~アピール」。

先日も車を運転していたら車酔いで気分が悪いのか、チビがオイラの左モモにアゴ乗せて気分悪い~アピール。


「あとちょっとで家だから辛抱しろよ~」って言っていたら、見事に自宅前でオイラの股にゲロッパ。家の前だったから良かったけど、これが出先で股にゲロッパされていたら・・・・。
おそろし~&ゲロくさい~。

十日戎今年も行ってきました十日戎!(西日本の行事なので関西以外の人には馴染みが無いかな)
毎年1月10日にお参りに行っていたけど、今年は残り福を狙って残り戎です。(宵戎が1月9日、戎が1月10日、残り戎が1月11日)

 

にぎわいは・・・・。残り戎って事もあったのかも知れないけど、今一つだったかな~。
今年は仕事を掻き集めれるように熊手の飾り買って、戎さんへお参り&お払い。最後の締めは神社裏に回って、もう一度お参りです。

 

なんで神社の裏に回るかと言うと、表のお参りは人がイッパイで商売の神さん戎さんも願い事聞くことで大忙し。だから戎さんの後ろに回り、戎さんの肩を叩いて「おねがいしまっせ~」と改めてお願いします。

ん~。この発想が関西人らしくて面白い。
さっ!!今年も頑張っていくべ!!

A3プリンターを購入しようか悩んでます。
自分用のメモ書きとして記録しておこう。

各メーカーのメリット

  • EPSON
  1. 発色が派手で綺麗に見える
    (写真印刷では同価格帯の各社プリンターの中では一番綺麗に見える)
  2. イラスト・写真印刷は3社の中で一番綺麗(ベタに白抜き文字など潰れない)
  3. インクの購入が容易
  4. 多機能(DVDラベル印刷など)
  5. ドライバーの使い勝手が良い

 

  • CANON(使ったことが無いのでイメージです。)
  1. インクの購入が容易
  2. 多機能(DVDラベル印刷など)
  3. 顔料インクでテキスト印刷が綺麗
  4. テキスト印刷が早い
  5. たま痒い所に手との届くマニアックな製品が出ることも

 

  • HP
  1. ランニングコストが安い(世界共通機種が多く外国の良質な補充インクが発売されているため)
  2. 印字が早い。レーザープリンターに匹敵
  3. ヘッドの交換が簡単にできる。
  4. 顔料インクでテキスト印刷が綺麗。レーザープリンターに匹敵
  5. 古い機種でも最新OSのドライバーが開発される。
  6. マニアックと言うか玄人な製品が多い。

 

各メーカーのデメリット

  • EPSON
  1. インク大食い
  2. プリンターを使わないとヘッドが詰まりやすい
  3. テキスト印刷は3社の中で一番ひどい(細い・小さいポイントで印刷すると潰れる)
  4. ヘッド交換が簡単にできない。(EPSON工場送り)
  5. 商品サイクルが早く、古い商品はドライバー・ユーティリティ開発が止まる。(Windows7 64bitに切り替えて泣かされた)
  6. 廃インクを吸い取るスポンジ交換が必要。(何度か泣かされた)

 

  • CANON(使ったことが無いのでイメージです。)
  1. カラーで印刷したときに、スミ(ブラック)が茶色にコロブ
  2. プリンターのデザインが悪い(個人的主観)
  3. EPSONの追っかけ?機能がEPSONより1世代古い(個人的主観)
  4. EPSONと同機能なプリンターを選ぶと高い?(個人的主観)

 

  • HP
  1. インクカートリッジがEPSON・CANONに比べ購入しにくい
  2. インクカートリッジに使用期間制限がかけられている。
    (インクがカートリッジに残っていても期間を過ぎるとカートリッジが使えなくなる)
  3. ドライバーの出来が悪い。(VISTA・XPでは異常に重たい。Windows7では解決?)
  4. EPSON・CANONのようにDVDラベル印刷できる機種が少ない
  5. インク数が少なく写真印刷は3社の中で一番悪い(個人的主観)

仕事で使っているA3プリンター(HP Photosmart Pro B9180)のインクが切れそう。しかもヘッド交換のお知らせも出てるよ。

HP Photosmart Pro B9180購入して2年半。 かなり酷使したからな~。フォトプリンターなのに出力するものと言えば企画書やホームページ階層設計図がほとんど。

HP Photosmart Pro B9180を購入した理由だけど、印字速度の速いHP。
そして全て顔料インクで有りながらヘッドのノズルが詰まりにくい(と言うか詰まったことが無い)
ただ、デメリットはインクが高い。
だいたい1色4,000円前後するので、8色そろえると32,000円程度。たしかに写真プリントすると綺麗なんだけどな~。ただ、オイラの環境ではテキストや図面が大半だからHP Photosmart Pro B9180がなんだかかわいそう。

プロフィール

大阪のホームページ会社CUBES

ホームページ制作・デザイン・印刷、お問い合わせは全国から承っております。


Blogネーム:キューブス[CUBES]
職業:デザイナー(SOHO)
性別:オトコ
2006年から独立。
MacからWin、 そしてLinux使い。ちょっと変なデザイナーです。
DTPとWEBをメインに頑張っています。



最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。