2010年01月30日

jQuery:モーション付きスライドショーにコメントも入れられる。

jQueryにて、s3slider.jsを用いることでモーション付きスライドショーにコメントを入れることが出来ます。
コメントの出る場所や時間を設定することが出来ます。

サンプル

○s3slider.js

ダウンロード


○js部分

$(document).ready(function() {
    $('#s3slider').s3Slider({
        timeOut: 4000
    });
});


○HTML部分

<div id="s3slider">
    <ul id="s3sliderContent">
        <li class="s3sliderImage">
            <img src="images/1.jpg" />
            <span class="bottom">nakano text comes here</span>
        </li>
        <li class="s3sliderImage">
            <img src="images/2.jpg" />
            <span class="left">Your text comes here</span>
        </li>
        <li class="s3sliderImage">
            <img src="images/3.jpg" />
            <span class="left">Your text comes here</span>
        </li>
        <div class="clear s3sliderImage"></div>
    </ul>
</div>

○css部分

#s3slider {
   width: 720px; /* important to be same as image width */
   height: 480px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
   width: 720px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 980px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
}

.top {
    top: 0;
    left: 0;
}
.bottom {
    bottom: 0;
    left: 0;
}
.left {
    top: 0;
    left: 0;
    width: 110px !important;
    height: 480px;
}
.right {
    right: 0;
    bottom: 0;
    width: 90px !important;
    height: 490px;
}
2010年01月23日

jQueryでページング。

jQueryを用いてスムーズなページングをします。
メインHTML、id="content"の部分に"data1.html"のid="content"内の内容を読み込みます。

サンプルは近々公開します。


○スクリプト部分

