レスポンシブなクリッカブルマップ上でマウスオーバー時にポップアップを表示

map

インドネシアのコーヒー栽培地のクリッカブルマップを作る インドネシアのシングルオリジン(生産地の農場単位)コーヒーを美味しく飲むためには、有名どころのカフェに行くか厳選された豆を買って自分で淹れるかになるわけですが、もっと楽しく飲むために風味の傾向とそれを生み出す産地特有の風土や歴史などの基本情報を、地図上からクリック一つで参照できるようなクリッカブルマップを設置しました。 クリッカブルマップ – インドネシアのコーヒー栽培地 クリックで産地の説明ページにジャンプ ⇒HTML4.0のクリッカ Read More

HTTP通信とPHPのスーパーグローバル変数の関係

http

register_globalディレクティブの機能 WordPress起動時に読み込まれるPHPファイルを追っていくためには、php.ini、httpd.conf、.htaccessファイル、PHPスーパーグローバル変数、サーバー変数、HTTP通信など、WEB通信で登場するキーワードの相関関係を理解する必要があります。 WordPressを起動する際の初期設定モジュールであるwp-settings.phpから、load.phpのwp_unregister_GLOBALS()関数を呼び出して、php.ini Read More

CSS – marginプロパティの上下に隣接するブロック要素での相殺問題

code

ブロック要素は親要素の横幅一杯に広がって配置される ブロックレベル要素は、幅指定がなければ親要素の中で横幅一杯に広がって配置されますが、これは本来ブロックレベル要素の横に同一フロー内において他の要素を並べることができないからです。 隣接する上下要素のマージンは相殺する 兄弟要素の上から40px、下から30pxずつマージンをとっても、相殺されて片方の40pxしかマージンは空きません。 子要素がabsoluteの場合 position属性の値がabsoluteの場合、配置の基点は親要素の基点と同じく Read More

CSS – positionプロパティのrelativeとabsoluteの関係

programming

positionプロパティ floatとmargin-left(子ボックス)またはpadding-left(親ボックス)を使わずとも、positionとtopとleftで位置を動かすことができます。 static : 何も指定しないのと同じ(staticを指定することはない)。 relative : 親要素のpositionに関係なく、親要素のコンテンツ直下から相対的に位置をずらす absolute : 親要素のpositionがstatic(またはpositionなし)ならウィンドウの枠の左上が基準 Read More

jQuery – Ajax関数によるGET通信とPOST通信

ajax

jQueryの導入 jQueryはDOM(Document Object Model)を操作するためにJavaScriptを元に設計されたJavaScriptの拡張ライブラリですが、導入するには以下の方法があります。 CDN(Content Delivery Network)をオンラインで使う(テーマ) jQuery本体非圧縮版 : http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js jQuery本体圧縮版 : http://aja Read More

クラスとインターフェイスの関係を製造業システムの視点で説明してみた。

programming

ファントム品 製造業の生産管理部門では、内示や確定オーダを元に、部品構成表(BOM)から所要量展開を行うことで、購買指図と製造指図を発行しますが、BOMに登録する品目は、入荷実績または製造実績により通常は在庫管理されます。 ただし「工程途中で跳ね出される中間品で、在庫があるものは所要量展開時に引き当てをしたいが、新規に製造指図は発行したくない」という素性の怪しい品目を、ファントム(怪人)品と呼びます。 セット品やキット品など、その品目自体の在庫管理はしないが、個々の部品単位で管理する、という性格の品目もフ Read More

WEB環境起動時に読み込まれるモジュールをphpinfo()でチェックしてみた。

programming

マニュアルとリファレンスとドキュメントの違い マニュアルは「教科書」ですから、プログラムコードの書き方(リテラル・変数・式・制御文)と組み込み関数について粛々と説明しているもので、この状況でどうすればいいかという逆引き的な情報は、有志の方々がブログで書いている記事を参考にさせてもらったほうが効率は良いです。 言葉の定義ですが、分からないことを参照(リファレンス)するのがマニュアルなので、リファレンスマニュアルとも呼ばれます。よってマニュアルとリファレンスの違いは何か?というのは無意味です。 マニュアルもリ Read More

