ใช้ iMacros ดึงรูปจากหน้าเว็บฯ

สวัสดีจ้าหายไปสักพักนึงสำหรับคำแนะนำและบทความคุณภาพของแม่ค้าอ้อม  มาครั้งนี้ก็จะมาแนะนำการใช้เครื่องมือ iMacros สำหรับดึงรูปภาพจากหน้าเว็บฯ  แน่นอนว่า มีทั้งเนื้อหา และวีดีโอสำหรับแนะนำกันเลย  

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

ใช้ iMacros ดึงรูปจากหน้าเว็บฯ

ทำไมต้องใช้ iMacros ดึงรูปภาพ ประโยชน์คืออะไร?

เวลาเราไปสมัครเป็นตัวแทนจำหน่ายร้านขายสินค้าออนไลน์ สิ่งที่เราจะเจอส่วนใหญ่เลยคือ บรรดาร้านค้าออนไลน์เขาจะให้เราไปคัดลอกข้อมูลมาใช้งาน และโปรโมทเอง ทำให้หลายๆ คน อดท้อแท้ และเหนื่อยหน่ายกับขั้นตอนนี้อยู่มาก บ้างก็ถึงกับเลิกทำไปเลยก็มี  (แอบหยอด...ตอนนี้ร้านอ้อมไม่ใช่แบบนี้แล้วนะ มีข้อมูลให้หมด อิอิ) ขั้นตอนการคัดลอกข้อมูล ดูเหมือนจะง่ายนะคะ แต่เอาเข้าจริงๆ มันเหนื่อยมากค่ะ โดยส่วนตัวอ้อมเองต้องทำทุกเดือนเลยทราบซึ่งใจดี ของอ้อมเองต้องทำตั้งแต่ขั้นตอนแรกเลย 

กว่าจะมาเป็นเนื้อหาให้คัดลอกไปใช้งานกัน ผ่านหลายๆ ขั้นตอนมากๆ ค่ะ จึงเป็นที่มาของบทความนี้ คือ การสร้างเครื่องมือสำหรับการดึงรูปจากเว็บฯที่เราไปสมัครตัวแทนจำหน่าย  สำหรับคนที่เขามาศึกษาเพื่อนำไปใช้งานในกรณีอื่นๆ ก็สามารถใช้งานได้นะคะ เพราะโค้ด iMacros ที่อ้อมจะแนะนำ สามารถใช้งานได้หลากหลายอยู่แล้ว  เพียงแต่ว่าในบล็อคเรา จะเน้นไปทางการสร้างเครื่องมือสำหรับการทำมาค้าขายออนไลน์ เพื่อให้พ่อค้าแม่ค้าที่ขายสินค้าออนไลน์ ได้เข้ามาเรียนรู้ และทำตามกันได้  เกริ่นมานาน เข้าเรื่องกันเลยดีกว่า

โค้ดที่เราต้องใช้งานสำหรับการใช้ iMacros ดึงรูปจากหน้าเว็บฯ
เวอร์ชั่นที่ 1 แบบที่มีคลาสอ้างอิงในรูป

• 1. TAB CLOSEALLOTHERS
• 2. TAG POS={{!LOOP}} TYPE=IMG ATTR=SRC:http://*.jpg&&CLASS:cboxElement
• 3. ONDOWNLOAD FOLDER=ตำแหน่งโฟลเดอร์ที่คุณต้องการบันทึก FILE=dress_asiastreetfashion_{{!LOOP}}.jpg
• 4. TAG POS={{!LOOP}} TYPE=IMG ATTR=SRC:http://*.jpg&&CLASS:cboxElement CONTENT=EVENT:SAVEITEM
• 5. WAIT SECONDS=1

คำอธิบายโค้ด
บรรทัดที่ 1 เป็นคำสั่งของ iMacros ที่จะสั่งให้ทำการปิดแท็บทั้งหมดเมื่อเริ่มทำงาน iMacros ชุดนี้
บรรทัดที่ 2 เป็นคำสั่งที่จะให้ iMacros กดที่รูปเป้าหมายที่เราต้องการ 
ในบรรทัดนี้จะมีคำสั่ง POS={{!LOOP}} ความหมายคือ ให้ทำงานโดยอ้างอิงตัวเลขตาม loop ที่ทำงานในขณะนั้น โดยปกติตัว POS เราจะใส่ค่าตัวเลข แต่เราสามารถดัดแปลงมาใช้ค่าของ loop ที่กำลังทำงานอยู่ได้ ในที่นี้เราจะต้องสั่งให้ iMacros ทำงานแบบ play loop และอีกหนึ่งจุดที่อยากให้ลองสังเกตุคือATTR=SRC:http://*.jpg&&CLASS:cboxElement  เพราะว่าเราต้องกำหนดให้ iMacros รู้ว่าเราต้องการให้ดาวน์โหลด หรือบันทึกรูปไหนลงเครื่อง ทำให้ต้องมีการระบุ ATTR แบบเฉพาะเจาะจงลงไปอีกด้วยการใช้เครื่องหมาย && คั้นระหว่างแอททริบิวแต่ละตัวที่เราอ้างถึง  อย่างในตัวอย่างมีการอ้างถึงแอททริบิว 2 ตัวคือ SRC และ CLASS เป็นต้น
บรรทัดที่ 3 เป็นคำสั่งที่จะบอกให้ iMacros ทราบว่าเราต้องการบันทึกรูปภาพเป้าหมายไปไว้ที่ไหน ด้วยโครงสร้างคำสั่งที่ชื่อว้า FLODER และจะบันทึกรูปด้วยชื่อไฟล์อะไรด้วยโครงสร้างคำสั่งที่ชื่อว่า FILE
การตั้งชื่อรูปให้เลือกตามที่เราต้องการเลยนะคะ หากหน้าเว็บฯที่คุณต้องการโหลดมีรูปเดียว ก็ไม่ต้องคิดมากอะไร ตั้งชื่อได้เลย  แต่หากมีมากกว่า  1 รูป เราต้องตั้งชื่ออย่าให้ซ้ำกัน จึงเป็นที่มาของคำสั่ง loop ที่จะมาฝังตัวอยู่ในบรรทัดนี้อีกครั้ง
บรรทัดที่ 4 เป็นคำสั่งสำหรับการดาวน์โหลดรูป โดยจะใช้จุดอ้างอิงเป็นแอททริบิว SRC และ CLASS และคำสั่งที่เพิ่งได้เรียนรู้อีกคำสั่งคือ EVENT:SAVEITEM
บรรทัดที่ 5 จำทำการหน่วงเวลาเอาไว้ 1 วินาที ก่อนเริ่ม loop ใหม่อีกรอบ


