Wind-Sunlight - Webプログラミング 風の巻

前回は機能についての記事を掲載しましたが、今回は設定編です。
net2ftpの設定はLinuxのようにファイルの内容を変更することにより行います。

設定ファイルは/files_to_uploadに格納されていて、ここには

・settings.inc.php
・settings_authorizations.inc.php
・settings_screens.inc.php

の三つの設定ファイルが格納されています。

これらのファイルには多くの設定項目が存在しますが、今回は
最低限の設定について記述したいと思います。

setting.inc.php

このファイルでは基本的な設定を行うことが出来ます。

default_language :規定の言語設定
default_skin        :Skinの設定
admin_username :net2ftpの管理者
admin_password :管理者パスワード

default_languageとdefault_skinは次のように設定しておくと、
ログイン時の表示言語が日本語、SkinがBlueに設定されます。

$net2ftp_settings[”default_language”] = “ja”;
$net2ftp_settings[”default_skin”]     = “blue”;

また、admin_usernameとadmin_passwordを設定することにより
net2ftpの管理者画面を使用することが出来ます。

settings_authorizations.inc.php

各種権限の設定を行うことが出来ます。

allowed_ftpservers     :接続を許可するFTPサーバ(配列)
banned_ftpservers     :接続を拒否するFTPサーバ(配列)
banned_addresses     :net2ftpへの接続を拒否するIPアドレス
allowed_ftpserverport :FTPへ接続する際に許可するポート

settings_screens.inc.php

個々の機能について有効/無効の設定を行うことが出来ます。

functionuse_jupload     :Javaアップロード yes/no
functionuse_install       :インストール yes/no
functionuse_advanced  :拡張機能 yes/no
functionuse_findstring  :検索 yes/no

これらの機能は、使う機会があまり無いので、無効に設定しています。

以上で、net2ftp設定編は終わりです。

おまけ
 

以下の行為は実験的なものなので全て自己責任で行ってください。

net2ftpでは、ファイル編集を行う際に使用できるエディタは、
対象ファイルの拡張子によって限定されています。
(hoge.txtではNormaltextareaしか使えない)

しかし、txtファイルでもFCKEditorを使いたい場合があるかもしれません。

そんな時は、/files_to_upload/plugins/plugins.inc.phpを
次のように変更してみてください。

変更前

変更後

赤線で囲われてい部分が変更箇所です。
これで.txtファイルでもFCKEditorを使うことが出来ます。

前回(net2ftpインストール編)に続いてnet2ftpの機能について調べてみました。

(1)アップロード

通常のアップロードに加え、指定したZIPファイルを解凍、
アップロードすることが可能

(2)コピー

同一サーバ内、FTP->FTP間でファイル・ディレクトリのコピーが可能

(3)移動

同一サーバ内、FTP->FTP間でファイル・ディレクトリの移動が可能

(4)削除

一般的なFTPと同様なので省略

(5)名前の変更

一般的なFTPと同様なので省略

(6)許可情報の変更

ファイル・ディレクトリに対してのセキュリティ設定。
Owner,Gourp,EveryoneそれぞれにRead,Write,Execute
を設定可能。

(7)ダウンロード

ダウンロード対象のファイル・フォルダは自動的にZIP圧縮される。

(8)圧縮

サーバ上のファイル・ディレクトリをZIP圧縮。
また、ZIP圧縮したファイルをメールに添付して送ることも可能

(9)解凍

サーバ上のZIPファイルを解凍。

(10)検索

ファイル・ディレクトリに対して文字列検索を行うことが出来る。
ファイル名にはワイルドカード(*)が使用可能。
ただし、サーバへの負荷が大きいので使用頻度は少ないかも・・・

(11)編集

FTPサーバ上のファイルを直接編集することが出来る。
文字コード、改行文字の変換を行うことも出来ます。

また、編集にはNormalエディタに加え、
FCKEditor,TinyMCE,CodePress等が使用できます。
(ファイルの拡張子によって選択できるエディタが異なります。)

と、機能についてはこのような感じです。

感想

