line bot การปรับขนาด flex bubble

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา line bot การปรับขนาด flex bubble

line bot การปรับขนาด flex bubble

https://www.ninenik.com/899

ตอนนี้ bubble ปรับขนาดได้แล้ว ต้องเพิ่มโค๊ดในส่วนของ size อย่างไร

https://medium.com/linedevth/อัพเดท-11-ฟีเจอร์ใหม่ของ-flex-message-ใน-line-messaging-api-ปี-2019-668e92721bc9

Yatanos Masitong 02-05-2020 11:56:41

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 1

ถ้าต้องการให้รองรับความสามารถใหม่ทั้งหมด ต้องทำการอัพเดทเวอรั่นของ

Line Bot Sdk php เป็นเวอร์ชั่นล่าสุด จากนั้นดูว่าเราต้องการปรับค่าอะไร ตอนนี้ไม่มี

รายละเอียดเป็นเนื้อหาชัดเจน ขอแนะนำคร่าวๆ ตามนี้

ต้องดูว่าค่าที่เราจะใช้งานเป็นการกำหนดค่าจาก parameter ที่เป็น option ใหม่เข้าไปหรือไม่

หรือเป้นการกำหนดโดยเรียกใช้คำสั่งการทำงาน เช่น การกำหนด style ต่างๆ ที่มีเพิ่มเข้ามา อย่าง

padding backgroundcolor offset เป็นต้น

ถ้าเป็น parameter option ให้เรากำหนดค่าต่อจากค่าเดิม สมมติเช่น การกำหนดขนาดของ bubble

https://github.com/line/line-bot-sdk-php/blob/master/src/LINEBot/MessageBuilder/Flex/ContainerBuilder/BubbleContainerBuilder.php

