店舗用プリンタなどのハードウェアがこんなに進化してたなんて知らなかった自分が恥ずかしい

今はHTTPやWebSocket on HTTPで印刷からキャッシュドロアなどのデバイスのコントロールまで出来ちゃうらしいです。


知らなかった～。

つまり、PCやタブレットなどのスマートデバイスに表示されたウェブアプリケーションでPOS周りのコントロールが出来ちゃうんです。

しかも、JavaScriptでシリアル制御信号を送るプログラムも組み込めるので、POSだけに留まらない、店舗全体で統一されたIT環境を作ることだってできちゃうはず！


しかし、自分が研究していた技術がこんなところで素敵に応用されているとは。。


まるで回し者のように宣伝すると、EPSONのインテリジェンスレシートプリンタに搭載されている、ePOS-PrintとePOS-Device。

【概要】

要はePOSサーバーと言っていいですかね。これを搭載したプリンタをLAN内に置いておくと、そこにHTTPやWebSocketで命令を送信することで印刷やドロアオープンなどの命令を肩代わりしてくれるというもの。

しかもePOS-Print APIとePOS-Device APIという形でJavaScriptで簡単に起動できるのでnodejs知ってる人なら見ただけで構築イメージが湧いちゃいます。

JavaScriptが都合悪い場合でもSOAPの口を用意してくれているので、ブラウザアプリ以外からでも同じ経路で命令を出すこともできます。

デバイスの登録もスクリプトのセットもプリンタ側のウェブＵＩで簡単に出来るので、設置の方も問題なし。

さらに、ちょっとしたデータサーバーもWebSocketで用意されているので、あるデバイスで発生したイベントをチャットのように他のデバイスで拾い、しかもさらに別のデバイスの状態に応じて動きを変えるなんてこともできそう。


店内の誰かのハッピーバースデーで動画を流したり、入店待ちの客の人数に応じて、長居してるお客さんにメッセージを流したりできそうかなー。


なんか色々考えちゃいますねー

GoogleのWeb Starter Kitが良さげ

Web作成するうえで必ず書かなければならないコードってありますよね？

最近ではモバイル端末も意識しなければならないので、非常に多くのコードとレイアウトへの意識が必要になりました。


それらをドキュメンテーションも含めてテンプレート化しちゃったものがこちら

Google Web Starter Kit


さっそくダウンロードしてみました。


結論からいって、なかなか良さげです。さすがGoogle。

めんどくさーいレスポンシブも含めてある程度のデザインがclass指定だけで出来ちゃう。

アイコンとかもセットになってる。


依存するライブラリもないみたいなので、bootstrapなんかとも共存できるんじゃないかな？


詳しい使い方は同梱のstyle guideで確認できます。メニューは以下。

1. Typography
2. Buttons
3. Lists
4. Links
5. Icons
6. Breadcrumbs
7. Table
8. Grid
9. Colors
10. Highlights
11. Editorial header
12. Article section
13. Guides section
14. Page header
15. Quote
16. Featured icons
17. Featured spotlight
18. Featured list
19. Featured block
20. Article navigation

雰囲気はこんな

今度うちのサイトをこれ使ってリニューアルしてみようかなー

JavaScriptライブラリ作ってみました

無料です

nolib.jp

こんなライブラリを置いてあります。

・Goround
ドラッグやスワイプ操作で画像を切り替えていきます。インデックスとかも取れますので入力としても使えます。

・Roller
横に並んだ要素をドラッグやスワイプで動かします。設定次第でいわゆるカルーセルにしたりできます。

・Scope
俯瞰画像と部分拡大を同時に見せるようなライブラリです。スワイプやドラッグでカーソル位置を動かします。

・Scroller
overflow-y: scroll;をエミュレートしたようなライブラリです。スクロールバーのスタイルをcssで完全に作れます。

・Cycleimage
一定間隔で画像を切り替えるライブラリです。アニメーションGIFの代わりのようなイメージです。


人からの要望だったり、こんなのあったら良いかなぁ？と思ったものたちです。どんなもんでしょうね。

どれも基本的にnewしてオブジェクト型の引数に省略可能な設定値を渡してあげることで使うことができます。メソッドやコールバックは自分なりに考えて用意してみました。


動作に関しては

・Android 2.2
・Android 2.3
・Android 3.0
・Android 4.1
・Android 4.2 Chrome
・iOS 6.1.3
・Windows 7 64bit IE9、Chrome、Firefox、Safari、Opera
・Mac book Air Safari

で確認しました。
Android ChromeのRollerの動作が設定で微妙だったりします。アニメーションが連続すると速度劣化を起こすのかな？
Android 3はアニメーションに関して期待しちゃダメですね。2.x系よりひどい。ハードが悪いんだとは思いますが。


サイトも改善していこうと思っています。

サンプルのコピーはhtml, css, javascript分離して、テキストエリアを卒業したいです(笑)


まぁまだまだな感じはありますがとりあえず出そろったので公開です！

viewport数値指定とブロック要素の100%時の幅

技術メモ

Android 4.x系でviewportを800とか指定すると、background-colorを指定しないとblock要素のデフォルト幅がdevice-widthくらいになる現象あり

translate3dは曲者臭い

html5/css3でコンテンツ作成してスマホで確認したりしてます。

まぁ前々から怪しいとは思っていたんですが、translate3dについてちょっと見えてきたのでメモ。


サポートしているデバイスではGPUで演算されるというところまでは知っているんですが、その内部処理まではよく知りません。androidならソース読めばある程度解るのかもしれませんが、ちょっと色々ね。まぁ面倒でそこまではまだちょっと。


iOS系はちょっと違うようですが、どうもAndroid系はtranslate3dで指定された要素の座標変換をやってるんじゃなかろうかと。で、translate3dされた要素はページ自体とは別の座標軸を持つことになり、結果描画のたびに基本座標からの位置評価と座標変換の２つ処理が別べつに走っているように思えます。少なくともmarginとは別評価な気がする。


例えばGalaxy nexus(4.0)で、上下スワイプでmarginを操作してスクロール出来るようにしたレイヤーに、translate3dを当てた要素を載せたページを見ると、他の要素とはバラバラに移動して見えるんですよね。

これって２つのCPUとGPUの時間的同期が取れないから瞬間の描画している座標位置にずれがでてるんじゃないかなぁ？


他にもtranslate3dでアニメーションさせると画像がちらついたり、translate3dが設定されている要素にあたるカーソル位置もおかしくなったり色々あるんですよね。


いずれにせよ、ウェブコンテンツのアニメーションにtranslate3dを使う時は注意したほうがよさそうです。