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


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


使い方:

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

補記


A8.net ネット特集

光回線

株式会社NEXT【auひかりサイト】

GMOインターネット株式会社【GMOとくとくBB】ドコモ光

株式会社アウンカンパニー【ソフトバンク光キャンペーン】

格安スマホ

ニフティ株式会社 ニフティのMVNOサービス【NifMo】

エヌ・ティ・ティ・コミュニケーションズ株式会社 「OCN モバイル ONE」

モバイル通信

ヤフー株式会社 モバイルルーター【Yahoo! WiFi】

エクスコムグローバル株式会社【海外WiFiならイモトのWiFi】

メガソフト〔Win版〕 3Dマイホームデザイナー PRO 9

メガソフト〔Win版〕 3D工事イラストワークス

メガソフト〔Win版〕 3D住宅リフォームデザイナー 2

ページトップに戻る

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

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

HP開設 2003年
記:2013年7月〜