google chrome時代に最適?なちょっと重いWEBアプリの例とか(独自タグのリアルタイムHTMLエディタ)


文章投稿サイトを作ろうと思って前々から構想を練ってるんだけども、携帯でHTMLタグを書くとかどんな罰ゲームなんだよ!といいたくなるぐらいアレな作業なので、いかに携帯で簡単に(軽い)タグ構造のテキストを入力するか、という問題について考えた


まずタグをそのままポチポチ打つのはいかにも無駄だ
英数に切り替える手間も惜しい
ので、タグ〜タグ終了を簡素に、かつ日本語で全てを表現できれば嬉しい

。たぐ
ばりゅー

というのを思いついた

<たぐ>ばりゅー</たぐ>

を意味する


これでは複数行の値を扱えないので複数行の場合は

。たぐ、
ばりゅー
ばりゅー2行目
。
↓
<たぐ>
ばりゅー<改行>
ばりゅー2行目<改行>
</たぐ>

のように


また、

ここは普通サイズ<big>ここは大</big>ここは普通サイズ

のように前後の改行を殺したいときは

ここは普通サイズ
、大
ここは大
ここは普通サイズ

みたいにタグの前置を

、。 前の改行を殺す
。、 後ろの改行を殺す
前後の改行を殺す (、、)の省略

の4種から選ぶ


あとは

。るび
東京、とうきょう
↓
<ruby><rb>東京</rb><rp>(</rp><rt>とうきょう</rt><rp>)</rp></ruby>

のような記法とか




http://www.sorr.biz/sorrno_alpha/alteno.html
↑PCブラウザ用にとりあえず作ってみたもの
変換作業は全てjavascriptでやってるので、数万文字とか入れると内容にもよるが重い
Flashを使ってる自動セーブの部分とかはChromeだと動いてないけど、なんにせよChromeはIE6やfirefox3の半分強ぐらいの速度で動く
使い物になるようになるかなー


基本的な操作方法は
1.テキストエリアに文章を打ち込む
2.Ctrl+Enterでパースする
もしくは「自動変換」をクリックしてから文章を書く


ex.

。、太字
太字とか
、大
大きくとか
、小
小さくとか
。赤
赤
、青
青
、。グレイ
グレイ
。るび、
ルビ表示、るびひょうじ
。
。+10、
サイズを+10
。+10
さらに+10
。x2
さらにx2
。
。中央
。表、
あ、い
う、え
。
。右
。テーブル、
。赤
ああ、いい、うう
。青
かか、きき、くく
。

太字とか大きくとか小さくとかグレイ
ルビ表示るびひょうじ
サイズを+10
さらに+10
さらにx2

ああいいうう
かかききくく


とてもキモく見えるが、携帯で高速に、という目標は満たしていると思う
タグごとに改行を強制されるので結果的に一行が短くなり、携帯の小さい画面での視認性も高くなっている
PCで打つのも高速だ
ガジェットとかにしてみても面白いかもしれない


以下、実装してあるタグリスト

見出し1〜6 見出し(章題)
定義りすと/リスト 定義リスト
順序りすと/リスト 順序リスト
りすと/リスト 無順序リスト
太字 太字
大きく
水平 水平罫線
斜体 斜体
小さく
下付き
上付き
等幅 等幅フォント
てーぶる/テーブル
るび/ルビ ルビ
中央 中央寄せDiv align
右寄せDiv align
左寄せDiv align
上線 text-decoration
下線 text-decoration
中線/打ち消し text-decoration
x(数字) 親要素に対する%
(数字) baseofsizeに対する%
+(数字) 親要素に+する%
ー/−/―(数字) 親要素に−する%
(色の名前) 文字色の設定

PS.
おお、firefox3は-moz-inline-boxの解釈がちょっと変わってる
6月ごろから触ってないのでなんか他にも問題はありそうだ


PS2.
パーサがどうのとか調べずにがーっと書いたのでなんか今見たらえらいことになってるな>ソース
これは綺麗にしないと読めないw