皆さん、こんにちは！今回は、前回の郵便番号から住所検索を行うプラグインに引き続き、Bubbleで「縦書き」表示できるプラグインを作成しましたので、今回は その過程をご紹介したいと思います。自作プラグインの作成に興味をお持ちの方は、是非参考にしてみてくださいね！
本記事では、プラグインエディターなどの説明については割愛させていただきます。Bubble でプラグイン作成が初めての方は、前回の「Bubble で自作のプラグインを作成してみよう！」を先に読むことをおすすめします。
1. 作成するプラグインの概要
- ユーザーが設定したテキストを縦書きに表示します
- テキストは複数行入力できますが、Rich text や bbコードには対応していません
- テキストは 動的にも取得可能です
公開URL
プラグインは オープンソースで公開しています！コードなどの詳細は以下のURLからも確認できますので、ご参考くださいね。
2. プラグイン作成の準備
では、早速プラグインの作成をしていきましょう！
まずは、プラグイン開発の準備として、General タブでプラグイン名やディスクリプション、ロゴ、カテゴリーといったプラグイン全般の設定をしておきます。
また、開発しながら動作確認できるように、Settings タブの Test app にも テスト用アプリ名を合わせて登録しておきましょう。
3. 縦書きエレメントを作成する
今回のプラグインではエレメントを作成していきますので、プラグインエディターの Elements タブの Plugin Elements にある項目を定義していきます。エレメントを新規作成したり、複数のエレメントを作成する場合は、「Add a new element」でエレメントを追加することが可能です。
今回は、「Vertical writing」（縦書き）という名前のエレメントを定義していきます。 では、Plugin Elements の項目を順に確認していきましょう！
3.1 General properties
「General properties」では、エレメントのプロパティ全般の設定を行います。
Name には、エレメントの名称を入力します。ここでは「Vertical writing」としました。Category は、「Visual element」か「Input form」のどちらかを選択します。本プラグインでは、シンプルな Text エレメントなので、「Visual element」となります。 あわせて、Icon も適宜設定しておきましょう。
ここで定義した情報が、インストールしたアプリの UI Builder で表示されます。
3.2 Bubble Properties
「Bubble Properties」では、プロパティエディタで設定できる内容を指定できます。作成するエレメントにあわせて、必要なプロパティのチェックをしましょう。
3.3 Default dimensions
「Default dimensions」は、デフォルトのエレメントサイズを定義します。
3.4 Fields
「Fields」には、作成するエレメントでユーザーに設定して欲しいプロパティを定義します。「Bubble Properties」と同様に、プロパティエディタに表示されます。新しくフィールドを追加する場合は、New field に名前を定義し、Create new field ボタンから作成します。
今回の縦書きエレメントでは、テキストを設定してもらう必要があるので、Name（内部的に使用される名前） を 「text」、Caption（プロパティエディタに表示する名称） を 「Text」、Editor を「Dynamic value」としてデータベースなどからも設定できるようにし、設定は必須でなくても可能なように「Optional」にチェックを入れています。
3.5 Exposed states
「Exposed states」には、別のエレメントや外部から作成したエレメントにアクセスしたい場合の定義をしていきます。
今回の縦書きエレメントでは、別のエレメントからもテキストのデータを「Visual element's value」で取得できるようするため、Name と Caption を「value」に、Typeを「text」としています。
「Exposed states」を作成した場合、返却値を Code state initialzation で定義する必要があります。
3.6 Code initialize
ここからは、Javascript でコーディングして定義する部分をご紹介していきます。
「Code initialize」には、エレメントがロードされた際に実行される初期化コードを定義します。Development（開発中）の場合だと、Bubble のエディターから Preview ボタンをクリックして、ページをプレビューした場合などに実行されています。
縦書きエレメントでは div タグを追加し、縦書きの css を定義しています。
画面右側にある「show documentation」で、ドキュメントを表示することが可能です。
3.7 Code update
「Code update」は、エレメントが更新されるタイミングで実行するコードを記述します。データベースから値をバインドした時などのタイミングで実行されています。
「show documentation」で、properties の詳細を確認することができます。
「Code initialize」で枠組みとなる div タグを定義しているので、ここでは、取得したテキストをバインドするようにしています。また、細かい部分ですが、テキストの配置など一部のプロパティを制御するためのコーディングもおこなっています。
3.8 Code preview
「Code preview」は、Bubble エディタ内での表示を定義します。ここでいう preview は、Bubble エディタ の Preview ボタンをクリックした時の プレビューではなく、Bubble エディタ自体にどのように表示するかというプレビューであることに注意してください。
今回は、プロパティエディターでユーザーが設定した、縦書きで表示したい文字や、文字のサイズ、色などを反映させたいので、「Code initialize」と「Code update」で記述した内容と似たコードになっています。（ただし、Bubble エディタ内での表示と、Preview ボタンでページにロードさせて見える表示とでは font-family において仕様の違いがあったため、調整しているコードもあります。内部的な仕様のため、もし興味がある方は、補足していますのでご参考ください。）
3.9 Code state initialzation
「Exposed states」で設定したステータスの返却値を定義します。
今回の場合は、シンプルに Text に設定された値を返却しています。
4. Javascript をデバッグしたい場合
「Code initialize」や「Code update」などで記述したコードをデバッグしたい場合は、Add breakpoint in test mode にチェックを入れると、ブラウザの開発ツールでデバッグすることができます。
以下に chrome でデバッグする際の手順についてもご紹介しますので、ご参考くださいね。
手順1. Add breakpoint in test mode にチェックを入れる
手順2. Go to test app → でテストアプリを起動
手順3. テストアプリの「Preview」ボタンで、テストアプリをプレビュー
手順4. F12 ボタンなどで、開発ツールを起動します。（すでに開発ツールを起動している場合はスキップしてください。）
手順5. 開発ツールを起動した状態で、もう一度「Preview」ボタンで、テストアプリをプレビューすると、デバッグポイントが追加されます。
5. 補足
今回のプラグイン作成で遭遇した エレメント作成時の仕様について補足しておきたいと思います。
問題
「Code preview」において、font_face プロパティで取得した font-family のスタイルが適用できない。
なお、本件については、以下のフォーラムでも話題に上がっていました内容と同じものです。
原因
Bubbleエディターにエレメントを表示させる際、内部的には iframe 内でフォント情報を保持しており、iframe 内にまで Google web font の情報を引き継いでいなかった。
回避
縦書きエレメントでは、font_face プロパティを解析して、iframe 内に 取得した Google web font のスタイルを import する方法で対応しています。
6. まとめ
いかがでしたか？今回は、エレメントを追加するプラグインの作成方法についてご紹介しました！ぜひ、みなさんも自作のプラグインにトライしてみてくださいね。では、次回もどうぞお楽しみに！
