mix5003, Author at IShare.in.th

การใช้ font THSarabun หรือภาษาไทย ใน mpdf 7

อันนี้เป็นเพียงตัวอย่างอย่างสั้นที่สุดที่ เพื่อ demo ให้ดูนะครับ ต้องไปประยุกต์เอาเอง

ติดตั้ง mpdf โดยสั่ง composer require mpdf/mpdf
สร้าง folder ชื่อ font แล้วเอา font ใส่ลงไป (พวกไฟล์ .ttf เช่น Sarabun-Regular.ttf)

code ตามนี้ครับ (จุดสำคัญคือบรรทัด 18 key ของ array ต้องเป็นตัวเล็กหมด)

<?php

require_once __DIR__ . '/vendor/autoload.php';

$defaultConfig = (new Mpdf\Config\ConfigVariables())->getDefaults();
$fontDirs = $defaultConfig['fontDir'];

$defaultFontConfig = (new Mpdf\Config\FontVariables())->getDefaults();
$fontData = $defaultFontConfig['fontdata'];


$mpdf = new \Mpdf\Mpdf([
    'fontDir' => array_merge($fontDirs, [
        __DIR__ . '/font',
    ]),
    'fontdata' => $fontData + [
        // จุดสำคัญคือตรงชื่อ font ตรงนี้ต้องตัวเล็กหมดครับ
        'th_sarabun' => [
            'R' => 'Sarabun-Regular.ttf',
        ]
    ],
    'default_font' => 'th_sarabun',
    
]);

$mpdf->WriteHTML('<p>ทดสอบภาษาไทย</p>');
$mpdf->Output();

ลองทดสอบครับ ใช้ได้เลย

เพิ่ม Index ให้ WordPress เพื่อลดโหลด

อันนี้เป็นบทความสั้นๆครับ เกิดจากการสังเกตว่าใน WordPress ของผมนั้นจะมี Query อันนึงที่ run เยอะมาก และบางทีก็นานมาก ตัวอย่างประมาณนี้ครับ

SELECT post_id FROM wp_postmeta WHERE meta_key = '_wp_attached_file' AND meta_value = '2015/11/top-5-antivirus.jpg';

ซึ่งจากที่เดาคือมันเช็คว่า Attachment ตัวนี้มี Post ไหนใช้บ้าง ผมไม่รู้ว่าตัวไหนเป็นคนเรียกใช้ แต่เนื่องจากมันเยอะมาก เลยทำการเพิ่ม index ให้มัน ทำให้มัน Query ได้เร็วขึ้น

ALTER TABLE wp_postmeta ADD INDEX first_50_key_10_value (meta_key(50),meta_value(10))

เพื่อความประหยัดผมเลย index meta_value แค่ 10 ตัวพอ (เพียงพอสำหรับ /ปี/เดือน/ ก็ลดไปได้เยอะและ)

แต่อันนี้ไม่ได้ช่วยกับทุกคนนะครับ บางทีมันอาจจะมาจาก Theme หรือ Plugin ก็ได้ ดังนั้นต่อให้ท่านใช้ไปก็ไม่อาจจะรับประกันได้ว่ามันจะช่วยท่านได้

สอนใช้ Facebook Comment Moderation Tools เบื้องต้น และการทำ Comment Mirroring

วันนี้เราจะมาสอน Facebook Comment Moderation Tool ถ้าถามว่ามันคืออะไร มันคือเครื่องมือจัดการ Comment ของ Facebook ที่เกิดจาก Facebook Comments Plugin (ถ้ายังไม่รู้จัก มันคือกล่อง Comment Facebook ที่ประกฏบนเว็บต่างๆ เช่นเว็บนี้เป็นต้น ลองเลื่อนไปดูตัวอย่างด้านล่างได้ครับ) โดยเครื่องมือนี้นอกสามารถลบ Comment ต่างๆที่ไม่ต้องการได้แล้ว ยังมีฟีเจอร์บางอันที่หลายๆคนไม่รู้มาแนะนำด้วย ซึ่งมันคือการตั้ง Blacklist คำ และ Mirroring Comment

การตั้งค่าการใช้ Facebook Comment Moderation Tool