無料でデバッグに利用できるブラウザ開発者ツール

ブラウザの開発者ツールで出来ること HTML文章はhtmlタグに始まってheadタグ、bodyタグ、divタグ・・・というようにツリー構造に繋がっており、各ブラウザに内臓されるDOM(Document Object Model)機能は、開始タグと終了タグに囲まれたシステムにとっての意味のあるカタマリであるエレメント(要素)単位にオブジェクトを生成します。 Chrome, Firefox, IEという3つの主要ブラウザに内蔵されている開発者ツール(ディベロッパーツール)の主要機能は、ざっくり言ってこのエレメ Read More

HTML – 配列における要素という言葉

HTML

人間世界の要素とシステムの世界の要素 人間世界で要素という言葉は「物・事を成り立たせるもとであるそれ以上は簡単なものに分析できないもの」というこれ以上分解できない絶対的な単位という意味があります。 一方システムは人間の言葉をそのままでは理解できないので、理解できるようにタグを付けて範囲を明確にしてあげた後のカタマリを要素と考えます。 つまり「人間にとって自明の要素をシステムに解釈させるためにタグを付けて範囲を明確にする」という行為は、人間が範囲を決める以上相対的なものにならざるを得ず、必然的にHTML要素 Read More

連想配列に関数リテラルを格納してオブジェクトを生成

Plaza Indonesia

リテラルとは変数の対義語で、数値や文字列を直接に記述した定数のことですが、変数に関数を代入して記述することを関数リテラルと呼び、オブジェクト(連想配列)のデータをプロパティと値のペアで表現したものをオブジェクトリテラルと呼びます。

“連想配列に関数リテラルを格納してオブジェクトを生成” の続きを読む

再帰処理でデータを取得し追加・更新・削除可能なグリッドに表示

programming

ライブラリとプラグインの違い 業務システムのマスタ管理画面にはCRUD(Create/Retrieve/Update/Delete)機能付きのデータグリッドが便利なのですが、一番シンプルなのはjQueryとJQuery Easy UIのみで実現するDataGridです。 ツリー表示で使ったjsTreeはjQueryのプラグインであり<script>タグの中に別途jstreeプラグインを読み込む必要がありましたが、DataGridはTabsなどと同じようにJQuery UIのウィジェットにあたり Read More

jQuery – jQuery UIでタブを追加

program

jQuery UIのタブ&パネルウィジェット 生産管理システムでは部品構成表(BOM)の設定が不可欠ですが、親子関係の追加はグリッド表示画面から行うとしても、設定が正しいかどうかのチェックはツリー表示で視覚的に行うことができれば便利です。しかもグリッド表示とツリー表示は画面を切り替えることなくタブの切り替えで素早く実現できればユーザビリティは間違いなく向上します。 これはERPの部門マスタの統括部門とコストセンターの関係を視覚的に表示するのにも使えると思います。 タブ(パネルとセット)を追加するには以下の Read More

再帰処理でHTMLリスト化しjsTreeでツリー表示

tree

jsTreeはツリーを生成するjQueryのプラグインで、HTMLかXMLかJSONフォーマットのデータを読み込ます前提ですが、業務システムでDBのテーブルにある部品構成(BOM)や部門構成等をツリーで表示する場合には、HTMLリストを動的に生成してツリーに変換させます。

“再帰処理でHTMLリスト化しjsTreeでツリー表示” の続きを読む

ローカル開発環境のためのWebサーバー構築の準備

apache

PHP5.4ビルトインWebサーバーを使う。 PHPの5.4からビルトインWebサーバーが付いており、テスト環境でわざわざApatceをインストールする必要がなくなりました。「開発用としてのみ設計されたものであり、 実運用に使ってはいけません」と思いっきり書いてあるのですが、数台の現場端末から実績収集するくらいなら実運用でも耐えられるんじゃないかとも思います。 というのは一般的に客先サーバー環境でのソフトウェアのインストールは制限が多い。「Webサーバーを立ち上げます」と言うと客側で気持ち的に負担になるの Read More