JavaScript Archive

What You Code Is What You Get.

前回見た目だけで終了（！）してしまったので続きです。
今度こそ、「ボタンをクリックしてタグを挿入」までやります。

[実装1.2]

では、早速作っていきます。

といってもどうやればいいのかさっぱり検討がつかないので、
それらしきことが載ってるサイトを探してみる。

あった…が消えてる。
ので、Internet Archiveで。
※ 転載と思われる記事もあるのでこちらを見たほうが良いかも。
　　（ご存知の通りInternet Archiveはクソ重いので）

他にもいろいろライブラリとかあったけど、これが一番よさそうだったのでベースにさせてもらうことに。
あと、こちらもtextareaの選択範囲を取得し、前後に文字列を挿入する - Archivaも参考に。
Archivaさんには日ごろからいろいろと助けられておりますm(_ _)m

できたコードがこれ↓
※ substringをsliceに直しました。（2009/02/11 17:04）
※ replaceで無駄に正規表現使ってたのをやめました。（2009/02/11 19:17）
⇒ 定期的に修正が入りそうなのでブログに反映するのやめます。
　　最新のコードは次公開するサンプル参照ってことで。
　　（どっかのリポジトリにおこうかなぁ。。。）

obj.insert = function(s) {

	if (typeof s == 'undefined') throw 'ArgumentError';

	// カーソル移動位置（#{cursor}）を取得後、削除
	var cursor = s.indexOf('#{cursor}');
	if (cursor == -1) cursor = 0;
	s = s.replace('#{cursor}', '');

	// focusしないとIEでbodyに挿入されたりする
	// Firefoxでもボタンで挿入後にfocusが戻らない
	textarea.focus(); 

	// for IE
	if (document.selection) {
			
		// 選択範囲を取得
		var range = document.selection.createRange();

		// 選択中のテキスト引数sで置き換え（現在のカーソル位置にsを挿入）
		range.text = s;

		// カーソルがrange.textの最後になるので戻す
		var back = s.length -  cursor;
		range.move('character', -back);

		// 現在のカーソル位置を反映する（これやらないと水の泡）
		range.select();
	}

	// Firefox
	// inかundefinedあたりで判定しないとselectionStartが0の時ミスる
    else if ('selectionStart' in textarea) { 

		// スクロールバーの位置を保存
		var top = textarea.scrollTop;

		// 選択範囲の開始・終了位置を取得
        var start = textarea.selectionStart;
        var end = textarea.selectionEnd;

		// 開始位置と終了位置の間（現在のカーソル位置）にsを挿入
        textarea.value = textarea.value.slice(0, start) + s + textarea.value.slice(end);

		// カーソル移動位置に移動させる
		var index = start + cursor;
        textarea.setSelectionRange(index, index);

		// スクロールバーを戻す
	    textarea.scrollTop = top;
    }

};

insert('<a href="#{cursor}"></a>')

と呼び出せばtextareaに挿入されます。
※ #{cusor}の部分にカーソルを移動してます。
　　（スマートじゃないけどわかりやすいし応用もきくので）
処理の詳細はコメント参照。

肝心の動くサンプルはEditor1.2で。
上部のタグボタンで挿入できるようになりました。

めでたしめでたし。

さて、次は…「入力中に補完候補を出して、矢印キーで選んだものを挿入する」ですかね。

かなり重そうなので時間かかると思います…。
たぶん、分割して記事にします。

What You Code Is What You Get.

大口叩いちゃったので始めます。

[方針]

まず、どんなものを作るか考える。
行き当たりばったりだと、どうせ途中で投げるので。

対象

IE7とFirefox3で動作するように。
Opera、Safariは結果的に動けばラッキー。
IE6は知らん。

機能

• HTMLタグの入力補完（必須）
  …Crescent Eveみたいに候補を出したい。
  　一応ボタンで入力できるようにも。（上記機能が不具合時の保険）
• 選択範囲を> → >な機能（これも必須）
  
• CSS・JSの入力補完（余裕があれば）
• 定型文（これも必須か）
  …XML宣言・DOCTYPE・文字コード設定（METAタグ）・主要ライブラリの読み込み等。

とりあえずこれくらいで。
あげだしたらきりがいない…。

[実装1.1]

実装の過程は全部公開します。
黙々とやってると飽きるので。

あと、そうすれば僕が投げても誰かやってくれるかなぁ、と。

面倒なのでコードは全部とりあえずMITライセンスとします。

では、今回は一番簡単そうな、
「ボタンクリックでカーソル位置にタグ挿入」
をやります。

見た目

ますはモチベーションのためにも着飾る。

ちょうど最近、[JS]button, span, anchorをスタイリングするチュートリアル | コリスなんて記事があったので、

