テケオは眠くても頑張るぞ!

面倒くさがりの雑記ブログ。便利なサービスや製品紹介、ブログのカスタマイズ方法などを中心に書いてます。

はてなブログでAMP配信|アドセンス広告の自動挿入やCSS編集をしてみた

f:id:tektekeo:20171009201818j:plain

当ブログでは10月当初からAMP(Accelerated Mobile Pages)配信を始めました。

AMPとはGoogleが推し進めてきたプロジェクトで、モバイルページの高速化してユーザーがよりストレスなく利用できる技術です。

AMPについては他のサイトやブログを参考にしてください。ぶっちゃけ私はよくわかっていません。

しかし、AMP配信をすると言うことはメリットだけでなくデメリットも存在し、導入を延期している方も多いと思います。

この度当ブログをAMP配信するに当たって意識したこと、やったこと、失敗談などをまとめてみました。

私の備忘録も兼ねていますが、参考にしていただければ幸いです。

なぜAMP配信を始めたか?

AMPについて私が思っていたデメリットがこちらになります。

  • レイアウトが崩れやすくしょぼい
  • JavaScriptが使用できない(広告の貼り付けを記事ごとにする必要あり)
  • 直帰率が上がる(気がする)

といった点でした。

しかし、レイアウトが崩れやすいとはいえ、現在はてなブログではAMP用のCSSは使用できるので、極端に見劣りすることはありません

また直帰率に関しては「雑記ブログ」であると言う特徴なのか、めちゃくちゃ高いです。Analyticsでは90%近くまで行くこともとあり、もはや気にする必要があるのか?と思いました。

関連性の高い記事は記事内にリンクをつけているケースが多いので、AMPによってさほど変わらないのであろうとも思っています。

はてなの「関連記事」機能や、アドセンスの関連コンテンツの表示もできるので、直帰率が悪くなることは十分に防げそう。

AMPではできない工夫をされていたらダメですけどね。

 

この2点についてはリスクを負っても大した違いはなさそうだと思っていましたが「JavaScriptが使用できない」という点が一番悩むところでした。

当ブログではGoogleアドセンスを記事内にJavaScriptで配置しています。そしてその場所は収益率が高いので絶対に外したくない場所なのです。

しかし、AMP配信をするとそれぞれの記事ごとに広告を設置しなければならず非常に手間ですよね。そこで、

全ての記事を自動で修正してくれるプログラムを組もう。

そう決めたのが一週間くらい前です。

当ブログは運営期間の割にPV数を稼ぐこともできず、何か活路はないかな?と思っていたのでチャレンジしようと決意しました。弱小ブログなので失敗のリスクも少ないと思ったのも決意した要因の一つです。

そこから仕事終わりコツコツとCSSの編集とはてなブログのAPIを調べてRubyで試行錯誤してなんとかできました。AMPによる効果が出るのでしょうか?

その中で、自分がやったこと、失敗談、気をつけるべきポイントなどを書いていきます。

半分は備忘録なので悪しからず。

CSSについて 

結論を言うとアホなことをしましたw

きっちりとルールを確認すべきだと反省。こういった失敗を人生でなんどもしていますが、死ぬまで直らない気がします。

確認すべき事項や注意すべき事項は以下の記事が非常に参考になります。

design.syofuso.com

こちらのサイトでは「CSSの禁止事項」「AMP簡単のカスタマイズ」「関連記事のリンク」など必要十分に記載されていたので、非常に参考にさせていただきました。(ミスした後ですがw)

凡ミス

私がしたミスは「CSSの禁止事項」に該当する記述をしていたことです。

AMP用のCSSとはいえ、基本的にはスマホ用レイアウトのコピペです。そしてタチの悪いことに禁止行為でもきっちり反映されてしまうので注意です。

個人的にCSSのレイアウト調整はあまり好きではなく、いつも通り適当にコピペして調整しました。そう、AMPに関しての事前確認を全くせずに...

すると、

10月6日くらいから一気にAMPページのエラーが出てきたのがわかります。10月8日にメールで警告がきました。ちなみにまるかんさんが私のAMPページを見てtwitterでご質問をいただいた時に、

そういやAMPって禁止事項なかったっけ?

と思って調べ直して10月7日に修正は完了しました。

エラーが出まくってますが、ナメたツイートをしているのは修正が完了しているからです。

まるかんさんに助けられましたw

本当にAMPページとして禁止事項を犯していなかは、Google Search ConsoleのAMPテストで確認することができます。

f:id:tektekeo:20171009211312j:plain

AMPテスト

有効なAMPページがどうかすぐわかります。

AMP対応している人はCSS編集後に必ず確認した方が良いです。

 

追記:2017年10月14日

無事Search ConsoleでのAMPエラーがゼロになりました。

修正してもすぐに反映されるわけではないので焦らないようにしましょう。

