Width | zip358.com

Electronの脆弱性でアレをtrue設定はNGですよね。

2020.11.23

Electron(エレクトロン)でrequire（りくわいあ）というものを使用するとエラーになります。Electronの昔のバージョンはこれが使用できたんだって今はこれを脆弱性対策のため、OFF（false）にしている。その設定をtrueにするとOK何だけど、これは公式では認めてない不正解の書き方だとさ。

function createWindow() {
    mainWindow = new BrowserWindow({ width: 800, height: 600 , webPreferences: {
        nodeIntegration: true
	}});

じゃどうするれば良いのか？調べた結果、これが良いみたいです?。下記の書き方はちょっと面倒くさいけれども、こう書かなくては駄目だとさ。requireを使用しない場合はこんな感じで書かなくても良いです。

const path = require('path');
function createWindow() {
    mainWindow = new BrowserWindow({ width: 800, height: 600 , webPreferences: {
        nodeIntegration: false,
        contextIsolation: true,
        preload: path.join(__dirname, "preload.js")
	}});

const { contextBridge, ipcRenderer} = require("electron");
const request = require('request');//使ってないけど?


contextBridge.exposeInMainWorld(
    "hoge_hoge", {
        send: (data) => {
           consloe.log(data);
           document.getElementById("hoge").innerHtml = "Hey!! " + data;
           ipcRenderer.send("Hey!! " + data);
        },
        receive: (data) => {
                consloe.log(data);  
                //ipcRenderer.on(channel, (event, ...args) => func(...args));
        }
    }
);

<button id="btn">Hey!!</button>
<span id="hoge"></span>
<script>
	document.getElementById("btn").addEventListener("click",(e)=>{
		window.hoge_hoge.send("hogeO!!");
	});
</script>

タグ

600, 800, BrowserWindow, const, createWindow, Electron, false, function, Height, mainWindow, new, NG, nodeIntegration, off, OK, path, require, true, webPreferences, Width, アレ, エラー, エレクトロン, これ, ため, バージョン, もの, リグ, 下記, 不正解, 今, 何, 使用, 公式, 場合, 対策, 感じ, 昔, 書き方, 結果, 脆弱性, 設定, 駄目,

都道府県にカーソルを乗せると色が変わるちょっとした奴ムフ。

2020.03.09

Logging

JSONファイル、JSファイル、htmlファイルはそれぞれ下記になります。ちなみにいま作っている、あるサービスに使うために作ったもののお裾分けです。雛形として作っているのでおそらく、編集しやすいかなと思います。なお、SVGファイルは自分のソースからダウンロードするか、提供元のSVGをダウンロードするかしてください。ちなみにSVGは日本地図の標準をダウンロードしています。

デモ8：： https://zip358.com/tool/demo8/

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="common.js"></script>
    <title>Document</title>
</head>
<body onload="ken()">
    <object id="svg_ken" data="jpn03_a4.svg" type="image/svg+xml" width="700" height="700"></object><br>
    <a target="new456" rel="license" href="http://creativecommons.org/licenses/by-nc/2.1/jp/"><img alt="Creative Commons License" style="border-width: 0" src="http://i.creativecommons.org/l/by-nc/2.1/jp/88x31.png"></a><br>
    データ引用元：<a target="new123" href="https://www.kabipan.com/geography/whitemap/">https://www.kabipan.com/geography/whitemap/</a><br>
</body>
</html>

{
    "kenmei":[
        {"id":"1","ken":"北海道","eiji":"HOKKAIDO"},
        {"id":"2","ken":"青森県","eiji":"AOMORI"},
        {"id":"3","ken":"岩手県","eiji":"IWATE"},
        {"id":"4","ken":"宮城県","eiji":"MIYAGI"},
        {"id":"5","ken":"秋田県","eiji":"AKITA"},
        {"id":"6","ken":"山形県","eiji":"YAMAGATA"},
        {"id":"7","ken":"福島県","eiji":"FUKUSHIMA"},
        {"id":"8","ken":"茨城県","eiji":"IBARAKI"},
        {"id":"9","ken":"栃木県","eiji":"TOCHIGI"},
        {"id":"10","ken":"群馬県","eiji":"GUNMA"},
        {"id":"11","ken":"埼玉県","eiji":"SAITAMA"},
        {"id":"12","ken":"千葉県","eiji":"CHIBA"},
        {"id":"13","ken":"東京都","eiji":"TOKYO"},
        {"id":"14","ken":"神奈川県","eiji":"KANAGAWA"},
        {"id":"15","ken":"新潟県","eiji":"NIIGATA"},
        {"id":"16","ken":"富山県","eiji":"TOYAMA"},
        {"id":"17","ken":"石川県","eiji":"ISHIKAWA"},
        {"id":"18","ken":"福井県","eiji":"HUKUI"},
        {"id":"19","ken":"山梨県","eiji":"YAMANASHI"},
        {"id":"20","ken":"長野県","eiji":"NAGANO"},
        {"id":"21","ken":"岐阜県","eiji":"GUFU"},
        {"id":"22","ken":"静岡県","eiji":"SIZUOKA"},
        {"id":"23","ken":"愛知県","eiji":"AICHI"},
        {"id":"24","ken":"三重県","eiji":"MIE"},
        {"id":"25","ken":"滋賀県","eiji":"SHIGA"},
        {"id":"26","ken":"京都府","eiji":"KYOTO"},
        {"id":"27","ken":"大阪府","eiji":"OSAKA"},
        {"id":"28","ken":"兵庫県","eiji":"HYOGO"},
        {"id":"29","ken":"奈良県","eiji":"NARA"},
        {"id":"30","ken":"和歌山県","eiji":"WAKAYAMA"},
        {"id":"31","ken":"鳥取県","eiji":"TOTTORI"},
        {"id":"32","ken":"島根県","eiji":"SHIMANE"},
        {"id":"33","ken":"岡山県","eiji":"OKAYAMA"},
        {"id":"34","ken":"広島県","eiji":"HIROSHIMA"},
        {"id":"35","ken":"山口県","eiji":"YAMAGUCHI"},
        {"id":"36","ken":"徳島県","eiji":"TOKUSHIMA"},
        {"id":"37","ken":"香川県","eiji":"KAGAWA"},
        {"id":"38","ken":"愛媛県","eiji":"EHIME"},
        {"id":"39","ken":"高知県","eiji":"KOUCHI"},
        {"id":"40","ken":"福岡県","eiji":"FUKUOKA"},
        {"id":"41","ken":"佐賀県","eiji":"SAGA"},
        {"id":"42","ken":"長崎県","eiji":"NAGASAKI"},
        {"id":"43","ken":"熊本県","eiji":"KUMAMOTO"},
        {"id":"44","ken":"大分県","eiji":"OOITA"},
        {"id":"45","ken":"宮崎県","eiji":"MIYAZAKI"},
        {"id":"46","ken":"鹿児島県","eiji":"KAGOSHIMA"},
        {"id":"47","ken":"沖縄県","eiji":"OKINAWA"}
        ]
}


function ken() {
    $.getJSON("ken.json", function (json) {
        var svg_ken = document.getElementById('svg_ken').contentDocument;
        var ken = $(svg_ken);
        ken.find('path').attr('fill', '#fff');
        ////
        for (var i = 0; i < 47; i++) {
        ken.find("[id='" + json.kenmei[i].eiji + "']").on("click",{i:i,json:json},function (event) {
            window.location.href = "/page/" + event.data.json.kenmei[event.data.i].id;
        });
        }
        ////
        for (var i = 0; i < 47; i++) {
            ken.find("[id='" + json.kenmei[i].eiji + "']").hover(
                function () {
                    $(this).attr('fill', '#4080ff');
                },
                function () {
                    $(this).attr('fill', '#fff');
                });
        }
    });
}

タグ

358, 8, charset, com, content, demo, device-widt, DOCTYPE, gt, head, html, https, ja, JS, json, lang, lt, meta, name, quot, SVG, tool, UTF-, viewport, Width, zip, いま, お裾分け, カーソル, サービス, ソース, それぞれ, ダウンロード, ため, デモ, ファイル, ムフ, 下記, 地図, 奴, 提供, 日本, 標準, 編集, 自分, 色, 都道府県, 雛形,

Canvasで円がぐるぐる回る。

2019.03.09

Logging

<!DOCTYPE html>
<html>
    <head>
    </head>
<body>
    <canvas id="ctx" ></canvas>
    <script>
            "use strict";
            let x = 0,y = 0;
            let xs = 300,ys = 300;
            let xc = 1,yc = 1;
            let ctx = document.querySelector("#ctx");
            let canvas;
            ctx.width = window.screen.width;
            ctx.height = window.screen.height;
            if(ctx.getContext)
            {
               canvas = ctx.getContext("2d");
               setInterval(draw,77);
            }
            function draw(){
               canvas.beginPath();
               canvas.fillStyle = "#3399ff";
               canvas.arc(x,y,35,0,Math.PI*2,true);
               canvas.globalCompositeOperation = "xor";
               canvas.fill();
                x =((Math.sin (xc) * xs)) + 500;
                y =(Math.cos(yc) * ys) + 500;
                console.log(x + ":" + ctx.width);
                console.log(y + ":" + ctx.height);
                if(x < 0 || x > ctx.width)
                {
                   xs*=-1;
                }
                if(y < 0 || y > ctx.height)
                {
                    ys*=-1;
                }
                if(x<0)
                {
                    x=0;
                }
                if(y<0)
                {
                    y=0;
                }
                if(x > ctx.width)
                {
                    x=ctx.width;
                }
                if( y > ctx.height)
                {
                    y=ctx.height;
                }
                xc+=1
                if(xc>360)
                {
                    xc=0;
                }
                yc+=1
                if(yc>360)
                {
                    yc=0;
                }
            }
        </script>
</body>
</html>

Canvasでぐるぐる円を廻す。
ガラクタコードが少しあります、最初違うコードを書いていたので
これを可変していろいろお試しください。
https://zip358.com/tool/demo5/js/index-3.html

タグ

0, １, 300, body, Canvas, ctx, DOCTYPE, document, gt, head, Height, html, ID, let, lt, querySelector, screen, script, strict, use, Width, win, window, xc, xs, yc, YS, 円,

VBAオブジェクトを自動生成しイベントを付与する。

2019.01.12

Logging

VBAオブジェクトを自動生成しイベントを付与する。
サンプルコードです。
ダウンロードはこちら
https://zip358.com/tool/sample.zip

Dim chg_class(0 To 5) As chg
Public Sub objset()
Dim obj_ctl As Control
Dim i As Integer
For i = LBound(chg_class) To UBound(chg_class)
    Set obj_ctl = UserForm1.Controls.Add("Forms.TextBox.1", "Box" & i)
    obj_ctl.Top = 10 + 20 * i
    obj_ctl.Width = 200
    obj_ctl.Height = 20
    obj_ctl.Text = "ここを変更してみて、またはダブルクリック（" & i & "番）"
    Set chg_class(i) = New chg
    chg_class(i).set_evn obj_ctl, i
    Set obj_ctl = Nothing
Next i
End Sub

Private WithEvents TextB As MSForms.TextBox
Private index_no As Integer
Public Sub set_evn(hoge_obj As MSForms.TextBox, hoge As Integer)
    Set TextB = hoge_obj
    index_no = hoge
End Sub
Private Sub TextB_Change()
    MsgBox TextB.Text 'UserForm1("Box" & index_no)
End Sub
Private Sub TextB_DblClick(ByVal Cancel As MSForms.ReturnBoolean)
    MsgBox TextB.Text 'UserForm1("Box" & index_no)
End Sub

Private Sub TextBox1_Change()
MsgBox TextBox1
End Sub
Private Sub CommandButton1_Click()
End Sub
Private Sub UserForm_Click()
End Sub

タグ

0, １, 10, 20, 200, 358, 5, Add, amp, as, Box, chg, class, com, Control, Controls, ctl, Dim, For, Forms, Height, Integer, LBound, obj, objset, public, sample, set, Sub, Text, TextBox, To, tool, TOP, UBound, UserForm, VBA, Width, zip, イベント, オブジェクト, コード, ここ, こちら, サンプル, ダウンロード, 付与, 変更, 自動生成,

ANA旅割逆算日導きサービスモバイル版：最終

2016.05.04

Logging

<!DOCTYPE html>
<html>
    <head>
        <title>ANA旅割逆算日導きサービス（mobile）</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
    <script src="jquery-mobile/jquery.js"></script>
    <script src="jquery-mobile/jquery.mobile-1.4.5.min.js"></script>
    <style>
        .ui-page{
           background:#73cbe6;
        }
    </style>
    <script>
        $(function(){
            $("#ckday").click(function(){
                //alert($("#day").val().replace(/\-/g,'\/'));
            $.ajax({
                type: 'POST',
                url: "../ana_calendar/json.php",
                data:{day:$("#day").val().replace(/\-/g,'\/')},
                dataType: 'json',
                success: function(obj){
                    var str =   '<ul id="ana_listview" data-role="listview">\n';
                    str = str + '<li>予定日：' + obj.anaday + '</li>\n';
                    str = str + '<li>75日［旅割］の予約期日：' + obj.day75 + '</li>\n';
                    str = str + '<li>55日［旅割］の予約期日：' + obj.day55 + '</li>\n';
                    str = str + '<li>45日［旅割］の予約期日：' + obj.day45 + '</li>\n';
                    str = str + '<li>28日［旅割］の予約期日：' + obj.day28 + '</li>\n';
                    str = str + '<li>21日［旅割］の予約期日：' + obj.day21 + '</li>\n';
                    str = str + '</ul>\n';
                    $("#ana_api").html(str);
                    $("#ana_listview").listview().listview('refresh'); ;
                    }
                });
            });
        });
    </script>
    </head>
    <body>
        <div data-role="page" data-title="ANA旅割逆算日導きサービス（mobile）">
          <!--ヘッダー領域-->
          <div data-role="header">
            <h1>ANA旅割逆算日導きサービス（mobile）</h1>
          </div>
          <div role="main" class="ui-content">
              <input type="date" id="day">
              <button id="ckday" class="ui-btn">逆算する。</button>
              <span id="ana_api"></span>
          </div>
          <div data-role="footer">
            <h3>Copyright zip358.com</h3>
          </div>
        </div>
    </body>
</html>

ANA旅割逆算日導きサービスモバイル版：最終として webから逆算日を導きだすサービスを公開します。
ほんと・・・簡単なものですので最初からwebで作れたんじゃねぇっていう疑惑があると思うです。
webｺﾞﾆｮｺﾞﾆｮ…(ﾉﾟдﾟ(;￣Д￣)っていう誘惑はモバイル版のアプリを作る時からありましたがアプリ作るよって言ったので、有言実行ということで作ってみました。
作った結果ですけど・・・ウェブで作れるものはウェブで作ったほうが手間暇かからないという事がわかりました。 http://zip358.com/tool/ana_calendar/?［PC］
zip358.com/tool/ANAmobile/?[モバイル] ?

タグ

1.0, 1.4.5, 8, ANA, charset, content, css, device-width, DOCTYPE, gt, head, href, html, http, initial-scale, jquery, jquery-mobile, link, lt, meta, min, mobile, name, quot, rel, stylesheet, title, UTF-, viewport, Width, サービス, モバイル, 旅割, 最終, 逆算,