SQLの窓

2013年12月25日


Twitter 縦書き intent

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

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

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

(クリックしてもすぐに投稿されずに縦書きがセットされた投稿画面が開きます)
1行目は横書きにする
改行は自分で入れる
URL(省略可)
Web Intents なんで、ボタンをクリックすると正規の投稿ウインドウに移動します。そして、その際に縦書きとして文字がセットされています。


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

Google Chrome の フォント設定の3番目の 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;'>


posted by lightbox at 2013-12-25 00:12 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2012年08月05日


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

最近まで、YouTube で埋め込みコードを取得すると、OBJECT タグで埋め込まれていたようなのですが、今は IFRAME で取得できるようなので、この処理が可能です。

通常のブログですと、幅640で埋め込んでも特に問題無いですが、スマホで表示するとはみ出てしまいます。その対応処理です。

.text iframe とありますが、Seesaa のブログでは本文の class が text なので、その中の iframe に対して処理を行っています
<script type="text/javascript">
(function(){
	var str = "";
	var userAgent = window.navigator.userAgent.toLowerCase();
	if (userAgent.indexOf("iphone") > -1 || userAgent.indexOf("android") > -1 ) {
		str+="<style type=\"text/css\"> \n";
		str+=".text iframe { \n";
		str+="	width:290px!important; \n";
		str+="	height:auto!important; \n";
		str+="} \n";
		str+="</style> ";
		document.write(str);
	}
})();
</script>
<iframe width="640" height="480" src="http://www.youtube.com/embed/uxBFiU2N65c" frameborder="0" allowfullscreen></iframe>

iPhone



Android





posted by lightbox at 2012-08-05 01:18 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2011年08月20日


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

カラーピッカーのライブラリなのですが、ちょっと雑な作りだったので、修正してリリースです。
で紹介したカラーピッカーを http://toolbox.winofsql.jp/color_picker.htm としてホステ
ィングしました。通常ならば、この中で決定した色コードを取得する事はできませんが、
postMessage で親ウインドウに色コードを post するようにしたので、利用する場合は、
その受け取りコードを書くだけで利用可能です。


<script type="text/javascript">
function get_post_message(e) {
	var result = eval(e.data);
	alert(result.rgb + "," + result.hsv.h + "," + result.hsv.s + "," + result.hsv.v );
}
if ( window.addEventListener ) {
	window.addEventListener('message',get_post_message, false);
}
else {
	window.attachEvent('onmessage',get_post_message);
}

</script>
<iframe
	src="http://toolbox.winofsql.jp/color_picker.htm"
	name="myframe"
	frameborder="1"
	scrolling="no"
	width="340"
	height="390"
></iframe>
関連する記事

JS : クロスドメインの IFRAME からデータを JSON 形式で引き渡す


posted by lightbox at 2011-08-20 20:16 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2011年04月29日


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

IE8 以前で filter を使用すると、アンチエイリアスが無効になるバグがあったので
二つのエリアの切り替え方法を変更した IE8 以前専用の関数を追加しました。IE9 で
は必要無いと思いますが、ここでは IE の場合常にそちらを使用しています。

結果的に、IE8 以前用のコードのほうが使いやすくなっていますが、このような書き方
を CSS3 的に書こうとすると、コードが多くなってしまいますので、利用する時に考え
てどちらの方式を選ぶかどうか良く考えたほうがいいと思います。

a
A
いろいろ準備は必要ですが、いろいろな場面で使える可能性があります

WEB フォントの記述方法の考察
WEB フォントをクロスドメインで利用する
CSS3 + JavaScript(IEはFilter) : 「フェードイン、フェードアウト」制御
フリーフォント(WEBフォント)のダウンロード


<style media="screen" type="text/css">
@font-face {
	font-family:"tattooli";
	src: url("http://lightbox.on.coocan.jp/r205/font/tattooli.ttf") format("truetype");
}
</style>
<!--[if lte IE 9]>
<style type="text/css">
@font-face {
	font-family:"tattooli";
	src: url("http://lightbox.on.coocan.jp/r205/font/tattooli.eot");
}
</style>
<![endif]-->
<script type="text/javascript">
var a_counter = 3;
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
	a_counter = 2;
}
var font_chars = Array("",
"A","a","B","b","C","c","D","d","E","e",
"F","f","G","g","H","h","I","i","J","j",
"K","k","L","l","M","m","N","n","O","o",
"P","p","Q","q","R","r","S","s","T","t",
"U","u","V","v","W","w","X","x","Y","y",
"Z","z"
);
function a_start() {

	if (userAgent.indexOf("msie") > -1) {

		if ( a_counter % 2 == 1 ) {
			document.getElementById("a2").filters.blendTrans.Apply();
			document.getElementById("a2").style.visibility = "hidden";
			document.getElementById("a2").filters.blendTrans.Play();
		}
		else {
			document.getElementById("a2").filters.blendTrans.Apply();
			document.getElementById("a2").style.visibility = "visible";
			document.getElementById("a2").filters.blendTrans.Play();
		}

	}
	else {
		if ( a_counter % 2 == 1 ) {
			document.getElementById("a2").style.opacity = 0;
		}
		else {
			document.getElementById("a2").style.opacity = 100;
		}
	}

	setTimeout("a_next();", 7000 );
}
function a_next() {

	if ( a_counter % 2 == 1 ) {
		document.getElementById("a2").innerHTML = font_chars[a_counter];
	}
	else {
		document.getElementById("a1").innerHTML = font_chars[a_counter];
	}

	a_counter++;
	if ( a_counter > 52 ) {
		a_counter = 1;
	}

	a_start();
}

