画像アップロードの話

ブログに画像をアップロードしたい


ツイッターに既にアップした画像をブログに持ってくるのは,Twilogとかで適当にpost開いて画像の元URL(末尾に拡張子があるやつ)をコピーしてくれば簡単なんだけど,わざわざpostするほどの画像じゃない場合に簡略化が多少困ったのでメモる

1.Google DriveやOneDriveなどのクラウドストレージを試す

ダメだった

アップロードは簡単だし自動化もできるんだけど,肝心のファイル直リンができない.ファイル直リンができないと,URL末尾が拡張子でなくなるため,ブログ内の画像に適用されるLightBox(画像を押すとポップアップしてイイ感じに表示されるやつ)に認識されないため,気持ちが悪くなる

2.スマホからできることを試す

そもそも,写真をアップロードするのがたいていスマートホンで撮った場合なので,スマホからシームレスにアップロードしてURL取得って流れにしたい.なので,スマホのギャラリー機能から飛べる共有機能を探した.
で,その中にあるTwitterのダイレクトメッセージ機能が使えそうだと考えた.Twitterのダイレクトメッセージは,自分にも送信できるため,たまにメモの代わりに使っているのだが,ここに画像つけて送ってしまえばいいという発想だ.Twitterに上げたくない画像をアップするって話だったので,正直盲点だった.気づいてよかった.
ただ,Twitterにアップロードした画像のURLには,末尾に大きさを変更する:Large等のオプションが付いている場合があるので,ブログに持ってくる場合はこれを削っておく.

*追記
ダイレクトメッセージを使う方法は自分以外参照できないのでダメだった.当たり前か.
なので,結局mdと一緒にgitにあげることにした.$ hexo new draft <記事名>でmdを作成すると,一緒にassetを格納できる同名フォルダが作成されるので,そこに画像を突っ込めばリンクできる.リンクは{% post_path <記事名> %}/<画像ファイル名>で取れる.以下に記述したimgタグのsrcにこのリンクを指定すれば参照可能.
スマホで撮った写真は自動的にOneDriveに転送されるし,そこをVMの共有フォルダにしておけば自動的にVMに写真がコピーされる.あとは共有フォルダから記事ごとのassetフォルダにコピーすれば終わりなので,普通にこの方法が一番ラクだった.

3.マークダウン記法以外で画像挿入

スマホで撮った写真はアホみたいにでかいので,リサイズしてページに貼り付けたいが,なぜかマークダウン記法では画像の大きさを指定できないらしい.なので,そのまま貼り付けるとクソでかくなって気持ちが悪くなる.今のところマークダウンでは解決できないっぽいので,画像の部分だけHTML imgタグで記述する.マークダウンは内部的にはHTMLの再翻訳みたいなものなので,mdにHTMLを書いても認識されるらしい.

1
2
[任意のキャプション](画像のURL) (マークダウン記法の場合)
<img src="画像のURL" width="任意の幅px" /> (HTMLの場合)

これで,スマホで写真撮ったら自分にDして元URLをコピーして画像をassetフォルダに移動してリンクをブログに貼り付けるってステップになったので楽.
LightBoxに適用されれば触って拡大してもわりといいかんじにリサイズしてくれるので楽.

なんかこういう備忘録的なことしか書いてないブログってだいたいアドセンス出てるイメージある.
ブログを備忘録にすると楽しくないので,他のことも書いていこうと思う.

おわり