Twitter 縦書き intent

使ってみると効果は一目瞭然ですが、そんなにいいものでもありません。句点で次の行とかにしたほうが、よさそうです。

※ Twitter は文字数に限りがあるので、右側サイドの空白除去処理を行っています。

いろいろやりながら、いくらかオプションが増えました。

(クリックしてもすぐに投稿されずに縦書きがセットされた投稿画面が開きます)
1行目は横書きにする
改行は自分で入れる
URL(省略可)

Web Intents なんで、ボタンをクリックすると正規の投稿ウインドウに移動します。そして、その際に縦書きとして文字がセットされています。


▼ ブラウザのフォントを固定ピッチにすると綺麗に縦書きになります( Chrome なら ２番目の Seirf )

Twitter 縦書き intent やズ特のＪと はレ殊コａり りてな｜ｖあ 。し文ドａえ 　ま字をＳず 　いを作ｃ： 　ま使成ｒ： 　すうしｉ、 　。とまｐ縦 　　　しｔ書 　　　た　き 　　　が　用 　　　、　の http://t.co/kZ7meGem0T

— night wálker (@sworc) 2013, 12月 26

Google Chrome の フォント設定の３番目の Sans Serif フォントを固定ピッチにすると綺麗に縦書きを見る事ができます。



関連する記事

簡易縦書き変換

選択文字列を Twitter の投稿画面に遷移させるブックマークレットの内容の解説

▼ JavaScript のみで書けるので、誰でも設置してカスタマイズできます

<script type="text/javascript">
function tweet_tate() {
	var enc = encodeURIComponent;
	var url = "https://twitter.com/intent/tweet?text=";
	var url2 = document.getElementById("url").value;
	var text = document.getElementById("tweet_tate").value;
	var top = 0;
	if ( document.getElementById("h1").checked ) {
		top = text.split("\n")[0];
		text = text.substr(top.length);
	}
	text = to_zen(text);
	text = text.replace(/ /g, "　");
	text = text.replace(/[”“]/g, "＝");
	text = text.replace(/[�W]/g, "＝");
	text = text.replace(/[（【［｛『《≪]/g, "▼");
	text = text.replace(/[）】］｝』》≫]/g, "▲");
	text = text.replace(/「/g, "▼");
	text = text.replace(/」/g, "▲");
	text = text.replace(/…/g, "：");
	text = text.replace(/[ー〜−]/g, "｜");
	if ( !document.getElementById("nocr").checked ) {
		text = cr_set(text,parseInt(document.getElementById("rnum").value));
	}
	text = tate(text);
	text = text.replace(/[　]+\n/g, "\n");
	text = text.replace(/[　]+$/g, "");
	if ( !document.getElementById("h1").checked ) {
		url += enc(text);
	}
	else {
		url += enc(top+"\n\n"+text);
	}

	var width = 550;
	var height = 420;
	var option = "scrollbars=yes,resizable=yes,toolbar=no,location=yes";
	var left = Math.round((screen.width / 2) - (width / 2));
	var top = Math.round((screen.height / 2) - (height / 2));
	option += ',width='+width+',height='+height+',left='+left+',top='+top;
	if ( url2 != '' ) {
		window.open(url+enc("\n\n")+'&url='+enc(url2),'intent',option);
	}
	else {
		window.open(url,'intent',option);
	}
}
function tate(text) {
	var i = 0;
	var j = 0;
	var wk = text;

	var bk = wk.split("\n");

	var len = 0;
	for( i = 0; i < bk.length; i++ ) {
		if ( bk[i].length > len ) {
			len = bk[i].length;
		}
	}

	var sp = "";
	for( i = 0; i < len; i++ ) {
		sp += "　";
	}

	for( i = 0; i < bk.length; i++ ) {
		bk[i] += sp;
		bk[i] = bk[i].substr(0, len);
	}

	var str = ""
	
	for( i = 0; i < len; i++ ) {
		if ( i != 0 ) {
			str += "\n";
		}
		for( j = bk.length-1; j >= 0; j-- ) {
			if ( j == 0 && bk[j].substr(i,1) == '　' ) {
			}
			else {
				str += bk[j].substr(i,1);
			}
		}
	}
	return str;
}
function to_zen(str) {
	return str.replace(/[\!-\~]/g, function(s) {
		return String.fromCharCode(s.charCodeAt(0) + 0xFEE0);
	});
}
function cr_set(text,ccnt) {
	var str = text;
	str = str.replace(/[\n]/g,"");
	var num = str.length;
	var i,ch,work,cr_cnt;
	var cr_num = ccnt;

	if ( cr_num > 0 ) {
		work = "";
		cr_cnt = 0;
		for( i = 0; i < num; i++ ) {
			ch = str.substr(i,1);
			if ( ((cr_cnt+1) % cr_num) == 0 ) {
				work += ch + "\n";
				cr_cnt = 0;
			}
			else {
				work += ch;
				cr_cnt++;
			}
		}
		if ( work.substr( 0, 1 ) == "\n" ) {
			work = work.replace(/[\n]/,"");
		}
		return work;
	}
}
</script>
<textarea id="tweet_tate" style='width:500px;height:200px;'></textarea>
<br>
<input type="button" value="Twitter 縦書き発言" onclick='tweet_tate();'>(クリックしてもすぐに投稿されずに縦書きがセットされた投稿画面が開きます)
<br>
1行目は横書きにする <input type="checkbox" id="h1" checked>
<br>
一行の文字数 <input type="text" id="rnum" value="10" style='width:40px'>
<br>
改行は自分で入れる <input type="checkbox" id="nocr">
<br>
URL(省略可) <input type="text" id="url" style='width:420px;'>

JavaScript コンテンツ

jQuery の ajax でアクセス可能なデータをボタンをクリックした後 window.open で開いたウインドウの中にテキストエリアを作成して表示する方法

IFRAME を ブラウザのサイズ変更時のイベントでコントロールして、HTML5で廃止された FRAME と同様に使うサンプル

JavaScript : DIV 内に時間範囲のボックスを表示する処理

jQuery/JavaScript : 存在しない可能性のある画像の代替表示

JavaScript による、時間範囲の表現( 出退勤等 )

JavaScript : HTML 特殊文字を書き出すコード( ツール )

スマホでYouTubeの埋め込みの表示サイズをJavaScriptでコントロールする

IFRAME で埋め込んだ外部コンテンツから情報を取得する事ができる postMessage インターフェイス

WEB フォントを使った「フェードイン、フェードアウト」

JS : テキストエリア内の選択文字列の置き換え

IE限定、ローカルファイル参照フィールドを使ったトリック