半人前ウェブディレクターの奮闘記

2009/07/01 1:38

最近どうもDreamweaverの調子が悪く（会社も自宅も）何か別のツールを――と思い、探していたらよさ気なものを見つけたので、試してみました。

Aptana
『EclipseベースのIDE（統合開発環境）であるAptanaは、コード補完機能やリファレンス機能など、充実度の高さが売りのオーサリングツールである。

＠ＩＴより』

まだ、レビューを書ける程使っていませんが、無料のツールとしては、十分過ぎる完成度です。
コード補完機能もかなりしっかりしているし、web系（html,css）以外にも、java scriptやphp(要プラグイン)のコーディングも可能。
Dreamweaverと比べると、デザインビュー的なものはかなり劣りますが、ブラウザでプレビューしながらコーディングすればさほど問題ないと思います。

若干、動きが遅いのが気になりますので、ゴリゴリ書ける方は、ストレスを感じるかもしれませんが、コード補完を使いながら書きたい方には、なかなか使えるオーサリングツールだと思います。

ボクももう少し使ってみようと思っています。
・・・まずは、日本語化してからですケド・・・

トラックバック[0] コメント[4]

投稿者 : 4_1@目指せ！photologger

WEBの軽量化を考える（CSS SPRITE）

2009/06/28 17:57

[web開発的なこと]

たまには、真面目な話を書きます。
えっと、web屋さん的な話題なので、興味のない方はスルーの方向でお願いします。

CSSは、すでにWEBのスタンダードな技術になりました。新しいバージョン（CSS3.0）なども登場してきています。
そんなCSSですが、色々なテクニックも開発されています。今回紹介するCSS SPRITEもその一つです。

CSS SPRITEとは、
WEBページを作成する時に、画像要素をCSSのbackgroundプロパティを使用する場合、複数の画像を一つにまとめて、通信量を抑えるテクニックです。

以前は、画像の数よりもひとつの画像のサイズを小さくした方がいいという考え方が主流だったと思います。（僕が勉強した頃は）
実際には、極端に大きい画像は別として、通常のページで使う範囲であれば、複数の画像を読み込むよりは、それらをまとめてしまった方が結果的に軽量化につながります。

サンプルを作りましたので、見てみましょう。
下図のようなページをコーディングするとします。

■sample01
画像を複数にスライスして、ロールオーバーはjavascriptsで対応。
◆サンプルを見る

リクエスト数：17
総サイズ：87ｋ
通信時間：668ms

■sample02
CSS SPRITEで対応。
◆サンプルを見る

◆使用した画像

リクエスト数：5
総サイズ：77ｋ
通信時間：414ms

結果をみると一目瞭然ですね。
これだけシンプルなページでも差がでます（わずかな差ですが・・・）、大きなページになるとその差も無視できなくなります。
もちろん、CSS SPRITEが必ずしもベストな方法とは限りませんし、今回のサンプルで使った「text-alignプロパティ」でテキストを消す方法などは、あまり好ましい技術ではないと思います。

ただ、「HTTPのリクエスト回数を減らすことが、パフォーマンスの改善にもっとも効果的である」という意見もありますので、今後取り入れていきたい技術ですね。（手間が増えますが・・・）

トラックバック[0] コメント[2]

投稿者 : 4_1@目指せ！photologger

初参戦＆祝勝利

2009/06/20 22:14

トラックバック[0] コメント[0]

投稿者 : 4_1@目指せ！photologger

EC-CUBEカスタマイズ手順その２

2009/06/17 12:12

[web開発的なこと]

前回に引き続き・・・

サーバーからデータをダウンロードしたら、後はテンプレートを作りこんでいくだけです。

基本的には、HTML＋CSSで対応できます。
ただし、ページの表示を定義しているのは、htmlファイルではなく、.tplファイルになります。

ちなみに、ダウンロードしたデータはとても膨大で、
どこに何があるかとても分かりにくいです。。

デザイン面での修正に限って言うと、大きく分けて２ケ所を見ていけば大丈夫です。

◆CSSファイル、画像ファイル、一部のテンプレートファイル
/user_data/packages/テンプレート名　直下

