NAVERブログ自動化、コピペしたらどうしてこうなるの? | 赤羽レッド開発日誌 07

開発日誌07:ネアとレッドがブログ記事をNAVERへお引っ越し
記事の準備、写真の添付、動画リンク、読者の画面の確認まで、ネアと一緒に見る4コマ漫画

こんにちは! スナックガールズの赤羽レッドです。

WordPressではかわいかったのに、NAVERへ移したら吹き出しも改行もどうしてこうなるの? 今日はネアとNAVERブログの自動化を準備しながら、説明は読みやすいテキストに、短い会話はカード画像にしてみます。コピペで終わらせるには、あたしたちの顔がもったいないでしょ!

今日はネアとNAVERブログを開いてみます。WordPressに書いた記事を、NAVERでも読めるように移すお話です。

赤羽レッド

「文章も写真もそろってるし、移すだけならすぐ終わるよね?」

タイトルをコピーして、本文を貼って、写真を入れる。それでよさそうなのに、準備してみると写真の出典が変な場所に残ったり、元の記事にあった動画をどうするか考えたり。

うーん。貼り付けボタン一つで済ませたかったんだけどな。

SNACK・3行まとめ

  1. WordPressで公開した韓国語の記事を、NAVER用のタイトル・本文・タグ・写真にまとめて移します。
  2. 写真はNAVERに直接添付して、出典は近くに。移しにくい動画は、開けるリンクでつなぎます。
  3. ネアらしい言葉に整えて、公開した記事とブログの一覧でもちゃんと見えるか確認します。

同じ記事を、NAVERでも読めるように!

あたしたちのニュースの原文は、WordPressで作ったGame Sunakkuのサイトにあります。WordPressは、文章や写真を載せたり、サイトの見た目を整えたりできる道具です。この開発日誌も、そこで公開してます。

NAVERブログにも記事があれば、普段そっちでブログを読んでいる人に、あたしたちのニュースを見つけてもらえるかも。そこで、すでに書いた韓国語の記事を持っていくことにしました。

同じ記事を二か所で一から書くと、価格や日付を直すときも、どっちを直したか気にしないといけません。あたしたちは、WordPressの原文を基準にして、NAVERで読みやすい形に整えて持っていく方法を選びました。作業メモでは「ミラーリング」と呼んでます。ここでは、元の記事を別の場所にも移して見せる作業、と思ってもらえれば大丈夫です。

原文が変わったときに、NAVERの記事も直す必要があるかは別に確認します。一度つないだからといって、その後の修正が全部自動で反映されるわけではないので。

前回は、家のパソコンとサーバーで作業を分担する話をしましたね。家ではCodexというAI開発ツールと一緒に、プログラムを作ったり直したり。インターネット経由で借りたコンピューターのVPSにはHermesを置いて、準備した仕事を実行してもらってます。Discordは、そのHermesにお願いして結果を受け取るチャットの窓口です。

今回はそのサーバーに、NAVERへ移す記事を準備して、編集画面に入れる仕事を任せてみたんです。

貼り付ける前に、荷物をまとめよう

まず、公開済みのWordPress記事を読んで、NAVER用の素材セットを作るところから準備しました。

中身はタイトル、本文、短い紹介文、タグ、写真と出典。タグは、記事のテーマを表す検索キーワードみたいなものです。本文の最後にハッシュタグの行をそのまま付けるより、NAVERのタグ入力欄に入れられるよう、別に用意しました。

原文の中で繰り返している段落や、サイト名の付け足しも整理します。NAVERで初めて読む人に向けた記事なので、別のサイトで使っていた表示まで全部持ってこなくてもよさそうですよね。

こうして用意した素材を、ログイン済みのサーバーのブラウザーに持っていきます。ブラウザーは、Chromeみたいにウェブページを開くアプリのこと。ここではNAVERの記事編集画面を開くために使います。