Adsenseの自動貼り付けについて

Adsenseのみならず他の広告や、さらに特定のタグの変更など全記事すぐに反映できればと常々思っていました。

最近で言えばSSL化の対応ですよね。私はブログ歴が短くて対応すべき項目は無に等しいのですが、シロマさんが変換ツールを公開されてたと思います。

www.notitle-weblog.com

SSL化のような大きな出来事ですと、そういった方が動いてくれるかもしれませんが、AMPといった微妙なジャンルではあまり期待できません。

また、Adsense以外に高収益が見込める他のASPの広告などがあれば、一気に張り替えたいとも思っていました。

では、やっていったことを順々に説明します。

シェルスクリプトによるAMP用Adsnese広告の貼り付け

まずはココから手をつけました。

道半ばで断念しても最悪使えるのでw

なぜシェルスクリプトを選んだかは自分でもわかりません。別になんでもよかったんですけど、シェルスクリプトがご無沙汰だったので勉強がてらって感じです。

作ったプログラムはこんな感じ

  1. 「HTML編集」を全部コピーする(MacではCommand+A → Command+Cの流れ)
  2. テキストファイルにペースト
  3. シェルスクリプトでテキストファイルを読み込み、広告を貼り付けたい場所にAMP用のAdsenseコードを追記、書き出し
  4. 「HTML編集」にコピペ

以上です。

最初と最後は簡単で

#最初の行にAMP用広告を追加

sed -i -e "1i 【アドセンスのコード】 【出力先ファイル】

#最終行にAMP用の広告を追加する

echo 【アドセンスコード】 >> 【出力先ファイル】

 といった感じで書けば、出力先ファイルに追記されます。

私はさらに「<h3>、<h4>、<h5>」の数をカウントし、真ん中の位置にも広告を配置するようにしています。

これはJavaScriptで記事中に入れている方法と考え方は同じです。

uxlayman.hatenablog.com

実はこれを作って150記事分手作業で張り替えましたw

コマンド一発なので更新するたびにやればいいやと思っていたのですが、当初記事上の広告を貼っていませんでした。終わってから

やっぱ貼っとけばよかった...

と思ったのですが後の祭り。私の性格上優柔不断の右往左往するので、やっぱり完全自動を目指すことに。

はてなブログAtomPubでブログエントリの編集を行う

ここから少し辛かったですねw

とりあえず公式のページを貼り付けときます。

はてなブログAtomPub - Hatena Developer Center

ぶっちゃけ私もわからなかったので、まずはドットインストールでRubyを軽くお勉強しました。

では作るのに参考にしたコードがこちら。

公式が参考になるのはもちろんだけど、2記事目は全記事巡回する部分は完全にコピペできる。これは本当に助かりました。

APIを使って記事を投稿する or 記事を取得するっていう内容の記事はちらほらあったんだけど、編集するっていうのは本当になかったのでコピペできず残念でしたw

その他にもこんな記事もありました

めっちゃ簡単に導入できるやん!

と思ったのですが、なぜかOAuth認証がうまくいかずに断念。

ちなみに私が使ったのはWSSE認証ってやつらしいです。

なんとかプログラムを組んで、ブログのエントリの編集に必要なパラメータを集めてリクエストXML文章にする。

必要なパラメータは

  • title要素
  • content要素
  • updated要素
  • category要素
  • app:control/app:draft要素

これもはてなブログAtomPub に書いているので参照してください。

すごいミスをした

サブブログとか作って軽く数記事動かしたところで問題ないと踏み、当ブログで実行してみると、速攻でやばいことになったw

投稿日時が全て編集した日時に更新されてしまい、10月9日に159記事投稿になりましたw

f:id:tektekeo:20171009222927j:plain

とりあえず焦りながら手動で元の日付に戻すことに...アホかと...

原因がupdate要素の形式でした。

Feedから取得すると、「2017-10-09 15:23:30 +09:00」って形式なのですが、XMLで送信する時は「2017-10-09T15:23:30」に変えないといけなかった。

完全に見落としていました。

自動化はしたものの恩恵は少なく全行程を終了

まとめ

  • AMP用CSSは必ずAMPテストでチェックする
  • はてなブログAMP配信に伴い、記事への自動広告貼り付けのプログラムを作った
  • XMLファイルの内容には注意!一発でブログがふっとべますw
  • バックアップは絶対
  • CSS、Ruby共にえぐいミスをしたw 私ってホントばか。

こんな感じです。

AMP導入の為にここまでしてみましたが、類似したことをされたい人の参考になれば。また、自分の反省を込めてこの記事を書かせていただきました。

プログラムは作れたものの、大々的に使う機会は少なくなりそうです。

AMP配信を始めてまだ間もないですが、今月の変化があれば今月の運営報告にでもかけたら。とは思っています。