[React][TypeScript] Hello World的なもの(2022年1月版)(^^;)(3) 静的なページとReact使った別ページを追加してみる。
[React][TypeScript] Hello World的なもの(2022年1月版)(^^;)(2) Firefoxでデバッグしてみる。に静的なページとReactを使った動的なページ(動的と言っても実際に追加するのはReact使ってるけど全然動的ではない)を追加してみる。
続きを読む-->
[React][TypeScript] Hello World的なもの(2022年1月版)(^^;)(2) Firefoxでデバッグしてみる。に静的なページとReactを使った動的なページ(動的と言っても実際に追加するのはReact使ってるけど全然動的ではない)を追加してみる。
続きを読む[React][TypeScript] Hello World的なもの(2022年1月版)(^^;) ではChromeを使ってデバッグする方法を最後に書いたけど、今回はFireFoxを使う方法を書く。ChromeOSのLinux開発環境でChromeを使ってデバッグができなかったんで試してみた感じだ。
続きを読む[React][TypeScript] Hello World的なもの(1)(更新!)が古くなってたので更新した。
次のページを参考にして構築してみた。(抜けてたらスマン)
[Electron] ファイルオープンダイアログとファイル読み込みに保存ボタンを追加して、ファイル保存ダイアログの表示とファイル保存処理を追加した。
まるっと、新しいソースもアップしておく。
保存ボタンを押した時の処理をあげておく。
// ファイル保存ダイアログを表示する
dialog.showSaveDialog(remote.getCurrentWindow(), {
filters:[
{ name: "Text File", extensions:["txt"]},
{ name: "All Files", extensions: ["*"]}
]}, filename=>{
if(filename) {
// ファイルに保存
fs.writeFile(filename, this.state.text, err=>{
if(err) {
alert(err);
}
});
}
});
dialog.showSaveDialogでファイル保存ダイアログを表示する。
第1引数は、親ウインドウでremote.getCurrentWindow()でレンダラープロセスで表示しているページのウインドウが取得できる。
第2引数は、ダイアログのオプションを指定する。
よく使いそうなのをピックアップして書いとく。詳細はドキュメントを見よ!
filters:[
{ name: "Text File", extensions:["txt"]},
{ name: "All Files", extensions: ["*"]}
],
第3引数は、コールバック関数。
入力したファイル名(フルパス)が渡される関数を指定する。
上に載せたソースでは、Node.jsのfs.writeFileを使ってTextAreaの内容を保存している。
まるっと、ソースをアップしておく。
ここにアップしたソースから、レンダラープロセスの頭の方に追加するのと、開くボタンをクリックした時の処理をあげとく。
import {remote} from "electron";
import * as fs from "fs";
const dialog = remote.dialog;
// ファイルオープンダイアログを表示する
dialog.showOpenDialog(remote.getCurrentWindow(), {
filters:[
{ name: "Text File", extensions:["txt"]},
{ name: "All Files", extensions: ["*"]}
],
properties: ["openFile"]
}, filePaths=>{
if(filePaths.length != 0) {
// ファイル読み込み
fs.readFile(filePaths[0], { encoding:"utf-8"}, (err, data)=>{
if(err) {
alert(err);
} else {
this.setState({text:data});
}
});
}
});
まず、import部分の説明。
dialogはメインプロセスでしか使えないのでremoteをインポートしてる。Electronでは、Node.jsのAPIが使用できるので、ファイルを読み込むためにfsをインポートしている。
クリックした時の処理。
dialog.showOpenDialogでファイルオープンダイアログを表示する。
第1引数は、親ウインドウを指定する。remote.getCurrentWindow()でレンダラープロセスで表示しているページのウインドウが取得できる。
第2引数は、ダイアログのオプションを指定する。
よく使いそうなのをピックアップして書いとく。詳細はドキュメントを見ればいいじゃんw
filters:[
{ name: "Text File", extensions:["txt"]},
{ name: "All Files", extensions: ["*"]}
],
第3引数は、コールバック関数。
選択したファイル名(フルパス)の配列が渡される関数を指定する。
上に載せたソースでは、Node.jsのfs.readFileを使って読み込んで最終的にTextAreaに設定している。(TextAreaに設定するあたりはRectを使っている)