月別アーカイブ: 2014年11月

複数RSS の取得と一覧表示

普段は RSS の取得は PHP で処理していますが、今回は以下の提案を頂きました。
「サブドメイン配下にある複数の Blog の RSS 一覧を HTML 拡張子で表示したい。」
それに合わせて今回はRSSの取得をやってみます。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                // Set URL
                var maxFeed = 10;
                var urls = [
                    'http://jsource.nakweb.com/?feed=rss2',
                    'http://jsource.nakweb.com/?feed=comments-rss2'
                ];

                // Get RSS
                var arrFeed = new Array();
                var cntFeed = 0;
                for ( var urlCnt = 0; urlCnt < urls.length; urlCnt++ ){
                    $.ajax({
                        url      : urls[urlCnt],
                        dataType : 'xml',
                        success  : function(xml) {
                            // Get Feed
                            $(xml).find('item').each(function(){
                                var title = $(this).find('title').text();
                                var link  = $(this).find('link').text();
                                var date  = $(this).find('pubDate').text();
                                // Date Format
                                date = getFormatDate(date);
                                // Set Array
                                arrCnt = arrFeed.length;
                                arrFeed[arrCnt] = new Array();
                                arrFeed[arrCnt]['date'] = date;
                                arrFeed[arrCnt]['feed'] = '<dl><dt><a href="' + link + '">' + date + '</a></dt><dd><a href="' + link + '">' + title + '</a></dd></dl>';
                            });
                            cntFeed++;
                            exeDispFeed();
                        },
                        error    : function() { // Error
                            //$('#disp_area').append('<p>Not Read Feed</p>');
                            cntFeed++;
                        }
                    });
                }

                // Feed Disp Function
                var exeDispFeed = function(){
                    // Feed Disp
                    if (cntFeed >= urls.length) {
                        // Sort
                        arrFeed.sort(function(a, b) {
                            return (a.date > b.date) ? -1 : 1;
                        });
                        // Disp
                        for ( var feedCnt = 0; feedCnt < arrFeed.length; feedCnt++ ){
                            if (maxFeed <= feedCnt) {
                                return;
                            }
                            $('#disp_area').append(arrFeed[feedCnt]['feed']);
                        }
                    }
                };

                // Day Format
                var getFormatDate = function(date){
                    var getDate  = new Date(date);
                    var year     = getDate.getFullYear();
                    var month    = getDate.getMonth() + 1;
                        month    = ('0' + month).slice(-2);
                    var day      = getDate.getDate();
                        day      = ('0' + day).slice(-2);
                    var dispDate = year + '/' + month + '/' + day + '/';
                    return dispDate;
                };

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 20px;
            }
            dd {
                margin-bottom    : 20px;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <ul id="disp_area"></ul>
        </div>

    </body>
</html>

sample

sample を開くと当サイトの Feed が一覧表示されます。
投稿とコメントの Feed です。
# コメントが余りにも無いんで「投稿」しか表示されていませんが(笑)

RSSを指定すると指定数分の URL からの情報を取得します。
一応投稿日付によって Sort して指定数までの Feed を表示します。

全部読みこんでから表示する必要もあるのでちょっと悩みましたが
こんな感じでどうでしょう。
apache の設定を変えても良かったんですが、これも良い感じではないでしょうか。

今度から Blog の投稿一覧はこれでも良い気がします。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 1 人中 1 人がこの 投稿 は役に立ったと言っています。

時間差で表示する文字列(2)

以前に時間差で表示する文字列を記述しました。
なぜなのかは不明ですが、最近意外と閲覧数が伸びています。
せっかくなので jQuery で書き直してみようと思います。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                $('#disp_area div').hide();
                $('#obj01').delay(1000).fadeIn().delay(1500).fadeOut();
                $('#obj02').delay(2000).fadeIn().delay(1500).fadeOut();
                $('#obj03').delay(3000).fadeIn().delay(1500).fadeOut();
                $('#obj04').delay(4000).fadeIn().delay(1500).fadeOut();

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin      : 50px;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">

            <div id="obj01">
                <p>Massage Line 01</p>
            </div>
            <div id="obj02">
                <p>Massage Line 02</p>
            </div>
            <div id="obj03">
                <p>Massage Line 03</p>
            </div>
            <div id="obj04">
                <p>Massage Line 04</p>
            </div>

        </div>

    </body>
</html>

sample

spmple では時間がを置いて四行の文字列が表示されるます。
内容的には前回と同じです。
それは余りにも手抜きなので、数秒後に文字列の非表示も行っています。

意外と閲覧数が多いのが分かったために書き直しを行いましたが、
ちょっと気分がすっきりしました。
今後も jQuery 以外のものに関しては書き直さないといけないなぁ・・・

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

親子間WindowでのDataを変更

最近は iframe を使用することも無いのかなと思っていましたが、
便利な plugin の幾つかで非常に上手く使用されています。
色んな tag を上手に使いたいものですね。
ということで今回は親子関係での Data のやり取りです。

■親Window

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                $('#m_m_change').click( function () {
                    nowTime = getNowTime;
                    $('#main_disp_time').html(nowTime)
                });

                $('#m_s_change').click( function () {
                    nowTime = getNowTime;
                    $('#sub_window').contents().find('#sub_disp_time').html(nowTime)
                });

                function getNowTime () {

                    getDate = new Date();

                    hours   = getDate.getHours();
                    minutes = getDate.getMinutes();
                    seconds = getDate.getSeconds();

                    return hours + ':' + minutes + ':' + seconds;

                }

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 20px;
            }

            iframe {
                border           : 2px solid #000000;
                background-color : #ccffcc;
            }

            #main_area{
                background-color : #ccccff;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <h1>Main Wondow</h1>
            <div id="main_disp_area" class="disp_area">
                <p>Main Window Disp Area</p>
                <p>Click Main Window</p>
                <button id="m_m_change">Change Main</button>
                <button id="m_s_change">Change Sub</button>
                <p>Now Time : <span id="main_disp_time"></span><p>
            </div>
            <iframe id="sub_window" src="sample_1089_sub.html">
        </div>

    </body>
