|
| 1 | +--- |
| 2 | +slug: /developers/apis/javascript-api/mount-data |
| 3 | +--- |
| 4 | + |
| 5 | +# マウントデータ |
| 6 | + |
| 7 | +<!-- |
| 8 | +# Mount data |
| 9 | +--> |
| 10 | + |
| 11 | +## ブラウザからディレクトリをマウントする |
| 12 | + |
| 13 | +<!-- |
| 14 | +## Mount a directory from the browser |
| 15 | +--> |
| 16 | + |
| 17 | +ブラウザから Playground にディレクトリをマウントするには、`window.showDirectoryPicker` API を使用できます。この API を使用する前に、[ブラウザの互換性](https://developer.mozilla.org/ja/docs/Web/API/Window/showDirectoryPicker#%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7)を確認してください。 |
| 18 | + |
| 19 | +<!-- |
| 20 | +You can mount a directory from the browser to Playground using the `window.showDirectoryPicker` API. Check the [Browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/Window/showDirectoryPicker#browser_compatibility) before using this API. |
| 21 | +--> |
| 22 | + |
| 23 | +```javascript |
| 24 | +window.showDirectoryPicker().then(function (directoryHandle) { |
| 25 | + window.parent.postMessage({ |
| 26 | + type: 'mount-directory-handle', |
| 27 | + directoryHandle, |
| 28 | + mountpoint: '/wordpress/wp-content/uploads/markdown/', |
| 29 | + }); |
| 30 | +}); |
| 31 | +``` |
| 32 | + |
| 33 | +## ブラウザの OPFS ストレージをマウントする |
| 34 | + |
| 35 | +<!-- |
| 36 | +## Mount Browser's OPFS Storage |
| 37 | +--> |
| 38 | + |
| 39 | +ブラウザ内で利用可能な OPFS ストレージをマウントすることもできます。内部的には、PHP リクエストが処理されるたびに、メモリファイルシステムが OPFS に同期されます。WordPress のインストール時に 3000 個以上のファイルの同期が発生して起動プロセスが遅くなるのを防ぐため、以下に示すように、起動後に OPFS のマウントを遅延させることをお勧めします。 |
| 40 | + |
| 41 | +<!-- |
| 42 | +You can mount OPFS storage available within the browser as well. Under the hood, we sync the memory filesystem to OPFS at the end of every PHP request served. It's advisable to delay mounting of OPFS after boot as shown below, so that WordPress installation doesn't trigger a sync of over 3000 files slowing down the boot process. |
| 43 | +--> |
| 44 | + |
| 45 | +```javascript |
| 46 | +const hasWordPressSiteInOPFS = false; // roll your logic to track this |
| 47 | +const blueprint = { |
| 48 | + preferredVersions: { |
| 49 | + php: '8.4', |
| 50 | + wp: 'latest', |
| 51 | + }, |
| 52 | + features: { |
| 53 | + networking: true, |
| 54 | + }, |
| 55 | + login: true, |
| 56 | + steps: [], // add steps |
| 57 | +}; |
| 58 | + |
| 59 | +try { |
| 60 | + const mountDescriptor: MountDescriptor = { |
| 61 | + device: { |
| 62 | + type: 'opfs', |
| 63 | + path: `my-unique-prefix/my-site`, |
| 64 | + }, |
| 65 | + mountpoint: '/wordpress', |
| 66 | + initialSyncDirection: hasWordPressSiteInOPFS ? 'opfs-to-memfs' : 'memfs-to-opfs', |
| 67 | + }; |
| 68 | + |
| 69 | + const client = await startPlaygroundWeb({ |
| 70 | + iframe: document.getElementById('wp'), |
| 71 | + remoteUrl: 'https://playground.wordpress.net/remote.html', |
| 72 | + blueprint: blueprint, |
| 73 | + shouldInstallWordPress: !hasWordPressSiteInOPFS, |
| 74 | + mounts: hasWordPressSiteInOPFS ? [mountDescriptor] : [], |
| 75 | + }); |
| 76 | + |
| 77 | + if (!hasWordPressSiteInOPFS) { |
| 78 | + await client.mountOpfs(mountDescriptor); |
| 79 | + } |
| 80 | + |
| 81 | + await client.isReady(); |
| 82 | + return client; |
| 83 | +} catch (error) { |
| 84 | + // handle error here |
| 85 | +} |
| 86 | +``` |
| 87 | + |
| 88 | +データの永続性に関する保証については、「ストレージの割り当て量と削除基準」(https://developer.mozilla.org/ja/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria)をご確認ください。 |
| 89 | + |
| 90 | +<!-- |
| 91 | +For persistence guarantees, check [Storage quotes and eviction criterias](https://developer.mozilla.org/en-US/docs/Web/API/Storage_API/Storage_quotas_and_eviction_criteria). |
| 92 | +--> |
0 commit comments