プログラムってやっぱ面白い。作っていて楽しいってすごく大事(´・ω・`)

エンターキーによる入力項目のフォーカスの移動をWeb系システムに実装してみる

今は懐かしきガラケーを使っていた人たちはこんな記憶はないだろうか?

「入力項目に入力カーソルを入れる際には、方向キーで入力したい場所を選んで決定キーを押す。」

スマホに取って代わられた今の時代、ガラケーのような動作を持たせる端末なんて、Webブラウザにはもう絶対に存在しないと思っている人も多いと思う。

 

だが、実際に物流や製造現場とかに入ってみるとそんなことは一切なく、タッチがサポートされているWindows CE7が搭載されたPDA端末(組込端末)においても、ガラケーのような感じで方向ボタンとナンバーボタンでメインの操作を行うなんてことはごくごく標準的な運用である。

その際にありふれたWeb系システム上での操作感で画面を使ってもらうとなると、主に入力項目へのフォーカスの際に実際のパネルボタンとの操作の乖離が生まれて非常に扱いづらい。

 

ましてや、現場でPDA端末を使う目的としては伝票(紙ベース)のバーコードだとか、QRコードだとかを入力する場合がほとんどで、これらを読み取った際にはおおよそ読み取りと同時にエンターキーの入力が走る。

そうすると必然的にフォームには送信のイベントが走ってしまうわけで、これだと他の入力値をついでに入力することもままならなくなる。

 

PDA端末で入力項目でエンターキーが押下された場合、それは次の項目にフォーカスを当てて然るべきである。

今回はそれに対応するために作ったJavaScript(jQuery)のコードを掲載したいと思う。

jQuery UI Sortableで並び替えたフォームのデータをどう処理すればいいか

製品対資材の連携マスタメンテナンスを作成する際に、ドラッグアンドドロップで操作できたほうがいいと思い、jQuery UI Sortableを導入した。

このjQuery UI SortableはWordPressでテーマを作成する際に、バックエンド画面で幾度となく使用したことがあるのでもはや使い慣れたものではある。

・・・が、今回はゼロベースの開発ということでWordPressのようにゆるーく設定するべきものではないので、POSTで受け渡すフォームのデータの処理をどういう形式で行うかっていうプログラムが関係ないところの部分で何回かコードを書き直したので、その記録としてケースパターンを記事に残しておこうと思う。

JavaScriptで大量のinput等のDOM操作がChromeだけ重いので解決する

Webアプリケーションの開発では、JavaScriptでの大量のDOM操作が嫌が応にも不可欠な場合があり、例えば膨大な関連商品・資材等を紐付けする際にinput(他、selectやtextarea)に対してそれを行うことになる。

このとき、最低設置するフィールドとしては、1行につき単純なものにしてもキーフィールドと個数フィールドだけでもふたつ。

これが、200行とか300行とかに渡ってレコード分の行数だけ設置される。

で、登録された関連商品・資材の参照を行う際には、非通信環境や非同期通信環境だとJSONなり生データなりを元に、これらのフィールドに対して値を出してくるわけであるが、参照と言いつつも実質的には表示データの書き換えであり、その際に大量のDOM操作をするということになる。

 

これはどれだけソースコードを効率化しても超えられない速度があり、それはデータ量が増えていく以上はある程度仕方がないにしても・・・

 

Chromeだけやたらめったら重い。

 

ロジック要件の修正やループ要件の修正など、実に2週間近くかけて見直し・書き直してみたが、いずれもことごとく失敗し、昨日ようやく解決の目を見た。

今回の記事はChromeでの大量のDOM操作を行うために、奮闘したことの記録として残すことにする。

トークン認証で問題が発生したため、セッションをコードレベルで即時反映を行うようにした話

つい先程まで仕事中に、とある問題に悩まされたところ。

現在進行系のホームページの案件があるため、システム開発は進まないだろうと、傍らに今あるバグを潰すかってことで作れているところまでの動作を検証していた。

その際に、セッションを利用した処理を多々書いていたところを見直しながら、動作を検証していたわけだが、トークンの認証あたりでページの読み込み完了後の間髪入れずのページ遷移をテストしていた際に問題発生。

 

原因を探るのにそれなりに時間がかかったため、備忘録として残しておくことにする。

selectとoptionのメニューをスクリプト制御で表示しないようにする

忙しさに追われて久しぶりの更新となるが、現行でシステム開発を行っている際に、フロントエンド側のスクリプトを弄っていた時の話。

通常、select要素で設定した選択ボックスをクリックしたりすると、option要素に登録したブラウザ依存のメニューが表示される。

まぁ、そりゃ当然そうだろうと思う。

 

が、自分の開発しているシステムで画面インターフェイスの兼ね合い上、こいつ自体を制御してやりたい。

selectとoptionのデフォルトで表示されるメニューを表示しないようにしたかった。

PHPのempty()でゼロの取り扱いに対する注意、代替と対策

PHPのempty()関数でゼロの取り扱いについては散々出尽くしているネタではあるが、システムを組んでいたときにempty()関数の恐ろしさに改めて気が付いた。

CMSのテンプレートとかを作る際には非常に便利なempty()関数だが、システムでこいつを乱立させるとひどく痛い目にあう。