【ココログ】メンテナンス・障害情報を表示するスクリプト

サイドバーに表示される『ココログからのお知らせ』だと、現状、メンテナンス／障害情報があわせて1件しか表示されず、いまいち不便に思えるので、個人的にメンテナンスと障害情報をそれぞれ独立して表示するスクリプトを試作してみました。

メモタイプのマイリスト(リストの名前は適当に『ココログ障害情報』とでも)を作成し、下記のスクリプトを貼り付けます。

<div id="cocoTrouble">

<div id="cocoTrouble-maintenance-info">
<div class="cocoTroubleTitle"><a href="http://support.nifty.com/support/cs/maintenance/supinfo/cocolog/1.htm">メンテナンス情報</a></div>
<div class="cocoTrouble-update" id="cocoTrouble-update-maintenance" style="display:none;"></div>
<ul id="cocoTrouble-maintenance"></ul>
</div><!-- id="cocoTrouble-maintenance-info" -->

<div id="cocoTrouble-trouble-info">
<div class="cocoTroubleTitle"><a href="http://support.nifty.com/support/cs/trouble/supinfo/cocolog/1.htm">トラブル情報</a></div>
<div class="cocoTrouble-update" id="cocoTrouble-update-trouble" style="display:none;"></div>
<ul id="cocoTrouble-trouble"></ul>
</div><!-- id="cocoTrouble-trouble-info" -->

</div><!-- id="cocoTrouble" -->


<script type="text/javascript" src="https://furyu.tea-nifty.com/script/cocoTrouble.js"></script>

<script type="text/javascript" >

// 表示期間(終了日時からの時間(hours))
cocoTrouble.newperiod.trouble=24; // トラブル用
cocoTrouble.newperiod.maintenance=24; // メンテナンス用

// 情報無しの場合表示する文字列 
cocoTrouble.notrouble.trouble='ありません。'; // トラブル用
cocoTrouble.notrouble.maintenance='ありません。'; // メンテナンス用

cocoTrouble.init() ;
</script>

<!--旧版ソース-->
<div id="cocoTrouble">

<div id="cocoTrouble-maintenance-info">
<div class="cocoTroubleTitle"><a href="http://support.nifty.com/support/cs/maintenance/supinfo/cocolog/1.htm">メンテナンス情報</a></div>
<div class="cocoTrouble-update" id="cocoTrouble-update-maintenance" style="display:none;"></div>
<ul id="cocoTrouble-maintenance"></ul>
</div><!-- id="cocoTrouble-maintenance-info" -->

<div id="cocoTrouble-trouble-info">
<div class="cocoTroubleTitle"><a href="http://support.nifty.com/support/cs/trouble/supinfo/cocolog/1.htm">トラブル情報</a></div>
<div class="cocoTrouble-update" id="cocoTrouble-update-trouble" style="display:none;"></div>
<ul id="cocoTrouble-trouble"></ul>
</div><!-- id="cocoTrouble-trouble-info" -->

</div><!-- id="cocoTrouble" -->

<script type="text/javascript" >
<!--
var cocoTrouble = {
//  ===
    newperiod       :   {   /* 表示期間(終了日時からの時間(hours))  */
        trouble         :   48
    ,   maintenance     :   24
    }
,   notrouble       :   {   /* 情報無しの場合表示する文字列 */
        trouble         :   'ありません。'
    ,   maintenance     :   'ありません。'
    }
//  ===
,   info            :   new Array()
//  ===
,   loadComplete    :   function ( kind ) {
        var list = document.getElementById('cocoTrouble-'+kind) ;
        if ( !list ) return false ;
        var printInfo = '' ;
        for ( var ci=0; ci < this.info[kind].data.length-1; ci++ ) {
            var info = this.info[kind].data[ci] ;
            var now = (new Date()).getTime() ;
            var todate = Date.parse(info.to) ;
            if ( isNaN(todate) == true || ( this.newperiod[kind] && (now-todate) < (this.newperiod[kind]*60*60*1000) ) ) {
                var content = info.content ;
                content = content.replace(/<font.*<\/font>/g,'') ;
                content = content.replace(/<br[^>]*>/g,'') ;
                content = content.replace(/左記/g,'上記') ;
                printInfo += [
                    '<div class="' + ( ((isNaN(todate)==true)||(0<=(todate-now))) ?'cocoTroubleDate':'cocoTroubleDatePassed' ) + '">'
                ,   info.from
                ,   '～'
                ,   info.to
                ,   '</div>'
                ,   '<div class="cocoTroubleContent">' + content + '</div>'
                ].join('\n') ;
            }
        }
        var listObj = document.createElement('li') ;
        if ( printInfo != '' ) {
            listObj.innerHTML = printInfo ;
        }
        else if ( this.notrouble[kind] ) {
            listObj.innerHTML = this.notrouble[kind] ;
        }
        list.appendChild(listObj) ;
        
        var div = document.getElementById('cocoTrouble-update-'+kind) ;
        if ( div && this.info[kind].update ) {
            var txtObj = document.createTextNode('Update: ' + this.info[kind].update) ;
            div.appendChild(txtObj) ;
        }
        return true ;
    }   //  end of loadComplete()
//  ===
,   loadScript      :   function ( src, charset ) {
        var scriptStr = [
            '<scr' + 'ipt type="text/javascript" '
        ,   'charset="' + ((charset)?charset:'utf-8') + '" '
        ,   'src="' + src + '"></scr' + 'ipt>'
        ].join('') ;
        document.write( scriptStr ) ;
    }   //  end of loadScript()
//  ===
,   init            :   function () {
        this.loadScript( "http://homepage3.nifty.com/furyu/cocoMaintenance.js?reload=" + (new Date).getTime() ) ;
        this.loadScript( "http://homepage3.nifty.com/furyu/cocoTrouble.js?reload=" + (new Date).getTime() ) ;
    }   //  end of init()
}   //  end of cocoTrouble object definition

