เขียนบล็อก Naver ด้วย AI อัตโนมัติเต็มรูปแบบจนถึงขั้นบันทึกฉบับร่าง

การอัปโหลดบล็อก Naver วันละหนึ่งบทความ ที่เคยทำด้วยมือครั้งละกว่า 30 นาที ตอนนี้ผมทำให้เป็นอัตโนมัติจน AI ควบคุมเบราว์เซอร์โดยตรง ใส่เนื้อหา รูป คำบรรยายรูป และชื่อเรื่อง แล้วบันทึกเป็นฉบับร่างให้

เมื่อวานทำสำเร็จตั้งแต่ต้นจนจบเป็นครั้งแรก สิ่งที่ผมทำมีแค่เปิดฉบับร่างที่บันทึกไว้ อ่านผ่านๆ หนึ่งรอบ แล้วกดเผยแพร่ ความหมายที่ใหญ่ที่สุดของงานนี้คือ มันดีพอที่จะใช้กับงานประจำได้ทันที

แต่ก่อนเป็นแบบนี้

ส่วนหนึ่งของงานผมคือย้ายบทความในบล็อกของบริษัท ที่เอเจนซีภายนอกเขียนไว้บน inblog ไปลงบล็อก Naver ซึ่งเป็นพอร์ทัลค้นหาหลักของเกาหลี ผมไม่ได้ยกไปทั้งดุ้น แต่ปรับสำนวนและโครงสร้างให้เหมาะกับการค้นหาใน Naver วันละประมาณหนึ่งบทความ งานเขียนใหม่ผมทำร่วมกับ AI อยู่แล้ว แต่ทุกครั้งก็ยังมีงานเหลือ ทั้งใส่ลงในเอดิเตอร์ของ Naver พร้อมคลิกไปมา อัปโหลดรูป และปรับให้เป็นสำนวนของผมอีกรอบ

บล็อก Naver ไม่มี API ทางการสำหรับเผยแพร่บทความ บทความที่ AI เขียนจึงต้องให้คนย้ายด้วยมือในที่สุด เพื่อลดงานส่วนนี้ ผมเคยทำปุ่มบุ๊กมาร์ก (bookmarklet) กับคำสั่ง PowerShell ไว้

ลำดับ	ใครทำ	งาน
1	AI	ทำแผ่นงานที่มีเนื้อหา ตัวเลือกชื่อเรื่อง รายการรูป และคำบรรยายรูป
2	คน	คัดลอก "คำสั่งดึงรูป" จากแผ่นงานไปวางใน PowerShell
3	คน	กด "คัดลอกเนื้อหา" แล้ววางในหน้าเขียนบทความของ Naver
4	คน	กดบุ๊กมาร์ก "แปลงรูปแบบ" (เปลี่ยนรูปแบบคำพูดอ้างอิงและเส้นคั่น)
5	คน	กดบุ๊กมาร์ก "ใส่รูป" เท่าจำนวนรูป และเลือกรูปในหน้าต่างเลือกไฟล์ทุกครั้ง
6	คน	คลิกช่องคำบรรยายของแต่ละรูปแล้ววางคำบรรยาย
7	คน	พิมพ์ชื่อเรื่อง ตรวจการ์ดลิงก์ แล้วเผยแพร่

ปุ่มพวกนี้ช่วยลดงานไปได้มาก แต่ถ้ารูปเกินสิบรูป ก็ยังต้องคลิกหลายสิบครั้ง การใส่คำบรรยายอัตโนมัติล้มเหลว เลยได้แค่คัดลอกไว้ในคลิปบอร์ดให้คนวางเอง บทความหนึ่งใช้เวลาอย่างน้อย 30 นาที

วิธีใหม่: AI ควบคุมเบราว์เซอร์ด้วยโค้ด

หัวใจคือ Playwright MCP Playwright เป็นเครื่องมือควบคุมเบราว์เซอร์ด้วยโค้ด และเมื่อเชื่อมผ่าน MCP แล้ว AI ก็ใช้งานได้โดยตรง มันไม่ได้แคปหน้าจอแล้วคลิกตามพิกัด แต่อ่านโครงสร้างของหน้าเว็บ เลือกองค์ประกอบ แล้วสั่งงาน จึงเร็วและแทบไม่คลาดเป้า

ผมเชื่อมต่อแบบนี้

ขั้น	รายละเอียด
1	เติม --remote-debugging-port=9222 ต่อท้ายเป้าหมายของช็อตคัต Whale (เบราว์เซอร์ของ Naver) แล้วเปิด Whale จากช็อตคัตนั้น
2	ลงทะเบียน Playwright MCP ในไฟล์ตั้งค่าของแอป Claude บนเดสก์ท็อป ให้เกาะกับ Whale ที่เปิดอยู่แล้ว (พอร์ต 9222)
3	ปิดแอปให้สนิทแล้วเปิดใหม่

ไฟล์ตั้งค่ามีหน้าตาแบบนี้ ผมใช้ Premiere MCP อยู่แล้วเลยมีทั้งสองตัว

