Endless trail

寄り道好きのひとりごと
<< September 2019 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
 
PR
RECENT COMMENT
  • KATO C56 (HOタイプ)を頑張ってオープンサウンド化にしてみる。
    MECY (08/30)
  • KATO C56 (HOタイプ)を頑張ってオープンサウンド化にしてみる。
    KAKKA (08/30)
  • KATO C56 (HOタイプ)を頑張ってオープンサウンド化にしてみる。
    MECY (08/27)
  • KATO C56 (HOタイプ)を頑張ってオープンサウンド化にしてみる。
    KAKKA (08/26)
  • Next18のSmileDecoderを試す
    MECY (08/13)
  • Next18のSmileDecoderを試す
    なごでん (08/13)
  • Hoゲージの大ジオラマでC59を思いきり走らせてみた
    KAKKA (08/11)
  • Hoゲージの大ジオラマでC59を思いきり走らせてみた
    MECY (08/11)
  • Hoゲージの大ジオラマでC59を思いきり走らせてみた
    KAKKA (08/09)
  • Hoゲージの大ジオラマでC59を思いきり走らせてみた
    KAKKA (08/09)
MOBILE
qrcode
PROFILE
無料ブログ作成サービス JUGEM
 
DsAirのWebアプリのスマホ版を試してみる

JUGEMテーマ:鉄道

 DsAir2/DsAirはWebアプリから操作画面を表示させて、機種を問わず様々な端末で使えるので世界最強のDCCコントローラで凄いと思うのですが、唯一弱点といえばメータパネルを模した操作画面が多機能であるがゆえに、スマホの様な画面サイズの小さい端末となると返って操作しずらくなる事があります。その唯一の弱みを解消するWebアプリをYaasanがテスト版ではありますがリリースされましたので試してみることにしました。

 スマホ用(というか小画面のipad端末向けかも?)のWebアプリなので、FlashAirの「SD_WLAN」のファイルをCONFIGを残して全部入れ替えました。起動する操作画面はメーター風のデザインから他によくみられる、レベルゲージみたいなスライド操作式のマスコンになっていて割とシンプルなデザインになっています。これならスマホを片手に持ったままで速度調整がかなりやり易そうなデザインです。

 

 ◇スマホ向けに最適化されたレスポンシブデザインの操作画面

_

 ◇画面のピクセル数が足りないので端っこで表示切れを起こしてます

 

 ただ、今使っているのはiphone6と超古いAndriodなので、どちらも画面が今時の最新スマホに比べると小さく、若干ですが操作画面の全領域まで表示しきれていない感じで、画面の端が表示切れになってしまってます。スマホなので表示領域をスライドさせれば操作は可能なのですが、どうもスライドさせながらの操作はせっかくのスマホ最適アプリとしては興ざめしてしまうので、設定などで全表示ができないか色々試してみましたが、このままでどうにもならなそうだったので自分用にカスタマイズしてiphone6の画面に合わせちゃうことにしました。

 Webアプリの中身を確認しましたが、onsenUI(♨マーク?)というキーワードが所々に出てきます。少し調べたところ♨onsenUI(なぜロゴが温泉マークなのかはわかりませんでした)はレスポンシブWebデザインいう思想のフレームワークであるらしいことがわかりました。onsenUIの仕様をみるとスマホ向けのWebデザインのコンポーネントが豊富なので、ちゃんと勉強すれば見栄えが良さげな立派なスマホ向けサイトが作れそうな感じでした。ただ今回は自分専用のオレ画面になってしまうと思うので、あまりデザイン性は凝らずに操作性重視で最低限のカスタマイズに留める程度にしておきました。

 

 今回のカスタマイズは画面サイズを全体的に少し小さくして以下の様にiphone6に最適化します。

・ボタンのフォントサイズを小さくて画面状に全て表示するようにしました。

・電源「ON/OFF」と緊急停止の「STOP」スイッチの左右場所を入れ替えて、片手で持っていても「STOP」SWをすぐ押せる位置にしました。

・電源「ON」の時”Active”を、「OFF」の時"Disable”を表示する様にしてSWの状態が目視で分る様にしました。

・前後方向のボタン位置をスライダーの上部に移動しました。

・他、全体的に表示切れが起きない程度に画面サイズを縮小。

 

 HTMLとCSSをちょい変すれば直ぐできるかと思いましたが、jQueryもいじらないと上手く画面が表示できなかったので結構時間がかかりました。 

 

 ◇iphone6へ最適化した後はこんな感じです。スライドバーをグリーンにしてみましたがこれでいいのか少し微妙です。

 

_

 

 まだ操作するためだけの最低限の機能しか実装していないので、CV読み書きやポイントの操作などはできない簡易なアプリです。

ただ、操作系のパーツサイズの最適化で全て表示できる様になったので、操作性はかなり向上しました。スマホ操作中でよくあるピンチイン・アウトなどの指先操作の誤操作で意図しない画面の拡大縮小などは無縁になりました。

 

 そもそもはDsAir2用なので動作はするのですが簡易機能しかないので、今回は久々に初代モデルのDsAirで動かしてみました。

 

 ◇iPhone6で操作(すいません撮り方がおかしかったのか横に映ってました)

_

 ◇古いAndriod4.4で操作

 

 iPhone6とAndriodではOSが異なるので表示の仕方が少し変わるみたいです。Andriodは画面が小さいので一部文字が潰れたりしてますが予備機なので割り切って、メイン機のiPhone6のサイズに合わせてしまいました。

 

 MECY専用の勝手アプリですが、古いスマホをお持ちで試してみたい方はこちらからどうぞ。

※但しお試し版なので保証は致しません。

DSair_SPapp_refine_20181223.zip

 

DCC | 23:16 | comments(0) | - |
スポンサーサイト
- | 23:16 | - | - |
コメント
コメントする









 

(C) 2019 ブログ JUGEM Some Rights Reserved.