Typoraとの快適なMarkdownライフ〜はてなブログへの画像貼り付け編〜 - 会社辞めてニートになった元プログラマーの雑記帳

こんにちわ！

今回は、Typoraで下書きした記事に貼り付けた画像を、はてなブログに投稿する方法について書いていこうと思います。

初めに
はてなブログへ画像を載せる方法
Typoraへ画像を貼り付ける方法
Typoraとはてなブログの誤差を無くす一番簡単な方法
画像をローカルで管理したい場合は？
ローカルでの画像管理を楽するには？
手順1：行なっている作業のうち、小人さんに依頼する部分を決める
手順2：小人さんにお願いできる内容なのかを検討する
手順3：お願いする作業のフローチャートを書く
手順4：小人さんが理解できる言語に変換する
手順5：小人さんに、こちらの意図が正しく伝わっているかを確認する
最後に

初めに

私はブログの下書きを書くために、TyporaというMarkdownエディタを使用しています。

Typoraの機能について知りたい方は、こちらの記事をご覧ください。

Typoraとの快適なMarkdownライフ

上記の記事にも書いていますが、最低限の見易さを考慮してブログを書くのにTyporaはすごく便利なんです。

Typoraでは、書いた内容をMarkdownかHTMLの形式でコピーすることができます。

なので極端な話、コピーした内容をそのままはてなブログの編集画面に貼り付けて投稿することもできるんです。

もちろん、そんなにうまくはいきません。

Typoraとはてなブログの誤差を変換してあげる必要があります。

目次や見た目(注１)、色々ある誤差の中で、一番面倒なのが画像です。

(注１)Typoraとはてなブログの見た目は完全には一致しません。理由はTyporaとはてなブログでCSSの設定が異なるためです。CSSの設定方法についても、いずれまとめる予定です。

はてなブログへ画像を載せる方法

画像を貼り付ける方法については、こちらのヘルプを参照下さい。

記事に写真や画像を貼り付ける（編集サイドバー「写真を投稿」）

はてなブログの記事編集画面からアップロードした画像は、はてなフォトライフで管理することができます。

アップロードできる画像には次のような制限があります。

はてなフォトライフでは、無料でも毎月300MBまでの画像をアップロードでき、有料プラン「はてなブログPro」に加入すると、毎月3GBまで保存できます（どちらも総容量は無制限です）。「今月のファイル利用量」が、「写真を投稿」タブにパーセントで表示されます。

引用：はてなブログヘルプ

また、外部サービスとも連携できるようです。

GoogleフォトやInstagramなど外部の写真共有サービスから画像を貼り付けることもできます。

引用：はてなブログヘルプ

Typoraへ画像を貼り付ける方法

こちらにまとめてありますので参照下さい。

09) 画像を貼り付ける方法

Typoraとはてなブログの誤差を無くす一番簡単な方法

それは「ブログへ載せる画像を、はてなブログからもアクセスできるネット上で管理する」です。

誤差が出るのは、Typoraに載せる画像をはてなブログからはアクセスできない場所(ローカル)で管理しているのがいけないのですから、その誤差をなくしてあげればいいのです。

この方法のデメリットは次の通りです。

ネットに繋がっていないと、Typoraで画像が表示されない。
Typoraへ画像を載せる際にドラッグ&ドロップできない。
使用するサービスによって、アップロード容量の制限がある。

画像をローカルで管理したい場合は？

ネットで管理すれば楽なのは当然です。

ですが…画像をネットで管理するなら、記事もネットで管理をすればいいのです。

はてなブログには素晴らしい編集機能があるので、そこで記事も下書きすればいいのです。

私には

「ローカルでデータを管理しないのなら、Typoraを使う意味がない！」

という極端な持論があります。

この持論に従って、以降では「ローカルで管理している画像と記事を楽に、はてなブログへアップロードする方法」ついて書いていきます。

はてなブログへのアップロードは後々カスタマイズできることを考慮して、HTML編集モードで行います。

「ネットで管理すればいい」という方とは、ここでお別れでございます。

ローカルでの画像管理を楽するには？

PCを使った作業を楽するには、小人さんにお願いするしかありません。

小人さんに作業をお願いするには、次の手順を踏む必要があります。

手順1：行なっている作業のうち、小人さんに依頼する部分を決める。

手順2：小人さんにお願いできる内容なのかを検討する。

