テケログスマートフォン用の表示で見るテケログブログ運営に関する事がメイン。良い雑記も書いてます。はてなブログでAMP配信|アドセンス広告の自動挿入やCSS編集をしてみたこの広告は、90日以上更新していないブログに表示しています。Pages)配信を始めました。AMPとはGoogleが推し進めてきたプロジェクトで、モバイルページの高速化してユーザーがよりストレスなく利用できる技術です。AMPについては他のサイトやブログを参考にしてください。ぶっちゃけ私はよくわかっていません。AMP配信をすると言うことはメリットだけでなくデメリットも存在し、導入を延期している方も多いと思います。この度当ブログをAMP配信するに当たって意識したこと、やったこと、失敗談などをまとめてみました。私の備忘録も兼ねていますが、参考にしていただければ幸いです。ちなみに1ヶ月運用した結果がこちらwww.kouritsu30.comなぜ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のレイアウト調整はあまり好きではなく、いつも通り適当にコピペして調整しました。予想通り100近いAMPエラーが発生w今日まではいいけど明日からエラーが継続していたら問題。2017年10月8日10月6日くらいから一気にAMPページのエラーが出てきたのがわかります。10月8日にメールで警告がきました。ちなみにまるかんさんが私のAMPページを見てtwitterでご質問をいただいた時に、そういやAMPって禁止事項なかったっけ?と思って調べ直して10月7日に修正は完了しました。エラーが出まくってますが、ナメたツイートをしているのは修正が完了しているからです。ConsoleのAMPテストで確認することができます。AMPテスト有効なAMPページがどうかすぐわかります。AMP対応している人はCSS編集後に必ず確認した方が良いです。ConsoleでのAMPエラーがゼロになりました。修正してもすぐに反映されるわけではないので焦らないようにしましょう。2017年10月13日Adsenseの自動貼り付けについてAdsenseのみならず他の広告や、さらに特定のタグの変更など全記事すぐに反映できればと常々思っていました。最近で言えばSSL化の対応ですよね。私はブログ歴が短くて対応すべき項目は無に等しいのですが、シロマさんが変換ツールを公開されてたと思います。www.notitle-weblog.comSSL化のような大きな出来事ですと、そういった方が動いてくれるかもしれませんが、AMPといった微妙なジャンルではあまり期待できません。Adsense以外に高収益が見込める他のASPの広告などがあれば、一気に張り替えたいとも思っていました。やっていったことを順々に説明します。シェルスクリプトによるAMP用Adsnese広告の貼り付けまずはココから手をつけました。道半ばで断念しても最悪使えるのでwなぜシェルスクリプトを選んだかは自分でもわかりません。別になんでもよかったんですけど、シェルスクリプトがご無沙汰だったので勉強がてらって感じです。Command+Cの流れ)テキストファイルにペーストシェルスクリプトでテキストファイルを読み込み、広告を貼り付けたい場所にAMP用のAdsenseコードを追記、書き出し「HTML編集」にコピペ以上です。【出力先ファイル】といった感じで書けば、出力先ファイルに追記されます。私はさらに「<h3>、<h4>、<h5>」の数をカウントし、真ん中の位置にも広告を配置するようにしています。これはJavaScriptで記事中に入れている方法と考え方は同じです。uxlayman.hatenablog.com実はこれを作って150記事分手作業で張り替えましたwコマンド一発なので更新するたびにやればいいやと思っていたのですが、当初記事上の広告を貼っていませんでした。終わってからやっぱ貼っとけばよかった...と思ったのですが後の祭り。私の性格上優柔不断の右往左往するので、やっぱり完全自動を目指すことに。はてなブログAtomPubでブログエントリの編集を行うここから少し辛かったですねwとりあえず公式のページを貼り付けときます。Centerぶっちゃけ私もわからなかったので、まずはドットインストールでRubyを軽くお勉強しました。作るのに参考にしたコードがこちら。ツナワタリマイライフ公式が参考になるのはもちろんだけど、2記事目は全記事巡回する部分は完全にコピペできる。これは本当に助かりました。blog.kymmt.comめっちゃ簡単に導入できるやん!と思ったのですが、なぜかOAuth認証がうまくいかずに断念。ちなみに私が使ったのはWSSE認証ってやつらしいです。なんとかプログラムを組んで、ブログのエントリの編集に必要なパラメータを集めてリクエストXML文章にする。書いているので参照してください。投稿日時が全て編集した日時に更新されてしまい、10月9日に159記事投稿になりましたwとりあえず焦りながら手動で元の日付に戻すことに...アホかと...原因がupdate要素の形式でした。+09:00」って形式なのですが、XMLで送信する時は「2017-10-09T15:23:30」に変えないといけなかった。完全に見落としていました。