はてなブログの記事の投稿時間

はてなブログでは記事の先頭に日付、記事の最後に「○日前」といった表記がありますが、パッと見で投稿時間は分かりにくいです。URLから類推することは可能ですが、カスタムURLを使ったり、記事URLの設定をタイトルにしていたら日付までしか分かりません。

そこで「○日前」の方を投稿時間に書き換えようとスクリプトを書いてみたんですが、スクリプトが実行されたあと「○日前」に書き換えられてしまって意味がありませんでした。

var updated = document.getElementsByClassName("updated");
var datestring = updated.item(0).getAttribute("datetime");
var date = new Date(datestring);

// 例: 2015/7/29 22:30:00 ブラウザなど環境によって表示が異なる可能性あり
//datestring = date.toLocaleString();

// 自分で書式を設定する場合
datestring = date.getFullYear() + "年" 
+ ('0' + (date.getMonth()+1)).slice(-2) + "月" 
+ ('0' + date.getDate()).slice(-2) + "日 " 
+ ('0' + date.getHours()).slice(-2) + ":"
+ ('0' + date.getMinutes()).slice(-2);

updated.item(0).innerText = datestring;

予定ではこうなるはずでした

通常は日付がわかれば十分ですが、投稿された時間が意味を持つ場合もあると思うので、記事中に表示する日時の書式なども設定できるようになったらいいなと思います。

Twitterで特定のツイートからそのユーザーの前後一日のツイートを検索するスクリプト(Webブラウザ)

なんだか分かりにくいタイトルになってしまいましたが。Twitterで特定のツイートから、そのユーザーの前後一日のツイートを検索するスクリプトを書きました。

特定のツイートの「詳細」を開いてスクリプトを実行すると

検索結果のページが表示されます。

スクリプトがこちら

// ユーザー名の取得 @は除く
var username = document.getElementsByClassName("username").item(1);
var username = username.childNodes.item(1).innerText;

// 日付の取得
// 例: 00:00 - 2015年7月7日 から 2015/7/7に変換 → 2015-07-06 と 2015-07-08 を取得
var tweetdate  = document.getElementsByClassName("metadata").item(1).innerText;
var datestring = tweetdate.substring(tweetdate.lastIndexOf(" ") + 1);
datestring = datestring.replace("年","/");
datestring = datestring.replace("月","/");
datestring = datestring.replace("日","");

// 前後の日付の算出
tweetdate = new Date(datestring);
var prev  = new Date(tweetdate.setDate(tweetdate.getDate()-1));
var next  = new Date(tweetdate.setDate(tweetdate.getDate()+2));

// 前後の日付をyyyy-mm-dd形式にする
prev = prev.getFullYear() + "-" + ('0' + (prev.getMonth()+1)).slice(-2) + "-" + ('0' + prev.getDate()).slice(-2);
next = next.getFullYear() + "-" + ('0' + (next.getMonth()+1)).slice(-2) + "-" + ('0' + next.getDate()).slice(-2);

// 検索結果の表示
// from: ユーザー名 since: 期間の開始 until: 期間の終了 src=typed (詳細不明、無しでもよさそう) f=tweets 「ライブ」のタブを表示？
var search_url = "https://twitter.com/search?q=from%3A" + username + "%20since%3A" + prev + "%20" + "until%3A" + next + "&src=typd&f=tweets";
window.open(search_url);

ブックマークレット(長い…)

javascript:(function(){ var username = document.getElementsByClassName("username").item(1); var username = username.childNodes.item(1).innerText; var tweetdate  = document.getElementsByClassName("metadata").item(1).innerText; var datestring = tweetdate.substring(tweetdate.lastIndexOf(" ") + 1); datestring = datestring.replace("年","/"); datestring = datestring.replace("月","/"); datestring = datestring.replace("日","");  tweetdate = new Date(datestring); var prev = new Date(tweetdate.setDate(tweetdate.getDate()-1)); var next = new Date(tweetdate.setDate(tweetdate.getDate()+2));  prev = prev.getFullYear() + "-" + ('0' + (prev.getMonth()+1)).slice(-2) + "-" + ('0' + prev.getDate()).slice(-2); next = next.getFullYear() + "-" + ('0' + (next.getMonth()+1)).slice(-2) + "-" + ('0' + next.getDate()).slice(-2); var search_url = "https://twitter.com/search?q=from%3A" + username + " since%3A" + prev + " " + "until%3A" + next + "&src=typd&f=tweets"; window.open(search_url); })();