detail.tpl,list.tpl,top.tplがここにあるのがミソです。
ちなみに、これらのファイルは、
・detail.tpl・・・商品詳細ページ
・list.tpl・・・商品インデックスページ
・top.tpl・・・トップページ
を定義しています。

◆その他のテンプレートファイル
/data/Smarty/templates/テンプレート名　直下

detail.tpl,list.tpl,top.tpl以外のテンプレートに関しては、上記の場所から変更できます。

主なテンプレートファイル
・footer.tpl:フッター
・header.tpl:ヘッター
・site_frame.tpl:<head>内の変更
・site_main.tpl:ページの枠組み基本、レイアウトの変更

その他個別に修正する場合は、修正したいページのＵＲＬから該当ファイルを判別できます。

例えば、/cart/index.php?product_id～　というページだったら
/data/Smarty/templates/テンプレート名/cart/index.tpl
というファイルを変更すればよい事になります。

ダウンロードしたファイルを修正して、FTPツールでサーバーにアップします。
ボクの場合、基本的には、サーバーサイドでのみデザイン修正をしますので、EC-CUBE管理者画面の「デザイン管理」は、レイアウト変更（サイドバーのブロック等）以外は使用しません。

ここまで理解できれば、あとは気合いと根性でコツコツ修正していくだけです。（かなり根気が必要ですよ。。）

ここからは、ボクが実際に組み込んでみての感想です。

EC-CUBEはとても優れたwebショッピングアプリケーションです。これだけのシステムを無料で提供してもらえる事は、開発者にとってとても有益な事です。
（顧客管理、商品管理、モバイルページ、メルマガなどとても多機能です！）
また、管理画面のＵＩは、もとても直観的でクライアントサイドでも扱いやすい仕上がりになっています。

ただ、それなりのページに仕上げるためには、相当な根気が必要です。（ボクは経験値２サイトなのでしょうがないですが、某サイトの立ち上げに約１週間程かかりました。）

商品の登録も、CSVファイルに部分的に対応できていますが、まだまだ完ぺきとは言えません。（画像の扱いが上手でなかったり・・・）大量の商品を登録する際には、かなり根気が必要です。

オープンソース＝無料という安易な発想でEC-CUBEに飛びつくと痛い目をあう可能性がありますので、十分に精査してから、作成に取り掛かるべきでしょう。

と、悪いことも書きましたが、使い方によってはとても有益なツールになると思います。ロックオンさんの姿勢が徐々に・・・な気もしますが、これだけのツールを提供してもらえる事に素直に感謝すべきかな？とも思います。

トラックバック[0] コメント[0]

投稿者 : 4_1@目指せ！photologger

家庭菜園始まります

2009/06/07 21:42

[日記]

・・・という訳で、少しでも家計を助けるために先日作ったプランターを活かすために、家庭菜園を始めることになりました。
マツアズでも、何かを育てるのが流行っているようですし。

ボクの実家は農家でしたが、その辺のことはとんとど素人なので（＾＾；
今回は、初心者向けのホウレンソウを植えてみました。

果たして、ちゃんと生えてるか？
乞うご期待！

トラックバック[0] コメント[2]

投稿者 : 4_1@目指せ！photologger

EC-CUBEカスタマイズ手順

2009/06/05 23:38

[web開発的なこと]

※あくまで、塩原流のカスタマイズ方法です。

１．デフォルトテンプレートのコピー
バックアップの意味も込めて、デフォルトをコピーしてから、カスタマイズを始めます。
（ある程度カスタマイズしたテンプレートがあれば、それをコピーしても構いません。）
[管理画面]　デザイン管理＞テンプレート設定　よりデフォルトテンプレートをダウンロードして、

[管理画面]　デザイン管理＞テンプレート追加　にテンプレートをアップロードします。
テンプレートコード,テンプレート名は任意で構いません。

その後、アップロードしたテンプレートを適応させます。

２．基本レイアウトの設定
[管理画面]　デザイン管理＞レイアウト設定　より各ページの基本レイアウトを設定します。

※この設定は、テンプレートを変更するとリセットされますので注意してください。

３．ページ詳細修正の準備
[管理画面]　デザイン管理＞ページ詳細設定

