[{"data":1,"prerenderedAt":438},["ShallowReactive",2],{"h1541443453":3,"h2267772530":276,"h265562557":430},{"id":4,"title":5,"body":6,"description":28,"extension":266,"meta":267,"navigation":271,"path":272,"seo":273,"stem":274,"__hash__":275},"docs/ja/tips/2026/04/16/bookmark-function-implementation.md","LINE公式アカウントからの配信内容をあとから確認できるようにするブックマーク機能の作り方",{"type":7,"value":8,"toc":242},"minimark",[9],[10,11,12,20,25,29,32,37,40,56,59,63,66,78,81,84,105,109,112,115,126,129,142,154,157,160,167,170,178,194,197,200,203,206,220,223,227,230,233,236],"Tips",{},[13,14,17],"h1",{"id":15,"class":16},"","!mb-4",[18,19],"page-title",{},[21,22],"display-date",{"date":23,"class":24},"2026/04/16","!mb-20",[26,27,28],"p",{},"LINE公式アカウントでの情報配信では、その情報をユーザーが「あとで見返したい」というニーズが生まれるようなユースケースもあります。",[26,30,31],{},"本記事では、ユーザーが配信内容やウェブページを保存できる「ブックマーク機能」を、LINEプラットフォームが提供している機能を使って実装する方法とポイントを紹介します。",[33,34,36],"h2",{"id":35},"purpose","目的",[26,38,39],{},"ブックマーク機能を導入することで、以下のような効果が期待できます。",[41,42,43,47,50,53],"ul",{},[44,45,46],"li",{},"ユーザーが必要な情報を個別に保存できる",[44,48,49],{},"情報へのアクセスが簡単になり、ユーザー体験が向上する",[44,51,52],{},"ユーザーが興味のあるコンテンツが可視化できる",[44,54,55],{},"パーソナライズ配信に活用できる",[26,57,58],{},"「配信して終わり」ではなく、「あとから使われる状態」を作ることがブックマーク機能の目的です。",[33,60,62],{"id":61},"implementation-flow","実装の流れ",[26,64,65],{},"この機能の実現方法はいくつかありますが、シンプルな例としては以下の流れになります。",[67,68,69,72,75],"ol",{},[44,70,71],{},"配信コンテンツにブックマークボタンを設置し、押下時にWebhookイベントを送信する",[44,73,74],{},"WebhookイベントからユーザーIDとコンテンツ情報を取得し、データベースに保存する",[44,76,77],{},"ブックマーク一覧を呼び出す導線（リッチメニューなど）を用意する",[26,79,80],{},"やっていること自体はシンプルで、ユーザーIDとコンテンツを紐づけて保存するだけです。",[26,82,83],{},"そのためこの記事では詳細な実装については割愛し、ポイントとなる考え方にフォーカスして説明します。",[41,85,86,93,99],{},[44,87,88],{},[89,90,92],"a",{"href":91},"#unique-id-design","コンテンツを一意に識別できる設計にする",[44,94,95],{},[89,96,98],{"href":97},"#not-just-save-and-finish","あとから見返しやすくする",[44,100,101],{},[89,102,104],{"href":103},"#design-for-extensibility","拡張を見据える",[106,107,92],"h3",{"id":108},"unique-id-design",[26,110,111],{},"ユーザーIDとコンテンツを紐づけるためには、コンテンツを識別できる値が必要です。",[26,113,114],{},"たとえば以下のような方法があります。",[41,116,117,120,123],{},[44,118,119],{},"配信ごとに識別子を発行する",[44,121,122],{},"カテゴリ + 識別子で管理する",[44,124,125],{},"（コンテンツがウェブページの場合）URLをそのまま使う",[26,127,128],{},"どれを選ぶかは運用次第ですが、「あとから扱いやすいか」を基準に決めるのがおすすめです。",[26,130,131,132,136,137,141],{},"配信メッセージの場合は、",[89,133,135],{"href":134},"/reference/messaging-api/#postback-action","ポストバックアクション","の",[138,139,140],"code",{},"data","に識別子を含めておくと、Webhook受信時の処理がシンプルになります。",[143,144,147],"admonition",{"title":145,"type":146},"ポストバックアクションを実装するときはdisplayTextの設定をおすすめします","tip",[26,148,149,150,153],{},"ポストバックアクションの",[138,151,152],{},"displayText","プロパティを設定することで、アクション実行時にトーク画面上にメッセージを表示することができます。これにより、アクションを実行したことがユーザーからわかりやすくなります。",[106,155,98],{"id":156},"not-just-save-and-finish",[26,158,159],{},"次に「あとから見返す機能」について考えていきます。",[26,161,162,163,166],{},"ブックマーク機能では、保存した情報をあとからスムーズに見返すことができるアクセス性が重要です。",[164,165],"br",{},"\nそのため、どこからアクセスできるか、一覧をすぐに見られるか、といったユーザー体験がポイントになります。",[26,168,169],{},"たとえば、以下のような工夫だけでも、ユーザー体験はかなり変わります。",[41,171,172,175],{},[44,173,174],{},"リッチメニューから1タップでアクセスできるようにする",[44,176,177],{},"一覧を見やすい形式（Flex Messageやウェブページ）で表示する",[26,179,180,181,183,184,188,189,193],{},"ウェブページでブックマークの一覧を表示する場合は、ユーザーIDを取得する必要があります。",[164,182],{},"\nユーザーIDの取得には",[89,185,187],{"href":186},"/services/liff/","LIFF","、",[89,190,192],{"href":191},"/services/line-login/","LINEログイン","が利用できます。",[26,195,196],{},"LIFFやLINEログインを利用することで、LINEユーザーとウェブ上の操作を自然に紐づけることができます。",[106,198,104],{"id":199},"design-for-extensibility",[26,201,202],{},"この仕組みはシンプルなので、あとからの拡張も比較的やりやすいです。",[26,204,205],{},"たとえば、この記事の中では言及していませんが、以下のような機能が必要になることも考えられます。",[41,207,208,211,214,217],{},[44,209,210],{},"ブックマークの削除",[44,212,213],{},"お気に入り機能",[44,215,216],{},"レコメンドへの活用",[44,218,219],{},"ブックマークした内容の期限に関するリマインド",[26,221,222],{},"実際に実装されるサービスの規模によって、こういった実装についても併せて検討いただくことをおすすめします。",[33,224,226],{"id":225},"summary","まとめ",[26,228,229],{},"ブックマーク機能は、実装自体はシンプルですが、利便性が高い仕組みです。",[26,231,232],{},"配信を「流れる情報」から「蓄積される資産」に変えることができ、ユーザー体験の向上にもつながります。",[26,234,235],{},"まずはシンプルな構成から、取り入れられそうな形で検討してみてください。",[237,238],"tags",{"tags":239,"lang":240,"section":241},"messaging-api","en","tips",{"title":15,"searchDepth":243,"depth":243,"links":244},4,[245,249,263],{"id":246,"depth":247,"text":248},"目的-purpose",2,"目的 {#purpose}",{"id":250,"depth":247,"text":251,"children":252},"実装の流れ-implementation-flow","実装の流れ {#implementation-flow}",[253,257,260],{"id":254,"depth":255,"text":256},"コンテンツを一意に識別できる設計にする-unique-id-design",3,"コンテンツを一意に識別できる設計にする {#unique-id-design}",{"id":258,"depth":255,"text":259},"あとから見返しやすくする-not-just-save-and-finish","あとから見返しやすくする {#not-just-save-and-finish}",{"id":261,"depth":255,"text":262},"拡張を見据える-design-for-extensibility","拡張を見据える {#design-for-extensibility}",{"id":264,"depth":247,"text":265},"まとめ-summary","まとめ {#summary}","md",{"date":268,"tags":239,"locale":269,"sidebar":270},"2026-04-16 00:00 UTC","ja",false,true,"/ja/tips/2026/04/16/bookmark-function-implementation",{"title":5,"description":28},"ja/tips/2026/04/16/bookmark-function-implementation","zq_ujHjBnTh6zfsgqasRKBOP-igWkvJxley4roPuEJI",{"id":4,"title":5,"body":277,"description":28,"extension":266,"meta":428,"navigation":271,"path":272,"seo":429,"stem":274,"__hash__":275},{"type":7,"value":278,"toc":419},[279],[10,280,281,285,287,289,291,293,295,305,307,309,311,319,321,323,337,339,341,343,351,353,359,365,367,369,373,375,381,389,391,393,395,397,407,409,411,413,415,417],{},[13,282,283],{"id":15,"class":16},[18,284],{},[21,286],{"date":23,"class":24},[26,288,28],{},[26,290,31],{},[33,292,36],{"id":35},[26,294,39],{},[41,296,297,299,301,303],{},[44,298,46],{},[44,300,49],{},[44,302,52],{},[44,304,55],{},[26,306,58],{},[33,308,62],{"id":61},[26,310,65],{},[67,312,313,315,317],{},[44,314,71],{},[44,316,74],{},[44,318,77],{},[26,320,80],{},[26,322,83],{},[41,324,325,329,333],{},[44,326,327],{},[89,328,92],{"href":91},[44,330,331],{},[89,332,98],{"href":97},[44,334,335],{},[89,336,104],{"href":103},[106,338,92],{"id":108},[26,340,111],{},[26,342,114],{},[41,344,345,347,349],{},[44,346,119],{},[44,348,122],{},[44,350,125],{},[26,352,128],{},[26,354,131,355,136,357,141],{},[89,356,135],{"href":134},[138,358,140],{},[143,360,361],{"title":145,"type":146},[26,362,149,363,153],{},[138,364,152],{},[106,366,98],{"id":156},[26,368,159],{},[26,370,162,371,166],{},[164,372],{},[26,374,169],{},[41,376,377,379],{},[44,378,174],{},[44,380,177],{},[26,382,180,383,183,385,188,387,193],{},[164,384],{},[89,386,187],{"href":186},[89,388,192],{"href":191},[26,390,196],{},[106,392,104],{"id":199},[26,394,202],{},[26,396,205],{},[41,398,399,401,403,405],{},[44,400,210],{},[44,402,213],{},[44,404,216],{},[44,406,219],{},[26,408,222],{},[33,410,226],{"id":225},[26,412,229],{},[26,414,232],{},[26,416,235],{},[237,418],{"tags":239,"lang":240,"section":241},{"title":15,"searchDepth":243,"depth":243,"links":420},[421,422,427],{"id":246,"depth":247,"text":248},{"id":250,"depth":247,"text":251,"children":423},[424,425,426],{"id":254,"depth":255,"text":256},{"id":258,"depth":255,"text":259},{"id":261,"depth":255,"text":262},{"id":264,"depth":247,"text":265},{"date":268,"tags":239,"locale":269,"sidebar":270},{"title":5,"description":28},[431,432,437],{"id":35,"depth":247,"text":36},{"id":61,"depth":247,"text":62,"children":433},[434,435,436],{"id":108,"depth":255,"text":92},{"id":156,"depth":255,"text":98},{"id":199,"depth":255,"text":104},{"id":225,"depth":247,"text":226},1777511281089]