「HOME」に「日付・曜日・時刻」を表示「HOME Watch」（2）/ JavaScript

デフォルトデザインの「HOME」画面にも対応 

「HOME Watch」は、「Ameblo Management」のアレンジ下の「HOME」画面に配置する事がお勧めです。 デフォルトの「HOME」画面のデザインでは、ユーザーのプロフィールアイコンに年度の表示が重なるかも知れません。

この点が少し気になっていたのですが、「年度」の表示は省略しても良い場合が多いと思われるので、下の3種の表示デザインを選択出来る様にしました。

「HOME Watch」のデザインを切り換える 

◎ 全てを表示するデザイン

◎「年度」を省略したデザイン

◎ 「年度」「秒」を省略したデザイン

●「HOME Watch」の表示部を「左Click」すると順にデザインが変わります。

▪ デザインの指定は Cookieに登録され、次に変更するまで保持されます。

下は、デザインを切り換える様子です。

「Ameblo Management」のページデザインに合わせています 

「HOME Watch」は、デフォルトの「HOME」画面でも使えますが、表示の配置は「Ameblo Management」のページデザイン（上図）を前提にしています。 このアレンジが無い場合は、表示位置がユーザーアイコンに少し重なります。

「Ameblo Management」は、「HOME」「管理画面」「ブログページ」等のアメーバブログの各種の画面をユーザーライクにアレンジします。 これは「Stylus」という優れた拡張機能を利用しますが、以下のページに導入手順を説明しています。

「ブログ管理 / 設定・管理」のフォントサイズを改善 / Ameblo Management

「HOME Watch」を利用するには

このツールは Chrome / Edge / Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。

❶「Tampermonkey」を導入します

◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。

既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。 

拡張機能の導入については、以下のページに簡単な説明があるので参照ください。

⭕「Tampermonkey」の導入方法

❷「Tampermonkey」にスクリプトを登録します

◎「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。

◎「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 下のコードをコピー&ペーストします。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

◎ 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。

〔 HOME Watch 〕 ver. 0.2

// ==UserScript==
// @name         HOME Watch
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  HOME画面専用の日付曜日時計表示
// @author       Ameba Blog User
// @match        https://www.ameba.jp/home
// @icon         https://www.google.com/s2/favicons?sz=64&domain=ameba.jp
// @noframes
// @grant        none
// ==/UserScript==


let w_size=0; // 表示の横幅

let w_cookie_siz=get_cookie('HOME_w');
if(w_cookie_siz){ // Cookieの更新
    w_size=w_cookie_siz;
    document.cookie='HOME_w='+w_size+'; Max-Age=2592000'; }



let retry=0;
let interval=setInterval(wait_target, 100);
function wait_target(){
    retry++;
    if(retry>100){ // リトライ制限 100回 10secまで
        clearInterval(interval); }
    let target=document.querySelector('.HomeUserProfile > a');
    if(target){
        clearInterval(interval);
        setTimeout(()=>{
            set_watch(target);
        }, 200); }}


function set_watch(target){
    let watch_=
        '<div id="h_watch"><span class="h_disp"></span>'+
        '<style>#h_watch { font: bold 16px Meiryo; color: #888; height: 0; text-align: right; '+
        'position: relative; top: -90px; right: 2px; cursor: pointer; } '+
        '#h_watch:hover .h_disp { background: #bcdcea; } '+
        '.h_disp .y, .h_disp .d { margin-right: 8px; } .h_disp .m { margin-right: 2px; } '+
        '.h_disp .w { margin-right: 12px; } .h_disp .dd { margin: 0 2px; } '+
        '</style></div>';

    if(!document.querySelector('#h_watch')){
        target.insertAdjacentHTML('afterend', watch_ ); }



    set_type();

    let time_d=setInterval(disp_watch, 1000);

} // set_watch()



function set_type(){
    let h_watch=document.querySelector('#h_watch');
    if(h_watch){
        h_watch.onclick=function(event){
            event.preventDefault();
            if(w_size==0){
                w_size=1; }
            else if(w_size==1){
                w_size=2; }
            else if(w_size==2){
                w_size=0; }
            disp_watch();
            document.cookie='HOME_w='+w_size+'; Max-Age=2592000'; }}

} // set_type()



function disp_watch(){
    let h_watch=document.querySelector('#h_watch');
    let now=new Date();

    if(h_watch && h_watch.querySelector('.h_disp')){
        h_watch.querySelector('.h_disp').remove();
        h_watch.insertAdjacentHTML('afterbegin', get_d(now)); }


    function getdouble(number){
        return ("0" + number).slice(-2); }

    function get_d(time){
        let Year=time.getFullYear();
        let Month=time.getMonth()+1;
        let Date=time.getDate();
        let Wday=time.getDay();
        let Hour=getdouble(time.getHours());
        let Min=getdouble(time.getMinutes());
        let Sec=getdouble(time.getSeconds());

        // Dateオブジェクトは曜日を0から6で保持しているため、変換
        let WeekJP=["日", "月", "火", "水", "木", "金", "土"];

        let h_display;

        if(w_size==0){
            h_display=
                '<span class="h_disp">'+
                '<span class="y">'+ Year +'年</span>'+
                '<span class="m">'+ Month +'月</span>'+
                '<span class="d">'+ Date +'日</span>'+
                '<span class="w">'+ WeekJP[Wday] +'曜</span>'+
                Hour +'<span class="dd">:</span>'+
                Min +'<span class="dd">:</span>'+
                Sec +'</span>'; }

        else if(w_size==1){
            h_display=
                '<span class="h_disp">'+
                '<span class="m">'+ Month +'月</span>'+
                '<span class="d">'+ Date +'日</span>'+
                '<span class="w">'+ WeekJP[Wday] +'曜</span>'+
                Hour +'<span class="dd">:</span>'+
                Min +'<span class="dd">:</span>'+
                Sec +'</span>'; }

        else if(w_size==2){
            h_display=
                '<span class="h_disp">'+
                '<span class="m">'+ Month +'月</span>'+
                '<span class="d">'+ Date +'日</span>'+
                '<span class="w">'+ WeekJP[Wday] +'曜</span>'+
                Hour +'<span class="dd">:</span>'+
                Min +'</span>'; }

        return h_display;

    } // get_d()

} // disp_watch()



function get_cookie(name){
    let cookie_req=document.cookie.split('; ').find(row=>row.startsWith(name));
    if(cookie_req){
        if(cookie_req.split('=')[1]==null){
            return 0; }
        else{
            return cookie_req.split('=')[1]; }}
    if(!cookie_req){
        return 0; }}

「HOME Watch」最新版について 

旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。

●「HOME Watch」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。

スクリプトツール 　最新バージョン・リンク一覧表 （ツール名順）