cocoTrouble.init() ;

//-->
</script>

<div id="cocoTrouble">

<div id="cocoTrouble-maintenance-info">
<div class="cocoTroubleTitle"><a href="http://support.nifty.com/support/cs/maintenance/supinfo/cocolog/1.htm">メンテナンス情報</a></div>
<div class="cocoTrouble-update" id="cocoTrouble-update-maintenance" style="display:none;"></div>
<ul id="cocoTrouble-maintenance"></ul>
</div><!-- id="cocoTrouble-maintenance-info" -->

<div id="cocoTrouble-trouble-info">
<div class="cocoTroubleTitle"><a href="http://support.nifty.com/support/cs/trouble/supinfo/cocolog/1.htm">トラブル情報</a></div>
<div class="cocoTrouble-update" id="cocoTrouble-update-trouble" style="display:none;"></div>
<ul id="cocoTrouble-trouble"></ul>
</div><!-- id="cocoTrouble-trouble-info" -->

</div><!-- id="cocoTrouble" -->

<script type="text/javascript" >
<!--
var cocoTrouble = {
//  ---
    newperiod       :   {   /* 表示期間(終了日時からの時間(hours))  */
        trouble         :   48
    ,   maintenance     :   24
    }
,   notrouble       :   {   /* 情報無しの場合表示する文字列 */
        trouble         :   'ありません。'
    ,   maintenance     :   'ありません。'
    }
//  ---
,   info            :   new Array()
//  ---
,   loadComplete    :   function ( kind ) {
        var list = document.getElementById('cocoTrouble-'+kind) ;
        if ( !list ) return false ;
        var printInfo = '' ;
        for ( var ci=0; ci < this.info[kind].data.length-1; ci++ ) {
            var info = this.info[kind].data[ci] ;
            var now = (new Date()).getTime() ;
            var todate = Date.parse(info.to) ;
            if ( isNaN(todate) == true || ( this.newperiod[kind] && (now-todate) < (this.newperiod[kind]*60*60*1000) ) ) {
                var content = info.content ;
                content = content.replace(/<font.*<\/font>/g,'') ;
                content = content.replace(/<br[^>]*>/g,'') ;
                content = content.replace(/左記/g,'上記') ;
                printInfo += '<li><div class="cocoTroubleDate">' + info.from + '～' + info.to + '</div><div class="cocoTroubleContent">' + content + '</div></li>' ;
            }
        }
        if ( printInfo != '' ) {
            list.innerHTML = printInfo ;
        }
        else if ( this.notrouble[kind] ) {
            list.innerHTML = '<li>' + this.notrouble[kind] + '</li>' ;
        }
        var div = document.getElementById('cocoTrouble-update-'+kind) ;
        if ( div && this.info[kind].update ) {
            div.innerHTML = 'Update: ' + this.info[kind].update ;
        }
        return true ;
    }   //  end of loadComplete()
//  ---
,   loadScript      :   function ( src, charset ) {
        var callScript = document.createElement("script") ;
        callScript.type = "text/javascript" ;
        callScript.charset = ( charset ) ? charset : "utf-8" ;
        callScript.src = src ;
        var target = document.getElementById('cocoTrouble') ;
        if ( target ) {
            target.appendChild( callScript ) ;
        }
    }   //  end of loadScript()
//  ---
,   init            :   function () {
        this.loadScript( "http://homepage3.nifty.com/furyu/cocoMaintenance.js?reload=" + (new Date).getTime() ) ;
        this.loadScript( "http://homepage3.nifty.com/furyu/cocoTrouble.js?reload=" + (new Date).getTime() ) ;
    }   //  end of init()
}   //  end of cocoTrouble object definition

cocoTrouble.init() ;

//-->
</script>

このスクリプトでは、JavaScript形式に加工済のメンテナンス／トラブル情報をダウンロードして表示しています。
元情報は、@niftyの『ココログのメンテナンス情報』及び『ココログのトラブル情報』から、自宅サーバにて定期的に取得し、JavaScript形式に加工したあと、@niftyのホームページサーバ上にアップロードしています。

従って、自宅サーバでトラブルが発生すると更新されなくなります(汗)。

本当は『お知らせココログ』の情報が使えれば良いのですが、今ひとつ加工しにくいこともあって、このような形となっています。

ただ、@niftyのメンテナンス／トラブル情報は、お知らせココログのものよりも更新が遅れるようなのですね……うーむ。

■修正履歴

• [2008/12/20]
  
  1. 外部スクリプト化に伴う設置用スクリプト修正。
     外部スクリプト化した後、記事を修正するのをすっかり忘れていた……。
• [2007/01/24]
  
  1. 終了時刻が現在よりも前の場合、classを変えるように修正(cocoTroubleDate→cocoTroubleDatePassed)。
     newperiodを設定して過去の情報もしばらく表示するようにしている場合に属性(色等)を変えられるようにした。
  2. Firefoxで動作が不安定になるのを修正。
     スクリプト中で別の外部スクリプトを貼り付けたい場合、documentが閉じられる(onload状態)まではdocument.write()を、閉じられてからはappendChild()を、それぞれ使用した方が良い模様。
  3. loadComplete()内の処理で、既に存在する要素のinnerHTMLを直接変更していたのを、新規に作成した要素をappendChild()する形に修正。
     こうしておかないと、IE6で誤動作する可能性有り。