builder by ZDNet Japanをご愛読頂きありがとうございます。

builder by ZDNet Japanは2022年1月31日にサービスを終了いたします。

長らくのご愛読ありがとうございました。

Ajaxの技法:クールな回転スライドの作成

文:Chris Duckett(Builder AU) 翻訳校正:原井彰弘
2008-01-11 11:30:00
  • このエントリーをはてなブックマークに追加

JavaScript - まだマシな選択肢

 本稿の目的は、回転台を開発することである。従って、なぜ回転台を開発することになったのかについては議論しない。作らざるを得ない状況になったと考えていただきたい。

 それでは、FlashではなくあえてJavaScriptを使用する理由について考えてみよう。

  • Flashの実装よりも軽い -- コードの最適化を行えば、使い物になる回転台をわずか2、3キロバイトで記述することが可能だ。これは、Flashのイメージを読み込むよりもHTMLとJavaScriptを読み込んだ方が速いということを意味する。
  • 保守性 -- JavaScriptを知っている開発者の方が、Flashを知っている開発者よりも多い。また、Flashの機能を生かした回転台を実装したくても、そのために必要なデザイナを確保できないかもしれない。その場合、実装はすべて開発者が行うこととなり、JavaScriptは有効な代替手段になる。
  • 旧バージョンへの対応 -- JavaScriptが無効になっている利用者に代替のコンテンツを提供する方が、Flashが利用できない利用者に代替のコンテンツを提供するよりもはるかに簡単である。
  • アクセシビリティ -- スクリーンリーダを用いた操作を可能にしたい場合、インラインの回転台の方が外部のFlashオブジェクトによる回転台よりも簡単に対応できる。
  • Google -- コンテンツがページ内に含まれていれば、Googleはそれをインデックス化できる。しかしFlashを使用した場合は、回転台の内容をページの中にもこっそり埋め込まない限り、Googleのボットがリンクをたどることはできなくなる。

HTMLのベース

 これらの理由を考慮して、回転台の作成を始めよう。この例では、4つの記事を表示する回転台を作成する。



Secure IIS Log files are essential to reconstruct events before an IIS Web server failure. Learn how to protect your log files with this tip. Full story
User Group Mash Find an Aussie user group near you with our new Google maps interface. Full story
.NET 101 Learn how the .NET Framework works and the tools you'll need to get up and running in this quick start guide. Full story
Understand CSS Before diving into CSS learn some of the core drivers and concepts. Full story

 この状態では、まだ何も装飾がなされていない。そこで、div要素にスタイルを追加して、一般的な回転台に近づけよう。







Secure IIS Log files are essential to reconstruct events before an IIS Web server failure. Learn how to protect your log files with this tip. Full story
User Group Mash Find an Aussie user group near you with our new Google maps interface. Full story
.NET 101 Learn how the .NET Framework works and the tools you'll need to get up and running in this quick start guide. Full story
Understand CSS Before diving into CSS learn
some of the core drivers and concepts.
Full story

ブログの新規登録は、2021年12月22日に終了いたしました。

folllow builer on twitter
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]