手順3：お願いする作業のフローチャートを書く。

手順4：3で書き出した手順を、小人さんが理解できる言語に変換する。

各手順の詳細については以降で書いていきます。

また、PC界には様々な言語を使う小人さんがいます。

今回はPythonで書いていこうと思います。

※「ニート生活が長すぎて、とうとう頭がおかしくなったか。」と思う方もいるかもしれないので、念のため補足しておくと、ここでいう小人さんはプログラムのことです。

手順1：行なっている作業のうち、小人さんに依頼する部分を決める

私がローカルで管理している画像を、はてなブログに貼り付けるために行なっている作業を図で表すと次のようになります。

作業シーケンス

図だけでは分かりにくい部分もあるため、保続説明します。

5)で削除しているalt属性は、画像にマウスカーソルを合わせた時に表示する文字を記述します。

鬱陶しいので消すようにしています。

また、本当はtitle属性も修正したいのですが、見た目にあまり影響しないので放置しています。
8)で画像の間違いに気づいた場合、3)〜6)をやり直す必要があります。

この内、赤枠の作業を小人さんにお願いしようと思います。

手順2：小人さんにお願いできる内容なのかを検討する

小人さんにお願いするにあたって、検討が必要な作業は次の通りです。

はてなフォトライフへ画像をアップロードする方法
Typoraとはてなブログのimgタグの違い
アップロードした画像を修正するケース

以降で、各項目について検討していきます。

はてなフォトライフへ画像をアップロードする方法

私には分かりやすいGUI操作ですが、小人さんに同じことをさせるのはかなり面倒です。

なので、小人さんに分かりやすいWebAPIを使用します。

はてなフォトライフでは次のWebAPIが用意されています。

現時点でAPIがサポートしている操作は以下です。

新規写真の投稿 (PostURI への POST)

投稿した写真のタイトルの変更 (EditURI への PUT)

投稿した写真の削除 (EditURI への DELETE)

投稿した写真の参照 (EditURI への GET)

最近投稿した写真の一覧の取得 (FeedURI への GET)

引用：はてなフォトライフAtomAPI

これをPythonで書く必要があるのですが、全部自力で書くのは面倒です。

なので、ググってみると良さそうなのが見つかりました。

https://github.com/ktrueda/hatena

色々ファイルがありますが、ライブラリ公開用なので無視して問題ありません。

必要なファイルは「/hatena/hatena.py」だけです。

このソースを使って画像をアップロードする処理は次の通りです。

from hatena import HatenaClient
HATENA_USERNAME = "xxx" #はてなブログのユーザーネームを指定
HATENA_API_KEY  = "xxx" #はてなブログのAPIキーを指定  
cli = HatenaClient(HATENA_USERNAME, HATENA_API_KEY)
url = cli.post_image("xxx") #アップロードする画像のパスを指定
print(url) #アップロードした画像のURLを出力する

xxxには任意の値を設定します。

HATENA_API_KEYには、はてなブログの「設定」メニューの「詳細設定」タブの「APIキー」を設定します。

これを流用すれば、簡単にできそうなので使わせてもらうことにします。

因みに、post_blog()で記事をアップロードすることもできるようですが、必要ないため無視します。

Typoraとはてなブログのimgタグの違い

Typoraが出力したHTMLソースのimgタグを、はてなブログに合わせて変換してあげる必要があります。

そのために、まずはそれぞれのimgタグの設定を見ていきます。

Typoraに貼り付けた画像を、HTML変換した時のimgタグは次のようになります。

＜!-- パスに全角文字を含まない場合 -->
<img src='file:///hoge/sample.png' 
     alt='sample'
     referrerPolicy='no-referrer' />

＜!-- パスに全角文字を含む場合 -->
<img src='file:///hoge/%E3%82%B5%E3%83%B3%E3%83%95%E3%82%9A%E3%83%AB.png' 
     alt='サンプル'
     referrerPolicy='no-referrer' />

referrePolicy属性はリンク先にアクセスする時のリファラー(ユーザーがサイトに流入する時に利用したリンク元のページの情報)の設定を指定するための属性です。

パスに全角文字を含む場合はURLエンコードされてしまうため、URLデコードする必要があります。

UI操作ではてなブログへ画像を貼り付けた時のimgタグは次のようになります。