ติดตั้ง Facebook Comment Plugins ให้กับหน้าต่างๆ ตามปกติ (ในบทความขอไม่สอนวิธีการเอา Comment Plugins มาใส่ในนะครับ ถ้าใช้ WordPress จะมี plugins เยอะแยะ)
ตั้งค่า Admin มี 2 วิธีคือ
1. ไปสร้าง app facebook (ดูวิธีสร้าง app ได้ที่นี่) แล้วใส่คำสั่งนี้ลงใน <head> ของทุกหน้า
```
<meta property="fb:app_id" content="{YOUR_APP_ID}" />
```
2. ใส่เป็น Facebook user id โดยใส่คำสั่งนี้ลงใน <head> เช่นกัน
```
<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID_1}"/>
<meta property="fb:admins" content="{YOUR_FACEBOOK_USER_ID_2}"/>
```
  ถ้ามีคนเดียวก็ใส่บรรทัดเดียว มี 2 คนก็ใส่ 2 บรรทัด มีกี่คนก็ใส่ไปเท่านั้นคน
  
  โดยส่วนตัวแนะนำวิธีสร้าง App ID มากกว่า ครับ เพราะใช้ Facebook Comment Mirror ได้ และถ้าใช้ WordPress และลง Plugin Yoast SEO สามารถนำ App ID ไปใส่ใน Yoast SEO ได้เลย ในหน้า Social – Yoast SEO ในแทบ Facebook จะมีช่องให้ใส่ Facebook App ID ได้เลยครับ ไม่ต้องแก้ Code ใดๆ
สำหรับคนใช้แบบ App ID ต้องไปเช็คการตั้งค่าใน Facebook For Developer ในส่วนของ App โดยกดเข้าไปใน Facebook App ที่เราผูกกับเว็บไซต์ไว้ (app id ที่เราเอาไปใส่ใน head) ให้เข้าไปที่ Settings > Advanced และให้เปิดตัวเลือก Social Discovery เพื่อให้คนที่ไม่ได้ Login facebook สามารถมองเห็น Comment ได้

วิธีใช้ Facebook Comment Moderation Tool เบื้องต้น

ให้เข้าไปที่หน้า Facebook Comment Moderation Tool
เมื่อเข้าไปแล้วจะพบหน้าตาดังนี้ (หากมี Comment อยู่)
โดยจากภาพส่วนที่แสดงต่างๆมีดังนี้
1. เอาไว้เปลี่ยน App หรือเว็บกรณีมีมากกว่า 1 เว็บ
2. เป็นลิงค์เพื่อไปดูบทความหรือหน้าต้นฉบับ ว่าเนื้อหาเป็นอะไร
3. เป็นส่วนจัดการต่าง โดยไล่จากซ้ายไปขวาคือ
  1. Approve สำหรับยินยอมให้เนื้อหานั้นแสดงผลบนเว็บเรา (หากเปิด Public ไว้จะไม่มีผลใดๆ ไม่ต้องกดก็แสดงอยู่ดี)
  2. Hide คือซ่อนความเห็นนั้นไม่ให้แสดง
  3. Report Spam ตามชื่อ คือบอก Facebook ว่า Comment เป็น Spam
  4. More ในปัจจุบันในเมนูนี้ผมไม่เห็นตัวเลือกอื่นนอกจาก Ban User ให้ไม่สามารถมาโพสในเว็บเราได้อีกต่อไป
4. Settings เป็นการตั้งค่าต่างซึ่งจะอธิบายในหัวข้อต่อไป
พอดีทำรูปเสร็จเพิ่งเห็นขี้เกียจแก้รูป ขออธิบายตรงนี้นะครับ ข้างล่างหัวข้อ 1 จากภาพด้านบนจะมีแทปต่างๆ ให้เราดู โดยแต่ละอันมีความหมายดังนี้
1. Review คือรอการตรวจสอบ ถ้าเรากด Approve จะไป Public (แต่ถ้าตั้ง Public ไว้ไม่ต้องกดมันก็แสดงให้คนอื่นเห็น)
2. Public คือ Comment ที่แสดงบนเว็บแล้ว
3. Hidden ความเห็นที่ถูกซ่อน
4. Flagged กับ My Queue ไม่เคยใช้ครับ ใครรู้บอกด้านล่างทีครับ T_T

ค่าต่างๆที่สามารถตั้งได้ในหน้า Settings ของ Facebook Comment Moderation Tool

หน้า Settings

ในหน้านี้จะมีให้ปรับดังนี้ (ไล่จากบนลงล่าง)