痒い所に手が届くという言葉が実感できるようなツールでした。
ただ、導入するのに手間がかかるのが難点ですが・・

net2ftpの詳細な設定についても近いうちに試してみたいと思います。

一部の人々の間で話題になっているnet2ftpをインストールしてみました。

1.net2ftpの入手

net2ftpは http://www.net2ftp.com/ からダウンロード出来ます。

リンク先では過去のバージョンがいくつかダウンロード出来るようですが、

今回は最新バージョンであるv0.95のインストールを行ってみます。

2.設置

ダウンロードしたファイルを解凍したところ、以下のような構成になっていました。

/files_to_upload
/integration_in_other_PHP_applications
CHANGES.txt
create_table.sql
CREDITS.txt
INSTALL.txt
LICENSE.txt
TODO.txt

今回は/files_to_uploadのみをサーバにアップロードします。

(アップロードの前にフォルダ名を分かりやすい名前/net2ftpへ変更)

net2ftp/index.htmlにアクセス

ログイン画面が表示されていれば設置完了です。

3.ログイン

無事設置できたところで、ログインを行ってみました。

(1)接続先のFTPサーバを指定します。

(2)ユーザ名を入力します。

(3)パスワード入力をします。

(4)初期ディレクトリを指定します。空欄でも特に問題はありません。

(5)表示する言語を指定します。

(6)Skin(見た目)を選択します。Skinには以下のものがあります。

Blue : ディレクトリ、ファイルがリスト表示されます。
India : ディレクトリ、ファイルがアイコンで表示されます。
Mobile: Mobile機器用のレイアウトで表示されます。

(7)FTPのモードを選択します。今回はBinaryを選択します。

(8)各種チェックボックスです。

Anonymous : FTPへ匿名での接続を行います。
Passive mode : パッシブモードでの接続に切り替えます。
SSL : SSL通信を使用します。

以上の項目を入力し、ログインを行います。

ログインに成功しました!

net2ftpの機能については次回に報告したいと思います。

ある夏の夜、突然「花火」を見たくなり、PukiWikiのLightBoxプラグインを作りました。（なんのこちゃ？）

「百聞は一見にしかず」まずはこのページを見て下さい。

• ある夏の夜

このページは、私の運営しているWikiサイトです。「PukiWiki + LightBox」で、これまでのテキスト中心のページから少しは動きのあるページに変身できそうです。でも、私自身、根っからの「メモ帳派」なので、あまり画像は使わないと思います。

分からない事

このプラグインを作って、自分で楽しんだ後、プラグインを（LightBoxも含んだ配布物として）公開しようと思ったのですが、待てよ、プラグインのライセンスをどうしよう。GPLにしたかったのですが、LightBoxがCC-Attributionなので・・・。どうなるんだろう。CC-Attributionの「帰属表示」はGPLと矛盾しないのだろうか？なんでJavaSctiptがCCなの？修正BSDやLGPLではだめなんでしょうか？

• Commons Attribution 2.5 License 

WordPressのLightBoxプラグインはGPLで公開されています。ＯＫなのか？著作者の承諾を得ている事も考えられるが・・・。結局、この疑問が分からず、PukiWikiで使えるLightBoxプラグインの作り方を書いてお茶を濁しておきました。

「CC-Attribution ライセンス」で公開されているソフトウェア（Ａ）があります。
この（Ａ）を変更して使用しているソフトウェア（Ｂ）があります。
（Ａ）の著作者の許可なく、（Ｂ）をＧＰＬとして公開しても良いのでしょうか？

お分かりの方は、ご教授下さい。

最近、ボップアップでボックス表示するJavascriptを多く見ます。LightBoxはその代表です。その他には、GreyBox,ThickBoxというのがあります。とりあえず「xBoxたち」と名づけましょう。

xBox たち

• LightBox —  http://www.huddletogether.com/projects/lightbox2/
• GreyBox — http://orangoo.com/labs/?page_id=5 
• ThickBox — http://jquery.com/demo/thickbox/

GreyBox — LGPL

GreyBoxは、 LightBoxのhtml版です。LightBoxが画像を対象にいるのに対して、GreyBoxはURLを指定して、コンテンツを全てBox表示します。

