SQLの窓

2013年11月10日


タブキーで一括インデント可能なテキストエリア

更新履歴
2009-05-04 : 初回投稿
2013-11-10 : ライブラリを最新に更新しました

複数行を選択してタブキーで一括インデントします
※ SHIFT+タブキーで逆一括インデントです
以下のようにして貼り付けるだけで実装できます
<script type="text/javascript" src="http://homepage2.nifty.com/lightbox/tabtextarea.js">
</script>
<script type="text/javascript">
createTabTextArea("sample1",60,15,"myclass");
</script>


1) name
2) cols
3) rows
4) class
5) style
6) その他属性




posted by at 00:28 | JavaScript | このブログの読者になる | 更新情報をチェックする


2013年11月09日


SyntaxHighlighterのHosting

2.0.296 を使用する理由は、
1) 元のソースコードの改行がそのまま表示反映される。
2) 横に長いコードを折り返し表示してくれる
3) クリップボードにコピーする機能が正しく使える

からです。
SyntaxHighlighterの2.0では、ライブラリを置く自分の WEB スペースの無い人の為に Hosting してくれていますので、慣れるまではまず以下のコードをヘッダ部分か、記事前でページで一度だけ表示される場所に記述するといいと思います。(動作確認後、ゆっくり入れ替えれば良いです) 必要なライブラリは選択する必要がありますが、使用するものは全て記述しておきます。いろいろやってみましたが、それが最も良い方法であると思っています。
<script	type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shCore.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shLegacy.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushXml.js"></script>
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.296/styles/shCore.css">
<link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.0.296/styles/shThemeDefault.css">
<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.0.296/scripts/clipboard.swf';
SyntaxHighlighter.config.strings.copyToClipboardConfirmation =
 '\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\u3000\u3000\u3000';
SyntaxHighlighter.defaults['auto-links'] = false;
</script>

※ 他にも用意されています
http://alexgorbatchev.com/pub/sh/1.5.1/
http://alexgorbatchev.com/pub/sh/2.0.278/
http://alexgorbatchev.com/pub/sh/2.0.287/
http://alexgorbatchev.com/pub/sh/2.0.296/
http://alexgorbatchev.com/pub/sh/2.0.320/
http://alexgorbatchev.com/pub/sh/2.1.364/
http://alexgorbatchev.com/pub/sh/2.1.364/
http://alexgorbatchev.com/pub/sh/2.1.382/
http://alexgorbatchev.com/pub/sh/current/
記事側では以下のように記述して下さい (SyntaxHighlighter2.0用 貼り付けコード作成 で作成できます) ※ 表示幅をコントロールしたい場合は、DIV で囲んで、その幅をスタイルで指定します
<div style='width:600px;'>
<pre name="code0904292021" class="brush:js">

&lt;SCRIPT type=&quot;text/javascript&quot;&gt;

function test() {
	alert("ok");
}

&lt;/SCRIPT&gt;


&lt;INPUT
	type=&quot;button&quot;
	value=&quot;test&quot;
	onClick='test();'
&gt;
</pre>
</div>
<script type="text/javascript">
dp.SyntaxHighlighter.HighlightAll("code0904292021");
</script>

また、見栄えを変更したい場合は以下のようなスタイルを追加します
( opacity を設定すると、ツールバーが透過してソースコードが隠れても読めます )
<style type="text/css">
.syntaxhighlighter div,.syntaxhighlighter span,.syntaxhighlighter code {
	font-size:12px!important;
	font-family: "MS Pゴシック"!important;
}
.syntaxhighlighter {
	padding:5px!important;
	background-color:#FFFFFF!important; 
	border-style:solid!important;
	border-color:#808080!important;
	border-width:1px!important;
}
.syntaxhighlighter .toolbar {
	opacity:0.5;
}
</style>

ダウンロードおよび利用方法が書かれたサイト(英文)



posted by at 15:32 | SyntaxHighlighter | このブログの読者になる | 更新情報をチェックする



Google ストリートビューのパノラマを自分のブログに設置する方法

コードサンプルの streetview-simple を jQuery で簡略化しています。

※ jQuery は、Google がホスティングしているものです。

heading と pitch は、こちらで動かしながら取得できます( 最後に設定変更ボタン )

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
$.fn.extend({
	StreetView : function(a,b){
		var pos = new google.maps.LatLng(a,b);
		$( this ).data( "pano", new google.maps.StreetViewPanorama($(this)[0],{ position: pos }) );
		return this;
	}, 
	StreetViewPov : function(a,b){
		var pov = {
			heading: a,  
			pitch: b 
		}
		$( this ).data( "pano" ).setPov(pov);
		return this;
	} 
});

$(function(){
	$('#pano')
	.StreetView(35.658069,139.745016)
	.StreetViewPov(33.69,41.62)
	.css("width","600px")
	.css("height","450px");

});
</script>
<div id="pano"></div>


posted by at 15:31 | Google | このブログの読者になる | 更新情報をチェックする