ページの日付情報を表示するユーザー・スクリプト PageDateInfo.user.js
ウェブページのメタデータやフィードなどから、作成日・公開日・更新日の情報を抽出・表示
ブラウザにはウェブページの日付を一定の場所に表示してほしい - Zero Reblogs by Zerobaseという記事がありまして。
その情報が「いつ書かれたものであるか」は、非常に重要なコンテキストあるいはメタ情報
というご意見には全く同意するもので、特にスクリーンリーダーなど支援技術を利用している人たちには尚更重要なのではないか。
…という思いもあって、記事に触発されて、Firefox / Chrome / Opera用のユーザー・スクリプトを作ってみました。
-
PageDateInfo.user.jsの動作デモ
(Firefox / Chrome / Operaで動きますが、IEやSafariでは動きません) - asamuzaK/PageDateInfo (GitHub)
-
PageDateInfo.user.jsのインストール
(Firefoxでは要Greasemonkey。Chrome / Operaでは要Tampermonkey)
機能と使い方
- ページのメタデータやフィードなどから、作成日・公開日・更新日の情報の抽出を試みます。 情報の抽出が完了したら、ページの右下に「ページの日付情報」のパネルが表示され、自動的に隠れます。
- ページのトリプル・クリックでパネルを再び表示します。 この場合、パネルは自動的には隠れずに、ボタンのクリックで隠れます。
- NVDA + Firefoxでしか検証していませんが、スクリーンリーダーでは「ページの日付情報」は本文の最初に読み上げられるか、追って通知されます。
- なお、初期設定では、スクリーンリーダーではパネルの「ボタン」の読み上げを行わないように指定しています。 ボタンの押下によって視覚的な変化しかもたらさないためにそのような初期設定にしていますが、後述のユーザー設定で読み上げるように変更することができます。
- 日付の読み方に関してはちょっとだけ注意が必要です。
- 日付のメタデータで時間(時・分・秒)が省略されていた場合、「0:00:00」と表示しています。
- 「更新日」の日付では、「不明 (2014年8月3日 12:34:56)」などと表示されることがあります。 PHPなどで動的に生成されているページでこのような表示になりがちです。 カッコ内の日付は、document.lastModifiedの値を表示したものですが、「更新日時」ではあるものの実際のところは「アクセス日時」を示していることになります。
- 「自動表示のオン・オフ」「表示時間」「パネルの文字サイズ」「ボタンの読み上げ」の各設定は、お好みで変更できるようにしています。
スクリプト・ソースのuserSettings()の中を直接書き換えてください。
なお、ユーザー設定はユーザー・スクリプトをアップデートした際にリセットされます。
お手数ですが、その都度書き換えてくださいませ。
- autoDisplay
- 「ページの日付情報」のパネルの自動表示を切り替えます。 「true」で自動表示、「false」では自動表示しません。 初期設定は「true」です。 値は引用符で括らないでください。
- displayTime
- パネルの表示時間(秒数)を数値で指定します。 初期設定は「3」(3秒)です。 また、「0」を指定すると自動的には隠れず、ボタンのクリックで隠れます。 値は引用符で括らないでください。
- fontSize
- パネルの文字サイズをCSSの書式で指定します。 「"small"」「"medium"」といったキーワードによる指定のほか、「"16px"」や「"1rem"」などもOKです。 初期設定は「"small"」です。 値は必ず引用符で括ってください。
- readButton
- スクリーンリーダーでのパネルのボタンの読み上げを切り替えます。 「true」で読み上げます。 「false」で読み上げません。 初期設定は「false」です。 値は引用符で括らないでください。
更新歴
- 1.0(2014/8/3)
- 公開
- 1.1(2014/8/4)
- パネル用CSSの記述を修正
- 1.2(2014/8/4)
- パネルのボタンの読み上げをユーザー設定で指定できるように変更
- 1.3(2014/8/4)
- ボタン読み上げ用のユーザー設定名を変更
- 1.4(2014/8/4)
- いくつかのサイトで見つかったCSS上の不具合にあわせてCSSを調整
- 1.5(2014/8/5)
- Google Feed APIのロードに失敗するサイトがあったので修正
- 1.6(2014/8/5)
- Google Feed APIやAtom内での判別式を修正
- 1.7, 1.8(2014/8/5)
- 共通する一部処理を関数化して整理
- 1.9(2014/8/6)
- CSSを一部修正
- 1.10, 1.10.1(2014/8/6)
- 日付情報で時・分・秒が省略されていた場合は現地時間の0:00:00として扱うようタイムゾーン分の時刻補正処理を追加
- 1.11(2014/8/7)
- いくつかの関数を整理
- 1.12(2014/8/7)
- utm_系のクエリは取り除いてマッチングさせるよう処理を追加
- 1.13(2014/8/7)
- getAtom()内で常にdatePublishedの値も上書き処理するよう変更
- 1.14(2014/8/7)
- aria-*周りの指定を少し修正
- 1.15(2014/8/8)
- 時・分・秒が省略されていた場合のタイムゾーン分の時刻補正処理で文字通り加減を間違えていた(足すべきところを引いていたorz)ので修正
- 1.16, 1.16.1(2014/8/8)
- RSSでコメントフィードを誤って取得しないよう判定処理を追加
- 1.17(2014/8/8)
- コンテンツがhttps://でフィードがhttp://な場合の処理を追加
- 1.18, 1.18.1(2014/8/9)
- @grant GM_xmlhttpRequestに変更
- 1.19, 1.19.1(2014/8/12)
- CSS調整
- 1.20(2014/8/12)
- utm_系に加えref=*のクエリも取り除いてマッチングさせるよう処理を追加
- 1.20.1, 1.20.2, 1.20.3, 1.20.4, 1.20.5(2014/8/13)
- CSS調整、文字はシステム・フォント、色はシステム・カラーを使用するよう変更
- 1.21, 1.21.1, 1.21.2(2014/8/14)
- CSS微調整、関数も微修正
- 1.22, 1.22.1, 1.22.2(2014/8/14)
- RSS1.0への対応を修正、日付判別のためのセレクタをいくつか追加
- 1.23, 1.23.1, 1.23.2(2014/8/14)
- 一部サイトでRSS取得時にエラーが出ていたので対応。日付判別のためのセレクタを追加
- 1.24, 1.24.1(2014/8/15)
- いくつかのサイトの挙動にあわせてスクリプトを一部調整
- 1.25, 1.25.1, 1.25.2, 1.25.3, 1.25.4, 1.25.5(2014/8/28)
- GM_xmlhttpRequest内のresponseXML周りの処理を修正、あわせて関数も整理。CSS調整
- 1.26(2014/10/11)
- Chromeが38になったのに伴い、Chrome用のdocument.lastModifiedのバグ対策処理を削除
- 1.27(2014/10/22)
- setInterval()に代わりsetZeroTimeout()を利用するよう変更
- 1.28(2014/10/28)
- setZeroTimeout()だとChromeでうまく動いていなかったので再びsetInterval()に変更
- 1.29, 1.29.1, 1.29.5, 1.29.6(2015/3/14)
- 関数を一部整理
- 1.30, 1.30.1(2015/3/15)
- 関数を整理、typo修正
- 1.31, 1.31.1(2015/4/16)
- 関数を整理
- 1.32 (2015.5.19)
- GitHubでの管理に変更
"ページの日付情報を表示するユーザー・スクリプト PageDateInfo.user.js"へのTwitter上でのコメントやRT
24件のツイートがあります。
ツイート 1
asamuzaK.jp : ページの日付情報を表示するユーザー・スクリプト PageDateInfo.user.js / ウェブページのメタデータやフィードなどから、作成日・公開日・更新日の情報を抽出・表示 http://t.co/lXSzWMsoPS
ツイート 2
.@zerobase06 こんにちは。 http://t.co/QTLGctpxs3 の記事に触発されて作ってみました。お試しくださいませ。 ページの日付情報を表示するユーザー・スクリプト PageDateInfo.user.js http://t.co/lXSzWMsoPS
ツイート 3
.@zerobase こんにちは。 http://t.co/QTLGctpxs3 の記事に触発されて作ってみました。お試しくださいませ。 ページの日付情報を表示するユーザー・スクリプト PageDateInfo.user.js http://t.co/lXSzWMsoPS
ツイート 4
RT @asamuzakjp: .@zerobase こんにちは。 http://t.co/QTLGctpxs3 の記事に触発されて作ってみました。お試しくださいませ。 ページの日付情報を表示するユーザー・スクリプト PageDateInfo.user.js http://t.…
ツイート 5
おぅ… 検証がてらあちこちサイトを見て回っていたら、h1要素の背景だけに!important指定しているサイトに遭遇 asamuzaK.jp : ページの日付情報を表示するユーザー・スクリプト PageDateInfo.user.js http://t.co/lXSzWMsoPS
ツイート 6
スクリプトの無駄を修正したり、見栄えを調整したり、自分としてはほぼ満足いく仕上がりになってきたけど(自分の使いやすいように調整しているから当たり前だけどw)、もうひとつの目的である支援技術利用者にとっての使い勝手はどうなんだろうなぁ… http://t.co/lXSzWMsoPS
ツイート 7
RT @asamuzakjp: スクリプトの無駄を修正したり、見栄えを調整したり、自分としてはほぼ満足いく仕上がりになってきたけど(自分の使いやすいように調整しているから当たり前だけどw)、もうひとつの目的である支援技術利用者にとっての使い勝手はどうなんだろうなぁ… http:…
ツイート 8
スクリーンリーダーを使って動作の検証はできても、それが実際のスクリーンリーダー利用者にとっての利便性とは必ずしも一致するわけではないだろうしなぁ… http://t.co/lXSzWMsoPS
ツイート 9
そもそもで言えば、ぐりもんとか入れてるのだろうか… http://t.co/lXSzWMsoPS
ツイート 10
.@hidekiy こんにちは http://t.co/lXSzWMsoPS にてページの日付情報を表示するユーザースクリプトを公開しています。クロスドメインなフィード取得時に https://t.co/WT8llvTF3B を通す処理を加えたいのですが使ってよろしいでしょうか?
ツイート 11
あれ? ひょっとしてTampermonkeyって http:// からでも自動更新してくれるの? http://t.co/lXSzWMsoPS
ツイート 12
やっぱり更新してくれるんだ RT あれ? ひょっとしてTampermonkeyって http:// からでも自動更新してくれるの? http://t.co/lXSzWMsoPS
ツイート 13
さて、スクリプトのバグはほとんど取り除けたようなので、残るはボタンのCSSをどうするかだな サイト毎にスタイリングがまちまちなので、こっちでガチガチに固めるかどうか 本当ならUIのデフォルトスタイルがベストとは思っているんだけど… http://t.co/lXSzWMsoPS
ツイート 14
ひとまず完成…と言っていいかな?(でも言い切る自信ナシw) asamuzaK.jp : ページの日付情報を表示するユーザー・スクリプト PageDateInfo.user.js http://t.co/lXSzWMsoPS
ツイート 15
パネルの表示上の乱れはもうほとんどないんだけど、それでもいくつかのサイトでは崩される 直近ではこんな指定に崩されてたw body { text-align: center; } body * { text-align: left; } http://t.co/lXSzWMsoPS
ツイート 16
超古いIEでブロック要素をセンタリングさせようとする指定だったっけ? body { text-align: center; } body * { text-align: left; } http://t.co/fpu0DfN7qA
ツイート 17
あとH1要素がやはり崩されやすい 不本意だけど、H1だけは!importantでガチガチに固めるしかないかなぁ… 元のCSSで!importantが指定されていたりするんだもんなぁ http://t.co/fpu0DfN7qA
ツイート 18
ま、文書に介入している以上、崩されるのはやむを得ないというか、対策してもキリが無くていたちごっこになるわけだけど… http://t.co/fpu0DfN7qA
ツイート 19
もっとも今のところどなたも使っている形跡がないので、躍起になってアップデートしたところで誰にも関係ないという…orz でも使い出すと案外便利よw(ボソッ http://t.co/lXSzWMsoPS
ツイート 20
久しぶりにスクリプトを更新 Chromeが38になったのに伴い、Chrome用のバグ対策処理を削除 asamuzaK.jp : ページの日付情報を表示するユーザー・スクリプト PageDateInfo.user.js http://t.co/Vd4A0wrvnP
ツイート 21
setZeroTimeoutをここでも利用するようにした / ページの日付情報を表示するユーザー・スクリプト PageDateInfo.user.js http://t.co/Vd4A0wrvnP
ツイート 22
久々に更新。関数を一部整理 asamuzaK.jp : ページの日付情報を表示するユーザー・スクリプト PageDateInfo.user.js ~ ウェブページのメタデータやフィードなどから、作成日・公開日・更新日の情報を抽出・表示 http://t.co/fpu0DfMz40
ツイート 23
Chrome43の実装変更(DOMの属性がJSのプロトタイプチェーンに移行)で影響がないか、チェックしてみたけど大丈夫だった http://t.co/fpu0DfMz40
ツイート 24
自作のグリモンを試しにGitHubで維持・管理するようにしてみた http://t.co/fpu0DfMz40 http://t.co/b65IUFcuwa