ソーシャルてんこ盛りのスマホ版ブックマークレットを作りましたー!

ソーシャルてんこ盛り for smart phone!
Android でも iPhone でもね!

こちらより新しいバージョンがありますのでソーシャルてんこ盛りの一覧からお探しください。

ソーシャルてんこ盛り!

ソーシャルてんこ盛り for smart phone!

ソーシャルてんこ盛りのスマホ用ブックマークレットです!スマホからブックマークしたりツイートしたりそのサイトでツイートされている内容をササっと確認するのに便利だと思います!

ブックマークレットが何か分からない方は Chrome で使える便利なブックマークレット!2011年 11月ブックマークレットとは?ブックマークレットを使うメリット! の項を合わせて見てみてください!

ご利用上の注意点!

とりあえず webkit 系のブラウザで使える様にとしか考えていません。iPhone なら Safari だし、Android なら標準のブラウザです! Android なら webkit 系のブラウザは他にもたくさんあると思います。iPhone は全く分かりませんw

ソーシャルてんこ盛り for smart phone! を使うと見てる画面、全面に表示されます。PC 版の様に画面の一部分に表示される訳ではありません。あとこれはわたしの力不足が原因なのですが ソーシャルてんこ盛り for smart phone! を閉じた後に画面の拡大縮小が効かなくなります。※スマホ用表示されているサイトは関係ないと思います。

サイトによっては、各ソーシャルボタンが正常に読み込めない、ツイートが表示されない、レイアウトが崩れるなどの問題があるかと思います。あと、あらかじめブラウザで各サーシャルサービスにログインしていないとツイートしたりいいね!したり出来ないと思います。

※追記 iPhone でも使えたと教えていただけました。

不具合がありましたら、お使いの機種、不具合の起ったサイトのURL と内容を @actywav まで飛ばしていただけたらと思います!欲を言えばスクリーンショットがあると助かります。

使ってみてください!

PC 版と同じでカラーはブルー、グレー、ピンクの3色です!機能面はPC版の物と一緒なので ソーシャル系サービスを複数もりこんだブックマークレットを作りましたー! の記事を参照してください!

ブルーのコード

グレーのコード

ピンクのコード

お好きなカラーのコードをコピーしてブラウザのブックマークに登録してください!

Android での登録方法!

iPhone の方すみません! iPhone での登録方法はここでは説明していません。iPhone でブックマークレットの登録を説明している他の方のブログを参照願いします。

Android 標準のブラウザ

Android の標準のブラウザはこの地球っぽいアイコンのアプリです!まずこのアプリを起動します〜!

標準のブラウザ

URL はどこでも良いんですけど、ここでは actyway を開いた状態で話をすすめます〜w actyway を開いた状態でブラウザのアドレスバーの右隣にブックマークのボタンがありますのでそれを押します!

標準ブラウザのブックマークの画面

そうするとブックマークの画面が開きますので左上の「★追加」のアイコンを押します!

ブックマーク登録画面

ブックマーク登録の画面になりますので〜、タイトルに「ソーシャルてんこ盛り」とかお好きなように入力し、URLには上でコピーしたブックマークレットのコードを貼付けます〜!で、OKボタンを押すとブックマークレットの登録は完了します〜w

ブックマークの画面

登録されると「ソーシャルて」で文字が切れてしまっていますがこんな感じのアイコンが表示されると思います!ブックマークレットなのでサムネイル部分は暗い地球の絵になっていると思います。

それではさっそく使ってみてください!今の部分を押すだけです。

ソーシャルてんこ盛り for smart phone!

こんな感じで表示されたら正常に動作しています〜!

もし、表示されないようでしたらURLへのペーストが正しく出来ていないなどの理由が考えられますので、もう1度チェックしてみてください。

ちなみに Android の標準ブラウザでは、入力欄を長押ししていればポップアップで「テキスト編集」のメニューが表示されますので、コピーなり貼り付けなり選ぶと簡単に行えます。

外部ファイルの内容!

今回も外部ファイルを読み込みしていますのでコードを貼付けておきます!
http://actyway.com/bookmarklet/tenkomori.1-b-smart.js
※外部ファイルのブルーの内容です

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
var bodysource = document.body.innerHTML,
bodywidth = screen.width,
url = location.href;
 