{
  "mcpServers": {
    "playwright": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@playwright/mcp@latest", "--cdp-endpoint", "http://localhost:9222"]
    },
    "premiere-pro": { "...": "..." }
  }
}

จุดสำคัญคือมันไม่ได้เปิด Whale ใหม่แยกต่างหาก แต่เกาะกับ Whale ที่ผมใช้ทุกวัน ผมล็อกอิน Naver ไว้อยู่แล้ว จึงไม่ต้องให้ชื่อผู้ใช้และรหัสผ่านกับ AI

ปล้ำกับเอดิเตอร์ของ Naver

SmartEditor ของ Naver ทำให้อัตโนมัติได้ยาก ผมจดจุดที่ติดจริงและวิธีผ่านไปไว้ตรงนี้

จุดที่ติด	วิธีแก้
วางเนื้อหา	ไม่ใช้คลิปบอร์ด ส่งอีเวนต์การวางปลอมเข้าไปที่พื้นที่พิมพ์ในเอดิเตอร์โดยตรง HTML เข้าไปตามเดิม ตาราง ตัวหนา และการขึ้นบรรทัดจึงยังอยู่
ระยะห่างย่อหน้า	Naver ไม่สนใจระยะขอบของย่อหน้า บรรทัดว่างต้องใส่เป็นย่อหน้าว่างจริงๆ
รูปแบบคำพูดอ้างอิง	คำพูดอ้างอิงที่วางผ่าน HTML จะเข้าไปเป็นแบบเครื่องหมายคำพูดเสมอ วางแล้วต้องคลิกที่คำพูดอ้างอิงแล้วเปลี่ยนรูปแบบด้วยปุ่ม
ตำแหน่งรูป	ใส่บรรทัดจองที่แบบ [📸 รูป 01 | คำบรรยาย: …] ไว้ในเนื้อหา แล้วกดปุ่มรูปตรงที่ลบบรรทัดนั้นออก
ลบบรรทัด	เอดิเตอร์ดักปุ่มเลือกข้อความอย่าง Shift+Home ไว้ คลิกท้ายบรรทัดแล้วกด Backspace เท่าจำนวนตัวอักษร
อัปโหลดรูป	ไม่เปิดหน้าต่างเลือกไฟล์ ใส่ไฟล์ตรงด้วยฟังก์ชันอัปโหลดไฟล์ของ Playwright แต่ไฟล์นอกโฟลเดอร์งานจะถูกปฏิเสธ จึงต้องวางสำเนาไว้ในโฟลเดอร์งาน
ช่องคำบรรยาย	ช่องคำบรรยายจะโผล่ก็ต่อเมื่อคลิกรูปก่อน นี่คือสาเหตุที่การใส่คำบรรยายอัตโนมัติเคยล้มเหลว
ตรวจการอัปโหลด	หลังอัปโหลดทันที ที่อยู่รูปจะดูเหมือนตัวจองที่แบบ svg ซึ่งเป็นเรื่องปกติ รอไม่กี่วินาที
กดปุ่มไม่ได้	ถูกแผงด้านข้างบังอยู่ หรือกำลังมีแอนิเมชัน คำนวณตำแหน่งปุ่มใหม่ทุกครั้งแล้วคลิกด้วยเมาส์
แท็บที่ซ่อนอยู่	ถ้าแท็บอยู่ด้านหลัง หน้าเว็บจะไม่ตอบสนอง ดึงแท็บมาไว้ข้างหน้าก่อนแล้วค่อยทำต่อ

นี่คือโค้ดวางเนื้อหา พอส่วนนี้ใช้ได้ ส่วนที่เหลือก็คลี่คลายตาม

async (page) => {
  const HTML = `...HTML ของเนื้อหา...`;
  const fr = page.frame({ name: 'mainFrame' }) || page.mainFrame();
  await fr.locator('.se-component.se-text .se-text-paragraph').first().click();
  await page.waitForTimeout(400);
  await fr.evaluate((h) => {
    const ib = [...document.querySelectorAll('iframe')]
      .map(i => { try { return i.contentDocument } catch (e) { return null } })
      .find(x => x && x.body && x.body.isContentEditable);
    const W = ib.defaultView, dt = new W.DataTransfer();
    dt.setData('text/html', h);
    dt.setData('text/plain', h.replace(/<[^>]+>/g, ''));
    ib.body.dispatchEvent(new W.ClipboardEvent('paste', { clipboardData: dt, bubbles: true, cancelable: true }));
  }, HTML);
  await page.waitForTimeout(4000);
}

รูปทำวนทีละรูป รันหนึ่งครั้งจะทำสองอย่างพร้อมกัน คือ "ใส่คำบรรยายให้รูปก่อนหน้า" กับ "ลบตัวจองที่ 📸 ถัดไปแล้วกดปุ่มรูป" เมื่อถึงสถานะเลือกไฟล์ ก็อัปโหลดรูปหมายเลขนั้น วนไปจนไม่เหลือตัวจองที่ 📸

ห้ามกดเผยแพร่เด็ดขาด

