الكتابة في مدونة Naver بالذكاء الاصطناعي، أتمتة كاملة حتى لحظة الحفظ كمسودة
اقرأ أيضًا بلغة أخرى: Bahasa Indonesia · हिन्दी
رفع تدوينة واحدة يوميًا إلى مدونة Naver، وكان يستغرق مني أكثر من 30 دقيقة يدويًا في كل مرة، أتمتُّه إلى أن صار الذكاء الاصطناعي يتحكم في المتصفح مباشرة، فيدخل النص والصور والتعليقات والعنوان ثم يحفظها كمسودة.
بالأمس نجح الأمر من أوله إلى آخره لأول مرة. كل ما أفعله هو فتح المسودة المحفوظة، وإلقاء نظرة سريعة عليها، ثم الضغط على زر النشر. أكبر ما في هذا العمل من معنى أنه بلغ مستوى يصلح للاستخدام المباشر في عملي بالشركة.
كان الوضع هكذا
أعمل على نقل مقالات مدونة الشركة، التي كتبها مورّد خارجي على منصة inblog، إلى مدونة Naver. لا أنقلها كما هي. أغيّر الأسلوب والبنية لتناسب البحث في Naver، محرك البحث الرئيسي في كوريا. مقال واحد تقريبًا في اليوم. وكانت إعادة الكتابة تتم أصلًا بمشاركة الذكاء الاصطناعي. ومع ذلك كان يبقى في كل مرة عمل لي: إدخال المقال في محرر Naver بالنقر هنا وهناك، ورفع الصور، وتعديله مرة أخرى على أسلوبي.
لا توجد واجهة برمجية رسمية (API) لنشر التدوينات في Naver. لذا كان لا بد في النهاية أن ينقل الإنسان بيده ما كتبه الذكاء الاصطناعي. ولتقليل ذلك صنعت أزرار إشارات مرجعية (bookmarklet) وأوامر PowerShell.
| الترتيب | المنفّذ | العمل |
|---|---|---|
| 1 | الذكاء الاصطناعي | إعداد ورقة عمل فيها النص ومقترحات العنوان وقائمة الصور وتعليقاتها |
| 2 | الإنسان | نسخ «أمر جلب الصور» من ورقة العمل ولصقه في PowerShell |
| 3 | الإنسان | الضغط على «نسخ النص» ولصقه في محرر Naver |
| 4 | الإنسان | الضغط على إشارة «تحويل التنسيق» (تغيير شكل الاقتباس والفاصل) |
| 5 | الإنسان | الضغط على إشارة «إدراج صورة» بعدد الصور، واختيار الصورة من نافذة الملفات في كل مرة |
| 6 | الإنسان | النقر على خانة التعليق عند كل صورة ولصق التعليق |
| 7 | الإنسان | كتابة العنوان، ومراجعة بطاقة الرابط، ثم النشر |
بفضل الأزرار قلّ العمل فعلًا. لكن إن زادت الصور على عشر صارت النقرات عشرات. وفشل إدخال التعليقات تلقائيًا، فكنت أكتفي بنسخها إلى الحافظة ثم يلصقها الإنسان. كان المقال الواحد يستغرق 30 دقيقة على الأقل.
الطريقة الجديدة: الذكاء الاصطناعي يتحكم في المتصفح بالكود
جوهر الأمر هو Playwright MCP. Playwright أداة للتحكم في المتصفح بالكود، وحين تُربط عبر MCP يستخدمها الذكاء الاصطناعي مباشرة. هو لا يلتقط الشاشة ثم ينقر على إحداثيات. بل يقرأ بنية الصفحة ويختار العناصر ويشغّلها. لذلك هو سريع، ونادرًا ما يخطئ الموضع.
طريقة الربط كانت هكذا.
| الخطوة | المحتوى |
|---|---|
| 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 جديدًا منفصلًا، بل يتصل بالمتصفح الذي أستخدمه كل يوم. تسجيل الدخول إلى Naver موجود أصلًا، فلا حاجة لإعطاء الذكاء الاصطناعي اسم المستخدم وكلمة المرور.
معركتي مع محرر Naver
محرر Naver الذكي (SmartEditor) عنيد أمام الأتمتة. أدوّن هنا الأماكن التي تعثرت فيها فعلًا وكيف حللتها.
| موضع التعثر | الحل |
|---|---|
| لصق النص | دون استخدام الحافظة. يُرسل حدث لصق مزيف مباشرة إلى منطقة الإدخال داخل المحرر. يدخل الـ 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() };
}
تركت النشر للإنسان عن قصد. فالتدوينة تصبح علنية وتخرج باسم الشركة، لذا أتولى المراجعة الأخيرة بنفسي. وفي المقابل لا يبقى شيء آخر أحتاج إلى لمسه غير هذه المراجعة.
| المرحلة | قبل | الآن |
|---|---|---|
| كتابة المقال | الذكاء الاصطناعي | الذكاء الاصطناعي |
| تجهيز الصور | لصق أمر في PowerShell | الذكاء الاصطناعي |
| إدخال النص | نسخ ولصق | الذكاء الاصطناعي |
| ضبط التنسيق | أزرار الإشارات المرجعية | الذكاء الاصطناعي |
| الصور والتعليقات | نقرات بعدد الصور ولصق التعليقات | الذكاء الاصطناعي |
| العنوان وبطاقة الرابط | الإنسان | الذكاء الاصطناعي |
| الحفظ كمسودة | الإنسان | الذكاء الاصطناعي |
| المراجعة والنشر | الإنسان | الإنسان |
صنعته لمدونتي الشخصية أيضًا
رتبت الطريقة نفسها في مهارة (skill) منفصلة لأستخدمها في مدونتي الشخصية على Naver. الفرق عن نسخة الشركة في الأسلوب. جعلت الذكاء الاصطناعي يقرأ بضع تدوينات قديمة لي، ويستخرج في جدول عاداتي: نهايات الجمل، والرموز التعبيرية، وطول الفقرات، وطريقة وضع الصور، ثم يكتب بذلك الأسلوب. يكفي أن أعطيه مجلد الصور وملاحظات سريعة، فيكتب التدوينة ويحفظها كمسودة.
| البند | المحتوى |
|---|---|
| المُدخل | مسار مجلد الصور + ملاحظات |
| الأسلوب | مرة واحدة في البداية، يقرأ بنية آخر 5 تدوينات ويحفظ ملف أسلوب |
| عدم الاختلاق | لا يكتب اسم محل أو سعرًا أو تاريخًا غير موجود في الملاحظات أو الصور، ويتركه بعلامة [يحتاج تحققًا] |
| الصور | HEIC إلى JPG، وتصغير الكبيرة، ونسخة بلا بيانات الموقع إن أردت |
| النهاية | حفظ كمسودة. والنشر عليّ أنا |
ملفات المهارة متاحة للجميع (محتواها بالكورية). يكفي إضافتها إلى Claude كمهارة لاستخدامها.
| الملف | المحتوى |
|---|---|
| SKILL.md | الإجراء كاملًا والكود |
| my-blog.md | نموذج فارغ لملف الأسلوب |
كنت أُركّب الاتصال نفسه على حاسوب البيت لكنه متوقف في منتصف الطريق. أدخلت ملف الإعدادات، ومع ذلك لم يلتقط تطبيق Claude Playwright بعد. سأبدأ من جديد بالتحقق، في تبويب المطورين بإعدادات التطبيق، من أي ملف إعدادات يقرؤه.
في التدوينة التالية أكتب ما خطر لي بعد إنجاز هذا. لماذا شعرت بعد ظهور هذه الأداة أن عليّ أن أستعجل.