また山に行きたくなる。山の記録を楽しく共有できる。

Yamareco

HOME > toshimizu7566さんのHP > 日記
2019年12月03日 00:18ヤマレコIT部全体に公開

ヤマレコマニア、ヤマレコ中毒な方に捧ぐ

 勝手にヤマレコIT部としての活動第3弾は、山行記録の拍手をいろいろ見えちゃうようにするユーザーJavascriptです。

 うちのような怪しいハイカーのレコや写真にも拍手をたくさん頂けるようになりまして有り難い限りです。しかしコト写真の拍手については(特に怪しい写真については💦)、総数が表示されるだけで、どなたに拍手して頂けたのかなかなか判りません(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
(下記のソースコードと同じものを上げてあります)

※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を無効・削除した状態でご確認のうえでお願いいたします。
訪問者数:537人
-
拍手

コメントを書く

ヤマレコにユーザー登録いただき、ログインしていただくことによって、コメントが書けるようになります。
ヤマレコにユーザ登録する

この日記へのコメント

登録日: 2018/10/17
投稿数: 1263
2019/12/3 0:23
 としみずさん、凄すぎます
早速、試したいところですが、明日、朝、早い💦 週末に導入チャレンジしてみます!
登録日: 2019/8/30
投稿数: 666
2019/12/3 5:28
 RE: ヤマレコマニア、ヤマレコ中毒な方に捧ぐ
としみずさん、おはようございます!

そうそう、この機能が欲しかったんですよね!

やっぱりね、考える事はみんな一緒?(笑)

デモね、決定的に私と違うのは、どうすれば見えるのかを考えて実行するところ!(笑)

そして、それをダーターでみんなと共有するところ!(笑)

ははっ、デモね、簡単に導入出来ますとか書かれていますが、全くのちんぷんかんぷんです!(笑)(´▽`;)ゞ

是非、ここから先はヤマレコさんに頑張ってもらってプレミアムプランDXとかで、商売に結び付けて頂きたい!(笑)(///∇///)
登録日: 2016/5/5
投稿数: 1737
2019/12/3 12:50
 Re: としみずさん、凄すぎます
 yasxyasさん、こんにちは〜

 うまくいったら教えてくださいませ〜
登録日: 2016/5/5
投稿数: 1737
2019/12/3 13:18
 RE: ヤマレコマニア、ヤマレコ中毒な方に捧ぐ
 nori3さん、こんにちは〜

 そもそもブラウザに「Firefoxを使っている」と言う時点でハードルが💦(PCで9%、モバイル機器では0.5%のシェアしかない)

 モバイル機器の場合は画面サイズも千差満別ですし、機能実装の際に、どこまで需要があってどこまで表示が必要か…ヤマレコの中の方も悩まれたのではと思いました。

 誰もが欲しい機能となれば、このあたりで要望をあげてみるとかとかで実現するかも(^_^;

○ヤマレコ:コミュニティ:カイゼン要望
 https://www.yamareco.com/modules/xsns/?p=topic&tid=23

※このページ、スマホでリンクで辿れなくて、Google先生に頼ってしまいましたあ💦
登録日: 2016/1/24
投稿数: 844
2019/12/3 17:39
 RE: ヤマレコマニア、ヤマレコ中毒な方に捧ぐ
こんばんは。
年寄りには難しくてよく分からんが、拍手が多いから凄いことなのだろう。目がくらくらするから、取り敢えず「拍手」。
登録日: 2016/5/5
投稿数: 1737
2019/12/3 20:41
 RE: ヤマレコマニア、ヤマレコ中毒な方に捧ぐ
 maasuke1さん、こんばんは〜

 うちも、まさかこれほど拍手があるとは!? ITガテンな方からみれば、この程度のステップ数なんて全然大したことない(エラーチェックも省略しまくり)なんですが、ヤマレコの仕組みの一端が垣間見られて面白かったです(^_^;;;

※ちなみにPCでヤマレコを見られている方は、ブラウザでF12を押すと。。。その裏側が見られます。
登録日: 2018/10/17
投稿数: 1263
2019/12/3 21:01
 RE: ヤマレコマニア、ヤマレコ中毒な方に捧ぐ
としみずさん、そのうち、ヤマレコ運営にスカウトされたりして😅 あ、むしろ、されて欲しい😎
登録日: 2016/5/5
投稿数: 1737
2019/12/5 14:30
 RE: ヤマレコマニア、ヤマレコ中毒な方に捧ぐ
 yasxyasさん、こんにちは〜

 知識が20年ぐらい古いので、最新のWebサイト作りはキビシーかなぁ(´・ω・`) ただ超ズボラなので、メンドクサイこと撲滅には燃えるタイプです💦


ページの先頭へ