Styling Buttons and Toolbars with the jQuery UI CSS Framework | Filament Group, Inc.
UI/Theming/API - jQuery JavaScript Library

あたりを参考に作ってみることに。

…できた↓


Editor1.1

が、思ったよりてこずって、今日は見た目だけで力尽きた。
ってことで機能の実装は明日以降に^^

jQuery UI CSS Framework感想

予想以上に苦労したけど、なんとなく使い方はわかったのでメモ。

jQuery UIの最新版（1.6rc6）をダウンロード。
google ajax libs apiには1.6やテーマとかは置いてないっぽいので仕方ない。

で、必要なjsとcssを読み込む。
こんな感じ↓

<link rel="stylesheet" type="text/css" href="jquery.ui-1.6rc6/themes/base/ui.all.css" media="all" />
<script type="text/javascript" src="jquery.ui-1.6rc6/jquery-1.3.1.js"></script>
<script type="text/javascript" src="jquery.ui-1.6rc6/ui/jquery.ui.all.js"></script>

あとは以下のようなclassを設定していくだけ。

class	効果
ui-widget-header	ツールバー的な枠で要素を囲う。
ui-state-default	ボタンみたいな見た目にする。 （ui-state-hoverをhover時に追加するようにjsを書くと良し） 僕はとりあえず、 $('.ui-state-default').hover(function(){ $(this).addClass('ui-state-hover'); }, function(){ $(this).removeClass('ui-state-hover'); }); とやってる。
ui-corner-all	角丸にしてくれる。 IEでは駄目？？
ui-helper-clearfix	ブロック内の要素を全floatすると高さがなくなっちゃうというcssの厄介な仕様を解決してくれる。 これは駄目だ、便利すぎてcssの勉強にならん。 ちなみにui.core.cssには、 .ui-helper-clearfix:after { content: "."; isplay: block; height: 0; clear: both; visibility: hidden; } .ui-helper-clearfix { display: inline-block; } /* required comment for clearfix to work in Opera \*/ * html .ui-helper-clearfix { height:1%; } .ui-helper-clearfix { display:block; } という設定が。 そういえばと思って調べてみたら、ホップ本にもちゃんと書いてた。（p158、p184とか） 全然身についてないなぁ。

他にもいろいろあるのでclassを組み合わせていけばおしゃれな感じになる。
classの設定で出来ないものは個別に自分でcssを設定する。
詳細はEditor1.1の中身を見てください。

とりあえずこれだけ覚えればツールバー的見た目は簡単に作れた、すごい。
ただ、見た目のためにタグを書いちゃいそうになったり、（これは自分が悪い）
JSでclassいじる必要があったりであんまりスマートじゃないかも。
あと、CSSフレームワークとしては若干ハードル高い気が。。。

まぁ作っちゃったもんはしょうがないのでビジュアルはこれでいきます。
（といってもメニューとか全然適当ですが。）

※ 今回は使ってないけど、スクリプト1行でテーマ切り替え機能が実装できる！

<script type="text/javascript" src="http://ui.jquery.com/themeroller/themeswitchertool/"></script>
<script type="text/javascript">
$('div#switcher').themeswitcher();

// html
// <div id="switcher"></div>
</script>

　　とかけばテーマが自由に変えれるようになる。
　　クッキーで設定も保存してくれる。

以上、明日以降頑張ります。
言ったからにはやらないとー。

です。
いらんタグとか勝手に挿入するし。

IDEも重いので嫌です。

やっぱテキストエディタですよね。

（とかいってこのブログのソースもボロボロだし、
Flexの時はFlashDevelopに頼りっきりなんだけどね。。。）

個人的には、Crescent Eveが最強だと思ってます。

HTMLとCSSの入力補完が最高だし、動作もメモ帳並に軽い。
これがオープンソースになって、JavaScriptに対応して、インストール不要になれば、
世界のHTMLエディタを駆逐できるんじゃないかと。
（notepad++もよさげだけど、僕には高機能すぎる）

というわけで、オンラインでもこの使い勝手が欲しくて、
JavaScript製のエディタを探してみました。

※ 僕はブログをタグ打ちしてから貼り付けてるので、
　　どこでも使える補完付きエディタがないと困るんです^^

結論

なさそう。

まとめ記事が既にあったのであげときます。

Javascriptで作られたエディタまとめ - 空繰再繰
ブラウザ上で動く12のリッチテキストエディター:phpspot開発日誌

予想通りWYSIWYGだらけ。

※ Codepressも（！）だけど結構ドメインが無くなって（変わって？）ますね。
　　オンラインエディタブームが去ったからからなぁ…。

一番理想に近かったのはPostEditor。
a + tabで<a href="http://" title="desc">text</a>を入力等、補完がステキ。

ただ、IEだとtabが普通に効いちゃって動かず。
そしてなんとなくしっくりこない。

…なら作ればいいじゃん。

というわけで、作ります。
次のエントリからスタートです。
目指せCrescent Eve Online！！

以上、前フリでした。

引き続きuupaa-excanvas.jsをいじって遊んでます。

グラデーションがかなり綺麗にできるっぽかったので、試しに虹を作ってみる。
結果がこれ↓



予想以上にうまくいったので、bornneet.comの背景（？）として使うことにしました。

ソースは以下のような感じ。

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>rainvow</title>
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<link rel="stylesheet" type="text/css" href="style.css" media="all" />
	
	<script type="text/xaml" id="xaml"><?xml version="1.0"?><Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
	<script type="text/javascript" src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-detect.js/uupaa-detect.mini.js"></script>
	<script type="text/javascript" src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-color.js/uupaa-color.mini.js"></script>
	<script type="text/javascript" src="http://uupaa-js-spinoff.googlecode.com/svn/trunk/uupaa-excanvas.js/uupaa-excanvas.js"></script>

	<!--[if lt IE 7]>
	<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
	<![endif]-->

	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<!-- cssでのサイズ指定はうまくいかない（？）ので属性で指定  -->	
	<canvas width="200" height="200"></canvas>
	<div id="test"></div>
</body>
</html>

js

uuClass.Canvas.ready(function() {

	var canvas = document.getElementsByTagName('canvas')[0];
	var ctx = canvas.getContext('2d');

	var r = canvas.width;
	var x = canvas.width;
	var y = canvas.height;

	var grd = ctx.createRadialGradient(x, y, 1, x, y, r);

	var colors = ['255,255,255', '255,0,0', '255,165,0', '255,255,0', '0,255,0', '0,0,255', '0,0,128', '128,0,128', '255,255,255'];

	var margin = 0.05;
	var base = 1 - margin * colors.length;

	for(var i = 0; i < colors.length; i++) {
		grd.addColorStop(base, 'rgba(' + colors[i] + ',0.6)');
		base += margin;
	}

	ctx.fillStyle = grd;
	ctx.fillRect(x - r, y - r, r * 2, r * 2);

});

css

@charset "UTF-8";

canvas {
	border: 1px solid black;
	position: fixed;
	right: 0;
	bottom: 0;
}

ちなみに、ExplorerCanvasでやると、



こうなっちゃうので円形グラデーションを使う時は注意。
（Canvas - 円形グラデーションを指定する - HTML5.JP）

こんなんです。


tnantoka.net
※ PCが悲鳴をあげかねないので長時間の閲覧は注意して下さい。

こうなっちゃいます↓


最近地味に使い始めたtnantoka.netドメインですが、
bornneet.comとどう使い分けるか決まってません。
（今のところサーバサイドスクリプト使うときはこっちで公開しようと思ってたりします）

いつまでも準備中じゃあんまりなのでとりあえず飾ってみました。

faviconも一応。
（実はこれが一番苦労した。作るのは一瞬だったんだけどIE7で表示されず。
ファイルの作り直しとか、キャッシュのクリアとかいろいろやっちゃったけど、
結論はHTMLの更新が漏れててfaviconの指定ができてなかったという単純ミス。
Firefoxは指定しなくても勝手に取ってくるんだね。。。）

技術的なこと

初uupaaです。

ずっと気になってて0.7がリリースされたら触ってみようと思ってたんですが、
我慢できずにspinoffを先に使っちゃいました。

予想はしてましたが、かなりいいです！
プレゼンツールを作った時に本家のexcanvasも使いましたが、
こっちの方が癖がない上にサクサク動くし、エラーに悩まされることもありませんでした。

※ IEで grd.addColorStop(0, 'rgba(255, 255, 255, 0.5)') とかやったら動かなかった。
　　仕様かな？？…なのでブラウザ判別してIEでは半透明にしてません。
　　⇒ ウソでした、すいませんm(_ _)m
　　　　IEでも半透明グラデーションできました。
　　　　ただランダム&大量描画のせいか、たまにエラーが出るのでそのままにしてます。

ラッパ関数も便利そうなんですが、canvasの勉強にならない気がしたので今回はあえて使いませんでした。

これはcanvasにはまりそう！！

さて何作ろーかなー。。。

ひとこと

google codeはCDNとしてかなり使えますよねー。
これだけライブラリ使ってるのにScriptダウンロードする必要ないんだもんなぁ！

参考

canvas : 描画スタイルの指定（グラデーション編） - WebOS Goodies
Canvas - さまざまな図形を描く - HTML5.JP