あたしたちが組み込んだマクロは、人がやっていたタイトル入力、写真の選択、本文の貼り付けといった操作を、プログラムで進める仕組みです。編集画面に内容を入れる段階と、実際に公開する段階は分けてあります。入った内容を先に見られるように。

9月初めには、この素材セットとブラウザーへの入力を準備して、決まった時間に新しい記事を確認する作業もつなぎました。ただ、画面やログイン状態が変わると止まることがあるので、どこまで進んだかも記録するようにしてます。

ここまでなら、けっこう順調そうでしょ?

次は写真です。

写真、記事にも一覧にも出てほしいよね

ブログの一覧に小さく出る代表画像を、サムネイルといいます。記事を開く前に見る、あの小さな写真です。

あたしたちは、NAVERの本文に写真が出るかと、一覧にサムネイルが出るかを、それぞれ確認するように手を入れました。写真が一枚入っただけで両方の確認を済ませると、見落とすところが出てくるんです。

ネア

「写真はNAVERの記事に直接入れて、一覧でも見えるか確認しましょう。」

そこで、原文から持っていく画像ファイルを用意して、NAVERの編集画面の「写真追加」から添付する方法を入れました。NAVER側に写真がアップロードされたことを確認してから、本文を続けて入れる順番です。

このとき、元の本文からも同じ写真を持ってくると、二回出ちゃいますよね。先に添付した代表画像は、本文を移すときに重複しないようにしました。

9月6日の確認記録には、実際に公開した記事を一件開き直して、本文の写真と、パソコン・スマホの一覧のサムネイルまで見た結果があります。一覧も文章中心の表示と写真中心の表示があるので、それぞれ確認してます。

あ、読者が見るのは編集画面じゃないんだ。ネアと確認する画面が一つずつ増えていく理由、ここですね。

写真の出典、なんでそんな下にあるの?

写真の下に付ける短い説明文を、キャプションといいます。どこから持ってきた写真かを書く出典も、ここに置けます。

9月8日には、ロボット掃除機の記事を移す途中で、この部分に引っかかった記録があります。写真は入ったのに、出典の文がすぐ下に付いてこなくて、要約の後ろに残ってしまったんです。

赤羽レッド

ちょっと待って。写真はここなのに、出典はなんであんな下にあるの?

原因は、文字の中に入っていた装飾でした。画面では普通の一行に見えても、中には「ここを太字にして」といった指定が入っていることがあります。ウェブページで使うHTMLには、こうした文章の構造や表示の指定が書かれています。

当時のプログラムは、その装飾が入った出典の文をうまく見つけられませんでした。そのため、出典を写真の下に移す処理から抜けてしまったんです。

修正では、内側に装飾が入っていても出典の文を見つけて、読者に見える出典の文字を代表画像のすぐ下に置くようにしました。ほかの本文写真のキャプションは、それぞれの写真のそばに残します。

その記事は出典の位置確認で止まり、公開前の待機状態になりました。この修理の記録で確認できるのは、プログラムを直して、編集画面に入った内容を確認したところまでです。

写真、出典、次の段落。読むときは簡単な順番なのに、移すプログラムにもその関係を教えてあげないといけないんですね。

動画を見に行けるリンクを残そう

写真の次は動画でした。

WordPressの記事の中で再生できていた動画をNAVERへ移すときは、同じ再生画面がそのまま入るか確認が必要でした。あたしたちの自動化でも、この問題で記事の移動が止まったことがあります。

そこで、元の動画を見られるアドレスがある場合は、「元の動画を見る」というリンクを本文に残す方法を入れました。

AIKO

「動画は『元の動画を見る』リンクでつなぎます!」

ただ、ここでも確認用のプログラムをもう一度直しました。NAVERの編集画面が、貼り付けたリンクを独自の形に変えて保存するので、最初に探していた形と違っていたんです。

簡単にいうと、ドアはあるのに、あたしたちが違う場所で取っ手を探してた感じ。

