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

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

FC2ブログのあれこれ
2020/08/15
9
vanillaice (Akira)
vanillaice (Akira)
FC2ブログからのお知らせInstructionFC2ブログ新機能

気づくのが遅れてしまったんですが、待望の新機能実装が行われました。と言っても ベストではない

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

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

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

はじめに

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

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

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

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

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

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

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

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

参考記事

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

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

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

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

テンプレート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終了タグ直前に一度だけ 記載してください。何度も書く必要はありません。

Related post

Comments  9

-
2020/08/16 (Sun) 10:07

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2020/08/17 (Mon) 11:44

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2020/08/17 (Mon) 15:18

To 更新通知の件 内緒さん

こんにちは。

> script以降を(プラグイン内ではなく)htmlの後方に移動させた方がよいのでしょうか?〜

そういうことです。ただしテンプレート変更時に移植作業が発生しますので管理だけ忘れず行ってくださいね :)

vanillaice (Akira)
Akira
2020/08/17 (Mon) 15:19

To 更新通知終了タグの件 内緒さん

こんにちは。

ご指摘ありがとうございます。修正しました :)

-
2020/08/17 (Mon) 16:21

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2021/12/21 (Tue) 09:01

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

-
2021/12/28 (Tue) 09:13

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
vanillaice (Akira)
2021/12/29 (Wed) 15:34

To 更新通知の件 内緒さん

お返事大変遅くなりごめんなさい。
本件ですが、私自身がこの機能を利用したことが無いものでなんとも言えない、というのが正直なところです。
コメント欄の情報を整理するとfeedlyなどRSS + OGPを参照するサービスでは発生していないようですし、やはりFC2ブログのシステム的な問題(プッシュ)ではないかと思います。

あとこれは余談ですが「マガブロ」については私も不思議に思っていて、こちらもシステム的な問題じゃないかと。今まで数回「編集後」にマガブロに切り替わっていたことがあり、絶対にタブ操作をしていない(マガブロタブをクリックしていない)自信がある(笑)
再度同じことが起きれば運営に報告しようと考えています。

本件について全くお役に立てなかったこと、お返事が遅くなったことをお詫びします。
内緒さんも良いお年を :)

-
2022/01/04 (Tue) 10:18

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)