ดูในส่วนของ construct

    /**
     * BubbleContainerBuilder constructor.
     *
     * @param ContainerDirection|null $direction
     * @param BoxComponentBuilder|null $headerComponentBuilder
     * @param ComponentBuilder|null $heroComponentBuilder
     * @param BoxComponentBuilder|null $bodyComponentBuilder
     * @param BoxComponentBuilder|null $footerComponentBuilder
     * @param BubbleStylesBuilder|null $stylesBuilder
     * @param BubleContainerSize|null $size
     */
    public function __construct(
        $direction = null,
        $headerComponentBuilder = null,
        $heroComponentBuilder = null,
        $bodyComponentBuilder = null,
        $footerComponentBuilder = null,
        $stylesBuilder = null,
        $size = null
    ) {

จะเห็นว่า size เป็น parameter ที่เป็น option ไม่กำหนดเป้นค่า null เป็นค่าเริ่มต้น การกำหนด เราจะใช้ค่าเป็น string โดยตรง

หรือใช้ผ่านตัวแปรค่าคงที่จาก class เพิ่มเติมก็ได้ สมมติใช้ตัวแปรค่าคงที่ เราต้องทำการใช้งาน BubleContainerSize class

ที่มีการกำหนดตัวแปรค่าคงที่ไว้ให้ โดยเรียกใช้ class ตามรูปแบบนี้ไว้ด้านบน

use LINE\LINEBot\Constant\Flex\BubleContainerSize;

ส่วนของการกำหนดค่า ก็เพิ่ม parameter เข้าไปเป็น สมมติตัวอย่าง

$textReplyMessage = new BubbleContainerBuilder(
    "ltr",  // กำหนด NULL หรือ "ltr" หรือ "rtl"
    new BoxComponentBuilder(
        "vertical",
        array(
            new TextComponentBuilder("This is Header")
        )
    ),
    new ImageComponentBuilder(
        "https://www.ninenik.com/images/ninenik_page_logo.png",NULL,NULL,NULL,NULL,"full","20:13","cover"),
    new BoxComponentBuilder(
        "vertical",
        array(
            new TextComponentBuilder("This is Body")
        )
    ),
    new BoxComponentBuilder(
        "vertical",
        array(
            new TextComponentBuilder("This is Footer")
        )
    ),
    new BubbleStylesBuilder( // style ทั้งหมดของ bubble
        new BlockStyleBuilder("#FFC90E"),  // style สำหรับ header block
        new BlockStyleBuilder("#EFE4B0"), // style สำหรับ hero block
        new BlockStyleBuilder("#B5E61D"), // style สำหรับ body block
        new BlockStyleBuilder("#FFF200") // style สำหรับ footer block
    ),
	BubleContainerSize::GIGA
);
$replyData = new FlexMessageBuilder("Flex",$textReplyMessage);

สังเกตว่าเราเพิ่ม paramter option ตัวที่ 7 เข้าไปเป็นตัวแปรค่าคงที่ BubleContainerSize::GIGA

หรือกรณี เราต้องการกำหนดแบบตายตัว โดยใช้ค่าที่เป็น string ก็ได้ เช่น กำหนดเป็น "giga"

ตัวอย่างโค้ดบางส่วน

$textReplyMessage = new BubbleContainerBuilder(
 .......
.......
....,
    new BubbleStylesBuilder( // style ทั้งหมดของ bubble
        new BlockStyleBuilder("#FFC90E"),  // style สำหรับ header block
        new BlockStyleBuilder("#EFE4B0"), // style สำหรับ hero block
        new BlockStyleBuilder("#B5E61D"), // style สำหรับ body block
        new BlockStyleBuilder("#FFF200") // style สำหรับ footer block
    ),
	"giga"
);
$replyData = new FlexMessageBuilder("Flex",$textReplyMessage);

ค่าคงที่จะมีรูปแบบตามที่ไฟล์ class constant หรือตัวแปรกำหนดไว้ เช่นกรณีค่านี้ก็จากไฟล์

https://github.com/line/line-bot-sdk-php/blob/master/src/LINEBot/Constant/Flex/BubleContainerSize.php

เวลาเราอ้างอิงไฟล์ของเราก็ดูที่ path ในส่วนของ package ว่ามีไฟล์นี้หรือไม่

vendor/linecorp/line-bot-sdk/src/LINEBot/Constant\Flex/BubleContainerSize.php

ต่อไปในส่วนของกรณีที่เป็นการเรียกใช้คำสั่งกำหนดค่าเพิ่มเติม อย่าง boxComponent สมมติเช่นการกำหนด padding

อ้างอิงจากไฟล์ class จาก

https://github.com/line/line-bot-sdk-php/blob/master/src/LINEBot/MessageBuilder/Flex/ComponentBuilder/BoxComponentBuilder.php

จะเห็นว่ามีการกำหนดคำสั่งหรือฟังก์ชั่นการกำหนด padding ไว้ให้เราใช้งาน อย่าง

    public function setPaddingAll($paddingAll)
    {
        $this->paddingAll = $paddingAll;
        return $this;
    }

เวลาเราใช้งานก็จะเรียกใช้งานคำสั่ง หลังจากที่ทำการสร้าง object แล้ว ดังนี้

$textReplyMessage = new BubbleContainerBuilder(
    "ltr",  // กำหนด NULL หรือ "ltr" หรือ "rtl"
    new BoxComponentBuilder(
        "vertical",
        array(
            new TextComponentBuilder("This is Header")
        )
    ),
    new ImageComponentBuilder(
        "https://www.ninenik.com/images/ninenik_page_logo.png",NULL,NULL,NULL,NULL,"full","20:13","cover"),
    new BoxComponentBuilder(
        "vertical",
        array(
            new TextComponentBuilder("This is Body")
        )
    ),
    new BoxComponentBuilder(
        "vertical",
        array(
            new TextComponentBuilder("This is Footer")
        )
    ),
    new BubbleStylesBuilder( // style ทั้งหมดของ bubble
        new BlockStyleBuilder("#FFC90E"),  // style สำหรับ header block
        new BlockStyleBuilder("#EFE4B0"), // style สำหรับ hero block
        new BlockStyleBuilder("#B5E61D"), // style สำหรับ body block
        new BlockStyleBuilder("#FFF200") // style สำหรับ footer block
    ),
	BubleContainerSize::GIGA
);

ดูส่วนของ box component ที่เป็น header เดิมเราไม่ได้จัดการด้วยคำสั่งใดๆ เพิมเติม เราเลยทำการสร้าง object และ

กำหนดเป้น paramter ทันที ตามตัวอย่าง แต่กรณี้เราต้องการเรียกใช้คำสั่งเพิ่มเติม เราต้องแยกออกมาเป็นตัวแปร ใหม่

โดยทำการสร้าง object ให้เสร็จก่อน แล้วค่อยเรียกใช้งานคำสั่ง เป็นดังนี้

$boxSet = new BoxComponentBuilder(
	"vertical",
	array(
		new TextComponentBuilder("This is Header")
	)
);

$textReplyMessage = new BubbleContainerBuilder(
    "ltr",  // กำหนด NULL หรือ "ltr" หรือ "rtl"
    $boxSet->setPaddingAll("10%"),
    new ImageComponentBuilder(
        "https://www.ninenik.com/images/ninenik_page_logo.png",NULL,NULL,NULL,NULL,"full","20:13","cover"),
    new BoxComponentBuilder(
        "vertical",
        array(
            new TextComponentBuilder("This is Body")
        )
    ),
    new BoxComponentBuilder(
        "vertical",
        array(
            new TextComponentBuilder("This is Footer")
        )
    ),
    new BubbleStylesBuilder( // style ทั้งหมดของ bubble
        new BlockStyleBuilder("#FFC90E"),  // style สำหรับ header block
        new BlockStyleBuilder("#EFE4B0"), // style สำหรับ hero block
        new BlockStyleBuilder("#B5E61D"), // style สำหรับ body block
        new BlockStyleBuilder("#FFF200") // style สำหรับ footer block
    ),
	BubleContainerSize::GIGA
);

จะเห็นว่าเราสร้างเป็นตัวแปร $boxSet แล้วเรียกใช้งานคำสั่ง พร้อมกำหนดเป็น paramter .ในรูปแบบ

$boxSet->setPaddingAll("10%"),

กรณีเรียกใช้หรือกำหนดหลายคำสั่งก็สามารถใช้เป็น

$boxSet->setPaddingAll("10%")->setBackgroundColor("#144EE8"),

หรือจะขึ้นบรรทัดใหม่ก็ได้

    $boxSet->setPaddingAll("10%")
	->setBackgroundColor("#144EE8"),

เป็นแนวทางเบื้องต้นไปใช้งาน อย่างไรก็ตาม เราต้องเข้าใจในเรี่องการใช้งาน class และ object ใน php เป็นพื้นฐาน

ก็จะสามารถปรับใช้งานเพิ่มเติมได้

บทความแนะนำที่เกี่ยวข้อง
เริ่มต้นการใช้งาน Flex Message ผ่าน LINE Messaging API ตอนที่ 9	อ่าน 15,857

ninenik 02-05-2020

ความคิดเห็นที่ 2

แล้วกรณี xml ต้องแทรกโค๊ดอย่างไร ครับ

Yatanos Masitong 04-05-2020 09:47

ความคิดเห็นที่ 3

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

บทความแนะนำที่เกี่ยวข้อง
สร้าง Flex Message ด้วย XML กับ LINE Messaging API ตอนที่ 10	อ่าน 11,772

ninenik 04-05-2020

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน