親バカエンジニアのナレッジ帳

webのエンジニアをやっており、日頃の開発で詰まったことや書き残しておきたいことを載せています。

AMP

amp-list内でsetStateで設定した値を使用する方法

amp-list内で条件次第で出し分けする方法 amp-list内にtemplateを設定すればsetStateの値を使用できる amp-list内で条件次第で出し分けする方法 amp-listはjsonを使用してリスト表示するパターンの使用が多いと思いますが、条件次第で出し分けしたいことがあ…

amp-date-pickerの初期値を今日(ページを開いた当日)にする方法

amp-date-pickerの初期値 dateオプションにPODを設定 amp-date-pickerの初期値 AMPでもカレンダー機能を使用するためには、amp-datepickerが便利ですが、オプションの設定は普通のJavascriptのdatepickerに比べてわかりづらく、詰まるポイントになります。 A…

AMPのcssを別ファイルに分けて記述する方法

AMPを記述する際のCSSの書き方 テキストファイルとして読み込ませる AMPを記述する際のCSSの書き方 AMPでHTMLを記述する際、CSSは基本的に外部ファイルに分けて記述することはできませんよね。 例えば以下の書き方でスタイルシートを読み込もうとするとエラ…

はてなブログのAMPページで記事ごとに手動でAdsenseを設置!

はてなブログのAMPページ デザインのカスタマイズの設定が効かない Google AdsenseをAMPページで反映 はてな記法の場合 Markdown記法の場合 Headにamp-adのJavascriptは必要? はてなブログのAMPページ はてなブログでは、有料アカウントであるPROになるとペ…

AMPページではてなブックマークのシェアボタンを動的に設置

AMPページではシェアボタンを置きたくなることが多い AMPページではSNSのシェアボタンを簡単に設置できる。 はてなブックマークのシェアボタンも非公式ではあるがAMPに対応している AMPページでのはてなブックマークボタンの実装方法 AMPページではシェアボ…

Spring BootでページごとにSPAとAMPを切り分ける方法

Spring BootでSPAとAMPの併用 Spring Bootでは基本的にフロント側はThymeleafを使用し、サーバサイドで取得した変数を活用して描画させますが、HTMLの組み方によってはAMPページもThymeleafで作成することができます。 一方SPAはSingle Page Application(シ…