鋼材手帳要らず 「形鋼・鋼管 断面性能検索サービス」をPHP+MySQLで作ってみました

JAVASCRIPT

以前からPHPとかMySQLとか興味あって何かデータベースの絡んだ動的なページ作ってみたかったので、勉強がてら自分の実務に即したところから「形鋼・鋼管 断面性能検索サービス」のページを作ってみました。

WEB上で閲覧できる鋼材手帳を

作ってみたのは以下のページです。

形鋼・鋼管 断面性能検索サービス

これ何かというと、鉄工関係・金属製品製造業の設計屋さんはたいがい「金属質量表」とか「鋼材手帳」とか呼ばれる、規格形鋼や鋼管(パイプ)のスペック一覧書いた小冊子を手元に持って仕事してるんですが、それのWEB版です。

公開に使ってるのは以前のエントリでも紹介したウェブクロウさんとこです。

今のところそこに近い業界に身をおくものとして試しに作ってみました。一般の方にはなじみがないと思うので形鋼ってのはどんなのかっていうと

こんなの(上はH形鋼)とか

こんなの(上は溝形鋼)です。まぁ名前知らなくても建築の骨組とかで使ったりもするので見たことくらいはあると思います。

懇意にしてる鋼材屋さんとか流通業者がいればそこからもらえたりすることもあるんですが、書店で買うと1冊2,000円近くします。こんなのです。

で重量調べたり強度計算するときにここから数字を拾ってくるわけですが、結構細かい文字なので行を間違えて転記ミスとかやらかしたりします。あとお客さんと打合せするときにも持って歩けばいいんでしょうけど、手帳忘れてきてちょっとした概算の材料選定とか出来なかったリとかそういうこともあったりします。

各鋼材メーカー・商社さんのWEBページでも検索すればそれなりに一覧表くらいは掲載されてたりするんですが、やっぱり各々取り扱ってる商品が限定されるので、鋼材の種類ごとにあっちのページ、こっちのページ…と色んなとこを参照しなくちゃなりません。

そんなわけでWEB版作っておけばコピペ楽だし、スマホで閲覧できれば紙の手帳持ち歩かなくても済むので便利かなぁ、と安直に思って作ってみた次第です。

使い方

材料の形状を選択するドロップダウンリストと、材質を選択するドロップダウンリストがあるのでそこから希望のものを選択するだけです。選択すると自動的に該当する鋼材の一覧が表示されます。実際の検索の結果は以下のようになります。

紙の手帳で目次見て、そのページを開く程度のことです。

とりあえず公開してみた

そんなわけでやってることはどうってことありません。MySQLのテーブルに格納した選択肢データをドロップダウンリストにつっこみ表示。ユーザーが選択するとそれに基づいて別のテーブルの鋼材データから該当するものを検索して表示してるだけです。

動作としては必要最低限のことが出来てるようなのでとりあえず公開してみました。ユーザビリティとか装飾とか機能追加に関しては公開後でも逐次改善して行きたいと思います。現段階でもすでに自分の中でもざっと「こうしたほうがいいな」ってのはありまして

  • 検索結果多いときは見出し行を途中に挿入
  • 1行ごとに背景色反転
  • 指定した断面性能の項目で条件による絞込み
  • 別のスクリプト(例えば梁の応力・たわみ計算など)へのデータ流用
  • スマホ用に表示の最適化
  • 検索結果に自分自身のページを呼び出してるが、別の結果ページにしたほうが良いのかどうか

なんてところがあるので、暇を見てぼちぼちやって行きたいと思います。CSSで対応できそうなとこは早めにやりたいとは思ってますが。単純なデータ呼び出しだけのスクリプトでも突き詰めるといろいろ考えなきゃいけないことがありますね。

手持ちのiPhoneで確認したところ、一応そちらでも動作だけはするようにはなってるみたいです。

あとデータもスクリプトも全く私個人で制作してるので、データのチェックについては甘さがありまして、本当は別の人の目で一度確認してもらいたいところなんですけどね。基本コピペ可能なものはコピペでデータつっこんで、ないものはエクセルで一覧計算してデータ作ったりしてますので、そんなに大外れではないと思うんですけど。

閑話休題:最近接偶数への丸めの話など

JISでは数字の端数処理に「最近接偶数への丸め」なんてのを使ったりします。どういうことかというと、基本は普通に四捨五入で、丸める桁の一つ下の桁で切上げるか切り下げるか判断するんですが、この桁以下がちょうど5だった場合(例えば、3.85を小数点1桁に丸める場合など)は『丸めの結果が偶数になるほうに丸める』とします。

例の「3.85」を小数点1桁に丸めるように普通に四捨五入すると「3.9」になりますが、「最近接偶数への丸め」を適用すると「3.8」になります。「3.851」ならどちらの方法でも「3.9」になります。「3.849」ならどちらの方法でも「3.8」になります。

難しい理屈はよくわかりませんが、ランダムな複数の数字をある桁に丸めて加算するとき、「最近接偶数への丸め」にしたほうが単純な四捨五入に比べて誤差の累積がなくなるそうです。銀行さんのお金の計算も誤差出ては困るのでこういう丸め方をするそうです。

今回の「形鋼・鋼管 断面性能検索サービス」でも一応その方法を適用してます。もしかしたらPHPのバージョンによってはround関数の引数指定だけで「最近接偶数への丸め」にできるのかもしれないんですが、よくわかんないので自作関数化して本体のスクリプトにインクルードして使ってます。無駄な手間だったかもしれないけど、まぁいいや。

できるところからやってきましょう