デフォルトですと、TOPページ／商品一覧ページ／商品詳細ページ／MYページの４つの項目があります。
TOPページ／商品一覧ページ／商品詳細ページの３つについて、タイトルをクリックして、内容を表示し、保存してください。
この処理「内容を表示し、保存する」という処理がキモになります。この処理をすることで
[サーバー]　/httpdocs/user_data/packages/test[テンプレート名]　直下に　detail.tpl、list.tpl、top.tpl
というファイルが作成されます。

ちなみに、この３つのファイルは
■detail.tpl：詳細ページのカスタマイズ用ファイル
■list.tpl：一覧ページのカスタマイズ用ファイル
■top.tpl：トップページのカスタマイズ用ファイル
で、初期状態ではサーバにないファイルです。

ここまで行った上で、サーバからデータをダウンロードしてください。

トラックバック[0] コメント[0]

投稿者 : 4_1@目指せ！photologger

解析から見えてきたもの

2009/05/29 23:14

[日記]

先日、yahoo!のアクセス解析について述べましたが
>yahoo!アクセス解析ツール公開

ちょっと気になって、このブログのアクセス解析を調べてみました。
今回は、以前から使っているGoogle Analyticsの結果です。

で、下の画像が検索キーワード別のリストです。

非常に見ずらい画像で恐縮ですが・・・
３番目の検索ワード・・・「安曇野　エアロビクス」
安曇野　エアロビクスって、あたしやってませんから！

いや、エアロビクスが悪いとかじゃなくって、あまりに自分のブログとかけ離れているのでびっくりしてしまいました（＾＾：

ブログサイトでは、他の方のブログで書かれている内容で検索に影響があることも考えられるので、決しておかしなことではないと思いますが・・・

むしろ、「安曇野　エアロビクス」で検索して僕のブログを見てくださった方に申し訳ないですね。

申し訳ないことがもう一つ。
「EC-CUBE」に関するワードも多数ありました。（上位５０個の検索ワード中半分以上は「EC-CUBE」に関するワードでした。）
同業の方も少なからず、このブログを見てくれてるのかな？
自分で「EC-CUBE」を使ったときにも感じましたが、「EC-CUBE」について言及しているサイトは、少し難しいです。僕みたいに初心者にはちょっと・・・ね。

どうすれば、デザインの変更ができるのか？
どこに何かあるのか？
といった、導入編が紹介されていない気がします。

なので、これから不定期連載として、「EC-CUBE」のカスタマイズ方法をアップします！
あくまで、塩原流で、しかも１サイトしかつくったことのないド初心者ですが、その中で得たノウハウを公開できればと思います。

トラックバック[0] コメント[0]

投稿者 : 4_1@目指せ！photologger

yahoo!アクセス解析ツール公開

2009/05/28 21:15

[仕事のこと]

yahoo!が一般向けにアクセス解析ツールを公開したようです。
＞yahoo!アクセス解析

Google Analyticsの対抗馬？

さっそく、このブログで試してみました。
yahoo!アクセス解析の売りは、リアルタイム性にあるようで、解析コードを入れてから、約１時間で解析がスタートしました。（Google Analyticsは１日近くかかります。）

ざっと見た感じ、ＵＩは解り易いですし、どちらかというと使いやすい部類にはいるのでは？という印象を受けました。
若干、データを表示するまでのタイムラグが気になりますが・・・

ベータ版なので、コンバージョンの測定などはできないようですが（夏をめどに公開予定みたいです）、今後に期待と言うところでしょうか？

ちなみに、商用、個人に問わず無料です。

もう少し、データを集めて、Google Analyticsと比較してみますです。はい。

トラックバック[0] コメント[0]

投稿者 : 4_1@目指せ！photologger

ドゥ　イット　マイセルフ（一部）

2009/05/24 19:32

[日記]

今日は、昔からの友人の建設会社で行われた木工教室に押しかけてきました。（お客さん限定だったようですか、無理をいって混ぜてもらった次第です）

木工教室・・・お題はプランターボックス

普段、デジタルなものを作っているので、こうゆう実在するものをつくるのは、本当に楽しかったです。