2009年02月09日

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>

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

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