ということで、業界関係者の方、よろしかったら使っていただければと思います。「このデータおかしいよ」とか「もっと使いやすく」とかそういったことは[email protected]で受け付けておりますので何かありましたらお気軽にそちらへどうぞ(といっても私も今のところリーマンなので即対応はできないですが時間のあるときに)。

基本私もWEBのことに関しては全くの素人で師もいませんが、数冊の書籍とゴゴル先生の検索結果見てこれくらい(クエリー発行して検索してデータ読み出して表示)くらいはできるようになりました。皆さんの身近なところにあって、当たり前に思ってることでもWEBサービス化したら情報の集積・共有という点でいろいろハッピーになれるかもしれませんね。皆さんもちょっとしたことからチャレンジしてみてはいかがでしょうか。

と、ここまで書いて、IE6対応忘れてたことに気付いた。さっそく修正しなきゃ…それでは。

コメント

',b.captions&&s){var u=J("figcaption");u.id="baguetteBox-figcaption-"+t,u.innerHTML=s,l.appendChild(u)}e.appendChild(l);var c=J("img");c.onload=function(){var e=document.querySelector("#baguette-img-"+t+" .baguetteBox-spinner");l.removeChild(e),!b.async&&n&&n()},c.setAttribute("src",r),c.alt=a&&a.alt||"",b.titleTag&&s&&(c.title=s),l.appendChild(c),b.async&&n&&n()}}function X(){return M(o+1)}function D(){return M(o-1)}function M(e,t){return!n&&0<=e&&e=k.length?(b.animation&&O("right"),!1):(q(o=e,function(){z(o),V(o)}),R(),b.onChange&&b.onChange(o,k.length),!0)}function O(e){l.className="bounce-from-"+e,setTimeout(function(){l.className=""},400)}function R(){var e=100*-o+"%";"fadeIn"===b.animation?(l.style.opacity=0,setTimeout(function(){m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e,l.style.opacity=1},400)):m.transforms?l.style.transform=l.style.webkitTransform="translate3d("+e+",0,0)":l.style.left=e}function z(e){e-o>=b.preload||q(e+1,function(){z(e+1)})}function V(e){o-e>=b.preload||q(e-1,function(){V(e-1)})}function U(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent("on"+t,function(e){(e=e||window.event).target=e.target||e.srcElement,n(e)})}function W(e,t,n,o){e.removeEventListener?e.removeEventListener(t,n,o):e.detachEvent("on"+t,n)}function G(e){return document.getElementById(e)}function J(e){return document.createElement(e)}return[].forEach||(Array.prototype.forEach=function(e,t){for(var n=0;n","http://www.w3.org/2000/svg"===(e.firstChild&&e.firstChild.namespaceURI)}(),m.passiveEvents=function i(){var e=!1;try{var t=Object.defineProperty({},"passive",{get:function(){e=!0}});window.addEventListener("test",null,t)}catch(n){}return e}(),function a(){if(r=G("baguetteBox-overlay"))return l=G("baguetteBox-slider"),u=G("previous-button"),c=G("next-button"),void(d=G("close-button"));(r=J("div")).setAttribute("role","dialog"),r.id="baguetteBox-overlay",document.getElementsByTagName("body")[0].appendChild(r),(l=J("div")).id="baguetteBox-slider",r.appendChild(l),(u=J("button")).setAttribute("type","button"),u.id="previous-button",u.setAttribute("aria-label","Previous"),u.innerHTML=m.svg?f:"<",r.appendChild(u),(c=J("button")).setAttribute("type","button"),c.id="next-button",c.setAttribute("aria-label","Next"),c.innerHTML=m.svg?g:">",r.appendChild(c),(d=J("button")).setAttribute("type","button"),d.id="close-button",d.setAttribute("aria-label","Close"),d.innerHTML=m.svg?p:"×",r.appendChild(d),u.className=c.className=d.className="baguetteBox-button",function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;U(r,"click",x),U(u,"click",E),U(c,"click",C),U(d,"click",B),U(l,"contextmenu",A),U(r,"touchstart",T,t),U(r,"touchmove",N,e),U(r,"touchend",L),U(document,"focus",P,!0)}()}(),S(e),function s(e,a){var t=document.querySelectorAll(e),n={galleries:[],nodeList:t};return w[e]=n,[].forEach.call(t,function(e){a&&a.filter&&(y=a.filter);var t=[];if(t="A"===e.tagName?[e]:e.getElementsByTagName("a"),0!==(t=[].filter.call(t,function(e){if(-1===e.className.indexOf(a&&a.ignoreClass))return y.test(e.href)})).length){var i=[];[].forEach.call(t,function(e,t){var n=function(e){e.preventDefault?e.preventDefault():e.returnValue=!1,H(i,a),I(t)},o={eventHandler:n,imageElement:e};U(e,"click",n),i.push(o)}),n.galleries.push(i)}}),n.galleries}(e,t)},show:M,showNext:X,showPrevious:D,hide:j,destroy:function e(){!function n(){var e=m.passiveEvents?{passive:!1}:null,t=m.passiveEvents?{passive:!0}:null;W(r,"click",x),W(u,"click",E),W(c,"click",C),W(d,"click",B),W(l,"contextmenu",A),W(r,"touchstart",T,t),W(r,"touchmove",N,e),W(r,"touchend",L),W(document,"focus",P,!0)}(),function t(){for(var e in w)w.hasOwnProperty(e)&&S(e)}(),W(document,"keydown",F),document.getElementsByTagName("body")[0].removeChild(document.getElementById("baguetteBox-overlay")),w={},h=[],o=0}}})
タイトルとURLをコピーしました