アーカイブ

2008 年 3 月 のアーカイブ

[JavaScript]簡易版リッチテキストエディタを作ってみた

2008 年 3 月 23 日 コメントはありません

アルバイト先でちゃんとしたのを作ったのだが、知識の定着のために簡易版リッチテキストエディタを作ってみた。

簡易版リッチテキストエディタ:http://www.y2-space.com/www/program/richtext.html

(IE,firefoxで動作確認済み)

リッチテキストエディタ(WYSIWYG)はブログの作成画面などで結構メジャーなもので、htmlをしらなくてもリンクや画像、文字サイズなどを編集できる。

・designMode

リッチテキストエディタはまず編集エリアとしてインライン要素のiframeを用いる。このiframeのdesignModeという属性をOnにすることによってリッチテキストによる編集が可能になる。

ただブラウザにかなり依存するようなので、実際にはfirefoxとIEで以下のような感じで分ける必要がある。

  1.  // firefox
  2.  document.getElementById("iframe").contentDocument.designMode="On";
  3.  // IE
  4.  document.frames[0].document.designMode="On";
・execCommand

テキストを装飾するにはexecCommandを用いる。実際にテキストをBold(太字)にしたい場合、以下のようになる。※以下からfirefoxを基準にして書く

  1.  // boldにする場合
  2.  document.getElementById("iframe").contentDocument.execCommand("Bold",false,null);

基本的にexecCommandの第2引数はfalseであり、第1引数にコマンド名、第3引数に渡したい値(linkの場合などはurlを渡したりする)という感じになっているらしい。

リッチテキストの仕様などはこちらで
firefox
http://www.mozilla-japan.org/editor/midas-spec.html
IE
http://msdn2.microsoft.com/en-us/library/ms533049(VS.85).aspx
http://msdn2.microsoft.com/en-us/library/ms533720.aspx

作成した簡易版リッチテキストエディタでは”iframeの中身”というボタンを押下すると、リッチテキストをタグに直したhtmlタグ形式のテキストエリアが別に出力される。

またリッチテキスト入力とプレーンテキストへの切り替えはチェックボックスで切り替える。

本当はすべてのコマンドを確かめたかったが、ちょっとめんどくさかったので5つくらいに限定した。

ソースはちょっと汚いのであしからずww

カテゴリー: javascript タグ: ,

オリジナル逆転裁判を作ってみた

2008 年 3 月 17 日 コメントはありません

逆転裁判シリーズは何回かやったことのある面白いゲームだが、なんとそれが自分の好きなように作れるサービスが無料で公開されていた!

つくろう!逆転裁判:http://editor.pc-saiban.jp/

上のサイトからオリジナルの逆転裁判がつくれる。

実際に10分くらいで作ってみた。

意外に細かく設定できてすごいw

有料でもだれか使いそうなサービス。

カテゴリー: サービス タグ:

[PHP+Ethna]vistaにEthnaを入れてみる(2) ~Ethnaの導入~

2008 年 3 月 17 日 コメントはありません

ってなわけで今回は実際にEthnaをvistaにぶち込んでみる。

・パスの設定

Ethnaをインストールする際、PHPのPEARコマンドを使うのでPHPがインストールされているフォルダへのパスを通す。

Cドライブの直下に作成した場合は;C:¥xampp¥phpをシステム環境変数のPathに追加すればいい。

追加したら確認のためにコマンドプロンプトで


C:¥>pear

と入力してエラーが出ずにPEARコマンドのヘルプ一覧が表示されれば成功。
WS000009.JPG

・Ethnaのインストール

まずはPEARを最新の状態にするために以下をコマンドプロンプトに入力する。


C:¥>pear upgrade-all

何も出なかったら最新の状態なので大丈夫っぽい。

次にチャンネルサーバーを設定。


C:¥> pear channel-discover pear.ethna.jp

んで次にEthnaをインストール


C:¥> pear install ethna/ethna

これでEthnaのインストールは完了。もしチャネルサーバがうまくいかなかった場合は


C:¥> pear install http://ethna.jp/pear/ダウンロードするEthnaのファイル名

でいけるらしい。

・DB,Smartyのインストール

EthnaはPEAR_DBとSmartyに依存しているらしいのでこの2つをインストールしないといけない。

C:¥>pear install DB

と入力すればOK。

しかしSmartyはPEARのライブラリじゃないので自分で以下の公式サイトからダウンロードする必要がある。

