HTML5 JavaScript FileSystemFileEntry テキスト処理(読込/書込)はGoogleChromeLabs/text-editor のソースが参考になる

プログラミング・Web開発カテゴリを表すパンダのイラスト プログラミング・Web開発

GoogleChromeLabs で紹介されてる、text-editor は HTMLのFileSystemFileEntryの技術が使われている。この技術を使うとブラウザ上からローカルテキストファイルの読み込み、書き込みが簡単にできる。すごくたまげた。

Git公開

Text-editerのサンプル実行サイト

Text Editor
Text Editor - Demo for the HTML5 File System Access API.

ソースコード

GitHub - GoogleChromeLabs/text-editor: A text editor build on the Native File System APIs
A text editor build on the Native File System APIs - GoogleChromeLabs/text-editor

ローカルで実行するには

srcフォルダのindex.htmlの中のリンクファイルに.をつける

1例:
変更前
index.html(31):     <link rel="manifest" href="/manifest.json">
変更後
index.html(31):     <link rel="manifest" href="./manifest.json">

FileSystemFileEntryの将来予測

下記MDN-Docsのをみると、現時点で実験的な機能とあるが、

IEの終焉も近くなるなかで、テキストファイルの使ったActivex(FileSystemObject)、HTAアプリケーションについては、Edge + FileSystemFileEntry への置き換えが進みそう。

さらに、Chrome、FileFox などにも使えるというIEを基準にしていた世界ではマルチブラウザも実現でき、ユーザーにとっての選択肢も多くなる。

しかし、できればブラウザでHTMLを起動した時、(onload)で指定したテキストファイルを読み込んでほしい。

FileSystemFileEntry - Web API | MDN
FileSystemFileEntry はファイルとディレクトリー項目 API のインターフェイスで、ファイルシステム内のファイルを表します。このファイルの属性を記述するプロパティと、そのファイルを読み出すために使用する File オブジェ...

文書情報

記事タイトル
HTML5 JavaScript FileSystemFileEntry テキスト処理(読込/書込)はGoogleChromeLabs/text-editor のソースが参考になる
作成日
更新日
Source URL
https://papanda925.com/?p=1843

ライセンス: 本記事のうち、当サイトが権利を有する本文・自作図表は、特記なき限り CC BY 4.0 で利用できます。生成AIを活用して作成・編集した内容を含みます。コードについて、別途ライセンス表示またはリンク先GitHubリポジトリのライセンスがある場合は、その条件を優先します。引用・第三者資料・画像・商標等は本ライセンスの対象外です。 利用ポリシー

タイトルとURLをコピーしました