CEPパネルはgoogle chrome(Chromium)がベースとなっているため、セキュリティーの問題からローカルストレージへのアクセスは限定的な仕様になっています。

 

<HTML5標準によるアクセス>

HTML5ではFileSystem APIによってローカルストレージへのアクセスが可能になっています。ブラウザによって実装状況は違いますが、CEPの元になっているchromeでは使用可能です。

ただし、このFileSystem APIは前述のセキュリティ上の問題から、ユーザーがGUI上から選択したファイルは読み書きできますが、それがローカルストレージ上のどこに存在するかはわからない仕様になっています。つまり、スクリプトから「C:/User~」といった具体的な場所へアクセスしたり、ファイルパスを取得するはできないということです。

基本的な流れとしては「ユーザーが選択したファイル/ディレクトリ」を「FileReaderオブジェクトで仮想ディレクトリに読み込む」という手順になります。

なお、この読み込みは非同期で行われるので、その内容への処理は読み込みが完了していることを確認した後でなければなりません。具体的にはFileReaderオブジェクトにイベントフックをかけ、そこから呼び出されたら処理をすることになります。

//ヘッダ等は省略
<input type="file" id="inpFile" />
<div id="info"></div>
<div id="content"></div>
<script type="text/javascript"> //input要素へのイベントフック inpFile.addEventListener("change", loadFile, false); //ファイルが選択されたときの処理 function loadFile(e) { var file = e.target.files[0]; var res = "ファイル名:" + file.name + file.name + "<br/>"; res += "ファイルサイズ:" + file.size + file.size + "<br/>"; res += "ファイルタイプ:" + file.type + file.type + "<br/>"; info.innerHTML = res; //FileReaderオブジェクト作成 var reader = new FileReader(); //画像の場合 if (file.type.match("image.*")) { //ファイルの読み込みが終了したら... reader.onload = function(e) { console.log(reader.result); var img = document.createElement('img'); img.src = e.target.result; content.appendChild(img); } //読み込み実行 reader.readAsDataURL(file); //base64 } //テキストの場合 if (file.type.match("text.*")) { //ファイルの読み込みが終了したら... reader.onload = function(e) { console.log(reader.result); content.innerHTML = reader.result; } //読み込み実行 reader.readAsText(file, "utf-8"); //utf-8,shift-jis... } }
</script>

 

<Adobeのライブラリを使う(CC2014/CEP 5以降)>

FileSystem APIにはローカルスト―レージ関連の関数は他にもありますが、いかんせんファイルパスを取得することができないのでCEPパネルではいまひとつ使いどころがありません。

そういうことがあってなのか、AdobeではChromiumを拡張してローカルストレージへアクセスするAPIを用意しています。

showOpenDialog() システムのファイル/フォルダ選択ウィンドウを開く
readDir() フォルダの内容を読み込む
readFile() ファイルを読み込む
showSaveDialogEx() システムのファイル/フォルダ選択ウィンドウを開く
makedir() 新規フォルダの作成
writeFile() ファイルに書き込む
rename() ファイルやフォルダの名称を変更する
deleteFile() ファイルを削除する

 


システムのファイル/フォルダ選択ダイアログを開く

showOpenDialog(allowMultipleSelection, chooseDirectory, title, initialPath, fileTypes)

<引数>

allowMultipleSelection Boolean 複数選択を許可するか否か
chooseDirectory Boolean フォルダを選択する場合はtrue
title String ウィンドウのタイトル
initialPath String 初期表示のディレクトリ(""なら最後に開いたディレクトリ)
fileTypes Array(String) 選択できるファイルタイプを限定する場合は配列化した拡張子(ドットは不要)の文字列を渡す

<返り値>

data Array 選択されたファイル/フォルダのパス(配列)
err number エラーコード

<例>

//フォルダを選択させる
var path = window.cep.fs.showOpenDialog(false, true, "choose folder", "C:/Users/nakatoji/Desktop");
if (path.err == 0) {
    if (path.data[0] !== undefined) {
        console.log(path.data[0]);
    } else {
        console.log("cancelled");
    }
} else {
    console.log(path.err);
}
//ファイルを選択させる(複数)
var files = window.cep.fs.showOpenDialog(true, false, "choose files", "C:/Users/nakatoji/Desktop","");
if (files.err == 0) {
    if (files.data !== undefined) {
        for (var i=0; i< files.data.length; i++) {
            console.log(files.data[i]);
        }
    } else {
        console.log("cancelled");
    }
} else {
        console.log(files.err);
}

※すべてのOS/バージョンでチェックしていませんが、fileTypesは機能していないようです(調査中)


ファイル/フォルダの情報を取得する

stat(path)

<引数>

path String 対象のファイル/フォルダ(ディレクトリ)のパス

<返り値>

data.isFile() Boolean 対象がファイルの場合はtrue
data.isDirectory() Boolean 対象がフォルダの場合はtrue
data.mtime String 最終修正時間
err number エラーコード

<例>