$(function(){
   
    $("#content").load($("ul.pager li a:first").attr("href")+" #content");
    $("ul.pager li a:first").addClass("selected");
   
    $("ul.pager li a").click(function(){
       
        $("#content").html('<p class="loading"><img src="images/loading.gif" alt="" /></p>');
       
        $("#content").data("file",$(this).attr("href"));
       
        $('html,body').animate({ scrollTop: $("h1").offset().top-20 }, 'slow','swing',function(){
            $("#content").load($("#content").data("file")+" #content");
        })
       
        $("ul.pager li a").removeClass("selected");
        $(this).addClass("selected");
        return false;
    })

○メインのHTML

<div id="container">
   
    <h1><img src="images/header.jpg" alt="新着書籍" /></h1>
   
    <div id="content">
        <p class="loading"><img src="images/loading.gif" alt="" /></p>
    </div>
   
    <ul class="pager">
        <li><a href="data1.html">1</a></li>
        <li><a href="data2.html">2</a></li>
        <li><a href="data3.html">3</a></li>
    </ul>
   
</div>

data1.html

<!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" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>data1</title>
    </head>
    <body>
        <div id="content">
            <div class="colmun">
                <div class="img">
                    <a href="http://asciimw.jp/search/?isbn=978-4-04-868064-6">
                        <img height="80" width="56" alt="" src="./images/978-4-04-868064-6s.jpg"/>
                    </a>
                </div>
                <div class="info">
                    <h2>HALLO</h2>
                    <ul>
                        <li>日付 : 2009/11/06</li>
                        <li>名前 : 佐藤タロウ</li>
                        <li>年齢 : 25歳</li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>


○css部分

#container{
}

p.loading{
    text-align:center;
    margin:10px;
}
ul.pager{
    text-align:center;
    padding: 0 10px 0 10px;
}
ul.pager li{
    display:inline;
}
ul.pager li a{
    border:1px solid #666666;;
    color:#666666;;
    font-weight:bold;
    margin:2px;
    padding:5px;
    text-decoration:none;
}
ul.pager li a.selected{
    background:#EEEEEE;
}

2010年01月22日

google Ajax feed readerリリース!!

google Ajax feed readerをリリースしました!!
自社ホームページの「最新エントリー」としてgoogle Ajax feed readerを使い、社員ブログの更新エントリーを表示しています。

コチラ-> iret

どうやら更新から反映までなかなかのタイムラグがあるようです。
10分とか。。。
2010年01月20日

iPhoneアプリの構築を容易に「appOmator」

879115c4.jpg

 NonLinear Softwareは、カリフォルニア州アナハイムで先週開催されたNational Association of Music Merchants(NAMM)の音楽発表会において、新製品の「appOmator」を発表した。

 とりわけ音楽業界の多くの人々および企業は、10万以上のアプリを誇る「App Store」に、自らの作品を追加してチャンスを見出そうとしている。しかしながら、各企業の目標や個人の趣味に合ったアプリの作成は、必ずしも容易ではない。複数のウェブサービスがアプリを構築するためのテンプレートを提供している中で、NonLinear SoftwareがMac向けにリリースするappOmatorでは、アプリの完全なカスタマイズが可能である。

 ユーザーはappOmatorを用いて、バックグラウンド画像やメニュートランジションにカスタムグラフィックスを追加したり、自作アプリ内にボタンを作成したりすることができる。ユーザーは音楽、動画、画像、チャプターインデックスマーカーを有するトラックにリンクすることができ、メディアファイル内の特定の場所へとユーザーを誘導することが可能になる。

 アプリが完成したら、appOmatorのウェブサイトへそのアプリをアップロードすると、その後の処理が行われる。そして、料金を払って処理済みのアプリをダウンロードし、iPhoneの開発者アカウントを用いて、App Storeの承認プロセスへと作成アプリを提出することができる。また、月額料金を支払えば、この承認プロセスもappOmatorに依頼できるオプションを選択できる。

 appOmatorは2月初めにリリースされる予定となっている。同アプリのダウンロードは無料だが、処理されたiPhoneアプリには課金される。

課金がどれほどのものかわからないが安価で簡易的にアプリを制作することが出来るのであれば楽しみですね。
ちょっとしたアイデア物なんかをさくっとリリース出来たら面白いかも。

google Ajax feed readerについて

google Ajax feed readerは、コチラからアカウント登録を行い、ブログを登録し、公開するHTMLに簡単なソースを記述するだけでOKなのです。


フィードリーダーは大きく3つに区分されます。

・クライアント(インストール)型フィードリーダー
パソコンにインストールして使うフィードリーダー (Firefoxのライブブックマーク・goo RSSリーダーなど)

・Web型フィードリーダー
Web上で提供されているフィードリーダー。ブラウザからアクセスして使う。 (Google Reader・livedoor readerなど)

・サーバー(インストール)型フィードリーダー
自前のサーバーにインストールして、ブラウザからアクセスして使うフィードリーダー。 (フレッシュリーダー)

Google ReaderはいわゆるWeb型フィードリーダーです。Web型フィードリーダーは大量のフィードを購読するのに適しています。


○サンプルソース

・Ajax部分

<script type="text/javascript">

google.load("feeds", "1");

function initialize() {
var feed = new google.feeds.Feed("フィーダーから出力したURL");
feed.setNumEntries(15);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var pdate = new Date(entry.publishedDate);
var pday = pdate.getUTCDate();
var pmonth = pdate.getUTCMonth() + 1;
var pyear = pdate.getUTCFullYear();
if (pday < 10) { pday = "0" + pday; }
if (pmonth < 10) { pmonth = "0" + pmonth; }
var strdate = pyear + "." + pmonth + "." + pday;
var dt = document.createElement("dt");
dt.appendChild(document.createTextNode(strdate));
container.appendChild(dt);

container.innerHTML += "<dd><a href='" + entry.link + "'>" + entry.title + "</a></dd>";

}
}
});
}
google.setOnLoadCallback(initialize);

</script>

・HTML部分

<dl class="rss">
<span id="feed"></span>
</dl>