Day: February 9, 2023

  • สร้าง chart ง่ายสุด ๆ ด้วย Power Point

    ตามหัวข้อเลยค่ะ อาจจะเป็นเรื่องที่ง่าย ๆ ที่บางคนรู้แล้ว แต่บางคนก็ยังไม่รู้ (รึปล่าว😁) เข้าเรื่องกันดีกว่าค่ะ👌 ปกติเราอาจจะใช้ word หรือลาก box ข้อความมา แต่วันนี้เราจะมาใช้ power point ทำแผนผังองค์กร หรือ chart อะไรก็ได้ ใช้เวลานิดเดียวและง่ายสุด ๆ เลยค่ะ สมมุติเรามีรายชื่อคนในองค์กร ตามตัวอย่าง

    จากนั้นจัดลำดับการเป็นหัวหน้าและลูกน้อง โดยใช้ปุ่ม Increase List Level

    หมายถึงรายชื่อที่เลือกเป็นลูกน้องของ ใบเฟิร์น สามารถเลือกรายชื่อที่ต้องการและคลิกปุ่ม Decrease List Level หรือ crease List Level เพื่อปรับลำดับตามต้องการ ดังรูป

    จากนั้นไปที่ Home –> Convert to SmartArt –> More SmartArt Graphics –> Hierarchy อยากได้ตัวไหนก็เลือกได้เลยค่ะ

    ก็จะได้ผังองค์กรทันทีเลย

    จากนั้นก็สามารถแก้ไข ปรับแต่งได้ คลิกเลือกที่รูปแล้วเลือกไฟล์รูปเพื่อปรับแต่ง คลิกที่ชื่อเพื่อปรับสี ขนาดตัวอักษรได้ ที่ “SmartArt Design” เราสามารถเลือกเปลี่ยน theme สีได้ที่ “Change Colors” แต่หากต้องการปรับแต่งเองให้คลิกที่ “Convert to Shapes” แต่ข้อควรระวังถ้าเลือก “Convert to Shapes” แล้วจะแก้กลับไม่ได้แล้วนะ แค่นี้เองค่ะ ง่ายมากเลยใช่มั๊ยหล่ะ😉 อ่านมาถึงแล้วก็ขอขอบคุณทุกกำลังใจ😍นะคะ

  • วิธีใส่ Subtitle อย่างง่าย บนมือถือ ด้วย CapCut

    ใครที่เป็น youtuber หรือ เริ่มต้น ทำช่องบนสื่อ Social Media ต่าง ๆ และอยากใส่ Subtitle ใต้คลิป แต่ไม่รู้จะเริ่มต้นยังไง ลองมาดูวิธีใส่ Subtitle ง่าย ๆ ผ่าน Application CapCut บนมือถือกันค่ะ
    ซึ่งสามารถ Download ได้ทุกช่องทาง ทั้ง Play Store และ App Store

    • ขั้นตอนแรก คือให้กดคลิกเพิ่ม โปรเจกต์ใหม่ (New project)และกดอนุญาตการเข้าถึงต่าง ๆ
    • จากนั้นระบบจะเข้าไปยังคลังคลิปวิดีโอในเครื่องของเรา และให้ทำการเลือกคลิปที่ต้องการใส่ Subtitle แล้วทำการกดปุ่มเพิ่ม (Add)
    • เมื่อคลิปที่เลือกเข้ามาในหน้าจัดการแล้วให้เลือกเครื่องมือข้อความ (Text)
    • ให้ตั้งค่าเป็นเสียงต้นฉบับ ในส่วนเลือกภาษา หากใครต้องการให้ Sub Title ที่ใส่เป็นภาษาไทยสามารถเลือกภาษาตามที่ต้องการได้เลย ในกรณีนี้จะเลือกเป็นภาษาไทย เมื่อเสร็จแล้วให้มาคลิกที่ปุ่ม เริ่มต้น (Start)
    • เมื่อเสร็จแล้วให้มาคลิกที่ปุ่ม เริ่มต้น (Start) Application จะสร้าง Subtitle ให้อัตโนมัติ
    • เมื่อเสร็จแล้ว จะสามารถเห็น ข้อความ Subtitle ในช่องตัดต่อ
    • เราสามารถปรับตำแหน่ง ขนาด ของ Subtitle ได้
    • โดยให้คลิกไปที่แถบข้อความ Subtitle ที่ต้องการแก้ไข เราสามารถปรับตำแหน่งข้อความ ปรับขนาดหรือเปลี่ยน Font ตลอดจน แก้ไขข้อความที่คำนวณออกมาไม่ถูกต้องได้ จากนั้นให้กดเครื่องหมายถูก
    • หลังจากที่แก้ไขเรียบร้อยแล้ว ให้เรา save คลิปนี้ไว้ในเครื่องโดย กดสัญลักษณ์ลูกศร มุมขวาบน
    • เพียงเท่านี้คลิปของเราก็จะถูกบันทึกลงมาในเครื่อง จากนั้นให้กดปุ่ม เสร็จสิ้นมุมขวาบนได้เลยเราก็จะได้คลิปวิดีโอที่มี Subtitle มาแบบง่าย ๆ แล้ว!!!!

    สามารถดูตัวอย่างคลิปที่ใส่ Subtitle ได้ตาม Link ข้างล่างนี้ค่ะ

  • วิธีการสร้าง/แชร์ Template จาก Notion

    • URL : https://www.notion.so/

    การใช้งานโปรแกรม Notion มีเครื่องมือการใช้งานที่หลากหลาย มาประยุกต์กับงานต่างๆ ได้ ซึ่งงานที่เอามาใช้มากที่สุดตอนนี้เป็นการบันทึกรายงานการ

    สร้างเป็น Table

    1. สร้างเพจใหม่โดยการคลิก New page
    2. ตั้งชื่อของเพจ
    3. เลือก Table

    เมื่อตั้งชื่อเพจ และสร้าง Table เรียบร้อยแล้ว เราต้องการสร้าง template สำหรับเป็นรูปแบบที่เมื่อมีการบันทึกการประชุมทุกครั้งจะต้องมีหัวข้อนี้เสมอ ลองมาทำกันต่อค่ะ

    1. คลิกปุ่ม “New”
    2. คลิกปุ่ม “New template”

    เริ่มสร้าง template เริ่มจากการตั้งชื่อ template ตัวอย่างใช้ชื่อว่า “Meeting Template”

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

    สร้างส่วนที่ 1 เป็นการสร้างข้อมุลการประชุม ได้แก่

    1. ชื่อ property
    2. ประเภทของ property ซึ่งมีให้เลือกหลายอย่าง ส่วนนี้อาจจะต้องศึกษาเพิ่มเติม

    เพิ่มข้อมูลวันที่ เลือกประเภทเป็น “Date”

    ส่วนของวันที่จะสามารถตั้งค่าได้ว่า Format ว่าต้องการให้แสดง Month/Day/Year ซึ่งตัวอย่างเราจะเคยชินจึงเลือกใช้เป็น Day/Month/Year

    เพิ่มข้อมูลประเภทการประชุม

    1. ตั้งชื่อประเภทการประชุม
    2. เลือกประเภทเป็น “Select”
    3. ซึ่งสามารถเพิ่มข้อมูลได้ เช่น ประชุมภายใน ประชุมภายนอก เป็นต้น

    เมื่อเราเพิ่มประเภทการประชุมเรียบร้อยแล้ว

    1. สามารถปรับปรุงตามสีสรรที่ต้องการได้

    บันทึกข้อความที่ต้องการสร้าง Template ตามหัวข้อที่เราต้องการ

    1. จัดทำหัวข้อรายงานการประชุม ได้แก่
      • วาระทบทวนการประชุม
      • วาระการประชุม
      • วาระอื่น ๆ (ถ้ามี)
      • เรื่องที่จะติดตามครั้งต่อไป

    มีการจัดทำวาระย่อยๆ ตามวาระการประชุม

    1. สร้างวาระย่อย โดยระบุชื่อวาระ พร้อมมติที่ประชุม

    เมื่อสร้าง Template เรียบร้อยแล้ว

    1. ดำเนินการ Set As default เพื่อให้สร้างเอกสารจะเรียกใช้ Template ให้ทันที

    ดำเนินการยืนยันการตั้งค่า default

    1. เลือก For all views in “บันทึกรายงานการประชุม”

    ตรวจสอบอีกครั้งว่า Template ที่สร้างเป็นค่า default หรือยัง

    1. Template “Meeting Template” มีค่า DEFAULT

    เมื่อต้องการบันทึกรายงานการประชุม

    1. คลิกปุ่ม “New”

    สร้างเอกสารการประชุมใหม่

    1. ตั้งชื่อตาม Template
    2. รายละเอียดการประชุม
    3. Template บันทึกรายงานการประชุม

    หากต้องการแชร์ไฟล์บันทึกการประชุมให้แก่เพื่อน หรือใช้ภายในหน่วยงาน สามารถแชร์ได้

    1. คลิกปุ่ม “Share”
    2. คลิกปุ่ม “Allow duplicate as template”

    วิธีการ Duplicate เพื่อนำ Template จากเพื่อนมาใช้งาน โดยนำลิงก์ที่ได้มาเปิด

    1. คลิกปุ่ม Duplicate
    2. ข้อมูบันทึกรายงานการประชุมก็สามารถใช้ได้ทันที

    หวังว่าวิธีการนี้จะสามารถทำให้การทำงานได้อย่างสะดวกและรวดเร็วขึ้นนะคะ ^^

  • เทคนิคการขยับแถวขึ้นลงใน Table ด้วยวิธี Drag & Drop ใน Blazor

    สำหรับ blog นี้ของผู้เขียน ถือว่าเป็นซีรี่ส์ที่ต่อเนื่องมาจาก https://sysadmin.psu.ac.th/2021/05/25/ขยับแถว-row-ขึ้น-ลง-ใน-asp-net-gridview-ด้วย-j/ และ https://sysadmin.psu.ac.th/2021/05/27/ขยับแถว-row-ขึ้น-ลง-ใน-asp-net-gridview-ด้วย-c/ ก็คือผู้เขียนจะนำเสนอวิธีการขยับแถวอีกวิธีหนึ่ง ที่น่าจะเฟรนด์ลี่ต่อผู้ใช้มากกว่า นั่นก็การ Drag & Drop ก็คือผู้ใช้งานสามารถเลือกคลิก ลาก และวาง เพื่อจัดลำดับได้ตามความต้องการ ซึ่งเมื่อผู้เขียนมาทำงานบน Blazor พบว่าการ implement เรื่องนี้สามารถทำได้ง่ายมาก โดยไม่ต้องพี่งพา javascript แต่อย่างใด เรามาดูกันเลยครับ

    1. เพิ่มโค้ด HTML ในส่วนของการแสดงผลข้อมูลในรูปแบบ Table

    @if (provinces != null)
    {
        <table class="table table-striped" >
            <thead>
                <tr >
                    <th>ลำดับ</th>
                    <th>จังหวัด</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var pr in provinces)
                {
                    <tr role="button" class="cursor-pointer"  >
                        <td>@pr.ID</td>
                        <td>@pr.Name</td>
                    </tr>
                }
            </tbody>
        </table>
    }

    2. เพิ่มโค้ด C# ในส่วนที่ควบคุมการทำงานและจำลองข้อมูล

    private List<Province> provinces = new List<Province>();
    
    protected override void OnInitialized()
    {
    
    	provinces.AddRange(new List<Province> {
    		new Province(1,"สงขลา"),
    		new Province(2,"ปัตตานี"),
    		new Province(3,"ยะลา"),
    		new Province(4,"นราธิวาส"),
    		new Province(5,"สตูล")
    	});
    
    }
    
    public class Province
    {
    	public Int32 ID;
    	public string Name;
    	public Province(int id, string name)
    	{
    		ID = id;
    		Name = name;
    	}
    }

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

    3. จากนั้นเพิ่มโค้ดส่วนที่ควบคุมการ Drag และ Drop ทั้งใน HTML และ C#

    @if (provinces != null)
    {
        <table class="table table-striped" ondragover="event.preventDefault();">
            <thead>
                <tr >
                    <th>ลำดับ</th>
                    <th>จังหวัด</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var pr in provinces)
                {
                    <tr role="button" class="cursor-pointer" draggable="true"
                @ondrop="@(()=> Drop(pr))" @ondrag="@(e => StartDrag(pr))" >
                        <td>@pr.ID</td>
                        <td>@pr.Name</td>
                    </tr>
                }
            </tbody>
        </table>
    }
    • ondragover=”event.preventDefault();” เป็นการขัดขวางการทำงานปกติของการ drag บน object เพื่อให้สามารถ drop ได้
    • @ondrop=”@(()=> Drop(pr))” เรียกฟังก์ชัน Drop พร้อมกับส่ง pr (จังหวัด) เมื่อมีเหตุการณ์ drop เกิดขึ้น
    • @ondrag=”@(e => StartDrag(pr))” เรียกฟังก์ชัน StartDrage พร้อมกับส่ง pr เมื่อมีเหตุการณ์ drag เกิดขึ้น
    /// <summary>
    /// เก็บตำแหน่งของจังหวัดที่คลิกเลือก เมื่อเริ่ม drag
    /// </summary>
    /// <param name="province"></param>
    private void StartDrag(Province province)
    {
    	currentIndex = GetIndex(province);
    }
    
    /// <summary>
    /// หาตำแหน่งของจังหวัดที่อยู่จาก list
    /// </summary>
    /// <param name="province"></param>
    /// <returns></returns>
    int GetIndex(Province province)
    {
    	return provinces.FindIndex(p => p.ID == province.ID);
    }
    
    /// <summary>
    /// เมื่อ Drop จังหวัดที่ drag มาลงในตำแหน่งที่ต้องการ
    /// </summary>
    /// <param name="province"></param>
    void Drop(Province province)
    {
    	if (province != null)
    	{
    		// หาตำแหน่งของจังหวัดที่ถูก drop
    		var index = GetIndex(province);
    
    		// หาจังหวัดที่ถูก drag มา จาก index ที่เก็บไว้ตั้งแต่เริ่ม drag
    		var current = provinces[currentIndex];
    
    		// ลบจังหวัดที่ถูก drag มา ออกจาก list
    		provinces.RemoveAt(currentIndex);
    
    		// แทรกจังหวัดที่ถูก drag มา ลงในตำแหน่งที่ drop
    		provinces.Insert(index, current);
    
    		StateHasChanged();
    	}
    }

    4. เมื่อทดสอบการทำงาน รายชื่อจังหวัดในตารางจะสามารถคลิก ลาก และวางไปยังตำแหน่งที่ต้องการได้

    5. และเมื่อ drop ลงไปยังตำแหน่งที่ต้องการ จังหวัดที่ลากมาก็จะแทรกเข้าไปยังตำแหน่งที่ drop

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

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


    แหล่งข้อมูลอ้างอิง