既読としてマーク：Twitter、VK、LiveJournal、Facebook ...

I.問題は何ですか。

メールボックス、プライベートメッセージの受信トレイ、RSS-これらすべてが1つの利便性を兼ね備えています。既読メッセージと未読メッセージの明確な分離です。 ただし、少なくとも最も一般的なブログやソーシャルネットワークでは、このオプションはほとんどの場合提供されていません。 残念なことに、ユーザーにRSSフィードを提供しないのはこれらのリソースです。

読んだことやまだ読んでいないことを思い出すのはそれほど難しくないようです。 しかし、非常に動的なフィードや1つのトピックの活発な議論をフォローする場合、すぐにそれを把握するのはそれほど簡単ではない場合があります。 そして、あなたがこれをすでに読んだことを理解するためだけに、最初の1つか2つの文を常に黙って読むことは、それほど楽しく無害な職業ではありません。

以前はこの方法を使用していました。Webサイトのスタイルの上にカスタムスタイルを割り当てます。これにより、訪問したリンクがより明確に強調されます。 次の読書の終わりに、最後の（通常は一番上の）投稿を個別に開いたので、その投稿へのリンクがブラウザーの履歴に含まれるようになりました。 その後、最初のそのような既読投稿へのリンクは、古いメッセージと新しいメッセージの分岐点となりました。 ただし、これはまだあまり視覚的な方法ではありません。

もちろん、お気に入りのブラウザーの拡張機能全体を作成することも、一般的な拡張機能の1つにcなユーザースクリプトを作成することもできますが、簡単でクロスブラウザーの方法を見つけたいと思いました。 そこで、次のアイデアが生まれました。 私はプログラマーではないので、既成のエレガントなソリューションを提供するようにタスクを設定することはありません。また、私のメソッドは原則として扱いにくく、おそらく実装がいことを理解しています。 したがって、説明のタスクは次のようになります。

1.問題自体について話し合います。 おそらく、根本的に異なる方法が長い間知られており、よりシンプルで、より信頼性が高く、より美しいものです。 つまり、私は開いたドアを突破して自転車を発明します。 それらを共有してください。

2.現在の実装の機能について一緒に考えます。 おそらく、この方法は大小さまざまに改善できます。 しかし、それは非常に小さく、おそらく必要ではありません。エンジンやライブラリを開発していません。

つまり、これらはすべて非常に大まかなアイデアです。

II。 一般的な用語でのソリューション。

比較的理想的な「オーバーレイ」方法は次のようになります。テープは、一定の一意の識別子を持つ同種の下位要素で構成されます。 最後に読んだ投稿を示すブックマークレットを作成し、それとそれに続くすべての古い投稿を視覚的にマークし、最後に読んだ投稿の識別子を記憶し、その後、そこから境界線を復元します。

しかし、ここでいくつかの問題に遭遇します。

1.すべてのユーザーのテープの構造が常に同じ構造であるとは限りません。
2.投稿が必ずしも同種の従属要素であるとは限りません。
3.彼らは常に古典的な識別子を持っているわけではありません。
4.読書の最初から常に現在のページにあるとは限らないため、すでに一度読んだ投稿があります。
5.一部のサイトは、現在最も便利なクロスブラウザー情報ストレージツールに積極的に調整されています。

これらの問題の例は、さらなる説明の過程で与えられます。 しかし、最初に、最も楽観的なオプションの実装を最初の近似で想像してみましょう。

見出しに記載されている4つのネットワーク（診断を複雑にするためにリストされている）の評価は、メッセージ自体の中のこれらのメッセージへのリンクによって、メッセージ識別子の欠如を補うことができることを示しています：これらのリンクは、定義上、一意で一定です。 これは、サンプル（赤で下線が引かれている）として取得されたネットワーク内で隠れている場所です。

Twitter



VK



ライブジャーナル



フェイスブック



ブックマークレットのスクリプトを目的のリンクに向けるために、スクリプトを起動する直前に、マウスでリンクの一部を選択します（カーソル/フォーカスがリンク内に残るようにします）。 このスクリプトは、将来のためにlocalStorageのリンクアドレスを記憶し、要素のチェーンをポストのメインコンテナーに移動して、特別なクラスを割り当てます。 スクリプトは、このクラスと後続のすべての下位要素のスタイルを作成し、読み取りセグメント全体が、たとえば特別な色で強調表示されるようにします。

ページで何も強調表示されていない場合、スクリプトは休憩後に読み始めていると考えているため、すぐにlocalStorageにアクセスし、以前に読んだ投稿へのリンクを抽出して見つけようとし、最上部のコンテナーとスタイル付きのすべての操作へのパスを繰り返します。

スクリプトは、失敗の可能性のある結果に関するメッセージとともに少なくとも3つのチェックを実行する必要があります。開いているページが、スクリプトが設計されたサイトであり、localStorageに適切な部門があるサイトであるかどうか。 ユーザーが正しいリンクを選択したかどうか（または選択が誤って境界を越えたかどうか）。 ユーザーが何も選択しなかった場合、ページに以前に読んだ投稿がありますか。

近い将来、 親セレクターがある場合、localStorageをまったく扱う必要はありませんが、表示されたリンクのgreat祖父のチェーンに沿ってスタイルを作成します（もちろん、 表示されたリンクのスタイル制限が親と祖父母に対してさらに厳しくなる場合を除きます） ） 確かに、最後の投稿を個別に開く必要があるので、彼は歴史に入ります。

III。 分析されたサイトのプライベート機能

Twitter

ここでは、テープの構造が幸運でした（ツイートは均質で従属的です）。 しかし、無限のスクロールを伴う少量のツイートの原則により、休憩の前に読んだ投稿が物理的に表示されるまで、ページを数回下にスクロールしなければならない場合があります。 ただし、ブックマークレットで「終了」キーを数回押すことは、それほど面倒な作業ではありません。 VKとFacebookについても同じ問題が続きます。読み取りセグメントがフィードの奥深くに到達した場合、スクリプトは境界線をマークする前に最後の投稿が見つからなかったことを何度か通知します。

VK

ここでの構造はすべて整然としていますが、小さな警告があります：急いでいるとき、他の誰かの元の投稿へのリンクを壁の再投稿へのリンクと混同するのは簡単です（2番目のタイプのリンクが必要です）-両方の種類は投稿内にあり、非常に似ています。 投稿自体へのリンクとコメントも同様です。 スクリプトは、ユーザーがこれらすべてのリンクを混同していないかどうかを確認しようとしています。 現在、スクリプトは壁の投稿とニュース用に設計されています。

ライブジャーナル

ここでは、さまざまなユーザーからのさまざまなフレンドリボンの構造に直面しています。 どうにかしてすべてを統一するために、モバイルフィードを基礎とします。モバイルフィードはすべての人に同じ構造を持っているためです（上のスクリーンショットでは、そのようなフィードの投稿へのタイトルリンクが表示されています）。 同時に、いくつかのスクロールの必要性は、前のページのいくつかのダウンロードの必要性に置き換えられます。 しかし、これで機能が終了するわけではありません。フィード内のすべての投稿が同等に従属するわけではありません。1日の投稿のグループは別のコンテナーに囲まれているためです。 したがって、スクリプトは読み取りセグメント全体を最後までマークするのではなく、最後の読み取りと同じ日の投稿のみをマークできます。

フェイスブック

最も問題のあるオプション。 投稿には非常に複雑な送信システムがあり、いくつかの動的なコンテナに分散されており、読み取り不可能なクラスの複雑なシステムがあります。 したがって、タブを閉じたりリロードしたりせずにテープを長時間読み取らない限り、読み取りの色のハイライトの均一性を常に達成できるとは限りません。 さらに、サイトはlocalStorageの奇妙な処理によって区別されます：時々、サイトのスクリプトがリポジトリからサイトのセグメント全体を一掃するかのように、スクリプトの記録がそこから消えます。 さらに、ユーザーが購読している友人や雑誌を最も細かく追跡することで、他の投稿の友人のコメントに関するメッセージがフィードに送信され、これらのメッセージは単一のキーリンクを維持しながらフィードを常に上に移動でき、投稿とメカニズムのシーケンスを破壊します追跡。 したがって、このような投稿では、最後のコメントへのリンクを強調表示することをお勧めします（残念ながら、すべてのXPathは投稿自体へのリンクで機能します）。

