季節ごとの文章の書き出しを自動で作成するChrome extension作った

#JavaScript

せーの

2017.04.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

春風駘蕩の候, 春風の心地よい季節になりましたが、お変わりなくお過ごしでしょうか、せーのです。さて今日はこの書き出し文を単純に書く拡張機能を作ってみます。

挨拶がかぶってきた

きっかけは些細なことで、ある日ブログでも書こうとDevelopers.IOを開いてみると

以前は私くらいしか使っていなかった「こんにちは、◯◯です。」という書き出しに溢れていました。よく考えれば普通の挨拶なのでいままでかぶらなかったのが不思議なくらいです。
ということで、みんなと同じになるのが何かイヤ、という生来の天邪鬼気質から、新しい書き出しフレーズが何か無いかなあ、と探していた所、Facebookで

※夜中に何やってんだ、とか言わないで下さい

「季節の挨拶が意外とハマる」ということになりました。都元さん、ありがとうございます。

ただ、ブログを書く度に毎回このサイトに飛んでコピペして、、、というのも面倒くさい。そこでChrome extensionを作り、そのボタンを押せば季節に合った書き出しの挨拶が出てきて、コピペできるような感じにしてみました。

凝らなければChrome extensionは簡単

Chrome extensionは実はWebページと何ら変わりがなく、作るのはとても簡単です(Google App ScriptとChrome extensionは2大やってみると実は簡単なもの)。ということでサクッと作ってみます。

まずはマニフェストファイルを用意します。

{
  "manifest_version": 2,
  "name": "Kakidashi maker",
  "description": "Kakidashi maker",
  "version": "1.0.0",
  "icons": {
    "16": "images/icon/cmlogo_icon_x16_y16.png",
    "48": "images/icon/cmlogo_icon_x48_y48.png",
    "128": "images/icon/cmlogo_icon_x128_y128.png"
  },
  "browser_action": {
    "default_icon": {
      "19": "images/icon/cmlogo_icon_x19_y19.png",
      "38": "images/icon/cmlogo_icon_x38_y38.png"
    },
    "default_title": "Kakidashi maker",
    "default_popup": "popup.html"
  }
}

簡単なものだとこれだけでOKです。Chrome extensionは「ブラウザアクション」と「ページアクション」という2つの種類に分かれています。URLボックスの外に並んでいるのが「ブラウザアクション」、URLボックスの中に表示されるのが「ページアクション」です。「ブラウザアクション」は基本どこでも操作でき、「ページアクション」は特定のページのときのみ現れます。

上で言えば右側が「ブラウザアクション」、左側が「ページアクション」です。今回はブラウザアクションを作ります。

アイコン類は色んな場所に使うのでこれだけ用意しておけばOK、という感じで覚えておいて下さい。あとはdefault_popupに指定されたHTMLにextensionを押された時に表示するWebページを書いて、Chromeに登録すればOKです。簡単ですね。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kakidashi Maker</title>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body>
    <h1>今日の書き出し</h1>
    <h2 class="subtitle">テスト</h2>
    <h1>コピー用テキスト</h2>
    <textarea id="forcopy" class="inputtext" rows="4" cols="40"></textarea>
</body>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>

これが中身で、別途[main.js]というファイルに操作のコードを書こうと思います。操作的には書き出しをひたすらまとめて配列にし、現在の月を元に適切な書き出しを選択し、その中からランダムに抽出し、popup.htmlに貼り付ける、というだけです。

$(function(){
  var str1_1=["新春の候", "厳寒の候", "厳冬の候", "大寒の候", "酷寒の候", "初春のみぎり", "寒冷の候"];
  var str1_2=["晩冬の候", "暮冬の候", "残寒の候", "春寒の候", "上春の候", "解氷の候", "立春の候", "早春の候", "余寒の候", "厳寒の候", "余寒の候", "残寒の候", "向春の候", "梅花の候", "軽暖の候"];
  var str1_3=["枯れ草の間に緑も鮮やかに萌え出る候", "春光天地に満ちわたる候", "春寒ようやくゆるむ候", "春暖快適の好季節", "春寒の季節", "浅暖の候", "軽暖の候", "迎梅の候", "萌芽の候"];
  var str1_4=["麗春の候", "惜春の候", "春風駘蕩の候","春嵐の候", "桜花爛漫の候", "春風駘蕩の候", "春日華麗の候", "春日遅日の候", "春暖の候", "陽春の候", "春和の候", "桜花の候"];
  ...
  ...
   var str2_1=["新春を迎え、お健やかな日々をお過ごしのこととお喜び申し上げます", "寒の入りとなり、冷気がひとしおきびしくなってきましたが、お元気でしょうか", "松の内も過ぎ、平常の生活になりましたが、お変わりなくお過ごしでしょうか", "福寿草の花がひと足早く春の訪れを告げるころとなりましたが、お元気でしょうか", "大寒を間近にして、寒さがいよいよ本格化してきましたが、いかがお過ごしでしょうか"];
  var str2_2=["桃の節句も間近となり、長かった冬も終わろうとしていますが、お元気でお過ごしでしょうか", "日ざしの明るさに春の気配を感じるようになりましたが、お変わりなくお過ごしでしょうか", "余寒なおきびしい昨今ですが、いかがお過ごしでしょうか", "寒気もようやくゆるみ始めたようですが、貴地方ではいかがでしょうか", "立春を過ぎてもなおきびしい寒さが続いていますが、お元気でお過ごしのことと存じます", "春とは名ばかりのきびしい寒気の日が続いていますが、いかがお過ごしでしょうか", "ウグイスの澄んだ鳴き声が聞かれる季節になりましたが、いかがお過ごしでしょうか", "きびしい寒気の中で、梅のつぼみがほころび始めたようですが、いかがお過ごしでしょうか", "寒気の中にも早春の息吹が感じられるころとなりましたが、いかがお過ごしでしょうか", "春はまだ遠いようで、酷寒の日の連続ですが、いかがお過ごしでしょうか", "万両の赤い実を小鳥たちがついばみにくる季節になりましたが、いかがお過ごしでしょうか"];
  ...
  ...
  var str1=[str1_1, str1_2, str1_3, str1_4, str1_5, str1_6, str1_7, str1_8, str1_9, str1_10, str1_11, str1_12];
  var str2=[str2_1, str2_2, str2_3, str2_4, str2_5, str2_6, str2_7, str2_8, str2_9, str2_10, str2_11, str2_12];

  var arrayRandom = function(arr) {
      var key, randomNumber, keys = [], result = false;

      if (arr && typeof arr === 'object') {
          for (key in arr) {
              keys.push(key);
          }
          randomNumber = Math.floor(Math.random() * keys.length);
          key          = keys[randomNumber];
          result       = arr[key];
      }
      return result;
  };
  var mon = new Date().getMonth();
  var ret1 = arrayRandom(str1[mon]);
  var ret2 = arrayRandom(str2[mon]);

  var ret = ret1 + ", " + ret2;

    $(".subtitle").text(ret);
    $("#forcopy").text(ret);
    $("#forcopy").select();
  });

できたらこんな感じに並べて