だいたいのことはコメントに書いてますが、ツイートの詳細からユーザー名(@xxxから@を除く)、日付(時間 - 日付)をそれぞれ取得して、前後の日付をDateを使って計算、検索結果のURLにあてはめています。src=typedのパラメータの意味はよくわかりませんでした。*1 また、検索結果で「トップ」だと表示されないツイートがあったりするので、「ライブ」のタブを表示するようにしています。

他のユーザーだけでなく、自分がした古いツイートに対して何かリアクションがあったときも「あのときは何を考えてたんだっけ？」の確認ができそうです。実行した日やユーザー名によっては正しく表示されないことがあるかもしれません。

sprint-life.hatenablog.com

*1:無しでも表示されましたが念の為

はてなブログの管理画面でアクセス数を非表示にする(意味なし)

タイトルの通り、実行してみたけど意味がなかったという話です。

はてなブログの管理画面でトップページ(メニューのブログ名のところ)を開くとアクセス数が表示されますが、これをなるべく見ないようにしたい。

まずはChromeのデベロッパーツールからJavaScriptで非表示にできることを確認

document.getElementsByClassName("table table-2column left").item(0).style.visibility = "hidden";

下記の記事を参考にエクステンションとして追加しました。

qiita.com

ページを開いてみるとこうなります。

残念ながらアクセス数を読み込んだあと非表示に。考えてみれば要素を判別しなきゃいけないんだから読み込んだあとじゃないと動くわけもなく…

独自のエクステンションを入れるにはデベロッパーモードを有効にする必要があって、Chromeを起動するたびにダイアログが出ることもわかりました。

できたらいいなくらいのつもりでやってみただけなので、自分でなるべくメニューを開かないようにします。

HTMLとJavascriptで簡易ポモドーロタイマー

何か作業をする時にダラダラと時間をかけてしまいがちなので、なかば勢いでポモドーロタイマー？を作りました。

とりあえずブラウザでいいんじゃないかということでJavaScriptです。最低限満たしたかった要件としては、作業時間と休憩時間を連続してカウントさせること。

ソース

<!DOCTYPE HTML>
<html lang="ja-JP">
<head>
   <meta charset="UTF-8">
   <title>簡易ポモドーロタイマー</title>
   <script type="text/javascript">
       var work_time = 1500;
       var state = "work";
       var timer;
               
       function timer_start(){
           document.getElementById("current_time").innerText = work_time;
           timer = setInterval(time_count,1000);
       }

       function timer_stop(){
           clearInterval(timer);
       }

       function timer_reset(){
           clearInterval(timer);
           work_time = 1500;
           rest_time = 300;
           document.getElementById("current_time").innerText = work_time;
       }

       function time_count(){
           work_time--;
           document.getElementById("current_time").innerText = work_time;
           if(work_time <= 0) {
               clearInterval(timer);
               if(state == "work"){
                   alert("休憩!!!!");
                   state = "rest";
                   work_time = 10;
               }else if(state == "rest"){
                   alert("再開!!!!");
                   state = "work";
                   work_time = 1500;
               }
               timer_start();
           }
       }
   </script>
   
   <style type="text/css">
        #container{width: 250px; margin: 30px auto; border: 1px solid #CCC; text-align: center; padding: 10px;}
        #current_time{font-size: 36px; }
        input[type="button"]{ width: 80px;}
    </style>
</head>
<body>
    <div id="container">
        <div id="current_time">0</div>
        <form action="">
            <input type="button" value="START" onClick="timer_start();" /><br />
            <input type="button" value="STOP" onClick="timer_stop();" /><br />
            <input type="button" value="RESET" onClick="timer_reset();" />
        </form>
    </div>

</body>
</html>

こんな感じです。

