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

☓ 閉じる

4Nov2011

ヌルッとページ内リンクをスクロールさせるライブラリ

ページ内リンク

ネットショップでは目的の商品を探しやすくする為に、ページ内リンクを使う場面が多いと思います。

ページ内リンクは便利ですが、一瞬どこへ移動したのか見失ってしまうのが欠点ですよね^^;

今日ご紹介するJavaScriptライブラリを使えば、リンク先に移動する際にスマートフォンのように「ヌルッ」とスクロールさせる事ができます。

smoothScroll.js

こちらのサイトで配布されています。
to-R

サーバーの任意の場所にダウンロードして、使いたいページのhead内で外部ファイルとして呼び込めば準備完了です。

このライブラリはとても軽くて信頼性が高く、HTML5にも対応しています。

最も優れた所は

既存のハッシュタグ(#)付きページ内リンクに適用される

という点。

各リンクに個別にタグを書き加える必要はありません。

適用させたくない箇所には

smoothScroll.jsを適用させたくないリンクには、以下のように一言だけ付け加えます。

html5でコーディングしている場合

スムーズなし

html5以外

JavaScriptファイルの14行目を書き換える

var attr ="data-tor-smoothScroll";

変更後

var attr ="class";

ページのリンク部分にclass属性を追加

スムーズなし

WordPressのトップページでは動かず

HTMLで作ったサイトのほうで快調に動いていたのでWordPressのほうでも使ってみようと思い準備をすると、なぜかトップページでは動かず。。。

詳しく調べてはいないので簡単なコーディングミスの可能性もありますが、とりあえずご報告です。

29Aug2011

IEでCSS3を使える用にするライブラリ CSS3 PIE

jQueryプラグインブック―「軽量」「高機能」 JavaScriptライブラリの導入と活用! (I・O BOOKS)
Prototype & script.aculo.us ―JavaScriptライブラリによるAjaxアプリケーション開発
JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで
マンガでわかるJavaScript
–PR–

誰かIEを褒めてあげる人いませんか?いませんよね・・ by"ty"

ブラウザ界の大問題児「Internet Explorer君」はCSSという外国語を全然理解してくれないアホな子。

という事は周知の事実だと思います。

IE君も頑張ってお勉強をして9歳でやっとCSS3を理解できる様になったとはいえ、

一般ユーザー(特にここ日本のユーザー)のシェアは半数以上がCSS3を理解できないIE6~8が占めています。

web制作をする側の人間から言うと、CSS3はめっちゃ便利!

便利なのに、(EUでは過去に訴訟問題にもなったほど不当な)IEの寡占状態によって使えない!! ※記事末尾で注釈します

そんなフラストレーションの溜まる現状が続いている制作現場ですが、とある事情でどうしてもCSS3を使う必要に迫られてしまいました。

tyの本職であるネットショップ「PetitCottage」の、ある一つのカテゴリをWordPressで作り替えようとしている時のお話。

良質な海外アーティストの有料デザインテーマを導入したのですが、これがなんとCSS3でコーディングされていました。

有料だけあって細部まで作りこまれている為、これをCSS2でコーディングし直すのは手間もかかるし無理も出てきます。

こうなったらIE用にだけ違うCSSを作るか? と思っていた最中、このライブラリの存在を知りました。

CSS3 PIE

開発元サイト http://css3pie.com/

これを使うと、CSS3で書かれたコードに数行追加するだけで、IEでも見た目を同じにできます!

作業の具体的な進め方は、以下のリンク先が参考になりました。

All About IE6~8でも一部のCSS3が使える!「CSS3 PIE」の使い方

↑ 基本的な部分はこのサイトの説明だけで足ります。記事もプロ意識を持ってしっかり書かれている為、まずはこちらを参考にしては?

たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE

↑ こちらもオススメ

CSS3 PIE(PIE.htc)が上手く動作しない際の注意点

↑ 動作しなかった場合のトラブルシューティングに。。

tyの場合、設置・コード編集作業は5分ほどで出来ました。

しかし、実環境で動作確認した所、

一部の背景が指定の通りに表示されない
(no-repeat指定なのにrepeatされる)
(背景画像が指定の場所からスタートしない、ずれる)

Chrome版IEタブでは一切動作しない
(サブ機のChrome/IEタブでは正常動作・・??)

などなど、不安定な一面も。。

期待してたのにっ!! という泣き出したい気持ちの時は、この言葉を思い出してください。

ハナからCSS3が使えないあの地獄の現場から、CSS3 PIEは遙か天国に近い場所に一瞬で連れてきてくれたんだ・・・

細かいバグは自力でなんとかしましょう (笑

ちなみに先述のバグの大半は、自分のコーディングミスでした^^;

※EUでのMS訴訟問題

MicrosoftによるOSの事実上の独占状態が続く90年代前半からEUで指摘されている独占禁止法違反問題。
(2009年IEの訴訟に関しては)自由な競争が求められるブラウザを独占状態のOSにバンドルする事が独占禁止法に抵触している、というEUの指摘は「OSインストール時にブラウザを選択できる様にする」というMicrosoftの申し出をEUが受け入れる形で同年に和解した。

参考:[Wikipedia]マイクロソフトの欧州連合における競争法違反事件

17Jul2011

web知識ゼロでもできる「Thickboxの導入方法」

howto本出すなら無駄にコンサル用語並べんな! by"ty"
 
前編 「オーバーレイ表示機能についてのアレコレ・・・」 

オーバーレイ表示に関する記事の続きです。

オーバーレイ表示の説明をした前回に続き、どうせならweb知識ゼロでもわかるHow toを書こうと思いたったのが今回のテーマです。
 
 
webページ制作と縁のないバリバリの営業マンが取引先で

「君、若いから聞いてみよう。 うちのサイトの画像をかっこ良く拡大したいんだけど、どうやるかわかる?」

というムチャブリをされた時には、是非ご活用くださいませ。
 
※当然ですが、今回の記事を参考にしてページを改良できてもサーバーにアップロードできなければ意味はありません。
サイトのアップロード?? サーバーの管理人?? 状態の依頼人でしたら、静かに見放してあげましょう。。
上の「営業マンが~」の話は半分冗談で、初心者がサイト制作をする場合、ページを改変した本人がサーバーにアップできる状態でないと、何らかのトラブルが起きる可能性があるためオススメできません。

 
 
 
オーバーレイ表示の無料スクリプトは多くありますが、今回使用するのは僕のサイトでも使っている「Thickbox」です。
 
今回説明する方法は「簡潔」を目的としている為、(汎用性の高いjquery.jsをthickboxフォルダ内に保存するなど)大きな目でみると非合理的な部分があります。
この記事を参考にご自分なりのカスタマイズをして頂けたら、一気にhtmlへの理解が深まると思います!

 
今回は以下の状況を仮定して説明をしていきます。

・「ページ」に「画像A」が配置されている。 画像をクリックしても何もおきない。

「ページ」に配置された「画像A」をクリックすると、「画像Aの拡大画像」がオーバーレイ表示される、という状態がゴールです。
 
 
 

もくじ

 
1, 画像Aに拡大画像へのリンクを貼る
2, Thickboxによるオーバーレイ表示のしくみ 
3, 下準備 (スクリプトのダウンロード&設置)
4, ページ内コードの書き換え
 
 
 
 

画像Aに拡大画像へのリンクを貼る

 
ここでは最も簡単な画像拡大の方法、「画像Aに拡大画像へのリンクを貼る」方法を説明します。
  

まず拡大したい「画像A」のソースを見てみます。
 
ソースコードのなかに

という部分があると思います。
 
 
これが「画像A」を表示させる為のコードです。
 
 
そして拡大画像を表示させたい時は、この「画像A」に「画像Aの拡大画像」へのリンクを貼ります。
 
リンクを貼るには、リンクさせたい部分を

画像

で囲みます。
 

↑これで「画像Aをクリックすると、画像Aの拡大画像へ移動する」という状態が実現できました。
 
 
 
 

Thickboxによるオーバーレイ表示のしくみ

 

Thickboxでは、リンク先の画像(またはHTMLページ)をオーバーレイ表示で現在のページ上に表示させます。
 
上の説明ですでに「画像Aに拡大画像のリンクを貼る」作業を終えている為、そのリンクにThickboxを設定してやればOKです!
 
 
Thickboxを有効にする為に必要な作業はたったの3つ。

1. Thickbox関連のスクリプトが書かれたファイルをサイトのどこかに設置
2. Thickboxを使用したいページで、1で準備したスクリプトを外部ファイルとして読み込む
3. オーバーレイ表示をさせたいリンク(<a>タグ)内に 「class=”thickbox”」 と記述する

本当にたったのこれだけですw
 
 
 
 
 

下準備 (スクリプトのダウンロード)

 
まずはThickboxの関連ファイルをダウンロードします。
 
↓公式サイトはこちら
thickbox公式サイト
 
2011.7月現在では、上から2番目のグレーのボックス内にて詳細ファイルへのリンクが貼られています。
 
一応以下からも各々にリンクを貼ります^^
リンク先を表示したら、「名前をつけて保存」で以下の名前で保存をしてください。
 
thickbox.js
thickbox.css
loadingAnimation.gif (ページではなくgif画像を保存してください)
jquery.js
 
 
4つのファイルをダウンロードしたら、全てをサーバーの任意の場所にアップロードします。
 
が、、、
 
その前に、軽くサイトの構造についての説明を致します。
 
 
一般的にはサイトの管理をしやすくする目的で「一連のファイル群を一つのフォルダに格納」します。
 
みなさんのパソコンと同様ですね。 誰しもフォルダ分けをしてファイルを整理していると思います。
 
そして、パソコンと同様にサイトのファイル・フォルダ名も「自己流」で構いません。 怖がらずに素敵な名前を付けてください^^
 
 
・・・今回は「thickbox」という名前のフォルダ(名前普通っ!?) に先の4ファイルを入れてアップします。
 
 
 
重要な点がひとつ
 
thickbox.js を開いて、8行目付近を見て下さい。

var tb_pathToImage = "images/loadingAnimation.gif";

 
という行があり、これは先ほど保存した「loadingAnimation.gif」を参照するコードです。
 
これを
 

var tb_pathToImage = "loadingAnimation.gif";

 
に書き換えて保存して下さい。
 
 
理由は、最初のコードでは自分(thickbox.js)のいるフォルダの「images」フォルダの「loadingAnimation.gif」を参照しているからです。今回は自分(thickbox.js)と同じフォルダ内に「loadingAnimation.gif」を保存しましたので、これは間違いになります。よって【「images」フォルダの】という部分を削除しました。
 
 
 
 
 
 
 

ページ内コードの書き換え

 
全ての準備が終わりましたので、ついに本命のページでの作業に入ります!!
 
 
ます、アップしたthickbox関連ファイルへの参照リンクを貼り、外部ファイルとして読み込みます。
 
ページソースの上の方を見ると <head> というタグがあります。
 
そして少し離れた下の方で </head>という終了タグがあります。
 
 
この<head>で囲まれた部分には、そのページの重要な情報が書かれてあり、外部ファイルの参照もここで行います。
 
 
thickboxを動かす為には、初めにjquery.jsを読み込みます。
 

 

 
上を参考に、実際にアップした場所のurlを書いてください。
 
 
次に以下の2ファイルを参照します。
 

 

 
 
 
この3つで設置した外部ファイルの読み込みは終了です。
(「loadingAnimation.gif」は「thickbox.js」内から参照をするので、ここでは使いません。)
 
 
最後に、オーバーレイ表示したい画像リンクにコードを書き込みます。
 

すごーく昔に、「画像A」に「画像Aの拡大画像」へのリンクを貼りました。
 

 
これに 「 class=”thickbox” 」というコードを追加します。
 

 
 
 
はい!おしまい!
 
 
 
ページを保存して、アップロード。 動作確認をしてみてください。
 
 
 
 
 
もし動かなかった場合は、下記のエラーを疑いましょう。
 
【オーバーレイ表示が一切動作しない】

・ページのヘッド内の外部ファイルへのリンクが間違えている。
・拡大画像へのリンク<a>タグ内の「 class=”thickbox” 」の記述ミス
 
【オーバーレイ表示は動くが、画像がきちんと表示されない】

・拡大画像がアップロードされていない
・拡大画像へのリンクが間違えている
 
 
 
 
それでもダメな場合。。

諦める。
 or 
tyのtwitterにつぶやいてみる
 or 
もっと優秀な人が書いた記事を参考にする
 
これをお試しください 笑

 
 
 
(7/18:「このブログで使っているwordpressプラグインとの兼ね合いでサンプルコードの一部に意図しない文字列が表示されている問題」を修正しました。)

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を組み込める時代になったと言えるでしょう。
 
 

2 / 212