เรียง Comment ตามอะไร โดย
– Top คือให้ Facebook เป็นเลือก ว่าอันไหนดีที่สุด
– Newsest คือจะเห็นใหม่สุดก่อน
– Oldest คือแสดงเก่าสุดก่อน
Enable Attachments คือการอนุญาติให้ผู้ใช้คอมเม้นเป็นภาพหรือ Sticker ได้
Enable Notifications คือบอกว่าถ้ามีคน Comment บนเว็บเราให้แจ้งเตือนในเฟสเราไหม
Comment Mirroring จะขึ้นเมื่อใช้ Admin เป็นแบบ App เท่านั้น มันคือฟีเจอร์ที่ Facebook ทำไว้ให้ โดยความสามารถของมันคือตามชื่อมันคือการส่ง Comment ที่โพสบนเว็บ ไปแสดงบน Post ที่แชร์ URL นั้นบน Page ที่เราเลือก และหากมีคน Comment บน Post ที่แชร์ URL นั้นบน Page ที่เราเลือก ก็จะไปแสดงบนเว็บของเราด้วยเช่นกันครับ (แต่ใช้ได้เฉพาะหน้าใหม่ๆ ที่ Facebook ไม่เคยเห็น ถ้าเป็นหน้าเก่าที่เคยแชร์แล้วจะไม่มีผล)

หน้า Moderation Rules

ในหน้านี้จะตั้งค่า

ความยาวสูงสุดต่อ Comment อย่างของผมคือ 5000 ตัวอักษร
ตั้งค่าปิดไม่ให้ Comment หลัง Facebook เจอบทความนั้นไปแล้วกี่วัน (การเจอของมันเช่นมีคนไลค์ หรือแชร์)
เปิด Mode Spam Filter แบบ Aggressive อันนี้อธิบายง่ายๆคือเพิ่มระดับ Spam Filter ให้สูงขึ้น ทำให้บางครั้งอาจจะไป Filter เอา Comment จริงๆออกด้วย ไม่แนะนำให้เปิด
ตรวจว่ามีกี่ลิงค์ใน Comment ถ้ามีมากกว่าที่เรากำหนด ให้เราต้องมาตรวจก่อน ถึงจะแสดงได้
ตั้งค่าการตรวจสอบ โดยแต่ละอันหมายถึง
1. Public = เปิดกว้างคือ Comment ปุปขึ้นเลยไม่มีการตรวจสอบ ถึงมี Blacklist Word ก็แสดงอยู่ดี
2. Review Blacklisted Comments = แสดงทั้งหมด ยกเว้น Comment ที่มี Blacklist Word ซึ่งเราจะต้องตรวจสอบก่อนแสดง (วิธีตั้ง Blacklist จะสอนในหัวข้อถัดๆไป) แนะนำอันนี้ครับ
3. Closed = ซ่อนทุกความเห็น Comment ที่ไม่มี Blacklist Word เท่านั้น ถ้ามีจะถูกลบไปเลย ถึงจะแสดงใน Review และต้องกด Approve ทุก Comment ถึงจะแสดง

หน้า Moderators

หน้านี้เอาไว้ตั้งว่าใครบ้างที่สามารถตรวจสอบ Comment ได้

หน้า Blacklist

หน้านี้เอาไว้ตั้ง Blacklist Word โดยแนะนำว่าการตั้งจะต้องนำหน้าและตามหลังด้วย .* เช่นเราจะห้ามคำว่า มีเวลาว่าง (เอามาจาก “มีเวลาว่าง 2 – 3 ชม ไหม”) ผมต้องใส่ไปว่า .*มีเวลาว่าง.* จากนั้นให้กด Enter 1 ที หากถูกต้องจากขึ้นประมาณนี้ (ของผมมี 3 คำ ใส่ไปเป็นตัวอย่าง)

หน้า Banned Users

ตามชื่อเลยครับ เป็นหน้าสำหรับตั้งค่าว่าใครถูกแบนไม่ให้ Comment ในเว็บเราบ้าง สามารถใส่ชื่อไปได้เลยครับ

วิธีปิดกล่อง Comment ตรงกล่อง Chat ของ Facebook (Post Tabs)

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

ก่อนอื่นสำหรับคนที่ไม่รู้ว่า Facebook Post Tabs หรือไอ้กล่องคอมเม้นที่ช่องแชทคืออะไร ให้ดูภาพนี้ครับ

กล่องใหญ่ๆด้านซ้ายนั่นแหละครับ มันจะขึ้นมาทุกครั้งที่มีคอมเม้นที่เกี่ยวข้องกับเราขึ้นมา

วิธีปิด Facebook Post Tabs

ให้กดรูปเฟืองตรงมุมขวาล่างในหน้า Facebook(อยู่ในแถบด้านขวา ตรงกล่องค้นหาคนจะคุยด้วย)
กด Turn Off Post Tabs เท่านี้ ก็จะไม่มีคอมเม้นมาแสดงในแถบแชทอีกต่อไปครับ

