【JavaScript】間取り図から部屋の寸法を算出するツールを作ってみた!

スポンサーリンク
PC創作
マイケル
マイケル
エレキベア!
来月の引越し楽しみだね
エレキベア
エレキベア
新住居楽しみクマ〜〜〜〜
部屋も割と広かったしいろいろ置けそうクマね
エレキベア
エレキベア
もうレイアウトとか決まったクマ??
マイケル
マイケル
ううん!
部屋の広さをちゃんと測ってから考えようと思うよ!
エレキベア
エレキベア
内見の時に測らなかったクマ??
マイケル
マイケル
・・・。
マイケル
マイケル
((測り忘れた・・・・。))
エレキベア
エレキベア
やっちまったクマね・・・・。
スポンサーリンク

間取り図から寸法を求める

マイケル
マイケル
というわけでどうにか寸法の情報を調べようとググりましたが、
やはり部屋の寸法まで載ってはいませんでした・・・。
エレキベア
エレキベア
これは詰んだんじゃないクマかね〜〜
マイケル
マイケル
いいや諦めるのはまだ早い!
俺らには「間取り図」がある!!
Madori sample
↑間取り図
エレキベア
エレキベア
間取り図ってこれクマよね・・・。
確かに大体載ってるクマが、これだけで寸法がわかるクマ??
マイケル
マイケル
面積の式から考えたら簡単で、
面積と縦横の比率さえ分かれば算出できるんだ!
Screenshot 2020 09 26 17 17 59
マイケル
マイケル
四角形の面積はこんな感じで
縦の長さ×横の長さ
で計算できるのは知ってるよね?
エレキベア
エレキベア
クマだからってなめすぎクマよ
小学生レベルの知識クマ
マイケル
マイケル
ということは、仮に

  • 面積 → 24 [m^2]
  • 横の長さ → x [m]
  • 縦:横の比率 → 3:2


と仮定すると、縦の長さは横の長さの3/2倍ということになるからこういう図になるね!

Screenshot 2020 09 26 17 18 12
エレキベア
エレキベア
なるほどクマ・・・
面積を比率で割った数の平方根を求めれば長さを求めることができるのクマね
マイケル
マイケル
その通り!!
比率は画像だけでも判別できるから、間取り図からも算出できるんだ!
エレキベア
エレキベア
長さを測るだけで比率は求めることはできるクマからね〜〜
マイケル
マイケル
うん!
だけど間取り図はあくまで部屋のイメージだから正確ではないという点には注意しないといけなさそうだね・・・。
エレキベア
エレキベア
参考レベル、ということクマね
スポンサーリンク

間取り図寸法変換くん

マイケル
マイケル
というわけで、さっそく今回求めた式を使ってツールを作ってみたぞ!
エレキベア
エレキベア
なかなか仕事が早いクマね
マイケル
マイケル
今回はWEBツールとして使えるように、
「JavaScript」を使って作りました!
マイケル
マイケル
その名も・・・
\間取り図寸法変換君/
Screenshot 2020 09 26 12 03 07
エレキベア
エレキベア
(そのまんまクマ・・・。)
マイケル
マイケル
シンプルイズベストだね

ツールの使い方

マイケル
マイケル
使い方は簡単!
Screenshot 2020 09 26 17 46 59
マイケル
マイケル

① 間取り図から「面積」と、「縦幅」「横幅」を入力して、
② 「寸法に変換」ボタンを押下するだけ!

縦幅と横幅は定規で測った長さで大丈夫です。
エレキベア
エレキベア
これは意外と使えるかもしれないクマね〜〜〜

実装方法

マイケル
マイケル
ここで終わらないのが都会のエレキベア!
実装方法も公開するよ!
エレキベア
エレキベア
待ってましたクマ
マイケル
マイケル
作成したスクリプトの全体は下記のようになります!
const obj_btn = document.querySelector('#btn');
obj_btn.addEventListener('click', convSunpo);
const obj_input_area = document.querySelector('#input_area');
const obj_input_area_tatami = document.querySelector('#input_area_tatami');

