2009年02月

ここ最近いじり続けてたエディタですが、SourceForge.jpでホスティングすることにしました。
名前はLighediTor。スペルミス注意です。

SF.jpにしたのは、比較的自由に使えるサーバスペースが手に入るから。
先日の障害の際、xrea一極集中はやばいと感じたので調度良かったのです。

以下が主なページです。

プロジェクト概要
プロジェクトページ（サンプル）
ソース（Subversion）

というわけで改めてよろしくお願いします。

当面の課題は補完候補を充実させることと、
Ctrl+Enterでの閉じタグ補完をうまく動くようにすることです。
※ IE6でとてつもなく重いのはとりあえず見なかったことにします。。。

皆さんもよければコミッタになってください！

SF.jpの使い方（SVN/シェルサーバ/FTP）

わりとつまづいたのでメモ。

TortpiseSVNで接続

基本的に以下の記事を参考にやればOK。
cl.pocari.org - TortoiseSVN で公開鍵を使う方法
ただ、

2. 公開鍵をサーバに登録
Public key for pasting into OpenSSH authorized_keys file の部分をコピーして $HOME/.ssh/authorized_keys に貼り付けます．

の部分は、
ユーザ設定 » アカウント基本情報設定 » [鍵の編集]から貼り付ければOK。
あと、パスフレーズは空白でOK。

未だにディレクトリとかコピーしながら開発してるので、これを気に活用していこうと思います。
せっかく環境が用意されてるようなので、Gitも使ってみたいところ。

Tera Termでシェルサーバに接続

上でputtygenをもう1回使います。

1. Conversions » Import keyからさっき作った秘密鍵をインポート。
2. Conversions » Export OpenSSH keyで変換。（identityっていう名前にしとくと楽）
※ 鍵を作る時にOpenSSH形式でExportもしておけば、importを省ける。
3. Teratermでshell.sourceforge.jpにSSHでログイン。
4. RSA/DSA鍵を使うを選択し、identityを読み込み。
　　（ユーザ/パスは、SF.jpアカウントのもの。）
5. あとは普通にシェルを使える。

参考。
SF.jpのsvnリポジトリへのアクセス設定（亀用） - つくば日記 (仮)

WinSCPでSFTP接続

これは特につまづくところはない。

ユーザ名/パスはSF.jpアカウント。
秘密鍵は、.ppkの方を指定。
プロトコルはSFTP。

あとは普通にFTPできる。

以上、SF.jpはホスティング環境としてかなりいい感じ。
（アドセンスも簡単に使えるしね。）
ソースの公開とかにはgoogle codeの方が向いてそうだけど。

What You Code Is What You Get.

実は地味に進めてました。
めんどくさいのでまとめて投稿、すいません。。。

[実装2-1 入力補完候補表示]

手始めにカーソル位置の文字を取得して、補完候補を選ぶとこまでやりました。
結果がこちら→Editor2.1

<aと入力すれば、<a>、<adress>等と表示されます。
※ 候補が貧弱なのはキーワードを少ししか登録していないからです。

お世話になったサイトをあげておきます。

textareaの選択範囲を取得し、前後に文字列を挿入する - Archiva
前回以上にこのエントリに頼りっぱなしでした。

上のエントリを理解するために見たMSDN達。
duplicate
moveToElementText
setEndPoint

[実装2-2 カーソル座標にBOX表示]

2-1の候補をカーソル位置に表示しなくちゃだめなので、
まずはただのdivを表示してみることにしました。

結果→Editor2.2

textarea内で入力すれば、そのすぐ右下にBOXが移動します。

参考サイトはこちら。
テキストエリア内のキャレット座標を取得する - Webと文字
getBoundingClientRect()を使って要素の絶対座標を求める - 素人がプログラミングを勉強するブログ

[実装3 入力補完実装]

パーツは揃ったのでいよいよ実装。
ついでにjQueryプラグイン化。
必要なDOM要素は動的に作成するようにし、
複数のtextareaに対応しました。

※ あわせてツールバーを整理。
　　選択範囲変換、置換機能も実装しました。

Editor3

参考。
jQuery のプラグインを作成する : ブログの新着記事を表示：Goodpic

[実装4 リファクタリング]

ソースコードがあまりにもひどくなっていたので、書き直し。
が、大して変わらず。

他のjQueryプラグインを参考に何とかしようと思います。
※ 何がいいかなぁ…。
　　uiはちょっとでかすぎるし。

ここまでの成果がこれ↓
Editor4
Editor4-a
（4-aはボタンでエディタ化するサンプル。
上のtextareaの入力内容はすぐ下のdivに反映。
下のtextareaはツールバーなしバージョン。）

[まとめ]

補完候補が少なさを筆頭に不具合はまだまだありますが、ある程度できてきました。
今は、微調整を繰り返している状況です。（Editor5で公開）

そろそろ管理も煩雑になってきたので、どこかにhostingしようと思います。
というわけで連載風ブログでの公開は今回で最後です。

まさか2回で終わるとは思いませんでしたが…；

以上、今回はこの辺で。

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みたいに候補を出したい。
  　一応ボタンで入力できるようにも。（上記機能が不具合時の保険）
• 選択範囲を> → &gt;な機能（これも必須）
  
• 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>

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

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