表示形式は時刻ではなく秒数のカウントダウンですし、精度についても厳密なものは求めていません。さらに簡易的にするなら、分単位で表示させたり、途中経過もなしで作業時間と休憩時間が経過したらalertを表示するだけとかでもいいかもしれません。

作業時間を25分、休憩時間を5分としているのは、人間の集中力が持続するのはせいぜい30分くらいだというのを本で読んだため。タイトルにポモドーロタイマーなんて書いてますが、単に短時間で時間を区切って作業することだと思っていて、以下の記事を読むまで1ポモドーロって単位があることを知りませんでした。

作ってはみたものの、やっぱりブラウザじゃなくてGUIのアプリにしたほうがいいし、休憩で席を立つこともありえるから音が鳴らないと…なんてことが出てきます。記事を読んだのもいったん作り終えたあとだったので、4ポモドーロやったら15分休むっていう要件も入ってません。次に改良版を作るならAutoHotkeyあたりでしょうか。

【修正版】はてなブログのカテゴリーリンクをパンくずリストに書きかえるスクリプト

先日書いたパンくずリストに書きかえるスクリプトですが、根本的に作り方を間違えていたようなので、プログラムと合わせて記事も書き直すことにしました。

以下、修正したコードです。前回以上に力技になった気がしますが…

コード

<script type="text/javascript">
var blog_url = "/";

var category_link = document.querySelector("div.categories a");
category_link.setAttribute("itemprop","url");
category_link.innerHTML = "<span itemprop=\"title\">" + category_link.innerHTML + "</span>";
category_link.outerHTML = "<div itemscope=\"itemscope\" itemtype=\"http://data-vocabulary.org/Breadcrumb\" style=\"display:inline;\">" + category_link.outerHTML + "</div>";

var category_div = document.querySelector("div.categories");
category_div.innerHTML = "<div itemscope=\"itemscope\" itemtype=\"http://data-vocabulary.org/Breadcrumb\" style=\"display:inline;\">" + "<a href=\"" + blog_url + "\" itemprop=\"url\"><span itemprop=\"title\">トップ</span></a> &gt; </div>" + category_div.innerHTML;
</script>

あとに書いてある出力例を見てもらえば分かると思いますが、すでにあるdiv(categories)に対してitemscopeとitemtype属性を設定するのをやめて、トップページへのリンクと先頭のカテゴリーのリンクを別途divタグで括るようにしました。

先頭のカテゴリーのみにしたのは、そのまま全てのリンクに適用してしまうと、2番目以降のカテゴリーが子として認識されてしまうのと、複数のリストに対応させようとすると、レイアウトの調整やリンクを使い回すのが難しくなりそう*1だったため。

使い方

blog_urlを自分のブログのURLかルートを表わす/に変更して上記のコードをデザインの「記事下」に追加してください。動作するのは記事ページのみです。ブログのテーマによってはデザインと合わないかもしれません。

出力例

この記事であればこんな感じで出力されています。*2

<div class="categories ">
    <div itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" style="display:inline;"><a href="/" itemprop="url"><span itemprop="title">トップ</span></a> &gt; </div>
    <div itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb" style="display:inline;"><a href="http://sprint-life.hatenablog.com/category/%E3%81%AF%E3%81%A6%E3%81%AA" itemprop="url"><span itemprop="title">はてな</span></a></div>
    <a href="http://sprint-life.hatenablog.com/category/JavaScript">JavaScript</a>
    <a href="http://sprint-life.hatenablog.com/category/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0">プログラミング</a>
</div>

Google ウェブマスターツールにある「構造化データ テスト ツール」のプレビューではパンくずリストが表示されることを確認*3していますが、今度こそちゃんと反映されるかはしばらく待つ必要がありそうです。

前回の記事についてid:bulldraさんからブコメでコメントをいただいたり、id:psneさんからパンくずリストのマークアップについて言及していただきました。間違いに気づかずしばらく放置していたかもしれません。ありがとうございました。

参考

リッチ スニペット - パンくずリスト - ウェブマスター ツール ヘルプ

*1:考えるのが面倒

*2:実際は改行がなかったり空白が入ったりしていますが、見やすくするために調整しています

*3:前回の記事を書いた時も使ったんですが、検索結果のプレビューが出ていたことに気づかず