「Ameblo Neo Search」のデザインを「Stylus」なしで実現

「Ameba Search Repeat」は「Ameblo Management + Neo Search」のCSSアレンジをしたAmeba検索の画面を前提にしたスクリプトです。「Stylus」によるCSSアレンジは強力で、素早くCSS適用を行います。 また、何種ものデザインで構成されたAmeba検索の各ページを、細かく調整できます。

 

「Ameba Search Repeat / with CSS」は、Ameba検索画面をスクリプトでアレンジしますが、ブログ内検索以外の検索画面に関するアレンジは簡易版です。「Stylus」導入の手間が要らず便利ですが(それ故にEdgeで使用できる)、本当は「Stylus」の使用がお勧めです。

 

以下の機能は、「Stylus」を使用する「Ameba Search Repeat」でも、同時に更新しています。スクリプトの機能は、両者に差はありません。

 

 

ブログページトップに戻るスイッチを作りました 

「Neo Search」のデザインは、縦方向のコンパクト化に重きを置いているので、アメブロヘッダーを排除しています。 そのせいで、ブログページやホームに戻り難いので、今回はブログページに戻るスイッチを設置しました。「ブログ内検索」は「ブログページ」から入り、ブログページから再び検索に入る事が出来るので、戻り先は「ブログトップページ」が適当と考えました。

 

 

このトップに戻る機能は、デフォルトのAmeba検索には無い機能です。 ブログ内検索はURLに「ユーザーID」が含まれるので、スクリプトでIDを取り込んで、トップページのURL「https://ameblo.jp/USER-ID」を得ています。

 

 

 

「 ブログ内検索」の状態を明示

スクリプトで「ブログ内検索」の状態を維持して、検索語の変更や、絞り込みの再検索が繰り返しできる様にしています。 しかし、「xxx > xxx > xxx」形式のパンクズリストをクリックしたり、無効な検索語の指定で、「ブログ内検索」から出てしまう事があります。 その場合は検索窓が不自由なデフォルト状態に陥りますが、ブラウザの「⇦ 戻る」で「ブログ内検索」に戻れます。 ただ、「ブログ内検索」でなくても似た様な表示の検索カテゴリがあり、紛らわしいものです。

 

今回、「ブログ内検索」の状態かそうでない状態かを、タイトル自体で判り易く表示する様にしました。(最初の図)

下は、「ブログ内検索」を出て「すべて」→「もっと見る」で表示される画面です。この状態でもスクリプトは動作していて、既読マーク機能は使えます。

 

 

ただ、肝心の「連続検索」は出来ませんから、これを「ブログ記事」のタイトルで判断できる様にしたのです。

 

 

「Ameba Search Repeat / with CSS」ver. 1.5

「Ameba Search Repeat / with CSS」を利用するには、以下のスクリプトコードを「Tampermonkey」にコピー&ペーストして登録してください。 このツールは Chrome版 / Firefox版 / Edge版 の「Tampermonkey」で動作を確認しています。

 

●「Stylus」で「Ameblo Management / Neo Search」を使用している場合は、若干の表示崩れを生じます。「with CSS版」は「Stylus」が無い環境用です。

 

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

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

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

 

 

〔 Ameba Search Repeat / with CSS 〕ver. 1.5

// ==UserScript==
// @name         Ameba Search Repeat / with CSS
// @namespace    http://tampermonkey.net/
// @version      1.5
// @description  ブログ内検索の再検索を実行可能にする
// @author       Ameba Blog User
// @match        https://search.ameba.jp/*
// @match        https://search.ameba.jp/search/entry/*
// @run-at        document-start
// @grant         none
// ==/UserScript==