วิธีใช้ภาษาไทยบน Laravel ด้วย laravel-dompdf โดยการเพิ่ม font ภาษาไทยลงไป

บทความนี้เกิดจากคำถามในกลุ่ม Laravel Thailand ซึ่งพบบ่อยพอสมควรว่าจะสร้าง PDF ภาษาไทยยังไง ก็เลยเขียนขึ้นมาซะเลย โดยในบทความนี้จะใช้ laravel-dompdf เป็นหลัก

วิธีการเพิ่ม font ภาษาไทยลง laravel-dompdf

เตรียมโปรเจคสำหรับทดสอบ

ส่วนนี้จะสอนลง laravel-dompdf กับสร้าง PDF แบบพังๆขึ้นมา 1 ตัวเพื่อใช้ทดสอบ ถ้าทำเป็นแล้วข้ามไปได้เลยครับ

ก่อนอื่นก็ต้องลง Laravel แบบปกติก่อน (ไม่สอนนะ น่าจะทำกันเองเป็น) ในเวอร์ชันนี้ผมใช้ Laravel 5.4 แต่คิดว่าตระกูล 5.x สามารถใช้ได้เหมือนกันหมด
สร้างโฟลเดอร์ storage/fonts และแก้ไข permission ให้สามารถเขียนได้ (โดยทั่วไปคือ 0777)
ติดตั้ง laravel-dompdf โดยมีขั้นตอนดังนี้
1. สั่ง
```
composer require barryvdh/laravel-dompdf
```
2. แก้ไขไฟล์ config/app.php โดยเพิ่ม
```
Barryvdh\DomPDF\ServiceProvider::class,
```
  ลงไปในส่วนของ providers
  
  และเพิ่ม
```
'PDF' => Barryvdh\DomPDF\Facade::class,
```
  ลงในส่วนของ aliases
สร้างหน้าทดลองสำหรับใช้ PDF (ในขั้นนี้ต้องประยุกต์เอาเองตามความต้องการ หากมีอยู่แล้วข้ามไปข้อ 4 ได้เลย)
1. สร้าง view สำหรับทดสอบ โดยในตัวอย่างของผมคือ invoice.blade.php ใน resources/views/pdf โดยมีเนื้อหาดังนี้
```
<html>
<head>
</head>
<body>
<h1>ใบแจ้งหนี้สำหรับ คุณ{{ $name }}</h1>
ขอขอบคุณในการสั่งซื้อ
</body>
</html>
```
2. สร้าง route หรือ controller ในการสร้าง pdf (เนื่องจากเป็นตัวอย่าง เลยทำเป็น route ง่ายๆ)
```
<?php

Route::get('/pdf', function () {
    $data = [
        'name'=>'อะไรสักอย่าง ไม่รู้นามสกุลอะไร'
    ];
    $pdf = PDF::loadView('pdf.invoice', $data);
    return @$pdf->stream();
});
```
  ในบรรทัดที่ 8 จำเป็นต้องใส่ @ นำหน้า เพื่อปิด error บางตัว ที่อาจจะเกิดจากการหา fonts ไม่เจอ
3. หลังจากที่ทำตามข้างบนแล้วจะพบว่าเมื่อเข้าไปภาษาไทยยังเป็นเครื่องหมายตกใจอยู่ เพราะข้างบนนั้นยังไม่ได้ทำให้รองรับภาษาไทย

ปรับ laravel dompdf ให้สามารถใช้งาน font ภาษาไทยได้

ในขั้นนี้จะเป็นขั้นตอนจริงๆ เพื่อทำให้ laravel-dompdf รองรับภาษาไทยในการ render ต้องทำตามขั้นตอนต่อไปนี้เพื่อให้รองรับภาษาไทย โดยขั้นตอนนี้เป็นแบบง่าย ซึ่งในการสร้าง pdf ครั้งแรกสุดอาจจะทำให้ช้าได้ โดย font ไทยในครั้งนี้ผมเลือกใช้ THSarabunNew ครับ (ถ้าอยากดาวโหลดมาทำการทดสอบ สามารถดาวโหลดได้จากที่นี่)

ให้สร้างโฟลเดอร์ชื่อ fonts ใน public และนำ font ทั้งหมดไปใส่ไว้ ดังรูป

แก้ไขในส่วนของ views โดยเพิ่ม tag meta ลงไปใน head ของ invoice.blade.php จะได้เป็น

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<h1>ใบแจ้งหนี้สำหรับ {{ $name }}</h1>
ขอขอบคุณในการสั่งซื้อ

</body>
</html>

