at backyard

Color my life with the chaos of trouble.

AMP

AMP対応のページで月ごとのグラフを表示させる

少し前に書いていたもの。ついつい下書きフォルダに忘れがち。。 AMP対応させたページでグラフを動的に表示させるとなると、基本的にJavaScriptは使用できないので、CSSで頑張ることになりそう。 というわけで、Next.js環境で頑張ってみた結果がこれ。 githu…

自身のポートフォリオサイトをNext.js(AMP対応)に移行した

以前自身のポートフォリオサイトを作り、AMP対応したことを書いた。 shinshin86.hateblo.jp ちなみに実際のサイトはこちら。 (よろしければ音楽やWEBアプリなど聴いたり見たりしてみてください〜) shinshin86.com 基本的にこのサイトはHTML5 UPのテンプレー…

AMP対応ページでYouTubeの動画を貼る方法

自分への備忘録。 AMP対応ページでYouTube動画を貼るのは、思ったよりもだいぶ簡単だった。 下記のページを参照すればOK。 具体的には amp-youtube というタグを使うことになる https://amp.dev/ja/documentation/components/amp-youtube/ AMP対応ページにYo…

既存のWebページ(静的HTMLのペラサイト)をAMP対応してみた

自身の音楽ポートフォリオサイト(静的HTMLのペラサイト)をAMP対応してみた 以前、自身が作ってきた音楽をまとめた音楽ポートフォリオを、HTML5 UPのテンプレートを用いて、1枚だけのペラサイトとして作成した。 shinshin86.com その時の詳細は下記に書いた…

Next.jsでAMPのサンプルを最速で試す

完全なる自分用メモ(備忘録) 下記を参考にすればOK (Next.jsのAMPのサンプル) github.com 以下のコマンドを順に実行すればAMPのサンプルページが立ち上がる。 あとは localhost:3000にアクセスするだけ。 yarn create next-app --example amp amp-app cd amp…