別の小さな一般的な警告：ほとんどのネットワークで必要なリンクの表示テキストは、経過時間に合わせて1分間に1回自動的に更新されるため、ブックマークレットをクリックする前に選択が飛んでしまうことがあります-結局、リンクを更新すると、新しいインターフェイス要素になります; この失敗は害を与えません。スクリプトはlocalStorageのデータに従って以前の読み取り投稿をマークし直すだけで（何も選択しなかったかのように）、リンクを再度選択してブックマークを再度クリックするだけです。

IV。 実装。

理論的には、比較的新しいとはいえ標準的なツールが使用されているため、ブラウザのすべての最新バージョンで動作するはずです。 不器用なアマチュアのコードをおaびします。

読み取り可能なオプション：

javascript:(function(xpaths, doc, hst, stl, sel, lnks, i, a_lnk, the_lnk, post) { xpaths = { 'twitter.com': { 'lnk': './ancestor-or-self::a[contains(@class, "tweet-timestamp") or contains(@class, "details")]', 'post': './ancestor::li[contains(@class, "stream-item")]' }, 'vk.com': { 'lnk': './ancestor-or-self::a[descendant::span[contains(@class, "rel_date")] and not(contains(@class, "wd_lnk"))]', 'post': './ancestor::div[contains(@class, "feed_row") or contains(@class, "post") and not(@id="page_wall_posts")]' }, 'm.livejournal.com': { 'lnk': './ancestor-or-self::a[ancestor::h3[contains(@class, "item-header")]]', 'post': './ancestor::li[contains(@class, "post-list-item")]' }, 'www.facebook.com': { 'lnk': './ancestor-or-self::a[descendant::abbr[@data-utime]]', 'post': './ancestor::div[contains(@class, "_5jmm") and contains(@class, "_5pat") and contains(@class, "_5uch")]' } }; doc = document; hst = doc.location.hostname; if(xpaths[hst]) { if(!doc.querySelector('style#usernameReadPost')) { stl = doc.querySelector('head').appendChild(doc.createElement('style')); stl.id = 'usernameReadPost'; stl.innerHTML = '.usernameReadPost, .usernameReadPost ~ * {background-color: silver !important;}'; } sel = doc.getSelection(); if(sel.isCollapsed) { lnks = doc.querySelectorAll('a[href$="' + localStorage.getItem('usernameReadPost') + '"]'); for (i = 0, a_lnk; a_lnk = lnks[i]; i++) { the_lnk = doc.evaluate(xpaths[hst].lnk, a_lnk, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; if(the_lnk) { post = doc.evaluate(xpaths[hst].post, the_lnk, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; break; } } if(post) { post.className += ' usernameReadPost'; } else { alert('Read post not found.'); } } else { the_lnk = doc.evaluate(xpaths[hst].lnk, sel.focusNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; if(the_lnk) { post = doc.evaluate(xpaths[hst].post, the_lnk, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue; post.className += ' usernameReadPost'; localStorage.setItem('usernameReadPost', the_lnk.getAttribute('href')); } else { alert('Wrong link.'); } } } else { alert('Wrong hostname.'); } })() 

短縮版：

書式設定スペースと改行が削除されたバージョン（Firefoxでは、ブックマークにドラッグするだけで、名前を読みやすいものに置き換えることができます。この制限は、IEの最新バージョンでまだ有効な場合、2キロバイトに収まります）。

 javascript:(function(xpaths,doc,hst,stl,sel,lnks,i,a_lnk,the_lnk,post){xpaths={'twitter.com':{'lnk':'./ancestor-or-self::a[contains(@class,"tweet-timestamp")or contains(@class,"details")]','post':'./ancestor::li[contains(@class,"stream-item")]'},'vk.com':{'lnk':'./ancestor-or-self::a[descendant::span[contains(@class,"rel_date")]and not(contains(@class,"wd_lnk"))]','post':'./ancestor::div[contains(@class,"feed_row")or contains(@class,"post")and not(@id="page_wall_posts")]'},'m.livejournal.com':{'lnk':'./ancestor-or-self::a[ancestor::h3[contains(@class,"item-header")]]','post':'./ancestor::li[contains(@class,"post-list-item")]'},'www.facebook.com':{'lnk':'./ancestor-or-self::a[descendant::abbr[@data-utime]]','post':'./ancestor::div[contains(@class,"_5jmm")and contains(@class,"_5pat")and contains(@class,"_5uch")]'}};doc=document;hst=doc.location.hostname;if(xpaths[hst]){if(!doc.querySelector('style#usernameReadPost')){stl=doc.querySelector('head').appendChild(doc.createElement('style'));stl.id='usernameReadPost';stl.innerHTML='.usernameReadPost,.usernameReadPost~*{background-color:silver !important;}';}sel=doc.getSelection();if(sel.isCollapsed){lnks=doc.querySelectorAll('a[href$="'+localStorage.getItem('usernameReadPost')+'"]');for(i=0,a_lnk;a_lnk=lnks[i];i++){the_lnk=doc.evaluate(xpaths[hst].lnk,a_lnk,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue;if(the_lnk){post=doc.evaluate(xpaths[hst].post,the_lnk,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue;break;}}if(post){post.className+=' usernameReadPost';}else{alert('Read post not found.');}}else{the_lnk=doc.evaluate(xpaths[hst].lnk,sel.focusNode,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue;if(the_lnk){post=doc.evaluate(xpaths[hst].post,the_lnk,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue;post.className+=' usernameReadPost';localStorage.setItem('usernameReadPost',the_lnk.getAttribute('href'));}else{alert('Wrong link.');}}}else{alert('Wrong hostname.');}})() 

完成したリンクをここからドラッグすることもできます （同じ投稿がこの投稿にあります）。

コードの簡単な説明

必要なすべてのサイトに1つのブックマークレットを使用できるように、まず、2つの必要な要素（投稿へのリンクと投稿の一番上のコンテナー）のXPathパスデータベースを作成します。 パスの特別な扱いやすさと奇妙さは、少なくとも2つの理由が原因です。リンクが選択されると、フォーカス要素がリンク自体になり、その下位要素、最後のテキストノードになることがよくあります。 リンクとコンテナには常にタグ名とクラスの一意の組み合わせがあるわけではなく、包含要素または従属要素のパラメータを接続する必要があります。

まず、スクリプトはページが目的のサイトに属しているかどうかをチェックします。 一致する場合、目的のスタイルが作成されます（同じページでスクリプトを実行してまだ作成されていない場合）。今のところ、すべては単純で、読んだものを灰色でマークするだけです。

次に、スクリプトは、ページにユーザーが選択したセクションがあるかどうかを確認します。 そうでない場合、これはブレーク後のページの最初の読み取りなので、古い境界線を復元することから開始する必要があります：スクリプトは、指定されたXPathに一致するすべてのリンクを反復処理し、localStorageから保存されたアドレスと比較します。 必要なリンクが見つかると、それが投稿全体の一番上のコンテナのXPath検索の開始点になります。 リンクと投稿の両方が見つかった場合、クラスが追加され、スタイルが適用されます。 それ以外の場合、ユーザーはページをスクロールするか、フィードの他のページを深く読み込む必要があることを通知されます。

ページにセグメント選択がある場合、スクリプトは選択が終了する要素をチェックします。 これが目的のリンクである場合、投稿の検索とマーキングの操作が繰り返され、リンクアドレスがlocalStorageに配置されます。 これがリンクではない場合（またはユーザーが選択の終わりを逃した場合）、これに関するメッセージが表示されます。

希望する人は、変数の名前をさらに削減し、一意性のためにニックネームに応じて読み取り投稿のキークラスのスタブ名と追加スタイルの識別子を置き換え、LiveJournalでモバイルリボンを使用することを拒否し、リボンの構造に合わせてパラメーターを調整できます（大幅な改善は言うまでもありません（たとえば、イベントハンドラーを強調表示するリンクをページに添付して、連続読み取り中にブックマークレットをクリックする必要がなく、自動的に更新されるようにすることができます。 拡張可能なテープ）。

---

改善に値する方法を誰かが見つけたら、コメントでアイデアとコードを共有できます。 ブラウザの追加、修正、サポート情報に感謝します（Firefoxの最新のナイトリービルドでのみ自分でテストしました）。