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