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

はてなブログカスタマイズメモ

はてなブログのカスタマイズ、書き方などのメモ、チートシートです。

(Proのみ) はてなブログでAMP対応する

 AMPというページ表示の高速化について

s-supporter.hatenablog.jp

 という記事を見かけまして、ちょっと試してみようと思いました。

AMPとは

 Accelerated Mobile Pages (AMP) とは、文字通りモバイル向けの高速ページ表示のプロジェクトです。

https://www.ampproject.org/ja/docs/get_started/about-amp.htmlwww.ampproject.org

 発表されたのは去年(2015年)10月みたいなのですがGoogleが進めているプロジェクトであり、だから検索結果などにいち早く取り込まれていっているわけですね。

Official Google Blog: Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web

はてなブログでAMP配信する設定

 はてなブログでは、記事をAMPで配信することが設定ひとつでできます。

help.hatenablog.com

 ただしまずProである必要があります。

 それで、「設定 > 詳細設定 > AMP」の設定をチェックすると、記事がAMPで配信されるようになります。

f:id:kagerou_ts:20160815195958p:plain

 AMPで配信された結果は、記事のURLの後ろに「?amp=1」とつけることで確認できます。

 たとえばこの記事であれば、次のようなURLになります。

http://hatebu-memo.scriptlife.jp/entry/2016/08/15/204823?amp=1

その効果は?

 上の記事にもあったように、Google検索では結果的に強くなるところがあるようなので、検索からのアクセスアップは見込めるかもしれません。

s-supporter.hatenablog.jp

 実際に、AMPが有効に働いたのではというお話も。

www.yutorism.jp

ポケモンgoで検索した時の、検索トップに表示されていたようです。この『トップニュース』という表示枠は、AMPに対応している記事の中から、その瞬間にバズっている記事が表示されるようです。

諸刃の剣

 しかしですね…このAMPをはてなブログで設定すると、以下のような制約があります。

AMPを利用する際の注意点

はてなブログにおいてAMPを利用する際には、次のような制約があります。

・はてなブログのデザインテーマは反映されません
・デザイン設定でカスタマイズできるサイドバーモジュールや、HTMLの自由記述(記事上下、ヘッタ、フッタなど)は配信されません
・記事中のstyle属性など、スタイル関連のHTMLは反映されません
・記事中のJavaScriptは反映されません(このため広告などが表示されないことがあります)
 (HTTPSでなく)HTTPで配信されている画像は表示されません(はてなフォトライフやInstagramなどはHTTPSに対応しています)
・AMPではページ上部にあるiframeの表示に制約があるため、例えば記事の先頭にブログカードを配置したときには表示されません
・はてなカウンターには対応していません(AMPで表示されてもカウントされません)

(はてなブログ ヘルプより)

 またJavaScriptが動作しないため、JavaScriptを使用してレイアウトしているものなどの動作に支障が出ます。

 うちのブログで具体的にどういうことになったかというとAdSenseが消えました。全て。

 あとCSSが読み込まれなくてヨメレバが無残。

 AdSenseはフッタに指定していたので、

デザイン設定でカスタマイズできるサイドバーモジュールや、HTMLの自由記述(記事上下、ヘッタ、フッタなど)は配信されません

によって排除された感じです。コードが読み込まれていてもAMPでは動作しなかったでしょうけれどね…

 他にもJavaScriptで表示させている広告系、カスタマイズしているものなども動かないかもしれないのでそういう意味ではマイナスに作用するかもしれません。

AMP対応の広告を表示するには

 AMPページでもAdSenseなど、広告を表示する方法は用意されているようです。

www.iscle.com

 しかしAMP用に設定しなくてはいけないみたいで…現在のはてなブログでは実質無理ですね…
(記事ひとつひとつにHTMLで設定していけばあるいは、と思いますが現実的ではない。そのうちAMP向けヘッダ/フッタが実装されることでしょう)




 といいますかぶっちゃけ、前に一度設定してみたことはあったんですが翌日クリック数が半減しててびびって戻したことはあるんですよね…

 もともとそんなに多くなかったから、たまたまかもしれないですけどね…

 それでまあ、もともと試してみるか程度の軽い気持ちだったんで正式対応後でいいかと思って戻していたのですが、Google先生の推し方が思ったよりも強いならもう少しちゃんと試してみるか…と思った感じです。

 どのみちそっちをGoogle先生が推してくるなら、否応なしに選択することになりますしね。グーメン。



















 あとこれまためっさ余談かつ僕の感想レベルの話になりますけど。

