質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.78%

Electronアプリで、LocalStorageに追加したデータを、ウィンドウを閉じずに読み込みたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 2
  • VIEW 1,184
退会済みユーザー

退会済みユーザー

前提・実現したいこと

下記のコードから、実行ファイルを作ること。
ただし、settings.htmlで画像と文章をセットすると、メインウィンドウ(index.html)を一度も閉じることなく
次へボタンを押すとそのセットが表示されるようにしたいです。

下記のコードが入ったorg1-1ディレクトリにおいて、
npm i electron-packager --save-dev
node_modules/.bin/electron-packager ./ org1-1 --platform=darwin --arch=x64 --electron-version=1.4.13
のコマンドを実行しました。

上記のコマンドを打つ前のファイルの配置は、org1-1ディレクトリ下に
-free.pic/(画像フォルダで、このフォルダ下に画像ファイルが直接入ってます(下にディレクトリはないという意味です))
-index.html
-index.js
-package-lock.json(載せてません)
-package.json
-settings.html
-settings.js
-datas.html
となっていて、
実際に実行ファイルを作っていただくには、org1-1ディレクトリで上の2つのコマンドを実行してもらうとできると思います。

発生している問題・エラーメッセージ

上のようにして作ったアプリを実際に起動します。
settings.htmlで画像と文章をセットして「データを保存しました」とアラートは出て、
画像一覧を押すとdatas.htmlのウィンドウが出て先ほどセットしたものが追加されているのですが、
index.htmlの次へボタンを押しても、そのセットは表示されなくて、一度index.htmlのウィンドウを
閉じないとそのセットは読み込まれないです。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <title>index.htmlです</title>
  </head>

  <body>
    <div id="app">
      <div v-if="datas.length">
        <h3>画像</h3>
        <img v-bind:src="datas[nowItem].picture" width="200" height="200">
        <h3>名言</h3>
        <p>{{ datas[nowItem].quote }}</p>
      </div>
      <div v-else>
        <p>画像と文章をセットしてください</p>
      </div>
      <p><button @click="change">次へ</button></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="settings.js"></script>

  </body>

</html>
<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <title>setting.htmlです</title>
  </head>

  <body>
    <div id="app">
      <form>
        <label for="sentence">追加する文章</label><br>
        <textarea id="sentence" rows="5" cols="40" v-model="newItem"></textarea>
        <br>
        <label for="picture">追加する画像</label><br>
        <input type="file" id="picture">
        <button @click.prevent="addItem">決定</button>
      </form>

      <p><a href="datas.html" target="_blank">画像一覧</a></p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="settings.js"></script>
  </body>

</html>
//index.jsです
'use strict';

const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Menu = electron.Menu;
const dialog = electron.dialog;
let mainWindow;
let settingsWindow;

let menuTemplate = [{
  label: 'MyApp',
  submenu: [
    { label: 'About' , accelerator: 'CmdOrCtrl+Shift+A', click: function() { showAboutDialog(); }},
    { type: 'separator' },
    { label: 'Settings' , accelerator: 'CmdOrCtrl+,', click: function() { showSettingsWindow(); }},
    { type: 'separator' },
    { label: 'Quit' , accelerator: 'CmdOrCtrl+Q', click: function() { app.quit(); }}
  ]
}];

let menu = Menu.buildFromTemplate(menuTemplate);

function createMainWindow(){
   Menu.setApplicationMenu(menu);
   mainWindow = new BrowserWindow({
     width: 800,
     height: 600,
     webPreferences: {webSecurity: false}
   });
   mainWindow.loadURL('file://' + __dirname + '/index.html');
   mainWindow.on('closed', function() {
     mainWindow = null;
   });
}

function showSettingsWindow() {
  settingsWindow = new BrowserWindow({width: 600, height: 400});
  settingsWindow.loadURL('file://' + __dirname + '/settings.html');
  settingsWindow.show();
  settingsWindow.on('closed', function() {
    settingsWindow = null;
  });
}

function showAboutDialog(){
  dialog.showMessageBox({
    type: 'info',
    buttons: ['OK'],
    message: 'About This App',
    detail: 'This app was created by'
  });
}

app.on('ready', function() {
  createMainWindow();
});

app.on('window-all-closed', function() {
  if (process.platform != 'darwin') {
    app.quit();
  }
});

app.on('activate', function() {
  if (mainWindow === null) {
    createMainWindow();
  }
});
//settings.jsです
(function(){
  'use strict';
  const vm = new Vue({
    el: '#app',
    data:{
      newItem:'',
      nowItem:'0',
      datas:[]
    },
    watch:{

      datas:{
        handler: function(){
          localStorage.setItem('datas', JSON.stringify(this.datas));
          alert('データが保存されました');
          // settings.htmlで追加した画像と文章がindex.htmlで反映されないので
          // 付け足してみた1行
          //結果:データが保存されましたというアラートが無限に表示されてできなかった
          // this.datas = JSON.parse(localStorage.getItem('datas')) || [];
        },
        deep: true
      }
    },
    mounted: function(){
      this.datas = JSON.parse(localStorage.getItem('datas')) || [];
    },
    methods:{
      addItem: function(){
        const item = {
          picture: 'free_pic/' + document.getElementById("picture").files[0].name,
          quote: this.newItem
        }
        this.datas.push(item);
        this.newItem = '';
        // settingsで追加した画像と名言がindexで反映されないので
        // 付け足してみた1行
        //結果:できない
        // this.datas = JSON.parse(localStorage.getItem('datas')) || [];
      },
      deleteItem: function(index){
        this.datas.splice(index, 1);
      },
      change: function(){
        this.nowItem = Math.floor(Math.random()*this.datas.length);
      }
    }
  });
}());
//package.jsonです
{
  "name": "org1-1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron-packager": "^13.1.1"
  }
}

補足情報(FW/ツールのバージョンなど)

electron -v -> v1.4.13
npm -v -> 6.9.0(なんのヴァージョンかよくわかってないです)

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • te2ji

    2019/05/24 13:46

    何かのサンプルの改修依頼でしょうか?こちらのサイトでは作業依頼は推奨されてません。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/05/24 14:06

    こんにちは。「サンプルの改修依頼」という意味が分かっていないのですが、自分で作ったアプリでうまくいかないところがあって、それがどうやったら出来るようになるかを質問させてもらってるのですが、これは作業依頼というものにあたるのでしょうか?

    キャンセル

回答 1

checkベストアンサー

+1

ipcMain,ipcRenderer を使用して、settings.html の更新を伝播できればメインウィンドウで更新のトリガーがつかめるかと。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/28 10:39

    ご回答ありがとうございます。
    具体的な名称をいただけて助かります。
    今の所はまだわからず、妥協策としてショートカットキーで再読み込みにしております。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る