browser_app_base 0.1.0 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c449614e4619060aa9e9f5799bc67822e61c1f603ff099914aff5e60593828dd
-  data.tar.gz: c146b0df93c05a64dceb9d6987895635bef0d733f9421581aa421c51d7077fd9
+  metadata.gz: a22a122d81077a56ab0c76ef5faa6bcff0df41828eb333087735243890835f1a
+  data.tar.gz: 8360c3f68edf2eb31783ed4dcef383b3bba6c53ebc2924fb4023cb265bc1775a
 SHA512:
-  metadata.gz: ed31b5268858c2ac45a01f20924cfe569c0f360797bfad8650a37cf07eff9452b229dbc30ecd0b3200ac5ebcbddc20fcca8f485d4a49440573ee0c6c6a6b7cd2
-  data.tar.gz: 00fa73805f8d27f12464fea9bee92720c9303960890e23a02d804f060b6e1429f5b9b02c0dc58ff1bd0ae90ffd4f8ed38c918bdc45e843e203f68563dbce9009
+  metadata.gz: 7ee58439f8cec945ab9577fe7f2d27770a69ea070ef1ee00ce49d4a106bd114d0a3d0a1eae971b89532c64a3a3c435989cc92a39b03bf3c9f7697106b46d7856
+  data.tar.gz: a477e7007e72552b287078b76e19760896a19360ea31229ee34841d7171397b87b1b80a871a7e55d0e8cf2f07f06171aebad88a0cdf32801179fe941b0349184

data/.gitignore

@@ -10,3 +10,5 @@ Gemfile.lock
 
 # rspec failure tracking
 .rspec_status
+/lib/template/logs
+/history/history.json

data/.vscode/launch.json

@@ -15,6 +15,7 @@
             "type": "Ruby",
             "request": "launch",
             "cwd": "${workspaceRoot}/lib/template",
+            "args": [ "test" ],
             "program": "${workspaceRoot}/lib/template/start.rb"
         }
     ]

data/README.md

@@ -62,9 +62,11 @@ ui application sample
 $ /tmp/test/bin/start_my_app.rb
 ```
 
+![app](img/app.png)
+
 ## browser setting
 
-    config/browser.json
+    ${home}/${app_nane}/config/browser.json
     Set the path for your Windows or Linux Chrome browser
 
 ```json
