Blazor Server Application : การสร้างรูปภาพลายเซ็นโดยวิธีการพิมพ์ข้อความ

แนะนำวิธีการสร้างรูปภาพลายเซ็นโดยวิธีการพิมพ์ข้อความ วิธีการเตรียมฟอนต์1) เข้าเว็บไซต์ https://www.f0nt.com/release/worasait/2) ดาวน์โหลด ฟอนต์ Worasait (worasait.ttf) วิธีการเขียน Code1) ติดตั้ง NuGet ชื่อ System.Drawing.Common2) สร้าง Folder ชื่อ files สำหรับเก็บไฟล์ฟอนต์ ในกรณีนี้อยู่ใน (wwwroot/files/worasait.ttf) 3) สร้าง Razor Component ชื่อ SignatureType.razor ในกรณีนี้อยู่ใน (Pages/SignatureType.razor)4) จากนั้นเขียน Code ดังนี้ 5) ผลลัพธ์จากการสร้างรูปภาพลายเซ็นโดยวิธีการพิมพ์ข้อความ หมายเหตุ: วิธีการเปลี่ยนสีภาพลายเซ็น1) graphics.DrawString(Txt, oFont, Brushes.Black, 0, 0);2) เปลี่ยนจาก Brushes.Black เป็นสีที่ต้องการ เช่น Brushes.Red เป็นต้น

Read More »

มาลองสร้าง Website ด้วย Google Site แบบง่ายๆกันดีกว่า

ใครจะไปคิดว่าการสร้าง Website จาก Google Site จะง่ายขนาดนี้ ถ้าอยากรู้ว่าต้องเริ่มยังไงมาดูกันเลย ขั้นตอนที่ 1. เริ่มจากไปที่ https://sites.google.com จะมี Template ให้เลือกใช้หรือ จะสร้างหน้า Website ขึ้นมาเองก็ได้นะ มาลองดูกันเลย ขั้นตอนที่ 2. หลังจากที่เราได้โครงสร้างของ Website ของเรามาแล้ว เราต้องทำการตั้งชื่อ Website ของเราก่อน โดยสามารถเปลี่ยนชื่อได้จากรูปเอกสารมุมซ้ายบน นอกจากการเปลี่ยนชื่อ Website แล้วนั้น เรายังสามารถเปลี่ยนโลโก้ได้อีกด้วย แต่ข้อสำคัญของการจะเผยแพร่ / publish Website ของคุณนั้น ต้องมีหน้า Website 2 หน้าขึ้นไป ขั้นตอนที่ 3. หลังจากที่เราแก้ไขชื่อ และโลโก้ แล้วเรายังสามารถปรับแก้ไขเนื้อหาที่เราต้องการจะมานำเสนอ หรือเพิ่มลงบน Website ได้เองอีกด้วย โดยใช้เครื่องมือทางด้านขวามือที่ Google Site ได้มีไว้ให้ ลากสิ่งที่ต้องการใช้มาวางในพื้นที่ที่ต้องการได้เลย ขั้นตอนที่ 4. หลังจากที่เราสร้างหน้า และใส่เนื้อหาที่ต้องการจะแสดงบน Website แล้ว เรายังสามารถสร้างหน้าเพิ่มเติมได้จากการเลือกเมนู “หน้าเว็บ” ทางด้านขวามือ แถบเมนูจะแสดงหน้า Website ทั้งหมดที่เรามีในตัว Website นี้ โดยการสร้างหน้าเว็บเพิ่มสามารถกดได้จาก ปุ่ม + ที่มุมด้านล่าง ขั้นตอนที่ 5. การกำหนดแถบเมนู ต้องการจะให้แสดงด้านบน หรือต้องการให้แสดงด้านข้างสามารถจัดได้โดยการที่ กดที่รูปฟันเฟือง หรือการตั้งค่าดังรูป สามารถตั้งค่าได้ที่คำสั่ง “โหมด” ว่าต้องการจะให้อยู่ด้านบน หรือด้านข้าง นอกจากนั้นยังสามารถกำหนดสีแถบเมนูได้อีกด้วยนะ ตัวอย่างเมนูที่อยู่ข้างบน ตัวอย่างเมนูที่อยู่ด้านข้าง และในที่สุด เราก็มาถึงขั้นตอนสุดท้ายที่สำคัญที่สุดคือการเผยแพร่ Website เพียงแค่คุณ กด เผยแพร่/Publish หากคุณมี Domain เป็นของตัวเองสามารถนำมาใช้ได้เลย จบกันแล้วการสร้าง Website ไม่ได้อยากเหมือนที่คิดใช่ไหม ขอบคุณทุกคนที่เข้ามาอ่านนะคะ