เพิ่ม tag style เพื่อประกาศ fonts แบบ runtime และบอกให้ทั้งเอกสารใช้ fonts นั้น วิธีการคือให้แก้ไข invoice.blade.php ให้เป็นดังนี้
```
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        @font-face {
            font-family: 'THSarabunNew';
            font-style: normal;
            font-weight: normal;
            src: url("{{ public_path('fonts/THSarabunNew.ttf') }}") format('truetype');
        }

        body {
            font-family: "THSarabunNew";
        }
    </style>
</head>
<body>
<h1>ใบแจ้งหนี้สำหรับ {{ $name }}</h1>
ขอขอบคุณในการสั่งซื้อ

</body>
</html>
```
โดยส่วนของการประกาศ fonts คือบรรทัดที่ 6 – 10 ส่วนสำคัญคือบรรทัดที่ 10 ที่เป็นการบอกว่า fonts อยู่ที่ไหน

และส่วนที่บอกว่า ให้ใช้ fonts ทั้งเอกสารคือบรรทัดที่ 12 – 14 โดยเราสามารถแก้ไขได้เหมือน css ปกติเลยว่าส่วนไหนใช้ fonts ไหน

โดยเมื่อเราทำตามขั้นตอนด้านบนแล้วจะได้ดังภาพ

ปัญหาที่พบบ่อย
1. เจอ Error ประมาณว่า Failed to open stream ดังภาพนี้ ให้กลับสร้าง folder ชื่อ fonts ใน storage ก่อนนะครับ ผมเขียนไว้แล้ว ข้อ 2 ด้านบน
2. ถ้าทำตามด้านบนแล้วยังไม่ได้ ให้ลองเปลี่ยนจาก public_path ไปใช้เป็น asset แทนครับ (แต่แบบ asset จะใช้กับ php artisan serve ไม่ได้)

จากข้อก่อนหน้าจะเห็นได้ว่า เราได้ว่ามีบางส่วนมาเป็นภาษาไทยแล้ว แต่บางส่วนยังเป็นเครื่องหมายตกใจอยู่ สาเหตุเป็นเพราะตอนประกาศ font ในข้อก่อนหน้านั้น เราประกาศว่าใช้เฉพาะกับข้อความปกติเท่านั้น (บรรทัด 7-8 ในข้อก่อนหน้า) แต่ h1 นั้นจะให้ข้อความที่เป็นตัวหนา (font-weight: bold;) ดังนั้นเราจึงต้องประกาศเพิ่มให้ครบครับ จึงต้องแก้ invoice.blade.php เป็นดังนี้

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        @font-face {
            font-family: 'THSarabunNew';
            font-style: normal;
            font-weight: normal;
            src: url("{{ public_path('fonts/THSarabunNew.ttf') }}") format('truetype');
        }
        @font-face {
            font-family: 'THSarabunNew';
            font-style: normal;
            font-weight: bold;
            src: url("{{ public_path('fonts/THSarabunNew Bold.ttf') }}") format('truetype');
        }
        @font-face {
            font-family: 'THSarabunNew';
            font-style: italic;
            font-weight: normal;
            src: url("{{ public_path('fonts/THSarabunNew Italic.ttf') }}") format('truetype');
        }
        @font-face {
            font-family: 'THSarabunNew';
            font-style: italic;
            font-weight: bold;
            src: url("{{ public_path('fonts/THSarabunNew BoldItalic.ttf') }}") format('truetype');
        }

        body {
            font-family: "THSarabunNew";
        }
    </style>
</head>
<body>
<h1>ใบแจ้งหนี้สำหรับ {{ $name }}</h1>
ขอขอบคุณในการสั่งซื้อ

</body>
</html>

ทีนี้พอเราสร้าง pdf ใหม่จะเห็นว่า สามารถใช้ภาษาไทยได้สมบูรณ์แล้ว

ข้อควรระวัง

ในการสร้าง pdf ครั้งแรกมันจะสร้างได้ช้าพอสมควรเนื่องจากมันต้องไป download font มา (จากเครื่องตัวเองนั่นแหละ) จากนั้นมาแปลง fonts เป็น format ของมัน และ cache ลงใน storage/fonts ทำให้ครั้งแรกช้ากว่าปกติพอสมควร แต่หลังจากนั้นจะความเร็วปกติ (เพราะ cache ไว้แล้ว)

ข้อแนะนำอื่นๆ

หากนำไปใช้จริง ตัวเซิฟเวอร์ควรจะลง OPCache ไว้ด้วย เพื่อความรวดเร็วในการสร้าง PDF