B豚の備忘録 | EC-CUBEやWORDPRESS、オープンソースの情報メモ

<head>
<script src=”js/jquery-1.3.2.min.js” type=”text/javascript”></script>
<script src=”js/jquery-ui-1.7.2.min.js” type=”text/javascript”></script>
<link type=”text/css” href=”css/custom.css” rel=”stylesheet” />

<script type=”text/javascript”>
   $(function(){
    // Tabs
    $(‘#tabs’).tabs();
   });
  </script>
</head>

そして、BODY内に、タブのソースを記述。

<!– Tabs –>
<h2>TABSの実装サンプル</h2>
<div id=”tabs”>
<ul>
<li><a href=”#tabs-1″>タブ1</a></li>
<li><a href=”#tabs-2″>タブ2</a></li>
<li><a href=”#tabs-3″>タブ3</a></li>
</ul>
<div>
<div id=”tabs-1″>タブ１の内容。jQueryUIでは、色々とオプションも使える。例えば、ソース内の、
$(‘#tabs’).tabs();
この部分を、
$(‘#tabs’).tabs({selected:1});
とすると、2番目のタブがアクティブになった状態でページが開かれる。（※番号は、0から順番にインデックスを振っていくので、1番目のタブなら0、3番目のタブなら2ということになる）。いろんなことができますね～。　</div>
<div id=”tabs-2″>各コンテンツの中身は、こんな感じで適宜作成します。</div>
<div id=”tabs-3″>いろんなことができますね～。　</div>
</div>

そして、実装した画面イメージがこれです。（タブ１が開かれています）
jQuery-UI-Example-Page

そのほかのオプションとしては、タブのコンテンツの大きさを固定にするとか。色々。THEMEROLLERを使うと、適したCSSをWEB画面上で作成して、ダウンロードすることもできる。

参考サイト：

http://jqueryui.com/download

http://jqueryui.com/themeroller/

http://docs.jquery.com/UI/Tabs#option-selected

Comments (Close): 0
Trackbacks: 0

jQuiry：タブですっきりとコンテンツ表示-idtabs-

2009-08-10 (月)
JavaScript
AJAX | jQuiry | ＪａｖａScript

http://www.sunsean.com/idTabs/

便利なjQuiry。本当に色々できちゃうだね。

こちらのidtabsは、同じ画面内で、コンテンツをタブ切り替えできるというもの。

Comments (Close): 0
Trackbacks: 0

CSS3とjQueryで作るフラッシュライクなフォトビューアー

2009-07-22 (水)
JavaScript

http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html

こういう動きをフラッシュ離れと考えるべきか、はたまた、フラッシュには違う役割とか表現がでてきて、JSとフラッシュで棲み分けが進むと考えるべきか。

とにもかくにも、ことのところのJSやCSSは、本当に表現が熱い。昔フラッシュで高いお金を出して外注していたようなことが、さくさくっと、オープンソースでできたりするから、うれしいやら、怖いやら。

と、ごたくはともかく。

こちらは、CSS3とjQueryでポラロイド写真を机上にランダムに散らしたようなフォトギャラリーを実装するソースとデモです。写真の1枚1枚は、マウスドラッグで任意の位置に移動もできる。

こういうのは、結構すきなので、ちょっとソースを見てみることに。よくできてるなぁ。。。

最近残念なのは、IEの表現力の問題とか。なぁんか、足並みが揃わない。IEだけ。でも、国内ユーザーは、未だにIEシェアが高いので、作るほうとしては、なんだかなぁ。。。

私は、基本、作るときからIEでプレビューしてIE中心で作るんだけど、1ユーザーとしては、イライラすることも多い。
もういい加減、クロスブラウザーとか、そういうの、ナシにしてくれないかなぁ。。。プラグインとかオプションとか、違うところだけで選択肢をもてるようになればいいんだけど。

Comments (Close): 0
Trackbacks: 0

iphoneライクなパスワード入力フィールドを作るjQuery

2009-07-17 (金)
JavaScript

http://css-tricks.com/better-password-inputs-iphone-style/

入力すると、右側に、入力したアルファベットが1文字1文字大きく表示される。入力が間違っていないか、確認しながら、入力できるので、ユーザビリティの向上にはいいかも。

確かに、パスワードフィールドって、何を入れたかわからなくなるときがある。でも、これは、サイトの全体的なユーザビリティデザインを統一して考えないと、ここだけ凝っちゃってもな～という感は残る。

とりあえず、面白いので、あげとく。

Comments (Close): 0
Trackbacks: 0

ツカエル便利なjQueryプラグイン10選その２

2009-07-17 (金)
JavaScript

http://www.queness.com/post/295/10-really-interesting-jquery-plugins

「本当に使える」と書いてある通り、こちらも結構パワフルな感じ。

スライドするパンくずリストなど、実用的なものも多い。

Comments (Close): 0
Trackbacks: 0

ツカエル便利なjQuaryプラグイン10選

2009-07-17 (金)
JavaScript

http://www.ajaxline.com/10-useful-jquery-plugins

キーボードやカラーピッカーなど。なんか面白い仕組みを、、、というときに、色々使えそう。

Comments (Close): 0
Trackbacks: 0

手軽にphpとJSを連携させるjQPie

2009-07-17 (金)
JavaScript

http://projects.cyberlot.net/trac/jqpie/wiki

「jQPie」は、JavaScriptからPHPの関数を呼び出せるインタフェース提供ライブラリ。

軽量実装で、XML、HTML、json handlerをサポートしている。

サーバ側の全てのPHP関数を実行できるととんでもないことになってしまうので、あらかじめ使える関数を登録する。
こんな感じ。

$handler = new Pjq();
$handler->registerCallback(‘getarray’);
$handler->processIncoming();

ちょっと難しいけど、使いどころのありそうなライブラリ。

Comments (Close): 0
Trackbacks: 0

AJAXでLIGHTBOX的に美しく写真を表示するCOLORBOX

2009-06-25 (木)
JavaScript
AJAX | LIGHTBOX | WEBデザイン

http://colorpowered.com/colorbox/

要は、LIGHTBOXなのだけど、おしゃれ。

バリエーションのサンプルが色々あって、使いやすいです。

Comments (Close): 0
Trackbacks: 0

PHPで出力色々

2009-06-05 (金)
PHP・PERL
PHP | ライブラリ

PHPでPhotoshopのPSDファイルを画像に変換してブラウザに出力。
http://www.catswhocode.com/blog/php-display-adobe-psd-
files-on-a-web-page
PHPからWord、Excel、PowerPointのドキュメントを生成するサンプル
http://www.whenpenguinsattack.com/2007/07/02/how-to-create-microsoft-office-documents-with-php/
PHPでExcelファイルを生成できるライブラリPHPExcel
http://www.codeplex.com/PHPExcel

http://journal.mycom.co.jp/articles/2009/03/06/phpexcel/index.html　（参考：マイコミジャーナル）
http://phpspot.org/blog/archives/2009/03/phpexcelphpexce.html　（参考：PHP開発日記）

いろんなことができるんだねっ☆

Comments (Close): 0
Trackbacks: 0

jQuery lightBox plugin

2009-06-05 (金)
JavaScript
jQuery | LIGHTBOX | plugin

http://leandrovieira.com/projects/jquery/lightbox/

EC-CUBEでもレイアウト崩れなく、安全に使えるライトボックス。

便利です。

Comments (Close): 0
Trackbacks: 0

PHPで実装するレコメンドエンジンについての覚書

「この商品を買った人は、こんな商品も買ってます」

アマゾンでお役立ちの、アレ。

レコメンドエンジン機能という。

これは、協調フィルタリングという手法で実現されているらしいです。

協調フィルタリング（Collaborative Filtering, CF）は、多くのユーザの嗜好情報を蓄積し、あるユーザと嗜好の類似した他のユーザの情報を用いて自動的に推論を行う方法論である。趣味の似た人からの意見を参考にするという口コミの原理に例えられることが多い。

なるほど。

で、実は、この機能を簡単に実装できるPHPのライブラリがありました。

VOGOO：　http://www.vogoo-api.com/

フリーとプロ版があり、ふりーは、mySQLとポスグレの2つのDBに対応しているので、EC-CUBEにくっつけて使えそう。

サイトは、英語だけど、サイト内には、チュートリアルもあって、使い方なんかも詳しくかかれているっぽいので、時間が取れたら、ちょっと調べてみることにするワ。

とりあえず、覚書として残す。

参考：http://www.richcontext.jp/rss/richcontext.jsp　（こんなのもある）

Comments (Close): 0
Trackbacks: 0

フリーのフォトショップブラシやプラグイン配布サイト「PHOTOSHOP MOSAIC」

http://www.photoshopmosaic.com/

個性的なブラシやパターン満載。ハートのブラシもひとひねりあるデザイン。

Comments (Close): 0
Trackbacks: 0

パンくずリスト実装色々

2009-01-16 (金)
JavaScript | PHP・PERL
JavaScript | PHP

http://www.tomcoote.co.uk/JavaScriptCookieCrumbs.aspx

（http://coliss.com/articles/build-websites/operation/javascript/693.htmlで紹介されていた）

ユーザーが辿ってきたページの経路履歴をクッキーに保存して、その経路をパンくずリストとして書き出すタイプ

http://www.mtblue.org/pc/web/breadcrumbs.php

ディレクトリの構造を取得して、上の階層へ辿るリンクをパンくずリストとして書き出すタイプ

色々ありますな。

Comments (Close): 0
Trackbacks: 0

かっこいいjQueryコンテンツスライダー

http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider

動きがカッコイイ。

jQueryを利用していて、コンテンツがすす～っとスムーズにスライドしていく。

例えば商品ページで

Comments (Close): 0
Trackbacks: 0

プロフェッショナルなコーディングのための使えるAJAXライブラリ80選

2009-01-14 (水)
JavaScript
AJAX | JavaSctipt | ライブラリ

http://www.smashingmagazine.com/2007/06/20/ajax-javascript-solutions-for-professional-coding/

Comments (Close): 0
Trackbacks: 0

既存サービスに追加できるライブドアのリコメンドエンジン「cicindela」

2008-12-29 (月)
PHP・PERL

http://labs.edge.jp/cicindela/

アマゾンなどでよくある「この商品を見た(買った）人は他にこんな商品も見て（買って）います。」というアレですね。

既存サービスに追加して使用できるそう。EC-CUBEにも使えるかな？

Comments (Close): 0
Trackbacks: 0

jQueryでリッチなグリッドを実装する

2008-12-01 (月)
JavaScript
JavaScript | jQuery

http://www.jgari.com/?p=22

JQGRIDは、jqueryでリッチなグリッドが実装できる。

Comments (Close): 0
Trackbacks: 0

「Sigma Grid」-表組みのソートもページネーションもカバーすしてくれるオープンソース　（JSON使用）

http://www.sigmawidgets.com/products/sigma_grid2/index.html

Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェア。（データの表示に際してJSONでデータを渡す必要がある。）

参考サイト：http://www.moongift.jp/2008/11/sigma_grid/

まずカラムごとにソートができる。これは小数点や桁数をきちんと解釈した上でソートされる。セル内のデータを編集することはもちろん、ライブでバリデーションも行われる。編集されたカラムは色分けされて表示される。

テーブルについては大きさを変えることができる。さらにカラムの幅を変えることができ、長い文章の場合は「…」で省略してくれる。ページネーションにも対応し、簡易グラフ表示や印刷機能もある。

まだまだある。セルに画像やリンクを付けることができ、それはヘッダにも使える。ヘッダはグルーピングして多段にでき、ヘッダの下にテキストボックスやドロップダウンを配置（一括更新用！）もできる。フィルタリングを使ってテーブルデータを絞り込む機能があり、テキストのみならず数字に対しては以上以下といった条件指定ができる。

まだまだまだある。カラムはドラッグで移動させることができる。スキンに対応し、Vista風や中華風といったテーマが付属している。セル間における計算結果を表示する、イベント処理を感知する、メニューをつける、マウスオーバーでハイライトする、行の追加や削除処理にも対応するなどなど…とにかく多機能すぎて書ききれないほどだ。ああ、そうそう。左側のカラムを固定表示にすることもできるのだった。IDや会社名を固定に、横に長いデータをみる場合に絶賛の機能だ。

Comments (Close): 0
Trackbacks: 0

PHP開発のための便利スニペット10

http://htmlblog.net/10-code-snippets-for-php-developers/

メールアドレスチェック簡単化
パスワード文字列ジェネレート
Proxy経由でもできるだけIPアドレスを取得
Uploadクラスを使ったファイルの簡単アップロード
XSL変換
ファイルのダウンロード
Htmlバリデーションクラスの紹介
PHPMailerを使ったメール送信
特定ディレクトリ以下のファイルを得る
MDB2を使ったRDBM操作

こんな感じでスニペット化されたコードライブラリ。

Comments (Close): 0
Trackbacks: 0

セキュアな PHP アプリケーションを作成するための 7 つの習慣(IBM)

2008-11-10 (月)
PHP・PERL
PHP

http://www.ibm.com/developerworks/jp/opensource/library/os-php-secure-apps/

セキュリティーを考慮する際には、実際のプラットフォームとオペレーティング・システムのセキュリティーの問題に対処した上で、さらに作成するアプリケーションをセキュアなものにする必要があるということを忘れてはなりません。PHP アプリケーションを作成する際には、可能な限りセキュアなアプリケーションにするために、次の 7 つの習慣を守る必要があります。

入力を検証する

ファイルシステムを保護する

データベースを保護する

セッション・データを保護する

XSS (Cross-Site Scripting: クロスサイト・スクリプティング) の脆弱性から保護する

フォームへの投稿を検証する

CSRF (Cross-Site Request Forgeries: クロスサイト・リクエスト・フォージェリー) から保護する

IBMのサイトで、これらの習慣について詳しく解説されている。

Comments (Close): 0
Trackbacks: 0

色々使えるAJAXのライブラリ集

2008-11-10 (月)
JavaScript
AJAX | JavaScript

http://www.ajaxdaddy.com/

AJAXライブラリがカテゴリごとに分類され、サンプルもあるので、比べたり吟味しながら、欲しいライブラリを探せる。

Comments (Close): 0
Trackbacks: 0

JavaScriptベースのWYSIWYGエディタ『FreeRichTextEditor』

2008-10-14 (火)
JavaScript
JavaScript | WEB制作

http://www.freerichtexteditor.com/

【参考】その他のWYSIWYGエディタ色々
http://blog.webdistortion.com/2008/03/09/9-of-the-best-rich-text-editors-reviewed/

Comments (Close): 0
Trackbacks: 0

オススメ記事：symfony入門（1）：symfonyで始めるPHPフレームワーク

http://codezine.jp/article/detail/704?p=2

『CodeZine』で「symfonyによる実践的なPHPアプリケーション開発」なる記事が公開されていた。
詳細は上記リンクから記事を読んでみてくださ～い。B豚は、さらっと見ただけで、まだ読んでないので、後で読みマフ。
こういうのを、読み出すと、全然仕事しなくなるからね；

symfonyっていうのも、最近良く耳にするけど、実態不明；
何でもPHPフレームワークだとか。

もうちょっと勉強しなきゃですねぇ。。。ワタシも。ホントに。
ここんとこ、WEBの仕事しながらWEBの世界についてけてないワァ。。。

Comments (Close): 0
Trackbacks: 0

オススメ記事：jQueryを使ってAJAX/JavaScript開発を単純化

2008-10-13 (月)
JavaScript
AJAX | JavaScript | jQuiry | WEB制作

http://codezine.jp/article/detail/2907

『CodeZine』にて、「サンプルアプリケーションを作成してjQueryの概要を理解しよう」という趣旨の記事を見つけた。

jquairyは、最近WEB開発でリッチなインターフェイスを実装しようとすると、いつも出てくるけど、いざ、これって何よ？ってことになると、？だったりする。
この記事で一通りの知識を身につけておきたいところ。

jQuiryを使うと、

$(“#sampleDiv”).css(“margin-top”, “35px;”);

なんてコードで、CSSをインタラクティブに書き換えたり。

ぜひ、お勉強して、カッチョイイページを作ってチョウダイ。

Comments (Close): 0
Trackbacks: 0

ポピュラーな10のJSフレームワーク集

2008-10-09 (木)
JavaScript
JavaScript | WEB制作

http://sixrevisions.com/javascript/promising_javascript_frameworks/

jQuaryは既にみんな使ってますねぇ。
JSが好きな人やコーダーの人は、JSのフレームワークは色々面白いものを探して活用しているよう。
こういうのを集めておくと、何かインタラクティブな仕掛けをしたいサイトのときに、とても役立ちそう。（とか言いつつ、たまっていくだけのネタ帳；）

Comments (Close): 0
Trackbacks: 0

jQuiryを利用したホバーアニメーション効果色々

2008-09-25 (木)
JavaScript
AJAX | JavaScript

http://snook.ca/archives/javascript/jquery-bg-image-animations/

こちらは、デモページ。

http://snook.ca/archives/javascript/jquery-bg-image-animations/

滑らかな動作で面白い効果が色々ある。
ナビゲーションをちょっとデザインしたいときなんかに良いね。

その他のjQuiryとかCSSを使ったアニメーション効果色々。

Create a Cool Animated Navigation with CSS and jQuery [nettuts.com]
CSS Sprites2 – It’s JavaScript Time [alistapart.com]
Animated navigation items using jQuery [tyssendesign.com.au]
Garage Door Style Menu [css-tricks.com]

Comments (Close): 0
Trackbacks: 0

LIGHTBOX2.0で、かっこよく画像をポップアップする！

LIGHTBOXというのはJAVASCRIPTで、要は画像のポップアップとかに使うわけだけども、クールなインターフェイスでなかなかカッコイイのですな。複数画像をグループ化して、フォトギャラリーみたいなスライドも出来る。

『ゼロからはじめるLightbox 2.0 – 簡単にWebで写真アルバム機能を
http://journal.mycom.co.jp/articles/2007/06/14/lightbox/
LIGHTBOXの概要と使い方が分かりやすくまとまっている。
『Lightboxスクリプトいろいろ』
http://www.designwalker.com/2008/01/lightbox.html
スクリプトサンプルとか。
Ｌｉｇｈｔview
http://www.nickstakenburg.com/projects/lightview/
デザインが素敵なブランチ版
2.0をちょっと改造したひと。
http://www.fsiki.com/jet/css-xhtml/lightbox-js-v2.html

こういうのが、色々あると、WEBのデザインインターフェイスもたのしいですね。

Comments (Close): 0
Trackbacks: 0

商品の詳細ミニイメージをメインイメージと入れ替えて拡大して見せるロールオーバー

よくわけが分からないタイトルになってしまったけど。

ECの商品の詳細ページで、メインの画像が1つあって、その他に詳細画像が3つあり、それらをマウスオーバーでメイン画像と入れ替えて大きく表示できるようにしたいとき使う。

【JavaScriptのソース】

「imagechange.js」（名前はなんでもいい）と名前をつけて、保存。

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

【HTMLのソース】

１）JavaScriptへのリンクを<head></head>に入れるか、<body></body>の一番上に入れる。

<script type=”text/JavaScript” src=”【JSへのパス/】imagechange.js”></script>

もしも、JavaScriptを別ファイルで保存することが出来ない場合は、

<script language=”JavaScript” type=”text/JavaScript”>【この間に上記のソースを入れる】</script>

として、同じようにロールオーバーを使用するページのHTMLの<head></head>に入れるか、<body></body>の一番上に入れる。

２）商品の詳細画像を並べるコードを利用したいところへ入れる。　

<!– 商品メイン画像 –>
<img src=”<【メインイメージへのパス】>” class=”mainimg” name=”mainimg” />
<!–// 商品メイン画像 –>
<!– 商品詳細画像 –>
<a href=”javascript:;” onmouseover=”MM_swapImage(‘mainimg’,”,’【1つ目の小さい画像へのパス】‘,1)” onmouseout=”MM_swapImgRestore()”><img src=”【1つ目の小さい画像へのパス】” alt=”詳細イメージ１” name=”img_s01″ /></a>
<a href=”javascript:;” onmouseover=”MM_swapImage(‘mainimg’,”,’【２つ目の小さい画像へのパス】‘,1)” onmouseout=”MM_swapImgRestore()”><img src=”【２つ目の小さい画像へのパス】” alt=”詳細イメージ２” name=”img_s02″ /></a>
<a href=”javascript:;” onmouseover=”MM_swapImage(‘mainimg’,”,’【３つ目の小さい画像へのパス】‘,1)” onmouseout=”MM_swapImgRestore()”><img src=”【３つ目の小さい画像へのパス】” alt=”詳細イメージ３” name=”img_s03″ /></a>
<!–// 商品詳細画像※3つ以上増やしたい場合は、<a></a>までを1組コピーして番号を変えればOK –>

作成したJavaScriptと画像ファイルを、コードで指定したディレクトリへFTPでアップロードする。

カラーミーショップなどのASPでは、商品の画像パスなどは、商品登録するときに自動的に生成されるため、パスを指定する際に、その画像やリンク箇所へのパスを変数で取得する必要がある。
また、テンプレートに制限があったり、FTPが使えなかったり、などで、JSを別ファイルにできないこともある。

以下、カラーミーショップの設置例。

管理メニューの『お店をつくる』→『デザイン設定をする』から、テンプレートを選び、『デザイン設定』ボタンをクリック。

１）1番目の共通テンプレートの『HTML CSS 編集』ボタンをクリックして、HTMLの編集画面を開く。
HTMLコードの一番上に、

<script language=”JavaScript” type=”text/JavaScript”>
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

を追加し、『更新」ボタンを押して、保存。

２）4番目の商品詳細テンプレートの『HTML CSS 編集』ボタンをクリックして、HTMLの編集画面を開く。
メイン画像とオプション画像のコードをロールオーバー用に書き換える。

例えば、プレーンの場合であれば、L13からL28までを下記のように変更して『更新』。

<div style=”margin-bottom:10px;”>
<{if $product.img_url != “”}><img src=”<{$product.img_url}>” class=”large” name=”large” /><{else}><img src=”http://img.shop-pro.jp/tmpl_img/13/now200.gif” class=”large” name=”large” /><{/if}>
</div>

<!– 商品画像その他 –>
<div>
<{if $product.ot1_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,’<{$product.ot1_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot1_url}>” alt=”詳細イメージ１” name=”img_s01″ /></a><{/if}>
<{if $product.ot2_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,’<{$product.ot2_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot2_url}>” alt=”詳細イメージ２” name=”img_s02″ /></a><{/if}>
<{if $product.ot3_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,’<{$product.ot3_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot3_url}>” alt=”詳細イメージ３” name=”img_s03″ /></a><{/if}>
</div>

例２。
その他、下記のようにDIVタグやSPANタグのクラスを使ってマーキングしておくと、画像の並びや背景のデザインをCSSで調整できる。

<div class=”detail_img clearFix”>
<!– 商品メイン画像 –>
<{if $product.img_url != “”}><img src=”<{$product.img_url}>” class=”large” name=”large” /><{else}><img src=”http://img.shop-pro.jp/tmpl_img/13/now200.gif” class=”large” name=”large” /><{/if}>
<!–// 商品メイン画像 –>
<{if $product.ot1_url != “”}>
<div class=”smallimg”>
<{if $product.ot1_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,’<{$product.ot1_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot1_url}>” alt=”詳細イメージ１” name=”img_s01″ /></a><{/if}>
<{if $product.ot2_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,’<{$product.ot2_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot2_url}>” alt=”詳細イメージ２” name=”img_s02″ /></a><{/if}>
<{if $product.ot3_url != “”}><a href=”javascript:;” onmouseover=”MM_swapImage(‘large’,”,’<{$product.ot3_url}>’,1)” onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot3_url}>” alt=”詳細イメージ３” name=”img_s03″ /></a><{/if}>
</div>
<span class=”checkred”>＊マウスを重ねると拡大します。</span>
<{/if}>
</div>

大体こんな感じで。もし、マウスアウトしたときに、自動的に元の画像に戻って欲しくない場合は、onmauseoutの記述部分を削除すれば、OK。（onmouseout=”MM_swapImgRestore()”><img src=”<{$product.ot1_url}>”　←この部分。）

Comments (Close): 0
Trackbacks: 0

SMARTYのテンプレート内でphpコードを直接埋め込んで使用するには。

2008-09-18 (木)
PHP・PERL
PHP | smarty

テンプレートにphpコードを直接埋め込む事ができる。
これは $php_handling の設定に関係なく必ず実行される。

{php}　と　{/php}の間に挟めばいいだけ。

// テンプレートから直接phpスクリプトをインクルードする場合は、
{php}
include(“/path/to/includefile.php”);　//←詳細のコードは、こっちのPHPファイルに書ける。
{/php}

（Smartyマニュアルより）

Comments (Close): 0
Trackbacks: 0

phpでそのページそのもののURLを所得→表示するコード

2008-09-18 (木)
PHP・PERL
PHP

このページのURLは何だろう？これが分かると、GETしたそのURLを変数として、色々使えそう。

てことで、そのページのURLを取得するPHPコード。

<?php

$thisURL=’http://’.htmlspecialchars($HTTP_SERVER_VARS['HTTP_HOST'],ENT_QUOTES).htmlspecialchars($HTTP_SERVER_VARS['REQUEST_URI'],ENT_QUOTES);

define(‘CONFIG_THIS_URL’,$thisURL);
echo CONFIG_THIS_URL;

?>

define以下は使用しないで、直接「　echo $thisURL;　」としてもOK。

Comments (Close): 0
Trackbacks: 0

ajaxのショッピングカート作成チュートリアル

2008-08-27 (水)
PHP・PERL
PHP | チュートリアル

http://nettuts.com/javascript-ajax/build-an-ajax-powered-shopping-cart/

別ウインドウで開くカッコイイショッピングカートです。

Comments: 0
Trackbacks: 0

インタラクティブでかっこいいフォームのインターフェイス

http://nettuts.com/javascript-ajax/build-a-top-panel-with-jquery/

ｄｅｍｏ：http://web-tan.forum.impressrd.jp/e/2008/08/22/3516

普段隠れているフォームがクリックすると、びよ～んと展開するという楽しいインターフェイス。
なんかのコンバージョンは、下がりそうだけど、ログインとかしてもらうには、楽しくていいかな。

チュートリアルにもなっているので、勉強するのもいいかも。

Comments: 0
Trackbacks: 0

CSS内でブラウザの条件分岐が出来る『Conditional-CSS』

http://www.conditional-css.com/index

このスクリプトでは、簡単なコードを追加するだけで、CSSファイル内の記述で、CSSの適用に条件分岐を利用してブラウザの振り分けができるようになります。

クロスブラウザ対策にGOODですね。

下記の3つのプラットフォームのスクリプトが同梱されています。

PHP: 1.1.php.0
C: 1.1.c.0
C#: 1.1.c#.0

構造はシンプル。使い方、詳細は上記サイトを見てみてください。

Comments: 0
Trackbacks: 1

PHPでQRコードを自動生成するライブラリとか。

例えば、ショッピングサイトを作成するときに、商品それぞれに携帯ページがあって、そのページへのQRコードを自動生成させたい場合などがあったりしますよね。
CMSなどでPCページに対応する携帯ページを自動生成してくれるサービスは多くありますが、大量のページ1つ1つにQRコードを作成するのは面倒、でも、QRコードをつけることで気に入った商品に再度アクセスしてもらえるチャンスは広がります。

そういうときにこんなプログラム。

【QRcode Perl CGI & PHP scripts ver. 0.50】

http://www.swetake.com/qr/qr_cgi.html

GDを使用してQR codeのpngまたはjpegイメージを出力する、またはいくつかの画像を配置してホームページ上でQR codeを表示する　perl CGIプログラム qr_img.cgi　（perl5,GDおよびGD.pmが必要）
GDを使用してpngまたはjpegイメージを出力するPHPスクリプト qr_img.php　（PHPおよびGDが必要）
他にlibpng/jpeg-6bが必要

の２つが同梱されています。
PHPのほうが他のプログラムと連携させたり、カスタマイズしやすく、様々な方が拡張機能のPHPを公開されていますので、基本、こちらを使用したいと思います。

動作確認環境: Linux 2.4.18
apache-1.3.27 + PHP-4.3.0(as apache module)
perl 5.6.1
GD 2.0.11
GD.pm 2.06

ページ最下部の「qr_img0.50g.tar.gz (930KB)」をダウンロードし、展開します。

qr_img0.50-+-perl–+- qr_img.cgi　(※CGIを利用する場合）
| +- qr_image.pl
| +- qr_html.pl
|
+-data -+- qrvV_N.dat
| +- rscX.dat
| +- qrvfrV.dat
|
+-image-+- qrvV.png
| +- b.png d.png
|
+-php — qr_img.php　(※PHPを利用する場合）

展開したファイルをサーバーにアップし、アップしたスクリプトに表示させたいQRコードのパラメータを渡します。詳細は、ＲＥＡＤＭＥを参照してください。

ホームページリンクを表示させる場合のパラメータの渡し方例：
<img src=”qr_img.php?d=<?=urlencode(http://www.bton.net46.net/)?>&e=M&s=3&t=j”>
メール送信させるときのパラメータの渡し方例（＝日本語を使う場合はSJISエンコード）：
lt;php?　$subject = urlencode(mb_convert_encoding(“おはよう”, “SJIS”));
$body = urlencode(mb_convert_encoding(“こんにちは”, “SJIS”));
?>
※先にPHPで変数を設定しておく
（DOCOMO）
<img src=http://www.bton.net46.net/wp-admin/qr_img.php?d=MATMSG:TO:bton@bton.net46.net;SUB:<?=$subject?>;BODY:<?=$body?>;;&e=M&s=3&t=j />
（AU,SOFTBANK)
<img src=”qr_img.php?d=MATMSG:TO:bton@bton.net46.net;SUB:<?=$subject?>;BODY:<?=$body?>;;&e=M&s=3&t=j”>

PHPで値を取り出すときのスクリプトとパラメータは下記参照してください。

メソッド	説明
set_qrcode_version(int z)	ＱＲコードのバージョンを設定します。指定できる値は0または1～40の整数です。なお0を指定すると「自動設定」となります。
int get_qrcode_ersion()	ＱＲコードのバージョンを取得します。バージョン設定を自動にした時の結果を取得できます。 0が返ってきた場合は「自動設定」です。
set_qrcode_error_correct(string ecc_char)	ＱＲコードのエラー訂正レベルを設定します。指定できる値は”L”,”M”,”Q”,”H”の４種類で省略した場合 M が選択されます。
string cal_qrcode(string data)	与えられたデータ列 data についてＱＲコードmodel2に変換し(0,1,\n)で構成された二次元コードテキストデータを出力します。ここで出力されるデータはクワイエットゾーンは加味されません。
set_module_size(int z)	ＱＲコードのバージョンを取得します。バージョン設定を自動にした時の結果を取得できます。 0が返ってきた場合は「自動設定」です。
int get_qrcode_version()	モジュールサイズを z に設定します。初期値は4です。
set_quietzone(int z)	クワイエットゾーンの幅を z に設定します。初期値は4です。
string qrcode_image_out(string org_data[,string image_type][,string filename])	URLエンコードされた文字列org_dataをＱＲコードに変換しimage_typeのイメージで出力します。 image_typeは’jpeg’または’png’を指定できます。省略した場合はpngになります。また第３引数にファイル名を指定した場合、そのファイルに出力を行います。
string image_out(string data [,string image_type][,string filename])	(0,1,\n)で構成されるＱＲコードテキストデータをimage_typeのイメージで出力します。 image_typeは’jpeg’または’png’を指定できます。省略した場合はpngになります。また第３引数にファイル名を指定した場合、そのファイルに出力を行います。

参考サイト：

Comments: 0
Trackbacks: 0

MySqlのDBデータをエクセルのように書き換えるAjax＋PHP『DrasticGrid』

2008-08-01 (金)
PHP・PERL
AJAX | DB編集 | GOOGLEMAP | MYSQL | PHP | タグクラウド | データベース | マッシュアップ

http://www.drasticdata.nl/DDDrasticGrid.php

データベース内の登録情報（例えば商品IDや価格など）をちょっと変更したいときに、ブラウザ上で、エクセルを編集するような操作で編集が出来るようにするツールコードです。

こちらのドラスティックシリーズ（？）には、GOOGLEMAPとのマッシュアップやタグ食らうどのツールもダウンロードできるようになっており、例えば、GOOGLEMAPで設定した位置情報に関するタグクラウドとDB情報を一緒に表示させて、その場で編集、などということも可能です。

詳しくは、サイト内のEXAMPLEを見ていただければ、なるほどな、と思っていただけるのではないでしょうか。

Comments: 0
Trackbacks: 0

JSでインタラクティブにグラフ表示『ProtoChart』

http://www.deensoft.com/lab/protochart/index.php

JavaScript（PROTOTYPE.JS）で図のようにグラフィカルでインタラクティブなグラフが描けます。

オープンソースのコードがダウンロードできます。

Comments: 0
Trackbacks: 0

ツールチップのクールな実装サンプル色々prototip.js

http://www.nickstakenburg.com/projects/prototip2/

ツールチップは、リンクにマウスオーバーすると、ぽこっと小さく説明が出てくる、そう、あれです。
フォームの入力注意書きやヘルプなんかにも使えそうですね。
結構なバリエーションがあるので、見ているだけでも面白いです。

Comments: 0
Trackbacks: 0

ニュースティッカー

Fantastic News Ticker Newsvine-like using Mootools
http://woork.blogspot.com/2008/07/fantastic-news-ticker-newsvine-like.html

ニュースが定期的にスクロールする、そう、アレです。

これって上手く使えば、MTとかWPのブログソフトで、該当するフィールドをカスタムフィールドにして、ニュース更新できますよね。

↓こちらは、CSSで実装するものです。

CSS Message Box collection

http://woork.blogspot.com/2008/03/css-message-box-collection.html

Comments: 0
Trackbacks: 0

マウスオーバー、クリックでメニューが展開するアコーディオンUI色々

2008-07-17 (木)
JavaScript
AJAX | CSS | JavaScript

【その１】
NETTUTS – Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous

AJAX＋CSSでメニューが縦に展開します。同一ウインドウでコンパクトにコンテンツを魅せたいときに。
デモあり。

【その２】
JavaScriptによる水平アコーディオンUI「Horizontal JavaScript Accordion」

こちらもAJAX＋CSSのアコーディオンメニューですが、横に展開します。＆うにゅーんとゴムを引っ張ったようなスムーススライドです。

【その３】
The CSS-Only Accordion Effect – CSSnewbie

こちらは、CSSのみで実装のアコーディオンUIです。解説も細かく（英語だけど）勉強にもなりますね。

【その他】

コンセプトは、同じですが、こんなに色々なデザインや動きがあるのね、ってくらい、色々あってどれも面白いです。

Comments: 0
Trackbacks: 0

3Dイメージがくりくり回るJS　その２：VIRTUAL GADJO

http://www.virtual-gadjo.com/mooVRotatingMenu.php

マウスカーソルを合わせるとクルクル回転するメニューが作れます。
こちらの動きも洗練されていて美しいです。

Comments: 0
Trackbacks: 0

くりくりイメージが回る&クリックで拡大3D Image Carousel

http://www.coswest.com/c/jquery/carousel3d/

Comments: 0
Trackbacks: 0

ファイルツリー構造を表示するためのAJAX「jQuery File Tree」

2008-07-11 (金)
JavaScript
AJAX | JavaScript

http://abeautifulsite.net/notebook.php?article=58#overview

折りたたみが可能なツリー構造を表示できる。

jQueryプラグインとして動作。
IE6/7, FF2/3, Safari3, Opera9 で動作確認。

Comments: 0
Trackbacks: 0

タブ式のスライドウィジェットを簡単作成できるjS「jFlow」

2008-07-11 (金)
PHP・PERL
CGI | JavaScript | PERL

kweansphere

単なるタブＵＩではなく、ページの切り替えにスライドアニメーション機能を加えたというもの。
利用にはjQueryが必要。

Comments: 0
Trackbacks: 0

ドコモのCSSをインラインに埋め込んでくれるPHPライブラリ「toInlineCSSDoCoMo」

2008-07-11 (金)
PHP・PERL
CGI | JavaScript | PHP | サイト制作 | 携帯

toInlineCSSDoCoMo.tar.gz

HTML::DoCoMoCSS　（こっちは元になったPERL版）

http://ke-tai.org/blog/2008/07/09/toinline/　（記事はこちら：KE-TAI.ORGさん参照）

インストールは簡単。

# pear install HTML_CSS

で、必要なPEARライブラリをインストールして、ダウンロードしたファイルを展開するだけ。
中に入っている「sample.php」にアクセスすれば、サンプルが表示されるらしい。

require_once ‘../lib/toInlineCSSDoCoMo.php’;

$document = file_get_contents(‘sample.html’);
try {
echo toInlineCSSDoCoMo::getInstance()->setBaseDir(‘./’)->apply($document);
} catch (RuntimeException $e) {
var_dump($e);
} catch (Exception $e) {
var_dump($e->getMessage());
}
?>

以下、仕様の説明。（ゆどうふブログさん（http://d.hatena.ne.jp/Yudoufu/20080709/1215626811）

toInlineCSSDoCoMoの仕様なんですが、はてブとかで「外部参照をインライン化」だと思ってる人とかがいるみたいなので言っとくと、外部参照だけじゃなくて内部参照のsytleタグもよしなにパースしてくれます。

外部参照やstyleタグ指定が複数あってもそれらを全てsytle要素に突っ込んでくれるので、定義が多段になってる状態でもきちんとできます。sytle要素が個別に定義してあるタグでも、ちゃんとマージします。

無論、class指定が複数記述してあっても、*1全部適用します。

また、パースし終わった外部参照・内部参照のlinkタグ・styleタグは除去されるので、通常ブラウザベースで開発を行っていても、ざっくりとしたデザインの確認に支障が出ることはありません*2。(除去されないと、専用エミュレータか実機での確認が必要)*3

あと子孫セレクタとかその辺は、結構ちゃんとやってくれます。ただ、ブログにも書いたとおり疑似クラスはa:link,・・・の4つしか対応してません。

一応、それらの疑似クラスは全部内部参照としてCDATAつけてstyleタグに突っ込むようになっています。*4

それ以外はDoCoMoではどのみち無効ということもあって無視しています。

このあたりは、携帯のCSSだし、元々あんまり使ってる人いないようなので、ひとまずざっくり仕様で。

Comments: 0
Trackbacks: 0

フォームのフリガナを自動入力させる「フリガナ自動変換スクリプト／AutoRuby.js」

ホームページ制作・運営のヒント(http://ceo.sourcelab.jp/archives/97)

JavaScriptでフリガナを自動入力させることができます。
フォームの入力で漢字いれてフリガナ入れてって、結構面倒です。

■設置の仕方
以下の2つのJavaScriptをダウンロードしてください。

prototype.js （ダウンロードページ）
auto_ruby.js　（ソースそのままダウンロード）

Head内に読み込みます。
<script type=”text/javascript” src=”prototype.js”></script>
<script type=”text/javascript” src=”auto_ruby.js”></script>

名前のフィールドのidを[name]に、フリガナのidを[ruby]にします。
ただし、フォームのあるページはUTF-8のみの対応です。
（読み込み時 charset=”Shift_JIS”で対応出来る？）

※auto_ruby.jsの上の方に、設定項目があります。
「ふりがな（ひらがな）」で表示したい場合は、var convFlag = 0;
「フリガナ（カタカナ）」で表示したい場合は、var convFlag = 1;
にして下さい。

サンプルファイル(ZIP)

Comments: 0
Trackbacks: 0

スクリプト系 Archive