Read More »

✏️ More than noting “Notion”

ทุกวันนี้เวลาเราใช้ชีวิตประจำวัน ถ้าเราไม่จดโน๊ต ทุกอย่างเราก็จะต้องจดจำทุกอย่างอยู่ในหัวสมองเราเอง แน่นอนการจดจำในหัวสมองเรานั้นมันก็ไม่ได้มีความถูกต้อง แม่นยำ 100% การจดโน๊ตก็เป็นอีกหนึ่งวิธีการที่จะช่วยเตือนความจำ ระหว่างการจดก็จะเป็นส่วนช่วยในการจดจำได้ดียิ่งขึ้น จะดีไหมถ้ามีเครื่องสักตัวหนึ่งที่ เราสามารถจดโน๊ตของเราได้อย่างมีประสิทธิภาพแล้ว มันสามารถนำข้อมูลที่เราจดไป มาใช้งานต่อได้อีก เช่นการจดรายงานการประชุมโดยมีการแปะลิ้งค์ รูป ข้อความได้ลงในหน้ากระดาษ แล้วใช้การ mentions ผู้เข้าร่วมประชุมให้มา revise และ approve ได้ จุดไหนผิดถูกสามารถ comment ได้ เมื่อแก้ไขเสร็จแล้วก็สามารถ Lock ไฟล์นั้นๆได้และ Export ออกไปเป็น PDF สำหรับการส่งรายงานก็ทำได้เช่นกัน 🤔 What is Notion? Website: Notion – One workspace. Every team. Notion เป็นเครื่องมือการจดโน๊ตที่เป็นได้มากกว่าการจด จดแล้วก็สามารถนำไปประยุกต์ใช้ได้ ในระหว่างการจดก็มีเครื่องมือที่อำนวยความสะดวกเช่น การใส่ Heading1,2,3 List ประเภทต่างๆ Checkbox และอื่นๆอีกมากมาย และที่สำคัญ เราสามารถเก็บข้อมูลในรูปแบบของ Database ได้ ซึ่งเราก็จะสามารถเรียกใช้ซ้ำ ใส่ความเชื่อมโยงให้กับ Database หลายๆอันที่เราสร้างขึ้นมาได้ อันนี้แค่ยกตัวอย่างมาส่วนหนึ่งนะครับ ตัวเครื่องมือนี้เราสามารถนำไปประยุกต์ให้เข้ากับการใช้งานในชีวิตประจำวันของเราด้วยท่าทางไหนก็ได้ จะเห็นได้ว่ามีประโยชน์มากๆ ผมจึงอยากแนะนำให้ทุกคนมาใช้กัน Notion เป็น base on web-browser application สามารถทำได้จากอุปกรณ์ไหนก็ได้ แถมยังมีเวอร์ชั่น Windows/Mac OS iOS และ Android อีกด้วย Used cases of using Notion Note เป็นการจดบันทึกทั่วไปในชีวิตประจำวันเช่น บันทึกการประชุม มีการคุยในหัวข้อต่างๆที่ลงรายละเอียดก็มีการใช้ sub-page เข้ามาแบ่งสัดส่วนให้อ่านง่าย สวยงาม หรือการจดบันทึกเตือนความจำ Work log เป็นการจดบันทึกการปฏิบัติงานโดยการใช้ส่วนของ Database มาเก็บข้อมูลและจัดการข้อมูลประเภทของ work log และรายละเอียดการทำงาน สามารถตั้งให้แสดงผลในรูปแบบของ Table หรือ List หรือ Calendar ก็ได้ด้วย เมื่อถึงรอบรายงานก็ Export ออกเป็น csv หรือทำการแชร์หน้าที่จดบันทึกไปยังผู้ประเมินได้โดยตรง Software Document เป็นการประยุกต์ใช้การจดบันทึก แต่เราสามารถสร้าง Template ให้กับเอกสารได้ซึ่งเราสามารถตั้งให้มี Layout แบบเฉพาะได้ ตั้งส่วนของ Header ส่วนต่างๆตั้งไว้ได้ ตั้งส่วนของตัวอย่างข้อมูลไว้ได้ เวลาเราจะสร้างเอกสารก็สามารถเลือก Template นั้นมาใช้งานได้เลยโดยไม่ต้องเสียเวลาสร้างใหม่ตั้งแต่ต้น จริงๆแล้วตัว Notion เองก็มี Template สำเร็จรูปมาให้เราใช้งานด้วยเช่นกัน มีเยอะมาก หลากหลายหมวด สามารถเลือกใช้มาตั้งต้นแล้วใช้งานต่อได้เลย

