趣味のブログ

Pydio エディタのマルチエンコーディング化

OhYeah! — 2015-02-06T22:59:16+09:00

以前、このブログで「AjaxPlorer エディタのマルチエンコーディング化」のコードハックを紹介したが、今回はその Pydio 版。Pydio のエディタを UTF-8 だけでなく、EUC-JP, Shift_JIS, ISO-2022-JP に対応させる。
といっても、修正内容はほぼ同じで、修正箇所の探し方がちょっと変わったくらい。
このハックにより、UTF-8 以外のエンコーディングでも日本語が化けずに表示されるようになる。エンコーディング変換機能はないので、元ファイルのエンコーディングで保存される。当然、Pydio のエディタでの新規作成は UTF-8 のみとなる。
前回と異なるのは、coreserver の php 周りの仕様変更のせいか、file_put_contents での保存ができないので保存時のファイルロックをかけるのをやめたこと、エンコーディング判定の際に detect order を指定するようにしたことの２点のみだ。

修正するファイルは、今回も plugins/access.fs/class.fsAccessDriver.php だけ。AjaxPlorer 4, Pydio 5/6、いずれも同じ方法で修正可能だ(AjaxPlorer 4 は文括弧やインデントの位置が若干異なるが)。

1. マルチエンコーディング表示
　function readFile の

        if ($headerType == "plain") {
            header("Content-type:text/plain");
        } else if ($headerType == "image") {

を下記のように修正する。

        if ($headerType == "plain") {
            //header("Content-type:text/plain");
            // Added by OhYeah!
            $header = "Content-type:text/plain";
            if (ConfService::getLanguage() == 'ja' && function_exists('mb_detect_encoding')) {
                if (!$data) {
                    $filePathOrData = file_get_contents($filePathOrData);
                    $data = true;
                }
                session_start();
                $_SESSION['edenc'] = mb_detect_encoding($filePathOrData, 'sjis-win,eucjp-win,JIS,UTF-8');
                session_write_close();
                switch (strtolower($_SESSION['edenc'])) {
                    case 'sjis-win':
                        $header .= '; charset=shift_jis';
                        break;
                    case 'eucjp-win':
                        $header .= '; charset=euc-jp';
                        break;
                    case 'jis':
                        $header .= '; charset=iso-2022-jp';
                        break;
                    case 'utf-8':
                       $header .= '; charset=utf-8';
                }
            }
            header($header);
            // End Addition
        } else if ($headerType == "image") {

2. 元ファイルのエンコーディングで保存
function switchAction の case "put_content" の

                }
                $fp=fopen($fileName,"w");

を下記のように修正する。

                }
                // Added by OhYeah!
                if (isset($_SESSION['edenc'])) {
                    $code = mb_convert_encoding($code, $_SESSION['edenc'], mb_detect_encoding($code, 'sjis-win,eucjp-win,JIS,UTF-8'));
                }
                // End Addition
                $fp=fopen($fileName,"w");

Pydio を WebDAV サーバにする

OhYeah! — 2015-01-29T23:10:58+09:00

AjaxPlorer の頃から WebDAV サーバ機能はあったが、私には WebDAV クライアントから共有リポジトリの内容を見られるようにすることができなかった。Pydio では、簡単に WebDAV サーバとして機能させられる。
Pydio を WebDAV サーバとして使用するには、３か所の設定変更が必要だ。
まずは、Pydio をインストールしたディレクトリにある .htaccess を環境に合わせて変更する。最低限必要な設定箇所は、ReriteBase の行。

RewriteBase /

標準状態では、上の通りなので、サブドメイン等のドキュメントルートに Pydio をインストールした場合の設定になっている。ドキュメントルート直下にたとえば pydio というサブディレクトリを作成してインストールした場合は、

RewriteBase /pydio

と修正する。
次に、現在の coreserver/XREA のように、PHP が Apache モジュールではなく、CGI や FastCGI として動作しているサーバでは、

#RewriteCond %{HTTP:Authorization} ^(.*)
#RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]

