2022-10-27

kintoneでcanvas上のクリックをした位置に点を描画する

技術

仕事で必要になったので勉強したソースコードのメモ。

(() => {
  "use strict";

  let kigou = "四角";

  kintone.events.on(
    ["app.record.create.show", "app.record.edit.show"],
    function (event) {
      const canvas = document.createElement("canvas");
      canvas.width = 100;
      canvas.height = 100;

      const record = event.record;
      // 座標
      let x = record.X.value;
      let y = record.Y.value;
      // canvasサイズ
      let w = canvas.width;
      let h = canvas.height;

      // 2次元の描画を行うメソッド
      const ctx = canvas.getContext("2d");
      const initCanvas = () => {
        // 背景塗る
        ctx.fillStyle = "#ccc";
        // fillRect(x座標, y座標, 幅, 高さ)
        ctx.fillRect(0, 0, w, h);

        // メモリ線を引く
        ctx.beginPath();
        ctx.moveTo(50, 0);
        ctx.lineTo(50, 100);
        ctx.closePath();
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(0, 50);
        ctx.lineTo(100, 50);
        ctx.closePath();
        ctx.stroke();

        // 初期値（マイナス）のときは描画しない
        if (x >= 0 && y >= 0) {
          if (kigou === "四角") {
            // クリックされた位置に描画処理
            ctx.fillStyle = "#000";
            // fillRect(x座標, y座標, 幅, 高さ)
            ctx.fillRect(x, y, 10, 10);
          } else {
            ctx.beginPath();
            // 円の中心座標: クリック位置
            // 半径: 50
            // 開始角度: 0度 (0 * Math.PI / 180)
            // 終了角度: 360度 (360 * Math.PI / 180)
            // 方向: true=反時計回りの円、false=時計回りの円
            ctx.arc(x, y, 5, (0 * Math.PI) / 180, (360 * Math.PI) / 180, false);
            ctx.fillStyle = "#000";
            ctx.fill();
            ctx.closePath();
            ctx.stroke();
          }
        }
      };
      initCanvas();

      let onClick = (e) => {
        let rect = e.target.getBoundingClientRect();
        // e.clientX(Y)がwindow左上からのクリックされた座標
        // rect.left(top)がwindow左上からのcanvasの座標
        x = e.clientX - rect.left;
        y = e.clientY - rect.top;

        const rec = kintone.app.record.get();
        // フィールドに座標を格納
        rec.record.X.value = x;
        rec.record.Y.value = y;

        kintone.app.record.set(rec);

        draw();
      };

      const draw = () => {
        initCanvas();
      };

      canvas.addEventListener("click", onClick, false);

      // キャンバス上に十字を追加
      const div = document.createElement("div");
      div.setAttribute("class", "cross");
      canvas.appendChild(div);

      // スペース上にキャンバスを追加
      const space = kintone.app.record.getSpaceElement("graph");
      space.appendChild(canvas);
      return event;
    }
  );

  kintone.events.on(
    ["app.record.create.change.記号", "app.record.edit.change.記号"],
    function (event) {
      kigou = event.changes.field.value;
    }
  );
})();

実行結果

以下のサイトがとても参考になりました。
【javascript,HTML5】canvas上のクリックをした位置に点を描画する方法 | web関連 | 勉強ブログ「二色人日記。」

2022-08-22

kintone アソシエイト

業務でkintoneアソシエイト資格が必要になり、youtubeの動画を見ていても正直つまらないので、
試験対策テキストの問題を解く、ということを中心に進めることにしました。

重要だと思ったところはエクセルに書いています。
問題は繰り返しできるように、エクセルに解答欄を設けました。

VBAで自動採点する仕組みも作りました。
間違えた問題をカウントして、復習に役立たせられるような仕組みも実装できたらいいなと思います。

2022-08-18

kintoneでjQueryを使うときの読み込み順

結論

こうしていると動かないんですね、という話です。
当然といえば当然なのですが、kintoneは上から順番に読み込まれていくようで、
jQueryのソースは一番上にしないと動かないです。

こちらが正解でした。

経緯

第12回 jQueryを利用してみよう

上記のサイトを参考にkintoneでjQueryを使おうとしたのですが、動かず。
なんでだろうと思って開発者ツールを見ていたら下記のエラーが出ていました。

Uncaught ReferenceError: jQuery is not defined

ちゃんとソース書いたかな？と思って色々調べていたら、
kintoneにはJSの読み込み順が存在するのですね。勉強になりました。

また、補足ですが kintone全体としては以下になるようですね。
①全体JS -> ②アプリJS ->③プラグインJS

※ただし読み込み順に対する公式からの見解は無い模様です（私は見つけられませんでした）

まとめ

JavaScriptは上から順に読み込まれるので、順番には気を付けよう！

参考文献

2022-04-17

競技プログラミングに参加してみました。

初参加

UNIQUE VISION Programming Contest 2022（AtCoder Beginner Contest 248） - AtCoder

転職活動中にプログラミングテストがあり、AtCoder社の競技プログラミングコンテストに練習がてら参加してみました。
言語は全てJavaで解きました。
問題はA～G,Exまであり、後ろになるほど難しくなってきます。
制限時間は100分。結果としてはまるまる使ってBまで行けました。

A問題は25分ぐらいかかってなんとか、、、

数字のみからなる、長さがちょうど 9 の文字列 S が与えられます。 S には 0 から 9 までのうち、ちょうど 1 つの数字を除いた 9 種類の数字が一度ずつ登場します。 S に登場しない唯一の数字を出力してください。

