更新がしやすいように、コンテンツを分割

今月に入ってページが様変わりしました。

これならユーザーも利用しやすい！と言えるページができて、社長も大喜び！

ですが、前回の失敗がまだ残っているのです。

と、いうことで、共通部分に大きな問題を抱えているので、なんらかの更新依頼が来ないかビクビクしています。どうも、さっかんです。

いつまでもビクビクしているわけにもいかないので、まるっと解決すると同時に、HTMLのスキルなし画像やリンクの更新程度ができるように、コンテンツ毎にhtmlを分けて更新箇所に適切な注釈、指示を書いていくなどの作業を開始しました。

今月の課題

・$ajaxを使ったhtmlの呼び出し　これを使ったコンテンツの分割

・コンテンツの更新箇所指示の注釈を入れる

・ショップページをテンプレートにする

高校の頃HTMLを覚えて、メモ帳で自分のページをひたすら書いていて、その頃にJavaScriptも少しかじったのですが、どうも理解できなかったので挫折。以来、今回もHTMLとスタイルシートのみでなんとかしようとしていたのが現状でした。

今更JavaScriptかと思いながら、蓋をあけたらjQuery？なんだこれ？

と思ったけど、iframeはSEO的にとか、楽天ではあまり推奨してないし、iPhoneでもローカルテストと実機でのギャップが大きいし、という感じで何かいい方法がないかと、ずっと探していて$ajaxで解決できることを知ったので、少し勉強する気になりました。

とりあえず、index.htmlを骨組みだけにしてみます。

jQueryの読み込みは必須です。今回は1.9.0を使っています。

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

$ajax文はtemplate.jsにまとめました。

<script type="text/javascript" src="js/template.js"></script>

あとは、直に書いたコンテンツのソースを新しいHTMLを作ってお引越し。

跡地には注釈と親クラス、中身は、

に置き換えました。

ヘッダー部分だけこんな感じ

(index.htnl)

<script type="text/javascript">header_temp()</script>

(template.js)

function header_temp(){

$.ajax({
url: "./template/header.html",
cache: false,
async: false,
dataType: 'html',
success: function(html){

document.write(html);

}
});

}

もともと直に書いたヘッダー部分の記述は、header.htmlへ移しました。

これで、ヘッダーが必要なページは、

だけ記述して、ヘッダーの更新はheadeter.htmlをいじるだけでOK。

昨日までのように、「トップスのリンク先が間違ってる！」なんて自体や、なんらかの変更が生じた際に、すべてのページを一つづつ直して行く必要がなくなりました。

この調子でどんどん進めていきます。

以前、メインスライダーをiframeで呼び出した際に楽々通販2さんのキャンペンスラーダーで代用していましたが、メインスライダー用の1000x400pxのバナーのなかに、突然楽天市場のキャンペーンの小さいバナーが自動更新で紛れ込む不都合が起こってしまうので、この際slickを使ったスケジュール機能付きのメインスライダーを作ってツール化しました。

ツール化、テンプレート化して外部から読み込むこの$ajaxを使ってコンテンツを整理してみたら表示速度も気持ち早くなったような感じがします。

何か関係があるのでしょうか？

index.html自体の容量がものすごく小さくなったのも関係あるのでしょうか？

気のせいかもしれないですけど。

従業員の少ない店舗もお店の見栄えと更新の勝手をうまくまとめれば、販売、店舗運営に集中して大きい売上も目指せるはず！

という思いで頑張って参ります！

では、また。

ECサイト制作備忘録

制作ノウハウのおぼえがき

更新がしやすいように、コンテンツを分割