ホームページ、Webシステム開発ならエボルニにお任せください

JavaScript / Ajax

ハードにしばられること無く動きを実現、遅延読み込みなどの非同期処理も

エボルニでは今までFlashを使っていたようなアニメーションを、JavaScriptで実現します。JavaScriptに置き換えることにより、ハードにしばられること無く、自由なアニメーションを実現することが出来ます。

また、Ajaxの本来の意味である非同期処理も取り入れた、体感待ち時間の少ないインタフェースの実現も可能です。

JavaScript / Ajaxのこだわり

非同期処理に限らずJavaScriptで外部のデータを読み込む必要がある場合、ブラウザの特性を理解して扱いやすい形式でデータを用意することが大切です。
加えて、Ajaxでは処理の実行順を制御することが重要になり、エボルニではjQuery.Deferredを利用するなど、ネットワークの影響を受けないように実装しています。

Ajaxとは、端的に説明すれば、ユーザーがクリックなどの操作をした際に、ページを丸ごと読み込み直すのではなく、コンテンツの一部だけを更新することができる技術です。これは「非同期通信」と呼ばれます。
Ajaxは、デザイン性やユーザーインタフェース(UI)を重んじるサイト、今までに無いユーザ体験(UX)を目指したサイトなど、先進的と評されるようなサイトで積極的に活用されてきましたが、最近では企業サイトのような信頼性や安全性が重要視されるサイトにとっても欠かせない技術となってきています。

JavaScriptは HTML、CSSと同様にソースコードが公開されるため、お客さまご自身やユーザさま、競合他社など、誰でも確認することができますので、技術的なご指摘をいただくこともございます。制作会社として恥ずかしくないコードを心がけてはいますが、お客さまの運用に合わせてコードの可読性、保守性、開発効率のバランスも考えるようにしていますので、ご不明な点がございましたらお問い合わせいただけますと幸いです。

※例えば、お客さまが修正する可能性があるものについては可読性重視である程度の助長は許容し、逆に弊社だけしか触らないものは保守性や開発効率を重視いたします。

JavaScript / Ajaxの活用事例

ロールオーバをフェードイン・アウトで実現

マウスインで強調表示をフェードイン、マウスアウトでフェードアウトするサンプルです。

メールアドレスの自動収集を回避する

迷惑メールの対策として、メールアドレスを画像にしているサイトが多くございます。しかし、テキストではなくなるために、ユーザがコピーすることができない、mailto:のリンクを設定しておくことができない、といったデメリットもありました。

このサンプルでご紹介する対策は、HTMLソース中には変換したメールアドレスを設定しておき、ブラウザで表示した際にJavaScriptで元の形式に復元する方法です。

※迷惑メールを送る目的でメールアドレスを収集するプログラムは、処理効率の面からHTMLソースや画像ファイルを解析の対象としていて、JavaScriptを実行するようなタイプは無いであろうという想定での対策ですので、効果を保証するものでは無いことをあらかじめご了承ください。

info at evol-ni dot co dot jp

info at evol-ni dot co dot jp

次のプラグインを使用しています。

  • jquery.mailto.js(エボルニ提供)

画像の読み込み完了を待つ、ローディング表示

画像の読み込みが終わるのを待ってから、何か処理を実行したい場面は多くあります。このサンプルでは、画像の読み込みが終わるまでは画像を半透明にしてローディング中の表示を出しておき、読み込みが終わったタイミングで画像を不透明に変更してローディング表示を解除しています。

「画像をロード」ボタンをクリックして動作をご確認ください。
(ローディングが完了したあとも再度クリックいただくことができます。ネットワークの影響で画像の読み込み自体が途中で止まる場合は、ブラウザの再読み込みをお試しください。)

次のプラグインを使用しています。

  • jquery.loadimages.js(エボルニ提供)
  • jquery.busy.js(エボルニ提供)
TOP