「更新通知登録プラグインが追加されました」というアナウンスがありました

【ブログ】 更新通知登録プラグインが追加されました。

平素は、FC2 (fc2.com) をご利用いただき、誠にありがとうございます。この度、FC2ブログ（blog.fc2.com）にて更新通知機能実装に伴いまして、「更新通知登録ボタン」プラグインを追加いたしました。ブログ管理画面の 公式プラグイン追加 より、追加してご利用いただけます。ブログプラグイン - 更新通知登録ボタン更新通知登録ボタンをご利用いただくことで、簡単に更新通知を登録することができます。更新通知機能については、以...

fc2information.blog.fc2.com

はじめに

ベストではなくベターだ、という意味は、FC2ブロガー間ならば管理画面で通知を受け取りたい のではないですか？みなさんどうですか (´・ω・｀)

とは言っても対外的というか、「FC2IDはあるけれどもブログはやってません」という方にも通知が届くのでこれはこれで有ったほうが良い機能です。これとは別で管理画面通知ができると良いですね。

フリーエリア移植やhtmlベタ打ちOK

一部のプラグイン、例えば ブロとも一覧 などがそうなんですが、フリーエリアへの移植やテンプレートhtmlへの直打ちを行うと機能が失われるものがあります。今回の 更新通知登録 についは移植OKです。そして同ページ内複数設置も可能。iframeで呼び出すため過剰な掲載はページ表示の負荷になりますので適度に。

プラグイン非対応の場合とカスタマイズについて

プラグインでの提供なのでそのままプラグインとして使うのが一番簡単・便利です。プラグイン非対応テンプレートの場合はテンプレートhtmlに直接記載してください。

見た目のカスタマイズ(スタイリング)については 非推奨 です。もともとiframeというのはカスタマイズが非常に困難で、今回のこちらについてもiframe内で専用スタイルシートが呼び出されます。それを打ち消したり上書きするには別でスタイルシートを作成してJSでもって多少強引に上書き(scriptの順序も関係します)するか。管理面も複雑になりますのでおすすめしない。

個人的には「マウスオーバーで対象物が薄くなる」処理はやめて欲しかった (´・ω・｀)
なぜ薄くするのか。意味がわからない(笑)

参考記事

画像をマウスオーバーで薄くする必要があるのか？

デザインについて思ったことなど。 海外ドラマが好きでよく情報を漁るのですが、某サイトが最近デザインを刷新されまして。 以前より見やすくなりました。ありがとうございます。 もうアレだよね。スマホ読者的には スワイプでタブを切り替える とかちょっと辛い。 大体ブラウザがスワイプの動作を何かに割り当ててる場合が多いので、動作が衝突するんだよ (´・ω・｀) サイト内カテゴリ切り替えのスワイプがブラウザ機能...

vanillaice000.blog.fc2.com

えと。クッソどうでもいい記事なので読まなくて良いです ←

テンプレートhtmlに直接記載する場合の手順です。

<div class="subscription_button_container" data-id="<%blog_id>" data-layout="standard"></div>

必ず必要なのはこれだけです。元のソースコードは

<div class="subscription_button_container" data-id="<%blog_id>" data-layout="standard">
  <p class="fc2_user_update_notification_note" style="font-size: 13px;margin: 0 0 1rem;">更新通知で新しい記事をいち早くお届けします</p>
</div>

2020.8.17
元のコードの方にdiv終了タグがひとつ余分についていました。申し訳ございません。お知らせ頂いたS様にお礼申し上げます。

こうですね。「更新通知で新しい記事をいち早くお届けします」の文言が必要な方はこちらを利用してください。で、テンプレートhtml内に記載する場合の注意は 親要素がp要素でないことを確認 してください。場合によってはレイアウトが崩れてしまいます。既存p要素内にどうしても入れたい場合はそのp要素をdiv要素に書き換えるなどの処理を行います。

コード内にある <%blog_id> はプラグインではみなさんのブログIDが直接記されているはずですが、テンプレートへ書く場合は変数指定をおすすめします。複数ブログを所有している場合でも書き換える必要がなく、そのままコピペで使えます。

<script>(function(c,u,p){if(!c || document.querySelector('.subscription_button'))return;u+='/notification/embed/';Array.prototype.forEach.call(c,function(e){const f=document.createElement('iframe');f.classList.add('subscription_button');f.setAttribute('title','更新通知ボタン');f.style.height='40px';f.style.border='0 none';f.style.overflow='hidden';if(URLSearchParams){p=new URLSearchParams;p.set('id',e.dataset.id);p.set('layout',e.dataset.layout);p.set('ref',location.href);f.setAttribute('src',u+'?'+p.toString());}else{f.setAttribute('src',u);}f.setAttribute('referrerPolicy','strict-origin');e.appendChild(f);})})(document.querySelectorAll('.subscription_button_container'),'https://blog.fc2.com');</script>

こちらはJSです。ファイル化されていないためasyncが効きませんので、</body> の直前、つまり最後の最後に処理すると良いですね。早く処理する必要は無いと思います。プラグインの場合はhtmlの位置(書き順)次第で、該当スクリプトの位置その場で処理が行われます。つまりテンプレート全体のレンダリングをブロックする(中断させる)、という意味です。ベタ打ちの場合はせっかくですから後方へ回しましょう。

上記コード中の f.setAttribute('title','更新通知ボタン'); はオリジナルソースには無い内容です。iframe要素自体にtitle属性を付加します。Lighthouseなどの警告が気になる方は入れた方が良いでしょう。

ただしこういった試験ツールの目的は 試験に合格することではない ので、なぜ必要なのかを説明すると、title属性を入れることによってスクリーンリーダー利用者などが「このコンテンツは一体何なのか、飛ばしても良いコンテンツなのかどうか」を判断しやすくなります。ですからtitleには適切な文言を入れてください。管理者自身が不明になるようなタイトルは付けない。素直に「更新通知ボタン」で良いと思います。

というわけで簡単ではありますが説明終了(笑)

追加の注意点です。htmlはボタン掲載したい箇所へコード記載。複数記載可。JSは body終了タグ直前に一度だけ 記載してください。何度も書く必要はありません。