addEventListener('DOMContentLoaded', function(){

    let target=document.querySelector('body'); // 監視 target
    let monitor=new MutationObserver(catch_env);
    monitor.observe(target, {childList: true}); // 検索待受け開始

    function catch_env(){
        if (document.location.href.indexOf("https://search.ameba.jp/search/entry/") ==0 ){
            in_view();
            search_next(); } // ブログ内検索の主要スクリプト
        else{
            out_view(); }}


    function search_next(){ // 検索結果ページごとにURLは更新される

        let blogDB={}; // 閲覧記事のID/チェックフラグの記録配列
        let entry_id_DB; // ID検索用の配列

        let read_json=localStorage.getItem('ASR_DB_back'); // ローカルストレージ 保存名
        blogDB=JSON.parse(read_json);
        if(blogDB==null){
            blogDB=[['ASR00000000', '0']]; }
        if(get_userid(0) !=null){
            blogDB[0]=['ASR00000000', get_userid(0) ]; } // スクリプト起動時に開いたユーザーIDを記録
        let write_json=JSON.stringify(blogDB);
        localStorage.setItem('ASR_DB_back', write_json); // ローカルストレージ 保存


        reg_set();

        function reg_set(){
            let k;
            entry_id_DB=[]; // リセット
            for(k=0; k<blogDB.length; k++){
                entry_id_DB[k]=blogDB[k][0]; }} // ID検索用の配列を作成


        list_set();

        function list_set(){
            let entrylist=[];
            let entrylink=[];
            let entryhref=[];
            let history=[];

            entrylist=document.querySelectorAll('.PcEntryListItem');
            for(let k=0; k<entrylist.length; k++){
                entrylink[k]=entrylist[k].querySelector('.PcEntryListItem >a');
                entryhref[k]=entrylink[k].getAttribute('href').slice(-16, -5);
                //     entrylink[k].setAttribute('target', '_blank'); // リストのクリックを別タブで開く設定
                mark(k);
                list_listen(k);
                hmark_listen(k); }


            function mark(k){
                history[k]=document.createElement('p');
                history[k].innerText='\u00A0';
                history[k].setAttribute('class', 'history');
                history[k].setAttribute('style', 'position: absolute; left: 10px; ' +
                                        'width: 14px; height: 14px; border-radius: 4px; background: #fff');
                if(entrylink[k].querySelector('.history')){
                    entrylink[k].querySelector('.history').remove(); }
                entrylink[k].appendChild(history[k]);

                let list_size=entrylink[k].getBoundingClientRect().height;
                let img_size=entrylist[k].querySelector('.UserThumbnail').getBoundingClientRect().height;
                let top=(list_size + img_size)/2 - 6;
                history[k].style.top=top + 'px'; // サムネイルとリストの上下間にマークを配置

                let index=entry_id_DB.indexOf(entryhref[k]);
                if(index !=-1){
                    if(blogDB[index][1]==1){
                        history[k].style.background='#009688'; } // フラグ1ならグリーン
                    else if(blogDB[index][1]==2){
                        history[k].style.background='#ff8800'; } // フラグ2ならオレンジ
                    else if(blogDB[index][1]==0){
                        history[k].style.background='#fff'; }}} // フラグ0なら白

            function list_listen(k){
                entrylink[k].addEventListener('click', function(){
                    all_click(); }, false);
                entrylink[k].addEventListener('contextmenu', function(){
                    all_click(); }, false);

                function all_click(){
                    let index=entry_id_DB.indexOf(entryhref[k]);
                    if(index==-1){
                        blogDB.push([entryhref[k], 1]); // 閲覧履歴に記事ID/フラグ1を追加
                        history[k].style.background='#009688'; } // グリーン
                    else{
                        blogDB[index]=[entryhref[k], 1]; // この記事IDの履歴をフラグ1に更新
                        history[k].style.background='#009688'; } // グリーン
                    let write_json=JSON.stringify(blogDB);
                    localStorage.setItem('ASR_DB_back', write_json); // ストレージ保存
                    reg_set(); }}

            function hmark_listen(k){
                history[k].addEventListener('click', function(event){
                    event.preventDefault();
                    event.stopImmediatePropagation();
                    let index=entry_id_DB.indexOf(entryhref[k]);
                    if(index==-1){
                        blogDB.push([entryhref[k], 1]); // 閲覧履歴に記事ID/フラグ1を追加
                        history[k].style.background='#009688'; } // グリーン
                    else{
                        if(blogDB[index][1]==1){
                            blogDB[index]=[entryhref[k], 2]; // この記事IDの履歴をフラグ2に更新
                            history[k].style.background='#ff8800'; } // オレンジ(Noteフラグ)
                        else if(blogDB[index][1]==2){
                            blogDB[index]=[entryhref[k], 0]; // この記事IDの履歴をフラグ0に更新
                            history[k].style.background='#fff'; } // 白(履歴のフラグをリセット)
                        else if(blogDB[index][1]==0){
                            blogDB[index]=[entryhref[k], 1]; // この記事IDの履歴をフラグ1に更新
                            history[k].style.background='#009688'; }} // グリーン
                    let write_json=JSON.stringify(blogDB);
                    localStorage.setItem('ASR_DB_back', write_json); // ストレージ保存
                    reg_set();
                }, false); }}


        reset_sw();

        function reset_sw(){
            let box=document.querySelector('.PcResultPagination');
            let sw=document.createElement('p');
            sw.innerText='Reset';
            sw.setAttribute('class', 'history_reset');
            sw.setAttribute('style', 'position: absolute; left: 0; padding: 2px 6px 0; color: #fff; ' +
                            'border-radius: 4px; background: #009688; cursor: pointer');
            if(!box.querySelector('.history_reset')){
                box.appendChild(sw); }
            sw.addEventListener('click', function(){
                let conf_str='🟩 リストの閲覧履歴マークをリセットします';
                let ok=confirm(conf_str);
                if(ok){
                    blogDB=[['ASR00000000', blogDB[0][1]]];
                    let write_json=JSON.stringify(blogDB);
                    localStorage.setItem('ASR_DB_back', write_json); // ストレージ保存
                    reg_set();
                    list_set(); }}, false); }

        back_sw();

        function back_sw(){
            let box=document.querySelector('.PcNavigationSearch');
            let sw=document.createElement('p');
            sw.innerText='\u23CF\uFE0E';
            sw.setAttribute('id', 'back_blog');
            if(!box.querySelector('#back_blog')){
                box.appendChild(sw); }

            sw.addEventListener('click', function(){
                location.href='https://ameblo.jp/' + blogDB[0][1]; }, false); }


        let user_id=get_userid(1);

        let search_box_react=document.querySelector('#react-autowhatever-1');
        if(search_box_react){
            search_box_react.remove(); }
        let search_button=document.querySelector('.PcSearchForm_Button');

        search_button.addEventListener('click', function(e){
            let input_box=document.querySelector('.PcSuggestForm_Input').value
            if(input_box!=''){
                location.href='https://search.ameba.jp/search/entry/' + input_box + user_id; }
            e.preventDefault();
            e.stopPropagation(); }, false);


        function get_userid(n){
            let this_url=location.href;
            let index_after=this_url.indexOf('.html?aid=');
            let caption=document.querySelector('.PcEntryList_Caption');

            if(index_after==-1){ // ブログ内検索から出た時に動作するのを防止
                caption.textContent='ブログ記事';
                caption.style.color='#298538';
                caption.style.background='transparent'; }
            else{
                caption.textContent='ブログ内検索';
                caption.style.color='#fff';
                caption.style.background='#2196f3';
                let user_id_a=this_url.slice(index_after);
                let index_before=user_id_a.indexOf('&p=');
                let user_id;
                if(index_before==-1){
                    user_id=user_id_a; }
                else{
                    user_id=user_id_a.substring(0, index_before); }
                if(n==1){
                    return user_id; }
                else if(n==0){
                    user_id=user_id.replace('.html?aid=', '');
                    return user_id; }}}
    } // search_next



    function in_view() {
        let css = "";
        css += [
            "/* IN VIEW CSS */",
            "html {",
            "    overflow-y: scroll;",
            "    overflow-y: overlay;",
            "    background: #c5d8e1; }",
            "body {",
            "    font-family: Meiryo, sans-serif;",
            "    background: var(--backg); }",
            "#announcer {",
            "    opacity: 0; }",
            "/* 検索結果リスト 上下のADブロック */",
            "#listingAdA,",
            "#listingAdB {",
            "    display: none; }",
            ".PcSearchTemplate_AdSenseTop,",
            ".PcSearchTemplate_AdSenseBottom {",
            "    display: none; }",
            "/* 右サイド AD */",
            ".PcSideBar_AdArea {",
            "    display: none; }",
            "div[id^=\"div-gpt-ad\"] {",
            "    display: none; }",
            "/* アメブロフッター */",
            ".PcGlobalFooter {",
            "    display: none; }",
            "/* Ameba検索 詳細モード *************** */",
            "body {",
            "    padding: 0 !important; }",
            "/* アメブロヘッダー */",
            ".PcGlobalHeader {",
            "    display: none; }",
            "/* ページ幅 */",
            ".PcDefaultPage_Main {",
            "    min-width: 800px; }",
            ".PcSearchEntryTemplate_Wrap {",
            "    width: 800px; }",
            ".PcSearchEntryTemplate_Left {",
            "    width: 728px;",
            "    margin: 10px 0 0;",
            "    overflow: visible; }",
            "/* 検索ボックス */",
            ".PcNavigationSearch {",
            "    width: 728px;",
            "    margin: 12px auto; }",
            ".PcNavigationSearch_Logo {",
            "    margin-right: 20px; }",
            ".PcNavigationSearch_AmebaLogo {",
            "    margin-right: 0; }",
            ".PcNavigationSearch_AmebaLogo:after {",
            "    border: none; }",
            ".AmebaLogo {",
            "    width: 100px; }",
            ".PcNavigationSearch_Logo > img {",
            "    width: 36px; }",
            ".PcSearchForm_InputArea {",
            "    border: 1px solid #607d8b;",
            "    border-radius: 6px;",
            "    overflow: hidden;",
            "    padding: 0; }",
            ".PcSearchForm_InputArea {",
            "    box-shadow: none !important; }",
            ".PcSuggestForm_Input {",
            "    width: 418px;",
            "    height: 32px;",
            "    padding: 2px 8px 0; }",
            ".PcSearchForm_Button {",
            "    height: 34px;",
            "    width: 80px;",
            "    border-radius: 0;",
            "    background-color: #2196f3; }",
            ".PcSearchForm_Button:hover {",
            "    opacity: 1;",
            "    background: #1976d2; }",
            ".PcSearchForm_Button:focus {",
            "    box-shadow: inset 0 0 0 1px #e1f5fe; }",
            "#back_blog {",
            "    border: 1px solid #fff;",
            "    border-radius: 6px;",
            "    padding: 4px;",
            "    margin-left: 20px;",
            "    font-size: 24px;",
            "    color: #fff;",
            "    background: #2196f3;",
            "    cursor: pointer; }",
            "/* 検索履歴表示 */",
            ".PcSuggestForm_SectionTitle {",
            "    top: 36px;",
            "    left: 5px; }",
            ".PcSuggestForm_SectionTitle button {",
            "    background: #fff;",
            "    border-radius: 4px;",
            "    border: 1px solid #aaa;",
            "    margin-top: -2px; }",
            ".PcSuggestForm_List {",
            "    top: 36px;",
            "    left: 5px; }",
            ".PcSuggestForm_List.hasTitle {",
            "    top: 73px;",
            "    left: 5px; }",
            "/* ナビゲーションバー */",
            ".PcNavigationBar {",
            "    display: none; }",
            "/* パンクズ */",
            ".PcBreadcrumbsList {",
            "    position: absolute;",
            "    top: 74px;",
            "    left: calc(50% + 70px);",
            "    margin-left: -100px;",
            "    padding: 4px 10px;",
            "    z-index: 2; }",
            "@media screen and (max-width: 800px) {",
            ".PcBreadcrumbsList {",
            "    left: 470px; } }",
            ".PcBreadcrumbsList_List {",
            "    white-space: nowrap; }",
            "/* ブログ記事リスト */",
            ".PcEntryList {",
            "    position: relative;",
            "    display: flex;",
            "    flex-direction: column; }",
            ".PcBreadcrumbsList_Icon {",
            "margin: 0; }",
            "/* 「ブログ記事」のヘッダー */",
            ".PcEntryList_Header {",
            "    justify-content: initial;",
            "    margin-bottom: 4px;",
            "    border-bottom: 2px solid #efefef;",
            "    order: 0; }",
            ".PcEntryList_Caption {",
            "    margin: 0 30px 6px 0;",
            "    padding: 5px 10px 2px !important; }",
            "/* 人気・新着 ボタン */",
            ".PcEntryList_TabList {",
            "     display: none; }",
            "/* リスト情報 */",
            ".PcEntryList_ListInfo {",
            "    position: absolute;",
            "    top: 0;",
            "    left: calc(50% - 210px);",
            "    width: 285px;",
            "    order: 1; }",
            "@media screen and (max-width: 800px) {",
            ".PcEntryList_ListInfo {",
            "    left: 154px; } }",
            "/* カウントレンジ */",
            ".PcHitCountRange {",
            "    color: #000;",
            "    margin: 8px 0 0;",
            "    max-width: 170px;",
            "    white-space: nowrap;",
            "    overflow: hidden;",
            "    text-overflow: ellipsis; }",
            "/* 検索結果を絞り込む 非表示 */",
            ".PcBlogEntryFilter {",
            "    display: none; }",
            "/* 情報なしのエラーメッセージ */",
            ".PcErrorMessage {",
            "    margin-top: 50px; }",
            "/* 記事のリスト */",
            ".PcEntryList {",
            "    margin-bottom: 15px; }",
            ".PcEntryList_List {",
            "    order: 3; }",
            ".PcEntryListItem {",
            "    margin-bottom: 2px;",
            "    padding: 2px;",
            "    border: none;",
            "    background: #f4f4f4; }",
            ".PcEntryListItem:hover {",
            "    outline: 2px solid #2196f3; }",
            ".PcEntryListItem_Link:hover {",
            "    opacity: 1; }",
            "/* ユーザーサムネイル 24px */",
            ".PcEntryListItem .UserThumbnail {",
            "    width: 24px;",
            "    height: 24px;",
            "    margin-left: 4px;",
            "    border-radius: 6px;",
            "    border: 1px solid #ccc; }",
            ".PcEntryListItem_Entry {",
            "    margin: 0 8px; }",
            "/* スターアイコン */",
            ".PcEntryListItem_ThumbnailIconWrap {",
            "    height: 16px;",
            "    width: 16px;",
            "    bottom: -16px;",
            "    right: -12px; }",
            "/* 記事タイトル */",
            ".PcEntryListItem_EntryTitle {",
            "    margin-top: 3px;",
            "    margin-bottom: 2px; }",
            "/* 記事日付 データ */",
            ".PcEntryListItem_EntryData {",
            "    margin-bottom: 2px;",
            "    height: 13px; }",
            "/* 記事引用部 */",
            ".PcEntryListItem_EntryContent {",
            "    line-height: 1.25; }",
            "/* 記事画像 */",
            ".PcEntryListItem_EntryImage {",
            "    flex-basis: 75px;",
            "    height: 75px; }",
            "/* 検索ヒット語のマーカー */",
            ".hlword1 {",
            "    color: #333 !important;",
            "    font-weight: inherit !important;",
            "    background: linear-gradient(transparent 1.1em, #f90 0, #f90 calc(1.1em + 3px), transparent 0); }",
            "/* チェック済み記事マーク */",
            ".PcEntryListItem_Link {",
            "    position: relative; }",
            ".PcEntryListItem_Link::before {",
            "    content: '';",
            "    position: absolute;",
            "    left: 10px;",
            "    top: 44.5px;",
            "    width: 14px;",
            "    height: 14px;",
            "    border-radius: 4px;",
            "    background: #f4f4f4; }",
            ".PcEntryListItem_Link:visited::before {",
            "    background: #2196f3; }",
            "/* 記事リストのページャー */",
            ".PcResultPagination {",
            "    position: relative;",
            "    margin-bottom: 6px;",
            "    padding: 0 80px 4px;",
            "    border-bottom: 2px solid #efefef;",
            "    order: 2; }",
            ".PcResultPagination_Paging_active,",
            ".PcResultPagination_PagingLink {",
            "    border-radius: 4px;",
            "    padding: 2px 6px; }",
            "/* リストの読込み表示 */",
            ".PcEntryList .Loading {",
            "    opacity: 0.3;",
            "    order: 4; }",
            ".PcEntryList .PcEntryList_LoadingDummy {",
            "    order: 5; }",
            ".PcResultPagination_MoreLink {",
            "    padding: 2px 6px 1px 6px;",
            "    border-radius: 4px; }",
            ".PcResultPagination_MoreLink:hover {",
            "    background: #fff;",
            "    text-decoration: none; }",
            ".PcResultPagination_List {",
            "    margin: 0; }",
            ".PcResultPagination_Paging_active {",
            "    background-color: #1976d2; }",
            ".PcResultPagination_PagingLink:hover {",
            "    background-color: #fff; }",
            "/* 右サイドバー */",
            ".PcSideBar {",
            "    display: none; }"
        ].join(" ");

        let node = document.createElement("style");
        node.type = "text/css";
        node.setAttribute("class", "sih");
        node.appendChild(document.createTextNode(css));
        let heads = document.getElementsByTagName("head");

        if(heads[0].querySelector('.sih')){
            heads[0].querySelector('.sih').remove(); }
        heads[0].appendChild(node);
    } // in_view()


    function out_view() {
        let css = "";
        css += [
            "/* OUT VIEW CSS */",
            "html {",
            "    overflow-y: scroll;",
            "    overflow-y: overlay;",
            "    background: #c5d8e1; }",
            "body {",
            "    font-family: Meiryo, sans-serif !important;",
            "    background: var(--backg); }",
            "#announcer {",
            "    opacity: 0; }",
            "/* 検索結果リスト 上下のADブロック ***** */",
            "#listingAdA,",
            "#listingAdB {",
            "    display: none; }",
            ".PcSearchTemplate_AdSenseTop,",
            ".PcSearchTemplate_AdSenseBottom {",
            "    display: none; }",
            "/* 右サイド AD */",
            ".PcSideBar_AdArea {",
            "    display: none; }",
            "div[id^=\"div-gpt-ad\"] {",
            "    display: none; }",
            "/* アメブロフッター */",
            ".PcGlobalFooter {",
            "    display: none; }",
            "/* 検索ヒット語のマーカー */",
            ".hlword1 {",
            "    color: #333 !important;",
            "    font-weight: inherit !important;",
            "    background: linear-gradient(transparent 1.1em, #f90 0, #f90 calc(1.1em + 3px), transparent 0); }"
        ].join(" ");

        let node = document.createElement("style");
        node.type = "text/css";
        node.setAttribute("class", "sih");
        node.appendChild(document.createTextNode(css));
        let heads = document.getElementsByTagName("head");

        if(heads[0].querySelector('.sih')){
            heads[0].querySelector('.sih').remove(); }
        heads[0].appendChild(node);
    } // out_view()

})

 

 

 

 「Ameba Search Repeat」ver. 1.5

