JavaScriptベースのWYSIWYGエディタ

2010/08/14 | JavaScript/Ajax

最近はJavaScriptベースのリッチテキストエディタ(Rich Text Editor)が数多く出回っている。HTMLの知識がなくてもウェブページ上でHTMLコンテンツを手軽に生成できるため、とても便利だ。CMSに実装することも多い。しかしどれも一長一短的なところがある。WYSIWYGエディタを調べてみたのでメモしておく。

  • TinyMCE
    http://tinymce.moxiecode.com/
    おそらく現時点で最強のJavaScript WYSIWYGエディタ。世の中のWYSIWYGエディタに実装されている機能は、おそらく全て網羅されているのではないだろうか。カスタマイズにも対応(自作ボタンを用意して自作コマンドを実行することもできる)。jQueryのプラグインとしても動作する。WordPressのエディタとして有名。難点は重いこと。
  • FCKEditor
    http://ckeditor.com/
    今では「CKEditor」と名前が変わっている。FCKEditorのクオリティとインターフェイスを継承している強力なWYSIWYGエディタ。TinyMCEと双璧をなす。
  • WYMeditor
    http://www.wymeditor.org/
    Drupal等のCMSでも採用されいているポピュラーなWYSIWYGエディタ。インターフェイスはやや特殊だが、玄人好み。一般ユーザには使用しにくいかも。
  • nicEdit
    http://nicedit.com/
    軽量のWYSIWYGエディタ。XHTMLに対応。クロスブラウザ対応。
  • jHtmlArea
    http://jhtmlarea.codeplex.com/
    jQueryのプラグインとして動作するWYSIWYGエディタ。 作者曰く「公式にはIE6に対応しない」とのこと。クロスブラウザ対応。
  • jwysiwyg
    http://code.google.com/p/jwysiwyg/
    jQueryのプラグインとして動作するWYSIWYGエディタ。 WYMeditor互換で、機能縮小版。そのかわりに軽量化。
  • markItUp
    http://markitup.jaysalvat.com/home/
    他のエディタと違い、プレビューモードと編集モードが別の場所に表示。一般向けではないように思われる。
  • openwysiwyg
    http://www.openwebware.com/
    XHTML非対応。クロスブラウザ対応だがSafari、Chrome系はNG。

他にもいくつか見つけたが、現状ではこんなところ。

待ち合わせ場所連絡ツールkokode.inに機能追加

2009/11/07 | JavaScript/Ajax

再度kokode.inに機能を追加した。

今までは単純に、地図に位置をプロットするだけだった。たしかに「渋谷のハチ公前」とか「上野の西郷さん」とかでの待ち合わせなら十分だったのだが、待ち合わせ場所といえばやっぱりカフェ。カフェを簡単に選択して待ち合わせ場所として使えないか、と思って少し考えた。

結局どこかが提供するAPIを使用することになるのだが、候補に挙がったのは「HotPepper」と「ぐるなび」。ということで最初は「HotPepper」を使ってみることにした。こちらのAPIは返してくれるデータの形式がいろいろ選べるのが便利。xmlとかjsonpとか。サーバサイドスクリプトを使わなくてもJavaScriptだけで対応できた。でも一つ問題。そもそもHotPepperだと登録されているデータ数が少なくて・・・。

ということで「ぐるなび」を使うことにした。ただしこちらはxmlでしかデータを返してくれないので、JavaScriptだけでは処理できない(クロスドメインの問題)。仕方がないので、サーバにxmlを取得するプログラムを設置して、そのプログラム経由で処理することにした。「ぐるなび」は登録データが多いから、カフェの候補もたくさん表示されるのでこちらのほうが断然いい。ということでカフェ検索機能を追加してkokode.inをリニューアルした。

待ち合わせ場所連絡ツールkokode.in

jQueryによるAjax処理でxmlを受け取るときに