ขั้นสุดท้ายคือบันทึกฉบับร่าง สิ่งที่ผมระวังที่สุดคือปุ่มเผยแพร่ต้องไม่ถูกกด แม้แต่โดยบังเอิญ ปุ่มในเอดิเตอร์ของ Naver เป็นภาษาเกาหลี 저장 แปลว่า "บันทึก" และ 발행 แปลว่า "เผยแพร่" โค้ดจะอ่านข้อความบนปุ่มก่อน ถ้าไม่ใช่ 저장 หรือมีคำว่า 발행 อยู่ จะหยุดโดยไม่กด ยืนยันความสำเร็จจากตัวเลขข้างปุ่มบันทึกที่เพิ่มขึ้น 1

async (page) => {
  const fr = page.frame({ name: 'mainFrame' }) || page.mainFrame();
  const btn = fr.locator('button[class*="save_btn"]').first();
  const label = (await btn.textContent()).trim();
  if (!/저장/.test(label) || /발행/.test(label)) return { error: label };
  const cnt = () => fr.evaluate(() => document.querySelector('[class*="save_btn"]').parentElement.textContent);
  const before = await cnt();
  const b = await btn.boundingBox();
  await page.mouse.click(b.x + b.width / 2, b.y + b.height / 2);
  await page.waitForTimeout(2500);
  return { before, after: await cnt() };
}

การเผยแพร่ผมจงใจเหลือไว้ให้คนทำ บทความจะเป็นสาธารณะและออกในนามบริษัท การตรวจครั้งสุดท้ายผมจึงทำเอง นอกจากการตรวจนั้น ก็ไม่มีอะไรเหลือให้ผมต้องแตะอีก

ขั้น	เมื่อก่อน	ตอนนี้
เขียนบทความ	AI	AI
เตรียมรูป	วางคำสั่งใน PowerShell	AI
ใส่เนื้อหา	คัดลอกและวาง	AI
จัดรูปแบบ	ปุ่มบุ๊กมาร์ก	AI
รูปและคำบรรยาย	คลิกเท่าจำนวนรูป วางคำบรรยาย	AI
ชื่อเรื่องและการ์ดลิงก์	คน	AI
บันทึกฉบับร่าง	คน	AI
ตรวจและเผยแพร่	คน	คน

ทำไว้สำหรับบล็อกส่วนตัวด้วย

ผมจัดวิธีเดียวกันเป็นสกิลแยก เพื่อใช้กับบล็อก Naver ส่วนตัวด้วย ความต่างจากเวอร์ชันที่ทำงานคือสำนวน ผมให้ AI อ่านบทความเก่าของผมหลายชิ้น แล้วสรุปนิสัยการเขียนเป็นตาราง ทั้งคำลงท้าย อีโมจิ ความยาวย่อหน้า และการวางรูป แล้วให้เขียนด้วยสำนวนนั้น แค่ให้โฟลเดอร์รูปกับโน้ตคร่าวๆ มันก็เขียนบทความและบันทึกเป็นฉบับร่างไว้ให้

รายการ	รายละเอียด
สิ่งที่ใส่	พาธโฟลเดอร์รูป + โน้ต
สำนวน	ครั้งแรกครั้งเดียว อ่านโครงสร้างบทความล่าสุด 5 ชิ้นแล้วบันทึกโปรไฟล์สำนวน
ไม่แต่งเติม	ชื่อร้าน ราคา หรือวันที่ที่ไม่มีในโน้ตหรือรูปจะไม่เขียน แต่ทิ้งไว้เป็น [ต้องตรวจสอบ]
รูป	แปลง HEIC เป็น JPG ย่อรูปที่ใหญ่เกิน และถ้าต้องการก็ใช้สำเนาที่ลบข้อมูลตำแหน่งแล้ว
จบ	บันทึกเป็นฉบับร่าง ผมเผยแพร่เอง

ไฟล์สกิลผมเปิดเป็นสาธารณะไว้ (เนื้อหาเป็นภาษาเกาหลี) ใส่ใน Claude เป็นสกิลแล้วใช้ได้เลย

ไฟล์	เนื้อหา
SKILL.md	ขั้นตอนทั้งหมดและโค้ด
my-blog.md	แบบฟอร์มเปล่าของโปรไฟล์สำนวน

ผมกำลังติดตั้งการเชื่อมต่อเดียวกันในคอมพิวเตอร์ที่บ้าน แต่ค้างอยู่กลางทาง ใส่ไฟล์ตั้งค่าแล้ว แต่แอป Claude ยังจับ Playwright ไม่ได้ จะเริ่มใหม่ด้วยการตรวจในแท็บนักพัฒนาของการตั้งค่าแอปว่ามันอ่านไฟล์ตั้งค่าไฟล์ไหน

บทความหน้าจะเขียนถึงความคิดที่เกิดขึ้นหลังทำสิ่งนี้เสร็จ ว่าทำไมพอมีเครื่องมือนี้แล้ว ผมถึงรู้สึกว่าต้องรีบ