function a_start_ie8() {

	document.getElementById("a2").style.visibility = "visible";
	document.getElementById("a1").innerHTML = font_chars[a_counter];
	document.getElementById("a2").filters.blendTrans.Apply();
	document.getElementById("a2").style.visibility = "hidden";
	document.getElementById("a2").filters.blendTrans.Play();

	setTimeout("a_next_ie8();", 7000 );
}
function a_next_ie8() {

	document.getElementById("a2").innerHTML = font_chars[a_counter];

	a_counter++;
	if ( a_counter > 52 ) {
		a_counter = 1;
	}

	a_start_ie8();
}

</script>
<style type="text/css">
#base {
	position:relative;
	width:500px;
	height:300px;
}
#a1,#a2 {
	font-family: tattooli;
	width:100%;
	height:100%;
	background-color:#fff;
	font-size:300px;
	position:absolute;
	-webkit-transition: opacity 3s ease-in-out;
	-moz-transition: opacity 3s ease-in-out;
	-o-transition: opacity 3s ease-in-out;
	transition: opacity 3s ease-in-out;
	filter:blendTrans(duration=3);
}
</style>
<div id="base">
	<div id="a1" style='padding-left:80px'>a</div>
	<div id="a2" style='padding-left:100px'>A</div>
</div>
<script type="text/javascript">
if (userAgent.indexOf("msie") > -1) {
	setTimeout("a_start_ie8();", 7000 );
}
else {
	setTimeout("a_start();", 7000 );
}
</script>




posted by lightbox at 2011-04-29 00:27 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2009年12月31日


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

最近、セキュリティ制限やらで prompt が使え無い場合があって、
自分でセキュリティ設定が必要になりますが、それはとりあえず置いておいて、
テキストエリア内の選択文字列をタイトルにしたリンクの作成方法です
<script type="text/javascript">

function createURLLink() {

	var userAgent = window.navigator.userAgent.toLowerCase();
	var appVersion = window.navigator.appVersion.toLowerCase();
	var txt = "";
	var strUrl = "";
	if (userAgent.indexOf("msie") > -1) {

		var objSelectedText = document.selection
		var objTextRange = objSelectedText.createRange( )

		if (objTextRange.text.length == 0 ) {
			return;
		}
		try {
			strUrl = prompt("URLリンク作成","http://");
			if ( strUrl != "" && strUrl != "http://" && strUrl+"" != "null" ) {
				txt = objTextRange.text
				txt = "<a href=\""+strUrl+"\" target=\"_blank\">"+txt+"</a>"
				objTextRange.text = txt;
			}
		}catch( e ){}
	}
	else {
		var obj = document.getElementById("txt091231d")
		var ns = obj.selectionStart;
		var ne = obj.selectionEnd;
		var nl;

		if ( ns != ne ) {
			strUrl = prompt("URLリンク作成","http://");
			if ( strUrl != "" && strUrl != "http://" && strUrl+"" != "null" ) {
				txt = obj.value.substring(ns, ne);
				txt = "<a href=\""+strUrl+"\" target=\"_blank\">"+txt+"</a>"
				nl = txt.length
				txt = obj.value.substring(0, ns)
					+ txt + obj.value.substring(ne,obj.value.length);
				obj.value = txt;
				obj.setSelectionRange(ns,ns+nl);
			}
		}

	}

}

</script>

<TEXTAREA id=txt091231d rows=5 wrap=off cols=50></TEXTAREA>
<input type=button value="リンク作成" onClick='createURLLink()'>




タグ:javascript
posted by lightbox at 2009-12-31 16:14 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする

2009年09月21日


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

INPUT 要素を、type="file" で使用した場合、セキュリティの問題で、
初期値を表示する事ができませんが、その代替方法です。IE でしか使用
できないので、HTA で利用すると良いでしょう。

click メソッドで参照ダイアログが表示されますが、ダイアログが閉じられるまで、
実行が停止するので、入力値が変わらずに onChange が起動しなくても
表示側のデータも変更されます。
<input
   id="ref_file"
   type="file"
   style='display:none'
   onChange='
      document.getElementById("ref_file_front").value = this.value
   '
>
<input
   id="ref_file_front"
   type='text'
   style='width:300px;'
>
<input
   type="button"
   value="参照"
   onClick='
      document.getElementById("ref_file").click();
      if ( document.getElementById("ref_file").value != document.getElementById("ref_file_front").value ) {
         document.getElementById("ref_file_front").value = document.getElementById("ref_file").value;
      }
   '
>



タグ:IE
posted by lightbox at 2009-09-21 20:38 | JavaScript コンテンツ | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します
container 終わり



フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり