うわ!見やすい!長いソースコードをじっくり見るのにいい!Fullscreen API!

※ダブルクリックでフルスクリーンモードになるかも?!
良い物に出会うと書いちゃう脊髄反射!

Fullscreen API?!

す、すごい!Fullscreen API!すごい!いい!!!
フルスクリーンいい!!

と、かちびと. net さんの どんな要素でも全画面表示に出来るFullscreen APIをブログの記事に使ってみる ※動作サンプル有 の記事を見て感動してしまいました!(いつもお世話になっています、ありがとうございますm(__)mペコリ)

で、記事を読んでキュピーーーン!と思いついたことがありました!
※ Fullscreen API については、かちびと. net さんの記事を見てください。

ソースコードの表示が悩ましい!

わたしはよくプログラムもブログで書くのですが、ソースコードの表示部分に WP-Syntax という WordPress のプラグインを入れています!
こうゆう系のプラグイン沢山あると思いますが、複数試していって消極法で残った物でシンプルで良いプラグインだと思っています。

WP-Syntax

↑※画像です
ただどうしてもブログ構造上、横幅が狭いので横長のソースコードを表示しようと思うと横スクロールバーが出てしまい結構見づらかったりします。他のブログでも同じような事が多々あります。

このソースコード表示部分をササっとフルスクリーンで表示して、その場でじっくり見れたらどんだけ幸せなんだろーと思いましたw(大袈裟に思われるかもしれませんが結構本気w)

試してみました!

とりあえずみなさんも体感してみてください!新しめの Webkit 系か Firefox なら動くみたいです。下のソースコード表示部分をどこでも良いのでダブルクリックしてみてください。解除は画面の黒い部分をクリックするか ESC キーでいけると思います。

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
// ※ ソーシャルてんこ盛りのコードを端折って表示しています
(function(){
	var url = location.href,
	tenkomori = document.createElement('div');
	tenkomori.id = 'tenkomori';
	tenkomori.innerHTML += '<div class="social-buttons">'+
 
	/* 閉じる */
	'<div onclick="document.body.removeChild(document.body.firstChild);" style="height:16px;width:60px;background-color:#009fff;color:white;text-align:center;font-size:10px;top:-10px;left:330px;line-height:1;padding:4px 0 0 0;position:absolute;cursor:pointer;">閉じる</div>'+
 
	/* 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-lang="ja">ツイート</a> '+
 
	/* facebook */
	'<iframe src="//www.facebook.com/plugins/like.php?href='+encodeURI(url)+'&amp;send=false&amp;layout=box_count&amp;width=70&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none;overflow:hidden;height:62px;width:70px;" allowTransparency="true"></iframe> '+
 
	/* googleplus */
	'<g:plusone size="tall" href="'+url+'"></g:plusone> '+
 
	/* evernote */
	'<a href="#" onclick="Evernote.doClip({}); return false;"><img src="http://static.evernote.com/article-clipper-vert.png" alt="Clip to Evernote" /></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" /></a>'+
 
	'</div><div id="page-tweets"></div>'+
	'<style>'+
	'#tenkomori{position:fixed;z-index:10000;top:10px;right:10px;width:400px;height:300px;border:solid 6px #009fff;border-radius:5px;box-shadow:black 1px 1px 8px;background:#d9efff url(http://actyway.com/bookmarklet/stripe.png);font-size:13px;font-family:sans-serif;color:#4f4f4f;text-align:left;padding:0;margin:0;}'+
	'#tenkomori a img{border:none;}'+
	'#tenkomori .social-buttons{margin:0;padding:15px 12px;height:68px;}'+
	'#page-tweets{height:202px;overflow-y:auto;overflow-x:hidden;margin:0;padding:0;}'+
	'.t-partition{background-color:white;border-radius:3px;padding:7px 10px;margin:0 12px 15px 12px;box-shadow:#afafaf 1px 1px 2px;}'+
	'.t-author{zoom:1;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{padding:0;margin:0;line-height:17px;}'+
	'.t-date{color:#afafaf;font-size:10px;}'+
	'.t-more{text-align:center;}'+
	'iframe.twitter-share-button{height:62px !important;}'+
	'</style>';
	document.body.insertBefore(tenkomori,document.body.firstChild);
})();

ブックマークレット用のコードだったので改行なしで横に長めなので横スクロールバー出てしまうと思いますが、フルスクリーンだと見通しかなりよくないですかー? CSS とか全く触っていないのでノーマルの jQuery-FullScreen を使っています。(後々触るかもしれませんw)

導入方法!

わたしは、かちびと. net さんの記事を参考にしながら jQuery の方を導入してみました! 新たにボタンなどを追加せずに WP-Syntax に動く様にしています〜w(手抜きですみません〜w)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>

jQuery 使っていますのでまず jQuery を head タグか閉じ body タグ直前で読み込みしておいてくださいね!わたしは後者にしています。

1
2
3
4
5
6
7
8
9
10
11
12
<div class="wp_syntax">
	<table>
		<tr>
			<td class="line_numbers">
				<pre>1</pre>
			</td>
			<td class="code">
				<pre class="html4strict"><!-- ここにソースコードが表示される --></pre>
			</td>
		</tr>
	</table>
</div>

※ pre タグの部分だけ全角にしています
WP-Syntax でソースコードを表示させるとこんな感じのタグになります。
HTML を指定して1行を行番号ありで表示させるとこんな感じです。
一番外に div で wp_syntax ってクラスが自動で入ってきます。

<script>jQuery('.wp_syntax').dblclick(function(e){jQuery(this).fullScreen();e.preventDefault();});</script>

今回は .wp_syntax をダブルクリックするとフルスクリーンになるって挙動にしたかったのでこんな感じにしています。1クリックだとフルスクリーンにしたく無くてもなってしまって不便なので!あと、1記事内に複数ソースコードのブロックあってもこれでいけると思います!

1
2
3
4
5
6
.wp_syntax::after {
	content: "※ダブルクリックでフルスクリーンモードになるかも?!ESCキーで解除";
	display: block;
	font-size: 11px;
	padding-left: 25px;
}

このままだとあまりに不親切なので、after で「※ダブルクリックでフルスクリーンモードになるかも?!ESCキーで解除」とか表示させています〜w 動かないブラウザもあるので言い切っていないと言うw 一応「::」で IE 対策してみたりw

※ IE 9 では確認出来ていませんが、IE8 と Opera では動きませんでした。あと Android 標準ブラウザもダメ

ほぼひとりごと

ブログテーマを新しくしたので WordPress で使える装飾系な内容ちょっと続くと思います〜w 基本のスタンスが、新しい&便利な機能は古いブラウザには悪いけどどんどん使いたい!なので、もしお気に召したら試してみてくださーい\(^o^)/

参考にさせていただきました!
ありがとうございますm(__)mペコリ