2019-05-10

【ねこ】もしかしてうっすら気づきながら、我慢してくれてる？

ねこシアンチョコ

おつかれさまです。

今日もはじめていきます。

f:id:herrscherinnen:20190510220456p:plain

おくすり

シアンさんもチョコさんも、お薬にはずいぶんお世話になりました。

いまでもときどき、口をあけて薬を押しこまれています。

薬だとわかると、音を立てずに隠れてしまいます ↷( ó╻ò)

そんなこんなで、２人とも、薬はあまり好きではありません。

さ、薬をこっそり持ったあと、ママクックを取り出します。

ママクックの気配を感じとるシアンさん

f:id:herrscherinnen:20190510212608j:plain

しっかりと聞き耳を立てています (ʘɵʘ)

ママクックから目を離せないシアンさん

f:id:herrscherinnen:20190510212822j:plain

行儀が良すぎます。違和感を感じているようです (๏㉨๏)

一部始終をみていたチョコさん

となりの部屋にいたため、錠剤をとるとこも見られました。

f:id:herrscherinnen:20190510213119j:plain

にーちゃん、あかんやつやで ( ´•౪•`)

気づいてしまうシアンさん

ちょっと、リアクションよわいですが、気づかれました ↷( ó╻ò)

f:id:herrscherinnen:20190510213227j:plain

しかし、遅かったですね、お薬タイムです ( ๑ ơωơ )*.¸¸♪

終わったら、ママクックをあげて、解散！

薬だとわかっても、全力の拒否をしないのは、
もしかして、体に必要だとわかってくれてるのかな？( ๑ ơωơ )*.¸¸♪ ~~親ばか~~

読んでくれて、ありがとうございます！

おわり

2019-05-09

【AdSense】AMP 配信されたページに AdSense の広告を貼る方法

はてなブログ技術

いちにち、おつかれさまです。

f:id:herrscherinnen:20190509214108p:plain

今日は、AMP 配信されたページに Adsense を載せる方法を紹介します。

はまりどころがとても多いです !!!!=͟͟͞͞(๑ò◊ó ﾉ)ﾉ

対象

はてなブログで AMP 配信を検討されている方

結論

はてなブログで AMP 配信されたときに、
AdSense の広告を表示するには、以下のコードが必要です。

<center>
  <amp-ad
    layout="fixed"
    width=300
    height=250
    type="adsense"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="xxxxxxxxxx">
      <div overflow></div>
  </amp-ad>
</center>

また、記事に貼ったものだけが、機能します。

これが、現状のサポート範囲で最適だと判断しました。

説明

はまりどころを並べます。

はてなブログ関連
- AMP 配信でユーザが指定したヘッダを使ってくれない
- AMP 配信でユーザが指定したデザインを使ってくれない
- AMP 配信のプレビューをデザイン画面で表示できない

Google AdSense 関連
- 推奨されるコードでは、広告がはみ出てしまう
- 紹介されている修正方法では、広告が左に張り付いてしまう

AMP 配信でユーザが指定したヘッダを使ってくれない

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

AMP（Accelerated Mobile Pages）を使用する - はてなブログヘルプ

つまり、bodyタグで記事に共通なところは、まったく使えません ↷( ó╻ò)

AMP 配信でユーザが指定したデザインを使ってくれない

記事中のJavaScriptは反映されません（このため広告などが表示されないことがあります）

AMP（Accelerated Mobile Pages）を使用する - はてなブログヘルプ

これは、headタグの設定を無視することを指しているようです。

つまり、headタグの中も、まったく使えません ↷( ó╻ò)

つかえれば、amp-script に可能性がありそうでした。
詳しくはこちらです。

amp.dev

AMP 配信のプレビューをデザイン画面で表示できない

記事編集画面（PC版）の「プレビュー」タブで、「スマートフォン (AMP)」タブに切り替えて、AMPでの表示をプレビューすることができます。

AMP（Accelerated Mobile Pages）を使用する - はてなブログヘルプ

昨日は、これにやられました ꉂꉂ(ᵒƐ ᵒ ๑)

なぜか、設定した画面と違うところで確認するとのこと。

しかも、設定を保存しないと確認できません… ↷( ó╻ò)

失敗するたびに、見てくれている人に迷惑が… ↷( ó╻ò)

推奨されるコードでは、広告がはみ出てしまう

AMP 対応広告ユニットの作成方法 - AdSense ヘルプ

確認したところ、Amp 配信では左右に自然な余白がありました。

こちらの推奨コードには width に 100vw が指定されているため、広告の一部が、見えない位置にはみ出て表示されます ↷( ó╻ò)

また、単純に 100vw 以外に設定するとエラーになります ↷( ó╻ò)

後続の項目で解決しています。

紹介されている修正方法では、広告が左に張り付いてしまう

Google AdSenseでは、100vw から変える方法も紹介されています。

レスポンシブ AMP 広告コードを修正する方法 - AdSense ヘルプ

ですが、左に貼りついて、あまり見栄えが良くありません ↷( ó╻ò)

center タグで解決しています。

width=300 について
- 横幅 240px の端末は少ないはず
- 横幅 320px からをフォロー
- 横幅 320px のとき、左右の余白は 10px ずつ

_{スマホでは、スクロールバーが 16px 場所をとることはありません。}
_{そのため、幅が 320px の端末では、これでぴったりになります。}

まとめ

すべてのページに共通する HTML を設定できる箇所がないため、
広告のコードを1か所にすることはできませんでした。

すべてのページに共通する JavaScript を設定できる箇所がないため、
広告を動的に差し込むこともできませんでした。

そのため、

AMP配信での広告は、記事ごとに貼り付けていくしかありません。

また、AdSense の広告は、大きさとデザインに注意が必要です。

AMP 配信について、はてなブログの機能拡張が待ち遠しいです。

困りごとばかりを書きましたが、
AMP 配信の設定は簡単で、効果も大きいです。

developers.google.com

こちらで測定したら 66 → 28 まで、急激にスコアがあがりました。

SEO にもいい影響がありそうです ( ๑╹ω╹๑ )

読んでくれて、ありがとうございます！

おわり

2019-05-08

【ブログ】モバイルでの表示速度を高速にする Accelerated Mobile Pages【AMP 化】

はてなブログ技術

おつかれさまです ₍๐•ᴗ•๐₎

今回は Accelerated Mobile Pages 、通称 AMP についてです。

f:id:herrscherinnen:20190508220029p:plain

概要のあと、はてなブログで AMP 配信をするための設定方法を紹介します。

AMP とは

ざっくりでは、モバイルでのウェブサイト閲覧を高速化できます。

Google が中心に立ち上げているので、
もしかしたら SEO でも副次的な恩恵があるかもしれません。

詳しくはこちらです。

Accelerated Mobile Pages - Wikipedia

はてなブログで AMP を配信するには、 Pro にする必要があります。

ということで...

はてなブログを Pro にしてみました。

_{AdSense の審査は Pro にせず合格していたので、収益を使って Pro をお試しします。}
_{AdSense の話はこちらです。}

はてなブログ Pro に期待していること
- SEO
- AMP（今日はこちら）

AMP 配信をするには

はてなブログを Pro にしてしまえば、AMP 配信は簡単です。

ブログ管理画面を開きます。
設定 > 詳細設定 > AMP にチェックを入れます。

~~これで終わりなのですが、確認が1点あります。~~ ~~レスポンシブデザインを使っていると、AMP 配信になりません。~~

【2019/05/09 追記】AMP配信出来てました ↷( ó╻ò)

レスポンシブデザインでなくす手順も紹介します。

ブログ管理画面を開きます。
デザイン > スマートフォン > 詳細設定 > レスポンシブデザインのチェックをはずします。

これで完了です (ง⁎˃ ᵕ ˂ )ง⁾⁾

AdSense の広告について

~~_{AMP 配信では、昔は AMP 専用の広告に変更する必要があるようでした。}~~

~~_{今はテキスト広告とディスプレイ広告のコードが、そのまま使えちゃいました。}~~

~~_{簡単でよかった (⁎˃ᴗ˂⁎)}~~

【2019/05/09 追記】使えていませんでした ↷( ó╻ò)
解決しました。こちらをお読みください。
【AdSense】AMP 配信されたページに AdSense の広告を貼る方法 - Nekonote

これから Pro にする方へ

はてなブログ Pro を試すときに、
もしもアフィリエイトのアカウントをお持ちなら、
本人OK のキャンペーンがあります。

はてなブログ Pro 1か月 1008円に対して、報酬 300円という破格です。

1年契約と同じぐらいの金額になるため、お試しするにはうれしいです。

キャンペーンから はてなブログ で検索すれば見つかると思います。
_{他の人を紹介するには、申請が必要なので、リンクは貼れなかったです ↷( ó╻ò)}

もし、もしもアフィリエイトのアカウントをお持ちなければ、

こちらから作れます (｡･-･｡)

文字ばっかりになってしまったので、にゃんこ成分を充電

よく眠るチョコさん (_´๑・ω・๑)

f:id:herrscherinnen:20190508222629j:plain

AMP 配信にしてみた効果については、また後日の報告にします。

ただ、ものすごい早くなってびっくりしました ꉂꉂ(ᵒƐ ᵒ ๑)✧

読んでくれて、ありがとうございます！

おわり

2019-05-07

【ねこ】フルーツタルト in にゃんこ【末路】

ねこシアンチョコ

連休あけ、おつかれさまです。

さっそくですが、フルーツタルトです。

f:id:herrscherinnen:20190507202752j:plain

本当はこれ、もっとかわいいんです。

フルーツタルトという割には、貧相ですよね… ↷( ó╻ò)

本当はちゃんとかわいいです！

www.felissimo.co.jp

気づかなかったんです、『（モデル猫・体重3.8kg）』に ↷( ó╻ò)

シアンさんは 8kg

ちくしょおおおおおおおお、モデル体重や美容体重専用かぁああ (ू ˃̣̣̣̣̣̣o˂̣̣̣̣̣̣ ू)

とり急ぎ、フルーツを半分にしましたが、不満そう

f:id:herrscherinnen:20190507202752j:plain

取り外されていくフルーツ

ブルーベリーしか残っていません… ↷( ó╻ò)

f:id:herrscherinnen:20190507202756j:plain

もはやただのタルト

フルーツなんて、なかった (ू ˃̣̣̣̣̣̣o˂̣̣̣̣̣̣ ू)

ここで一番いい寝顔におちつく

f:id:herrscherinnen:20190507202805j:plain

とフルーツ

こっちも、いい寝顔におちつく

f:id:herrscherinnen:20190507202801j:plain

と、いうことで、

なんだか違和感が残りますが、余すところなく堪能しました (ง⁎˃ ᵕ ˂ )ง⁾⁾

読んでくれて、ありがとうございます！

おわり

2019-05-06

【Instagram と Twitter の連携】写真をURLにしないで共有する方法 - 2019年版【IFTTT】

技術はてなブログ

InstagramとTwitterを連携させる方法

今回は IFTTT を使います (ง⁎˃ ᵕ ˂ )ง⁾⁾

ifttt.com

設定が終わるまで、およそ 10分の作業になります。

ゆっくりやるなら 15分ぐらいをみてください (◍•ᗜ•́)✧

説明は PC を想定していますが、アプリもあります。

なぜ？

Instagram には標準の連携機能がありますが、
Twitter に共有されたときに、せっかくの写真がURLに変換されてしまいます。

そのため、そのままでは写真を見ることができません ↷( ó╻ò)

やること

Instagram に投稿したら、Twitter にも投稿されるようにします。

Twitter でも、写真がそのまま観れるようにします。

手順

IFTTT にログイン
Applet をつくる

手順ごとに説明していきます。

IFTTT にログイン

次のいずれかでログインできます。

メールアドレス
googleアカウント
facebookアカウント

こちらからログインしてください。

ifttt.com

Applet をつくる

ログインした後、My Applets からアプレットの作成画面に移動します。

右上の `New Applet` を押します。

f:id:herrscherinnen:20190506131214p:plain:w320

新しいアプレットを作る画面に移ります。

青色の `⊞ this` を押します。

f:id:herrscherinnen:20190506131218p:plain:w320

連携元のサービスを選択する画面に移ります。

`Instagram` を選択します。

f:id:herrscherinnen:20190506131222p:plain:w320

`Connect` を押して、Instagram の認証をします。

f:id:herrscherinnen:20190506131225p:plain:w320

左上の `Any new photo by you` を選択します。

（Instagram に写真を投稿したときに、動作させるためです。）

f:id:herrscherinnen:20190506131229p:plain:w320

青色の `⊞ that` を押します。

f:id:herrscherinnen:20190506131234p:plain:w320

連携先のサービスを選択する画面に移ります。

`Twitter` を選択します。

f:id:herrscherinnen:20190506131238p:plain:w320

`Connect` を押して、Twitter の認証をします。

f:id:herrscherinnen:20190506131241p:plain:w320

左から2つ目の `Post a tweet with image` を選択します。

（Twitter に写真付きで投稿するためです。）

f:id:herrscherinnen:20190506131244p:plain:w320

投稿内容を設定して、 `Create action` を押します。

インスタグラムと同じ内容にする場合は、初期設定のままで大丈夫です。

f:id:herrscherinnen:20190506131248p:plain:w320

`Finish` を押します。

f:id:herrscherinnen:20190506131253p:plain:w320

これで設定はおわりです (๑˃̵ᴗ˂̵๑)

Instagram に投稿したら、Twitter に連携して投稿されるようになりました。

読んでくれて、ありがとうございます！

おわり

2019-05-05

【ブログ】かゆいところに手が届くオンラインツールの紹介

技術はてなブログ

おつかれさまです。

今回はブログでよく使う、「画像」に関するツールの紹介です (◍•ڡ•◍)

PEKO-STEP

いろんなツールがありますが、とくに画像の加工が手軽にできます。

www.peko-step.com

Windowsのペイントでは届かないところを、フォローしてくれています。

画像を透過させる
- 透過するところを選択するだけなので、簡単です
画像の上下左右に余白をつける
- サムネに合わせて余白をいれるときに、便利です
画像の大きさを変更
- ペイントでは透過を維持できないので、たまに便利です

他にも、色や角度、n進数の計算なんかもあります (๑˃̵ᴗ˂̵๑)

Cool Text

テキストの加工やロゴタイプを手軽に作れます。

ja.cooltext.com

なかには、シンボルマークも選べるテンプレートもあり、ほんとに便利です。

(◍•ᗜ•́)✧

ロゴタイプやシンボルマークについては、こちらがわかりやすかったです。

ロゴ、マークについて

Draw.io

技術系の人におすすめです。

高機能な作図ツールです |ω･)و ̑̑༉

www.draw.io

チャート、ネットワーク図、ワイヤーフレームなど、
Plantuml や mermaid で書きにくい図を、手軽に描くことができます。

日々の作業を効率化してくれるツールと、
それを送り出してくれているクリエイターさんに感謝 (⁎˃ᴗ˂⁎)

読んでくれて、ありがとうございます！

おわり

2019-05-05

【ねこ】1/4 スケールシアンさん

シアンねこ

チョコさんがきたころの話がスゴイ人気だったから、

シアンさんがきたころの話です。

安着（あんちゃく）

事故なく到着いたしました (⁎˃ᴗ˂⁎)

f:id:herrscherinnen:20190505082331j:plain

やっぱりすみっこが安心するよね °(´-ㅁก`)☼

f:id:herrscherinnen:20190505082337j:plain

プッスー ⁎ˇ◡ˇ⁎

f:id:herrscherinnen:20190505082343j:plain

_{元気なので、安着としましたが、}
_{このあと、いろいろあってジプシーになり、}
_{ほんとうに落ち着いたのは4か月後でした。}

探索

とにかく元気で、毎日ひとり運動会です ( ･ᴗ･ )⚐⚑

ほどよい隙間が好き ( ๑╹ω╹๑ )

f:id:herrscherinnen:20190505082350j:plain

紙のボールが好き ( ๑╹ω╹๑ )

f:id:herrscherinnen:20190505082400j:plain

高いところ大好き ( ๑ > ω < ๑ )

f:id:herrscherinnen:20190505082407j:plain

さいきん

重さ 1.8kg だったシアンさんもいまでは 8kg に到達しそうです。

チョコさんがきてからは、すっかりお兄ちゃんしてます。

f:id:herrscherinnen:20190505084308j:plain

譲っているのか、狭いだけなのかは、考えどころです ꉂꉂ(ᵒƐ ᵒ ๑)

読んでくれて、ありがとうございます！

おわり

おくすり

ママクック の気配を感じとる シアンさん

ママクック から目を離せない シアンさん

一部始終をみていた チョコさん

