A Day in the Life

ブログ画像選択の Picker を作った

このブログの新しい文章は、markdown で書いている。といっても以前はてなブログでも markdown で書いていたのでほぼ困っていなかったのだけど、とりわけ困るのは画像貼り付け。

はてなブログではフォトライフにアップした画像を簡単に貼り付けられるのだけど、テキストエディタ(というか VSCode)の markdown では簡単に画像をピックアップして貼り付けられない。また markdown は文章表現は強いけど、画像レイアウトの表現は普通に html 要素を書くケースがほとんど。

ので、そのため自分のはてなフォトライフにアップした画像を選択して html をクリップボードにコピーする Pickerを作った。 レイアウトとしては

  1. 普通に貼り付け
  2. 横 100%で貼り付け
  3. グルーピングで貼り付け

ができるようにしている。

横 100% で貼り付ける

ブログの本文は通常、親要素が左右の margin / padding を入れていることが殆どで、そのため横幅 100%画像貼り付けが普通には出来ない。そもそもそんな構造で作るのが悪い、というのは最もなのだけど、親での指定が楽なのでどうしてもやってしまう。

なので、良くないやり方(将来的にはうまく動かない、ブラウザによってはうまく動かない)なのだけど、だいたいうまくいく CSS を指定して無理やり行うようにした。

.photos-full-width img {
  display: block;
  max-width: none !important;
  max-height: none;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

グルーピングして貼り付け

何枚も画像を貼りたいが、一枚一枚大きなサイズでなくても良い、適当に貼り付けたい、JS 使わないで CSS だけでやりたい、そんなときに便利なのが flexbin という CSS 。

これを使うことで、いい感じにグルーピングができる。このブログのスタイルシートは Sass で書いてるので、flexbin を使いやすい (Sass だと細かくカスタマイズできる) のも良い。

ただ完全に縦横比が分かって計算して出しているわけではないので、画像の縦か横がちょっと切れてしまうけどしょうがない。完ぺきを求めるなら、JS で書くのが手っ取り早いけど、今のところそこまでのモチベーションは無いから、適当でだいたいうまくいく、で十分だ。

その他・自分のフォトライフ画像一覧を取得

フォトライフの Atom フィード があるので、そこから持ってきて表示している。CORS の関係で、Google Cloud Functions を挟んで CORS を許可してちょっと整形して、 HTTPS API 経由でとってきてる。Google Cloud Functions、ちゃんとデプロイできるように環境を整えるとすごく簡単に使えるようになるのだけど、そこまでが手間感がある。

関連するかもエントリー

Google Photos の画像をダウンロードして、ブログの画像を別の画像に差し替える
Google Photos は様々な Web サイトから Google Photos にアップロードした写真を貼り付けできるjpgをママ貼り付けでき、サムネイルサイズも自由なサイズを選べ、Google の高速なサーバ経由で配信され、しかもアップロードしたオリジナルファイルもダウン...
Google Photos は様々な Web サイトから Google Photos にアップロードした写真を貼り付けできるjpgをママ貼り...
【今月二度目】 Google Picker API がら取得した Google Photos の画像が利用できない、ヤァ!ヤァ!ヤァ!
これは日記に画像を貼り付けできない、悲しみのポエムである。一度目は3月10日(JST)あたりから発生していて、Picker API で取得した画像が数分後には403になる。3月13日ごろ直ったが、発行されるサムネイルのURLが仕様が変わったのか、めちゃ長くなった。二度目は3月25...
これは日記に画像を貼り付けできない、悲しみのポエムである。一度目は3月10日(JST)あたりから発生していて、Picker API で取得し...
カレイの煮つけ
白身魚の煮付けは美味しいなぁ。はてなブログのテーマの殆どはブログ本文全体を囲っている要素にmargin/paddingがあるのだけど、無視して写真を横幅100vwで表示してみるテスト。CSSのみでの親要素のmargin/padding無視の指定は将来動くかどうかわからないようなト...
白身魚の煮付けは美味しいなぁ。はてなブログのテーマの殆どはブログ本文全体を囲っている要素にmargin/paddingがあるのだけど、無視し...