(function(){
	document.body.innerHTML = '';
	var metaviewport = document.createElement("meta");
	with(metaviewport){
		name="viewport";
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no";
	}
	document.getElementsByTagName("head")[0].appendChild(metaviewport);
 
	setTimeout(function(){
		document.body.style.width = screen.width+'px';
		window.scroll(0,0);
 
		var tenkomori = document.createElement('div');
		tenkomori.id = 'tenkomori';
		tenkomori.innerHTML += '<div id="tenkomori_fixed">'+
 
		/* 閉じる */
		'<div onclick="closeTenkomori();" style="margin:10px;padding:5px;border:solid 5px #009fff;border-radius:5px;background:white;color:#6f6f6f;text-align:center;font-size:14px;-webkit-box-shadow:#afafaf 1px 1px 2px;">閉じる</div>'+
		'<div style="text-align:center;padding:0 0 5px 0;font-size:12px;">'+
 
		/* hatebu */
		'<a href="http://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none;" /></a> '+
 
		/* twitter */
		'<a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-lang="en">ツイート</a> '+
 
		/* facebook */
		'<iframe src="//www.facebook.com/plugins/like.php?href='+encodeURIComponent(url)+'&amp;send=false&amp;layout=box_count&amp;width=50&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;height=66" scrolling="no" frameborder="0" style="border:none;overflow:hidden;height:66px;width:50px;" allowTransparency="true"></iframe> '+
 
		/* googleplus */
		'<iframe src="https://plusone.google.com/_/+1/fastbutton?url='+encodeURIComponent(url)+'&size=tall&count=true&annotation=&hl=ja&jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fwidget%2F__features__%2Frt%3Dj%2Fver%3DLhszhSYBOkM.ja.%2Fsv%3D1%2Fam%3D!C0fEz9_x4jKIpDHgug%2Fd%3D1%2F#id=I2_1322144783861&parent=http%3A%2F%2Factyway.com&rpctoken=292459405&_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe" scrolling="no" frameborder="0" style="border:none;overflow:hidden;height:60px;width:50px;" allowTransparency="true"></iframe> '+
 
		/* evernote */
		'<a href="#" onclick="Evernote.doClip({});return false;"><img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" width="36" height="60" /></a> '+
 
		/* tumblr. */
		'<a href="http://www.tumblr.com/share" title="Share on Tumblr"><img src="http://actyway.com/bookmarklet/tumblr.png" alt="Clip to Evernote" width="36" height="60" /></a>'+
		'</div></div>'+
		'<div id="tenkomori_tweets"></div>';
 
		var css = document.createElement('style');
		css.innerHTML += '*{font-family:sans-serif !important;white-space:normal !important;letter-spacing:normal !important;line-height:1.6 !important;}'+
		'body{overflow-x:hidden;margin:0 !important;padding:0 !important;}'+
		'#tenkomori img{vertical-align:baseline;}'+
		'#tenkomori_fixed{'+
		'position:absolute;'+
		'top:0;'+
		'left:0;'+
		'z-index:9999;'+
		'background:#d9efff url(http://actyway.com/bookmarklet/stripe.png);'+
		'width:100%;'+
		'}'+
		'#tenkomori_tweets{'+
		'position:absolute;'+
		'z-index:9998;'+
		'top:0;'+
		'left:0;'+
		'padding:150px 0 20px 0;'+
		'background:#d9efff url(http://actyway.com/bookmarklet/stripe.png);'+
		'width:100%;'+
		'text-align:left;'+
		'}'+
		'.t-partition{background-color:white;border-radius:3px;padding:7px 10px;margin:0 12px 15px 12px;-webkit-box-shadow:#afafaf 1px 1px 2px;overflow:hidden;}'+
		'.t-author{height:32px;margin:0 0 10px 0;line-height:16px;padding:0;font-size:10px;}'+
		'.t-author:after{content:"";display:block;clear:both;}'+
		'.t-photo_url{float:left;margin:0 7px 0 0;}'+
		'.t-nick{font-size:12px;color:#009fff;}'+
		'.t-content{font-size:15px;color:#6f6f6f;overflow:hidden;}'+
		'.t-date{color:#afafaf;font-size:10px;}'+
		'.t-more{text-align:center;}'+
		'iframe.twitter-share-button{height:62px !important;}';
 
		document.body.insertBefore(tenkomori,document.body.firstChild);
		document.body.insertBefore(css,document.body.firstChild);
 
		var hateb = document.createElement("script");
		hateb.src = "http://b.st-hatena.com/js/bookmark_button.js";
		document.body.appendChild(hateb);
 
		var tweet = document.createElement("script");
		tweet.src = "http://platform.twitter.com/widgets.js";
		document.body.appendChild(tweet);
 
		window.___gcfg = {lang: 'ja'};
		var po = document.createElement('script');
		po.type = 'text/javascript';
		po.async = true;
		po.src = 'https://apis.google.com/js/plusone.js';
		var s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(po,s);
 
		var evern = document.createElement("script");
		evern.src = "http://static.evernote.com/noteit.js";
		document.body.appendChild(evern);
 
		var tumblr = document.createElement("script");
		tumblr.src = "http://platform.tumblr.com/v1/share.js";
		document.body.appendChild(tumblr);
 
		if(typeof jQuery=='undefined'){
			var script = document.createElement('script');
			script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js";
			document.getElementsByTagName('head')[0].appendChild(script);
 
			var check = window.setInterval(function(){
				if (window['jQuery'] && window['jQuery']['fn'] && window['jQuery']['fn']['offset']){
					window.clearInterval(check);
					getTopsy();
				}
			},100);
		}else{
			getTopsy();
		}
		window.onresize = window.onscroll = function () {
			document.getElementById('tenkomori_fixed').style.left = window.pageXOffset + 'px';
			document.getElementById('tenkomori_fixed').style.top = window.pageYOffset + 'px';
		}
		window.onresize();
	},1000);
})();
 
