Tagged ‘AJAX’

ブラウザで使えるWYGIWYGエディター

YUIのWYSIWYGエディタ

新着情報をユーザー側で編集できるシステムを作ろうとTEXTAREAをWYSIWYGにするオープンソースなAJAXを探した。
TinyMCE:有名で高性能だけど重い。LGPLライセンス。
FCKeditor:高性能だけどさらに重い。LGPLライセンス。
CKEditor:FCKeditorを更に高性能に軽くなった。LGPLライセンス。
PunyMCE:TinyMCEの軽量版高速だけどGPL、LGPL、MPLライセンス。
Free Rich Text Editor:ライセンスはCCなので使えるけど小窓表示がうっとうしい。
Xinha:高機能だけど重い。BSDライセンス。
jHtmlArea:jQueryなWYSIWYGエディタ、機能は少なすぎる。(h1にしてしまうとpに戻らない。IEで表示が変)
jwysiwyg:jQueryなWYSIWYGエディタ、機能は少なすぎLGPLライセンス。
SPAW Editor:UIも美しくタブが使え高性能だけど重く小窓を多用しGPLライセンス。
TTW HTML Editor:機能が微妙(テーブルが作れるのに画像は貼れない)更新が止まってる。
YUI Rich Text Editor:機能は必要十分でYahoo!なので安心、動作も重くなくBSDライセンス。ただ、読み込むライブラリ数が多いのでごちゃつく。
NicEdit:シンプルで機能の追加もできMITライセンス。

今回試した中では「CKEditor」がいい感じだったか、作る予定のシステムは仕事で使う可能性が高いので、GPL系のライセンスはソースを公開する必要があり商用には使えない。
jQueryなのはカスタムするのを前提ならいいものになるかもしれないけど、そのままだと他と比べ劣る。
ライセンス的にも動作的にも安心できるのはYUIのRich Text EditorだけどprototypeとかjQueryを使うときに衝突しないか不安になるので長い目で見ると問題あるかもしれないし、読み込むファイルが多く、足が遠のく。
色々考えたあげく「NicEdit」を日本語化して使う事にした。

Yahoo!の校正とルビのテスト

先月のWEB CREATORSを今頃になって読み始めた。
こういうHOWTOものはちょっと油断すると買った事に満足してあまり読まなくなる事が多い。
この雑誌にYahoo!の校正支援の記事が載っていて、書いた文章を校正してくれるらしい「スゲー」と思ってYahoo!デベロッパーネットワークを見てみるとルビ振りってのもあった。
そこで、雑誌のソースを元に校正支援とルビ振りの実験をしてみた。
このソースではprototype.jsって超有名なライブラリとjkl-parsexml.jsって聞いたことの無いライブラリを使って表示する仕組みらしい、jkl-parsexml.jsはXMLをjavascriptで読める様にするものらしい。
PHPですればいいのにとも思ったけどコレが結構単純で分かりやすい。
んで、できたのがコレ
やってみて気づいたんだけど、校正もルビも正確な答えを返す訳ではない。コレって実用する事があるんだろうか・・・

ブログパーツ

blogparts_150x240.png結構前から構想してたがなかなか特価部の方に時間を食われてできなかったブログパーツが完成した。iTunes StoreブログパーツみたいにFlashで作ろうかとも思ったけどサイズを自由に変更できて文字を確実に見せるにはFlashだと面倒なのでインラインフレームの方式にした。
(予定が早まったのでコミュニティの方はかなり雑になってしまった・・・)
とりあえずは出来たのだが色の指定の方法がでクレームが付いて直すことになった。
その指摘は「色コードが分からないという」という事だった、構想の段階では「色コード分かるかな~」と思ってたのだが制作に入るとすっかり忘れていた、ということで直す事になったがカラーピッカーを作るのがめんどくさい、昔作ったはずなんだがどっかにいったし、自分が作ったのだとしょぼいしブラウザの対応とか考えると遠い話になってくるそこでオープンソースなAJAXを使うことにした。
AJAXなカラーピッカーも結構ある選ぶ参考にしたのがJavaScriptist(トップページが怖いサイト)
PhotoShop-like JavaScript Color Picker
JavaScriptistじゃないところからみつけたPhotoShop風カラーピッカー、デザイン的には一番いい感じだけどでかい。
jQuery color picker
Painter風カラーピッカー、これもかっこいいし、jQueryを使ってるのでなんか安心
ColorPicker(script.aculo.us)
windows風カラーピッカー、script.aculo.usとかいうのを使ってるらしいがよく分からんので調べてみたらprototype.jsに追加するものらしい、見た目は上の2つに劣るがポップアップなのでいい感じだ。
結局、ColorPicker(script.aculo.us)を使うことにした、見た目は画像とCSSをいじって調整することにした。設置は簡単に終わった。見た目のほうはフィーダーの画像を作り直して、CSSの方はボタンの色を変更して、なぜかカラーピッカーの下のカラーコードが入るテキストボックスのフォントサイズが変になったのでテキストボックスのサイズを変更した。
結果的に、このブログを書く時間やAJAXを探す時間よりも早くできた。
ブログパーツを紹介するサイトに登録しているうちにすごいのを発見した。
ブログパーツ|1-click Award
とりあえず、このサイトあまり深く見ると自信をなくしそうなので見ないようにします。

GDを使って激安な価格表示その2

前回の価格表示を画像に埋め込む事にした。
前に作った価格.comとconeco.netとベストゲートとベストプライスの比較サイトを一括でチェックするやつに追加する感じで入力していくとブログに貼るソースデータを作れる様にしたかったので、それを更にハッティンさせて画像をトリミングしてその中に価格表示を埋め込む事にした。
今回の肝は「jsCropperUI」というやつだ。
demo
半年以上前から存在は知ってたんだけど「いつかやろう」とほったらかしていた。
どうも、AJAXとかオープンソース系は乗り気になれないんだけど。こんなの自分では作れないのでトリミング座標はcropperに任せて作ったんだけどずっとjavascriptエラーがでてる。
深刻なエラーではないのか普通に動作はするんだけど気になる。
エラーの場所を見るとデバッグみたいな英語が書いてあったので「いらないか」と思って消したら、エラーがでなくなった。
http://uda2.com/blog/price/
まだ、細かいトコ詰めてないんで動作が怪しいけど、これのおかげてそんなに安くないのについつい載せてしまった。
あと残る問題は見に来る人が少ない事だけだ・・・・