気づいてしまう シアンさん

対象

結論

説明

AMP 配信 でユーザが指定した ヘッダ を使ってくれない

AMP 配信 でユーザが指定した デザイン を使ってくれない

AMP 配信 のプレビューを デザイン画面 で表示できない

推奨されるコードでは、広告がはみ出てしまう

紹介されている修正方法では、広告が左に張り付いてしまう

まとめ

AMP配信 での広告は、記事ごとに貼り付けていくしかありません。

AMP とは

はてなブログを Pro にしてみました。

AMP 配信をするには

AdSense の広告について

これから Pro にする方へ

文字ばっかりになってしまったので、にゃんこ成分を充電

さっそくですが、 フルーツタルト です。

本当はこれ、もっとかわいいんです。

シアンさんは 8kg

取り外されていく フルーツ

もはやただの タルト

と フルーツ

InstagramとTwitterを連携させる方法

なぜ？

やること

Instagram に投稿したら、Twitter にも投稿されるようにします。

Twitter でも、写真がそのまま観れるようにします。

手順

IFTTT にログイン

Applet をつくる

右上の New Applet を押します。

青色の ⊞ this を押します。

Instagram を選択します。

Connect を押して、Instagram の認証をします。

左上の Any new photo by you を選択します。

青色の ⊞ that を押します。