</html>

■子Window(iFrame)

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                $('#s_m_change').click( function () {
                    nowTime = getNowTime;
                    parent.$('#main_disp_time').html(nowTime)
                });

                $('#s_s_change').click( function () {
                    nowTime = getNowTime;
                    $('#sub_disp_time').html(nowTime)
                });

                function getNowTime () {

                    getDate = new Date();

                    hours   = getDate.getHours();
                    minutes = getDate.getMinutes();
                    seconds = getDate.getSeconds();

                    return hours + ':' + minutes + ':' + seconds;

                }

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin           : 20px;
            }

            #sub_area{
                background-color : #ffcccc;
            }

        --></style>

    </head>
    <body>

        <div id="sub_area">
            <h1>Sub Window (iFrame)</h1>
            <div id="sub_disp_area" class="disp_area">
                <p>Sub Window Disp Area</p>
                <p>Click Sub Window</p>
                <button id="s_m_change">Change Main</button>
                <button id="s_s_change">Change Sub</button>
                <p>Now Time : <span id="sub_disp_time"></span><p>
            </div>
        </div>

    </body>
</html>

sample

今回の sample は親子関係のため HTML ファイルを 2つ使用しています。
親Window の button の内、一つは自ページ、もう一つは子ページへの時間表示を行います。
子Window の button も同様に、一つは自ページ、もう一つは親ページの時間変更です。

意外と簡単ですね。
特に子ページからの場合は parent での対応が出来るのは斬新です。
理屈では確かにその通りなんですけどね。
せっかくなら親から子への場合も同じようになれば良いのに・・・
とは若干思いましたが、まぁ、それは仕方ないですよね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

PHP/Ajax での認証機能

