Threadsの投稿欄に自動入力したら、改行で文章がバラバラになった話
以前の記事で、Threads APIの登録で詰まって、自動投稿を保留にした話を書いた。そのあとは、Claude Codeのブラウザ操作で、投稿画面に文章を入力して手動に近い形で投稿している。今回は、その途中で起きた「改行で文章が崩れる」問題と、対処を書く。
症状:改行を含む文章が、意図しない場所で分割された
最初は、投稿文を1回の入力操作で、改行つきのまとまりとして渡していた。ところが、投稿画面を見ると、文章が途中で切れていたり、別の入力欄に漏れていたりした。
Threadsの投稿欄は、ふつうのテキストエリアではなく、contenteditable という編集可能な領域でできている。改行の扱いが入力方法によって変わるようで、1回の入力に改行を混ぜると、「同じ投稿内の改行」ではなく、「スレッドの区切り」のように解釈される場面があった。
見た目だけでは、崩れに気づけなかった
厄介だったのは、画面のスクリーンショットを見ても、崩れに気づきにくかったことだ。URLを入れるとリンクカードに変わり、投稿欄の表示位置がずれる。そのせいで、スクリーンショットには文章の末尾の一部しか写らず、「短い1行」に見えてしまうことがあった。
実際には、別のボックスの内容が混ざっていた、ということがあった。画面の見た目だけで「入力できた」と判断していると、そのまま投稿してしまう。実際に、本文の一部が抜けた状態で投稿してしまったこともあった。
対処:改行だけを、キー入力に分ける
試した範囲でうまくいったのは、次のやり方だ。
- 文章を、改行ごとに別々の入力操作に分ける。1回の入力に改行を含めない
- 改行したいところでは、文字として入力せず、Returnキーの押下だけを別の操作として行う
- 空行を入れたいときは、Returnを2回続けて押す
この方法にしてからは、1つの投稿内で改行が正しく入るようになった。
毎回、実際のテキストを確かめる
見た目を信用できないので、入力のたびに、画面ではなく中身を直接確認するようにした。投稿欄の実際のテキストを、JavaScriptで取り出して見る。
Array.from(document.querySelectorAll('[contenteditable="true"]'))
.map(el => el.innerText)
これで、各入力欄に入っている文字列が、そのまま配列で返ってくる。想定した文章と、改行の位置まで一致しているかを見てから、投稿ボタンを押す。投稿ボタンは取り消しがきかない操作なので、ここだけは確認を省かないことにしている。
ほかに気をつけていること
- 画面のボタンを押す前に、毎回最新のスクリーンショットを撮って、位置を確かめる。リンクカードが出ると、ボタンの位置が縦にずれる
- 作成画面を開いた直後は、画面が描画されきるまで少し待ってから入力する。待たずに操作すると、画面が閉じてしまい、入力が空振りしたことがある
- 投稿直後の件数表示は、一時的にずれることがある。気になるときは、その投稿の詳細ページを開いて確かめる
自動化の線引きとしての学び
以前書いた自動化と手動の線引きの話にも通じるが、投稿のような取り消しにくい操作は、入力の過程を人が目で追えるようにしておくか、機械的に確認を挟むのが安全だと感じた。「入力は任せる、投稿前の中身確認は仕組みにする」という分担に落ち着いている。