|
|
|
うちのような怪しいハイカーのレコや写真にも拍手をたくさん頂けるようになりまして有り難い限りです。しかしコト写真の拍手については（特に怪しい写真については💦）、総数が表示されるだけで、どなたに拍手して頂けたのかなかなか判りません（PC版にして写真の詳細ページを見ればアイコンが表示されるものの…全部見るのはとても面倒ですよね） またレコ拍手欄・お気に入り欄でもマウスを載せないとお名前が表示されず、老眼＆小さい画面にはツラい仕様です(~_~)
そこで！ これら全部で、アイコン＋お名前が表示されるようにしよう！！
と言うのが今回のお題です。環境はこれまでと同様にパソコン上のブラウザ「Firefox」とアドオン「Greasemonkey」を想定しています(そのほかの環境やTampermonkeyでは試していません)。また今回はさらにAndroid版のFirefoxでも動作するように、スマホ版ヤマレコページにも対応してみました(これには思いの外苦労しました💦)。このスクリプトを導入しますと、
1) 関連付けの横(PC版)、編集メニュー選択の一番下(スマホ版)に「拍手の詳細表示」メニューが追加されます(写真1)
2) このメニューを押すと、以下のようになります。
・各写真の拍手数の下に、拍手した方のアイコンとお名前が追加表示(写真2)
・お気に入りのアイコンの横にお名前を追加表示(前回から増えた方にはNEWも追記)
・レコ拍手のアイコンの横にお名前を追加表示(前回から増えた方にはNEWも追記)(写真3)
3) メニューは一度しか押せません。
となります。スクリプトはちょっと長いです💦 すでにGreasemonkeyを導入している方は、下記のリンクをクリックすると同じものがインストール画面が表示されて簡単に導入できますよ〜。
http://www.nakoruru.mydns.jp/share/yamach/clap_detail.user.js
(追記2020/3/12)
表示方法が変更されたために、上記のスクリプトを修正しました。また[拍手の詳細表示]の場所を、右上の「新規作成」メニューの一番下に移しました。
※Greasemonkeyの導入については、最初の日記へどうぞ〜
○ヤマレコ日記：山岳ガイドに質問しない
https://www.yamareco.com/modules/diary/209519-detail-196774
-----(ソースコードここから、ちょい長いです)------------------------
// ==UserScript==
// @name ヤマレコ拍手の詳細表示
// @version 1.2
// @include https://www.yamareco.com/modules/yamareco/detail-*
// @grant none
// ==/UserScript==
window.onload=function() {
var el=document.createElement("li");
var ea=document.createElement("a");
ea.textContent="拍手の詳細表示";
ea.onclick=make_cheer_detail;
ea.setAttribute("class","ov");
el.appendChild(ea);
el.setAttribute("style","background-color:lime;");
var pe=document.getElementById("l_navi");
if (!pe) pe=document.getElementById("editmenu").parentNode;
pe=pe.getElementsByTagName("ul")[0];
pe.appendChild(el);
}
function make_cheer_detail() {
this.setAttribute("style","background-color:gray;");
var recid=document.URL.match(/detail-(\d+)\.html/)[1];
//------写真拍手-----
var ps=document.getElementById("Gallery1");
if (ps) {
ps=ps.getElementsByTagName("dd");
for(var i=0;i<ps.length;i++) {
var id=ps[i].getElementsByTagName("span")[0].getElementsByTagName("span")[0].getAttribute("id");
var pid=id.match(/^cheerimg_(.+)$/)[1];
var url="include/aj_getcheerstate.php?type=rec_photo&id="+pid;
get_ajax(url,ps[i],function(pe,d){
for(var i=0;i<d.usrcount;i++) {
var e=document.createElement("span");
e.innerHTML='<a href="https://www.yamareco.com/modules/yamareco/userinfo-'+d.usr[i].uid+'-prof.html"><img src="'+d.usr[i].avatar+'">'+d.usr[i].uname+'</a>';
pe.appendChild(e);
}
});
}
} else {
ps=document.getElementsByClassName("photo_area");
ps=ps[0].getElementsByClassName("item");
for(var i=0;i<ps.length;i++) {
var src=ps[i].getElementsByTagName("img")[0].getAttribute("src");
var pid=src.match(/\/upimg\/(\d+)\/(\d+)\/t_([\d\w]+)(\.\w+)/)[3];
var url="include/aj_getcheerstate.php?type=rec_photo&id="+pid;
get_ajax(url,ps[i],function(pe,d){
for(var i=0;i<d.usrcount;i++) {
var e=document.createElement("span");
e.innerHTML='<a href="https://www.yamareco.com/modules/yamareco/userinfo-'+d.usr[i].uid+'-prof.html"><img src="'+d.usr[i].avatar+'">'+d.usr[i].uname+'</a>';
pe.appendChild(e);
}
});
}
}
//------お気に入り拍手-----
var luids=[];
try { luids=JSON.parse((localStorage.getItem("FAV"+recid)));
} catch(e) { luids=[]; }
var url="include/aj_getfavorites.php?type=rec&avatar=1&id="+recid;
get_ajax(url,luids,function(luids,d){
var lis=document.getElementById("favorites");
lis.innerHTML=null;
var uids=[];
for(var i=0;i<d.length;i++) {
var e=document.createElement("span");
e.innerHTML='<a href="https://www.yamareco.com/modules/yamareco/showfavorite.php?uid='+d[i].uid+'" title="'+d[i].uname+'"><img src="'+d[i].avatar+'">'+d[i].uname+(is_exists(luids,d[i].uid)?"":" [new]")+'</a>';
lis.appendChild(e);
e=document.createElement("br");
lis.appendChild(e);
uids.push(d[i].uid);
}
localStorage.setItem("FAV"+recid,(JSON.stringify(uids)));
});
//------レコ拍手-----
var luids=[];
try { luids=JSON.parse((localStorage.getItem("REC"+recid)));
} catch(e) { luids=[]; }
var lis=document.getElementById("cheers").getElementsByTagName("a");
var uids=[];
for(var i=0;i<lis.length;i++) {
var eimg=lis[i].getElementsByTagName("img")[0];
var hrf=lis[i].getAttribute("href");
var uid=hrf.match(/userinfo-(\d+)-prof/);
if (uid[1]) { uids.push(uid[1]); }
var e=document.createElement("span");
e.textContent=eimg.getAttribute("title")+(is_exists(luids,uid[1])?"":" [new]");
eimg.parentNode.appendChild(e);
e=document.createElement("br");
eimg.parentNode.appendChild(e);
}
localStorage.setItem("REC"+recid,(JSON.stringify(uids)));
this.disabled=true;
}
function is_exists(a,x) {
if (a) for(var i=0;i<a.length;i++) if (a[i]==x) return 1;
return 0;
}
function get_ajax(url,pe,f) {
var req=new XMLHttpRequest();
req.onreadystatechange=function() {
if (req.readyState==4) if (req.status==200) {
var d=eval('('+req.responseText+')');
f(pe,d);
}}
req.open('GET',url,true);
req.send(null);
}
-----(ソースコードここまで)----------------------------------------
※あぁぁ、見やすくする字下げが勝手に削除されてしまう〜
※この手のネタにありがちな【お願い】
本スクリプトは無保証です。またヤマレコページについての疑問点・問合せをされる場合は、必ずスクリプトを無効化またはGreasemonkeyを無効・削除した状態でご確認のうえでお願いいたします。
早速、試したいところですが、明日、朝、早い💦 週末に導入チャレンジしてみます！
yasxyasさん、こんにちは〜
うまくいったら教えてくださいませ〜
としみずさん、おはようございます！
そうそう、この機能が欲しかったんですよね！
やっぱりね、考える事はみんな一緒？(笑)
デモね、決定的に私と違うのは、どうすれば見えるのかを考えて実行するところ！(笑)
そして、それをダーターでみんなと共有するところ！(笑)
ははっ、デモね、簡単に導入出来ますとか書かれていますが、全くのちんぷんかんぷんです！(笑)(´▽｀；)ゞ
是非、ここから先はヤマレコさんに頑張ってもらってプレミアムプランＤＸとかで、商売に結び付けて頂きたい！(笑)(///∇///)
nori3さん、こんにちは〜
そもそもブラウザに「Firefoxを使っている」と言う時点でハードルが💦（PCで9％、モバイル機器では0.5％のシェアしかない）
モバイル機器の場合は画面サイズも千差満別ですし、機能実装の際に、どこまで需要があってどこまで表示が必要か…ヤマレコの中の方も悩まれたのではと思いました。
誰もが欲しい機能となれば、このあたりで要望をあげてみるとかとかで実現するかも(^_^;
○ヤマレコ：コミュニティ：カイゼン要望
https://www.yamareco.com/modules/xsns/?p=topic&tid=23
※このページ、スマホでリンクで辿れなくて、Google先生に頼ってしまいましたあ💦
こんばんは。
年寄りには難しくてよく分からんが、拍手が多いから凄いことなのだろう。目がくらくらするから、取り敢えず「拍手」。
maasuke1さん、こんばんは〜
うちも、まさかこれほど拍手があるとは！？ ITガテンな方からみれば、この程度のステップ数なんて全然大したことない（エラーチェックも省略しまくり）なんですが、ヤマレコの仕組みの一端が垣間見られて面白かったです(^_^;;;
※ちなみにPCでヤマレコを見られている方は、ブラウザでF12を押すと。。。その裏側が見られます。
としみずさん、そのうち、ヤマレコ運営にスカウトされたりして😅 あ、むしろ、されて欲しい😎
yasxyasさん、こんにちは〜
知識が20年ぐらい古いので、最新のWebサイト作りはキビシーかなぁ(´･ω･`) ただ超ズボラなので、メンドクサイこと撲滅には燃えるタイプです💦
コメントを編集
いいねした人
コメントを書く
ヤマレコにユーザー登録いただき、ログインしていただくことによって、コメントが書けるようになります。ヤマレコにユーザ登録する