Read More »

DevToys รวมเครื่องมือใช้บ่อยของโปรแกรมเมอร์

เคยมั้ยครับ ได้ข้อมูลรูปแบบ JSON มาอยากจัดรูปแบบให้อ่านได้ง่าย (ค้น google หาเว็บจัดรูปแบบ) อยาก Decode JWT ออกมาดูก่อนเริ่มเขียนโปรแกรมอ่านค่า (ค้น google หาเว็บ Decode) อยากทดสอบ Regex ที่เขียนว่าถูกต้องหรือไม่ (ค้น google หาเว็บทดสอบ) ฯลฯ https://devtoys.app/ DevToys คือ ซอฟแวร์ที่รวมเอา Utility ที่เหล่า Dev ใช้งานบ่อยๆเอาไว้ที่เดียวกัน ในรูปแบบ Windows App ทำให้สะดวกต่อการเรียกใช้งานมากครับ และที่สำคัญฟรี เพราะพัฒนาขึ้นโดย Community ของ Dev ที่ทำงานบนระบบปฏิบัติการ Windows แล้วรู้สึกว่าขาดสิ่งอำนวยความสะดวกเหล่านี้ (แนวคิดคล้ายๆกับ PowerToys ชื่อยังล้อกันมาด้วย) โดยโปรแกรมนี้ก็จะมีเมนูที่แบ่งหมวดหมู่แยกไว้ตามแต่ละประเภท ดังรูป เมื่อเราคลิกเข้าไปในแต่ละเมนู ก็จะมี UI ที่เรียบง่าย สามารถเข้าใจวิธีการใช้งานได้ทันที ตัวอย่างการใช้งาน

Read More »

แก้ปัญหาการเรียกใช้ font ผ่าน css แล้วเกิด error Access to font at has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

เนื่องด้วยทางทีมงานต้องการใช้ font ผ่าน css ที่อยู่คนละที่ โดยต้องการให้ไปเรียกที่เดียวเพื่อการจัดการง่าย แต่ปัญหาก็เกิดขึ้น เพราะทางต้นทางมีการ block ไม่ให้เข้าถึง วันนี้จึงมีแนวทางการแก้ปัญหาดังนี้ ขั้นตอนที่ 1 ไปตั้งค่าไฟล์ font ที่ต้องการ โดยในที่นี้ เป็น folder fonts โดยไปที่ IIS เลือก folder ที่ต้องการ จากนั้นเลือกเมนู “HTTP Response Headers” จากนั้น กด “Add” ดังรูป ขั้นตอนที่ 2 เพิ่ม Name: Access-Control-Allow-Origin และ Value: * ดังรูป ขั้นตอนที่ 3 ผลลัพธ์จากการเพิ่ม Name: Access-Control-Allow-Origin และ Value: * ดังรูป ขั้นตอนที่ 4 เพิ่ม Name: Access-Control-Allow-Origin และ Value: * ที่ไฟล์ font.css ด้วยเหมือนกัน ขั้นตอนที่ 5 ปรับแก้การเรียกใช้ css โดยใช้ SRI Hash Generator ผ่าน SRI Hash Generator ขั้นตอนที่ 6 เวบไซต์ปลายทางก็จะสามารถเรียกใช้ font จาก เวบไซต์ต้นทาง ดังรูป หวังว่าจะเป็นประโยชน์ให้กับคนที่มีปัญหาแบบเดียวกันนี้นะคะ ที่มา HTML script integrity Attribute (w3schools.com) Access-Control-Allow-Origin – HTTP | MDN (mozilla.org)

Read More »