เวอร์ชั่นที่ 2 กรณีที่แท็ค img ไม่มีคลาส และแอททริบิวอ้างอิง
บางหน้าเว็บฯเราอาจจะเจอปัญหาที่ตัวรูป โครงสร้าง HTML ไม่มีแอทบริบิวอ้างอิง นอกจาก แอททริบิวที่ชื่อว่า SRC ดังนั้นเราจำเป็นจะต้องสร้างแอททรบิวขึ้นมาใช้งานเอง  ในที่อ้อมแนะนำเป็น jQuery จ้า 
คำสั่งของ jQuery ที่เราจะเรียกใช้งานคือ addClass เพื่อที่จะเพิ่มแอททริบิวที่เราต้องการเข้าไปในแท็ค img เอาละเราไปดูคำสั่งทั้งหมดกันจ้า

• 1. TAB CLOSEALLOTHERS
• 2. URL GOTO=javascript:jQuery(".ชื่อคลาสอิลิเม้นที่ครอบรูปอยู่<SP>img").addClass("imgss");void(0);
• 3. WAIT SECONDS=1
• 4. ONDOWNLOAD FOLDER=ตำแหน่งโฟลเดอร์ที่คุณต้องการบันทึก FILE=dress_asiastreetfashion_{{!LOOP}}.jpg
• 5. TAG POS={{!LOOP}} TYPE=IMG ATTR=SRC:http://*.jpg&&CLASS:imgss CONTENT=EVENT:SAVEITEM
• 6. WAIT SECONDS=1

อ้อมจะขออธิบายเฉพาะโค้ดที่เพิ่มเข้ามานะคะ 
ก่อนที่จะอธิบาย สิ่งที่เราต้องคำนึงถึงสำหรับการใช้งาน jQuery นั่นคือ เราต้องตรวจสอบหน้าเว็บฯเป้าหมายก่อนว่ามีการเรียกใช้งาน api หรือฟังชั่นของ jQuery แล้วหรือยัง ด้วยการไปที่ส่วน head ของโครงสร้างหน้าเว็บ(ดูวีดีโอเพื่ออ้างอิง) แล้วมองหา <script src="... ภายใน ... จะมีชื่อที่เขาเรียก jquery เข้าไปใช้งาน หากพบแล้ว ก็สามารถเขียนคำสั่ง jQuery บนไฟล์ .iim ได้เลย แต่ถ้าหากไม่พบ จะต้องทำการเพิ่มการเรียกใช้งาน api หรือฟังชั่นเข้าไปก่อน วิธีการเพิ่มคำสั่งนี้อ้อมได้เขียนไว้ในอีบุ๊ค 10 กรณีศึกษา iMacros+jQuery แล้วจ้า สามารถซื้อไปศึกษาเรียนรู้กันได้ราคาไม่แพงเลย

หลังจากที่ทราบแล้วว่ามีการเรียกใช้งาน api หรือฟังชั่นของ jQuery แล้ว เราก็เพิ่มโค้ดก่อนหน้าที่จะถึงบรรทัดของการดาวน์โหลดได้เลย โดยการใช้งานเราจะเรียกใช้งานผ่าน URL GOTO แล้วก็บรรเลงเพลงรักของ jquery ได้เลยจ้า 

แต่ย้ำนิดนึงว่าเวลาจบบรรทัดให้เราเขียนคำสั่ง void(0); เข้าไปด้วยเพื่อไม่ให้ URL GOTO ทำงานนะคะ

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

คนที่อ่านแล้วยังไม่เข้าใจ สามารถรับชมวีดีโอได้นะคะ อ้อมให้แฟนบันทึกวีดีโอไว้ด้วย ในวีดีโอน่าจะมองภาพออกกันมากกว่านี้ สามารถทำตามกันได้เลยไม่ยากจ้า  

สำหรับบทความนี้ก็ขอเอาไว้เท่านี้นะคะ ฝากทิ้งท้ายไว้หน่อย สำหรับท่านใดที่สนใจอีบุ๊ค สามารถติดต่อเข้ามาได้เลยนะคะ asiastreetfashion@gmail.com ในอีบุ๊คจะอธิบายวิธีการทำงานและการใช้งาน iMacros+jQuery อย่างละเอียดเลยจ้า สามารถต่อยอดได้แน่นอนค่ะ