まずは、ダウンロード：

• GreyBox 3.25
  http://orangoo.com/labs/?page_id=54

解凍して、GreyBox_v3_25以下のファイルを、適当な仮想フォルダにコピーします。demo.html があるので、それを実行してみました。使い方は以下に詳しく出ています。

• http://orangoo.com/labs/?page_id=53

ThickBox — Under an Attribution, Share Alike License

ThickBox は LightBoxとよく似ています。高速な画像表示を得意としていますが、htmlも表示できます。ダウンロード先がちょっと難しかったです。（本当にここでいいのか少し不安）

• TickBox 1.2
  http://jquery.com/demo/thickbox/ の[Download This Example]をクリック

解凍して、thickbox以下のファイルを、適当な仮想フォルダにコピーします。index.htmがあるので、それを実行してみました。日本語で使い方が詳しく出てるサイトがあります。

• http://priere.blog2.fc2.com/blog-entry-586.html

今日も、FCKeditor を少々いじりました。FCKeditor、本当によくできていますね。まずは、設定環境ですが、前回と同じです。

設置環境：

• /samples/ajax/editor/editor.php — サンプルコード(エディタ)
• /samples/ajax/editor/FCKeditor/ — FCKeditor設置ディレクトリ

設定は、前回の続きなので、初めの方は、「FCKeditorをPHPから使って見た」を 参照して下さい。

今回は、３つの設定を：

1. 独自の環境ファイル(myconfig.js)
2. ツールバーのカスタマイズ
3. ダーティチェック

独自の環境ファイル

editor.php ：

$oFCKeditor = new FCKeditor(’FCKeditor1′) ;
$oFCKeditor->Config[’CustomConfigurationsPath’]
　= ‘/samples/ajax/editor/myconfig.js’ ;

独自の環境設定ファイル（上例ではmyconfig.js）は、オリジナルの設定ファイル（FCKeditor/fckconfig.js）を上書きします。独自の環境設定ファイルを望みの場所に作る事ができます。例えば、ログインユーザ毎に環境設定ファイルを変えたりできます。 

ツールバーのカスタマイズ 

上で設定した独自の環境設定ファイル（myconfig.js）を使ってツールバーをカスタマイズしてみます。

myconfig.js：

