6章コンポーネント

3. コンポーネントとセレクタ

もうひとつ、簡単なコンポーネントの使用例をみてみましょう。

① 画像と alt 属性に使用するテキストを入力して表示するコンポーネント。コンポーネント名は「画像」とします。
② テキストを入力して表示するコンポーネント。コンポーネント名は「文章」とします。
③ 作成したコンポーネントを、セレクタを使って組み合わせたテンプレート「汎用ページ」を作成します。このテンプレートは、画像と文章を適宜選択して繰り返し組み合わせながら、ページのコンテンツを組み立てて行けるテンプレートになっています。

コンポーネント「画像」を作る

まず画像コンポーネントを作成します。その要素定義は下記のとおりです。

① 2 つの要素が定義されています。ひとつ目は picture という名前の要素です。
② 要素のタイプはイメージとなっています。

① ふたつ目の要素は alt という名前の要素です。img タグの alt 属性の値を入力するための要素です。
② 要素のタイプは「1行のテキスト」です。

コンポーネントに generateText() という名称のメソッドが定義します。

① メソッド名は generateText() としておきます。
② メソッドの本体は img タグを生成するだけの単純なものです。

メソッド generateText() のメソッドの本体

<div><img src="%picture%" alt="%quote(alt)%"></div>

コンポーネント「文章」を作る

もうひとつ「文章」という名前のコンポーネントを作ります。

① 要素定義はひとつだけです。名前は text としておきます。
② 要素のタイプは「複数行のテキスト」にしておきます。

このコンポーネントにも、メソッド generateText() を定義しておきます。

① メソッド generateText() を定義します。
② メソッドの本体は、入力されたテキストをそのまま出力するようになっています。ここでは markdown を使用することを念頭に置いています。

これでコンポーネント側の準備は完了です。

テンプレート「汎用ページ」を作る

作成したふたつのコンポーネント「画像」と「文章」を使用するテンプレートを作成してみましょう。このテンプレートはページ編集画面上で「画像」と「文章」を適宜選びながらページのコンテンツを組み立ててゆことができるようになっています。

まず、新たにテンプレートを作成します。テンプレートの名称は「汎用ページ」としておきます。テンプレートの要素定義は下記のとおりです。

① 要素 article が定義してあります。
② 要素のタイプは「セレクタ」に設定しています。
③ 要素の繰り返しに「あり」を指定しています。

① セレクタ article の最初の子要素は picture としています。
② picture の要素のタイプには「コンポーネント」が指定されています。
③ 使用するコンポーネントに、先に作成した「画像」を指定しています。

① セレクタ article のふたつ目の子要素は text としています。
② text の要素のタイプには「コンポーネント」が指定されています。
③ 使用するコンポーネントに、先に作成した「文章」を指定しています。

テンプレート「汎用ページ」を使ってページを作ってみる

このテンプレートを使ってページを作成してみます。ページ編集画面は下図のようになるでしょう。

まず、画像を入力してみます。入力結果を保存するために画面右上の「保存」ボタンをクリックしてください。

次は、文章を入力してみましょう。「画像」という要素名の左側にあるメニューボタンクリックするとメニューが表示されますので、そこで「入力欄を追加」「文章」を選んで「文章」型の要素を追加作成します。

作成された入力エリアに文章を入力してみます。Markdown で入力してみます。

テンプレート「汎用ページ」でページを作成するときのページ編集画面（文章の部分を追加）

入力結果を保存するために画面右上の「保存」ボタンをクリックしてください。作成されたページを Preview すると下のスナップショットのような画面になるでしょう。