ただ、広告収入に限って言えば、クリック報酬型の広告が表示されないのならキャッシュポイント、コンバージョンポイントが違う広告(アフィリエイト)やサービスを提供すればよいのでは?とも私は考えますが。

 について思うところとして商売としては変化に対応していくのが正しい。

 でも、うちみたいな「何か書いたついでに広告」タイプだと、「広告のための記事を書く」「収入を諦めるか」の二択にしろという意味にも聞こえるのですよね。

 それだったらまあ、中途半端なところは覚悟の上でいけるところまで現状維持でもって気持ちにもなりますよ。

 これは別に私のような半分以上趣味運営を対象にした話ではないと承知しつつも、ちょっともやっとしたので書き殴っておきます。

 こういった、収益モデルに合わせたコンテンツづくりというのは商売としては正しいのですが、当然その収益モデルにコンテンツの内容が合う/合わないというものもありまして。流行の収益モデルに適合することのできなかったコンテンツが縮小されていくのは運命ではありますが。ただ悲しみながら見送るしかない。

 現実的にはこんな二択ではなく、はてなブログが正式対応してamp-adが普通に使えるようになれば何も問題ありませんはずなのでそのリリースを待つ感じですが。ですよね?

(2016/11/06追記)

www.kokoro-fire.com

 ということで、どんどんampは広がっているようですね…

 自分のところを確認してみても、確かに地味にある。11月ぶんで測ると、全体に対して14%ほど…

 ちゃんと対応考えていかないといけない頃合いですね。やはり。

(2016/11/26追記)

hatebu-memo.scriptlife.jp

 AMP対応AdSenseを設置してみました。

Markdownでテーブルを表現する方法

 データなどを纏めていると必要になってくるのがテーブルの表記。

Markdownでの簡易表記

簡単なテーブル構成であれば、Markdownの表記がわかりやすい。

これは簡単で、「|」で区切るだけ。

最初の一行が見出し、次が行の属性、そこから先にテーブルに並べたい内容になります。

|見出し1|見出し2|見出し3|
|-------|-------|-------|
|内容1-1|内容1-2|内容1-3|
|内容2-1|内容2-2|内容2-3|
見出し1 見出し2 見出し3
内容1-1 内容1-2 内容1-3
内容2-1 内容2-2 内容2-3

これが基本形。
二行目の「-」はいくつでもいいので、適当に見栄えを整えるとよいです。

センタリングなどをしたいときは、

|見出し1|見出し2|見出し3|
|:------|:-----:|------:|
|左寄せ|センタリング|右寄せ|
見出し1 見出し2 見出し3
左寄せ センタリング 右寄せ

というように、二行目に「:」を入れて指定します。

複雑なテーブル構成

これ以上の複雑な構成、例えばカラムの結合などをして表示したいとなったらHTMLを直接書いてしまったほうが早い。

<table>
<tr>
  <th>見出し1</th>
  <th>見出し2</th>
  <th>見出し3</th>
</tr>
<tr>
  <td>内容1-1</td>
  <td>内容1-2</td>
  <td>内容1-3</td>
</tr>
<tr>
  <td colspan=2>内容2-1</td>
  <td>内容2-3</td>
</tr>
</table>
見出し1 見出し2 見出し3
内容1-1 内容1-2 内容1-3
内容2-1 内容2-3

みたいに。

Markdownでの数学記号の書き方

 Markdownで使える数学記号についてまとめていくページ。

 とりあえず作って追記していこうかと思います。

 基本的にははてなでの書き方というより、texの記法を使っている感じです。

分数

[tex:{\frac{分子}{分母}}]

1/2を表現したいときは、

[tex:{\frac{1}{2}}]

とすると{\frac{1}{2}}となります。

根号 (ルート)

いわゆるルートというやつ。

[tex:{\sqrt{数字}}]

√2としたいときは、

[tex:{\sqrt{2}}]

とすると{\sqrt{2}}となります。

累乗

aをn乗するときは、

[tex:a\^n]

と書く。

a^n

はてなブログでは普通にa^nとすると、anという階乗表記になるようです。

ただこれがtex表記に混ざると、逆にtex表記が無効化されてしまうみたいなのでエスケープしています。

例えば{60 = 2^2 \times 3 \times 5}という式を書きたいときに、

[tex:{60 = 2^2 \times 3 \times 5}]

とすると [tex:{60 = 22 \times 3 \times 5}] となってしまいました。

絶対値

 絶対値はそのまま、|を入れてやればよいです。

[tex:|a|]

とすれば、 |a| になります。

 これは分数でも有効。

[tex:|{\frac{1}{2}}|]

とすると、 |{\frac{1}{2}}| になります。

