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

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

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

จากการศึกษาข้อมูลจากแหล่งต่างๆ พบว่าวิธีการในการลงนามเอกสารแบบอิเล็กทรอนิกส์นั้นมี 2 วิธีหลักๆ คือ  Electronic signature และ Digital Signature ซึ่งมีความหมายและข้อแตกต่างกันดังนี้

Electronic Signature

เป็นการทำสัญลักษณ์ หรือลายเซ็นที่อยู่ในรูปแบบอิเล็กทรอนิกส์โดยบุคคล เพื่อเป็นการยืนยันหรือลงนามในเอกสาร สัญลักษณ์ที่นิยมใช้กันได้แก่ รูปภาพลายเซ็นที่เซ็นด้วยหมึกปากกาลงในกระดาษแล้วสแกนเข้าสู่ระบบคอมพิวเตอร์ การใช้เมาส์ หรือนิ้วมือ หรือ stylus วาดรูปลายเซ็นบนหน้าจอคอมพิวเตอร์ ลายเซ็นที่แนบท้ายอีเมล์ การพิมพ์ชื่อด้วยคีย์บอร์ด รูปภาพลายนิ้วมือ การคลิก “I Agree” ใน Electronic form ต่างๆ เป็นต้น

Digital Signature

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

1. Signer Authentication เป็นความสามารถในการพิสูจน์ว่าใครเป็นคนเซ็นเอกสาร ตัวลายเซ็นจะสามารถใช้ในการเชื่อมโยงไปยังบุคคลที่เซ็นเอกสารได้
2. Data Integrity เป็นความสามารถในการตรวจสอบ หรือพิสูจน์ได้ว่ามีการแก้ไขเอกสารหลังจากที่ได้มีการเซ็นไปแล้วหรือไม่
3. Non-repudiation การไม่สามารถปฏิเสธความรับผิดชอบได้ เนื่องจากลายเซ็นที่สร้างขึ้นมีเอกลักษณ์ สามารถพิสูจน์ในชั้นศาลได้ว่าใครเป็นผู้เซ็นเอกสาร

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

แหล่งข้อมูลอ้างอิง : https://www.signinghub.com/electronic-signatures/

เมื่อช่วงเดือนสิงหาคม 2015 ผู้พัฒนา Bootstrap ได้เปิดตัว Bootstrap 4 Beta ออกมาให้ผู้พัฒนาเว็บไซต์ได้ทดลองใช้งานกัน โดยได้มีการแก้ไข bug ที่เจอในเวอร์ชั่น 3 และเพิ่มเติมความสามารถต่างๆ เข้าไป ทำให้การพัฒนาเว็บไซต์สามารถทำได้ง่าย และเป็นที่น่าสนใจได้มากขึ้น โดยในเวอร์ชั่นนี้มีการปรับปรุงจากเวอร์ชั่น 3 ค่อนข้างเยอะ แต่ที่เด่นๆ ได้แก่

• ใช้ Sass แทน Less ทำให้ compile ได้เร็วขึ้น ข้อดีของการใช้ Sass คือการมี community ขนาดใหญ่เป็นตัวช่วยสำหรับนักพัฒนาในการค้นคว้าหาความรู้เพิ่มเติม หรือขอความช่วยเหลือต่างๆ จาก community ได้
• ปรับปรุง Grid System ให้รองรับกับขนาดหน้าจอของอุปกรณ์ต่างๆ ให้มากยิ่งขึ้น
• สนับสนุนการใช้งาน flexbox grid system และ component
• ใช้ Card component แทนการใช้ wells, thumbnails และ panel
• รวม HTML Reset ทั้งหมดไว้ใน Module เดียวกันชื่อ Reboot
• เพิ่ม option ในการ customize ก่อนการดาวน์โหลดมาใช้งาน เช่นการกำหนด gradients, transitions, shadows ให้กับ component ต่างๆ โดยเก็บไว้ในตัวแปร Sass แล้ว recompile เป็น CSS มาใช้งาน
• ยกเลิกการสนับสนุน IE8 แล้ว ส่งผลทำให้เราสามารถใช้ประโยชน์จาก Style sheet ได้อย่างเต็มประสิทธิภาพ และในเวอร์ชั่นนี้ก็ได้เปลี่ยนการใช้งานหน่วย pixel มาเป็น rems และ ems แทน เนื่องจากหน่วยทั้ง 2 แบบนี้ จะช่วยให้การพัฒนาเว็บไซต์ในรูปแบบ Responsive ทำได้ง่ายขึ้น ทั้งในส่วนของ Typography และ component sizing แต่ถ้าหากยังอยากให้เว็บไซต์รองรับ IE8 ด้วย ทางผู้พัฒนา Bootstrap แนะนำว่าให้ใช้ Bootstrap Version 3 ตามเดิม
• เขียน Javascript plugin ใหม่ทั้งหมด
• ปรับปรุง auto-placement หรือการจัดวางตำแหน่งของ tooltips และ popovers
• ปรับปรุงเอกสาร Documentation ให้อ่าน และค้นหาได้ง่ายขึ้น
• และอื่นๆ เช่น Custom form control, มีคลาสสำหรับ margin และ padding ให้ใช้งานได้ง่ายขึ้น และ Utility Class สำหรับอำนวยความสะดวกในการพัฒนาเว็บไซต์ เป็นต้น