Twitter を選択します。

Connect を押して、Twitter の認証をします。

左から2つ目の Post a tweet with image を選択します。

投稿内容を設定して、 Create action を押します。

Finish を押します。

安着（あんちゃく）

探索

ほどよい隙間が好き ( ๑╹ω╹๑ )

紙のボールが好き ( ๑╹ω╹๑ )

高いところ大好き ( ๑ > ω < ๑ )

さいきん

ママクックの気配を感じとるシアンさん

ママクックから目を離せないシアンさん

一部始終をみていたチョコさん

気づいてしまうシアンさん

AMP 配信でユーザが指定したヘッダを使ってくれない

AMP 配信でユーザが指定したデザインを使ってくれない

AMP 配信のプレビューをデザイン画面で表示できない

AMP配信での広告は、記事ごとに貼り付けていくしかありません。

さっそくですが、フルーツタルトです。

取り外されていくフルーツ

もはやただのタルト

とフルーツ

右上の `New Applet` を押します。

青色の `⊞ this` を押します。

`Instagram` を選択します。

`Connect` を押して、Instagram の認証をします。

左上の `Any new photo by you` を選択します。

青色の `⊞ that` を押します。

`Twitter` を選択します。

`Connect` を押して、Twitter の認証をします。

左から2つ目の `Post a tweet with image` を選択します。

投稿内容を設定して、 `Create action` を押します。

`Finish` を押します。