at backyard

Color my life with the chaos of trouble.

AMP

AMPサイトでGoogle AdSense広告を出す方法

最初に この記事はだいぶ前に書いたまま下書き保存で塩漬けになっていたものである。 すっかり忘れていたので、今更ながら公開することにした。 AMPサイトでGoogle AdSense広告を出す方法 AMPサイトでGoogle AdSenseの広告を表示する方法についてだが、AMP対…

Googleが検索結果にAMP表示を出すことをやめたことについて。また、Habanero Beeの今後の対応について。

モバイルの検索結果からAMP対応を示す雷マークが消えた 9to5Googleの下記の記事によると、Googleの検索結果からAMPに対応していることを表す雷マークを削除したようだ。 9to5google.com 確かに実際に検索してみると、雷マークが表示されなくなっている。 (自…

【2021年版】費用を年1円に抑えながらペラサイトを運営する方法

費用を年1円に抑えるなんてことは可能なのか? タイトルがかなり釣りっぽいタイトルになっている気がしたので、最初に結論だけ述べておくと、これは現実に可能である。 なお、後述するが、2年目以降は1,000円代に支出が増える。が、それでも十分安い。 もし…

AMP対応したサイトでGA4はまだ使えないので、おとなしく従来のGoogle Analyticsを利用しよう

AMP対応したサイトでGA4はまだ利用できない そういえば少し前にこんなことをつぶやいていた。 AMPページでGA4が使えるようになるのはまだ先のようね。https://t.co/vQ30p64Kn7 #amp #ampweb— Yuki Shindo (@shinshin86) 2021年3月10日 現在(2021年3月時点)の…

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…