サイト案内|リッチなサイトを作ろう

本サイトはjQueryをはじめ、AjaxやJavaScript、スタイルシートからPHP、Perlなど、インターネットの伝統の技術から最新の技術を駆使して、他のサイトとは一味違ったリッチなサイトを作ろうと言うサイトです。
それぞれ個々に詳しく解説したサイトは多く見られますが、これら全てを組み合わせて解説したページをあまり見かけません。

少し敷居の高い機能も例を上げできるだけわかりやすく紹介して行きたいと思っていますので、積極的に挑戦してみてください。

jQueryとは

jQueryは、JavaScriptとHTMLの相互作用を強化する軽量なJavaScriptライブラリで、 John Resig が2006年1月に発表したフリーかつオープンソースの関数群です。個人で製作されたものとはいえ、Microsoftも採用を決定した事を見ても中途半端なものではないことは確かです。

jQueryは、ブラウザ用のOSに近い働きをする縁の下の力持ちのような存在ですから、これだけでは何も出来ないのですが、専用のプラグインが豊富に存在しますので、好みのプラグインと同時に使用することで高度な機能を簡単に導入することが可能です。
(一般的には「フレームワーク」と呼ぶ)

当サイトでは、これらのプラグインの使い方やカスタマイズ、PerlやPHPと併用することで、さらに高度な機能を実現する方法を紹介します。

ライブラリの入手は本家サイトから最新版をダウンロードします。
2010年2月現在の最新版は1.4.1で、こちらからダウンロードできます。
jQueryには、フルセットのjQuery Regular(jQuery)と、できる限り不要な文字を削除してコンパクト化したjQuery Minified(jQuery.min)が有りますので、ここではフルセットをダウンロードして置きましょう。
ダウンロードのリンクをクリックして、スクリプトが直接ブラウザに表示された場合は、ブラウザのメニュー
[ファイル(F)]-[名前を付けて保存(A)]を選択し、ファイル名に「jquery.js」と付けて保存します。

サイトへの導入は、サイトルートディレクトリ[jquery]という名前のディレクトリを作成して、ここに、[jquery.js]をコピーして置きます。ここまでが準備できればjqueryを使用するページのヘッダーにjavascriptを呼び出すタグを追加します。

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <meta http-equiv="Content-Language" content="ja" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <meta http-equiv="Content-Script-Type" content="text/javascript" />
 <title>リッチなサイトを作ろう|inetagency</title>
 <script type="text/javascript" src="jquery/jquery.js"></script>
 </head>
 <body>

jQueryはXHTML用ですので、全てのページをXHTMLで記述しておく必要が有ります。一般的に、最近のホームページ作成ソフトは意識しないでXHTMLを作成可能ですので問題は無いと思います。

これでjQueryを使用する準備は完了です。これ以降ご紹介するプラグインはすべてこの設定にプラグインのライブラリを追加する事で実現しますので、あくまでも上記設定が必要です。

Comment

$(this).corner("left");

コメントに関するお約束

ご意見、ご希望、ご質問など、何かありましたらご投稿ください。
ご質問に対する回答は、分かる範囲でお答えしますが、お約束は出来ません。
投稿していただいたコメントはこのページに記載されます。
コメントは各ページごとに独立しています。それぞれのテーマに沿ったコメントをお願いします。
タグはいっさい使用できません。タグもそのまま表示されます。
※印は必須です。ハンドル名でも結構ですのでご記入ください。
パスワードを記入しておけばご自分の記事を削除できます。
当サイトにふさわしくないと判断した記事は管理者の独断で削除することがあります。

お名前 ※

パスワード

件名

上記「コメントに関するお約束」に同意します。

Enquete

Link

jQuery
jQuery(日本語訳)
jQuery日本語リファレンス

colorbox(日本語訳)
Simplemodal(日本語訳)
Shadowbox(日本語訳)
beforeAfter(日本語訳)
jqPuzzle(日本語訳)

NoEditor

更新履歴

10/07/26 Winテーマの変更
10/06/08 まだまだ使えるXP
10/06/02 jQueryテーマ...
10/05/25 Win7は業務に...
10/04/11 携帯位置情報取得
10/03/09 カレンダーの追加
10/03/01 サービス開始

有料サービス

データ変換サービス
番地まで記載されたテキスト形式の住所データをお持ちの場合、「緯度」、「経度」及び、「最寄り駅」と座標、「最寄のインター」と座標の情報を追加したCSVデータを作成してお返しします。座標付ですので簡単にGoogleマップに位置表示することができます。
【例】

名称	住所
東京タワー	東京都港区芝公園4丁目2-8

↓

名称	住所	緯度	経度	沿線	最寄り駅	緯度	経度	高速名	インター	緯度	経度
東京タワー	東京都港区芝公園4丁目2-8	35.6585873	139.7454247	都営大江戸線	赤羽橋	35.655007	139.743642	首都高速都心環状線	芝公園	35.6544767	139.745769

※住所データは必須です。電話番号では特定できません。

費用は1件当たり、わずか32円。100件で3,200円、1000件でも32,000円です。
追加される最寄り駅、最寄のインター共に直線距離で最も近いもの1件です。複数必要な場合はお問合せください。

システム開発
Googleマップや最寄り駅、最寄のインターを利用したWEBシステムを開発します。
自社製品が全国どこで購入可能で、どの駅で降りれば1番近いのかなどをユーザにお知らせすることができ、販売促進にも貢献します。また、ご自分の住所を指定して最も近い店舗を検索したり、距離を指定して範囲内の店舗を検索して地図を表示するシステムの開発もできます。
もちろん、携帯版も可能です。

携帯版はGIF形式の静止画ですのでキャリヤや機種を選びません。ほぼ、全て機種で使用可能なシステムになります。

携帯電話ですからWEBのようなパフォーマンスは望めませんが、静止画でも地図の「縮小」、「拡大」をサポートします。

お見積もりは「お問合せ」から、ご希望の機能をできるだけ詳しくお書きいただき、お送りください。

最新のユーザインターフェースの導入
現在注目を集めているAjaxやJavascriptを使用したハイセンスなインターフェースの導入をお手伝いします。
jQueryプラグインのオーバーレイを複数使用した最先端のドキュメントの生成が可能になります。また、オーバーレイやAjaxを使用する事で、無駄なリロードを減らすことができ、パフォーマンスも向上します。

お問合せフォーム

全てのお問合せはこちらの専用フォームをご使用ください。もちろん、ご意見/ご希望でも結構です。システムに存在しない路線や、新たに開通した路線をご存知の場合はお知らせください。有料サービスで新たなシステム開発のお見積もりをご希望の場合は、出来る限りご希望の機能を詳しくお願いします。 ※は必須項目です。必ずご記入ください。
お名前 ※
フリガナ ※
Email ※
Email(確認)	※確認のためもう一度 (コピー禁止)
タイトル	お問合せお見積もりご意見/ご希望
内容 ※