流行ってるからやりたい
最近Xで縦長画像を4分割して投稿するの、流行ってますよね。
4枚投稿すると縦に繋がって表示されるから、インフォグラフィックとか漫画がめちゃくちゃ映える。バズってる投稿見ると大体これやってる。
自分もやりたくなったので、サクッとツール作りました。
単純に4分割したらズレる問題
最初は「画像を4等分すればいいだけでしょ」と思ってたんですよ。
でも実際にXに投稿してみると...なんかズレる。
原因はXの画像表示。4枚並べると画像間に微妙な隙間が入るんですよね。だから単純に4等分した画像を並べると、境界部分が重複して見えたり、逆に欠けて見えたりする。
隙間を削ることで解決
じゃあどうするか。分割するときに、隙間になる部分をあらかじめ削っておけばいい。
元画像: |------A------|------B------|------C------|------D------|
↓ 境界部分を削る
分割後: |----A----| |----B----| |----C----| |----D----|
X表示: |----A----||----B----||----C----||----D----|
↑ 隙間が入っても自然に繋がる
デフォルトで12pxくらい削るようにしたら、いい感じに繋がるようになった。環境によって微妙に違うかもなので、調整もできるようにしてます。
投稿しやすいようにダウンロード順を工夫
もう一つ地味に困ったのが、ダウンロードした画像をXに添付する順番。
普通にダウンロードすると1→2→3→4の順でフォルダに入るんだけど、大体のファイラーって「新しい順」で並ぶから、4→3→2→1で表示される。で、Xに添付するとき順番間違えやすい。
なので、ダウンロードを4→3→2→1の逆順にしました。こうすればフォルダ開いたときに自然と1→2→3→4で並ぶ。
ただダウンロードの完了を取れなかったので、1秒間隔空けでダウンロードさせるという荒業で対処。
本当は自動でポストに貼りたかった
正直、一番やりたかったのは「ボタン押したら自動でXに4枚添付されて投稿画面が開く」ってやつ。
でもこれ、ブラウザからだと無理なんですよね...。Web Share APIとかも試したけど、複数画像を順番通りに添付するのは対応してない。
断念してダウンロード→手動添付の形に落ち着きました。
Playwright使えばブラウザ自動操作でいけるかも？とは思ってるけど、それはもうツールじゃなくてbotになっちゃうので、今回はやめておいた。
機能まとめ
- 画像ドロップで即分割
- 縦長は縦4分割、横長は2×2グリッド（自動判定）
- 隙間調整でXでの表示を最適化
- ダウンロード順の工夫で添付ミス防止
- Xの投稿画面をワンクリックで開く
使い方
- 画像をドロップ
- プレビュー確認（ギャップ調整も可）
- 「Xに投稿」クリック
- ダウンロードされた画像を1→2→3→4の順でXに添付
- 投稿
流行りに乗りたい人、どうぞ。