ブログ画像は重いとSEO的に評価されない
はてなフォトで圧縮した画像をアップしようとしたら更新処理がなかった。
Wordpressにあってはてなブログにない機能の1つ
投稿した画像を圧縮する (はてなブログの場合は切り替えになる)
私のブログは記事が500を超えています
現在の画像から画像を圧縮して新規で
投稿してその画像にブログを更新するなんて無理ゲーです
ループで全ページを回すことも可能だったのですが怖かったので1ページ単位にしています (アクセスが多いページだけやればいいという考えです)
node.jsで作りたかったが非同期処理の沼にハマったので同期処理のpythonに切り替えた (ファイルIO部分)
前提
私のブログの画像は横480ピクセルを基準にしています。 PCの事を考慮すると800ピクセルぐらいがいいらしいですが それは次回以降にやります。 またはてなフォトの圧縮率は変えていません。(100%のままです) 最終的には変えると思うがもう少しテストが必要なのでそのままです。
はてなフォトの圧縮率は以下のページがオススメ
仕様
入力項目
- hatena_id
はてなブログのダッシュボード
=> 設定
http://blog.hatena.ne.jp/masalib/masalib.hatenablog.com/config
↑ここ
またはアカウト設定
- password(APIキー)
はてなブログのダッシュボード
=> 設定
=> 詳細設定
=> AtomPub
ルートエンドポイントとAPIキーをメモる
- blog_id
独自ドメインの場合はやった事がないのでわからないのですが
私の場合は
masalib.hatenablog.com
サブアカはmasalib.hatenablog.jpになります
- 対象ページ(targeturl)
画像を圧縮したいページになります。
今回は
https://masalib.hatenablog.jp/entry/2016/02/19/014308
を使用しています
動き
- 対象ページのURLからentryIDを取得する
- entryidとblog_idからブログデータを取得する
- 更新データから画像のURLを取得する
- 画像URLから画像をダウンロードして圧縮してはてなフォトライフに投稿する
- はてなフォトライフの投稿結果(XML)から画像URLを特定する
- はてなブログの更新のXMLを用意して元々の画像URLと投稿した画像URLを切り替える
- 切り替えたXMLをはてなブログAPIに送信(PUT送信)する
正常系がやっとできた(^o^)
結果
№ | 圧縮前 | 圧縮後 | 圧縮率 |
---|---|---|---|
1 | 114KB(1024×768) | 16.4KB(480×360) | 14.3% |
2 | 74.9KB(480×640) | 31.9KB(480×640) | 42.5% |
2はピクセルが同じだけど圧縮できているのかのテストです
変換前
№1
№2
変換後
№1
№2
できていない事(todo)
- はてな記法とmarkdown形式に対応していない
- pngを弾く処理がない。(PNGはサイズが重くなるらしいのでやらない方向)
- gifを弾く処理がない。(アニメーションとかはいると難しいのでやらない)
- 画像が特定のサイズ(横480)未満の場合にリサイズのみおこなう
- 画像の横幅を指定しない場合はリサイズのみおこなう
- テストとかバリデーションの追加
- colaboは一般の人は無理ゲーなので画面を用意する
- 非公開の場合はURLがとれないのでentry_idからできるようにしないといけない
Source
バグがいっぱいあるSourceです。
あとでgithubに移行するかも・・・
colab.research.google.com 当たり前ですが、何も保証しません。自己責任
参考URL
- 正規表現: https://www.lifewithpython.com/2017/12/python-regular-expression-multiple-lines.html
- オンラインで正規表現チェック:https://regex101.com/
- 画像の変換処理:http://www.mwsoft.jp/programming/computer_vision_with_python/1_1_pil.html
- 画像を読み込む: https://qiita.com/zabeth129/items/b355ebfc82d38bc49778
- colabで画像を表示:https://qiita.com/kaityo256/items/ce34f412ceec1b72755d
- 画像のりサイズ: https://qiita.com/haminiku/items/e53aa1d9bda77d2efe28
- はてなフォトに投稿:https://teratail.com/questions/140918
- pythonのバリデーション:https://qiita.com/fujiy/items/f738aa9d0bb7427e07a4
- pythonでプログラム実行中に入力を求める場合:https://qiita.com/yokotate/items/48fa81121060a82a3258
- はてなブログapi更新:https://cartman0.hatenablog.com/entry/2017/10/18/%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%96%E3%83%AD%E3%82%B0API%E3%81%A7%E8%A8%98%E4%BA%8B%E3%81%AE%E5%8F%96%E5%BE%97%E3%81%A8%E7%B7%A8%E9%9B%86#%E3%83%A1%E3%83%B3%E3%83%90URI%E3%81%A7%E8%A8%98%E4%BA%8B%E3%81%AE%E7%B7%A8%E9%9B%86