こんにちは！今回は、「Bubbleプラグイン開発入門」シリーズの第二弾として、実際にプラグインを作りながらプラグイン開発の流れをご紹介していきます。
今回の記事で開発するのは、簡単にパンくずリストを実装できるプラグイン。ポータルサイトなどの基本的なウェブサイトにはもちろん、ECやブログなどのコンテンツ系アプリにも必須のパンくずリストですが、一から作成するとなるとちょっと面倒ではありませんか？そんなわけで、「Carbon Design System」で公開されている「Breadcrumb（パンくずリスト）」を簡単に実装できるプラグインを開発していきます。
プラグインの開発からアプリでの実装までの手順をご紹介しておりますので、プラグイン開発に興味がある方はぜひ記事をご覧いただきながら一緒に試してみてくださいね！
プラグイン開発入門第一弾の記事をまだご覧になっていない方はぜひ合わせてご覧ください。プラグインエディタの使い方を詳細にご紹介しております。
また、今回利用するCarbon Design Systemは、IBMのオープンソースデザインシステムです。概要については、BubbleにCarbon Design Systemを導入する方法をご紹介した下記の記事をご参考ください。
パンくずリストの概要
パンくずリストとは、Webサイト上で現在表示しているページの階層や位置づけを示すリストのことです。たいていページの上部に表示され、各パンくずをクリックして該当のページに遷移することができます。パンくずリストは、SEOやユーザビリティーの観点から実装するのが望ましいとされています。
パンくずリストには次の3つの種類があります。
位置型…表示しているページの、サイトの階層構造における位置を示すパンくずリスト。リストでは階層構造やカテゴリ構造が示されます。同じページならどんな経緯でアクセスしても同じ階層が表示されます。
属性型…表示しているページの、カテゴリーにおける位置を示すパンくずリスト。リストでは特定の属性やタグ（商品のカラー、サイズ、ブランドなど）が表示されます。コンテンツの絞り込みやフィルタリングオプションを示す際に使用されます。
パス型…表示しているページにアクセスするまでの経路を示すパンくずリスト。複雑な経路でアクセスした場合はリストが分かりにくくなってしまうなどの理由からあまり使用されません。
今回のプラグインでは、「位置型」と「属性型」パンくずリストを実装することができます。
プラグインの概要
今回作成するプラグインは、Carbon Design SystemのBreadcrumbを一番シンプルなかたちでBubbleアプリで簡単に実装できるようにするプラグインです。Elementをページに配置し、パンくずリストに表示するページ名と遷移先を設定するだけで実装できるシンプルなプラグインを開発することを目標にします。
▼完成図
▼参考（Breadcrumb）
プラグインの開発手順
それでは、早速Carbon Design SystemのBreadcrumb素材のプラグインを作成する手順をご紹介していきます。
新規プラグインの作成
まずは、プラグインエディタの開き方の通り、Bubbleで新規プラグインを作成してプラグインエディタを開きます。
各タブの設定
プラグインを作成してエディタを開いたら、いよいよプラグインを開発していきます。各タブごとに設定内容を紹介していきます。
各タブの項目についてはプラグイン開発入門第一弾で詳しく紹介していますので、こちらをご覧いただきながら設定を進めていってくださいね！
なお、今回はElementの機能を開発していくので、API callsタブ・Actionsタブでの設定はありません。
Generalタブの設定
Generalタブの設定内容はお好みで設定してください。今回は下記のように設定しました。
sharedタブの設定
今回はSharedタブで特に注意することはありません。Dependencies > bubble Plugin API Version・This plugin uses jQuery 3のみ下記の通り設定してください。
- bubble Plugin API Version…最新のバージョンを選択。特に理由がない限りは最新のバージョンを選択するようにしましょう。
- This plugin uses jQuery 3…チェックします。今回はjQueryを使用しているのでチェックしますが、使用していない場合はチェック不要です。
Elementsタブの設定
まずは「Add a new element」のボタンをクリックしてElementを作成します。
Elementの名前は「Breadcrumbs」としました。
さて、Elementの詳細を設定していきます。
General properties
今回のプラグインは、配置するとそのままページ上でパンくずリストとして表示されるものなので、Categoryは「Visual Element」を選択します。
Bubble properties
ここでは、プラグインのユーザーがBubbleアプリエディタでカスタマイズできる項目等を選択します。今回は下記の項目のチェックをオンにして有効化します。
- 今回チェックをオンにする項目…Resizable・Responsive・Font style・This element can fit width to content・This element can fit height to content・Support standard visible property
ページに配置してそのままパンくずリストとして表示されたときに、「全てのパンくずが範囲内で表示されない」や「サイトのレイアウトに合わせたサイズ設定ができない」といった不便がないよう、Resizable・Responsive・This element can fit width to content・This element can fit height to content・Support standard visible propertyの有効化は必須です。Font style（フォントや文字サイズ、色を自由に設定できるようにする）は任意で有効化してください。
Default dimensions
500(W)×20(H)にします。前項「Bubble properties」でWidthとHeightは自由にかつレスポンシブ設定ができるようにしたので、本項目はこだわる必要はありません。
Fields
ここでは、プラグインユーザーがBubbleアプリエディタで自由に設定できるFieldを設定します。今回は「labels」と「links」の2つのFieldを作成します。この2つはCarbon Design SystemのBreadcrumbに必要な値になります。
labels…パンくずリストで表示するページ名を設定します。
links…パンくずリストで表示されている各ページの遷移先を設定します。
labelsとlinksを設定するときのポイントは、「is a list」のチェックをオンにすることです。labelsとlinksをリスト形式で設定できるようにすることで、実装されたパンくずリストの項目数がいくつでも対応できるようになります。
反対にいえば、linkとlabelを一つずつ動的に設定することはできません。
Element code
ここでは、Headerとfunction initialize、function update、function previewを定義します。今回開発しているのは、パンくずリストの表示とページ遷移を行うシンプルなプラグインです。下記に実際のコードを掲載しておりますので、各項でコピーして貼り付けてください。
Header
まずはHeaderを設定します。Carbon Design System導入の記事と同様、今回もCDN経由で利用するので、Headerには下記のコードを貼り付けます。
<script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/breadcrumb.min.js"></script>
Function initialize
Function initializeは、下記の通り定義します。initializeで設定するコードの概要は下記のとおりです。
「Code initialize」には、エレメントがロードされた際に実行される初期化コードを定義します。Development（開発中）の場合だと、Bubble のエディターから Preview ボタンをクリックして、ページをプレビューした場合などに実行されています。
下記が実際のコードです。
function(instance, context) {
//initialize function
var cwc;
cwc = $('<cds-breadcrumb></cds-breadcrumb>');
instance.canvas.append(cwc);
instance.data.cwc = cwc;
}
Function update
Function updateは、下記の通り定義します。updateで設定するコードの概要は下記のとおりです。
「Code update」は、エレメントが更新されるタイミングで実行するコードを記述します。データベースから値をバインドした時などのタイミングで実行されています。
下記が実際のコードです。今回は、Fieldで設定したlabelsとlinksの値をバインドしたり、Width/Heightなどのプロパティを制御するコーディングを行っています。
function(instance, properties, context) {
//update function
var cwc;
cwc = instance.data.cwc;
// Get the actual labels and links using the provided methods
const labelsArray = properties.labels.get(0, properties.labels.length());
const linksArray = properties.links.get(0, properties.links.length());
// Ensure properties.labels and properties.links are arrays and have the same length
if (Array.isArray(labelsArray) && Array.isArray(linksArray) && labelsArray.length === linksArray.length) {
// Generate breadcrumb items based on the length of labelsArray
for (let i = 0; i < labelsArray.length; i++) {
const item = $('<cds-breadcrumb-item></cds-breadcrumb-item>');
const link = $('<cds-breadcrumb-link></cds-breadcrumb-link>');
link.text(labelsArray[i]);
link.attr('href', linksArray[i]);
item.append(link);
cwc.append(item);
}
} else {
console.error("properties.labels and properties.links must be arrays of the same length");
}
cwc.css("width", properties.bubble.width);
cwc.css("height", properties.bubble.height);
instance.data.cwc = cwc;
}
Function preview
Function previewは、下記の通り定義します。previewで設定するコードの概要は下記のとおりです。
「Code preview」は、Bubble エディタ内での表示を定義します。ここでいう preview は、Bubble エディタ の Preview ボタンをクリックした時の プレビューではなく、Bubble エディタ自体にどのように表示するかというプレビューであることに注意してください。
実際のコードは下記のとおりです。今回は、Bubbleアプリエディタ上で「Breadcrumb 1Breadcrumb 2Breadcrumb 3Breadcrumb 4」と 表示されるようなコードになっています。
function(instance, properties) {
// preview function
var cwc;
cwc = $("<cds-breadcrumb></cds-breadcrumb>");
// Generate breadcrumb items
for (let i = 1; i <= 4; i++) {
const item = $('<cds-breadcrumb-item></cds-breadcrumb-item>');
const link = $('<cds-breadcrumb-link></cds-breadcrumb-link>');
link.text(`Breadcrumb ${i}`);
link.attr('href', '/#');
item.append(link);
cwc.append(item);
}
cwc.css("width", properties.bubble.width);
cwc.css("height", properties.bubble.height);
instance.canvas.append(cwc);
}
これでプラグインは完成です。
▼参考
web-components.carbondesignsystem.com
プラグインの実装手順
ここからは、開発したプラグインの実装方法例をご紹介します。今回は、ECサイトのパンくずリストをプラグインで実装する方法を簡単にご紹介します。仕様は簡易的なものでベストプラクティスではありませんので、あくまで今回のプラグインの実装方法のイメージを掴むご参考としてご覧いただければと思います。
テストプラグインのインストール
テストアプリにプラグインをインストールして試します。プラグインエディタのSettingsタブを開き、Publishing and license > Test appに、プラグインをインストールしたいテストアプリの名前を入力します。
Elementsタブを開き、「App to test the plugin」にも同様にテストアプリの名前を入力し、「Go to test app」をクリックします（テストアプリ名が既に入力されていたら、そのまま「Go to test app」をクリックしましょう）。
新規タブでテストアプリのエディタが開いたら、Pluginsタブを開きます。Installed Pluginsに作成したプラグインが「(testing)」付きで表示されていればテスト用としてインストールできています。
なお、Testingのプラグインは、あくまで検証用のプラグインとなります。実際にアプリでプラグインを使用する場合は、プラグインエディタのSettingsタブから「Publishing and license」の設定を行い、通常のプラグインと同じようにアプリ側で「+Add plugins」からインストールを行ってください。
アプリでの実装
例として作成するECサイトのページ構成は、ホーム > カテゴリ一覧 > カテゴリの商品一覧 > 商品ページで、カテゴリは雑貨とアパレルの2種類とします。作成するパンくずリストのタイプは「位置型」パンくずリストです。
まず、階層管理用で下記の通りLevelというData typeを作成します。Levelsを作成する際には下記のポイントを参考にしてください。
- labelにパンくずリストに表示するページ・階層名をそのまま保存すること
- linkにパンくずリストの各項の遷移先をそのまま保存すること（同階層のページについては、末尾にcidを付けて区別しています）
- 階層の上から順に並び替えられるように「No.（番号）」を保存すること
上記を元に実際に作成したLevelが下記の通りです。
Designタブでは、ホーム、カテゴリ一覧 、カテゴリの商品一覧、商品ページの4つのページを作成していきます。ページを作成したら、商品ページ（選択した商品の詳細を表示する、最下位の階層ページ）でパンくずリストを実装します。
※今回は商品ページ以外のパンくずリストの実装手順は省略しますが、こちらの実装方法を参考に実装してください。
通常のプラグインと同様、インストールしたプラグインのElementはUI Builder > Visual Elementsに表示されます。
作成したElement「Breadcrumbs (testing)」をページの上部に配置し、LabelsとLinksの値を下記の通り設定します。
ポイントは、「Do a search for…」で持ってきた該当のLevelを「each item's…」でリスト形式で階層上から順で並べることです。パンくずリストは通常現在のページは含まないので、現在から一つ上の階層までを「Do a search fort…」の条件とします。
また、今回は位置型パンくずリストを実装するので、現在のページにどうアクセスしたとしても同じパンくずリストが表示されることを意識してページごとのlabelsとlinksの値を設定します。
これで実装は完了です。Previewで商品ページを確認してみると、下記のようにパンくずリストが生成され、Levelに保存した通りのlabelが表示されます。
リストのパンくずをクリックすると、設定した通りのlinkに遷移します。
まとめ
今回は、プラグイン開発方法のご紹介第二弾（初級編）として、Element機能を持つプラグインの実装方法をご紹介しました。Element code項での各functionの定義は厄介ですが、Elementsタブの基本的な使い方については理解を深めていただけたのではないでしょうか。
本記事を参考に、色々なプラグインの開発に挑戦してみてくださいね。本シリーズの更新もお楽しみにお待ちください！
参考
- Bubbleプラグイン開発入門シリーズ
- その他のプラグイン開発関連記事（本文中で引用した記事）