Smartyhttp://smarty.php.net/

ダウンロードしたら解凍してその中にlibsというフォルダがあるので、名前をSmartyに変更してPHPのライブラリディレクトリ内にコピーする(同じようにやってきた人はC:¥xampp¥php¥PEARの下に作成すればOK)。

あとはEthnaとバッチファイルにPEARのときと同様にパスを設定してプロジェクトを作成したい場所で

$ ethna add-project プロジェクト名(ここではsampleという名前にする)
($はカレントディレクトリのパス)

と入力すると

creating directory (パス/sample) [y/n]

と表示されるので、yと入力すれば一気にプロジェクトが作成される。

windowsでは標準でシンボリックリンクが作成できないので作成されたwwwという名前のフォルダの
中身をプロジェクト直下にコピーするか、直接wwwにアクセスするかの2パターンがある。
面倒くさいのでここではwwwに直接リンクすることにする。

あとはwwwフォルダ内のindex.php,info.php,unittest.php,xmlrpc.phpの4つのファイルのパスが

require_once ‘C:¥パス¥sample2/app/sample2_Controller.php';

となっているのを


require_once ‘C:¥パス¥sample2¥app¥sample2_Controller.php';

に変更するだけ。

ブラウザで確認したいときはC:¥xampp¥htdocsの直下がhttp://localhost/に相当するので
htdocsに移動してプロジェクトを作成すれば手間が省ける。

例えばhtdocs以下にsampleというプロジェクトを作成すると、ブラウザでは

http://localhost/samle/www/

とurlに入力すればOK。

うまくいってれば以下のような画面が表示される。

WS000010.JPG

これで一応はvistaでethnaを動かせることができた。
めでたし、めでたし☆

カテゴリー: ethna, php タグ: ,

[PHP+Ethna]vistaにEthnaを入れてみる(1) ~XAMPPの導入~

2008 年 3 月 17 日 コメントはありません
・xmappのダウンロードからインストール

PHPの環境を作るとき、apacheやphpなどを個別にインストールするのはすごい手間がかかる。
なので今回は一括でインストールできるxamppを使う。

xampp(wiki):http://ja.wikipedia.org/wiki/XAMPP

まずは下記のサイトからXAMPP Windows版 1.6.6a(2008/3/12現在)のインストーラ版をデスクトップとかにダウンロード。

xampp:http://www.apachefriends.org/jp/xampp-windows.html

ダウンロードが終わったらインストーラを起動するのだが、ここで注意点が一つ。
apacheがポート80を使うので、skypeをインストールしている人は「ツール」→「設定」→「詳細」→「接続」で「上記のポートの代わりに、ポート80を使用」のチェックをはずしておく

後は普通にインストールするだけ。うちはCドライブの直下にxamppをインストールした。
インストールや起動方法に関してはThinkITで詳しく書かれているので飛ばす。

・xamppのPHPを最新のやつに書き換える

xamppのインストールが終わったからさぁethnaだ!と行きたいとこだが、色々調べてみた結果xamppのPHP少し変らしいので最新のPHPファイルでxamppのPHPファイルを書き換える。

まずは下記のサイトからPHP 5.2.5 zip package(2008/3/12現在)をダウンロード。

PHP:http://www.php.net/downloads.php

ダウンロードしたらとりあえずLhacaなどでデスクトップなどに解凍しておく。

次にxamppが起動している場合、apacheとmysqlを停止する。
「スタート」→「プログラム」→「Apache Friends」→「XAMPP」→「XAMPP Control Panel」を選択すると以下のような画面が出てくるので赤丸がついている2つをクリックして停止させる。

xampp_img1

xampp_img1

そしたら解凍したPHPの中身をC:¥xampp¥php(パスはインストールした場所によって異なる)にすべてコピーする(重なるものはすべて上書き)。

ここでちゃんとapacheなどをとめてないとエラーになってうまくコピーできない。

これでやっとEthnaを導入するためのPHP環境は作成できたぞ!
ということでEthna導入については次回で。

カテゴリー: ethna, html タグ: ,

ブログ移転について

2008 年 3 月 17 日 コメントはありません

ブログを移転しました!

前回までのブログはこちら:http://yspace.blog.shinobi.jp/

登録していた方は変更をお願いします。

カテゴリー: 未分類 タグ:
Get Adobe Flash player