の２行の先頭の # を削除しておく必要がある。
サーバ管理のためにサーバのルートを WebDAV で公開するような場合は、RewriteRule ^shares の行も、できれば shares 以外の仮想ディレクトリに修正しておいた方が良いだろう。

RewriteRule ^shares ./dav.php [L]

[imgtag id=41 align=right]Main Option の WebDAV サーバ設定[/imgtag]次に、「設定(g)」メニューから、「Application Core」→「Pydio Main Options」とたどり、「WebDAV Server」の部分を下記のように設定する。
1. ENABLE WEBDAV で Yes を選択
2. SHARES URI を .htaccess で設定した RewriteBase＋仮想ディレクトリに設定
たとえば、RewriteBase が /pydio で仮想ディレクトリが shares の場合は「/pydio/shares」
3. BROWSER ACCESS で Yes を選択
(Pydio からこの項目が追加され、WebDAV クライアントから見えるようになった)
4. 「保存」ボタンをクリック

[imgtag id=42 align=right]My Account の「WebDAV 設定」の設定部[/imgtag]最後に、プロファイル設定の周辺にある「WebDAV 共有を有効化」をチェックする。Pydio6 では「MyAccout」→「WEBDAV 設定」、Pydio5 では「Dashboard」→「My Profile」→「WebDAV 設定」。

なお、サーバ管理のために .htaccess などの . で始まる隠しファイルを WebDAV で扱えるようにするには、「Pydio の WebDAV サーバで . から始まる隠しファイルを扱う」で書いたコードハックが必要になる。

Pydio で特定ユーザのみ . から始まる隠しファイルを扱えるようにする

OhYeah! — 2015-01-25T12:42:46+09:00

AjaXplorer をサーバのファイルマネージャとして使用する場合に問題となるのは、. で始まる隠しファイルを扱えるか否かをファイルシステム単位でしか設定できないところだ。Admin 権限のあるユーザだけに .htacess などの書き換えを許そうと思うと、コードハックするしか方法がない。
Pydio に改名したバージョン 5 以降では、ユーザアカウント毎にパラメータを追加できるようになり、特定ユーザで特定ワークスペース(リポジトリ)のみ . で始まる隠しファイルを扱えるようにするなんてことが可能になった。
隠しファイルを扱えるようにするためのパラメータ追加は簡単だ。下記の手順で隠しファイルが扱えるようになる。
(1) Admin 権限を持つユーザアカウントで Pydio にログオンする
(2) 「設定(g)」メニューを選択
(3) 「Workspace & Users」→「Users & Groups」を選択
(4) 隠しファイルを扱えるようにしたいユーザを選択して「Edit」を実行
(5) 「Parameters」タブを選択
(6) 「Plugin Indentifier」で「access.fs」を選択
(7) 「Parameter Name」で「SHOW_HIDDEN_FILES」を選択
(8) 「Repository Scope」で隠しファイルを扱いたいワークスペースを選択
(9) 「Add Parameter」ボタンをクリック
(10) パラメータを追加したワークスペースのタブを選択
(11) 「access.fs」を開いて「Show Hidden Files」の「Yes」を選択
(12) 「保存」ボタンをクリックし、(4) のユーザでログオンし直す
[imgtag id=39 align=left]Pydio ユーザ毎のパラメータ追加[/imgtag]　[imgtag id=40 align=left]Pydio ユーザ毎に追加したパラメータの設定[/imgtag]

Pydio の WebDAV サーバで . から始まる隠しファイルを扱う

OhYeah! — 2015-01-23T00:12:17+09:00

AjaXplorer で . で始まる隠しファイルを扱うにはファイルシステムのドライバ設定を変更するしかなかったが、Pydio に改名したバージョン 5 以降では、ユーザアカウント毎にパラメータを追加できるようになり、特定ユーザの特定リポジトリのみ . で始まる隠しファイルを扱えるようにするなんてことが可能になった。が、この設定をしたリポジトリであっても、WebDAV クライアントからは . で始まる隠しファイルが扱えないというバグがある。
このバグの修正方法は次のとおり。5.x.x/6.0.x とも同じ。
バグ修正の元ネタはここ。ただし、ここに掲載されているコードもそのままでは動作しないので、注意が必要。
https://pyd.io/f/topic/webdav-issues/

