Hi, Developers,

Let's transform the quadratic function into a complete square!

※ 表示が正しくないと思う場合は、JavaScript を有効にしてください。

高校数学で二次曲線を理解するのにまず必要なのは、平方完成 です。

平方完成とは、二次方程式を「なんとかの 2 乗」の形にする、ということです。 ただそれだけです。 あまった部分を調整して、それで終わりです。

ここでは平方完成の基本を徹底トレーニングすることを目的にしています。

平方完成の説明は、下の「平方完成について」を開いて確認してください。

▼ 平方完成について

---

では、始めましょう！

ここに、平方完成する二次関数が表示されます。

まずは x の係数に注目して、a を決めましょう。

( x + a )2 の形を作りましょう。

　やってみる　

---

なお、ちゃんとした解説は、教科書や参考書、あるいは解説サイトをご覧ください！

---

スマホやタブレットで開く場合は、 この QR コード (
https://www.straightapps.com/web/js-complete-square.html ) が、このページの URL になっています。 QR コード読み取りアプリで読み取ると便利です。

ここから先は JavaScript コードについての情報になりますが、 現時点ではタッチ対応デバイスか、その場合は何点までマルチタッチに対応しているか、 あるいはタッチ対応デバイスではないかの判定を行うために 「JavaScript でマウスのみかタッチ可能かを判断したい」 で検討しているコードの解説となっておりますので、もうしばらくお待ちください。

---

まずは、HTML 部です。

単純に、結果を出力するための領域を用意しているだけです。

<p>
このページを読み込むとすぐに、タッチ不可デバイス（マウス操作、あるいはマウスもなし）か、
あるいはタッチ可能デバイスかを判断して、下に結果を表示します。
</p>

<p>
タッチ可能デバイスの場合は、同時タッチ（マルチタッチ）対応数を併せて表示します。
</p>

<p class="red sz140p" id="result">
問題がなければ、ここに判定結果が表示されます。
</p>

<script type="text/javascript" src="js/mouse-or-touch.js"></script>

最初の 2 つの <p> 〜 </p> は単に説明を表示しているだけです。

続く p タグの部分には id result と付けていて、結果表示領域としています。 このあと JavaScript が実行されて、結果文字列に書き換えられます。

赤文字で少し大きくするための css が別途定義されており class で読み込んでいますが、今は気にしなくてもいいでしょう。

最後の script で、js/mouse-or-touch.js を読み込んでいます。 実行時に、結果を出力するための id、result を参照していますので、その定義よりあとに記述されている必要があります。

以降のセクションで、それぞれ詳細を確認していきます。

なお、ご参考までに、JavaScript ソースコードそのものを、拡張子 js を拡張子 txt に変えて、次のリンクより開けるようにしてあります。
mouse-or-touch.txt
※ 作成時はタブを 4 文字としていますので、環境によってはタブが 8 文字のため、コメント等がずれて見えるかも知れません。
※ 念のため書き添えますが、このソースコードをこのまま転載・公開することはご遠慮ください。

なお、本サイトのご利用に際しては、必ずプライバシーポリシー（免責事項等）をご参照ください。

コーディングは Windows 10、デスクトップ PC で行っていますので、まずはコードを作成します。 マウスは接続されていますが、タッチ機能には対応していません。

早速、ページ読み込み時に実行される JavaScript コードを追っていきます。

// マルチタッチ対応かでタッチ性能を確認します。
var navi = window.navigator;
var el = document.getElementById('result');

if (navi.maxTouchPoints > 1) {
    el.innerHTML = navi.maxTouchPoints + ' 点のマルチタッチ対応です。';
}
else if (navi.maxTouchPoints > 0) {
    el.innerHTML = 'タッチ対応です（マルチタッチは非対応です）。';
}
else{
    el.innerHTML = 'タッチ非対応です。';
}

変数 navi に、window.navigator を設定しています。 このあと何回か navigator を使用しますので、短い名前にしている、という意味です。

同じように、このあと何回か使用しますので、result の id を付けた HTML エレメントを el に取得しています。

準備はこれだけです。

判定方法は、デバイスがマルチタッチに対応しているのかを保持する変数 navigator.maxTouchPoints の値を調べる、です。

最初の if 文、この値が 2 以上であれば 2 点以上のタッチを同時に判定できる「マルチタッチ」に対応していると言えます。 ここでは結果として画面に表示していますが、それにより処理をわける場合は、なんらかの変数に「マルチタッチに対応している」ことを記録すればあとで参照できます。

そうでない場合、マルチタッチには対応していません。 ただ、タッチ対応であれば 0 より大きい値が設定されている、すなわち 1 しか該当しませんので、 マルチタッチ非対応ですが、タッチには対応しているデバイスということになります。

これに該当するものがどのようなものかは、今はわかりませんが、 PC に接続するタッチモニタを接続したらこの値が返されるのか、 後日試してここに追記する予定です。

そして最後の else です。

どちらにもあてはまらなかった、ということは、タッチ非対応ということになります。

それぞれの場合において、 result という id が付いた部分の HTML を書き換えて、結果を出力しています。

デスクトップの Windows 10 (64 ビット）で試すと、Edge、Firefox、Chome といったブラウザによらず、 「タッチ非対応です。」 と表示されました。

これで無事に動作している、とは言えません。

もしかしたら、maxTouchPoints に値が設定されないために、常に 0 が入っているように見える可能性もあります。

タッチ対応デバイスでの結果を見て、検証する必要があります。

まずは Android 13 スマホ、 moto g53j 5G で動作確認を行います。

動作させる前にスペックを見ておくと・・・認識可能なタッチ数なんて書いていませんね。 「3 本指タッチでスクリーンショット」の機能がありますから、少なくとも 3 以上の値が返されるはずです。

実行してみると、 「5 点のマルチタッチ対応です。」 となりましたので、動作としては良さそうです。 本当にデバイスの性能として 5 点なのかどうかは検証できませんが。

maxTouchPoints に値が設定されている、ということはわかりました。

手元にある Android 8 から Android 9 にアップデートした ASUS の Zenfone Max M2 でも試してみます。

同じように実行してみると、 「5 点のマルチタッチ対応です。」 となりましたので、動作としては良さそうです。 こちらも本当にデバイスの性能として 5 点なのかどうかは検証できません。

日本では 2019 年発売の Android 8 機ですから、これで正しく判定できているようであれば問題ないでしょう。

正しく判定できないデバイスがあるかどうか、 たくさん検証できるほどのデバイスがありませんので、お気づきの点があれば、 アプリ開発ブログへのコメントにて、お教えいただけると嬉しいです。

アプリ開発ブログ

本サイトの新着情報を紹介しています。

Windows 開発トップ

Windows 開発関連の情報を、書いています。

ウェブ開発に関するトピックは、「ウェブ開発トップ」にまとめられています。