🗂

WebDAVのファイル一覧をJSONで取得したい【WebDAVJSON】

に公開
Node.js
PHP
curl
JSON
WebDAV
tech

https://github.com/GitHub30/WebDAVJSON

WebDAV は通常 PROPFIND で XML を返しますが、フロントエンドやスクリプトからは JSON のほうが扱いやすい場面が多いです。WebDAVJSON は PHP / Node.js のシンプルなサーバーサイドスクリプトで、JSON の一覧・アップロード・削除・ダウンロードを REST 風に提供します（CORS・API キー認証・拡張子制限に対応）。(GitHub)

参考: 一般的な WebDAV では PROPFIND を使ってディレクトリ一覧を取得し、XML で応答します。(Nextcloud)

できること（ざっくり）

  • JSON でのファイル一覧取得（検索クエリも可）
  • ファイルのアップロード（multipart/form-data または PUT バイナリ）
  • ダウンロード（添付ヘッダー付きも可）
  • 削除（DELETE）
  • CORS 対応、任意の API キー必須化、許可拡張子の制限が可能
    (GitHub)

5分クイックスタート

Windows（Node.js + ローカル TLS）

winget install FiloSottile.mkcert Node.js --silent
mkcert -install
mkcert localhost
npm install mime-types
node index.mjs
# 例: await fetch('https://localhost:8443/').then(r => r.json())
# 例: await fetch('https://localhost:8443/?filename=foo.txt', { method: 'PUT', body: 'foobar' })

上記はリポジトリの手順そのまま。ローカル証明書を作って index.mjs を起動すれば、https://localhost:8443/ で JSON API が動作します。(GitHub)

Linux / PHP（ドロップイン）

wget https://raw.githubusercontent.com/GitHub30/WebDAVJSON/refs/heads/main/index.php
# 例: PHP 内蔵サーバで試すなら
php -S localhost:8000 index.php

index.php を任意の PHP サーバに配置すれば利用できます（上は起動例）。(GitHub)

API 一覧

Method Path 説明
GET / ファイル一覧（JSON）
GET /?filename=abc.txt ダウンロード
GET /?download&filename=abc.txt 添付ヘッダー付きダウンロード
POST/PUT / アップロード（multipart/form-data）
POST/PUT /?filename=abc.txt アップロード（バイナリ PUT）
DELETE /?filename=abc.txt 削除
GET /?q=abc 部分一致検索
(GitHub)

使い方（cURL）

一覧（JSON）

curl http://localhost:8000/

検索（部分一致）

curl "http://localhost:8000/?q=abc"

ダウンロード

curl -O "http://localhost:8000/?filename=abc.txt"

ダウンロード（添付）

curl -OJ "http://localhost:8000/?download&filename=abc.txt"

アップロード（multipart/form-data）

curl -F "file=@abc.txt" http://localhost:8000/

アップロード（PUT バイナリ）

curl -X PUT --data-binary @abc.txt "http://localhost:8000/?filename=abc.txt"

削除

curl -X DELETE "http://localhost:8000/?filename=abc.txt"

(GitHub)

フロントエンド（fetch 例）

async function listFiles(baseUrl = "http://localhost:8000/") {
  const res = await fetch(baseUrl, { headers: { "Accept": "application/json" } });
  if (!res.ok) throw new Error(await res.text());
  return res.json(); // [{ name, size, mtime, ... }]
}

async function uploadFile(file, baseUrl = "http://localhost:8000/") {
  const fd = new FormData();
  fd.append("file", file);
  const res = await fetch(baseUrl, { method: "POST", body: fd });
  if (!res.ok) throw new Error(await res.text());
  return res.json();
}

async function removeFile(name, baseUrl = "http://localhost:8000/") {
  const res = await fetch(`${baseUrl}?filename=${encodeURIComponent(name)}`, { method: "DELETE" });
  if (!res.ok) throw new Error(await res.text());
  return res.json();
}

認証・制限

API キー（任意）

index.php の $api_key に値を設定すると、すべてのリクエストに Authorization: Bearer <API_KEY> が必須になります。(GitHub)

curl -H "Authorization: Bearer your_api_key" http://localhost:8000/

許可拡張子

既定の許可拡張子は txt, jpg, png, webp, heic, gif, pdf, docx, xlsx, zip, mp4, gz。必要に応じて変更可能です。(GitHub)

CORS

CORS を有効化しており、フロントエンドから直接呼び出しやすくなっています。(GitHub)

なぜ JSON がうれしいのか（WebDAV との比較）

  • 伝統的な WebDAV: PROPFIND を送る → XML で一覧やメタデータが返る。XML 解析・ネームスペース処理が必要。(Nextcloud)
  • WebDAVJSON: GET / で JSON 一覧、PUT/POST/DELETE で直感的に操作。フロントでの利用や小規模ツールに最適。(GitHub)

大規模 WebDAV クライアント互換や高度な WebDAV 拡張が必要なら、従来の WebDAV 実装（例: Nextcloud の WebDAV API）を検討してください。**WebDAVJSON は「JSON で手早く扱うための薄いレイヤー」**という位置づけです。(Nextcloud)

注意点・ベストプラクティス

  • 公開環境では TLS（例: mkcert はローカル用）、認証、拡張子制限 を必ず設定する。(GitHub)
  • バイナリ PUT を使う場合は ?filename= を必ず付与し、既存ファイル上書きに注意。(GitHub)
  • 既存の WebDAV クライアント（Finder/エクスプローラー等）と直接互換ではない点は理解して採用する。（目的に応じて使い分け）

まとめ

  • WebDAVJSON は「WebDAV っぽいファイル操作を JSON でサクッと使いたい」用途に最適。
  • 一覧・検索・アップロード・削除が REST 風エンドポイントで提供され、フロントやスクリプトからの利用が簡単。(GitHub)
  • 従来の WebDAV (PROPFIND/XML) と併用・使い分けることで、開発体験を軽くできます。(Nextcloud)

リポジトリ

  • WebDAVJSON（README／サンプル・API 一覧・セットアップ手順）(GitHub)
  • 参考: 一般的な WebDAV の PROPFIND（Nextcloud 開発者ドキュメント）(Nextcloud)

Discussion