最近はjQueryに夢中。毛嫌いしてきたJavaScriptだったが、jQueryに出会ってからは一転。できることならPHPをやめてしまって、jQueryでご飯を食べたいくらいだ(でもそれは無理)。

Ajaxアプリを記述するときに、サーバサイドPHP、フロントエンドjQueryが今のお決まりのスタイル。基本的にはPHPからの応答はjsonを使うのだが、今回とある理由でxmlでデータを返すことにした。ここではまった。

jQuery側では以下のような記述で受け取りたかったのだが、どうしてもデータを処理できない。

$.ajax({
type:’GET’,
url:’index.php’,
dataType:’xml’,
success:function(data){
//JavaScriptによる処理
}
});

dataTypeでxmlを指定すると、動作しないのだ。なぜだ。

なにぶん、JavaScriptはまだまだ初心者なので、さんざんJavaScriptのプログラムを疑った。でも実はPHP側に問題があったなんて・・・。

PHPからは単純にXMLを吐き出していただけなんだが、それがまずかった。通常特別なことをしない限り、PHPによる応答のContent-typeの指定はtext/htmlなはずだが、これがいけない。jQueryはこのHTTPヘッダを読み取り、Ajaxで帰ってくるデータがhtmlであることを期待しているのに、xmlが返ってきてしまったわけで、それで動作しなかったようだ。

PHP側の処理で、以下の一行を加えることで解決できた。

header(’Content-Type: text/xml; charset=UTF-8′);

PHPでXMLを返すのではなく、単にdata.xmlのように、拡張子xmlのファイルを呼び出すのであれば問題なかったのにね。

待ち合わせ場所連絡ツールkokode.in検索機能追加

2009/11/04 | JavaScript/Ajax

待ち合わせ場所サービスkokode.inが楽しい。機能はなきに等しいけど、自分で使っていて楽しい。

待ち合わせ場所サービスkokode.in

今日は車で外出の予定があったのだが、地図が必要。ということでkokode.inを早速使用する。行き先の名前はわかっていたのだが・・・検索機能つけてなかった。ということで早速キーワードによる場所検索機能を追加。もともとジオコーディングの関数を組み込んでいたのでインターフェイスをつけただけ。でも、やっぱり便利。自分で使いたいと思えるサービスって、なんかいい。

待ち合わせ場所を知らせるときに

外で待ち合わせることが多い。個人の場合は、飲む約束とかで。仕事の場合は、打ち合わせの約束とかで。仕事といっても、打ち合わせできるようなステキな事務所を持っているわけでもないし、個人個人のつながりが多いから相手も自宅兼事務所な人が多い。必然的に「どこかで待ち合わせ」になる。

以前から「待ち合わせ場所」を人に知らせるのが面倒だと思っていた。簡単に地図上にポイントを落とせて、それを簡単に人に教えることができないかなぁ、といつも思っていた。地図上にポイントを落とすサービスならいくつでもあると思うけれど、それを超簡単に実現できるようなサービスはないかなぁ、と思っていた。でも、常々思っていても、探すのが面倒だった。カフェで待ち合わせることも多いけど、意外とカフェのウェブの地図って小さかったり見にくかったり、駅との位置関係が把握しにくかったり・・・。

結局自分で作った。待ち合わせ場所通知サービス「KoKode.in」(ココで.in)。

何の変哲もない、Google Mapsを設置しただけなんだけど、極力簡単に人に場所を教えられるようにしてみた。ページも1枚だけ。操作は全てAjaxで制御(jQuery)。バックグラウンドは軽量PHPフレームワーク3eyes(フレームワークも実用レベルになってきたからソースコードを精緻化して公開しないと・・・もうずっと放置したまま)。印刷もできるし、携帯でも見れるし、なんだかとてもうれしい(デザインにはこだわらない・・・)。

とりあえず自分が便利なように。他の人も便利になるかも、ということで公開。使う人いるかな。


守谷市(まちの情報ポータル) 無料アンケートレンタルjpForm.net