今回は簡単な認証機能用のフォーム作成です。
実際の認証処理は PHP で行うのですが、PHP で認証した後に内容を出力し
ajax で内容の入れ替えを行います。
まぁ、主となる部分が PHP で行う形なので、本ブログで扱う内容として
「適切なのかな・・・。」とは思いますが(笑)

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                $('#exeCheck').click( function () {
                    $.ajax({
                        type     : 'POST',
                        dataType : 'text',
                        url      : 'sample_110.txt',
                        data     : {
                                     id : $('#checkID').val(),
                                     pw : $('#checkPW').val()
                                   }
                    }).done(function(data) {
                        // ajax ok
                        $("#input_area").hide();
                        $("#disp_area").html(data).show();
                    }).fail(function(data) {
                        // ajax error
                        $("#disp_area").html('once more, please');
                    });
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #div {
                margin           : 20px;
            }
            
            #disp_area{
                display          : none;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="input_area">
                ID : <br />
                <input type="text" id="checkID" name="id"><br />
                PASSWORD : <br />
                <input type="password" id="checkPW" name="password"><br />
                <input type="button" id="exeCheck" name="submit" value="Submit">
            </div>
            <div id="disp_area">
            </div>
        </div>

    </body>
</html>

sample

sample では入力欄が2つあります。
ここで適正なID・PASSを入力してPHP 側での処理を行います。
本sample ではPHPを設定していないので何を入力しても正常となりますが(笑)

今回は WordPress にて特定のページだけ認証をしたいとの要望があったため
試験的に試してみました、この Blog では余り相応しくなかったかもしれませんね。

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

フリックでのサムネイル表示変更(2)

前回はサムネイル表示についてフリック対応しましたが、どこかぎこちないものでした。
他の人に見ていただくと、色々とアドバイスをいただけました。
今回はそのアドバイスのうち以下の内容を試してみようと思います。
「フリックしたときに一定(今回はサムネイル)の幅分づつ動かす」

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                $('#loop_area').bind({
                    'touchstart': function(eObj) {
                        this.touchX = event.changedTouches[0].pageX;
                        this.slideX = $(this).position().left;
                    },
                    'touchmove': function(eObj) {
                        eObj.preventDefault();
                        this.slideX = this.slideX - (this.touchX - event.changedTouches[0].pageX );
                    },
                    'touchend': function(eObj) {
                        var loopWidth = 220;
                        if (this.slideX > 0) {
                            $('#loop_area div:last-child').prependTo('#loop_area');
                            $('#loop_area').css({left:'-' + loopWidth + 'px'});
                            $('#loop_area').stop().animate({left:'' + 0 + 'px'}, 'slow', 'linear', function() {
                            });
                        } else {
                            $('#loop_area').stop().animate({left:'-' + loopWidth + 'px'}, 'slow', 'linear', function() {
                                $('#loop_area div:first-child').appendTo('#loop_area');
                                $('#loop_area').css({left:0});
                            });
                        }
                    }
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #thumb_area {
                top              : 50px;
                left             : 100px;
                width            : 660px;
                height           : 80px;
                overflow         : hidden;
                position         : relative;
            }

            #loop_area {
                width            : 2200px;
                position         : absolute;
            }

            #loop_area div {
                float            : left;
            }

        --></style>

    </head>
    <body>

        <div id="main_area">
            <div id="thumb_area">
                <div id="loop_area">
                    <div class="thumb_div"><img src="./icon_jpeg01.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg02.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg03.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg04.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg05.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg07.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg08.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg09.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg10.jpg"></div>
                    <div class="thumb_div"><img src="./icon_jpeg11.jpg"></div>
                </div>
            </div>
        </div>

    </body>
</html>

sample

sample はPC版では何も起きません スマホなどでは「フリック」をするとサムネイルの
表示を変更できます。
前回との違いはフリックするたびに一定の幅づつ移動しているところです。

一定の幅を移動すると前回までと比べて引き締まったように見えますね。
これなら満足できるかと思います、・・・私はですけどね(笑)

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 1 人中 0 人がこの 投稿 は役に立ったと言っています。