【考え中（2回目）】HTML5を使ってみる + 配管にケーブルが入るか考える

• トップページ（index.htm）に戻ります

ケーブルを模した○を、配管を模した○の中にマウスでドラッグするだけのものです。
HTML5だと絵も簡単に描けるというので、何かに利用できないかと考えた。 本を読んだりしましたが、HTML5について紹介してくださるWebページには大変助けられました。
基本的に、「canvas を追加してそこに図を描く」＋「その図を自由にドラッグする」という内容です。 特にドラッグの方法についてはさんざん考えた。 場所を固定して、要素に追加するようなドラッグならHTML5だけでできるようだ。 結局、自由なドラッグは jquery を使うのがいちばん早かった。 draggable の一行で済んでしまうようなので。 でも jquery を参照するので、オフラインだと使えない。 しかもスマートフォンのタッチしてドラッグでも使えないようだ （→プラグイン「jQuery UI Touch Punch」を使うと、iPhone や iPadd、Android でもドラッグができた。）

• jQuery UI Touch Punch のページ(http://touchpunch.furf.com/)

使い方：

1. 使う配管を選んで、『配管を描く』ボタンをクリックする。 すると、下にあるセクションペーパーのようなエリアに配管の○（赤丸）が描かれる。
   ○は、配管やケーブルの径を px に置き換え、それを10倍した値を基に円を書いている。 （9.4mmなら、94px。小数点以下があると図が描けないので）。
   セクションペーパーは、1目盛りが10pxで1mmとしています。 もし、ケーブルや配管の径と、セクションペーパーの目盛りが近似でなければ、たぶんスクリプトが間違っている。
2. 使うケーブルを選んで、『ケーブルを描く』ボタンをクリックする。 下のセクションペーパーエリアにケーブルの○（緑色）が描かれます。 ケーブルは8本まで選んで描ける。
3. 緑色のケーブルを配管の○の中にマウスでドラッグして置いてみる。 複数本あるときは、重ならずに置けるか試してみる。
   重なったり、配管からはみ出したり、本数が多かったりしても警告が出るわけではないです。
4. 『断面積総合計』をクリックすると、ケーブルの総断面積が表示される。 『配管占有率』をクリックすると、配管内をケーブルの断面積が占める割合をパーセントで表示。
5. ケーブルや配管を描くと、途中で種類などを変更できないので、ページの更新や、『すべての値を消去してやり直し』する。
6. 補正係数を考慮すると、ケーブルは配置できても、断面積は補正係数倍されるので、配管占有率が大きくなる。
7. どのブラウザでも動くかどうかは分かりません。

• 補記

補記

• 断面積を算出する際に用いる円周率は3.14としている
• 断面積を算出する際は小数点以下を切捨てとしている
• 切捨て処理のせいか、内線規定の数字とくらべて差があったりします
• 想定される配管種別と線径により、補正係数を選択します
• ケーブルの仕上外径、配管の近似内径については、メーカーさんのカタログ等を参考にしています （誤りがあるかもしれません・・・）
• 何かあっても責任取れません
• とりあえずFirefox 22(WinXP)とIE10(Win7)では動いてくれました
• 「jQuery UI Touch Punch」を使っても、Windows10 が入った タブレットでタッチ＆ドラッグはできなかった
• スマートフォンのタッチしてドラッグすることができないのは、HTML5 のドラッグ＆ドロップは、マウスのイベントだかららしい。
それだから Windows10 にした DELL の Venue8 タブレットでもタッチでドラッグはできませんが、マウスをつなげばできました

※本ページのイラスト・イメージは、プリントアウトファクトリー様 (https://www.printout.jp/) のクリップアートを使用しています。

Copyright(c) 有限会社 岡田電工 Okada Denko Ltd. All Rights Reserved.

HP開設 2003年
記：2013年7月〜
2020年8月