amp-bindで「続きを読む」ボタンを作る方法。

AMPでamp-bindを使って、簡単に「続きを読む」(Read more)ボタンを作る方法を紹介します。

AMP公式に「続きを読む」ボタンを作る例が掲載されていますが、これは、ボタンが押されたら別リソースにjsonを取りに行って(fetchして)、現在の内容を更新するというものです。

https://ampbyexample.com/advanced/show_more_button/

 

今回はそうではなく、続きの内容をhtmlの中に直接書いておいて、ボタンでそれを表示する方法を紹介します。

1. amp-bindをロードしておきます。

<script custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

2. 次のように、[見出し]、ボタン、[続きの内容]の順で配置します。

<p>[見出し]キラキラ星の木の下に</p>
<p><button on="tap:AMP.setState({more_text: true})">続きを読む</button></p>
<p class="hidden" [class]="more_text ? '' : 'hidden'">[続きの内容]でこぼこでこぼこ仲間たち</p>

3. 次のようにスタイルシートで.hiddenクラスにdisply:none;を指定します。

.hidden{
  display: none;
}

以上です。

解説:

• [続きの内容]には、class=”hidden”属性を付けておきます。これがclass属性のデフォルト値になります。
• buttonのon属性に、tap:AMP.setState()を指定して、ボタンが押されたらmore_text変数にtrueが代入されるようにします。
• [続きの内容]の[class]属性に、more_textがtrueの場合は、空文字列に書き換えられるようにします。こうすることで、more_text変数がtrueに変更された際に、class属性からhiddenが消され、スタイルシートのdisplay: none;の適用が外れ、続きの内容が表示されます。
• 定義されていない変数を参照すると、nullが返ります。foo || ‘default’などとすることで、fooがnullの場合に’default’を初期値にすることもできますが、今回はnullのままでよいと考えます。

 

応用例として、次のようにコードを変更すると、「続きを読む」が「たたむ」とトグルできるようになります。

<p>[見出し]キラキラ星の木の下に</p>
<p><button [text]="more_text ? 'たたむ': '続きを読む'" on="tap:AMP.setState({more_text: !more_text})">続きを読む</button></p>
<p class="hidden" [class]="more_text ? '' : 'hidden'">[続きの内容]でこぼこでこぼこ仲間たち</p>

 

ちなみに、ボタンが押されたら、見出しのテキストをごっそりと入れ替える次のような方法もあります。

<p [text]="full_text">[見出し]キラキラ星の木の下に</p>
<p><button on="tap:AMP.setState({full_text: '[見出し]キラキラ星の木の下に[続きの内容]でこぼこでこぼこ仲間たち'})">続きを読む</button></p>

しかしこの方法は、full_textの中身がセキュリティの事情で評価されずに出力されるため、タグが入っている場合には、タグがhtmlspecialcharsを通したようにそのまま出てきてしまいます。

 

そのため、hiddenで隠しておくのがよいのではないかと思います。

以上、amp-bindで「続きを読む」ボタンを作る方法。でした。