修正点は２点。これだけで、SHOW_HIDDEN_FILES パラメータを追加して Yes に設定したユーザ＆リポジトリの . で始まる隠しファイルが WebDAV サーバから見えるようになる。

まず、/core/classes/class.AJPX_Plugin.php 138 行目の protected を

    protected function getFilteredOption($optionName, $repositoryScope = AJXP_REPO_SCOPE_ALL)

を

    public function getFilteredOption($optionName, $repositoryScope = AJXP_REPO_SCOPE_ALL)

と public にする。

次に、/core/classes/sabredav/ajaxplorer/class.AJXP_Sabre_Collection.php 156 行目の

            if ( !$this->repository->getOption("SHOW_HIDDEN_FILES") && AJXP_Utils::isHidden($file)) {

を

            if ( !$this->getAccessDriver()->getFilteredOption("SHOW_HIDDEN_FILES", $this->repository->getId()) && AJXP_Utils::isHidden($file)) {

に修正する。

Lightbox Plus のバグ

OhYeah! — 2010-09-26T21:36:28+09:00

オリジナル Lightbox+ に次のようなバグがありました。このサイトの私家改造版 Lightbox+ は、2010.09.22 から修正済みです。また、Lightbox+ for XCL は本日修正版に更新しました。
1. 大画像表示時に、Next ボタンがスクロールバーやキーボードによる水平スクロールに伴って表示位置が移動してしまう。
　これは、Next ボタンの位置を表示ボックスに absolute right で貼り付けているのが原因です。表示ボックスに absolute left で貼り付けるか、fixed right でブラウザのクライアントエリアに貼り付ける必要があります。今回は、前者を採りました。

2. 大画像表示時に、ブラウザによっては Next ボタンの右端がスクロールバーに隠れてしまう。
　これは、ブラウザのクライアントエリアの取得する WindowSize で最初に window.innnerWidth/window.innnerHeight を使用しているのが原因です。innerWidth/innerHeight はブラウザの種類によってどの領域を返すかが異なるので、改良版のように修正しました。このサイトはどのブラウザでも標準モードで表示しているので各ブラウザで問題なく動作していますが、互換モードで document.documentElement が有効なブラウザがあると、互換モード表示サイトでは問題があるかもしれません。
参考サイト: http://d.hatena.ne.jp/onozaty/20060802/p1

オリジナル WindowSize.prototype.update

	var w = 
	  (window.innerWidth) ? window.innerWidth
	: (d.documentElement && d.documentElement.clientWidth) ? d.documentElement.clientWidth
	: d.body.clientWidth;
	var h = 
	  (window.innerHeight) ? window.innerHeight
	: (d.documentElement && d.documentElement.clientHeight) ? d.documentElement.clientHeight
	: d.body.clientHeight;

改良版 WindowSize.prototype.update

	var w = 
		(d.documentElement && d.documentElement.clientWidth) ? d.documentElement.clientWidth :
		(d.boy.clientWidth) ? d.body.clientWidth : window.innerWidth;
	var h = 
		(d.documentElement && d.documentElement.clientHeight) ? d.documentElement.clientHeight :
		(d.boy.clientHeight) ? d.body.clientHeight : window.innerHeight;

　ついでに、スクロールバーのサイズも含めた表示領域サイズを取得する PageSize も、Firefox でしか使用できない window.scrollMaxX/window.scrollMaxY を使用していたので、scrollWidth/scrollHeight を使用したものに修正しています。これも、互換モード表示サイトでは、もしかすると問題があるかもしれません。
参考サイト: http://d.hatena.ne.jp/onozaty/20060803/p1

オリジナル PageSize.prototype.update

	var w = 
	  (window.innerWidth && window.scrollMaxX) ? window.innerWidth + window.scrollMaxX
	: (d.body.scrollWidth > d.body.offsetWidth) ? d.body.scrollWidth
	: d.body.offsetWidt;
	var h = 
	  (window.innerHeight && window.scrollMaxY) ? window.innerHeight + window.scrollMaxY
	: (d.body.scrollHeight > d.body.offsetHeight) ? d.body.scrollHeight
	: d.body.offsetHeight;

改良版 PageSize.prototype.update

	var w = 
		(d.documentElement && d.documentElement.scrollWidth) ? d.documentElement.scrollWidth :
		(d.boy.scrollWidth) ? d.body.scrollWidth : window.innerWidth;
	var h = 
		(d.documentElement && d.documentElement.scrollHeight) ? d.documentElement.scrollHeight :
		(d.boy.scrollHeight) ? d.body.scrollHeight : window.innerHeight;

Lightbox Plus の改良その２

OhYeah! — 2010-09-19T16:23:58+09:00

Lightbox+ はオリジナル Lightbox と違って、拡大画像をいきなりピクセル等倍で表示しないで、ブラウザのウィンドウサイズにオートフィットしてくれるところが非常に優れています。が、「Lightbox Plus の改良」で書いたように、マウスカーソルが分かりづらいなど操作上の使いにくさがいくつかあります。
　てなわけで、今回はズームナビゲーションボックスを中心にさらに改良しました。
　前回、今回を通じての改良点は以下のとおり。この記事の下に動作確認用の巨大画像を貼ってあるので、お試しください。Lightbox+ for XCL の Lightbox+ はこの変更を行ったものに差し替えました。XOOPS Cube Legacy を使用していなくても、Lightbox+ for XCL の /html/common/lightboxp 下のファイルをサーバにコピーすれば、Lightbox2 の代わりに使用できます。
　なお、前回のマウスカーソルの変更で、拡大表示時に次の画像に移ったり、ダブルクリックで終了したりすると次の画像表示時にマウスカーソルが移動カーソルになったままになるというバグがありましたが、これも修正してあります。

1. マウスカーソルを次のように変更しました。
(1) Prev/Next/Close ボタン上はポインタカーソル
(2) 通常表示画像上はデフォルトカーソル
(3) 拡大表示画像上はムーブカーソル
(4) 拡大表示時ドラッグ移動中はポインタカーソル
(5) 拡大表示時ズームナビゲーションボックス上は上下リサイズカーソル

2. 拡大表示時のズームナビゲーションボックスを次のように変更しました。
(1) スクロールホイールによる拡大／縮小をズームナビゲーションボックス上でのみ有効化
(2) ズームナビゲーションボックスのクリックでピクセル等倍表示
(3) 現在の拡大率の表示

3. 各種アイコンを次のように変更しました。
(1) ローディングアイコンを今風に変更
(2) Prev/next/Close を半透明アイコンに変更(IE6 以降、Firefox, Chrome, Opera)

[imgtag id=23]ハナアブ[/imgtag] [imgtag id=24]キイロトラカミキリ[/imgtag] [imgtag id=25]アキアカネ[/imgtag] [imgtag id=26]？バッタ[/imgtag]

Lightbox Plus の改良

OhYeah! — 2010-09-16T22:16:51+09:00

Lightbox+ は非常に気に入りましたが、どうもマウスカーソルが分かりづらい、拡大表示時に常にスクロールホイールが拡大／縮小になってしまうのがあまり好みではないってことで、自分好みに改良しました。
　改良点は以下のとおり。~~この記事の下に動作確認用の巨大画像を貼ってあるので、お試しください。~~Lightbox+ for XCL の Lightbox+ はこの変更を行ったものに差し替えました。

1. マウスカーソルを次のように変更しました。
(1) Prev/Next/Close ボタン上はポインタカーソル
(2) 通常表示画像上はデフォルトカーソル
(3) 拡大表示画像上はムーブカーソル
(4) 拡大表示時ドラッグ移動中はポインタカーソル
(5) 拡大表示時ズームナビゲーションボックス上は上下リサイズカーソル

2. 拡大表示時のスクロールホイールによる拡大／縮小をズームナビゲーションボックス上でのみ有効になるように変更しました。

3. 各種アイコンを次のように変更しました。
(1) ローディングアイコンを今風に変更
(2) Prev/next/Close を半透明アイコンに変更(IE6 以降、Firefox, Chrome, Opera)

(2010-09-19)
動作サンプルは、「Lightbox+ の改良その２」に移動しました。

Lightbox Plus っていいですね

OhYeah! — 2010-09-12T14:18:47+09:00

画像のオーバーレイ表示でよく使われる Lightbox ですが、ブラウザウィンドウのクライアントエリアより画像が大きくてもオートフィッティングしてくれないのがやや難です。Highslide はウィンドウサイズに合わせて大画像をオートフィッティングしてくれますが、Highslide で表示させる HTML を書くのはとっても面倒。
　Lightbox の簡単さと Highslide のオートフィッティング機能を併せ持つものがないかと探していたら、Lightbox+ なんてものがありました。
　Lightbox+ は、Lightbox をベースに、オートフィッティング機能を追加したものです。Lightbox+ で画像表示中にブラウザのウィンドウサイズを変更しても自動追従してくれます。もちろん、ピクセル等倍で表示する(あるいはピクセル等倍からオートフィットに戻す)ためのズームボタンもあります。
　さらに、ウィンドウサイズより大きい画像をスクロールバー付きで表示している際は、スクロールバーを使わなくても、画像のドラッグで表示位置を自由に変更できます。これも便利な機能ですね。

　ってことで、このサイトの画像オーバーレイ表示は全て Lightbox+ で表示するようにしました。IMGTag D3 の「アルバム」も Lightbox ではなく Lightbox+ で表示されます。「AjaXplorer のススメ」のスクリーンショットがやや大きめの画像なので機能を確認しやすいと思います。
　なお、~~Lightbox+ にはマウスホイールによるズーム機能がありますが、これは Off にしてあります(アニメーション機能も)。~~マウスホイールによるズーム機能が表示ボックス全体で有効になるのは使いづらいので、ズームナビゲータボックスの中だけでズームできるように変更しました。また、マウスポインタが感覚的に分かりづらかったので、ほぼ全面的に変更してあります。

　XOOPS Cube Legacy なら、Lightbox+ for XCL を使えば、簡単に全てのモジュールで Lightbox+ が使用できるようになります。

AjaXplorer のインストール

OhYeah! — 2010-09-01T23:09:58+09:00

以前携帯農薬検索実験室に書いたネタですが、「ススメ」を書いた以上、インストール方法も書いておかないと不親切だろうということで、こちらにも再掲載します。
　AjaXplorer のインストールは簡単で、公式サイトからファイルをダウンロードしてディレクトリ構造を維持したままサーバに転送するだけです。
　PHP4 か PHP5 が使えれば、PEAR も PECL も DB も不要です。ただし、起動する前に最低限下記の設定が必要です。

1. Windows のセキュリティパッチ(必須)
　Windows サーバにインストールする場合、ディレクトリトラバーサルのセキュリティホールがあるので、AjaXplorer の Windows サーバにおけるセキュリティ対策に書いた修正を必ず行ってください。

2. php.ini の設定(必須)
　PHP の error_reporting に E_NOTICE が設定されていると、ajaXplorer の設定時(初回起動時)にエラーが出まくります。php.ini を確認して、error_reporting を下記のように設定しておくと良いでしょう。

error_reporting = E_ALL & ~E_NOTICE

　なお、この設定をしても、Windows 環境では Zlib 関係が failed と表示されます。が、実際には問題なく ZIP の圧縮／解凍が可能でした。

3. エディタの日本語マルチエンコーディング化(強く推奨)
　標準では、オンラインテキストエディタは UTF-8 にしか対応していません。EUC-JP や Shift_JIS で書かれたファイルを編集する可能性がある場合は、AjaXplorer エディタのマルチエンコーディング化で書いた修正を行っておくと良いでしょう。

4. conf.php の設定(AjaXplorer 2.6.x)
(1) ルートパスの設定(推奨)
　標準状態では、ajaXplorer のインストールディレクトリ下の files ディレクトリが、管理できるルートパスになります。これでは不便なので、ajaXplorer インストールディレクトリ下の server/conf/conf.php の BASIC REPOSITORY CONFIGURATION の PATH を書き換える必要があります。realpath 以下を全て削除して絶対パスで書き換えても良いし、デフォルト設定を生かして conf.php からの相対パスで書き換えても OK です。

		"PATH"			=>	realpath(dirname(__FILE__)."/../../../"),

(2) アップロードファイルサイズ(推奨)
　php.ini の post_max_size に合わせて、conf.php の $upload_max_size_per_file を設定します。

$upload_max_size_per_file = '8M';

(3) 日本語化(任意)
　AjaXplorer はメニュー等が日本語に対応していますが(ユーザ毎に言語設定可能)、標準では英語なので、最初から日本語で表示するためには、AjaXplorer インストールディレクトリ下の server/conf/conf.php の DEFAULT LANGUAGE を下記のように書き換える必要があります。

$default_language="ja"; // "en" を "ja" に

AjaXplorer のススメ

OhYeah! — 2010-09-01T22:01:20+09:00

サーバにある Perl や PHP などのスクリプトをちょっと修正したいとき、XOOPS のテーマファイルをいじっているときなど、「いちいちローカルファイルを修正して FTP で転送するのは面倒だ。サーバ側のファイルを直接編集できないものか…。」と思ったことはありませんか？こんな時便利なのが、いわゆるウェブファイルマネージャといわれるソフトです。
　ウェブファイルマネージャは、サーバ側に Perl や PHP などで書かれた CGI 等をインストールして、クライアント側からはウェブブラウザでサーバのファイル管理や編集ができるウェブアプリケーションです。レンタルサーバには何らかのウェブファイルマネージャがインストールされていることが多く(XREA/CORESERVER は net2ftp)、使われたことがある方も多いのではないかと思います。
　一般的なウェブファイルマネージャは、ほとんどの機能をサーバサイドのスクリプトで実装しているので、ユーザインタフェースはあまり使い勝手がよくないものが多いです。

　そこでお勧めしたいのが、AjaXplorer です。AjaXplorer は、クライアント側は Javascript で書かれた AJAX フレームワークを使用して、ウェブブラウザ上で動作しているにもかかわらず、Explorer ライクな操作性を実現しています。
　公式サイトは下記のとおりで、ここにデモサイトもあるのでさわってみてください。デモサイトで、アドレスバー右端のスパナマークをクリックすると、メニューを日本語にできます。
　なお、スクリーンショットは、デモサイトでキャプチャリングしました。
http://www.ajaxplorer.info/wordpress/

1. ドラッグ＆ドロップによるファイルのコピー／移動と右ボタンメニュー
　Ctrl や Shift キーを併用した複数ファイル選択、ドラッグ＆ドロップによるファイル移動(Ctrl キー併用でコピー)、マウスの右ボタンクリックによるコンテキストメニューの表示など、Explorer に近い操作性です。

2. オンラインテキストエディタ
　テキストエディタで、サーバ上のスクリプトや HTML ファイルを直接編集することが可能です。動作はやや重いですが、Javascript や PHP ファイルなどはキーワードにって色分けされます。
　標準では UTF-8 にしか対応してないので、EUC-JP や Shift_JIS の日本語ファイルは文字化けしますが、ajaXplorer エディタのマルチエンコーディング化のハックで EUC-JP や Shift_JIS などにも対応できます。

3. ZIP 書庫のフォルダ表示及び解凍
　ZIP 書庫をフォルダと見なして、中のファイルをファイルペインで見ることが可能です。ZIP 書庫の解凍、ZIP 形式の圧縮も可能です。

4. 画像表示、動画再生、音声再生
　画像ファイル(JPEG, PNG, GIF)は、詳細ペインに画像が表示されるほか、ファイルペインにサムネイル表示(サイズ変更可)することも可能です。減数表示やスライドショウも可能です。
　動画ファイル(少なくとも FLV に対応)や音声ファイル(少なくとも MP3 に対応)も、詳細ペインで再生可能です。
　　