Category: ไม่มีหมวดหมู่

  • การสร้าง Dashboard บน Azure DevOps

    เวลานี้ไม่ว่าจะไปที่ไหน เรามักจะได้ยินคำว่า “Dashboard” บ่อยมาก แล้ว Dashboard มีประโยชน์และสร้างอย่างไร  วันนี้เรามีวิธีการสร้าง Dashboard ง่ายๆ เพื่อใช้ในการติดตามโครงการมานำเสนอค่ะ โดยจะใช้เครื่องมือที่เรียกว่า Azure DevOps โดยเราต้องสร้างโครงการบน Azure DevOps ก่อนนะคะ (ครั้งหน้าจะมาแนะนำการสร้างโครงการบน Azure DevOps รอติดตามกันนะคะ)

    หลังจากสร้างโครงการบน Azure DevOps แล้ว ในการบริหารโครงการจะมีการแบ่งงานออกเป็น Work Item ในแต่ละ Work Item ก็จะมีการมอบหมายงานหรือ Assigned ให้กับผู้ร่วมโครงการแต่ละคน จากนั้นจะมีการติดตามว่าได้ดังเนินการไปถึงไหน ใช้เวลาเท่าไหร่ ตัวอย่างการสร้าง Work Item ตามภาพ ข้างล่าง

    เมื่อมีการมอบหมายงานเรียบร้อย เราก็สามารถติดตามสถานะการดำเนินงานต่างๆ ได้ โดยการสร้าง Dashboard ซึ่งให้เลือกโครงการที่ต้องการติดตาม จากนั้นไปที่ “Dashboards” และกดปุ่ม “New Dashboard” ซึ่งจะมี Template หลากหลายรูปแบบให้เลือก ตามภาพข้างล่าง

    ตัวอย่าง เช่น หากต้องการทราบว่า มีงานใดที่มอบหมายให้ตัวเองและยังไม่ได้ทำให้เสร็จสิ้นบ้าง ให้เลือก Template Assigned to Me แล้วกดปุ่ม Add ผลลัพท์จะได้ตามภาพข้างล่าง

    หากต้องการดูผลการดำเนินงานของโครงการก็สามารถเลือก Template เป็น Burndown ซึ่งจะได้ผลลัพท์ดังข้างล่าง

    หากต้องการดู Dashboard ผลการดำเนินงานของโครงการ ไม่ว่าจะเป็น การแบ่งงานในแต่ละ Work Item หรือระยะเวลาผู้ที่ได้รับมอบหมายดำเนินการในแต่ละ Work Item ของโครงการ เราสามาถสร้าง Dashboard โดยเลือก Template เป็น “Chart for Work Items” และกำหนด รายละเอียดที่เราต้องการ เช่น ประเภทของ Chart  เป็นต้น ตามภาพข้างล่าง

    นอกจากนี้ยังสามารถสร้าง Dashboard จาก Query ที่เราได้สร้างไว้เพื่อให้ได้ Dashboard ตามที่เราต้องการ ตัวอย่างเช่นการส้ราง Dashboard จาก Query ที่ชื่อ Completed Task และ All Work Item ที่ได้สร้างไว้ ตามภาพข้างล่าง

    Dashboard เวลาที่ใช้ในการดำเนินการของแต่และคนตามที่ได้รับมอบหมายและจำนวนเวลาที่ใช้ทั้งหมดในโครงการ

    Dashboard จำนวน Work Item ที่แต่ละคนได้รับมอบหมายและจำนวน Work Item ทั้งหมดในโครงการ ไม่ว่าจะเป็นระดับ Task, User Story หรือ Feature

    ตัวอย่างการสร้าง Query เพื่อดูรายละเอียดของการดำเนินการทุกขั้นตอน (Work Item Type) และทุกสถานะ (State) เมื่อ Run query จะได้ผลลัพท์ตามภาพข้างล่าง

    เป็นไงบ้างคะ ไม่ยากเลยใช่มั้ย หวังเป็นอย่างยิ่งว่าคงมีประโยชน์กับท่านผู้อ่านทุกท่าน นะคะ ขอบคุณที่ติดตามค่ะ

  • Blazor : การเรียกใช้ JavaScript จาก C#

    ถ้าจะพูดว่า “Blazor เป็น SPA Framework ที่ใช้ C# แทน JavaScript” ก็ไม่ถูกต้องเสียทีเดียว เนื่องจากว่า JavaScript เป็นภาษาที่มีมานานแล้ว และใช้งานกันอย่างแพร่หลาย สามารถใช้ทำอะไรได้อย่าง แต่ Blazor นั้นถือได้ว่าเป็นน้องใหม่เพิ่งเข้าวงการ ที่บางครั้งก็ยังต้องพึ่งรุ่นพี่อย่าง JavaScript อยู่ดี ตัวอย่างเช่น การดึงข้อมูลพิกัดตำแหน่ง (Location) จาก Browser สามารถทำได้ด้วย JavaScript แต่ C# ทำไม่ได้ ดังนั้น Blazor ก็เลยจัดการกับปัญหานี้โดยการให้ C# ทำงานร่วมกับ JavaScript ซะเลย อะไรที่ C# ทำไม่ได้ ก็ให้ JavaScript ทำแทนไปเลย

    ตัวอย่างแอพต่อไปนี้จะเป็นการเรียกใช้ Bootstrap modal

    หลังจากที่สร้าง Blazor Server App Project ตามขั้นตอนใน Blog(เขียนเว็บแอพแบบ SPA ด้วย Blazor (C#)) แล้ว ทำตามขั้นตอนดังนี้

    1. เปิดไฟล์ _Host.cshtml
    2. เขียนโค้ดอ้างอิง jquery.min.js และ bootstrap.min.js
    3. เขียนโค้ดฟังก์ชั่น toggleModal เพื่อสั่งเปิดปิด Modal

    4. เปิดไฟล์ Index.razor
    5. Inject JSRuntime
    6. สร้างปุ่มสำหรับคลิกเพื่อเปิด Modal โดยใส่ onclick event ให้เรียกฟังก์ชั่น ShowModal
    7. สร้าง Bootstrap modal กำหนด id=”exampleModal”
    8. โค้ด C# ฟังก์ชั่น ShowModal สั่งเปิด Modal

    9. กด F5 เพื่อดูผลลัพธ์

    เพียงเท่านี้ก็จะสามารถเรียกใช้งาน JavaScript ผ่าน C# ได้แล้ว จะเห็นว่ามันไม่ได้ยากอย่างที่คิด

  • Checker Plus for gmail ~ ชีวิตที่ง่ายขึ้น

    สวัสดีท่านผู้อ่านทุกท่าน … Blog วันนี้ผู้เขียนจะขอนำเสนอ Extension ที่มีชื่อว่า Checker Plus for gmail ซึ่งมีไว้สำหรับช่วยเพิ่มความสะดวกสบาย (หรือไม่ก็ช่วยเพิ่ม level ความขี้เกียจ อันนี้ก็ไม่แน่ใจนะ 55+)

    คำถามถัดมา แล้วมันน่าสนใจตรงไหน ?

    ก็ต้องขอบอกก่อนว่าคงเป็น Extension อีกตัวที่เหมาะกับการทำงานของหลายๆ ท่าน ที่ในแต่ละวันต้องเช็ค Email ตอบกลับ รับแจ้งปัญหา ต่างๆนาๆ อยู่เป็นประจำ เช่น งานบริการถาม-ตอบปัญหา ให้กับลูกค้า ดังเช่นผู้เขียน เป็นต้น

    เจ้า Checker Plus for gmail ก็จะถือว่าค่อนข้างสะดวกมากเลยแหละ สำหรับคนที่อยากเช็ค Email แต่ไม่อยากเปิด Tab ใหม่  ดังนั้นเมื่อเราติดตั้งเจ้า Extension ตัวนี้ไว้ ทุกครั้งที่เราจะเช็ค Email ก็สามารถกดที่ Checker Plus ที่เราติดตั้งได้เลย มันก็จะแสดง Email ทั้งหมดในกล่อง Inbox ของเรานั่นเองงงงง

    วิธีการก็ง่ายมากๆ ปะ … เรามาเริ่มกันเล้ย

    ขั้นตอนที่ 1 ในหน้า Browser google chrome เข้าไปที่ More tool –> เลือก Extensions

    ขั้นตอนที่ 2 จากนั้นให้เข้า Open Chrome web store ค้นหาคำว่า “Checker Plus for gmail”

    ขั้นตอนที่ 3 เราก็มาเริ่มต้นการติดตั้งกันเลย คลิก “Add to chrome”

    ขั้นตอนที่ 4 เมื่อติดตั้งสำเร็จ ให้สังเกตุมุมบนด้านขวาของ Browser ได้เลย แท่น แท่น แท๊นนน … สีแดงๆ นั่นแหละ พระเอกของเราในวันนี้

    ขั้นตอนที่ 5 ลองคลิกเข้าไปดูได้เลย เราก็จะเห็น Inbox ใน gmail ของเราทั้งหมด หลังจากนี้เราก็ไม่ต้องมานั่งกังวลอีกต่อไป ว่าต้องเปิด Tab ใหม่ทุกครั้งที่ต้องการเช็ค Email

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

    ขอขอบคุณข่าวสารดีๆ จาก : https://www.techhub.in.th/

  • เขียนเว็บแอพแบบ SPA ด้วย Blazor (C#)

    หากคุณเป็นนักพัฒนาเว็บแอพที่ชอบฟังเพลงยุค 90 คุณก็คงจะคุ้นเคยกับ Multiple Page Applications (MPA) เป็นอย่างดี  MPA หรือเว็บแบบดั้งเดิมนั้นสามารถสังเกตุได้จากการที่เราคลิกดูข้อมูล หรือเปลี่ยน URL หน้าเว็บจะโหลดใหม่ทั้งหน้า เพื่อดึงข้อมูลมาแสดงผลใหม่ใน Browser ดังรูป

    ที่มา : https://subscription.packtpub.com/book/web_development/9781787284746/7/ch07lvl1sec38/application-routing

    ทุกวันนี้ก็ได้มีอีก Trend หนึ่งที่น่าสนใจ และมีการนำมาใช้สร้างเว็บแอพกันอย่างแพร่หลาย นั่นก็คือ Single Page Application หรือ SPA  โดยเว็บแบบนี้จะทำการโหลดหน้าเว็บจาก Request ครั้งแรกเท่านั้น หลังจากนั้นจะเป็นการรับส่งข้อมูลกันโดยใช้ JavaScript เข้ามาช่วย ทำให้ลดการ Reload หน้าเว็บโดยไม่จำเป็นลงไปได้ ข้อดีของเว็บแบบนี้คือ มี User Experience ที่ดีกว่า ตอบสนองได้อย่างรวดเร็ว และลดการทำงานของฝั่ง Server  ตัวอย่างเว็บไซต์แบบ SPA ที่เราใช้งานกันอยู่บ่อยๆ ได้แก่ Facebook, Instagram, Twitter, Google Mail เป็นต้น

    ที่มา : https://subscription.packtpub.com/book/web_development/9781787284746/7/ch07lvl1sec38/application-routing

    ตัวอย่างของ SPA Framework

    • Vue.js
    • React.js
    • AngularJS
    • Ember.js
    • Knockout.js
    • Meteor.js
    • Blazor

    จาก Framework ตัวอย่างทั้งหมดจะเป็น JavaScript ยกเว้น Blazor ที่ใช้ C# แทน และในฐานะที่คุ้นเคยกับการเขียนโค้ด C# อยู่แล้ว Blazor จึงเป็นตัวเลือกที่น่าสนใจ

    การสร้างแอพด้วย Blazor

    เปิด Visual Studio 2019 คลิก Create a new project ก็จะเจอหน้าจอดังรูป จากนั้นให้เลือก Project templates เป็น Blazor Server App

    หน้าจอ Configure your new project ให้ตั้งชื่อ Project name ว่า FirstApp.Web
    ระบุ Location เป็น C:\Source\

    หน้าจอ Additional information ให้เลือก Target Framework เป็น .NET 5.0

    ถึงขั้นตอนนี้แล้วทำให้ได้ Project ใหม่ที่มีไฟล์ตั้งต้นไว้ให้แล้ว  โดยการเขียนเว็บด้วย Blazor นั้นจะใช้ไฟล์ชนิด Razor ซึ่งเป็นเทคโนโลยีการสร้าง View ของ ASP.NET MVC

    กด F5 หรือคลิกปุ่มรัน เพื่อดูผลลัพธ์กันก่อน จะเห็นว่ามีตัวอย่างไว้ให้ศึกษา 2 เมนู คือ Counter และ Fetch data

    เมนู Counter เป็นตัวอย่างของการสร้าง Blazor Component เมื่อคลิกปุ่ม Click me ก็จะทำให้ Current count มีค่าเพิ่มขึ้นทีละ 1 โดยสังเกตได้ว่า ในการคลิกปุ่มทุกครั้งจะไม่มีการ Reload หน้าเว็บใหม่ทั้งหน้า แต่มีการเปลี่ยนแปลงเฉพาะส่วนของตัวเลข Current count เท่านั้น

    โค้ดตัวอย่าง Counter จะอยู่ในโฟลเดอร์ Pages ชื่อไฟล์ Counter.razor เมื่อเปิดดูจะพบว่าโค้ดมีส่วนสำคัญ 3 ส่วน คือ

    a. Route หรือ URL ที่ใช้ในการเข้าถึงหน้าเว็บ ในที่นี้คือ /counter เวลาเข้าใช้งานก็จะเป็น https://localhost:44381/counter

    b. View หรือส่วนของ HTML ใช้ในการจัดรูปแบบการแสดงผล

    c. C# Code เป็นส่วนที่ใช้เขียนโค้ดควบคุมการแสดงผลของ View

    มาถึงจุดนี้แล้ว ก็สามารถทดลองเขียนโปรแกรมเล่นๆ ได้ เช่น ถ้าต้องการให้คลิกปุ่ม Click me แล้ว ให้ตัวเลขเพิ่มครั้งละ 5 ก็สามารถทำได้ง่าย ๆ ดังรูป

    Component สามารถนำมา Reuse ได้ เช่น ถ้าต้องการนำ Counter ไปใช้งานในหน้า Home ก็ทำได้โดยการเพิ่ม Markup up เข้าไปใน View ดังรูป หากต้องการ Counter หลายตัว ก็สามารถใส่ tag เพิ่มเข้าไปได้อีกตามต้องการ

    จากตัวอย่างนี้จะเห็นได้ว่าหากผู้พัฒนามีความคุ้นเคยกับภาษา C# อยู่แล้ว ก็สามารถเขียนเว็บแอพแบบ SPA ด้วย Blazor ได้โดยใช้เวลาในการศึกษาเพิ่มเติมเพียงเล็กน้อยเท่านั้น ดังนั้น Blazor จึงเป็นตัวเลือกที่น่าสนใจ

  • การสร้างแบบสอบถามอย่างง่ายจาก Mentimeter

    การสร้างแบบสอบถามอย่างง่ายโดยใช้เครื่องมือที่ชื่อว่า Mentimeter ลองมาดูกันว่าวิธีการง่าย ทำกันอย่างไร

    1. เข้าใช้งานไปที่ เว็บไซต์ https://www.mentimeter.com/ เมื่อเข้ามาให้คลิก “Sign up” เพื่อเข้าสู่ระบบ

    2. จะแสดงหน้าให้ Create a free account แบบง่าย ก็ให้เลือกผ่าน Facebook หรือผ่าน Google ดังรูป

    3. ในตัวอย่างโดยใช้ Facebook ดังรูป

    4. เมื่อ Login เข้ามาแล้วจะเจอประเภทที่ให้เลือก ในตัวอย่างนี้จะใช้แบบ “Workshops”

    5. ให้เลือกรูปแบบของการใช้งาน ตัวอย่างนี้เลือกแบบ Free โดยคลิก “Continue with free“

    6. เลือก “+New presentation“

    7. จะมีประเภท (Type) ให้เลือก ตัวอย่างนี้เลือกแบบ “Word Cloud“

    8. สามารถสร้างคำถาม ตัวอย่างถามว่า “คุณชอบกินอะไร” และเลือกคำตอบที่สามารถตอบได้ 3 ข้อ หลักจากนั้นคลิกปุ่ม “Share” ดังรูป

    9. เมื่อคลิก “Share” จะมีให้เลือก จะเอาลิงก์ไปใส่ในหน้าเว็บอื่นๆ หรือจะสร้างเป็น QR code ในตัวอย่างสร้างเป็น QR code ดังรูป

    10. เมื่อคลิกปุ่ม “Download” จะได้ QR code สำหรับเอาไปใส่ในเว็บต่างๆ QR code นี้สามารถใช้งานได้จริง ลองสแกน แล้วเข้าไปกรอกดูนะคะ

    11. เมื่อสแกน QR code ผ่านมือถือจะได้คำถาม ดังรูป

    12. ให้กรอกคำตอบได้ 3 ข้อ แล้วกรอกคำตอบที่ต้องการ แล้วคลิกปุ่ม “Submit”

    13. เมื่อกรอกครบทั้ง 3 ข้อ จะแสดงข้อความขอบคุณในการตอบคำถาม

    14. เมื่อผู้ตอบคำถาม จะแสดงมาให้หน้าเว็บของฝั่งของผู้จัดทำแบบสอบถาม ดังรูป

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

  • ตัดต่อ clip video อย่างง่าย ด้วย App Photos บน Windows10

    จากบทความที่แล้วได้แนะนำ “การบันทึกหน้าจอคอมพิวเตอร์ Xbox Game Bar บน Windows10” ไปแล้ว ก็ถึงขั้นตอนการตัดต่อกันบ้าง ซึ่ง Windows10 ก็มี App ที่ทุกคนใช้งานกันอยู่เป็นประจำ นั้นก็คือ Photos
    หลายคนคงใช้ App Photos ใช้สำหรับดูรูปภาพเท่านั้น แต่รู้หรือไม่ว่ามันสามารถสร้าง ตัดต่อ ใส่ข้อความ ใส่เสียง และลูกเล่นต่าง ๆ ให้กับ clip ของของคุณได้อีกด้วย

    เริ่มต้นใช้งาน
    • พิมพ์ Photos ตรงช่องค้นหาด้านซ้ายของหน้าจอ แล้วเลือกเมนู


    • เมื่อเปิด App Photos ขึ้นมาคลิก New video และเลือก New video project



    • ใส่ชื่อ Name your video


    • เลือกไฟล์จากเครื่องของคุณโดยไปที่ +Add และเลือก From this PC ซึ่งสามารถเลือกได้ทั้งไฟล์รูปภาพและ clip video



    • คุณสามารถเลือกไฟล์ที่ต้องการทำclip video และกด Place in storyboard หรือ ลากรูปที่ต้องการลงในส่วนของ Storyboard ได้ทันที


    • เมื่อไฟล์ที่ต้องการตัดต่อ clip videoปรากฎใน Storyboard แล้ว คุณสามารถเลือกจัดการไฟล์รูปภาพและclip videoได้จากเครื่องมือต่าง ๆ ดังนี้


    –Add title card
    ใช้สำหรับเพิ่ม card แสดงเพิ่มเติมจากไฟล์รูปหรือไฟล์ video

    –Background
    ใช้สำหรับใส่พื้นหลังให้กับ card ที่คุณได้เพิ่มเข้ามา


    –Duration
    ใช้สำหรับใส่ระยะเวลาในการแสดงไฟล์ที่เลือกไว้ ซึ่งสามารถกำหนดโดยคลิกที่ Duration หรือที่ไฟล์ต้องการบน Storyboard ก็ได้


    –Text
    ใส่ข้อความ ซึ่งจะมีรูปแบบอักษร และ Layout ข้อความต่าง ๆ ให้เลือก



    –Motion
    ใช้เลือกรูปแบบการเคลื่อนไหวของภาพ

    –3D effects
    ใช้สำหรับ ใส่ effects ลูกเล่นต่าง ๆ ให้กับไฟล์ที่เราต้องการ


    –Filters
    ใช้สำหรับใส่ Filters ให้กับไฟล์ภาพที่เราเลือก

    –Background music
    ใช้สำหรับเลือกเพลงบรรเลงให้กับ clip video ที่คุณกำลังสร้างอยู่


    –Custom audio
    ใช้สำหรับเลือกไฟล์ audio จากเครื่องของคุณเอง

    หากไฟล์ที่คุณนำเข้ามาตัดต่อเป็น clip video จะมีเมนูสำหรับใช้ในการตัดต่อเพิ่มขึ้นมา ได้แก่


    –Trim
    ใช้สำหรับตัดส่วน ต้น/ท้ายของ clip video

    –Split
    ใช้สำหรับแบ่งไฟล์ clip video เป็น 2 ส่วน

    –Speed
    ใช้สำหรับกำหนดความเร็วของ clip ที่คุณเลือก


    เมื่อตกแต่งตัดต่อ clip ของคุณเรียบร้อยแล้ว ให้คลิกที่ Finish video เพื่อ Export ไฟล์โดยสามารถเลือกคุณภาพของไฟล์ที่ export ได้

    เพียงเท่านี้คุณก็สามารถสร้างสื่อดี ๆ มานำเสนอได้แล้ว ใช้งานไม่ยาก แถมยังอยู่ใกล้ตัวด้วย คุณลองดูหรือยังค่ะ?

    ที่มา : ตัดต่อวีดีโอ บน windows10

  • ลบภาพบนเอกสาร Word ทั้งหมดได้ง่าย ๆ ภายในพริบตา

    หลายท่านคงเคยมีปัญหาในการนำข้อความจาก word  อาจจะต้องนำไป Copy ไว้ที่ไหนสักที่ หรือ นำไปเขียน blog บนเว็บ แต่ไฟล์ที่เรามีอยู่ในมือ ดูแล้วมีรูปภาพเต็มไปหมด ไอ้เราก็ต้องการเฉพาะแค่ข้อความเท่านั้น ทำไงล่ะทีนี้ จะต้องมานั่งลบรูปทีละรูปอย่างนั้นเหรอ ?? เสียเวลาชะมัด เห้อ …..  แต่เดี๋ยวก่อนค่ะ มันไม่เสียเวลาขนาดนั้น มันก็มีวิธีอยู่นะคะ ที่เราจะไม่ต้องมานั่งคลิกลบทีละรูป เอาล่ะมาดูวิธีกันดีกว่า

    1. เปิดไฟล์ที่เราต้องการลบรูปทั้งหมดขึ้นมา จะเห็นว่าในไฟล์มีรูปภาพหลายรูปเลยล่ะค่ะ


    2. คลิกที่ปุ่ม Replace


    3. ในช่อง Find What  ให้พิมพ์ ^g   ส่วนตรง Replace With ไม่ต้องกรอกอะไรลงไปค่ะ ปล่อยว่างไว้เลย  จากนั้นให้กดปุ่ม Replace All


    4. ปรากฏข้อความแจ้งดำเนินการเสร็จสิ้น กดปุ่ม OK เพื่อปิดข้อความ


    5. กดปุ่ม Close เพื่อปิดหน้าจอการ Replace


    6. จะเห็นว่ารูปทั้งหมดหายวับไปกับตา เหลือเพียงแค่ข้อความที่เราต้องการ


    เป็นไงคะ ไม่ยากเลยใช่ไหม จากที่ต้องคอยลบทีละรูป คราวนี้ใช้เวลาแค่ไม่ถึงนาทีก็ลบรูปได้ทั้งหมดเลย  ^^

  • บันทึกหน้าจอคอมพิวเตอร์ด้วย Xbox Game Bar Hidden Feature บน Windows10

    ใครที่เครื่องคอมพิวเตอร์ของคุณใช้ Windows 10 และกำลังมองหาโปรแกรมที่จะบันทึกหน้าจอเป็นคลิป โดยที่ไม่อยากจะต้องหาโปรแกรมเสริมจากที่อื่น ซึ่งอาจจะต้องเสียเงิน หรือกินพื้นที่ของเครื่องแล้วละก็
    ใน Windows 10 มี Hidden Feature ที่ช่วยบันทึกหน้าจอคอมพิวเตอร์ของคุณขณะใช้งานได้ทันทีโดยไม่ต้องติดตั้งเพิ่มเติม ด้วย Xbox Game Bar

    Xbox Game Bar สร้างขึ้นใน Windows 10 เพื่อใช้จับภาพวิดีโอและภาพหน้าจอขณะเล่นเกมพีซีได้ แม้ว่าชื่อจะเหมือนทำมาเฉพาะสำหรับเกม แต่จริงๆแล้ว สามารถบันทึกได้หน้าจอคอมพิวเตอร์ของคุณเหมือนโปรแกรมบันทึกภาพทั่วไปเลย

    วิธีการบันทึก
    • กดปุ่ม Windows + G เพื่อเริ่มใช้งาน ซึ่งจะปรากฏแถบเครื่องมือต่าง ๆ ให้เลือกใช้งาน (สามารถกดจับภาพหน้าจอ, กดบันทึกวิดีโอหน้าจอ, กดเปิด-ปิดไมค์ และอื่นๆ ได้จากส่วนนี้)



    – Capture เอาไว้ใช้ในการกดบันทึกต่าง ๆ เช่น ถ่ายภาพ, บันทึกหน้าจอหรือปิดไมค์



    – Audio ไว้สำหรับตั้งค่าระบบเสียงของคุณ โดยแบ่งเป็น 2 ส่วนคือเสียงจากในตัวเครื่องและเสียงที่มาจากไมค์ของคุณ


    – Performance แสดงสถานะการใช้ทรัพยากรในเครื่องของคุณ


    สามารถกดบันทึกวิดีโอหรือจับภาพหน้าจอได้ที่แถบ Game Bar หรือกดคีย์ลัด ดังนี้
    • เริ่มต้น/หยุด การบันทึก (Start/stop recording)
    กดปุ่ม : Windows+Alt+R


    • จับภาพหน้าจอ (Take screenshot)
    กดปุ่ม Windows +Alt+Prtscn


    • เปิด/ปิด ไมโครโฟน (Microphone on/off)
    กดปุ่ม Windows+Alt+M



    สำหรับไฟล์ที่บันทึกโดยปกติจะถูกเก็บไว้ที่ : C:\Users\USER\Videos\Captures

    คุณสามารถตรวจสอบเครื่องคอมพิวเตอร์ของคุณว่าได้เปิดใช้งานฟังก์ชัน Xbox Game Bar แล้วหรือไม่ โดยพิมพ์ Settings ตรงช่องค้นหาด้านซ้ายของหน้าจอ แล้วเลือกเมนู Settings และเลือก Gaming


    จะปรากฎหน้า Xbox Game Bar ให้ตรวจสอบว่า On ไว้หรือไม่ หากต้องการปิดการใช้งาน ก็สามารถ Off ไว้ได้
    หรือต้องการเปลี่ยน Key board Shortcut สำหรับการใช้งานฟังก์ชันนี้ ก็สามารถกำหนดเองได้จากหน้านี้เช่นกัน



    เมนู Captures ทางซ้าย ในส่วนนี้จะเป็นการกำหนดโฟลเดอร์ที่ต้องการจัดเก็บไฟล์วิดีโอที่อัดไว้


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

    ขอขอบคุณ : YouTube : Win G



  • สร้างไฟล์ PDF จาก HTML + CSS ด้วย iText7.pdfhtml (C#)

    การพัฒนา Web Application หลายครั้งที่จะมีความต้องการจาก User ให้พัฒนาระบบที่สามารถนำข้อมูลจากฐานข้อมูลมาออกรายงาน หรือบันทึกในรูปแบบ PDF ได้ ระบบที่กำลังพัฒนาอยู่ขณะนี้ก็เช่นเดียวกัน มีความต้องการให้สร้าง E-Form บันทึกข้อมูลในฐานข้อมูล และสร้างไฟล์ PDF ที่มีการจัดรูปแบบเป็นหนังสือราชการ ได้แก่ บันทึกข้อความ ประกาศ ระเบียบ คำสั่ง เป็นต้น จากนั้นจึงนำไฟล์ PDF ที่ได้ไปใช้ลงนามด้วย Digital Signature และดำเนินการอื่นๆ ต่อได้

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

    จากการศึกษาและลองผิดลองถูกก็ได้แนวทางในการพัฒนาดังนี้

    1. สร้างไฟล์ HTML และจัดรูปแบบแสดงผลข้อมูลด้วย CSS ให้เหมือนกระดาษ
    2. ใช้ Add-on ของ iText7 ชื่อ iText7.pdfhtml ช่วยแปลงจาก HTML เป็น PDF
    3. บันทึกไฟล์ PDF บนเซิร์ฟเวอร์ หรือแสดงผลผ่าน Browser

    ตัวอย่างการพัฒนาด้วย Blazor Server Application

    1. เปิด Visual Studio 2019 และสร้าง Project ใหม่ เลือก Blazor Server App คลิก Next ระบุโฟลเดอร์บันทึก Project จากนั้น ระบุ Target Framework เป็น .NET 5.0 คลิก Create
    1. ติดตั้ง Add-on ชื่อ itext7.pdfhtml จาก NuGet โดยไปที่เมนู Project -> Manage NuGet Packages
    2. คลิก Browse และค้นหา itext7.pdfhtml เลือกเวอร์ชั่นล่าสุด (3.0.4) และคลิก Install
    1. สร้างไฟล์ HTML จัดรูปแบบข้อมูลด้วย CSS เก็บไว้ในโฟลเดอร์ wwwroot ในที่นี้สร้างไฟล์ชื่อ doc1.html และระบุ style sheet ไว้ในโฟลเดอร์ css
    1. เปิดไฟล์ Pages/Index.razor เขียนโค้ดดังนี้
      5.1 @using iText.Html2pdf
      เพื่อให้สามารถเรียกใช้งาน Ad-on ได้
      5.2 @using System.IO
      เพื่อให้สามารถเขียนไฟล์ได้
      5.3 กำหนด onclick event ของปุ่ม ให้ทำฟังก์ชั่น CreatePDF
      5.4 public static string SRC = $”{BASEURI}doc1.html”;
      ระบุไฟล์ HTML ต้นทางที่ต้องการแปลงเป็น PDF
      5.5 public static string DEST = $”{TARGET}doc1.pdf”;
      ระบุไฟล์ pdf บันทึกผลลัพธ์ของการแปลงไฟล์
      5.6 HtmlConverter.ConvertToPdf(new FileInfo(SRC), new FileInfo(DEST), properties);
      แปลงไฟล์ HTML เป็น PDF
    1. คลิก รัน หรือกด F5 จะได้หน้าจอดังรูป
    1. คลิก Create PDF ระบบจะสร้างไฟล์ชื่อ doc1.pdf ดังรูป

    เพียงเท่านี้ก็จะได้ผลลัพธ์ไฟล์ PDF แล้ว แต่จากการใช้งานพบว่า ยังมีข้อจำกัดในส่วนของการจัดรูปแบบข้อความภาษาไทยแบบ Justify ยังไม่สวยงามเท่าที่ควร