2008/03/12


結構見逃してる物多いなぁ。
jQuery: jqAlbumParser Plugin, parses out Flickr, Picasa clientside | The Book and the Cover
カッコイイ。
実装するのもそれ程難しくないしサイトの端っこにでも貼り付けても面白いかもしれない。
動作としては、jqAlbumParserがFlickrのFeedをパースする物で、それを表示する為のプラグインがjqGalViewIIとの事。
よってコードは <style media="all">
@import url("/path/to/css/jqGalViewII.css");
</style>
<script type="text/javascript" src="/path/to/javascript/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/javascript/jqAlbumParser.js"></script>
<script type="text/javascript" src="/path/to/javascript/jqGalViewII.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".jqAlbumParser").jqAlbumParser({
        pluginExec : function(){$(this).jqGalViewII();}
    }).click();
});
</script>
<a href="http://api.flickr.com/services/feeds/photos_public.gne?ids=YOUR_FLICKR_ID"
    class="jqAlbumParser wa:flickr">my flickr feed</a>
 こんな感じ。「$(document).ready」を使わず実行したいならば「.click()」の所を「.trigger('load')」にすれば自動で表示される。
アンカーのクリックアクションで動作させたいならば、何も指定しないか「.trigger('click')」で行けます。
またfeedのURLの最後に「&tags=XXXX」とすれば、そのタグで絞り込める。簡単なソースで結構リッチなアルバムビューワが出来るって凄いなぁ。

以下、私のflickrで実行した例

続きを読む...

Posted at by




id:miyagawa氏のはてなブックマークからyowlという物を見つけました。
yowl - Google Code
yowlとは、Mac OS X上で実装されている通知システムのアプリケーション実装「Growl」をYahooライブラリYUIを使ってWeb実装した物です。
さっそくダウンロードして使ってみましたが、やっぱりYUIは良く出来てますね。
Windows用にシステムトレイ常駐の通知アプリケーションと連携すれば、Webからデスクトップアプリケーションとして何かしらを通知出来るという事になります。
通知時のアクションが決められれば、夢の広がるアプリケーションになるでしょうね。
今日はサンプルとして、以前つくった「はてブでアーーーーッ!!!」をYOWLでやってみたいと思います。

少し色を付けて、JSDeferredとjQueryを使い、del.icio.usとパラレルで動かそうかと思いましたが、あまり面白くないのでやめて、結局JSDeferredのcall/waitのみ使わせて頂いています。

実行結果、ソースは以下から...

続きを読む...

Posted at by




jQueryらくちんでいいや。
jQueryのCycleプラグインで遊んでみました。
まずソース
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://www.malsup.com/jquery/cycle/jquery.cycle.all.js"></script>
<style type="text/css"><!--
#devilman {
  width: 272px; height: 352px;
  padding:0; margin:0;
  overflow: hidden;
}
#devilman img {
  width: 240px; height: 320px;
  padding: 15px;
  border: 1px solid #ccc; background-color: #eee;
  top:0; left:0
}
#devilman_serif {
  width: 240px; padding: 15px;
  border: 1px solid #ccc; background-color: #eee;
  top:0; left:0;
  margin-top:10px;
  font-family: Verdana; font-size: 12px;
}
--></style>
<script type="text/javascript"><!--
$(document).ready(function(){
  $('#devilman').cycle({ 
    fx: 'scrollUp', 
    click: '#devilman img', 
    timeout: 0,
    before: function(next, curr) {
      $('#devilman_serif').html('<img src="http://www.ac.cyberhome.ne.jp/~mattn/images/ajax-loader.gif" alt="loading...">');
    },
    after: function(next, curr) {
      curr.title = curr.alt.replace(/<[^>]*>/g,'');
      $('#devilman_serif').html(curr.alt);
    }
  });
});
--></script>
</head>
<body>
<div id="devilman">
    <img class="devilman_slide" src="http://farm2.static.flickr.com/1405/601557689_5d0a1304a8.jpg?v=0" width="240" height="320" alt="誰も知らない。<br />知られちゃいけない。<br />デビルマンが誰なのか。" /> 
    <img class="devilman_slide" src="http://farm2.static.flickr.com/1146/601557811_0591344b9d.jpg?v=0" width="240" height="320" alt="何も言えない、話しちゃいけない。<br />デビルマンが誰なのか。<br />人の世に愛があり、<br />人の世に夢がある。<br />その美しい物を守りたいだけ。" /> 
    <img class="devilman_slide" src="http://farm2.static.flickr.com/1398/601842094_322d292a58.jpg?v=0" width="240" height="320" alt="今日もどこかでデビルマン。<br />今日もどこかでデビルマン。" /> 
</div>
<div id="devilman_serif"></div>
</body>
</html>
 画像を3枚使い、clickイベントにてスライドしています。beforeコールバックでajaxローディング画像を、afterコールバックで表示したimgのtitleをメッセージ表示用のdivにコピーしています。 jQueryならこんな簡単に出来ちゃうんすよね。
で、ふと思った。jQueryってFLTKに似てる。もちろんFLTKのコールバックはaddEventListenerじゃないけど、なんか $('#btn').click(function() {alert('ok!');});
 で、コールバックが書ける所がカッコイイ。
ちなみにFLTKでウィンドウとボタンを出すだけのアプリケーションならば、こんな感じ。 #include <stdio.h>
#include <fltk/run.h>
#include <fltk/Window.h>
#include <fltk/Button.h>

void button_cb(fltk::Widget *, void *) {
  printf("clicked!\n");
}

int main(int argc, char* argv[]) {
  fltk::Window *window = new fltk::Window(200, 200);

  window->begin();
  fltk::Button *button= new fltk::Button(20, 20, 160, 160, "click me");
  button->callback(button_cb, 0);
  window->end();

  window->show(argc, argv);
  return fltk::run();
}
 ポインタ使わず書いたら、もっとそれっぽい。
#include <stdio.h>
#include <fltk/run.h>
#include <fltk/Window.h>
#include <fltk/Button.h>

void button_cb(fltk::Widget *, void *) {
  printf("clicked!\n");
}

int main(int argc, char* argv[]) {
  fltk::Window window(200, 200);

  window.begin();
  fltk::Button button(20, 20, 160, 160, "click me");
  button.callback(button_cb, 0);
  window.end();

  window.show(argc, argv);
  return fltk::run();
}
 話を戻して、javascriptの実行結果は↓

続きを読む...

Posted at by