ECサイトオーナーTY(てぃーわい)です。2005年にECサイトを立ち上げ、制作から運営システムまで全てを自分で作ってきた経験を元に、2012年からはサイト制作、ECコンサルティング、書籍執筆、テキスト制作などをしています。経営論3Jun2011今春のサイトリニューアルで感じた事(Ajax編)僕の運営しているサイトでは毎年春になるとサイトのリニューアルをしています。デザインリニューアルが大半を占める訳ですが、今年はシステムにもいろいろ手を加えました。そこで、この1年間における「webサイトの環境の変化と対策」をまとめてみたいと思います。【Ajaxがweb初心者にも扱えるまで普及】そろそろ「Ajax」という言葉も、ずいぶん落ち着いてきた頃だと思います。新しい技術という物は、それが世間で騒がれなくなったら「死んだ」か「浸透した」かのどちらかですね。Ajaxに関しては当然「浸透した」結果でしょう。Mapが作れる」というイメージが先行していて、小規模ネットショップ運営者にとっては未知の領域でした。その為web技術に興味のある僕でさえ「Ajaxはプログラマのもの」と決めつけて距離を置いていました。そんな僕ですが、今回のサイトリニューアルではAjaxライブラリのひとつ「jQuery」を使ったシステムを導入しました。具体的にはトップページに設置している「新商品が次々に表示されるバナー」を、FlashからjQueryを使ったプラグインの「SlideViewer」で作り直しました。・Ajaxとは、JavaScript関連技術で、動的にwebページを書き換える技術を指しています。・Ajaxライブラリとは、Ajax技術で実現できる個々の要素(ドラッグ&ドロップ、画像の書き換えなど)をプログラムしたパッケージです。・jQueryとは、とても人気のあるAjaxライブラリです。どんなプログラムが書かれているのか?中身を見ても僕にはわかりません。・プラグインとは、実際に使える状態をプログラムしたJavaScriptコードとhtmlサンプルコードのセットです。いろいろなプラグインが公開されています。・SlideViewerとは、画像を複数枚用意するだけで「自動でスライドするメイン画像」、その下に「全画像のサムネイル一覧」を実現できるプラグインです。普段webショップを運営しているレベルの人であれば、実際に自分のサイトで動かすまでの時間は1時間程度です。僕も今回Ajaxライブラリを使うのは初めてでしたが、プラグインをダウンロード&画像を準備してサーバー上で動く状態までに20分。実際に使いたいページに埋め込み、公開する状態までカスタマイズし終えるのにプラス30分ほどでした。一度仕組みが分かってしまえば、次回からは違うプラグインを使う場合でも30分ほどで完了です。Ajaxライブラリやそれらを使ったプラグインは膨大な数があるので、「やりたい」と思った頃の多くは実現可能なのです。最近、多くのサイトで「画像をクリックしたら背景がグレーに変わり画像が中央に表示される」というシステムを見かけます。あの動作も、Ajaxライブラリ「prototype.js」「scriptaculous」を使用したプラグイン「lightbox」を使い簡単に実現できます。ブラウザのJavaScript実行速度もかなり進化していますので、私達レベルのweb製作者においても、手軽にAjaxを組み込める時代になったと言えるでしょう。DreamWeaverWEB製作12May2011DreamWeaverでxml宣言によるデザインビューエラー問題について現在、とある事情からサイトをxhtmlに変更作業中。思わぬ壁にぶち当たったのでメモを残します。xhtmlで推奨されている、文書の一番初めに入れるxml宣言があります。encoding=”shift_jis”?>上の宣言を入れたところ、DWでのデザインビューが崩れるというエラーが発覚。「xml宣言をDW内部的に無効にする機能拡張」があり、それをインストールする方法が有効みたいです。私は基本的にCSシリーズにエクステンションを入れたくない主義なのでこの方法は好ましくありません。根本的な問題は・DWのデザインビューが崩れていても実際のファイルには影響はない・xml宣言をしないといけないのか?という点です。この2点を意識しながら、解決策を探してみます。デザインビューの崩れを無視したまま作業を進めてみますしかしデザインビューの崩れ方が半端じゃないため、非常に不便です。このまま作業を進めようとは思いませんので、xml宣言をしないで済む方法を模索します。普通にxml宣言を取ってみて、ブラウザテストを徹底的に行いますテストの段階でなんらかのエラーがでた場合は次に進みましょう。ちなみに、僕のサイトではこの段階でエラーは発生しなかったため、現状はxml宣言無しで運用してみようと思います。文字コードがUTF-8もしくはUTF-16の場合、xml宣言は省略できます。作業をしているサイトがshift_jisの場合、文字コードを変更して再度ブラウザチェックを行います。SEOWEB製作19Feb2010サイト内リンクに画像はNG!?【2007年に他サイトで書いたブログ記事を再アップします。他ページに移動させる為のリンク。同じサイト内へのリンクの事を「サイト内リンク」と呼びます。このサイト内リンクにもSEO対策を施す事ができます。SEO関連の書籍では必ず目にする「ページタイトル」や「他サイトからの被リンク数」等と比べるとあまり重要視されていない項目です。効果としては、「自サイト内でのキーワードに対するランク付け」として考えておいてください。検索結果に対して適切なページを表示させる為には外せない技術ですので、適切に行いましょう。本題に入る前に確認です。「アンカーテキスト」という言葉を聞いた事がありますか?聞いた事がある人は、その意味を知っていますか?今回はこの「アンカーテキスト」についてのお話ですので、「アンカーテキスト」という言葉を聞いた事がない人の為に説明しておきます。下の例は、このブログのトップページへのリンクです。トップへ」という文字列が「アンカーテキスト」となります。アンカーテキストはページタイトル等と同じくSEO対策に効果のある箇所となっています。注意して欲しいのはリンクを張っているページではなく「リンク先のページで効果が出る」と言う事です。トップへ」というキーワードで効果が出ます。理解を深める為にひとつ面白い例を出しましょう。「exit」と検索してみてください。YahooとGoogleがトップにでると思います。両サイトタイトルには「exit」という文字は使われていません。それどころかサイト内に「exit」という文字はほとんど無いでしょう。設定されているからです(笑おもしろいでしょう?この「アンカーリンク」の仕組みを、自分のネットショップ内で有効に使うには、まずトップページへのリンクです。サイトは全てのページからトップページへのリンクが張られているので、一番効果が出やすいはずです。住宅以外のサイトならば、お米屋さんなら「お米の?トップページ」お肉屋さんなら「お肉の?トップページ」の様にする事が望ましいですね。SEO関連の記事の時は必ず言いますが「スパム(不正行為)は絶対にやめてください」トップページへのリンクに「お米!安い!激安!種類も豊富!」というテキストは適当ではありません。「このリンクの先に何があるか」が明確に伝わる事が第一です。今回のポイント・リンクを張る際は、リンク先ページのSEOを意識したアンカーテキストを使う。今回、前々から必要性を感じていた「プライベート用ドメイン」を取得しました。いうのも、プロバイダ変更に伴い今まで個人用として使っていたメールアドレスの変更を余儀なくされました。プロバイダ配布のメアドをメインで使っている人は「プロバイダ変更=メアド変更」という事実を自覚しましょう。(安心)という事で、結果ドメイン取得のいい機会になりました。ドメイン取得を機にプライベートなブログを作りました。考え無しに「tanaka-yusuke.com」で取得した為本名もろバレですけど、本名隠す様なVIPでもない為問題ありません。メモ帳&日記代わりに使っていこうと思います。