読者です 読者をやめる 読者になる 読者になる

まちいろエンジニアブログ

南池袋のWebサービス開発会社、株式会社まちいろのエンジニアブログです。

AMP (Accelerated Mobile Pages) 導入の流れ

SEO

こんにちは、まちいろの工藤です。

先日、b-monster 株式会社と共同開発したオウンドメディア「b-monster.fit」がリリースされました。 フィットネスやボディメイクに関する記事を中心としたオウンドメディアとなっておりますので、興味のある方はぜひ購読をお願いします!

f:id:mkudo-machiiro:20170110224437j:plain

http://b-monster.fit

b-monster.fit の構築にあたって、記事ページを AMP (Accelerated Mobile Pages) に対応してみましたので、今回はその AMP 対応の流れをご紹介したいと思います。

AMP とは

AMP とは Accelerated Mobile Pages の略で、GoogleTwitter で共同開発しているモバイル端末での Web サイト表示を高速化するためのプロジェクト、またはフレームワーク自体を指します。読み方は「アンプ」が正しいようです。

www.ampproject.org

AMP を知るにあたって、個人的には mozaic.fm の AMP 回が非常に勉強になりました。

mozaic.fm

AMP には様々なレギュレーションがあり、これらに則ることで Web の高速化手法 (非同期処理、プリレンダリング、CDN キャッシュ...等) が適用されて高速にページが表示できる、という仕組みです。

AMP のレギュレーションの代表的なポイントは以下の通りです。

  • JavaScript を利用することはできない
  • 代わりに AMP が用意するコンポーネントで代用
  • CSS は外部ファイルではなくインライン展開する必要がある
  • img/iframe 等、一部のタグは AMP 用のタグに置き換え必要
  • style 属性を指定することはできない

また、AMP はサイトを高速に表示するだけでなく、ニュース記事であれば Google 検索のトップニュース枠 (AMP カルーセルと呼ばれる) に表示される条件にもなります。 本記事執筆時点で「大統領」と検索すると、以下のトップニュースが表示されていました。

f:id:mkudo-machiiro:20170110233848p:plain:w300

※ AMP カルーセルにブログ記事等のニュース以外の記事が表示されるパターンは確認できませんでした。この辺の事情ご存知の方いましたらコメントいただけると嬉しいです。

以上のことから、現時点では記事サイト、特にニュースサイトの記事であれば AMP を導入するメリットがありそうです。実際に多くのニュースサイトでは既に AMP が導入されています。

記事ページを AMP 化する

それでは今回 b-monster.fit で行った AMP 対応をご紹介します。

※ AMP ページを作成するための手順を記述していますが、実際には通常の記事ページ用の実装と、AMP ページ用の実装の2種類が分岐しながら実装しているイメージとなります。

1. AMP ボイラープレートを適用する

公式サイトのボイラープレートをそのまま持ってきて適宜内容を変更します。

www.ampproject.org

2. AMP ページの URL を指定

通常ページには <link rel="amphtml"> で AMP ページの URL を、AMP ページでは <link rel="canonical"> で通常ページの URL を示します。 この設定をしておくことで、通常ページをクローラーした際に一緒に AMP ページまでクロールしてくれます。

ちなみに AMP の URL 構造にはパラメータを使っても OK なので、通常ページのURL?amp=1 といった URL でも OK でした。

3. CSS をインライン展開する

通常 CSS は外部ファイル化して <link href="xxx.css"> で読み込んでいると思いますが、AMP では <style amp-custom> タグの中にインライン展開します。

4. 構造化データの設定

Google 検索結果の AMP カルーセルに表示させるには、schema.org に準拠した構造化データの指定が必要です。 今回は schema.org/Article の仕様に準拠した指定を行いました。

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Article",
    "url": "記事の URL",
    "headline": "記事のタイトル",
    "description": "記事の説明",
    "keywords": "記事のキーワード",
    "mainEntityOfPage":{
      "@type": "WebPage",
      "@id": "記事の URL"
    },
    "dateCreated": "記事の作成日時 (ISO 8601 フォーマット)",
    "datePublished": "記事の公開日時 (ISO 8601 フォーマット)",
    "dateModified": "記事の更新日時 (ISO 8601 フォーマット)",
    "author": {
      "@type": "Organization",
      "name": "b-monster"
    },
    "publisher": {
      "@type": "Organization",
      "name": "b-monster",
      "logo": {
        "@type": "ImageObject",
        "url": "ロゴ画像の URL",
        "width": 130,
        "height": 53
      }
    },
    "image": {
      "@type": "ImageObject",
      "url": "記事画像の URL",
      "width": 1000,
      "height": 600
    }
  }
  </script>

