■JavaScript=jQueryの活用

今業界で話題のjＱueryを使ってみた

0

iQueryとは要は過去のjavascriptの集大成？しかも、容量 も抑えてクロスブラウザ対応なので安心かつ手軽だ。もともと発祥はnetscapeからか、ＩＥは心許ない。一部を除いてＩＥ６などは機能しないとみた方がいいのか。現在最新版は1.42。基本は、iＱuaryのjsフォルダのminタイプ（圧縮したコード読みにくいヴァージョン）と必要に応じて指定のCSSを階層に注意しつつサーバーに置く。そしてＨＴＭＬページにはそれを読み込むコードを挿入する。
●参考／《jQueryUI+厳選プラグイン41実践サンプル集》
●参考／jQuery日本語リファレンス
0本家サイトですiQueryのダウンロード
ちなみに、これって無料なんスけど営利目的でもフォルダ内の制作者コードを外さなければＯＫって事かな…。自分はjavaにハマった事がないので気にしないながら、web世界でのオリジナリティについて改めて考えさせられた。※基本的にjsファイルの混在について読み込みに問題がある
●参考／ｊQueryを使っているプラグインが動かないときまずやるべき3つのこと

●jQueryアコーディオン仕様

0本ページのサンプル→http://www.tsuka-time.com/golf.html

0
このスクリプトはページ数が増えても、コンパクトに収まる為効果バツグンです。iphoneでもサクサク動く（嬉）但しファイル数は変わらないので当たり前に容量 は食いますね。これは、自分のＨＰのメインカラーであるSouth-streetを使いました。
0jQuery UIのテーマギャラリーのダウンロード

0

●jQueryＭacDock風アイコン仕様

0
0本ページのサンプル→http://www.tsuka-time.com/
クリックすると拡大してポップアップする機能。CSS設定で横位置、配置マージン、拡大サイズなど自由にカスタマイズできる。但しサイズが合ったアイコンにセンスがないと自爆-笑-。gifなど動画も普通 に機能するがiphone～はダメ！大きさが元サイズで固定されてしまう。
0

 

 

 

《iphone画面》
ドックがこの状態で
クリックしても拡大しない
そもそもビヘイビアと
ＣＳＳが効いてないのか？
※ちなみに画面キャプチャー
はアップルボタンと上右
のonoffの長押しです。


●jQueryライトBOX系仕様
リッチスタイルのライトボックスが手軽に機能するFancyBoxを使ってみた。グループ単位で切り替えて画像を繰っていく事が可能。しかしデモでは自動送りになっていなかった。
0本ページのサンプル→http://www.tsuka-time.com/illustration.html

0

もう一つは比較的シンプルなjQueryのSlideshow。設定jsとcssスタイルでシンプルに動く。こちらはページ自体にデータを梱包するのであまり画像を詰め込み過ぎると動きが鈍くなるみたい。
0本ページのサンプル→http://www.tsuka-time.com/illustslideshow2.html
●参考／Ajax,Javascript、コンテンツを効果的に表現するスクリプトサンプル設置方法
巷に溢れる定番ツールの紹介。画像のポジションを固定してスライドするタイプ等
●参考／jQueryを使ったシンプルなスライドショー
●参考／JavaScriptで画像ギャラリーを作る「jQuery slideShow plugin」
●参考／jQueryを使用したシンプルなスライドボックス
●参考／Lightbox風のスクリプトFancyBox。
●参考／ポラロイド写真を並べたようなギャラリー
iphoneでflashが機能しない代替のためのjava=fancyBoxなのだが、そもそもセンターを認識しないタッチパネル機能ではプレビュー画面が右へ右へズレていく。一方スライドショーの方はCSSで画面を固定するのでiphone含め比較的汎用性は高そう。但し古いブラウザでは最後の画像だけ読んで止まっちゃうが… 画像の詰め込み過ぎは厳禁らしくflashとの使い分けが必要だろう。

0

 

 

 

《iphone画面》
ライトボックスのプレビュー画面
はおろかマスクも切れてしまう始末。
そもそもタッチパネル方式は
センタリングを認識出来ない
ので仕方ないのかも…。


●jQueryのColorBoxを設置
colorbox
iphoneで位置がままならない事や少しテイストが違う気がしたのでFancyBoxからcolorboxに入れ替えて見た。様々な方がこの問題と格闘されてますがこのプラグイン評価は高く同じjQuary同士だと入れ替えも手間が掛からないしgoodデス。●colorbox.css、●jquery-1.4.2.min.js、●jquery.colorbox-min.jsの3つを読み込み主にボックスの中の文字配列はcssで管理してます。
しかし文字内容はjquery.colorbox.jsの方で管理されていて流石にmin=圧縮1/2では触りにくい。
0本HPのサンプル→スライドショー：true使用。表示方法はフェードタッチ等ヴァリエーションがiphone多数。しかしいざ使用してみると、やはりiphoneでは 右へ右へズレていく（涙）。どうしてもイラストを拡大しながらプレビューさせるケースがあるのでiphoneの性能上いた仕方ないみたい。（アルキメデスの亀みたく延々センタリングできない）もともとiphone用ページは別途用意してるのでそこに自動アクセス出来ないかしらと探したら。やっぱりありました！以前からFrashやらなんやらで、別ページに回避したかったので非常にカンゲキです。
クロスプラウザ化と共にiphone描画の快適化を模索していたのでＣＳＳ対応以外ではひとつ目的をクリア。但しあくまでもテキストオンリーの無機質なiphone専用ページを用意するつもりは全く無くてあくまで直感的にストレスなく閲覧できる統合されたページ作りが理想。（このプラグインはOperaに関しては80Kビォ超える容量のファイルはプレビュー出来ない事が判明した）
●参考／ライトボックスの評価
●参考／iphoneユーザーの誘導コード

 


<!-- if (　navigator.userAgent.indexOf('iPhone') != -1) {
if(confirm('iPhone向けのページを表示しますか？')){
location.href = "http://www.tsuka-time.com/illustration.html";
} } //-->