全部無料で。EvernoteにMarkdownで書いたCSS対応の文書を投稿するやり方

MacEvernoteのクライアントは使いにくい。とくにMarkdownが使えないのは辛い。リッチテキストだって全然リッチにできない。もっときれいなデザインの文書を投稿したい。

そんなことを思っていて、じゃあMouというMarkdownエディタで書いた文書をEvernoteに保存できるようにしたらいいんじゃないか、という誰もが考えそうだけどあえて誰もやらなかった(めんどくさいから)であろうようなことをできるようにした。

結果的にどうなったかというと、下の画像のようなCSSでデザインされた文書をEvernoteに投稿できるようになった。


デザインはMouで用意されているgithub.cssをそのまま割り当てている。

これはAppleScriptっていうマイナーな言語で書いたスクリプトを使う。ちょっと試験的なんだけど今回はそのスクリプトを公開。

必要なもの

Mouの文書をEvernoteに投稿するにはMouとその内容を投稿するスクリプトの2つ必要。

Mou
mouever.applescript


ちなみに私はAlfredというランチャーを使ってスクリプトを実行している。設定画面のFeaturesのAppleScriptsにチェック入れるとAppleScriptも表示されるようになる。(拡張子が.scptじゃないと見えないっぽいので注意)

実行方法についてはお好みで。

使い方

Mouで適当に文書書く書く。


文書ができたらさっきダウンロードしたスクリプトを実行。

下の画像は/Users/ユーザ名/Library/Scripts/以下にmouever.scptを置いて、http://d.hatena.ne.jp/shinya_ohtani/20091109/1257777144の設定でメニューバーから実行しようとしている例。


実行したときに「システム環境設定」の「ユニバーサルアクセス」で「補助装置にアクセスできるようにする」にチェックが入っていない場合、それの設定を促す案内が出てくるのでチェックを入れる。これをしないとうまいこと動作しないので注意。

そうしてしばらくするとダイアログが表示される。

このダイアログの「設定」ボタンで、

  • ノートの名前
  • 投稿先のノートブック
  • タグ

を設定することができる。


適当に設定してみた。たぶんなんとなく使えると思うのでこのあたりの詳細は省く。


投稿が完了すると完了のダイアログが表示されるので、これで終わり。


投稿した文書のEvernoteでの画面。デザインそのまままんもすうれぴー。


その他細かい部分も他人が使えるレベルにはしたので実用できると思う。

デザインカスタマイズ

投稿する文書のデザインを変更したい場合。スクリプトを直接いじる必要がある。スクリプトソースコードの上らへんに下の画像のような部分があるのでここいじればいい。


ただ、少し癖があるというか、いくつかの構造は特別に割り当てたりしているのでそのへんの仕組みを把握しないとうまくできない。というか私自身もめんどくさくてやっつけ。

ほんとはCSSファイル読み込むだけでできるようになりゃいいなとは思うけど時間かかりそうだからやめた。ある程度限定したフォーマットなら簡単に対応できるのだろうけど。

まあ、いろいろデザイン変えたくなったらそのうちちゃんと何かやるかも。

その他のMarkdown系のアプリでも使えるようにできる

このEvernoteにきれいな文書を投稿するスクリプトはどのエディタやアプリでも簡単に対応できると思う。というかできた。

というのも、Mouより先にMarkdown ProというMacの有料アプリを買ってて、書いたスクリプトはもともとMarkdown Pro用のスクリプトだった。で、後からMouに気づいて、スクリプト書き換えたらちょろかったので簡単だなーと。たぶん他のエディタでも似たような修正を加えればいける。

そういえば私は無料で済まなかったんだけどもまあいいや。自分好みのエディタで扱える方法についてもそのうちいつか書く。

Markdown記法早見表

おまけ。これだけ覚えれば問題ないという記法を自分用にまとめてたのでそれものせておく。

Markdown記法は同じ結果を出力するのに記法が違うときがあって、その場合簡単な書き方を採用している。

見出し
markdown 表示 html
# 見出し1

見出し1

<h1>見出し1</h1>
## 見出し2

見出し2

<h2>見出し2</h2>
### 見出し3

見出し3

<h3>見出し3</h3>
#### 見出し4

見出し4

<h4>見出し4</h4>
##### 見出し5
見出し5
<h5>見出し5</h5>
###### 見出し6
見出し6
<h6>見出し6</h6>
段落
markdown 表示 html
普通の文章です

普通の文章です

<p>普通の文章です</p>

普通の文章です
普通の文章その2です

普通の文章です 普通の文章その2です

<p>普通の文章です
普通の文章その2です</p>

この文は文末に半角スペースを2つ入れています
普通の文章その2です

この文は文末に半角スペースを2つ入れています
普通の文章その2です

<p>この文は文末に半角スペースを2つ入れています<br />
普通の文章その2です</p>


文末に半角スペースを2つ入れることで改行を表現することができる。全然知らなくてずっと悩んでた。