// 寸法変換処理
function convSunpo() {
    // 定数値
    tatami_1area = 1.82405;

    // 入力値取得
    input_width = parseFloat($("#input_width").val());
    input_height = parseFloat($("#input_height").val());
    input_area = parseFloat($("#input_area").val());
    input_area_tatami = parseFloat($("#input_area_tatami").val());
    radio = document.getElementsByName('areaChkBox');
    
    // 入力チェック
    $("#err_message").text(" ");
    if (!checkItem(input_width, "横幅")) {
        return;
    }
    if (!checkItem(input_height, "縦幅")) {
        return;
    }
    if (radio[0].checked) {
        if (!checkItem(input_area, "面積")) {
            return;
        }
    } else {
        if (!checkItem(input_area_tatami, "面積")) {
            return;
        }
        // 畳からm^2に変換
        input_area = input_area_tatami * tatami_1area;
    }

    // 寸法変換処理
    ratio = input_height / input_width;
    result_width = Math.sqrt(input_area / ratio);
    result_height = result_width * ratio;

    // 変換結果を格納
    $("#result_width").text(Math.round(result_width * 100) / 100);
    $("#result_height").text(Math.round(result_height * 100) / 100);
};

// 単項目チェック
function checkItem(val, name) {
    // 必須チェック
    if (val == null || val == "") {
        $("#err_message").text(name + "を入力してください。");
        return false;
    }
    // 数値チェック
    if (!isNumber(val) || val <= 0) {
        $("#err_message").text(name + "には0以上の数字を入力してください。");
        return false;
    }
    return true;
};

// 数値チェック(符号付き・小数)
function isNumber(val){
    var regex = new RegExp(/^[-+]?[0-9]+(\.[0-9]+)?$/);
    return regex.test(val);
};

// ラジオボタン切替処理
function changeRadio() {
    radio = document.getElementsByName('areaChkBox');
    if (radio[0].checked) {
        obj_input_area.removeAttribute("disabled");
        obj_input_area_tatami.setAttribute("disabled", true);
        obj_input_area.style.color = "black";
        obj_input_area_tatami.style.color = "gray";
    } else if (radio[1].checked) {
        obj_input_area.setAttribute("disabled", true);
        obj_input_area_tatami.removeAttribute("disabled");
        obj_input_area.style.color = "gray";
        obj_input_area_tatami.style.color = "black";
    }
};

// ページ読込時
window.onload = function () {
    changeRadio();
};
マイケル
マイケル
入力チェックや値の取得などいろいろ記述してるけど、
肝になるのはこの部分!

function convSunpo() {

・・・略・・・

    // 寸法変換処理
    ratio = input_height / input_width;
    result_width = Math.sqrt(input_area / ratio);
    result_height = result_width * ratio;

・・・略・・・

};
マイケル
マイケル
先ほど解説した、
横の長さ = (面積 / 縦横比率)の平方根
の計算をここで行っています!
マイケル
マイケル
平方根は、
「Math.sprt()」を使うことで求めることができます。
エレキベア
エレキベア
めんどくさい計算もコードならチョチョイのちょいクマね


// 寸法変換処理
function convSunpo() {
    // 定数値
    tatami_1area = 1.82405;

・・・略・・・

        // 畳からm^2に変換
        input_area = input_area_tatami * tatami_1area;

・・・略・・・

};
マイケル
マイケル
ちなみにこちらの定数は、1畳あたりの面積[m^2]です!!
この定数をかけることで「〜畳」表記にも対応しています!
エレキベア
エレキベア
間取り図は「畳」表記で書かれてることも多いクマからね
スポンサーリンク

おわりに

マイケル
マイケル
というわけで今回は
「間取り図から部屋の広さを求める」ツールの紹介でした!
どうだったかな?
エレキベア
エレキベア
関数電卓がないとできない平方根の計算も
一行でできるとこがすごいと思ったクマ〜〜〜
マイケル
マイケル
計算系のツールは簡単に作れるから
他にもいろいろできそうだよね。
また考えてみよう!
マイケル
マイケル
それでは今日はこの辺で!
アデュ〜〜〜!!
エレキベア
エレキベア
クマ〜〜〜〜〜〜〜〜

【JavaScript】間取り図から部屋の寸法を算出するツールを作ってみた! 〜完〜


リンク:
【ツール】間取り図寸法変換君 〜間取り図の比率から寸法を算出!〜


コメント