カテゴリ設定ラクチン化！TamperMobkeyで一撃セットフォームを作成

Tampermonkey

はてなブログでカテゴリの設定をポチポチ……

面倒じゃないですか？

そんな面倒を解消すべく、テンプレを一撃セットする為のフォームを作ってみました！

ドロップダウンリストから選択すれば、テンプレート的に設定した項目をセットしてくれます。

あとは＋α設定するものを追加していくだけ！

「これは必ず追加する」というものの追加漏れも防げますよ！

下準備
ソース
- ざっくり説明すると……
設定方法
今回のつくりについて
あとがき

下準備

TamperMobkeyを使用します！入れていない方は拡張をインスト―ルしましょう！

chrome.google.com

ソース

ソースはコチラ。

基本的にはコピペでOKですが、各個人でカスタマイズが必要です。

// ==UserScript==
// @name         hateblo set category
// @namespace    http://www.lisz-works.com/
// @version      0.1
// @description  Description
// @author       lis
// @match        http://blog.hatena.ne.jp/*/*/edit
// @grant        none
// @require      http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
// ==/UserScript==

// 選択項目：テンプレの名前を2つ目以降に追加していきます。
// 1行目は何もしていない状態の表示です。
const item = [
    "--select category--",
    "python",
    "TamperMonkey"
];
// ブログ内カテゴリ：カテゴリ用の変数を設定していきます。
// 今回はサンプルで必要なものだけ設定しておきます。
// 変数名は任意です。
const chrome = "Chrome";
const chromeExt = "Chrome拡張";
const python3 = "python3";
const pg = "プログラミング";
const tampermonkey = "Tampermonkey";

(function() {
    // 設定用のフォームを追加
    var selectBox = $("<select>").attr({
        "name":"hbsn-set-cat", "id":"hbsi-set-cat"
    }).on("change", function(){
        setCategory($(this).val());
    }).appendTo($(".toolbar-sub.editor-toolbar-sub"));
    $.each(item, function (i, v) {
        selectBox.append($("<option>").val(v).text(v));
    });

    //  カテゴリをセット
    function setCategory(category) {
        var format = function(x) { return "[" + x + "]"; };
        var tag = "";
        switch(category) {
        case "python":
            tag += format(pyton3);
            tag += format(pg);
            break;
        case "TamperMonkey":
            tag += format(tampermonkey);
            tag += format(pg);
            tag += format(chrome);
            tag += format(chromeExt);
            break;
        default:
            return; // 何もセットしない
        }

        var title = $("#title").val();
        $("#title").val(tag + title);
    }
})();

ざっくり説明すると……

item変数に設定したものを、ドロップダウンリストに登録し、ブログ編集画面に設置します。

ドロップダウンリストを選択すると、選択した項目に対応した、カテゴリ設定用の文字列を、タイトルにセットします。

タイトルが事前に設定されている場合、

[カテゴリ]記入済みだったタイトル

のようにセットされます。

はてなブログは、[]で括られた文字列をタイトルに入れていると、カテゴリ扱いされます。

設定方法

ざっくりとした手順です。

ソースをコピペ
「選択項目」item変数を編集
「ブログ内カテゴリ」の各変数を作成
setCategory関数のswitch-caseを編集

まずはTamperMobkeyで新規UserScriptを作成しましょう！

そこにソースをコピペしたら、編集スタートです！

「選択項目」item変数を編集

まずはこの箇所を編集します。

// 選択項目：テンプレの名前を2つ目以降に追加していきます。
// 1行目は何もしていない状態の表示です。
const item = [
    "--select category--",
    "python",
    "TamperMonkey"
];

ここにセットしたものが、ドロップダウンリストの表示項目リストになります。

1つ目の「--select category--」は、初期表示(選択なし)なのでそのままでOKです。

2つ目以降をカスタマイズします。
ここに大分類の名前をセットしていきます。
タイトルのようなものですね。

例えばぼくの場合

「python関連の記事を書いたとき、ｘｘｘとｘｘｘのカテゴリをセットするようにしたい！」

というのを作りたかったので「python」という項目を設定……のような感じです。

「ブログ内カテゴリ」の各変数を作成

次にここ。

// ブログ内カテゴリ：カテゴリ用の変数を設定していきます。
// 今回はサンプルで必要なものだけ設定しておきます。
// 変数名は任意です。
const chrome = "Chrome";
const chromeExt = "Chrome拡張";
const python3 = "python3";
const pg = "プログラミング";
const tampermonkey = "Tampermonkey";

ここでは実態にセットされる、カテゴリの文字列を設定します。
入力ミスを防ぐために定数を設定しています。

変数名は任意なので、好きなように、わかりやすいように設定してください。

setCategory関数のswitch-caseを編集

最後に、setCategory関数のこの箇所です。

        switch(category) {
        case "python":
            tag += format(pyton3);
            tag += format(pg);
            break;
        case "TamperMonkey":
            tag += format(tampermonkey);
            tag += format(pg);
            tag += format(chrome);
            tag += format(chromeExt);
            break;
        default:
            return; // 何もセットしない
        }

caseに設定するのは、item変数に設定した要素名。

例に出した「python」なら「case "python"」のように書きます。

次に中身です。

tag += format(<設定するカテゴリ文字列の変数>);

をセットしたいカテゴリ分、設定していきます。

format関数は、引数の文字列に、"[]"を付けてくれるという単純なもの。

毎回「"[" + セットするカテゴリ + "]"」とかするの面倒ですからね(笑)

ぼくの「python」選択時の場合は、

python3
ログラミング

を付けたいので、

python3
pg

の変数をセットしています。

初歩的なことですが、breakは忘れずに！

今回のつくりについて

これらの設定を事前に済ませておくことで、「選択→固定のカテゴリをセット」が行われ、ブログ作成のラクチン化に一役買います。

設定が若干面倒なのがタマにキズですが……

正直ちょっと泥臭いやり方かなぁ……

とも思ったのですが、イマイチ策が浮かばなかったので今回のような処理となっています。

ホント、もっとスマートなやり方ないだろうか……

一言モノ申したい方は、是非一言ください……

あとがき

久々にjavascript書いたので、軽く忘れかけていました(笑)

まぁでも、1回やってればググりながらやればなんとかイケるもんですね。

TamperMobkeyは、javascriptかじり出せば色々できるので、是非試してみてください！

他にも、ちみちみと作っているので、参考にしてもらえると嬉しいです！

lisz-works

プログラミングと興味を貴方に