<p><img class="hatena-fotolife"
        title="f:id:hira98:20181219113303p:plain"
        src="https://cdn-ak.f.st-hatena.com/images/fotolife/h/hira98/20181219/20181219113303.png" 
        alt="f:id:hira98:20181219113303p:plain" />
</p>

class属性の"hatena-fotolife"は、画像をクリックした際に大きい画像を表示するために必要な設定になります。

(参考：http://psn.hatenablog.jp/entry/2015/01/18/213001)

以上を踏まえて、imgタグの各属性の設定は次の方針で行うことにします。

属性名	方針
title	Typoraが出力したタグをそのまま使用します。
alt	鬱陶しいので設定しません。
referrerPolicy	imgタグには不要なので設定しません。
class	はてなブログの「hatena-fotolife」の設定を流用します。
src	はてなフォトライフへアップロードした画像のURLを設定します。

アップロードした画像を修正するケース

はてなフォトライフへ画像をアップロードした後に、画像の間違い気づいて修正するケースを考慮する必要があります。

１度目のアップロードでは、全ての画像をアップロードする必要があります。

ただし、２度目のアップロードでは修正した画像しかアップロードしたくありません。

なぜなら、はてなフォトライフは月のアップロード容量に制限があるからです。

これを、小人さんにうまく処理させる方法について、検討していきます。

といっても、大したことはありません。

画像ファイルを修正し上書き保存すると、ファイルの最終更新日が変わります。

この最終更新日を利用するだけです。

小人さんが行う具体的な手順は次の通りです。

1度目に画像をアップロードした時に、次の情報を記憶しておく。

・画像ファイルのローカルパス

・画像ファイルの最終更新日

・アップロードした画像のURL
2度目に画像をアップロードした際は、画像ファイルの最終更新日を確認し、１の記憶と比較して処理を分岐させる。

2-1.画像ファイルの最終更新日＞記憶している最終更新日

→1度目にアップロードした画像のURLを削除リストに追加する。(※)

　　→新たに画像ファイルをアップロードし、次の2つを更新する。

　　・画像ファイルの最終更新日

　　　　・アップロードした画像のURL

　2-2.それ以外の時

　　→何もしない。

※削除してもいいのですが、はてなフォトライフでは合計容量に制限がないため、また使う可能性も考慮して、削除リストに追加するだけにしています。

手順3：お願いする作業のフローチャートを書く

小人さんにお願いする作業をフローチャートで表すと次のようになります。

フローチャート

※ImageDBは次の情報を管理するただの.CSVファイルです。

・画像ファイルのローカルパス

・画像ファイルの最終更新日

・アップロードした画像のURL

手順4：小人さんが理解できる言語に変換する

手順3で書き出したフローチャートをPython化します。

できた、ソースはGistに載せてありますので、こちらを参照ください。

https://gist.github.com/98hira/ce8e02b0972082fd144be7d007dd6950

(ブログにソースを載せることもできるのですが、長いのでリンクだけにしています。)

このソースの使い方は次の通りです。

1.ソースファイルの環境設定を変更する。

# 環境設定
ENVIRONMENT_PATH = "/xxx/" #ImageDBと削除リストを保存するパスを指定
HATENA_USERNAME = "xxx"    #はてなブログのユーザーネームを指定
HATENA_API_KEY  = "xxx"    #はてなブログのAPIキーを指定

2.次のコマンドを実行する

python hatena.py [HTMLファイルのパス]

実行すると「[指定したファイル名]-convert.html」ファイルが出力されます。

手順5：小人さんに、こちらの意図が正しく伝わっているかを確認する

要はできたソースの動作確認です。

確認した項目は次の通りです。

1度目に実行した時

✔︎はてなフォトライフへ画像をアップロードできていること。

✔︎出力されたHTMLのimgタグは正しく変換されていること。
2度目に実行した時
- 最終更新日が変わっていない画像ファイル
  
  ✔︎はてなフォトライフへアップロードされていないこと。
　✔︎出力されるHTMLのimgタグが1度目から変わっていないこと。
- 最終更新日が変わっている画像ファイル
  
  ✔︎画像がはてなフォトライフへアップロードされること。
　✔︎出力されるHTMLのimgタグが1度目から変わっていること。

　✔︎ImageDBの最終更新日が更新されていること

　✔︎前にアップした画像のURLは削除リストに追加されていること。