Flickrとのマッシュアップ！ (PopBoxとdhtmlxGrid) その２
こんにちは、JavaScript担当の竹村です。
前回に引き続き
『画像検索マッシュアップ - 僕のお気に入り』というサービスを作っていきます。
前回のおさらい
前回の記事は↓こちらです。
Flickrとのマッシュアップ！ (PopBoxとdhtmlxGrid) その１
タスクを下記のように挙げていました。
- [検索]をクリックすると、Flickr検索の画像検索APIを利用して画像検索を要求します
- レスポンスをHTMLに描画します
- この画像をクリックすると、PopBoxで大きく表示されます
- 表示された画像の[追加]をクリックすると、Myリストに追加できます
- [保存]すると、、、
このうちの 3番目のタスクでタイムアップとなってしまったので、
今回はタスク3, 4の PopBox と dhtmlxGrid について説明していき、
5以降のタスクを考える…という流れでいきましょう。
PopBoxの使い方
PopBoxはlightboxのような画像サムネイルから拡大画像を表示する
JavaScriptのライブラリの 1つです。
↓こちらの画像にPopBoxを仕込んであります (iFrameで表示しています。オリジナルはこちら)
上記のデモに記述したように imgタグを拡張して命令を埋め込みます。
指定しなければ、PopBoxのグローバル変数が使われるようになっています。
ソースは↓これだけです。
<script type="text/javascript" src="scripts/PopBox.js"></script>
<script type="text/javascript">
window.onload = initialize;
function initialize() {
// PopBoxのグローバル変数の設定
popBoxWaitImage.src = "images/spinner40.gif";
popBoxRevertImage = "images/magminus.gif";
popBoxPopImage = "images/magplus.gif";
}
</script>
<style type="text/css">
.PopBoxImageSmall {
border: none 0px white;
cursor: url("images/magplus.cur"), pointer;
}
.PopBoxImageLarge {
border: solid thin #CCCCFF;
cursor: url("images/magminus.cur"), pointer;
}
</style>
<body>
<img class="PopBoxImageSmall" alt=""
src = "samples/thm_d.jpg"
pbsrc = "samples/img_d.jpg"
pbCaption = "PopBoxのデモです☆写真はAdobe MAX Japanの入退証"
pbRevertText = "もう一度画像をクリックすると小さくなります"
onclick = "Pop(this, 100, 'PopBoxImageLarge')" />
initialize関数内の設定とCSSの定義は、画像のURLを指定し直しているだけです。
imgタグの各属性は↓このような意味があります。
- pbsrc … 拡大時の画像のURL
- pbCaption … 拡大時の画像の下に表示されていた文字
- pbRevertText … 拡大時の画像の上に表示されていた文字
- onclick … PopBoxの Pop メソッドを実行
…と、lightboxを設定するくらい簡単です。
その他、細かい設定が色々できます。
簡単な使い方と、設定については弊社のサイトで資料を作りましたのでご覧ください。
dhtmlxGridの使い方
dhtmlxGridはFlashのグリッド表示コンポーネントと同じようなものを
JavaScriptで実装したものです。。。FlashのDataGridをご存知ないですか?
それであれば、ExcelのようなものをWebで実装するためのライブラリと言えば
どなたでもピンとくるでしょう。ただ、ExcelとWeb Gridは結構似て非なるもので
単純に表の表示ができるもの、としてご理解ください。
dhtmlxGridはライセンス形態が無料版/有料版とあります。
「なんだ有料か。どうせ無料版は大したことないだろう？」と思うかもしれません。
とりあえず、↓こちらを見てみてください。
こちらのデモではすべて無料版のAPIを利用しています(iFrameで表示しています。オリジナルはこちら)
いかがでしょうか?
- XMLからの外部ソースのロード
- 直接的な値の変更
- マウスホバーの制御
- ドラッグ＆ドロップ
(FirefoxだとiFrame下ではダメでした。オリジナルをご覧ください) - Gridデータのソート
- Gridデータの書き出し
という機能が無料版でも実装可能なのです。
また、初期化に要するソースは↓これだけです。
<link rel="stylesheet" type="text/css" href="js/dhtmlxGrid/dhtmlxgrid.css">
<script type="text/javascript" src="js/dhtmlxGrid/dhtmlxcommon.js"></script>
<script type="text/javascript" src="js/dhtmlxGrid/dhtmlxgrid.js"></script>
<script type="text/javascript" src="js/dhtmlxGrid/dhtmlxgridcell.js"></script>
<script type="text/javascript" src="js/dhtmlxGrid/ext/dhtmlxgrid_drag.js"></script>
<script type="text/javascript">
window.onload = initialize;
function initialize() {
// DataGridを生成
goMyGrid = new dhtmlXGridObject('mygrid');
goMyGrid.imgURL = "js/dhtmlxGrid/imgs/";
goMyGrid.enableDragAndDrop(true); // デフォルトfalse
goMyGrid.enableRowsHover(true,'xhdr'); // デフォルトなし
goMyGrid.setHeader("id, 値");
goMyGrid.setInitWidths("100,250");
goMyGrid.setColAlign("right,left");
goMyGrid.setColTypes("co,ed");
goMyGrid.setColSorting("int,str");
goMyGrid.setColumnColor("white,white");
goMyGrid.init();
goMyGrid.addRow(0, 'A,hoge', 1);
goMyGrid.addRow(1, 'B,fuga', 2);
goMyGrid.addRow(2, 'C,foo', 3);
goMyGrid.addRow(3, 'D,bar', 4);
}
<body>
<div id="mygrid" width="325" height="240"></div>
これで生成したGridにdhtmlxGridが提供している豊富なAPIで操作しています。
ここでデモで実装した機能の他にも、表のCellをチェックボックス、ラジオボタン、
コンボボックスにしたり、画像表示や、リンク、HTMLタグをCell内で表示する
ことが無料版で実装できます。
こちらも、簡単な使い方と細かい設定とAPIについて、
弊社のサイトで資料を作りましたのでご覧ください。
次回以降の予定
次回は↓このタスクを実装してMylistを完成させましょう。
- Mylistに画像を登録する際に登録済みの場合は入れられないようにします
- Mylistから削除できるようにします
- Mylistを「保存」でサーバに内容を送信します
次回で今年最後の JavaScript つくるぶガイドですね。
このマッシュアップアプリも完成まであと少しなのでがんばります！
無事に完成しますように☆
最近のコメント