function getTopsy(){
	jQuery.getJSON('http://otter.topsy.com/trackbacks.json?url='+ url +'&perpage=20&callback=?',function(j){
		if(!j.response.total) return false;
		var r = j.response,
		t = r.total,
		l = r.list.length,
		shaped = "";
		for(var i=0;i<l;i++){
			var topsy = r.list[i];
			shaped += '<div class="t-partition"><div class="t-author">'+
			'<a href="'+topsy.author.url+'" target="_blank" class="t-photo_url"><img src="'+topsy.author.photo_url+'" width="32" height="32" /></a>'+
			'<a href="'+topsy.author.url+'" target="_blank" class="t-nick">@'+topsy.author.nick+'</a><br />'+
			topsy.author.name+'</div>'+
			'<div class="t-content">'+topsy.content+' <a href="'+topsy.permalink_url+'" target="_blank" class="t-date">'+topsy.date_alpha+'</a></div></div>';
		}
		if(t>20) shaped += '<div class="t-more"><a href="'+r.topsy_trackback_url+'" target="_blank">More Tweets</a></div>';
		jQuery("#tenkomori_tweets").prepend(shaped);
	});
}
 
function closeTenkomori(){
	document.body.innerHTML = bodysource;
	document.body.style.width = bodywidth+'px';
	document.getElementsByTagName('head')[0].removeChild(document.getElementsByTagName('head')[0].lastChild);
}

内容的には前回のPC版をベースにしています!最初は表示されているソースを残しつつ前面にソーシャルてんこ盛りを表示しようとしていたのですが、CSS と JavaScript を駆使してもどうも思ったような挙動になってくれません〜;;(特に横幅が言うこと聞いてくれません><)

仕方がないので BODY タグの中身を消して画面の要素を取り除いた状態でソーシャルてんこ盛りを表示させ、閉じたタイミングで元のソースを戻すって感じでやっています。途中の setTimeout を使っているのは JavaScript が順番に実行されないみたいで強引にって感じです。これも主に横幅の問題です。

あとページによっては(きっと viewport の有無)position:fixed; が効かない!仕方ないので absolute で頑張っています。

ほぼひとりごと

PC版のブックマークレットがスマホから動いていたのを見て、これなら結構簡単にスマホ版も作れるのではないかなー?とやってみたのですが、ところがどっこい簡単にはいきませんでした〜ww やっぱり勝手が随分違いますねw

とりあえず公開してみなさんからのフィードバックいただいた方が早く良いものになると思って納得行っていない状態ですけど、公開することにしました!