という問題でした。

import java.util.*;
 
public class Main {
    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        // 整数の入力
        String a = sc.next();
        String[] strArray = a.split("");
        boolean[] r = {false,false,false,false,false,false,false,false,false,false};
        for (String s : strArray) {
            r[Integer.valueOf(s)] = true;
        }
        for( int i = 0; i < 10 ; i++){
            if (!r[Integer.valueOf(i)]) {
                System.out.println(i);
                return;
            }
        }
    }
}

10個の数字でそれぞれ、出現したかどうかのフラグを持つような感じにしました。
難しく考えすぎたかな、、、なんかもうちょっと簡単にできたのかも。
解説を見ていたら0~9の合計数から引いて求める解法もあったりして、頭いいなぁという感想。

B問題のほうが簡単に感じる

A 匹のスライムがいます。すぬけくんが 1 回叫ぶたびに、スライムは K 倍に増殖します。スライムが B 匹以上になるには、すぬけくんは最小で何回叫ぶ必要があるでしょうか？
1≤A≤B≤10⁹
2≤K≤10⁹
入力は全て整数

これはそこまで難しくないな～と思ったんですが、一個だけ落とし穴がありました。

import java.util.*;
 
public class Main {
    public static void main(String[] args) {
        Scanner sc = new Scanner(System.in);
        // スペース区切りの整数の入力
        int a = sc.nextInt();
        int b = sc.nextInt();
        int k = sc.nextInt();
        int s = 0;
        int slime = a;
 
        while (true) {
            if (slime >= b) {
                System.out.println(s);
                return;
            }
            slime = slime * k;
            s++;
        }
    }
}

500000000 1000000000 1000000000
という値を入れたとき、int型ではオーバーフローします。
値の範囲が-2³¹ ～ 2³¹-1（およそ21億5千万）なので。
ですのでslimeはintではなくlongにしないとでした。
これに引っかかって数分悩みました。

追記：これがヒントになって解けました！
デバッグ力を高める！～5 年間の経験から学んだ、競プロ・アルゴリズム実装におけるバグ取りの戦略～ - Qiita

鬼門のC問題、まったくわからず惨敗。。。

f:id:uettyan_tech:20220417005758p:plain

これは全然わからなかったです。
解説見たけど、イマイチピンと来ず。
とはいえ疑問を言語化できず、何がわからないかわからない状態。。。

DP（ダイナミックプログラミング）というものをここで初めて知りました。
これはまた次回頑張ります。
なお、CがダメだったのでD以降は見てもいません。
まずはCが解けるように勉強進めます！

まとめ

初めてのコンテストにしては、Bまで解けたし良かったです。
（一問も解けないのではと心配していたので、一旦は良かったかなと。）
ただしDPは全くわからなかったので、壁にぶつかった感があります。
これは引き続き勉強進めたいと思います。

余談ですが、上位の人は1問数十秒から数分で解いていて、どんな頭しているんだと思いました。。。

2020-09-27

HDMI変換アダプタの不具合（画面チラつき）を改善できませんでした。

はじめに
事象
試したこと
販売元に問い合わせ
新品で再度接続、しかし…
まとめ

はじめに

上記の商品を購入したのですが、どうも下名の環境では気になる事象が発生しており、いろいろ試したのですが、結局のところ解決策は不明でした。

事象

ノートPCから外部モニタに接続して使用しているのですが、接続先のモニタで時々画面のチラつき（突然画面が黒くなって何も表示されなくなり、1秒ほど経つともとに戻る）が発生、というものです。

これが1日数回起きるため、ちょっとした作業中ならまだしも、仕事中だとまぁまぁストレスを感じます。※本記事を書いているときにも起きました

仕事でWeb会議をする機会が多くなり、会議中に上記事象が発生すると、自分だけ中断されて非常に困ります。

試したこと

別のUSBポートへの接続
ドライバーの更新
HDMIケーブルの交換

1. 接触不良を疑い、異なるUSBポートに接続してみたりなどを試しましたが、状況は改善されず。

2. ドライバーの更新も試してみましたが、状況変わらず。

3. HDMIケーブルが悪いのでは、と思い、正常に動作しているHDMI（普段は任天堂Switchに繋いでいる）ケーブルに交換してみましたが、ダメ。

販売元に問い合わせ

下記を参考に、思い切って販売元に問い合わせてみました。

zerokara-blog.com

「USB HDMI 変換アダプタ usb hdmi ケーブル hdmi 変換コネクタ 1080P 高画質安定出力コンパクト USB HDMI 変換コネクタ Windows XP/7/8/8.1/10 対応」
ASIN：B085HCFBP9

上記製品をノートPCから外部モニタに繋いで使用していますが、接続先のモニタで時々画面のチラつき（突然画面が黒くなって何も表示されなくなり、1秒ほど経つともとに戻る）が発生します。

1日作業をしていた場合、上記事象が数回程度の発生頻度です。

使用環境については、以下の通りです。
・ノートPC（Surface Book）※USB3.0ポートから接続
　Windows10 Pro　ver：1909
・接続先外部モニタ（BENQ V2420HP）※解像度は1920＊1080
・USB3.0 to HDMI Adapter　型番：X000U21YDD

試したことは以下の通りです。

・別のUSBポートへの接続
・ドライバーの更新
・HDMIケーブルの交換

既に返品期間を過ぎておりますので、返品対応は諦めています。
もし状況を改善する手段があればと思い、ご相談させていただいた次第です。
他に解決策などあれば、ご教示願います。
よろしくお願いします。