そこで、編集画面の中に行き先のアドレスが入っているかと、公開した記事で読者がリンクを押して動画を開けるかを分けて確認しました。動画のアドレスが見つからないときは、その部分を黙って落として進めず、記事を保留にするようにしています。

9月8日には、この方法でストリートファイターの記事を公開し、公開済みのスマホ向けページで動画リンクまで見直した記録があります。

そのときNAVERへ移した記事を見る

アドレスが入ったという記録だけで終わっていたら、見落とすところでした。知りたいのは結局、読んでいる人が動画を開けるか、ですもんね。

ネアのブログだから、話し方も見てみよう

文章や写真を移している間に、ブログの名前も「ネアのスナックニュース」に整えました。9月3日に、紹介文、上のヘッダー画像、カテゴリー名を見直した記録があります。

それなら、記事を開いたときにもネアが話しかけてくれたらうれしいですよね。

キラリ

「記事を開いたら、ネアが先にあいさつしてくれるといいな!」

そこで、すでに公開していた記事も見直しました。ネアが最初にあいさつして、ニュースのポイントを伝えてから、「ネアの確認メモ」で気にしておきたいことを添える形です。以前の「編集部の視点」のような表現も整理しました。

この作業は、そのとき対象にした既存の記事39件まで進めました。9月4日の記録には、39件を修正し、公開済みのスマホ向けページでネアの紹介と確認メモが入ったか見直した結果が残っています。

もちろん、ネアの名前が入っているか探すことと、ネアらしく読めるかを見ることは別ですよね。文ごとに名前だけ付けられても、ネアもちょっと照れくさそう。

ここは、これから一緒に整えていきたいところです。難しい話をもう一度かみくだいたり、見落としやすい条件を教えてくれたり。ネアの一言で、ちょっと読みやすくなる場所を探してみたいです。

公開したら、読者みたいに開いてみよう

ネア

「レッド、公開した記事も一緒に開いてみましょう。」

ネアと今回の記録を見ながら、次も確認したいことをこんなふうにメモしました。

  1. 写真と出典は近くに。 写真のすぐ下で、どこから持ってきた画像か読めるようにします。
  2. 動画は見に行けるところまで。 再生画面を移すのが難しければ、実際に開ける元の動画へのリンクを残します。
  3. 公開した記事と一覧、両方を見る。 本文がきれいでも、一覧のサムネイルは別に確認します。
  4. 結果があいまいなら、先に見直す。 もう公開されているかもしれないので、もう一度公開ボタンを押す前に記事を探します。

最後の項目も、プログラムに入れた処理です。公開を押した後に結果の確認が途切れたら、同じ記事をすぐにもう一度出す前に、公開された結果から確認するようにしました。ネアのブログに同じ記事が二つ並んだら、二人で気まずくなっちゃうので。

コメントは、新しいものを読んで返信の下書きを作るところまで任せています。実際の返信は、人が内容を読んでから登録する形です。読者が何を聞いてくれたかは、あたしたちも読みたいですしね。

今回振り返ったのは、9月初めに移して、止まって、直した作業です。これから新しい記事で写真や文章が変わっても、同じ基準で見続ける必要があります。

ひとまず、ネアと次の記事を見るときは、「入った?」の後にもう一言足してみます。

「読者の画面でも大丈夫?」

次はキラリとインスタへ!

NAVERでは、長い文章と写真、動画をどうつないで見せるかを考えました。次はキラリのInstagramです。

今度は写真が先に目に入る場所ですね。同じ絵でも、どこを切り取って見せるか、写真の下に何を書くかから一緒に見ていきたいです。

赤羽レッド

キラリ、今度は写真から一緒に見よう!

#バイブコーディング #開発日誌 #AIコーディング #AI自動化 #ブログ自動化 #AIコーディング初心者 #スナックガールズ #NAVERブログ #WordPress #コンテンツ自動化

コメント

0

ログイン不要。投稿したブラウザから編集・削除できます。

すべてのコメント 0

한국어 · English · 日本語

まだコメントはありません。最初のひとことをどうぞ。

この記事をシェア