Xで流行りの縦長4分割投稿、ツール作ってみたら意外とハマりどころがあった
流行ってるからやってみたかった
Xのタイムライン見てると、縦長画像を4分割して投稿するテクニックが流行ってる。4枚投稿すると縦に繋がって表示されるから、インフォグラフィックとか漫画がすごく映えるんですよね。
自分もやりたくなったので、サクッとツールを作ることにした。
「画像を4等分するだけでしょ、簡単じゃん」
...と思ってたんだけど、意外とハマりどころがあった。
ハマりポイント1: 単純に分割するとズレる
最初のバージョン、普通に画像を縦に4等分して保存するだけだった。
実際にXに投稿してみると、なんか境界がおかしい。繋がってるはずの部分がズレて見える。
原因を調べたら、Xって4枚の画像を並べるときに数ピクセルの隙間を入れるんですよね。だから単純に4等分した画像だと、その隙間の分だけ表示がズレてしまう。
解決策はシンプルで、分割するときに隙間になる部分をあらかじめ削っておくこと。
const halfGap = Math.floor(gap / 2)
if (i === 0) {
// 1枚目: 下端を削る
startY = 0
cropHeight = partHeight - halfGap
} else if (i === 3) {
// 4枚目: 上端を削る
startY = i * partHeight + halfGap
cropHeight = originalHeight - startY
} else {
// 2,3枚目: 上下両端を削る
startY = i * partHeight + halfGap
cropHeight = partHeight - halfGap * 2
}
デフォルトで12pxくらい削るようにしたら、Xで見たときにちゃんと繋がって見えるようになった。
ハマりポイント2: ダウンロード順がバラバラになる
4枚の画像を連続でダウンロードすると、ブラウザによっては順番がバラバラになる。しかもダウンロードフォルダって大体「新しい順」でソートされるから、素直にダウンロードすると逆順で並んでしまう。
これ、Xに添付するとき地味にストレスになる。「えーと、1はどれだっけ...」ってなる。
解決策として、ダウンロード順を4→3→2→1の逆順にした。さらに各ダウンロード間に1秒のインターバルを入れて、順番が確実に保たれるようにした。
こうするとダウンロードフォルダを開いたときに自然と1→2→3→4で並ぶ。
ただダウンロードの完了を取れなかったので、1秒間隔空けでダウンロードさせるという荒業で対処。
断念したこと: 自動でXに貼り付け
本当は「ボタン一発でXの投稿画面に4枚添付された状態で開く」ってのをやりたかった。
でもこれ、ブラウザからだと無理だった。Web Share APIも試したけど、複数画像を特定の順番で添付する機能はない。intent URLも画像添付には対応してない。
Playwrightとか使えばブラウザ自動操作でいけるかもとは思う。でもそれはもうWebツールじゃなくてbotになっちゃうし、ユーザーに環境構築させることになる。今回はダウンロード→手動添付の形で妥協した。
気が向いたらCLIツールとして別で作るかもしれない。
追加した機能
アスペクト比の自動判定
最初は縦分割だけだったけど、16:9みたいな横長画像も分割したいよねってなった。横長を縦4分割すると細長い短冊になっちゃうので、2×2グリッドで分割するモードを追加。
アスペクト比を見て自動で判定するようにした。
const detectSplitMode = (width: number, height: number): SplitMode => {
const aspectRatio = width / height
return aspectRatio > 1 ? 'horizontal' : 'vertical'
}
リアルタイムプレビュー
左に元画像（どこで切れるか赤線表示）、右にXでの表示イメージを並べて表示するようにした。ギャップ調整するとリアルタイムで反映される。
完成したもの
機能をまとめるとこんな感じ。
- 画像ドロップで即分割
- 縦長→縦4分割、横長→2×2グリッド（自動判定）
- 隙間調整でX表示を最適化
- ダウンロード順の工夫
- Xの投稿画面ワンクリックで開く
「画像を4分割する」というシンプルな機能でも、実際に使いやすくしようとすると細かいところで工夫が必要だった。
流行りに乗りたい人はぜひ。
Discussion