●「Stylus」で「Ameblo Management 」と「Ameblo Neo Search  」を利用している環境下の使用を前提としたコードです。

 

●「Stylus」によるAmeba検索画面のデザイン適用は非常に優れていて理想的です。 

「Stylus」のアレンジ下では、このスクリプトのマーク機能が各種の詳細リスト表示でも利用できます。

 

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

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

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

 

 

〔 Ameba Search Repeat 〕ver. 1.5

// ==UserScript==
// @name         Ameba Search Repeat
// @namespace    http://tampermonkey.net/
// @version      1.5
// @description  ブログ内検索の再検索を実行可能にする
// @author       Ameba Blog User
// @match        https://search.ameba.jp/search/entry/*
// @match        https://search.ameba.jp/talent/entry*
// @match        https://search.ameba.jp/general/entry*
// @run-at        document-start
// @grant         none
// ==/UserScript==


addEventListener('DOMContentLoaded', function(){

    in_view(); // ページにCSSを適用

    let target=document.querySelector('body'); // 監視 target
    let monitor=new MutationObserver(search_next);
    monitor.observe(target, {childList: true}); // 検索待受け開始

    search_next();

    function search_next(){ // 検索結果ページごとにURLは更新される

        let blogDB={}; // 閲覧記事のID/チェックフラグの記録配列
        let entry_id_DB; // ID検索用の配列

        let read_json=localStorage.getItem('ASR_DB_back'); // ローカルストレージ 保存名
        blogDB=JSON.parse(read_json);
        if(blogDB==null){
            blogDB=[['ASR00000000', '0']]; }
        if(get_userid(0) !=null){
            blogDB[0]=['ASR00000000', get_userid(0) ]; } // スクリプト起動時に開いたユーザーIDを記録
        let write_json=JSON.stringify(blogDB);
        localStorage.setItem('ASR_DB_back', write_json); // ローカルストレージ 保存


        reg_set();

        function reg_set(){
            let k;
            entry_id_DB=[]; // リセット
            for(k=0; k<blogDB.length; k++){
                entry_id_DB[k]=blogDB[k][0]; }} // ID検索用の配列を作成


        list_set();

        function list_set(){
            let entrylist=[];
            let entrylink=[];
            let entryhref=[];
            let history=[];

            entrylist=document.querySelectorAll('.PcEntryListItem');
            for(let k=0; k<entrylist.length; k++){
                entrylink[k]=entrylist[k].querySelector('.PcEntryListItem >a');
                entryhref[k]=entrylink[k].getAttribute('href').slice(-16, -5);
                //     entrylink[k].setAttribute('target', '_blank'); // リストのクリックを別タブで開く設定
                mark(k);
                list_listen(k);
                hmark_listen(k); }


            function mark(k){
                history[k]=document.createElement('p');
                history[k].innerText='\u00A0';
                history[k].setAttribute('class', 'history');
                history[k].setAttribute('style', 'position: absolute; left: 10px; ' +
                                        'width: 14px; height: 14px; border-radius: 4px; background: #fff');
                if(entrylink[k].querySelector('.history')){
                    entrylink[k].querySelector('.history').remove(); }
                entrylink[k].appendChild(history[k]);

                let list_size=entrylink[k].getBoundingClientRect().height;
                let img_size=entrylist[k].querySelector('.UserThumbnail').getBoundingClientRect().height;
                let top=(list_size + img_size)/2 - 6;
                history[k].style.top=top + 'px'; // サムネイルとリストの上下間にマークを配置

                let index=entry_id_DB.indexOf(entryhref[k]);
                if(index !=-1){
                    if(blogDB[index][1]==1){
                        history[k].style.background='#009688'; } // フラグ1ならグリーン
                    else if(blogDB[index][1]==2){
                        history[k].style.background='#ff8800'; } // フラグ2ならオレンジ
                    else if(blogDB[index][1]==0){
                        history[k].style.background='#fff'; }}} // フラグ0なら白

            function list_listen(k){
                entrylink[k].addEventListener('click', function(){
                    all_click(); }, false);
                entrylink[k].addEventListener('contextmenu', function(){
                    all_click(); }, false);

                function all_click(){
                    let index=entry_id_DB.indexOf(entryhref[k]);
                    if(index==-1){
                        blogDB.push([entryhref[k], 1]); // 閲覧履歴に記事ID/フラグ1を追加
                        history[k].style.background='#009688'; } // グリーン
                    else{
                        blogDB[index]=[entryhref[k], 1]; // この記事IDの履歴をフラグ1に更新
                        history[k].style.background='#009688'; } // グリーン
                    let write_json=JSON.stringify(blogDB);
                    localStorage.setItem('ASR_DB_back', write_json); // ストレージ保存
                    reg_set(); }}

            function hmark_listen(k){
                history[k].addEventListener('click', function(event){
                    event.preventDefault();
                    event.stopImmediatePropagation();
                    let index=entry_id_DB.indexOf(entryhref[k]);
                    if(index==-1){
                        blogDB.push([entryhref[k], 1]); // 閲覧履歴に記事ID/フラグ1を追加
                        history[k].style.background='#009688'; } // グリーン
                    else{
                        if(blogDB[index][1]==1){
                            blogDB[index]=[entryhref[k], 2]; // この記事IDの履歴をフラグ2に更新
                            history[k].style.background='#ff8800'; } // オレンジ(Noteフラグ)
                        else if(blogDB[index][1]==2){
                            blogDB[index]=[entryhref[k], 0]; // この記事IDの履歴をフラグ0に更新
                            history[k].style.background='#fff'; } // 白(履歴のフラグをリセット)
                        else if(blogDB[index][1]==0){
                            blogDB[index]=[entryhref[k], 1]; // この記事IDの履歴をフラグ1に更新
                            history[k].style.background='#009688'; }} // グリーン
                    let write_json=JSON.stringify(blogDB);
                    localStorage.setItem('ASR_DB_back', write_json); // ストレージ保存
                    reg_set();
                }, false); }}


        reset_sw();

        function reset_sw(){
            let box=document.querySelector('.PcResultPagination');
            let sw=document.createElement('p');
            sw.innerText='Reset';
            sw.setAttribute('class', 'history_reset');
            sw.setAttribute('style', 'position: absolute; left: 0; padding: 2px 6px 0; color: #fff; ' +
                            'border-radius: 4px; background: #009688; cursor: pointer');
            if(!box.querySelector('.history_reset')){
                box.appendChild(sw); }
            sw.addEventListener('click', function(){
                let conf_str='🟩 リストの閲覧履歴マークをリセットします';
                let ok=confirm(conf_str);
                if(ok){
                    blogDB=[['ASR00000000', blogDB[0][1]]];
                    let write_json=JSON.stringify(blogDB);
                    localStorage.setItem('ASR_DB_back', write_json); // ストレージ保存
                    reg_set();
                    list_set(); }}, false); }

        back_sw();

        function back_sw(){
            let box=document.querySelector('.PcNavigationSearch');
            let sw=document.createElement('p');
            sw.innerText='⏏';
            sw.setAttribute('id', 'back_blog');
            if(!box.querySelector('#back_blog')){
                box.appendChild(sw); }

            sw.addEventListener('click', function(){
                location.href='https://ameblo.jp/' + blogDB[0][1]; }, false); }


        let user_id=get_userid(1);

        let search_box_react=document.querySelector('#react-autowhatever-1');
        if(search_box_react){
            search_box_react.remove(); }
        let search_button=document.querySelector('.PcSearchForm_Button');

        search_button.addEventListener('click', function(e){
            let input_box=document.querySelector('.PcSuggestForm_Input').value
            if(input_box!=''){
                location.href='https://search.ameba.jp/search/entry/' + input_box + user_id; }
            e.preventDefault();
            e.stopPropagation(); }, false);


        function get_userid(n){
            let this_url=location.href;
            let index_after=this_url.indexOf('.html?aid=');
            let caption=document.querySelector('.PcEntryList_Caption');
            let blogfilter=document.querySelector('.PcBlogEntryFilter');
            let breadcrumb=document.querySelector('.PcBreadcrumbsList');
            let listlink=document.querySelectorAll('.PcEntryListItem_Link');

            if(index_after==-1){ // ブログ内検索から出た時に動作するのを防止
                caption.textContent='ブログ記事';
                caption.style.color='#298538';
                caption.style.background='transparent';
                blogfilter.style.display='flex';
                breadcrumb.style.marginLeft='0';
                for(let k=0; k<listlink.length; k++){
                    listlink[k].style.height='auto'; }}
            else{
                caption.textContent='ブログ内検索';
                caption.style.color='#fff';
                caption.style.background='#2196f3';
                blogfilter.style.display='none';
                breadcrumb.style.marginLeft='-100px';
                for(let k=0; k<listlink.length; k++){
                    listlink[k].style.height='75px'; }
                let user_id_a=this_url.slice(index_after);
                let index_before=user_id_a.indexOf('&p=');
                let user_id;
                if(index_before==-1){
                    user_id=user_id_a; }
                else{
                    user_id=user_id_a.substring(0, index_before); }
                if(n==1){
                    return user_id; }
                else if(n==0){
                    user_id=user_id.replace('.html?aid=', '');
                    return user_id; }}}
    } // search_next


    function in_view(){
        let css = "";
        css += [
            ".AmebaLogo { width: 100px; }",
            ".PcNavigationSearch_Logo > img { width: 36px; }",
            ".PcSearchForm_Button { width: 80px; }",
            "#back_blog { font-size: 24px; padding: 4px; margin-left: 20px; cursor: pointer;",
            " border: 1px solid #fff; border-radius: 6px; color: #fff; background: #2196f3; }",
            ".PcEntryList_Caption { padding: 5px 10px 2px !important; ",
            "margin: 0 10px 6px 0 !important; }",
            ".PcResultPagination, .PcEntryListItem_Link { position: relative; }"
        ].join(" ");

        let style0= document.createElement("style");
        style0.type="text/css";
        style0.setAttribute("class", "sty0");
        style0.appendChild(document.createTextNode(css));
        let header=document.getElementsByTagName("head");
        if(header[0].querySelector('.sty0')){
            header[0].querySelector('.sty0').remove(); }
        header[0].appendChild(style0); }

})

 

 

 

「Ameba Search Repeat / with CSS」最新版について 

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

 

●「Ameba Search Repeat / with CSS」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。