tknhs’s blog

ー ごちゃごちゃしてるブログ ー

日記アプリ「Day One」のChrome拡張機能を作ったと言う話

| Comments

dayone

もはや説明の必要もないであろうMac/iPhone/iPadの日記アプリ「Day One」.
どういう使い方をしているかというと,

  • ライフログ
  • その場で何か気づいたことのメモ(位置情報・天気もあわせて記録)
  • ネット記事をクリップ
  • 開発案とか簡単な仕様のメモ

と幅広く使っている.最初は,ライフログとして自己満足の域で書くことを目的として購入したけど痒いところに手が届く感じで使いやすかったので今に至る.

しかし,ネットの記事をクリップするという点において,僕のニーズに応えきれてない部分があった.それは「記事全体を残しておきたいではなく,部分的に残しておきたい」というようなものであり,これを実現するために今回はChromeの拡張機能という形で作成した.

ChromeWebStore
【 Post on DayOne / http://goo.gl/5Cqrlu

実際に作成して公開したのは 2014/02/02 だけど,いろいろ気に入らない部分を残しながらも公開して放置していた…そろそろ納得した形にしたいなと思ったのが今日である.

動作としては,記事内で気になった箇所をテキスト選択して右上のボタン(ブラウザアクション)をクリックするとDay OneのURLスキームにそのデータを投げるというもの.(Alt+Dでも投稿可能.)

PostOnDayOne

Day One ダウンロードリンク

Mac iPhone/iPad

以下,ソースコード

  • manifest.json
(manifest.json) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{
  "manifest_version": 2,
  "name": "Post on DayOne",
  "version": "0.1",

  "default_locale": "en",
  "description": "__MSG_extDesc__",
  "icons": {
    "16": "icon/icon16.png",
    "48": "icon/icon48.png",
    "128": "icon/icon128.png"
  },

  "permissions": [
    "activeTab"
  ],

  "background": {
    "scripts": ["js/background.js"]
  },

  "browser_action": {
    "default_icon": "icon/icon19.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["js/content.js"],
      "run_at": "document_end"
    }
  ]
}
  • background.js
(background.js) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/**
 *  shortcut keydown event
 **/
chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
  if (sender.tab) {
    var title = sender.tab.title;
    var url = sender.tab.url;
    var text = request.strings;
    dayone(title, url, text);
  }
});

/**
 *  browser_action click event
 **/
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.sendRequest(tab.id, {method: 'getSelection'}, function(response) {
    var title = tab.title;
    var url = tab.url;
    var text = response.data;
    dayone(title, url, text);
  });
});

function dayone(title, url, text) {
  var header = '## [' + title + '](' + url + ')\n';
  var body = '---\n\n' + text + '\n\n---\n';
  var footer = '![capture](http://capture.heartrails.com/300x200/cool?' + url + ')';
  var dayone = 'dayone://post?entry=' + encodeURIComponent(header + body + footer);
  chrome.tabs.create({url: dayone});
}
  • content.js
(content.js) download
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
document.onkeydown = function(e) {
  // Alt + d
  if (e.keyCode==68 && e.altKey) {
    // get selected strings
    var strings = getSelection().toString();
    if (strings !== '') {
      chrome.extension.sendMessage({ strings: strings }, function(response) {});
    }
  }
}

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method == 'getSelection') {
    sendResponse({data: getSelection().toString()});
  } else {
    sendResponse({});
  }
});

ショートカットについてはブラウザアクションの設定で対応できるけど,今後のことを少しだけ考えて別にしてあるとかないとか.

ソースはGitHubで公開してます. https://github.com/tknhs/Post-on-DayOne

Comments