FCKConfig.ToolbarSets[”MyToolbar”] =
[
  [’Save’,'NewPage’,'Preview’],
  [’Cut’,'Copy’,'Paste’,'PasteText’,'PasteWord’,
　　’-',’Undo’,'Redo’],
  [’Bold’,'Italic’,'Underline’,'StrikeThrough’],
  [’OrderedList’,'UnorderedList’,
　　’-',’Outdent’,'Indent’],
  ‘/’,
  [’Link’,'Unlink’],
  [’Table’,'Image’,'Rule’,'SpecialChar’,'PageBreak’],
  [’FontSize’,'TextColor’,'BGColor’],
  [’FitWindow’,'Source’,'-’,'About’]
] ;

 editor.php ：

$oFCKeditor = new FCKeditor(’FCKeditor1′) ;
$oFCKeditor->Config[’CustomConfigurationsPath’] = ‘/samples/ajax/editor/myconfig.js’ ;

・・・・・

$oFCKeditor->ToolbarSet = ‘MyToolbar’;
$oFCKeditor->Create() ;

出来上がったツールバーはこんな感じ：

ダーティチェック

「ダーディチェック」検索してもありません。今、私が作った言葉です。ブラウザで入力している最中に誤ってページを変えて「あー」「おーＮＯ」と思った人は多いと思います。普通のアプリ（ワープロなど）は、「閉じる前に、保存しますか？」と丁寧に聞いてくれます。Webソフトではあまりこの「ダーディチェック」をしません。でも、クライアントの機能がリッチになればなるぼど、「ダーディチェック」の必要性は増していきます。

「ダーディチェック」とは開いたテキスト（または新規のテキスト）を変更したか、（汚したか）をチェックし、汚れていれば、「ページを移動してよいか」を聞き、ページの移動を抑止できるようにする機能のことです。と今、定義します。

さて、「ダーディチェック」はJavaScriptの onbeforeunload イベントを使います。これは、WPと同じ方法です。onbeforeunload で文字列を return するとブラウザはその文字列を表示し、「ページ」を移ってよいかの確認ダイアログがでます。

editor.php ：

html ヘッダー に以下を書きます。 

<script type=”text/javascript”>
<!–
var objEditor;
function BeforeUnLoadHandler()
{
  if(objEditor && objEditor.IsDirty()){
    return “ページが変更されています。”;
  }
}
function FCKeditor_OnComplete( editorInstance )
{
  objEditor = FCKeditorAPI.GetInstance(’FCKeditor1′);
  window.onbeforeunload = BeforeUnLoadHandler;
}
// –>
</script>

• FCKeditor_OnCompleteイベント はFCKeditorが完全にロードされた場合に発生します。イベントの設定はFCKeditorオブジェクトがしてくれるので、FCKeditor_OnComplete を書くだけでようです。
• FCKeditor_OnCompleteの中で、FCKeditorのインスタンスの取得と　onbeforeunload の設定を行います。両者共、このタイミングが一番良いと思います。
• onbeforeunload イベント発生時(BeforeUnLoadHandler)に、IsDirty()メソッドを使って、HTMLテキストが変更されていれば、「ページの移動」をユーザに確認させます。

FCKeditorのJavaScript　APIについては以下を参照して下さい。

• http://wiki.fckeditor.net/Developer’s_Guide/Javascript_API

終わりに 

３回に渡って、FCKeditorを紹介しました。これはすごいパーツです。是非、PHPに導入して下さい。ここで、紹介し切れなかった内容は：

• http://wiki.fckeditor.net/FCKeditor
  特に、「Configuration」と「Customization」がお勧めです。

また、Smartyとの連動も興味深いです。

• http://wiki.fckeditor.net/Developer%27s_Guide/Integration/PHP/Smarty

前回の記事の続きです。

• サーバ設置型htmlビジュアルエディタについて調べて見た

FCKeditor をPHPから使ってみました。wiki.fckeditor.net に従って設定してみます：

• http://wiki.fckeditor.net/Developer’s_Guide/Integration/PHP

ここでは、PHP Integration Module（FCKeditor/fckeditor.php）を使います。前回に書いた「あきら×ひろこ＝ゆう 」ではJavaScript Integration Module（FCKeditor/fckeditor.js）を使った方法を紹介しています。

• あきら×ひろこ＝ゆう — http://akira.matrix.jp/index.php?ID=56

fckeditor.phpを使った FCKeditor の設置

設置環境：

• /samples/ajax/editor/editor.php — サンプルコード(エディタ)
• /samples/ajax/editor/savedata.php— サンプルコード(データ保存)
• /samples/ajax/editor/FCKeditor/ — FCKeditor設置ディレクトリ
• /samples/ajax/editor/Resource/ — リソースディレクトリ
• /samples/ajax/editor/Upload/ — アップロードディレクトリ

editor.php(エディタ)：

<?php
include(”FCKeditor/fckeditor.php”) ;
?>
<html>
<head><title>FCKeditor</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
</head>
<body>
<form action=”savedata.php” method=”post”>
<?php
$oFCKeditor = new FCKeditor(’FCKeditor1′) ;
$oFCKeditor->BasePath =  ‘/samples/ajax/editor/FCKeditor/’;
$oFCKeditor->Width = ‘100%’;
$oFCKeditor->Height = ‘200′;
$oFCKeditor->ToolbarSet = ‘Default’;
$oFCKeditor->Value = ‘Default text in editor’;
$oFCKeditor->Create() ;
?>
</form>
</body>
</html>

• FCKeditorクラスのコンストラクタの引数(FCKeditor1)はエディタの要素名です。POST変数として使われます。
• FCKeditor->BasePath は仮想パスで指定します。
• Width と Height はエディタの幅と高さです。エディタは iframe の中に入っており、Width と Height はiframe のサイズを指定します。
• Value はエディタで編集するテキストの内容です。

 savedata.php(データ保存)：　ちょっと手抜きです；

<?php
$postedValue = htmlspecialchars( stripslashes( $_POST[’FCKeditor1′] ) ) ;
?>
<html>
<head><title>Posted Data</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
</head>
<body>
<?=$postedValue?>
</body>
</html>

• $_POST[’FCKeditor1′]  と　new FCKeditor(’FCKeditor1′) が関係している点に注意して下さい。

リソースブラウザとアップローダの設置

FCKeditor/fckconfig.js：

var _FileBrowserLanguage = ‘php’ ; // 初期値は’asp’です
var _QuickUploadLanguage = ‘php’ ; // 初期値は’asp’です

FCKeditor/editor/filemanager/browser/
　　　default/connectors/php/config.php：

// SECURITY: You must explicitelly enable this “connector”. (Set it to “true”).
$Config[’Enabled’] = true ;

// Path to user files relative to the document root.
$Config[’UserFilesPath’] = ‘/samples/ajax/editor/Resource/’;

FCKeditor/editor/filemanager/upload/php/config.php：

// SECURITY: You must explicitelly enable this “uploader”.
$Config[’Enabled’] = true ;

// Path to uploaded files relative to the document root.
$Config[’UserFilesPath’] = ‘/samples/ajax/editor/Upload/’;

リソースブラウザの概観

リソースブラウザはファイルのアップロードにも使用でき、かなり便利です。

サーバ設置型のhtmlビジュアルエディタは、次の２つが有名みたいです。

• TinyMCE — http://tinymce.moxiecode.com/
• FCKeditor  — http://www.fckeditor.net/default.html

両者の特徴は：

• server installation — サーバ設置型
• lightweight　— Javascript
• WYSIWYG —- ビジュアルエディタ
• Open Souece — 共にLGPL

どちらにしようかなー？ですが、日本語環境を考えれば、FCKeditor ですか。TinyMCE を特定のブログツール(MTなど)で使えるように日本語化しているものもありますが、オリジナルがせっかくLGPLなので、ここはオリジナルで行きたいところです。

さて、FCKeditor を使って見ましょう。で、先人を探すと、いました！

• あきら×ひろこ＝ゆう — http://akira.matrix.jp/index.php?ID=52
• xoopsに設置している人がいたよ  — http://www.geocities.jp/fckeditor/

感謝(しぇい)！感謝(しぇい)！早速試して見よう。

FCKeditor 2.3

まずは、本家（ http://www.fckeditor.net/default.html ）からダウンロードして、解凍して、とりあえずローカルサーバにコピー。設置の解説は、

• http://wiki.fckeditor.net/ 

にありました。JavascriptとPHPの２つの方法に興味あり。まずはJavascriptから・・・と思ったが、あれ、サンプルがある。

• FCKeditor/_samples/sampleslist.html

をローカルサーバからたたくと、あっさり動いた。JavascriptとPHPのサンプルは問題なし。ColdFusionとASPは興味なし。Perlを試すと、うーん。だめか？ソースを見るとperlのパスが変。直してもNG。（いいや後で）

一番興味あるPHPのサンプルを見ると、すごい。なにこれ。WPの以上だ。日本語もOK。ツールバーも豪華。でも、こんなにいらない。逆に取るのが大変そうだ。

あとでゆっくり使い込んでみます。それと、自作のPHP組み込みについては次回に紹介。

ajaxftpはAJAXを使ったFTPクライアントです。出先でブラウザからFTPダウンロードしたい場合に便利かも。使って見ましたが、設定に少し戸惑ったのでメモしときます。

ajaxftpはPHPのFTP拡張モジュールを使用しています。（多分多くの環境では入っています）

設置

1. ダウンロードして解凍
2. /hoge/ftp の下に ajaxftp をフォルダごと設置
3. /hoge/ftp の下にサンプルファイル(ftp.php)を設置

サンプルファイル(ftp.php)

require(’ajaxftp/ajaxftp.php’);
$aj = new AJAXFTP;
$aj->server = ‘ftp.server.jp’;
$aj->path = ‘/hoge/fpt’;   # APP path
$aj->baseurl = “http://localhost/hoge/ftp”; #APP URL
$aj->present(); 

ajaxftp 1.0

• 入手先 — http://sourceforge.net/projects/ajaxftp/

機能

• 設定したFTPサーバへの接続
• ファイルのダウンロード

感想

アップロードは出来ません。まだ発展途上って感じです。改造したくなる衝動に駆られます。でも、ライセンスが不明。AJAXの例題として参考にするのがベターかも。prototype.jsを使っています。

問題点と解決法

（１）ローカルサーバ(Windows-XP)への設置

手元のローカルサーバ(Windows-XP)に設置しましたが、接続ができませんでした。ディレクトリリストの取得に問題がある感じでした。FWはOFFにしたのですがうまく行きませんでした。尚、レンタルサーバ(lolipop)への設置は成功しています。

パッシブモードで接続するとOKでした。ダウンロードも問題なくできます。以下のコードを接続（ftp_connect）成功後に追加しました。

ftp_pasv($ftpConn, true );

（２）レンタルサーバへの設置

肝心のファイルのダウンロードでIEに蹴られます。Aタグのhrefがjavascriptなので、さらに性質(たち)が悪いです。

原因はIEの「ファイルのダウンロード時に自動的にダイアログを表示する」がOFFになっているからです。改造すれば直りそうですが、とりあえず、設置したサイトを「信頼できるサイト」して回避しました。

やはり「風」と言えば、WEB2.0でしょう。巷で、Lightboxなるものが流行っているとの事。WPのプラグインを実験してみよう。

http://www.m3nt0r.de/blog/lightbox-wordpress-plugin/

インストール 

Lightbox 2.0 Plugin
Version : v0.6.2

1. ダウンロード　— wp-lightbox062.zip
2. /wp-content/plugins/　にダウンロードした以下のファイルをアップロード
   ・lightbox-plugin.php
   ・lightbox-plugin　　（フォルダ）
3. プラグインの有効化

使い方

このプラグインは、基本的に完全自動です。プラグインをインストールすると、画像にリンクしてるURLをLightBoxのJavaScriptに置き換えます。ビジュアルエディタで画像を挿入するとき時に、[画像へのリンク]を設定しておけばOKです。便利だ。ちなみに、[リンクしない]と[ページへリンク]の場合はLightBox表示しません。

「画像表示ウインドウのキャプション」は aタグ のtitle属性が使われます。画像をシリーズ化する場合もaタグ のtitle属性が使われます。以下の例を見て下さい。

この例では、 aタグ のtitle属性が以下のようになっています。

title=”{flower}花のシリーズ(1)”
title=”{flower}花のシリーズ(2)”
title=”{flower}花のシリーズ(3)”

このようにシリーズ名をカーリーブラケットで指定できます（これもカーリーブラケットか。これも流行ですね）但し、aタグ のtitle属性はビジュアルエディタで変更できせん。これもHTMLを直に・・・。（うーん、そーですか）

このように Lightbox プラグインは全自動です。でも、Lightbox表示したくない場合もあります。この場合は次のようにします。

• 記事やページの中に　{2シャープ}NOLIGHTBOX{2シャープ}　を入れます。どこでもよい見たいですが、先頭の方が分かりやすいでしょう。
  ※{2シャープ}には#を２つ書きます
• aタグ のtitle属性に{nolb}を付けます。

上の画像リンク(aタグ)のtitle属性は、title=”{nolb}風車” です。 

詳しくは、ダウンロードしたREADME.txtを参照して下さい。

感想

• 本当に簡単に使えます。
• インストールや使いかはは、ダウンロードしたREADME.txtを読むのが早いです。サイトの説明は分かり難い（特に英語音痴の私には）。

Refer To:

• http://www.m3nt0r.de/blog/lightbox-wordpress-plugin/ — WP Pligin
• http://bd.dotted.jp/archives/42/ — WP Pligin
• http://www.syunsui.net/2006/05/lightboxjs.html — MT
• http://www.huddletogether.com/projects/lightbox2/ — Lightbox JS v2.0