var path = "C:/Users/nakatoji/Desktop/test.txt";
var res = window.cep.fs.stat(path);
if (res.err == 0) {
	console.log(res.data.isFile());
	console.log(res.data.mtime.toLocaleDateString());
	console.log(res.data.mtime.toLocaleTimeString());
} else {
	console.log(res.err);
}

※mtimeはJavascriptのDataオブジェクトなので、標準の日付関連関数が使用できます(参照:日付操作


フォルダの内容を読み込む

readdir(path)

<引数>

path String 読み込むフォルダ(ディレクトリ)のパス

<返り値>

data Array ファイル名、もしくはフォルダ名の配列
err number エラーコード

<例>

var path = "C:/Users/nakatoji/Desktop/test";
var res = window.cep.fs.readdir(path);
if (res.err == 0) {
    var fullPath, isFile;
    for (var i = 0; i < res.data.length; i++) {
        fullPath = path + "/" + res.data[i];
        isFile= window.cep.fs.stat(fullPath).data.isFile();
        if (isFile) {
            console.log(res.data[i]);
        } else {
            console.log("[dir] "+res.data[i]); //フォルダ
        }
    }
} else {
    console.log(res.err);
}

※window.cep.fs.stat(fullPath).data.isFile()でファイルかフォルダかを判定しています


ファイルを読み込む

readFile(path, encoding)

<引数>

path String ファイルパス
encoding String 読み込む際のエンコーディング(デフォルト=UTF-8。もしくはBase64)

<返り値>

data any 読み込んだ内容
err number エラーコード

<例>

var path= "C:/Users/nakatoji/Desktop/dummy.txt";
var res = window.cep.fs.readFile(path); //UTF-8
if (res.err == 0) {
    console.log(res.data);
} else {
    console.log(res.err);
}

※読み込めるエンコーディング形式はUTF-8、もしくはBase64のみです。


システムのファイル保存ダイアログを開く

showSaveDialogEx(title, initialPath, fileTypes, defaultName, friendlyFilePrefix, prompt, nameFieldLabel)

<引数>

title String ウィンドウのタイトル
initialPath String 初期表示のディレクトリ(""なら最後に開いたディレクトリ)
fileTypes Array(String) 意味不明(保存ダイアログなのに...)
defaultName String デフォルトのファイル名
friendlyFilePrefix String ?(オプション・Windowsのみ)
prompt String Saveボタンの文字列(オプション・Macのみ)
nameFieldLabel String ファイル名入力欄のラベルの文字列(オプション・Macのみ)

<返り値>

data String 選択されたディレクトリ
err number エラーコード

<例>

var path = window.cep.fs.showSaveDialogEx("choose directory",
	"C:/Users/nakatoji/Desktop", "", "test.txt");
if (path.err == 0) {
	if (path.data !== "") {
		console.log(path.data);
	} else {
		console.log("cancelled");
	}
} else {
	console.log(path.err);
}

新規フォルダ(ディレクトリ)の作成

makedir(path)

<引数>

path String 作成するファイルパス

<返り値>

err number エラーコード

<例>

var path = "C:/Users/nakatoji/Desktop/newFolder";
var res = window.cep.fs.makedir(path);
if (res.err !== 0) {
	console.log(res.err);
}

ファイルを書き込む

writeFile(path, data, encoding)

<引数>

path String ファイルパス
data String 書き込むデータ
encoding String 書き込む際のエンコーディング(デフォルト=UTF-8。もしくはBase64)

<返り値>

err number エラーコード

<例>

var path = "C:/Users/nakatoji/Desktop/test.txt";
var data = "This is a test file."
var res = window.cep.fs.writeFile(path, data); //UTF-8
if (res.err !== 0) {
	console.log(res.err);
}

※書き込めるエンコーディング形式はUTF-8、もしくはBase64のみです

※ファイルパスが既存のものの場合は書き換え、存在しない場合は新規ファイルが作成されます


ファイル名/フォルダ名を変更する

rename(oldPath, newPath)

<引数>

oldPath String 変更前のファイルパス
newPath String 変更後のファイルパス

<返り値>

err number エラーコード

<例>

var oldPath = "C:/Users/nakatoji/Desktop/test.txt";
var newPath = "C:/Users/nakatoji/Desktop/testUpdate.txt";
var res = window.cep.fs.rename(oldPath, newPath);
if (res.err !== 0) {
	console.log(res.err);
}

ファイルを削除する

deleteFile(path)

注意:AdobeのドキュメントではDeleteFileOrDirectory(path)というものがあり、記述には関数名通り「ファイルまたはディレクトリの削除」となっていますが、ライブラリ上ではファイルのみが削除可能なdeleteFileという関数しか機能していません。

<引数>

path String 削除するファイルのパス

<返り値>

err number エラーコード

<例>

var path = "C:/Users/nakatoji/Desktop/test.txt";
var res = window.cep.fs.deleteFile(path);
if (res.err !== 0) {
	console.log(res.err);
}

 

 

Joomla templates by a4joomla