【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

3Jun2011

今春のサイトリニューアルで感じた事(Ajax編)

ブラウザテストの時だけIE使うとAjax部分がカクカク

僕の運営しているサイトでは毎年春になるとサイトのリニューアルをしています。
デザインリニューアルが大半を占める訳ですが、今年はシステムにもいろいろ手を加えました。
そこで、この1年間における「webサイトの環境の変化と対策」をまとめてみたいと思います。
  
 
【Ajaxがweb初心者にも扱えるまで普及】
 
そろそろ「Ajax」という言葉も、ずいぶん落ち着いてきた頃だと思います。新しい技術という物は、それが世間で騒がれなくなったら「死んだ」か「浸透した」かのどちらかですね。Ajaxに関しては当然「浸透した」結果でしょう。3~4年ほど前の騒がれ初めでは「Ajaxを使えばGoogle Mapが作れる」というイメージが先行していて、小規模ネットショップ運営者にとっては未知の領域でした。その為web技術に興味のある僕でさえ「Ajaxはプログラマのもの」と決めつけて距離を置いていました。
 
そんな僕ですが、今回のサイトリニューアルではAjaxライブラリのひとつ「jQuery」を使ったシステムを導入しました。具体的にはトップページに設置している「新商品が次々に表示されるバナー」を、FlashからjQueryを使ったプラグインの「SlideViewer」で作り直しました。
 
Ajax→Ajaxライブラリ→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を組み込める時代になったと言えるでしょう。
 
 

12May2011

DreamWeaverでxml宣言によるデザインビューエラー問題について

 
現在、とある事情からサイトをxhtmlに変更作業中。思わぬ壁にぶち当たったのでメモを残します。
 
xhtmlで推奨されている、文書の一番初めに入れるxml宣言があります。
 
<?xml version=”1.0″ encoding=”shift_jis”?>
 
上の宣言を入れたところ、DWでのデザインビューが崩れるというエラーが発覚。
 
「xml宣言をDW内部的に無効にする機能拡張」があり、それをインストールする方法が有効みたいです。
しかし、私は基本的にCSシリーズにエクステンションを入れたくない主義なのでこの方法は好ましくありません。
 
ではどうするのか・・・。
根本的な問題は
・DWのデザインビューが崩れていても実際のファイルには影響はない
・xml宣言をしないといけないのか?
という点です。
 
この2点を意識しながら、解決策を探してみます。
 
まずデザインビューの崩れを無視したまま作業を進めてみます
  
しかしデザインビューの崩れ方が半端じゃないため、非常に不便です。。
このまま作業を進めようとは思いませんので、xml宣言をしないで済む方法を模索します。
 
普通にxml宣言を取ってみて、ブラウザテストを徹底的に行います
 
テストの段階でなんらかのエラーがでた場合は次に進みましょう。
ちなみに、僕のサイトではこの段階でエラーは発生しなかったため、現状はxml宣言無しで運用してみようと思います。
 
文字コードを変えてみる 
 
文字コードがUTF-8もしくはUTF-16の場合、xml宣言は省略できます。
作業をしているサイトがshift_jisの場合、文字コードを変更して再度ブラウザチェックを行います。
 

 

 

19Feb2010

サイト内リンクに画像はNG!?

【2007年に他サイトで書いたブログ記事を再アップします。】
 
 
 
 
 
他ページに移動させる為のリンク。 特に同じサイト内へのリンクの事を「サイト内リンク」と呼びます。
 
このサイト内リンクにもSEO対策を施す事ができます。
 
ただし、SEO関連の書籍では必ず目にする「ページタイトル」や「他サイトからの被リンク数」等と比べるとあまり重要視されていない項目です。
 
効果としては、「自サイト内でのキーワードに対するランク付け」として考えておいてください。
 
検索結果に対して適切なページを表示させる為には外せない技術ですので、適切に行いましょう。 
 
 
 
 
 
 
 
 
さて、本題に入る前に確認です。
 
