CoP PSU IT Blog – Page 177 – แหล่งรวมบทความเกี่ยวกับ IT โดยชาว PSU IT

ใช้ google script ทำ mail merge เนื้อหาเมลที่มี link

July 20, 2015 20:26

ผมใช้ Yet another mail merge ซึ่งเป็น add-on เพื่อส่งอีเมลเรื่องเดียวกันไปยังเพื่อนๆจำนวนหนึ่ง ก็ใช้งานได้ดีมา 5 ครั้งแล้ว แต่พอครั้งหลังนี้ ผมต้องการส่งอีเมลที่ในเนื้อหามี link ให้ผู้ที่รับอีเมลสามารถคลิกเพื่อเปิดอ่านได้ แต่ลองหลายวิธีที่จะส่งด้วยวิธีที่เคยใช้ add-on ตัวนี้ก็จะแสดงเป็นข้อความ ไม่แสดงเป็น link ในอีเมล (อันนี้ต้องบอกก่อนว่า คาดว่าผู้ใช้ส่วนใหญ่ใช้โปรแกรมอีเมลที่มีการแสดงผลมากกว่าข้อความธรรมดา) ค้นหาดูก็พบว่า ต้องเปลี่ยนวิธีทำมาเป็นวิธีเขียน google script เพื่อส่ง mail merge แทน วิธีทำ ดังนี้ 1. สร้าง google sheet ตั้งชื่อ myusers 1.1 sheet แรก ตั้งชื่อ Data ที่มีคอลัมน์ ดังนี้ รายการที่, ชื่อ, คณะ, อีเมล, link1, link2 1.2 sheet สอง ตั้งชื่อ Template ที่มี 1 คอลัมน์ เพื่อเขียน subject และ ข้อความจดหมายที่มี link 1.3 sheet สาม ตั้งชื่อ Range ที่มี 3 คอลัมน์ ดังนี้ header, data, template 2. ใส่ข้อมูลตามตัวอย่างรูปภาพ 3. ที่ google sheet ให้คลิกที่ Tool > Script editor > เลือก Blank Project > ตั้งชื่อว่า myusers project 4. แปะ google script ตามซอร์สโค้ดด้านล่างบทความนี้ และคลิก Save หมายเหตุ ซอร์สโค้ดนี้จะวางตำแหน่งอีเมลไว้ที่คอลัมน์ที่ 4 5. ปิดแท็บ google script (myusers project) 6. ปิดแท็บ google sheet (myusers) แล้วเปิดใหม่ 7. เมื่อเปิดใหม่จะเห็นว่ามีเมนู Email และมี submenu ชื่อ MailMergeWithLinkv2 8. คลิกเมนู Email > MailMergeWithLinkv2 จะมีการขอสิทธิในการรัน script ดังรูป 9. ไปตรวจสอบว่าอีเมลถูกส่งไปและมีเนื้อหาที่มี link ตามต้องการ 10. หากต้องการส่งอีกครั้งให้กับอีเมลที่ได้ส่งแล้ว ให้ดูที่คอลัมน์ อีเมล จะเห็นว่ามี Note เนื่องจากว่า google script นี้ได้เขียน Note ไว้ใน cell ใช้เป็นการป้องกันการส่งอีเมลซ้ำ ให้คลิกขวาและเลือก Clear Note ซอร์สโค้ดที่ใช้: function onOpen() { var submenu = [{name:”MailMergeWithLinkv2″, functionName:”MailMergeWithLinkv2″}]; SpreadsheetApp.getActiveSpreadsheet().addMenu(‘Email’, submenu); } function MailMergeWithLinkv2() { var ss = SpreadsheetApp.getActiveSpreadsheet(), DataSheet = SpreadsheetApp.setActiveSheet(ss.getSheetByName(“Data”)), TemplateSheet = SpreadsheetApp.setActiveSheet(ss.getSheetByName(“Template”)), RangeSheet = SpreadsheetApp.setActiveSheet(ss.getSheetByName(“Range”)), header = RangeSheet.getRange(2, 1).getValue(), data = RangeSheet.getRange(2, 2).getValue(),

รู้จักกับ Algebraic Specification

July 15, 2015 23:10

สวัสดีครับ หลังจากใช้เวลานานในการคิดว่าจะเขียนอะไรดี ก็คิดได้ว่านำเอาความรู้ที่ได้จากการไปเรียนทบทวนเรื่องวิศวกรรมซอฟต์แวร์มาเล่าสู่กันฟังดีกว่า เรื่องที่จะเล่านี้ก็คือ การเขียน Specification ในรูปแบบหนึ่งซึ่งอาจจะใหม่สำหรับบางคน เรียกว่า Algebraic Specification (ชื่อภาษาไทยว่าอะไร ไปหาเอาเองนะครับ) Algebraic Specification เป็นรูปแบบหนึ่งของ Formal Specification (อย่าเพิ่งงงนะครับ) ในการเขียน specification รูปแบบนี้จะใช้คณิตศาสตร์เข้ามาช่วยเพื่อให้เห็นการติดต่อระหว่าง module หรือ component ที่ชัดเจน แล้วมันต่างจากที่เขียนอยู่ยังไง? ถ้าคุณเขียน specification พรรณนาด้วยภาษามนุษย์ยาวเป็นหน้า ๆ อันนั้นเรียกว่า form-based specification ครับ เป็นวิธีการเขียนที่มนุษย์อ่านแล้วเข้าใจมากกว่า แต่ในการใช้ภาษาเขียนนั้น อาจจะเกิดความกำกวมได้ครับ ประเภทที่คนอ่าน อ่านแล้วงง อ่านแล้วรู้สึกว่ามีหลายความหมายหรือเข้าใจไม่ชัดเจนซึ่งอาจเป็นผลมาจาก Requirement definition และ Requirement specification ที่กำกวมเช่นเดียวกัน ดังนั้นจึงมีผู้ปราดเปรื่องบางท่านคิด Algebraic specification ขึ้นมาซึ่งหน้าตาเป็นดังนี้ ARRAY (Elem: [Undefined -> Elem]) sort ArrayImports INTEGER DescriptionArrays are collections of elements of generic type Elem. They have a lower and upper bound (discovered by the operations First and Last). Individual elements are accessed via their numeric index.Create takes the array bounds as parameters and creates the array, initializing its values to Undefined. Assign creates a new array which is the same as its input with the specified element assigned the given value. Eval reveals the value of a specified element. If an attempt is made to access a value outside the bounds of the array, the value is undefined. OperationsCreate (Integer, Integer) -> ArrayAssign (Array, Integer, Elem) -> Array First (Array) -> Integer Last (Array) -> Integer Eval (Array, Integer) -> Elem AxiomsFirst (Create (x, y)) = xFirst (Assign (a, n, v)) = First (a) Last (Create (x, y)) = y Last (Assign (a, n, v)) = Last

Icon Font

July 15, 2015 15:38

บทความนี้จะพูดถึงคำ 2 คำ คือ Icon และ Font ที่ใช้งานบนเว็บ ซึ่งทุกคนคงจะรู้จัก Web Icon กันดีอยู่แล้วว่ามันคือรูปภาพขนาดเล็กที่ปรากฏบนหน้าเว็บไซต์ ใช้เป็นสัญลักษณ์แทนความหมายต่างๆ เช่น รูปแว่นขยายมีความหมายถึงการค้นหาข้อมูล รูปแผ่นดิสก์ใช้แทนความหมายของการบันทึกข้อมูล เป็นต้น รูปภาพเหล่านี้ส่วนใหญ่จะเป็นไฟล์นามสกุล .png ซึ่งสามารถทำเป็นรูปที่มีพื้นหลังโปร่งใสได้ ในส่วนของการใช้งาน Font บนเว็บไซต์นั้นสามารถอ่านได้จากบทความ @font-face ครับ กล่าวโดยสรุปแบบง่ายๆ คือ Font เป็นข้อความที่ใช้นำเสนอข้อมูลบนเว็บไซต์ครับ และการพัฒนาเว็บไซต์ในปัจจุบันนี้ได้มีสิ่งที่น่าสนใจเกิดขึ้น เมื่อมีการนำ Icon และ Font มารวมกัน คือการทำ Icon ให้เป็น Font หรือการสร้างตัวอักษรที่มีรูปร่างเป็น Icon เรียกใช้งานผ่าน CSS class แล้วแสดงผลเหมือนเป็นรูปภาพรูปหนึ่ง ข้อดีของการทำแบบนี้คือเราสามารถจัดการเรื่องขนาด และสีได้ด้วยการใส่ CSS อย่างง่ายได้ Icon Font ใน Bootstrap Framework Bootstrap Framework ที่นิยมใช้งานกันอย่างแพร่หลายก็ได้จัดเตรียมคอมโพเน้นต์ที่เป็น Icon Font ให้ใช้งานด้วยเหมือนกัน โดยจะใช้ชื่อว่า Gryphicons (http://getbootstrap.com/components/#glyphicons) ประกอบด้วย Icon ต่างๆ มากมายดังรูป วิธีการใช้งานก็ไม่ยาก แค่กำหนด CSS class ให้กับแท็ก ดังตัวอย่างนี้ Font Awesome Font Awesome เป็นแหล่งรวม Icon Font ที่น่าสนใจมากอีกแหล่งหนึ่ง มี Icon สวยๆ ให้เลือกมากมาย วิธีการติดตั้งมี 2 วิธีเช่นเดียวกับการเรียกใช้งาน CSS ทั่วไป ดังนี้ ติดตั้งผ่าน MaxCDN Bootstrap ในแท็ก <head> ดังนี้ <link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”> ดาวน์โหลดจากเว็บ http://fortawesome.github.io/Font-Awesome มาติดตั้งบนเว็บไซต์ของเราได้โดยตรง และติดตั้งในแท็ก <head> ดังนี้ <link rel=”stylesheet” href=”path/to/font-awesome/css/font-awesome.min.css”> วิธีการใช้งานให้ใช้ผ่านแท็ก หรือ เช่น fa-camera-retro ก็จะทำให้ได้ Icon รูปกล้องถ่ายรูปดังรูป ท่านสามารถศึกษาเพิ่มเติมได้จากตัวอย่างในเว็บนี้ครับ http://fortawesome.github.io/Font-Awesome/examples

@FONT-FACE

July 15, 2015 15:36

การใช้ฟอนต์นำเสนอข้อมูลข่าวสารบนเว็บไซต์ หรือ Web Typography ในยุคแรก นั้น Browser จะเป็นตัวกำหนดว่าจะนำเสนอด้วยฟอนต์อะไร ทำให้การแสดงผลในแต่ละ Browser ไม่เหมือนกัน ต่อมาใน HTML2 ได้มีการเพิ่มแท็ก เข้ามา และใน CSS2 ก็อนุญาตให้เราสามารถกำหนดฟอนต์ได้เอง แต่ปัญหาที่เจอคือฟอนต์ที่เราเลือกใช้จะต้องถูกติดตั้งบนเครื่องฝั่งผู้ใช้ด้วย ดังตัวอย่างการกำหนดรูปแบบ font ด้วย CSS2 ดังนี้ body { font-family: Gill, Helvetica, sans-serif } เมื่อ Web Browser อ่านเจอ CSS ดังกล่าว อันดับแรกก็จะดูว่าฟอนต์ที่ชื่อ Gill ถูกติดตั้งไว้ในเครื่องแล้วหรือยัง ถ้าติดตั้งแล้วก็จะแสดงผลเว็บไซต์ด้วยฟอนต์ Gill แต่ถ้ายังไม่ได้ติดตั้ง Browser ก็จะมองหาฟอนต์ตัวถัดไปคือ Helvetica และ sans-serif ตามลำดับ จากข้อจำกัดดังกล่าว จึงมีผลทำให้เราไม่สามารถใช้งานฟอนต์สวยๆ บนเว็บไซต์ได้ นักออกแบบเว็บไซต์จึงเลือกใช้วิธีการนำเสนอข้อมูลด้วยรูปภาพแทน โปรแกรมกราฟิกที่ใช้กันก็อย่างเช่น Adobe Photoshop จะทำให้สามารถใส่ข้อความ และ effect ต่างได้อย่างสวยงาม แต่ปัญหาต่อมาที่เจอก็คือการแก้ไขข้อความในรูปภาพมีความยุ่งยากซับซ้อน อะไรๆ ก็ง่ายขึ้นด้วย @font-face ถือว่าเป็นข่าวดีของนักพัฒนาเว็บไซต์เป็นอย่างมาก เมื่อ CSS3 ได้กำหนด @font-face ไว้ใน specification ด้วย ทำให้การใช้ฟอนต์บนเว็บไซต์มีความหลากหลายมากยิ่งขึ้น @font-face เป็นกลไกที่จะช่วยให้เราสามารถเรียกใช้ฟอนต์ที่ไม่ได้ถูกติดตั้งไว้บนเครื่องฝั่งผู้ใช้ได้ โดยให้ระบุแหล่งที่อยู่ (src) ของไฟล์ฟอนต์ไว้ใน Style Sheet ดังนี้ @font-face { font-family: myFirstFont; src: url(‘www.mydomain.com/sansation_light.woff’); } จากโค้ดเมื่อ Web Browser อ่านเจอก็จะไปโหลดฟอนต์ตามที่อยู่ที่ระบุไว้มาใช้งาน ทำให้เราสามารถกำหนดฟอนต์ได้ตามต้องการ ปัญหาต่อมาที่เจอคือแต่ละ Web Browser นั้นรองรับไฟล์ฟอนต์ในรูปแบบ (format) ที่แตกต่างกันออกไป ในโค้ดตัวอย่างใช้รูปแบบ Web Open Font Format (woff) รูปแบบอื่นที่มีการใช้งานกันได้แก่ EOT (Embedded OpenType), TrueType Font (ttf), Open Type Font (otf) และ Scalable Vector Graphics (SVG) เป็นต้น โดยแต่ละ Browser รองรับรูปแบบไฟล์ต่างกันดังรูป ที่มา : www.w3schools.com แล้วทีนี้เราจะเขียน CSS อย่างไรให้รองรับทุก Browser ล่ะ? คำตอบก็คือ ให้เราระบุแหล่งที่อยู่ของไฟล์ฟอนต์ (src) แต่ละรูปแบบต่อท้ายเข้าไปเลยดังนี้ @font-face { font-family: myFirstFont; src: url(‘sansation_light.woff’); src: url(‘sansation_light.woff’) format(‘woff’), url(‘sansation_light.eot) format(‘embeded-opentype’), url(‘sansation_light.ttf) format(‘truetype); } จากโค้ดในส่วนของ format จะเป็นตัวบอก Browser ว่าไฟล์ที่ระบุตรงกับรูปแบบที่รองรับหรือไม่ ถ้าตรงก็โหลดมาใช้งาน แต่ถ้าไม่ตรงก็จะไม่โหลดลงมาให้เปลือง Banwidth แล้วจะหาไฟล์ฟอนต์ได้จากไหน? อ่านมาถึงตรงนี้แล้ว หลายคนอาจจะกังวลว่า แล้วจะหาไฟล์ woff, eot, ttf เหล่านี้ได้จากไหน? คำตอบคือให้ทำตามขั้นตอนดังนี้ ดาวน์โหลดฟอนต์ในรูปแบบ ttf ที่ต้องการก่อนครับ แนะนำเว็บไซต์ f0nt.com จะมีฟอนต์ภาษาไทยสวยๆ ให้เลือกมากมาย และที่สำคัญคือสามารถใช้ได้ฟรี ไม่มีค่าลิขสิทธิ์ เข้าเว็บไซต์ http://www.font2com/ ให้อัพโหลดไฟล์ฟอนต์ที่เตรียมไว้ แล้วคลิกปุ่ม Convert & Download ได้เลยครับ จะได้เป็นไฟล์ zip มา ข้างในประกอบด้วยไฟล์ css, demo.html และไฟล์ฟอนต์ต่างๆ ให้เราเอาไปใช้งานได้เลยครับ

ASP.NET MVC Part2: เริ่มต้นสร้างเว็บด้วย MVC with Bootstrap

July 15, 2015 12:48

สวัสดีค่ะ จากบทความที่แล้ว ASP.NET MVC Part 1 : ทำความรู้จักกับ ASP.NET MVC ได้กล่าวถึง ASP.NET MVC ไปบ้างแล้วว่าคืออะไร ในส่วนของบทความนี้จะแนะนำการเริ่มต้นสร้าง Project เพื่อพัฒนา Web Application ด้วย Microsoft Visual Studio 2013 โดยใน MVC5 ซึ่งเป็นเวอร์ชันล่าสุด ได้มีการติดตั้ง Bootstrap มาให้ในตัว ช่วยให้การพัฒนาในส่วนของ View สามารถเรียกใช้งาน Bootstrap class ร่วมกับ Razor syntax(จะกล่าวถึงในบทความถัดไป) ในการแสดงผลหน้า View ได้ง่ายขึ้นและทำให้สามารถรองรับหลากหลายอุปกรณ์ที่มีหน้าจอที่มีขนาดแตกต่างกันออกไป โดยที่เราไม่ต้องเสียเวลาติดตั้งเพิ่มเอง Tools & Environment Microsoft Visual Studio 2013 Microsoft .Net Framework 4.5 ภาษาที่ใช้ในการพัฒนา Visual C# Step 1: เปิด Visual Studio ขึ้นมา และคลืกที่ New Project รูปที่ 1 Step 2: ที่เมนูด้านซ้ายให้เลือก Visual C# > Web >ASP.NET Web Application และตั้งชื่อ Project ดังรูปที่ 2 หลังจากนั้นให้กดปุ่ม OK รูปที่ 2 Step 3: เลือก Template Web โดยเลือกเป็น MVC หลังจากนั้นกด OK รูปที่ 3 Step 4: Check และ Update เวอร์ชัน Bootstrap สังเกตที่ solution explorer ฝั่งด้านขวา ที่โฟลเดอร์ Content และโฟลเดอร์ Scripts จะพบไฟล์ Css และ JavaScript ของ Bootstrap ติดตั้งมาให้เรียบร้อยแล้ว รูปที่ 4 ตรวจสอบเวอร์ชันของ Bootstrap ว่าเป็นเวอร์ชันล่าสุดแล้วหรือยัง โดย คลิกขวา ที่ Project แล้วเลือก Manage Nuget Packages ดังรูปที่ 5 รูปที่ 5 จะปรากฎหน้าต่าง Manage Nuget Package ซึ่งจะแสดง Package หรือ Library ทั้งหมดที่ตอนนี้ Project เราติดตั้งอยู่ ให้เลือกดูที่ Boostrap และสังเกตคำอธิบายที่ช่องด้านขวา จะแสดงเวอร์ชั่นอยู่ ซึ่งจากรูปที่ 6 เป็น Bootstrap 3.0 ซึ่งเป็นเวอร์ชันปัจจุบันแล้ว หากยังไม่เป็นปัจจุบันจะขึ้นปุ่มให้สามารถ Update เวอร์ชันได้ รูปที่ 6 หลังจากนั้นให้ไปดูที่โฟลเดอร์ App_Start > BudleConfig.cs ดังรูปที่ 7 โดยไฟล์ ฺBundleConfig.cs จะทำหน้าที่ลงทะเบียนเก็บ Path ของไฟล์ Java script และ CSS ต่างๆที่มีการเรียกใช้ในระบบไว้ที่นี่ เพื่อไว้เวลาเราอ้าง Path เราสามารถอ้าง Path ตามชื่อ Bundle ที่เราสร้างโดยไม่ต้องเรียกไปยัง Path File ตรงๆได้ รูปที่ 7 Step 5: ทดลอง Run preview ดูหน้าเว็บ ก่อนจะรัน ให้ไปที่ โฟลเดอร์ View > Shared