จะเห็นว่าจากรายการที่เปลี่ยนแปลงต่างๆข้างต้นนั้นมีความน่าสนใจมาก ทางผู้พัฒนาจึงได้สร้างเว็บไซต์ตัวอย่างไว้ให้ดูโดยสามารถดูได้จาก http://expo.getbootstrap.com/

การใช้ฟอนต์นำเสนอข้อมูลข่าวสารบนเว็บไซต์ หรือ Web Typography ในยุคแรก นั้น Browser จะเป็นตัวกำหนดว่าจะนำเสนอด้วยฟอนต์อะไร ทำให้การแสดงผลในแต่ละ Browser ไม่เหมือนกัน ต่อมาใน HTML2 ได้มีการเพิ่มแท็ก <font> เข้ามา และใน 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 เหล่านี้ได้จากไหน? คำตอบคือให้ทำตามขั้นตอนดังนี้

1. ดาวน์โหลดฟอนต์ในรูปแบบ ttf ที่ต้องการก่อนครับ แนะนำเว็บไซต์ f0nt.com จะมีฟอนต์ภาษาไทยสวยๆ ให้เลือกมากมาย และที่สำคัญคือสามารถใช้ได้ฟรี ไม่มีค่าลิขสิทธิ์
2. เข้าเว็บไซต์ http://www.font2com/
3. ให้อัพโหลดไฟล์ฟอนต์ที่เตรียมไว้ แล้วคลิกปุ่ม Convert & Download ได้เลยครับ จะได้เป็นไฟล์ zip มา ข้างในประกอบด้วยไฟล์ css, demo.html และไฟล์ฟอนต์ต่างๆ ให้เราเอาไปใช้งานได้เลยครับ

สำหรับในบทความนี้ เป็นภาคต่อจาก “เตรียมความพร้อมก่อนการพัฒนา Web Application ” โดยจะมาทำความรู้จักกับ Bootstrap กันให้มากขึ้น ซึ่ง Bootstrap จัดเป็น Front-end Framework  ที่กำลังได้รับความนิยมเป็นอย่างมากในปัจจุบัน อาจจะเป็นเพราะว่า Bootstrap มีแนวทางในการพัฒนาในแบบ Responsive Web Design ก็เป็นได้ (บทความ แนวทางการพัฒนาเว็บแบบ Responsive Web Design)

แนวคิดของ Bootstrap จะให้ความสำคัญกับการออกแบบการแสดงผลในอุปกรณ์ขนาดเล็กก่อน (Mobile First Approach) กล่าวคือ การสร้างเว็บไซต์ 1 หน้าสำหรับ Content ชุดเดียวกัน เราต้องออกแบบการแสดงผลให้ครอบคลุมหน้าจออย่างน้อย 3 ขนาดทั้ง Mobile device, Table และ Notebook  จริงๆ แล้วการจะออกแบบโดยเริ่มต้นที่หน้าจอขนาดใหญ่ หรือเล็กก่อนก็สามารถทำได้ทั้งนั้น แต่การเริ่มต้นจากหน้าจอขนาดเล็กจะทำให้เราได้โฟกัสใน Content ที่สำคัญๆ ก่อน เพื่อให้ User ได้รับข้อมูลหลักที่เว็บไซต์ต้องการนำเสนอ และค่อยๆ ออกแบบโดยเพิ่มรายละเอียดที่สำคัญรองลงมาในหน้าจอขนาดใหญ่ขึ้นตามลำดับ

ใน Bootstrap เวอชั่น 3 นั้นได้เพิ่มคุณสมบัติการเป็น Responsive มาในตัวแล้ว การนำมาใช้งานจึงไม่ต้อง Include ไฟล์คุณสมบัตินี้เพิ่มเหมือนในเวอร์ชั่นก่อนหน้า

การดาวน์โหลด Bootstrap

สามารถดาวโหลดได้ที่ www.getbootstrap.com

โครงสร้างไดเร็กทอรี่

หลังจากดาวน์โหลดไฟล์มาแล้ว ให้ทำการแตกไฟล์ .zip จะพบว่ามีโครงสร้างไฟล์ดังนี้

css
เป็นโฟลเดอร์สำหรับเก็บไฟล์ CSS ที่ใช้กำหนด Layout และ Theme ของหน้าเว็บ สังเกตว่าในโฟลเดอร์นี้จะมีไฟล์ .min ซึ่งเป็นไฟล์ CSS ที่ผ่านการคอมไพล์แล้วทำให้มีขนาดเล็กลง