[tex:{\frac{|1|}{|2|}}]

というように分子、分母に指定してやると、 {\frac{|1|}{|2|}} となります。

参考リンクなど

TeXでの数式の書き方

http://izumi-math.jp/sanae/report/suusiki/suusiki.htm

Markdown記法 チートシート - Qiita

独自ドメイン設定が、何度も「ドメインの設定状況:エラー」となってしまう場合の対処法

 さっそくの投稿は、このブログを設定していたときのことです…

ブログの作成ができない

 本ブログははてなブログでのカスタマイズなどについて残していくつもりだったので、名前もシンプルに「はてなブログカスタマイズ」というふうにしました。

 それでそのままブログを作成しようとしたら、

f:id:kagerou_ts:20160807221104p:plain  

使用できない文字が含まれています。英数字で始まり、ハイフンと英数字が続く必要があります。

 ええー…?

 要件は満たしているはずですが、おそらく「hatenablog」がまずかった。

 たぶん、公式と紛らわしくなるような文字は禁止されているのでしょう。(そう言ってくれればいいのに…)

独自ドメインの設定もできない

 それでブログのURLはとりあえずクリアして、独自ドメインのほうはそのまま作って設定をしてみると、

f:id:kagerou_ts:20160807221406p:plain

ドメイン名が正しくありません

 こちらもチェックされているみたいでした…

ドメインの設定には時間が必要

 仕方ないので適当に縮めてみたのですが、これは設定できても独自ドメインが有効になっていないよう。

 確認してみると、

f:id:kagerou_ts:20160807221501p:plain

ドメインの設定状況: エラー

 とだけなっていて、結局有効になっていない…

 「ドメイン設定をチェック」してみると、そのときは「有効」になるんだけどその後やっぱりエラーになってしまう。

 それでどうしたかといいますと、さらに1時間くらい経った後、「ドメイン設定をチェック」をしてみたら無事に反映されました。

 DNSの設定が完了していなくてレコードが見つからない場合は、「エラー レコードが見つかりません」という表示になるのですが、どうやらそのメッセージではなくなっても、時間が必要な場合があるようです。

プライバシーポリシー、広告について

当サイトに掲載されている広告について

 当サイトでは、第三者配信の広告サービス(Googleアドセンス)を利用しています。
 このような広告配信事業者は、ユーザーの興味に応じた商品やサービスの広告を表示するため、当サイトや他サイトへのアクセスに関する情報 『Cookie』(氏名、住所、メール アドレス、電話番号は含まれません) を使用することがあります。
 またGoogleアドセンスに関して、このプロセスの詳細やこのような情報が広告配信事業者に使用されないようにする方法については、こちらをクリックしてください。

 

当サイトが使用しているアクセス解析ツールについて

 当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。
 このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。
 このトラフィックデータは匿名で収集されており、個人を特定するものではありません。
 この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。
この規約に関して、詳しくはこちら、またはこちらをクリックしてください。

 

 

 

変更履歴

2016/8/7 初出掲載

はてなブログをカスタマイズした内容のメモなどを残していきます

 どうも、一応プログラマをしているおっさんのかげろといいます。

 このブログははてなブログのカスタマイズなどについて、方法や調べたことを残していく場所にしようかと思っています。

 記載していることは特に断りがない限りは、はてなブログについてのことになります。

カスタマイズをまとめる理由

 もともと自分のやってるブログで、何かしらをした場合は参考に残していっていました。

 

tsundoku-diary.scriptlife.jp

 なのですが意外と増えてきたこと、行ったカスタマイズとは違うようなことをメモっておきたいと思った場合にどうしようかなと思いまして。
上のブログはもともと読書日記だったので、あんまりやりすぎるとカテゴリーエラーな感じはあるんですよね。

 ですからいっそ分けてみたほうがいいかなと思い、まだブログ枠も空いていたので作ってみました。

 Markdown記法など試してみたいというのもありましたし。

 というわけで、何かみつけたらちょくちょく投稿していくような感じで考えています。

 読まれた方の参考になりましたら幸いです。

管理人について

 弱ったおっさんプログラマ。

 ブログとしては、もともとのやつとして

 script life 千夜一夜

 プログラムとかの話題を分けてみた

 scriptlife 千夜一夜 プログラミング別館 | Unityとかプログラミングのこととかいろいろ

もやっております。

 あとは息抜き的に、漫画やラノベの感想をつらつら書き連ねているサイト

 怒濤の詰んどく解消日記

 最近数学をやりなおす羽目になっているのでその復習日記…

 プログラマの数学日記

もあります。

 もしご興味あれば是非覗いてみてください。