３回目の審査でついにFacebookのインスタント記事（Instant Articles）の審査に合格しました。
「ヘルプ記事が意味わからんし、自分には無理だ。。。」と半分諦めていたのですが、何とか審査に合格できてほっとしました。
この記事はインスタント記事を公開するまでの設定方法と、合格するまでの苦悩を書いています。
Facebookのインスタント記事とは
簡潔でインタラクティブな記事をFacebookモバイルアプリやMessenger内に配信できるよう、メディアパブリッシャー向けに開発されたツールです。インスタント記事には、写真や動画を読み込むFacebookのインフラが使われており、標準的な携帯サイトと比べて読み込み速度は最大10倍
fecebook Business: 「インスタント記事」
インスタント記事（Instant Articles）は、簡潔に言えばFacebookページ版AMPみたいなもので、表示速度が格段に速くなります。
ただ、アプリでFacebookページを開いた場合限定で、Safariなどのスマホのブラウザでは通常のページが表示されます。
ブラウザでは通常のページになってしまいますが、せっかくこのブログのFacebookページを作成したので、インスタント記事に対応させてみることにしました。
Facebookページの作成方法はこちらに書いています。
当初インスタント記事の作成はそれほど難しくないと踏んでました。
確かに難しくはないかもしれません。
けれど難しくないのに難しくなる原因が2つあります。
インスタント記事が難しくなる２つの理由
- ヘルプ記事が難しい
- 検索しても初心者向けの記事が少ない
どのツール・サービスにも言えることですが、基本的にヘルプ記事が意味わかりません（笑）。
一定の知識を持った人を前提に書かれているので、初心者には難解です。
そしてインスタント記事の作成方法を解説したサイトがわりと少ないです。
設定でつまずいた部分を検索しても見つからず、結局難解なヘルプ記事（笑）を元に作成することになりました。
インスタント記事（Instant Articles）の作成方法
最初に、Facebook for developersの「インスタント記事クイックスタートガイド」のページに行きます。
クイックスタートガイドにはインスタント記事の作成手順が書かれています。
- 登録する
- スタイルを作成する
- サイトを接続する
- ５件の記事のレビューを申請
- シェアを始める
まずは手順通りにページの登録を申請します。
ページをインスタント記事に登録
クイックスタートガイドの順番通り、まずはインスタント記事を公開するためにFacebookページを登録します。
クイックスタートガイドの「１．登録する」の項目に「登録する」というボタンがあるのでクリックします。
すると所有するFacebookページが表示されるので、インスタント記事を作成したいページを選びます。
ページを登録すると、Facebookページの「投稿ツール」に「インスタント記事」の項目が表示されるようになります。
そしてインスタント記事の「ツール」を使用して、公開できるように設定します。
WordPressにはインスタント記事用の「Instant Articles for WP」というプラグインがあります。
けれどプラグインを使用しなくても<head>～</head>にコードを埋め込み、フィードを登録するだけでインスタント記事を実装できます。
使用するプラグインは極力抑えたほうがいいので、プラグインを使用する必要はないと思います。
もし、インスタント記事のフォーマットに適応した記事が出力されるなら、プラグインの方が楽だと思います。
けれどプラグインを試していないのでその点は不明です。
サイトに接続
投稿ツールではインスタント記事の設定手順が書かれています。
まずはサイトにコードを埋め込み、サイトの確認をします。
インスタント記事の「ツール」の「サイトに接続」に表示されるコードを＜head＞～＜head＞内に埋め込みます。
おそらく、header.phpに＜head>はあると思います。
するとサイトの確認が完了するので、次のステップに進みます。
RSSフィードの登録
インスタント記事に記事をアップする方法はいくつかありますが、RSSフィードで記事を出力するのが1番簡単だと思います。
インスタント記事のRSSは「プロダクション関連の記事」・「開発関連の記事」の２種類のがあります。
開発関連の記事で記事を編集し、プロダクション関連の記事で完成した記事を公開するということなのでしょう。
プロダクション関連の記事のコピーを取り、プロダクション記事を直接編集すればいいと思いますが、念のため両方RSSフィードを登録します。
まずは「プロダクションRSSフィード」でフィードを登録します。
もっといい方法があるとは思いますが、とりあえず自分のサイトのRSSフィードを記入しました。
「https://サイトURL/rss」
「開発関連の記事」「プロダクション関連の記事」それぞれにサイトのRSSを記入すると、自動的に記事がアップされます。
ただ、このままではインスタント記事のフォーマットに適応していないので、インスタント記事に適応するように記事を編集します。
インスタント記事のフォーマットに合わせる記事の編集も必要ですが、その前にインスタント記事の「スタイル」を設定します。
スタイルの設定
インスタント記事用の見出しや本文のスタイルを「ツール」→「スタイル」で設定します。
右側にプレビューが表示されるので、どのようになるか見ながら設定できます。
ここで「ロゴ」も設定できます。
けれど当初は「ロゴは別にいいや」と思い、設定しませんでした。
けれどインスタント記事の申請に「ロゴは必須」のようです。
急ぎだったので無料ツールでロゴを作成して、ロゴを設定しました。
いずれじっくりロゴを作成したいと思いますが、自分と同じようにロゴがない人は審査のために無料ツールで審査に出すためにロゴを作成するといいと思います。
インスタント記事の編集
エラーがあるとこのように、エラー個所がハイライトされるので、エラーが出ている箇所を修正します。
WordPressのRSSフィードで記事を出力すると、必ず２つの項目でエラーが出ます。
必ずエラーが出る２つの項目
- h3やh4などの見出し
- ＜figure＞＜img＞を＜p＞要素で囲んでいる
インスタント記事ではh1とh2しか使用できず、h3やh4は使用できないようでず。
そのため、見出しにh3やh4があるとエラーになるので、h2かh1に見出しを変更します。
もう1つのエラーはRSSで記事を出力した場合、画像を呼び出すコードが＜p＞要素で囲まれていることから生じます。
<p><figure>
<img src="http://example.images.com/1.jpg"/>
</figure></p>
ここから＜p＞を取り除くとエラーを解消できます。
エラーを解消すると「！」が表示されなくなります。
ページマネージャーアプリで表示の確認
まだ審査に合格していなくても、Facebookページマネージャーアプリでインスタント記事の表示を確認ができます。
インスタント記事を作成しているFacebookページを開き、「セクション」→「インスタント記事」に進みます。
そしてプロダクションの記事で雷？のようなマークがついていると、インスタント記事が表示されます。
インスタント記事を表示させるとAMPページのように高速表示されます。
設定に多少時間がかかっているので、少し感動するかもしれません。
ただ1つ表示に不満があります。
たつじんｗ キャラが反映されない。。。
賢威７ではキャラ登録すると、このように吹き出し付きで簡単に会話表現を実装できます。
けれどインスタント記事ではキャラ設定は反映されず、このような表示になってしまいます（笑）。
このようにページマネージャーアプリで表示を確認しながら、インスタント記事の編集ができます。
ページマネージャーアプリはiOs、Android端末どちらにも対応しています。
インスタント記事の審査
これで全ての設定が終わりエラーも解消したので、いよいよインスタント記事を審査してもらいます。
インスタント記事の審査には記事が5件必要です。
以前は20件必要だったりしたようですが、現在は5件と緩和されています。
ブログを作成したばかりでも審査に出すことができるようになりました。
そこで、エラーを解消した5つの記事を選び、審査を申請してみました。
「これで大丈夫やろ！」と思っていたのですが、そんな簡単なものではありませんでした。
インスタント記事の設定は、全くインスタントではありません（笑）
1回目の審査の結果
1回目の審査の結果は不合格。。。
結果を見ると「テキスト要素」が足りないらしい。
ヘルプ記事を熟読した結果、日付けや記事タイトル、記事の作成者の情報を＜header＞に記述しないといけないようです。
<html>
<body><article>
<header>
<!-- The title shown in your article -->
<h1>記事タイトル</h1>
<!-- The author of your article -->
<address>
<a>たつじんｗ</a>
</address>
<!-- The published and last modified time stamps -->
<time class="op-published" datetime="2017-09-16">2017年9月16日</time>
<time class="op-modified" dateTime="2017-09-18">2017年9月18日</time>
</header>
本文
</article></body></html>
＜header＞に記事タイトル、記事作成・更新の日付、作成者の情報を追加しました。
これで審査に合格するだろうと思い、２回目の審査を申請しました。
２回目の審査の結果
２回目の審査の結果もまたもや「テキスト要素」が足りない、ということで不合格。
「インスタント記事はウェブ版と同じサービスを読者に提供する必要がある」とのこと。
そこで「サンプル」にあげられている記事のインスタント記事をページマネージャーアプリで見てみました。
この２つの記事はコードが記事に含まれていますが、インスタント記事にはコードが表示されていません。
「おそらくコードだ！」
と思い、コードをインスタント記事で表示する方法を調べました。
コードを記述する
<pre><code>コード</code></pre>
このブログではhighlight.jsを使ってコードを表示しています。
けれどインスタント記事ではhighlight.jsで表示させたコードが表示されないようです。
そこでインスタント記事のヘルプを見ると、エスケープされる前のコードを記述して「figure」と「iframe」で囲むと書いてありました。
<figure class="op-interactive">
<iframe>エスケープ前のコード
<pre><code>エスケープされたコード</code></pre></iframe></figure>
よくわかりませんが、このように記述してみました。
「多分駄目だろうなぁ。。。」
と思いながらも、3回目の審査を申請してみました。
３回目の審査の結果
「多分駄目だろう」と思っていましたが予想に反し、まさかの合格。
この記述方法だとコードが2つ表示されたり、文字化けしたりすることがあります。
絶対間違ってると思います（笑）。
とにかく審査に通ったので、ページマネージャーで表示を確認しながら、コードが2つ表示されたらエスケープ前のコードを削除したり、きちんと表示されるように対応したいと思います。
広告の配置
インスタント記事ではFacebookのAudience Networkを利用して収益化することができます。
Audience Networkは自分で広告を配置してもいいですが、<head>にコードを記述すると自動的に広告を表示させることもできるようです。
手動で全記事に配置するのは大変だと思うので、自動で表示させる設定をしてみました。
自動的に配置する
<head><meta property="fb:use_automatic_ad_placement" content="enable=true ad_density=default"></head>
コードの「default」の部分で広告配信の密度を設定できます。
-
default：250文字ごとに広告配信
-
mideum：350文字ごとに広告配信
-
low：500文字ごとに低密度の広告配信
デフォルトが一番広告配信量が多いのは珍しいです。
けれどデフォルトだと流石に広告が多すぎると思います。
そこでmidiumに設定してみました。
ただ、＜head＞に広告を自動配信するコードを記述したら、「canonical URLを＜head＞に記述するように」という警告が出たので、下記のようにコードを変えました。
<html>
<head><link rel="canonical" href="https://記事のURL">
<meta property="fb:use_automatic_ad_placement" content="enable=true ad_density=medium"></head>
<body><article>
すると、またもや警告が表示されました。
ただ、警告内容をよく見てみると、「自動広告配信が使用できるデフォルトのAudience Networkが使用されています」。
そして、「警告をクリアしたいなら、自動広告配信をオフにするか、広告テンプレートを設定」しろ、とのこと。
警告内容からおそらく、デフォルトの自動広告配信を利用するならこのままで大丈夫だとは思います。
けれど全ての記事で「警告」が表示されてるいる状態。
インスタント記事の配信が停止になりそうな気がして少し怖いです（笑）。
関連記事
インスタント記事はコードを足すことで関連記事も表示できるようです。
デフォルトでも「人気の記事」がカード形式で記事下に表示されます。
ただ、人気の記事はカテゴリーやタグで関連づけられてるわけではありません。
けれどこのブログではカテゴリーをしっかり分けてこなかったので、デフォルトの設定でも十分かもしれません。
当分デフォルトの設定で様子を見ようかと思います。
まとめ
３回目の審査でやっと合格したため、インスタント記事を実装するまで2週間くらいかかりました。
スタートガイドをきちんと読まずにインスタント記事の設定をしたため時間がかかりましたが、何とか審査に合格してよかったと思います。
ただ審査に合格したものの、コードの記述方法は絶対間違ってる気がします。
また、警告が出ているのでAudience Networkの設定も間違っているかもしれません。
ヘルプ記事を読んでも初心者にはあまり理解できません（笑）。
けれど１番の問題は、サイトの記事とは別にインスタント記事用に記事を編集し直さないといけないことです。
画像が少ない記事なら楽だと思いますが、コードまで書いていると編集作業が結構大変かもしれません。
画像にキャプションや説明、代替テキストを設定していると、もっと大変だと思います。
今日のたつじんへの一歩
たつじんｗ ただ、このブログはこの記事を書いて時点で「いいね」が0です。
インスタント記事の実装は苦労しましたが、需要が全くありません（笑）。