5. img タグを amp-img に置き換える

HTML に普通に <img src="xxx.jpg"> と記述していたところを、<amp-img src="xxx.jpg"> に置き換えます。

また、widthheight を必ず指定する必要があります。レスポンシブデザインを採用している場合は、layout="responsive" 属性を指定して、アスペクト比を保ったまま width 一杯に表示させることで対応が可能です。

6. Google Tag Manager の導入には amp-analytics タグを利用する

JavaScript を利用できないため、代わりにカスタムエレメント amp-analytics を利用します。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

...

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-xxxxxxx&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>

7. JavaScript を使わずに CSS のみで UI を実装する

今回は初めから AMP 対応が決まっていたので、例えばドロワーを JavaScript を使わずにチェックボックス:checked 疑似クラスセレクタを利用して実装してたりします。 ただし、ドロワーに関しては amp-sidebar を使って AMP でも実装可能です。

AMP ページを検証する

1. URL に #development=1 を付けてデバッグ

Chrome で AMP ページを開いて URL に #development=1 を付けてリロードすると、AMP ページのバリデージョンが実行され Console にエラーが出力されます。 ローカルで開発する際はこの方法でエラーを潰していきます。

2. AMP テストツールを実行する

サーバーを構築したら、実際の URL を AMP テストツールに投げて問題が無いか検証します。

AMP テスト

合わせて構造化データもチェックしておきましょう。

構造化データ テストツール

3. Google Search Console でエラーを確認する

AMP ページに問題がある場合、Google Search Console にログが出力されますので、内容を確認して適宜修正します。運用が開始されたら基本はここをチェックします。

f:id:mkudo-machiiro:20170110224236p:plain

おわりに

b-monster.fit はまだ広告も動画も無いシンプルなサイトなので、ここで紹介した内容は AMP 対応の中でも基本的な内容となります。

既存サイトへの導入は難しいこともあるかもしれませんが、新規にサイトを構築する際は導入を検討してみてはいかがでしょうか。

WordPressでオリジナルの投稿タイプを作成しよう

WordPress

f:id:s_kadota:20161115171712p:plain

こんにちは、まちいろの門田です。

ブログやコーポレートサイト、ECサイトなど様々な用途に WordPressを利用されている方も多いかと思います。 プログラムがわからなくても最低限ブログサイトを立ち上げられますし
(環境を作るだけでも色々と調べる必要ははありますが)
PHPをかじっている方であれば自分好みにテンプレートをカスタマイズできます。

そんなwordpressですが、基本的な記事作成の項目は「投稿」と「固定ページ」の2種類のみとなっています。
カテゴリやタグ、親ページの指定などでグループを分けて管理できますが......
そのソート作業をして該当カテゴリの記事だけを表示する、というのも都度都度行うのも何かと手間です。
「○○のカテゴリ記事」専用の投稿タイプがあれば作成も管理もかなり捗りますし、 記事作成のみを受け持っている担当者なども操作しやすくなるでしょう。

ですので今回は投稿や固定ページとは別に、カスタムフィールドと組み合わせて独自の記事作成フォームを作成する手順をご紹介します。

使用するプラグイン

「Custom Post Type UI」

新しい投稿タイプを作成できるプラグインです。 こちらを使用して新しい投稿タイプを設定します。

「Advanced Custom Fields」

記事作成時やカテゴリ作成時等に独自で設定した入力フォームを設定できるプラグインです。 使用用途は様々で、使いようによってはかなり自由度の高いWEBサイトを作成することができます。 今回新たに作成する投稿タイプ内の入力項目はこちらを使用して作成いたします。

1・プラグインのインストール

まずは二つのプラグインをインストールします。
WordPress管理画面の「プラグイン」、あるいはWordPress.orgより直接ダウンロードしてインストールしてください。

wordpress.orgのプラグインページ

インストールが完了し有効化が完了しますと、管理画面サイドバーに「CPT UI」と「カスタムフィールド」という項目が増えます。
f:id:s_kadota:20161115173052p:plain

2・新しい投稿タイプの設定

まず「CPT UI」より新しい投稿タイプを作成します。
「Add New Post Types」タブ内で新規の投稿タイプの設定をしていきます。
f:id:s_kadota:20161115181432p:plain