文字装飾
markdown 表示 html
*イタリック体*です イタリック体です <em>イタリック体</em>です
*太字*です 太字です <strong>太字</strong>です
***イタリック体と太字***です イタリック体と太字です <strong><em>イタリック体と太字</em><strong>です
~~打ち消し線~~です 打ち消し線です <del>打ち消し線</del>です
リンクとアドレス
markdown 表示 html

[googleへのリンク](http://google.co.jp/)です

googleへのリンクです

<a href="http://google.co.jp/ ">googleへのリンク</a>です

メールアドレスは メールアドレスはexample@example.com

メールアドレスは<a href="example@example.com">example@example.com</a>

インラインコード
markdown 表示 html
文章中に`<li>`といったコードを表示する目的で使用します 文章中に<li>といったコードを表示する目的で使用します 文章中に<code>&lt;li&gt;</code>といったコードを表示する目的で使用します
`` `バッククォート` ``の表示方法です `バッククォート`の表示方法です <code>`バッククォート`</code>の表示方法です
リスト
markdown 表示 html
* リスト1
    * リスト1-1
        * リスト1-1-1
    * リスト1-2
* リスト2
  • リスト1
    • リスト1-1
      • リスト1-1-1
    • リスト1-2
  • リスト2
<ul>
<li>リスト1
<ul>
<li>リスト1-1
<ul>
<li>リスト1-1-1</li>
</ul>
</li>
<li>リスト1-2</li>
</ul>
</li>
<li>リスト2</li>
</ul>
1. リスト1
    1. リスト1-1
        1. リスト1-1-1
    2. リスト1-2
2. リスト2
  1. リスト1
    1. リスト1-1
      1. リスト1-1-1
    2. リスト1-2
  2. リスト2
<ol>
<li>リスト1
<ol>
<li>リスト1-1
<ol>
<li>リスト1-1-1</li>
</ol>
</li>
<li>リスト1-2</li>
</ol>
</li>
<li>リスト2</li>
</ol>
* リスト1
    * リスト1-1
        1. リスト1-1-1
        2. リスト1-1-2
        3. リスト1-1-3
    * リスト1-2
* リスト2
  • リスト1
    • リスト1-1
      1. リスト1-1-1
      2. リスト1-1-2
      3. リスト1-1-3
    • リスト1-2
  • リスト2
<ul>
<li>リスト1
<ul>
<li>リスト1-1
<ol>
<li> リスト1-1-1</li>
<li> リスト1-1-2</li>
<li> リスト1-1-3</li>
</ol>
</li>
<li>リスト1-2</li>
</ul>
</li>
<li>リスト2</li>
</ul>


箇条書きリストについては、*の他に、

  • +
  • -

などでも利用できる。

引用
markdown 表示 html
> 引用された文章です
> 引用された文章です

引用された文章です 引用された文章です

<blockquote>
<p>引用された文章です
引用された文章です</p>
</blockquote>
> 引用されたこの文は文末に半角スペースが2つ入れています
> 引用された文章です

引用されたこの文は文末に半角スペースが2つ入れています
引用された文章です

<blockquote>
<p>引用されたこの文は文末に半角スペースが2つ入れています<br />
引用された文章です</p>
</blockquote>

> 引用された文章です

> 引用された文章です

引用された文章です


引用された文章です

<blockquote>
<p>引用された文章です</p>
<p>引用された文章です</p>
</blockquote>

文末に半角スペース2つ入れることで改行を表現できる。最初は気が付かないこともあると思うので注意。

整形済みテキスト
markdown 表示 html
    行頭にタブか4つの半角スペースが入ってます
    行を続けるときもタブか4つの半角スペースをいれます
行頭にタブか4つの半角スペースが入ってます
行を続けるときもタブか4つの半角スペースをいれます
<pre>
<code>行頭にタブか4つの半角スペースが入ってます
行を続けるときもタブか4つの半角スペースをいれます
</code>
</pre>

表示されているものはこのブログで利用しているpre要素のCSS。デフォルトでこうはならない。

画像
markdown 表示 html

![alt属性のテキスト](https://www.google.co.jp/images/srpr/logo3w.png)

alt属性のテキスト
※表示が大きいので手を加えて小さく表示しています

<img src="https://www.google.co.jp/images/srpr/logo3w.png" alt="alt属性のテキスト" />

境界線
markdown 表示 html
---
<hr>


短かくて分かりにくいが<hr>タグ。最低ハイフンを3つ並べればhrになる。3つ以上でもhrになる。

markdown 表示 html
タイトル1 | タイトル2
------------- | -------------
筋肉愛    | 贅肉愛
蛋白愛    | 油愛
タイトル1タイトル2
筋肉愛贅肉愛
蛋白愛油愛
<table>
<thead>
<tr>
<th>タイトル1</th>
<th>タイトル2</th>
</tr>
</thead>
<tbody>
<tr>
<td>筋肉愛</td>
<td>贅肉愛</td>
</tr>
<tr>
<td>蛋白愛</td>
<td>油愛</td>
</tr>
</tbody>
</table>


markdownはこの他にもいくつか表を作成できる記法が存在するがどれも面倒なんで使わない方がいい。そもそも表自体が作るのめんどくさい。