@@ -103,6 +105,85 @@ class MyApp < AppMainBase
 end
 ```
 
+## Application Setting 
+
+    ${home}/${app_nane}/config/setting.json
+
+
+```json
+[
+  {
+    "name": "name1",
+    "value": "value1 2 3 4",
+    "type": "input",
+    "select": "",
+    "description": "設定項目1"
+  },
+  {
+    "name": "name2",
+    "value": true,
+    "type": "checkbox",
+    "select": "",
+    "description": "有効にする場合はチェック"
+  },
+  {
+    "name": "name3",
+    "value": "2",
+    "type": "select",
+    "select": [
+      "1",
+      "2",
+      "3",
+      "4",
+      "5"
+    ],
+    "description": "選択項目"
+  },
+  {
+    "name": "name4",
+    "value": "value4",
+    "type": "input",
+    "select": "",
+    "description": "設定項目4"
+  },
+  {
+    "name": "name5",
+    "value": "value5",
+    "type": "input",
+    "select": "",
+    "description": "設定項目5"
+  },
+  {
+    "name": "name6",
+    "value": "value6",
+    "type": "input",
+    "select": "",
+    "description": "設定項目6"
+  }
+]
+```
+```ruby
+class MyApp < AppMainBase
+  def start(argv)
+    # popup message
+    app_send("popup:message string")
+
+    # log message
+    yield "log message"
+    end
+
+    # read setting
+    puts @config["name1"]
+end
+```
+
+Setting menu
+![app](img/setting_menu.png)
+
+
+Setting screen
+![app](img/setting.png)
+
 ## Development
 
 To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).

data/bin/start_sample.rb

@@ -5,15 +5,28 @@ require "facter"
 require "tmpdir"
 
 # tmpdirディレクトリにコピー
-dir = File.dirname(File.expand_path(__FILE__)) + "/../"
+dir = File.dirname(File.expand_path(__FILE__ + "/../"))
+home_dir = ENV["HOME"] + "/" + dir.split("/")[-1]
+puts "home_dir=#{$home_dir}"
 Dir.mktmpdir { |tmpdir|
-  puts tmpdir
+  outdir = tmpdir + "/" + dir.split("/")[-1]
+  FileUtils.mkdir_p outdir
+  FileUtils.mkdir_p home_dir
+  puts outdir
   Dir.glob("#{dir}/lib/*") do |f|
-    puts "#{f} => #{tmpdir}"
-    FileUtils.cp_r f, "#{tmpdir}"
+    if f =~ /config$/
+      # configはhomeにコピー
+      if !File.exists? "#{home_dir}/config"
+        puts "#{f} => #{home_dir}/"
+        FileUtils.cp_r f, "#{home_dir}/"
+      end
+    else
+      puts "#{f} => #{outdir}/"
+      FileUtils.cp_r f, "#{outdir}/"
+    end
   end
 
-  FileUtils.cd "#{tmpdir}"
+  FileUtils.cd "#{outdir}"
   kernel = Facter.value(:kernel)
   if kernel == "windows"
     system "rubyw ./start.rb"
@@ -22,4 +35,5 @@ Dir.mktmpdir { |tmpdir|
   else
     system "ruby ./start.rb"
   end
+  FileUtils.cd ENV["HOME"]
 }

data/lib/browser_app_base/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module BrowserAppBase
-  VERSION = "0.1.0"
+  VERSION = "0.1.3"
 end

data/lib/template/config/browser.json

@@ -1,4 +1,4 @@
 {
     "chrome_win": "start chrome",
-    "chrome_linux": "/bin/google-chrome"
-}
+    "chrome_linux": "google-chrome"
+}

data/lib/template/config.ru

@@ -8,10 +8,7 @@ require "json"
 require "./server"
 require "./wsserver"
 
-temp_dir = ENV["temp"]
-temp_dir = "/tmp" if temp_dir == nil
-puts "temp_dir=#{temp_dir}"
-access_log = File.new("#{temp_dir}/logs/sinatra.log", "a+")
+access_log = File.new("#{$home_dir}/logs/sinatra.log", "a+")
 access_log.sync = true
 use Rack::CommonLogger, access_log
 
@@ -39,14 +36,18 @@ end
 get "/config/*.*" do |file, ext|
   content_type "text/json", :charset => "utf-8"
   puts "#{file}.#{ext}"
-  File.read "config/#{file}.#{ext}"
+  File.read "#{$home_dir}/config/#{file}.#{ext}"
 end
 
 post "/history/*.*" do |file, ext|
   content_type "text/json", :charset => "utf-8"
   puts "#{file}.#{ext}"
   p = params[:param1]
-  buf = File.read "history/#{file}.#{ext}"
+  begin
+    buf = File.read "#{$home_dir}/history/#{file}.#{ext}"
+  rescue
+    buf = ""
+  end
   data = eval(buf)
   if data != nil
     if p != ""
@@ -101,6 +102,6 @@ configure do
 
 end
 
-#\ --port 36809
+#\ --port 40173
 
 run Sinatra::Application

data/lib/template/css/index.css

@@ -121,4 +121,58 @@ input[type="search"] {
 
 input[type="search"]::-webkit-search-cancel-button {
     -webkit-appearance: searchfield-cancel-button;
+}
+
+/* menu */
+.menu {
+    display: flex;
+    justify-content: flex-start;
+    list-style-type: none;
+    color: #393737;
+    padding: 0;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.menu li {
+    position: relative;
+    width: 100px;
+    margin-left: 1px;
+    padding: 5px;
+    background: #d8dada;
+    list-style-type: none;
+}
+
+.menu li a {
+    color: rgb(20, 114, 192);
+}
+
+.menu li a:hover {
+    background: #eba399;
+}
+
+.menuSub {
+    position: absolute;
+    margin-left: -6px;
+    padding: 0;
+    display: none;
+}
+
+/*.openが付与された時、表示の設定*/
+.menuSub.open {
+    display: block;
+}
+
+.menuSub li a {
+    padding: 5px;
+    margin-left: -5px;
+    margin-right: -5px;
+    margin-bottom: -5px;
+    display: block;
+    color: rgb(20, 114, 192);
+    text-decoration: none;
+}
+
+.menuSub li a:hover {
+    background: #eba399;
 }

data/lib/template/html/index.html

@@ -11,8 +11,8 @@
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
 
-  <script src="http://localhost:36809/js/main.js"></script>
-  <link rel="stylesheet" href="http://localhost:36809/css/index.css" type="text/css">
+  <script src="js/main.js"></script>
+  <link rel="stylesheet" href="css/index.css" type="text/css">
 </head>
 
 <body>
@@ -21,22 +21,33 @@
   </div>
   <h4>RubyAppBase</h4>
   <hr>
-  <table>
-    <tr>
-      <td>
-        <input type="button" id="exec" name="exec" value="実行">
-      </td>
-      <td>
-        <input type="button" id="stop" name="stop" value="停止">
-      </td>
-      <td>
-        <div id="setting_dialog" style="display:none;">
-          <dl id="wrap"></dl>
-        </div>
-        <input type="button" id="setting" value="設定" />
-      </td>
-    </tr>
-  </table>
+  <!-- menu -->
+  <div id="setting_dialog" style="display:none;">
+    <dl id="wrap"></dl>
+  </div>
+  <div>
+    <ul class="menu">
+      <Li><a href="#" id="exec" name="exec">実行</a></li>
+      <li><a href="#" id="stop" name="stop">停止</a></li>
+      <li>
+        設定
+        <ul class="menuSub">
+          <li><a href="#" id="setting">設定</a></li>
+          <li><a href="#" id="save_setting">設定保存</a></li>
+          <li><a href="#" id="load_setting">設定読み込み</a></li>
+        </ul>
+      </li>
+      <!--
+      <li>
+        menu3
+        <ul class="menuSub">
+          <li><a href="#">menu3-1</a></li>
+          <li><a href="#">menu3-2</a></li>
+        </ul>
+      </li>
+      -->
+    </ul>
+  </div>
 
   <div id="dialog1" style="display:none;">
     <input class="inarea" type="search" name="search_str" id="search_str">

data/lib/template/html/test.html

@@ -1,85 +0,0 @@
-<!DOCTYPE html>
-<html lang="ja">
-
-<head>
-    <meta charset="UTF-8">
-    <title>modalをcomponentで作る</title>
-</head>
-
-<style>
-    #content {
-        z-index: 10;
-        width: 50%;
-        padding: 1em;
-        background: #fff;
-    }
-
-    #overlay {
-        /*　要素を重ねた時の順番　*/
-
-        z-index: 1;
-
-        /*　画面全体を覆う設定　*/
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, 0.5);
-
-        /*　画面の中央に要素を表示させる設定　*/
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-    }
-</style>
-
-<body>
-    <div id="app">
-
-        <button v-on:click="openModal">Click</button>
-
-        <open-modal v-show="showContent" v-on:from-child="closeModal">slotからモーダルウィンドウへ</open-modal>
-
-    </div>
-
-    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
-    <script>
-        Vue.component('open-modal', {
-            template: `
-    <div id="overlay" v-on:click="clickEvent">
-        <div id="content"　 v-on:click="stopEvent">
-          <p><slot></slot></p>
-          <button v-on:click="clickEvent">close</button>
-        </div>
-    </div>
-    `,
-            methods: {
-                clickEvent: function () {
-                    this.$emit('from-child')
-                },
-                stopEvent: function () {
-                    event.stopPropagation()
-                }
-            }
-        })
-
-        new Vue({
-            el: '#app',
-            data: {
-                showContent: false
-            },
-            methods: {
-                openModal: function () {
-                    this.showContent = true
-                },
-                closeModal: function () {
-                    this.showContent = false
-                },
-            }
-        })
-    </script>
-</body>
-
-</html>

data/lib/template/js/main.js

@@ -115,7 +115,7 @@ function autocomp(id, file_kind) {
         },
         source: function (req, resp) {
             $.ajax({
-                url: "http://localhost:36809/search?path=" + $("#" + id).val() + "&kind=" + file_kind,
+                url: "search?path=" + $("#" + id).val() + "&kind=" + file_kind,
                 type: "GET",
                 cache: false,
                 dataType: "json",
@@ -148,7 +148,7 @@ function autocomp_history(id, file_name) {
         },
         source: function (req, resp) {
             $.ajax({
-                url: "http://localhost:36809/history/" + file_name,
+                url: "history/" + file_name,
                 type: "POST",
                 cache: false,
                 dataType: "json",
@@ -291,6 +291,7 @@ function setting_dialog(open_id, dialog_id, json_file) {
                                 //console.log("type=" + s[i].type);
                             }
                         }
+                        // Jsonデータをサーバに送信
                         $ws.send("setting:" + JSON.stringify(json_data));
                     });
                     $(this).dialog("close");
@@ -303,6 +304,57 @@ function setting_dialog(open_id, dialog_id, json_file) {
     });
 }
 
+// 設定読み込み
+function load_setting(open_id) {
+    document.getElementById(open_id).onclick = async () => {
+        [fileHandle] = await window.showOpenFilePicker();
+        const file = await fileHandle.getFile();
+        const json_data = await file.text();
+        console.log(json_data);
+        // Jsonデータをサーバに送信
+        $ws.send("setting:" + json_data);
+    };
+}
+
+// 設定保存
+function save_setting(open_id, json_file) {
+    document.getElementById(open_id).onclick = async () => {
+        var json_data = ""
+        $.ajax({
+            // jsonの読み込み
+            type: "GET",
+            url: json_file, // ファイルパス（相対パス）
+            dataType: "json", // ファイル形式
+            async: false // 非同期通信フラグ
+        }).then(
+            function (json) {
+                // 読み込み成功時の処理
+                json_data = JSON.stringify(json, null, 2);
+                console.log("json=" + json_data);
+            },
+            function () {
+                // 読み込み失敗時の処理
+                console.log("読み込みに失敗しました");
+            }
+        );
+        // Jsonを保存
+        const opts = {
+            suggestedName: 'setting.json',
+            types: [{
+                description: 'Text file',
+                accept: { 'text/plain': ['.json'] },
+            }],
+        };
+        // ファイルをどこにどんな名前で保存するか訊くダイアログを表示
+        const saveHandle = await window.showSaveFilePicker(opts)
+        // 保存先ファイルに書き込み準備
+        const writable = await saveHandle.createWritable();
+        // 先程同様に書き込んで終了
+        await writable.write(json_data);
+        await writable.close();
+    };
+}
+
 function get_dirname(path) {
     var result = path.replace(/\\/g, '/').replace(/\/[^\/]*$/, '');
     if (result.match(/^[^\/]*\.[^\/\.]*$/)) {
@@ -323,12 +375,27 @@ function openFile(file) {
 // 起動時の処理
 $(document).ready(function () {
 
+    // サーバに接続
+    server_connect("ws://localhost:40173/wsserver")
     window.onload = function (e) {
-        console.log("onload");
         // サーバに接続
-        server_connect("ws://localhost:36809/wsserver")
+        //server_connect("ws://localhost:40173/wsserver")
     }
 
+    // menu
+    $(function () {
+        $(".menu li").hover(
+            function () {
+                //クラス名「open」を付与する
+                $(this).children(".menuSub").addClass("open");
+                //hoverが外れた場合
+            }, function () {
+                //クラス名「open」を取り除く
+                $(this).children(".menuSub").removeClass("open");
+            }
+        );
+    });
+
     // ウインドウサイズ
     var width = 800;
     var height = 600;
@@ -357,6 +424,15 @@ $(document).ready(function () {
         //console.log("auto_scroll=" + $auto_scroll);
     });
 
+    // 設定ダイアログ
+    setting_dialog("setting", "setting_dialog", "config/setting.json");
+
+    // 設定保存
+    save_setting("save_setting", "config/setting.json");
+
+    // 設定読み込み
+    load_setting("load_setting");
+
     // ハンドラ登録
     $("#stop").click(function () {
         send_message("stop");
@@ -367,12 +443,11 @@ $(document).ready(function () {
         send_message("exec:" + $("#upFile").val());
     });
 
+
     select_file_dialog("search_str", "file", "dialog1", "select_file", "upFile");
 
     select_file_dialog("search_str2", "dir", "dialog2", "select_dir", "upDir");
 
-    setting_dialog("setting", "setting_dialog", "config/setting.json");
-
     autocomp_history("upFile", "history.json")
 
 });

data/lib/template/server_app_base.rb

@@ -41,7 +41,11 @@ class AppMainBase
 
   # 履歴の保存
   def add_history(file, history_data, max = 10)
-    buf = File.read "history/#{file}"
+    begin
+      buf = File.read "#{$home_dir}history/#{file}"
+    rescue
+      buf = ""
+    end
     data = eval(buf)
     if data == nil
       data = []
@@ -50,7 +54,7 @@ class AppMainBase
       data.prepend history_data
     end
     data = data.uniq[0..max - 1]
-    File.open("history/#{file}", "w") do |f|
+    File.open("#{$home_dir}history/#{file}", "w") do |f|
       f.write JSON.pretty_generate data
     end
   end

data/lib/template/start.rb

@@ -50,11 +50,18 @@ end
 dir = File.dirname(File.expand_path(__FILE__))
 FileUtils.cd dir
 
-temp_dir = ENV["temp"]
-temp_dir = "/tmp" if temp_dir == nil
-puts "temp_dir=#{temp_dir}"
-FileUtils.mkdir_p("#{temp_dir}/logs")
-Output.console_and_file("#{temp_dir}/logs/app.log", true)
+# ディレクトリ作成
+pp ARGV
+if ARGV[0] == "test"
+  $home_dir = "./"
+  ARGV = []
+else
+  $home_dir = ENV["HOME"] + "/" + dir.split("/")[-1] + "/"
+end
+puts "home_dir=#{$home_dir}"
+FileUtils.mkdir_p("#{$home_dir}/logs")
+FileUtils.mkdir_p("#{$home_dir}/history")
+Output.console_and_file("#{$home_dir}/logs/app.log", true)
 
 # 空きポートを取得
 def get_unused_port
@@ -98,7 +105,7 @@ begin
     end
 
     puts "start browser"
-    json_file = File.dirname(File.expand_path(__FILE__)) + "/config/browser.json"
+    json_file = "#{$home_dir}/config/browser.json"
     json = JSON.parse(File.read json_file)
     puts json
     kernel = Facter.value(:kernel)

data/lib/template/wsserver.rb

@@ -51,7 +51,7 @@ class WsServer < Sinatra::Base
         end
         ws.onmessage do |msg|
           puts msg
-          json = JSON.parse(File.read("config/setting.json"))
+          json = JSON.parse(File.read("#{$home_dir}/config/setting.json"))
           json_config = config_json_hash(json)
           $app.set_config(json_config)
           if msg =~ /^exec:/
@@ -97,12 +97,17 @@ class WsServer < Sinatra::Base
           end
           if msg =~ /^setting:/
             json_string = msg.gsub(/^setting:/, "")
-            json = JSON.parse(json_string)
-            File.open("config/setting.json", "w") do |w|
-              w.puts JSON.pretty_generate(json)
+            begin
+              json = JSON.parse(json_string)
+              File.open("#{$home_dir}/config/setting.json", "w") do |w|
+                w.puts JSON.pretty_generate(json)
+              end
+              json_config = config_json_hash(json)
+              $app.set_config(json_config)
+            rescue
+              # jsonファイルではない
+              ws_send("app_end:error")
             end
-            json_config = config_json_hash(json)
-            $app.set_config(json_config)
           end
           if msg =~ /^openfile:/
             file = msg.gsub(/^openfile:/, "")

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: browser_app_base
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.3
 platform: ruby
 authors:
 - masataka kuwayama
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-01-19 00:00:00.000000000 Z
+date: 2022-08-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sinatra
@@ -113,6 +113,9 @@ files:
 - bin/create_browser_app.rb
 - bin/start_sample.rb
 - browser_app_base.gemspec
+- img/app.png
+- img/setting.png
+- img/setting_menu.png
 - lib/browser_app_base.rb
 - lib/browser_app_base/version.rb
 - lib/template/app_load.rb