項目 内容
Post Type Slug 新しい投稿タイプの基本スラッグを設定します。 カテゴリのスラッグと同様のものであると捉えてください。
Plural Label 管理画面のサイドバーに表示される名前になります。 カテゴリの名前と同様のものと考えてもらって大丈夫です。
Singular Label 単数系のラベル設定です。 Plural Labelと同じで問題ありません。

上記三つを入力したら「Add Post Type」をクリックして作成しましょう。
ここでは新しく「お知らせ」専用の投稿フォームをテストで作成いたします。
サイドバー内に作成した新しい投稿タイプが追加されているはずです。
f:id:s_kadota:20161115181741p:plain

このままでもそのままお知らせ専用の投稿タイプとして使用できますが、
「Advanced Custom Fields」を用いてより専用らしい投稿タイプに作り変えてしまいましょう。

3・専用入力フォームの作成

今回作成した「お知らせ」にあると便利な入力フォームを設定します。基本的な

  • タイトル
  • 本文
  • 投稿日時

は既に元から設定されている入力フォームを使用すれば大丈夫ですが
ここに新たに投稿されるお知らせの種類と、サムネイル画像を設定しましょう。

  • お知らせの種類
  • サムネイル画像

カスタムフィールドを選択し、新規追加を選択します。
新規カスタムフィールド設定画面が開きますので、まずは今から作成するカスタムフィールドが
投稿タイプ「お知らせ」の時のみ表示される様に設定します。

f:id:s_kadota:20161116095925p:plain

次に投稿編集画面内での、カスタムフィールドの表示位置を設定します。
サムネイルやカテゴリの設定なのでタイトルのすぐ下に表示してしまいたいので、ここでは「High」を選びます。

f:id:s_kadota:20161116100403p:plain

そして「お知らせの種類」と「サムネイル画像」の項目を作成していきます。

「お知らせの種類」はセレクトボックスから選択する形式に。
f:id:s_kadota:20161116101124p:plain





「サムネイル画像」は画像アップロード形式で画像URLを取得できる形にします。

f:id:s_kadota:20161116101339p:plain





これで保存すれば、投稿タイプ「お知らせ」でのみサムネイル画像とお知らせの種類を選択することができるようになります。
実際の投稿画面はこちら。

f:id:s_kadota:20161116102748p:plain


いかがでしょうか、投稿内で全て管理するよりもカテゴリごとで投稿タイプを区切り、
それぞれ独自の投稿フォームを作成しておけば記事の管理や作成がグッと楽になりますし
htmlやcssphpにあまり詳しくない方にも
記事を作成していただくことがより容易になるかと思います。

WordPressでsetcookieを使う方法

WordPress

こんにちは! まちいろの日高です。
WordPressを扱うようになって早3年が経ちました…
いろいろありました。未だにGoogle先生に聞きながらコーディングをする毎日です。

今回はWordPressでsetcookieを使う方法についてまとめてみます。
PHPテンプレートの中でsetcookie書くだけでしょ…? いえいえ… 大変なんです。

 setcookie()の掟

PHPのsetcookie関数は

html や head タグはもちろん 空白も含め、あらゆる出力よりも前にこの関数をコールするようにしなければなりません。
PHP: setcookie - Manual

というルールがあります。何よりも先にsetcookie()を書きなさいね!ということです。
WordPressテンプレートPHP内にsetcookie()を記載した際も、こんなエラーが表示されました。

Warning: Cannot modify header information - headers already sent by …


header.phpの一番上に記載しても同じエラーが消えず
エラー箇所がWordPressのコアPHPだったので、とても困りました…

 WordPressでsetcookie()を使うには…?

WordPressでsetcookieを使いたい場合は、htmlタグより前にsetcookieを差し込んでしまえばよいということです。

function.phpでadd_actionを使います。

/*-----------------------------------------------
WordPressでsetcookieを使う
------------------------------------------------*/
add_action( 'wp_headers', 'my_setcookie');
 
function my_setcookie() {
    if (!isset($_COOKIE["sample"])):
        setcookie("sample","sample_value",0,"/");
    endif;
}


wp_headersにフックすることでエラーも発生せず、無事Cookieを仕込むことができました。

 まとめ

テンプレートPHP中でsetcookie()を呼び出し、
エラーが出る場合はfunction.php中でadd_actionすることで解決できました。
wp_headではなく、wp_headersにフックすることをお勧めします。