アンプページのデモTOP

そんなわけでアンプページのデモTOPが出来上がりました。わーい
ひとまずテンプレートみたいな感じに仕上げてます。
2017/8/25時点では、development=1でAMP validation successful.が返ってきていますので正式なAMPページとなります。

ここのデモで詰め込んでみた機能

以下の機能をこのテンプレートの共通機能として実装しています。
各機能の詳細については別途まとめている所がありますので、そちら参照していただけると嬉しいです。

  1. サイドバー
  2. アコーディオン(サイドバーの中)
  3. GA計測タグの設置
  4. サイト内検索フォーム
  5. SNSへのシェアボタン
  6. スライダー
  7. カルーセルスライダー
  8. サムネイル選択型スライダー
  9. lightbox(スライダ画像)
  10. youtube埋め込み
  11. インスタ記事埋め込み
  12. facebook記事埋め込み
  13. twitter記事埋め込み
  14. パララックス(少し)

画像は細かいの併せておよそ20枚 そこまで大きな画像ではありませんが。
とはいえこれだけ詰め込んでも表示速度爆速なのはすごい!!!
とはいえ、[youtube][インスタ][FB][TW]に関しては外からデータ引っ張ってくるので
初期表示は早いですが、その後のコンテンツロードではそれなりに時間かかったりします。

共通ファイルについて

外部ファイルの読み込みは静的なhtmlでは実装不可能でしたが
PHP使ってやっています。
共有ファイル化しているのは以下

  1. amp必須headタグ
  2. CSSファイル
  3. headerのhtml
  4. footerのhtml
  5. サイドバーのhtml

外部ファイル読み込み方法

単純にphpのincludeを使用しています。
SSIも使用不可なのである意味裏技みたいなニュアンス٩(๑òωó๑)۶
PHPではこんな感じで記述すればいけます。絶対パス指定にしています。

<?php include($_SERVER['DOCUMENT_ROOT']."/hogege/hogeeee/hogehoge/hohogeeeee.html") ?>

画像スライドギャラリー

いつものいただき物のイラストを使います。
メイン画像クリックでlightboxも出してみます。

■ 一般的なスライダー

■ カルーセルスライダー(スマホのフリックで動かしたい時いいよね)

■ サムネイルで選択可能スライダーて

サムネイルに選択中のアレつけたいけど、ちょっと現状では厳しいな。諦め

youtube動画読み込み

youtubeの動画読み込んでみる

instagram読み込み

インスタの記事を一つ読み込み

facebook読み込み

facebookの記事を一つ読み込み

twitter読み込み

twitterのつぶやきを読み込み

寿司ネタ

  • えび
  • たこ
  • いか
  • えんがわ

北斗四兄弟

  • らおう
  • とき
  • じゃぎ
  • けんしろう

ナビを閉じる