ばーじょんいってんさーん！イメージは手抜きですｗ
おまたせ！てんこ盛り1.3だよ！
前回のバージョン1.2からかなり時間が空いてしまいましたが、1.3を公開します！
かなり機能追加しましたので変更点は多めです。
ちゃっかり大幅バージョンアップですねｗ
ソーシャルてんこ盛りを知らない人は こちら を、ブックマークレットが分からない人は こちら を見ていただけたら参考になるかもしれません！
変更点＆追加機能！
主に1.2と比較しながら説明していきます！
大きさが変わりました。幅も若干広くなりましたが、主に縦幅が広くなりました。ツイートが少し見やすくなったと思いますｗ
ボタンが増えました。Pinterest、Pocket、LINE の3種類が増えました。全部のボタンを横一列に並べてしまうと、すごく横幅が広くなってしまうので、カウント数が表示されない物はポップアップの中に隠しました。サークルをクリックで開閉します。
LINE は使った事ないですが、Pinterest も Pocket も良く出来たサービスだと思います。わたしはスマホから Pocket をすごく使っています、後からじっくり読みたい場合に便利ですよねｗ
タブが追加されました。1.3からはツイートの他に、はてなブックマーク、Google+ のコメントを表示出来るようになりました。
Facebookは、わたしが知る限り JavaScript で取得出来そうな API が無かったので、Yahoo!検索（リアルタイム）でURL検索して開くようにしています。手抜きですねｗ でもこれが一番無難かなーと。
Facebook、Google+ 共通ですが、いいね！ボタンや G+ ボタンが押されてカウントされていても、一般公開されていないとデータは表示されません。
Pinterest のタブも出来たら用意したいな、と考えたのですが少し前に調べた限りでは公式に API は無いみたいでした。公式での検索も、URL をそのまま検索しても適合率が悪いのか余計な情報ばっかり表示されるのでやめましたｗ
ボタンについて！
今回追加された Pinterest、Pocket、LINE のボタンの挙動をちょっと説明します。
LINE
まず LINE なんですが、これわたし一切確認していませんｗｗ 設置方法｜LINEで送るボタンの内容がしっかりしているので問題ないかなーと。PC側に LINE のアプリ入れていればアプリが起動してくるんだろうなー、と予測。適当すぎですよねｗ（間違っていればご指摘ください）
line://msg/<CONTENT TYPE>/<CONTENT KEY> |
LINE 公式の書式2の物をアンカータグの href 属性に。
旧 Read It Later ですね！Pocket は公式のブックマークレットと同じ挙動です。Pocket : How to Save の Bookmark Button のスクリプトを参考にさせていただきました。
javascript:(function(){var e=function(t,n,r,i,s){var o=[2073543,1240028,4316304,2601460,2013824,6374144,2959836,2634161,5660208,2962565];var i=i||0,u=0,n=n||[],r=r||0,s=s||0;var a={'a':97,'b':98,'c':99,'d':100,'e':101,'f':102,'g':103,'h':104,'i':105,'j':106,'k':107,'l':108,'m':109,'n':110,'o':111,'p':112,'q':113,'r':114,'s':115,'t':116,'u':117,'v':118,'w':119,'x':120,'y':121,'z':122,'A':65,'B':66,'C':67,'D':68,'E':69,'F':70,'G':71,'H':72,'I':73,'J':74,'K':75,'L':76,'M':77,'N':78,'O':79,'P':80,'Q':81,'R':82,'S':83,'T':84,'U':85,'V':86,'W':87,'X':88,'Y':89,'Z':90,'0':48,'1':49,'2':50,'3':51,'4':52,'5':53,'6':54,'7':55,'8':56,'9':57,'\/':47,':':58,'?':63,'=':61,'-':45,'_':95,'&':38,'$':36,'!':33,'.':46};if(!s||s==0){t=o[0]+t}for(var f=0;f<t.length;f++){var l=function(e,t){return a[e[t]]?a[e[t]]:e.charCodeAt(t)}(t,f);if(!l*1)l=3;var c=l*(o[i]+l*o[u%o.length]);n[r]=(n[r]?n[r]+c:c)+s+u;var p=c%(50*1);if(n[p]){var d=n[r];n[r]=n[p];n[p]=d}u+=c;r=r==50?0:r+1;i=i==o.length-1?0:i+1}if(s==237){var v='';for(var f=0;f<n.length;f++){v+=String.fromCharCode(n[f]%(25*1)+97)}o=function(){};return v+'e0b8ab270b'}else{return e(u+'',n,r,i,s+1)}};var t=document,n=t.location.href,r=t.title;var i=e(n);var s=t.createElement('script');s.type='text/javascript';s.src='https://getpocket.com/b/r4.js?h='+i+'&u='+encodeURIComponent(n)+'&t='+encodeURIComponent(r);e=i=function(){};var o=t.getElementsByTagName('head')[0]||t.documentElement;o.appendChild(s)})() |
一見なにをしてるか分かりにくいんですが、現在のURLと独自？変換したURLをサーバーに投げているみたいです。一致しないとエラーが出る、みたいなｗ
Pinterest、よく出来ていますよね！お洒落だしデザインも統一感あって！あとなんか運営サイドが良さそうな雰囲気を出してそうなｗ（勝手な印象ですがｗ）
Pinterest はボタンのタイプが何種類か選べて挙動も選べます。（Buttons and Widgets | Pinterest for Business でボタンのコードは公開されています。）ただ、カウント数表示ありの Pin it ボタンでその URL に含まれている画像一覧を表示して選択出来る物って無いですよね？
カウント数表示ありのボタンだとこんな感じでイメージは一覧から選択できず、イメージすら表示されません。（actywayで試しました＆actywayでは Pin it ボタンは導入していません）ソーシャルてんこ盛りで利用する場合も画像が表示されずこのままでは困ります。
カウント数の表示が無いボタンだと、こんな感じで一覧から選べるタイプもあります！って事で、ソーシャルてんこ盛りではカウント数を表示させつつ、一覧から選べるようになっています。何気に便利だと思います。
カラーが指定できる！
1.2までは3種類からしか選べなかったのですが、1.3からは色の指定が出来ます。
以前から用意したかったジェネレーターを作りました。わたし、根本的に明るめでポップな感じが好きです。ソーシャルてんこ盛りはどちらかと言うとポジティブなツールってイメージを持っています。
カラーピッカーから感覚で選ぶか、入力欄に直接16進数でカラーコードを打ち込むかしてください。（#+6桁、もしくは #+3桁でも可）
あとはブラウザのブックマークバーなどに、ボタン部分をドラッグすれば登録されます。
ソーシャルてんこ盛り1.3のジェネレーター
→ ソーシャルてんこ盛り
ただし、スペックの低いパソコンをお使いだと重いです！余計な JavaScript で要素動かしてたりしますｗ と言うのも個人の制作とは言えなかなかおもーい腰が上がらず、他の興味のある事を作る目的にプラスした為ですｗ あと IE は対応していません。そもそもソーシャルてんこ盛りがちゃんと動作しないと思います。（デザインを 100% 楽しみたいって奇特な方は Mac で Webkit 系のブラウザからお願いします。）
ブックマークレットを手動登録！
もしかしたら？ジェネレーター経由でブックマークレットが登録出来ない環境もあるかもしれませんので、コード部分を直接編集して色を指定しての登録方法を説明します。（ブックマークレットが何かを理解されている事前提）
javascript:(function(d){var s=d.createElement("script");s.charset="UTF-8";s.src="http://actyway.com/bookmarklet/tenkomori.1.2-b-min.js?"+(new Date()).getTime();d.body.appendChild(s)})(document); |
これは1.2のブックマークレットです。
javascript:(function(d){var s=d.createElement("script");s.charset="UTF-8";s.id="social-tenkomori";s.src="http://actyway.com/bookmarklet/tenkomori.1.3.min.js?color=fac900&"+(new Date()).getTime();d.body.appendChild(s)})(document); |
これは1.3のブックマークレットです。
1.2と1.3の主な差分は黒字の部分です。（見やすい様にタブと改行入れてますが本当は1行）
s.id="social-tenkomori"; |
ここでは script タグに id を指定しています。ここはあまり肝心ではありません。
color=fac900 |
この部分でカラーコードを指定しています。（#を含まないRGBの8桁のカラーコードです。）ここ（fac900）をお好きなカラーコードに変更するとブックマークレットの色味に反映されます。
javascript:(function(d){var s=d.createElement("script");s.charset="UTF-8";s.id="social-tenkomori";s.src="http://actyway.com/bookmarklet/tenkomori.1.3.min.js?color=ff0000&"+(new Date()).getTime();d.body.appendChild(s)})(document); |
例えば赤色（ff0000）だとこんな感じになります。
これは Chrome のブックマークマネージャです。ブックマークの名前欄に「てんこ盛り1.3」を、URL 欄には先程の赤のカラーコードを指定したブックマークレットを記入しています。ブラウザは違えど基本的な登録方法は一緒だと思います。
ブックマークレットの文法的に問題がなく、それでも動かない場合は、ブックマークレット部分を URL エンコードする必要があるかもしれません。「[お使いのブラウザ名] ブックマークレット登録方法」とかで検索するのが早いかもしれませんねｗ
1.3の動作環境！
Chrome、Safari（Webkit 系）に Firefox 以上です！
Opera は？？ IE は？？って思われました〜？
まず Opera なんですが、わたしの環境だと動きません。
これコンパクトにしていますが Opera で Dragonfly 開いています。バージョンは、12.14です。google.co.jp でソーシャルてんこ盛りの1.3を使ってみましたが、表示されませんでした。Dragonfly のエラーには「リンク先のスクリプトを読み込むことができません」と出ています。だけど、actyway.com 上で試すと問題なく表示されます。
憶測でしかもいつからかも不明ですが、ブックマークレット経由の外部ドメインのスクリプト読み込みがダメになったんじゃないでしょーか？ソーシャルてんこ盛りの1.2でも試してみましたがダメでした。Opera の以前のバージョンでは、ソーシャルてんこ盛り1.2は動いてたと思ったのですが、actyway.com 以外で試した記憶がありません＞＜ 結構前から外部ドメインのスクリプト読み込みはダメだったんでしょうか？
少し調べてみたのですが、特にそういった情報は見つける事が出来ませんでした。（そもそもわたしの大きな勘違いな可能性もあります）
次に IE ですが、ソーシャルてんこ盛り1.3から JavaScript の addEventListener を多用しています。あとそもそも対応する気がありません。もしかしたら IE9 か IE10 では動くかもしれません、未確認です。
残念なお知らせ！
ううううう、悲しい！
わたしの大好きな Topsy が有料化されたみたいです！！
ちょっと、かなしいって感覚とも違うのですが、なんでしょう〜？上手く表せませんねｗ 前までは無料で特に制限もなくツイートの取得は可能だったんですが、ちょっと前から事情は変わっているみたいです。わたしは最近までちゃんと把握出来てなかったのでした。
詳しくはこちらの「maruko2 Note.」さんにて詳しく書かれています！
→ Topsy Otter API – maruko2 Note.
それで今は、ソーシャルてんこ盛りの全てのバージョンは、「30-day Trial の 7,000calls/day」の方を使っています。正直ね、わたしもよく分からないんです、仕様が。現状把握してる内容は、API キーは何個でも発行できそう。その有効期限は発行日から30日間で、1日7000回までみたいなんだけど、カウントが1時間毎ぐらいでリセットされてる気がする。
って事で、様子見になります。今後どうなるかも不明だし。
ソーシャルてんこ盛りでツイート表示されない場合は、「あぁ、APIキーの期限が切れたんだ。」程度に思っておいてくださーい。対応出来る限りはします。また、わたしが気づいてなさそうでしたら教えていただけると助かりまーす。
Special Thanks！
今回のバージョン1.3、またはジェネレーターで使わせていただいてるアイテムをご紹介＆お礼！
Topsy – Instant social insight
バージョン1からずーっとお世話になっている Topsy の API。バージョン1.3からは G+ の取得にも使わせていただいています。ありがとうございまーす！m(__)mﾍﾟｺﾘ
これは便利！jQueryに依存せずに使えるgetJSON.jsを作ってみた | そぷログ
バージョン1.2から使わせていただいています「getJSON.js」です。ソーシャルてんこ盛りを軽量化するにあたり jQuery を使わない方法を探していた時にタイミングよく出会いがありました。@sophide0822さんは、最近話題になった iSoople | RSSを検索・登録できる”わたしだけのアンテナサイト” も運営されています。そぷさん、ありがとうございまーす！m(__)mﾍﾟｺﾘ
バージョン1の公開後に、@Nullyさんがこんな素敵なスクリプトをわざわざ書いてくださいました！もう1年以上も前の話ですｗ 今回、カラーの指定をするにあたって、少し改変させていただきましたがこのスクリプトを使わせていただいています！
var _actyQuery = (function(){ var s = document.getElementById("social-tenkomori").src.split("?")[1], query = {}, queries = s.split("&"), i = 0; if(!s) return null; for(i; i < queries.length; i ++) { var t = queries[i].split("="); query[t[0]] = t[1]; } return query; })(); var color = getSearchVar("color"), |
こんな感じで使わせていただいています。ソーシャルてんこ盛りはページに外部スクリプトを読み込んで実行していますので、location ではなく script の src から取得する様に変更させていただきましたｗ Nully さんは他にも、これまた素敵スクリプトなんですが サイト制作・管理をもっと楽に。｜Laquu.JS と言うjQuery のプラグインも配布されています。色々と楽になるラクー！Nullyさん、ありがとうございまーす！m(__)mﾍﾟｺﾘ
ソーシャルてんこ盛りのスクリプトの中では無いのですが、今回のジェネレーターのページの中でこちらの「Web Icon Fonts」を使わせていただいています。ありがとうございまーす！m(__)mﾍﾟｺﾘ
Farbtastic Color Picker — Acko.net
こちらもジェネレーターの中で「Farbtastic Color Picker」を使わせていただきました。ありがとうございまーす！m(__)mﾍﾟｺﾘ