以前紹介したMac用テキストエディタ「Ulysses for Mac」。前回は美しいテキストエディタとしてその使い勝手を中心に紹介しましたが、今回は「Ulysses for Mac」を使ったはてなブログの執筆というテーマでお届けしたいと思います。
前回も言及したように、このアプリではWordPressブログへの投稿機能を持っています。でもだからといってWordPressでしか使えないなんてことはありません。はてなブログでも十分活用できるのです。
おことわり：当ブログはWordPressに移行してしまいましたが、はてなブログ時代の記事もそのまま残しています。
もくじ
はてなブログの編集モードは「Markdown」に設定しよう
はてなブログのサービスを使ってブログを書いている方は当然ご存じだと思いますが、はてなブログでは3つの編集モードが選べます。それは「見たままモード」「はてな記法モード」「Markdownモード」の3種類。
Ulyssesからはてなブログに出力するときは、はてなブログ側の設定として「見たままモード」のHTML編集、あるいは「Markdownモード」のどちらかにすればいいと思うかもしれません。
しかしUlyssesでHTML出力するとUlysses側のテーマが適用されたものが出力されるので、そのままブログでは使いにくい。したがって「Markdownモード」に設定したはてなブログに対して、Ulyssesの「Markdown出力」をそのまま貼り付けるという方法がベストだという結論に至りました。
そのためには、はてなブログの設定を「Markdownモード」にする必要があります。やり方は簡単。ブログの設定画面で「Markdownモード」を選んで「変更する」をクリックするだけ。これ以降の新規投稿はMarkdownモードになります。
書きたいことを書く！
あとは思いのままに書き殴りましょう。Ulyssesは使っていて気持ちいいアプリなので、文章が次から次に浮かんでくるんじゃないかな。
僕も今この文章をiMac上のUlyssesで書いていますが、こんな感じです。
Markdown形式の文章に慣れていない人は「マークアップ」メニューから記号を挿入することもできるので、あまり気にする必要はありません。でも作業効率を考えるMarkdown記法を覚えちゃった方が早いかもしれませんね。全然難しくないしね。
文字装飾やリンクについて
文字装飾も楽チンです。太字にしたいときは、その部分を選択して「⌘ command」＋「B」を押すだけ。これはMicrosoft Wordなど他のテキスト系アプリと共通ですね。BoldのBです。
また、リンクを挿入したいときは、同じくその部分を選択して「⌘ command」＋「K」を押します。するとポップアップが現れるので、リンク先のURLを入力するだけです。かんたん！
タイトルと見出しについて
はてなブログの場合はエントリータイトルがH2に割り当てられていますので、Markdownだと＃を2コ入力します。また、記事内の大見出しはH3相当なので＃3コ、中見出しは＃4コ、という風に増やしていけばOK。設定をカスタマイズしている人は、ご自身の設定に合わせて入力してくださいね。
HTMLタグも使用可能
画像を挿入するときに、しばしばMarkdown形式では手に負えないことをやりたいことがあると思います。例えば、画像の下にキャプションを入れたいときとか、最大幅を決めて貼り付けたいときとか。
そういうときはHTMLタグを入力することもできます。やり方は半角で「〜〜」＋「半角スペース」を入力するだけ。そうすることで、その行はMarkdownの修飾がキャンセルされるので、HTMLタグを問題なく入力できるというわけ。こんな感じですね。
ただしスニペット機能はありません。自力で入力するか、別のスニペットアプリを利用するか、など工夫を凝らす必要があります。僕の場合はよく使うタグをATOKの辞書に登録しています。
また、この方法を使えばヨメレバ・カエレバなどのリンクも入れることも可能です。素晴らしいですね。
このように、Markdown記法で定められている部分はMarkdownで、それ以外は（「〜〜」を入力した上で）HTMLタグで、というような使い分けができます。
画像の挿入もできますよ
僕がブログで画像を使うときは、はてなフォトライフではなくFlickrにアップロードしています。なぜなら、もしはてなブログからWordPressに移行したいと思ったときに楽にできそうだから（当分そのつもりはないけれど）。
ですので、当ブログで使っている画像はすべてFlickr上にあって、そこからURLを指定して引っ張ってきているわけです。はてなフォトライフを使う場合でも本質的には同じことで、画像自身のURLをUlysses側に入力すればOK。
Ulyssesで画像を挿入する方法は2つ。一つは、先ほどの「マークアップ」メニューから「イメージ」を選択する方法。もう一つは、キーボードで (img) と入力する方法です。
いずれにせよ、このようなポップアップが現れます。
「イメージをドロップ」のところは今回は無視してOK。その下の「URL」欄に画像のURLを入力します。たったこれだけ。
「タイトル」と「詳細」欄はお好みでどうぞ。HTMLタグに言い換えると、「タイトル」欄はimgタグ内のtitle、「詳細」欄は同じくimgタグ内のaltを指定します。
Flickrの画像からURLを取得する
Flickrへのアップロードは通常どおり行ってください。その方法は省略しますね。
アップロードした画像を表示すると右下にシェアボタンがありますので、これをクリック。
Flickrで画像をシェアするときはサイズごとに異なるURLが割り当てられます。オリジナルサイズで持ってきたい場合は、「BBCode」を選択し、プルダウンメニューから「Original」を選択。その上に表示されているテキストをコピーします。
すると、以下のようなテキストがコピーされますので、URL欄に貼り付けます。青字の部分が画像を指定するURLですので、それ以外の部分を削除します。
僕はタイトル欄は空欄で、詳細欄に画像の説明を入れるので、このような形になります。
はてなフォトライフの画像からURLを取得する
はてなフォトライフに画像をアップロードするとこのような画面になります。
ブログに貼り付けたい画像をクリックして開くとこうなって、
画像の上で右クリックし、「イメージのアドレスをコピー」を選択して画像のURLを取得します。
これをURL欄に貼り付ければ完了です。
クイック書き出しメニューから一発コピー
はてなブログに投稿するときは、Ulyssesのクイック書き出し機能を使ってMarkdown形式で一発でコピーしましょう。
「〜〜」を使ってMarkdown修飾をキャンセルした部分もいい具合にコピーされますのでご安心ください。そのままはてなブログの編集画面に貼り付ければOKです。
あとはブラウザで書くときと同じ。カテゴリを指定して、URLを決めて、アイキャッチ画像を指定して、投稿ボタンを押すだけ。ブラウザ側での操作はこれだけです。
まとめ
ブラウザではなくデスクトップアプリで原稿を書くのは、バックアップの意味合いも含まれています。UlyssesはiCloud上にテキストデータを保存することが可能ですので、バックアップは万全です。
高価なアプリなので手を出すのは躊躇してしまうかもしれないけれど、購入してみると文章を書くのが本当に楽になりました。自信を持ってオススメできるアプリです。