js
เป็นโฟลเดอร์สำหรับเก็บไฟล์ JavaScript เพิ่มลูกเล่นให้กับเว็บ

fonts
เป็นโฟลเดอร์สำหรับเก็บฟอนต์ต่างๆ ที่ใช้ในการแสดงผลข้อความบนหน้าเว็บ

สิ่งที่ Bootstrap เตรียมไว้ให้

Grid system
ระบบ Grid จำนวน 12 คอลัมน์ สามารถเลือกใช้ได้ทั้งแบบ fixed และแบบ fluid

Base CSS
style sheets สำหรับ html elements พื้นฐาน เช่น typography, tables, forms และ images

Components
style sheets สำหรับสิ่งที่เราต้องใช้บ่อยๆ ไม่ว่าจะเป็น navigation, breadcrumbs รวมไปถึง pagination

JavaScript
jQuery plugins ต่างๆ ไม่ว่าจะเป็น modal, carousel หรือ tooltip

เทมเพลตพื้นฐาน

Bootstrap ใช้โครงสร้างเอกสารเป็น HTML5 ซึ่งมีเทมเพลตพื้นฐานดังรูป

ตัวอย่างการนำไปใช้งานที่เห็นได้ชัด และหลายๆ ท่านในชุมชน PSU SysAdmin เองคงจะคุ้นเคยกันดี เช่น

– Joomla เวอร์ชั่น 3 ที่นำ Bootstrap ไปใช้ เพื่อให้เว็บไซต์มีคุณสมบัติของ Responsive Design ตอบสนองการแสดงผลบนอุปกรณ์ที่มีขนาดต่างๆ กันได้เป็นอย่างดี

– WordPress ก็สามารถสร้าง Theme ด้วย Bootstrap ได้เหมือนกัน (http://blog.teamtreehouse.com/responsive-wordpress-bootstrap-theme-tutorial)

– นอกจากนี้ท่านยังสามารถดูตัวอย่างเว็บไซต์อื่นๆ ที่ทางผู้พัฒนา Bootstrap ได้รวบรวมไว้ได้ที่ http://expo.getbootstrap.com/

ในการพัฒนาเว็บไซต์ จะมีผู้ที่เกี่ยวข้องโดยตรงหลักๆ ได้แก่
1. ทีมพัฒนาเว็บไซต์ หรือโปรแกรมเมอร์ อาจจะมีคนเดียว หรือทำงานกันเป็นทีมก็ได้ และ
2. ผู้ใช้ หรือลูกค้า จะเป็นผู้กำหนดความต้องการของเว็บไซต์

หลังจากที่ทีมพัฒนาเก็บรวบรวมความต้องการของลูกค้า และได้ทำการวิเคราะห์ความต้องการแล้ว ขั้นตอนถัดไป ก็จะเป็นการวางแผน ออกแบบ Layout คร่าวๆ ก่อน เพื่อให้ทีมพัฒนามีความเข้าใจที่ตรงกัน อีกทั้งยังสามารถนำเสนอต่อลูกค้า เพื่อให้ลูกค้าเห็นภาพรวมของเว็บไซต์ก่อนการลงมือออกแบบเว็บไซต์ และเขียนโค้ดจริง  เราเรียกกระบวนการออกแบบ Layout และนำเนื้อหาคร่าวๆ ในเว็บไซต์มาจัดเรียงบน Layout นี้ว่า “การทำ Wireframe”

การทำ Wireframe นั้นไม่ได้มีรูปแบบตายตัว นักพัฒนาแต่ละคนอาจมีวิธีการที่แตกต่างกันไป แต่มีวัตถุประสงค์ในการทำที่เหมือนกัน คือ เพื่อให้เห็นภาพรวมของเว็บไซต์ ทำให้ทีมเข้าใจตรงกัน และพัฒนาไปในทางเดียวกัน

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

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

1. Prototype – โปรแกรมทำ Wireframe ตัวนี้มีทั้งบน Windows / Mac OS โดยแบ่งเป็นเวอร์ชั่นฟรี กับเวอร์ชั่นเสียเงิน
2. Pencil Project – โปรแกรมทำ Wireframe ใช้ฟรี ๆ มีทั้งบน Windows / Linux / Mac OS
3. Cacoo – Web App สำหรับทำ Diagram, Wireframe ออนไลน์ โดย Account ฟรีจะสร้าง Wireframe ได้จำกัดหน้า
4. JumpChart – Web App สำหรับทำ Wireframe Online ที่หน้าตาเรียบง่าย โดย Account ฟรีจะสร้าง Wireframe ได้จำกัดหน้า
5. FrameBox – Web App สำหรับทำ Wireframe ฟีเจอร์น้อย แต่ใช้ฟรี ทำเสร็จส่งลิงค์ให้ลูกค้าได้ทันที
6. iPlotz – Web App สำหรับสร้าง Wireframe ออนไลน์ที่ดูมีสีสันกว่าตัวอื่น ใช้ฟรี Account จะจำกัดหน้า

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