MENU
カタログクリップ
本ページはプロモーションを含みます。

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

2018 11/01
広告
コンピューター
2018年4月17日2018年11月1日

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

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

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

 

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

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

<script async 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で「続きを読む」ボタンを作る方法。でした。

コンピューター
highlightjs

関連記事

  • Archer BE550とArcher BE450の7つの違い [TP-Link Wi-Fi 7ルーター]
    2025年8月30日
  • Archer BE7200とArcher BE450の3つの違い [TP-Link Wi-Fiルーター]
    2025年8月30日
  • Archer BE3600とArcher BE220の2つの違い [TP-Link Wi-Fiルーター]
    2025年8月30日
  • G-PKB-002LNdとG-PKB-002LNの2つの違い [Logicool G キーボード]
    2025年8月30日
  • KX700GRdとKX700GRの4つの違い [ロジクール ワイヤレスキーボード]
    2025年8月30日
  • G-PPD-004WL-BKd と G-PPD-004WL-BKの2つの違い [Logicool ゲーミングマウス]
    2025年8月30日
  • SSD-CK1.0N4PLG3NとSSD-CK1.0N4PLG3Jの1つの違い [KIOXIA 内蔵SSD]
    2025年8月30日
  • KX700GRdとKX700GRの2つの違い [ロジクール キーボード]
    2025年8月30日
カテゴリー
  • コンピューター
    • gnuplot & eps
    • mac
    • matplotlib
    • wordpress
  • ホーム・家電
    • アイロン
    • オーディオ
    • オーラルケア
      • ジェットウォッシャー
      • 音波振動歯ブラシ
    • カメラ
    • カー用品
    • クリーナー
    • テレビ、レコーダー
    • ドアホン
    • メンズ美容家電
      • ラムダッシュ
    • ルンバ
    • 一覧比較
    • 工具
    • 浄水器
    • 温水洗浄便座
    • 炊飯器
    • 空気清浄機・加除湿機
    • 空調・季節家電
    • 美容家電
      • フェイスケア
      • ヘアケア
      • ボディーケア
    • 血圧計
    • 調理器具
    • 電子レンジ
  • 健康
  • 家事
    • パン
    • 料理
    • 育児
    • 食品
      • おせち
      • コーヒー
  • 書籍
  • 知識
  • 趣味
    • ペン字
    • ロードバイク・クロスバイク
    • 車
    • 鉄道模型
    • 電子工作
サイト内検索
最近の投稿
  • ES-L320WとES-L320Dの4つの違い [Panasonic メンズシェーバー]
  • HaierのJF-UFS11AとJF-NUF107Aの3つの違い [Haier 冷凍庫]
  • AQR-26R2とAQR-26Rの違いは? [AQUA 冷蔵庫]
  • AQR-36R2とAQR-36Rの違いは? [AQUA 冷蔵庫]
  • GR-Y450GTとGR-Y450GTMの2つの違い [東芝 冷蔵庫]
  • SJ-PW37PとSJ-PW37Kの2つの違い [SHARP 冷蔵庫]
  1. ホーム
  2. コンピューター
  3. amp-bindで「続きを読む」ボタンを作る方法。
  • ホーム
  • プライバシーポリシー

© カタログクリップ
contact@beiznotes.org

目次