「アンカーテキスト」という言葉を聞いた事がありますか?
聞いた事がある人は、その意味を知っていますか?
 
今回はこの「アンカーテキスト」についてのお話ですので、「アンカーテキスト」という言葉を聞いた事がない人の為に説明しておきます。
 
 
 
下の例は、このブログのトップページへのリンクです。
ty’s empty f’log トップへ

この場合の「ty’s empty f’log トップへ」という文字列が「アンカーテキスト」となります。

アンカーテキストはページタイトル等と同じくSEO対策に効果のある箇所となっています。

注意して欲しいのはリンクを張っているページではなく
「リンク先のページで効果が出る」
と言う事です。

上の例では、リンクを設置してあるこのページではなく、このブログのトップページに「ty’s empty f’log トップへ」というキーワードで効果が出ます。
 
 
 
 
 

理解を深める為にひとつ面白い例を出しましょう。
 
Yahoo Japan で 「exit」と検索してみてください。
 
YahooとGoogleがトップにでると思います。
 
 

しかし両サイトタイトルには「exit」という文字は使われていません。
 
それどころかサイト内に「exit」という文字はほとんど無いでしょう。(端から端まで調べたわけではありませんが・・・・おそらく頻繁には使われていないでしょう(-_-;)
 
 
 
 
 
では何故「exit」で検索すると、Yahoo Googleが上位に出るのでしょしょう?
 
 
・・・その答えが「アンカーリンク」です!
 
 
仕組みは簡単!
 
多くの18禁サイトのトップページにある
18歳以上ならEnter
18歳未満ならExit
という文章の 「Exit」 のリンク先にYahoo や Google が設定されているからです(笑

 
おもしろいでしょう?
 
 
 
 
 
この「アンカーリンク」の仕組みを、自分のネットショップ内で有効に使うには、まずトップページへのリンクです。
 
大抵のサイトは全てのページからトップページへのリンクが張られているので、一番効果が出やすいはずです。
 
 
もしあなたのサイトでトップページへのリンクに画像を使っていたり、「Top」や「Home」の文字ならば今すぐに「上位表示させたいキーワード」を含むテキストに変えてください!

ただし、住宅を扱うショップならば「HOME」そのままで結構です(笑
 
 
 
 
住宅以外のサイトならば、
 
お米屋さんなら「お米の?トップページ」
お肉屋さんなら「お肉の?トップページ」
 
の様にする事が望ましいですね。
 
 
 
 
SEO関連の記事の時は必ず言いますが
「スパム(不正行為)は絶対にやめてください」
 
トップページへのリンクに
「お米!安い!激安!種類も豊富!」
というテキストは適当ではありません。
 
「このリンクの先に何があるか」が明確に伝わる事が第一です。
 
 
 
 
 
 
 
 
今回のポイント
 
・リンクを張る際は、リンク先ページのSEOを意識したアンカーテキストを使う。
 
 
 

23Nov2009

ドメイン取得&ブログ設置

今回、前々から必要性を感じていた「プライベート用ドメイン」を取得しました。

動機としては、ブログ新設がメインではなく 新しい自分用メールアドレス を作りたかったのです。

というのも、プロバイダ変更に伴い今まで個人用として使っていたメールアドレスの変更を余儀なくされました。

プロバイダ配布のメアドをメインで使っている人は「プロバイダ変更=メアド変更」という事実を自覚しましょう。。。

銀行・カード系にもプロバイダメアドを使っていたので、変更は必須!

変更するにしても
1. 何年も使い続けられる (安定)
2. フリーのwebメールは論外 (安心)
という事で、結果ドメイン取得のいい機会になりました。

そして、ドメイン取得を機にプライベートなブログを作りました。

考え無しに「tanaka-yusuke.com」で取得した為本名もろバレですけど、本名隠す様なVIPでもない為問題ありません。

メモ帳&日記代わりに使っていこうと思います。

11 / 11« 先頭...7891011