開発Blog

1pxへのこだわり♪

投稿日:

IM-FormaDesignerでは、Webブラウザ上でアプリを作ることができます。
まもなくリリース予定のパッチ2では、フォーム・デザイナに関して以下の3つの改善と修正を行います。

  • 要件 [16792] 選択した画面アイテムをカーソルキー(←↑→↓)で移動できるように改善
  • 要件 [17012] フォーム・デザイナで画面アイテム選択時および枠線表示時に1pxずれる
  • 要件 [17013] アプリ実行時に画面アイテムの右端・下端が少し切れてしまう

各要件の詳細は以下の通りです。フォーム・デザイナに関しては、Undo/Redoや複数選択して移動したい等、多数のご要望をいただいております。順次改善してまいりますのでご期待ください。

選択した画面アイテムをカーソルキー(←↑→↓)で移動できるように改善

フォーム・デザイナでは、これまで画面アイテムの移動はマウスまたは画面アイテムのプロパティで行ってました。でも画面アイテムの配置の微調整がやりづらかったです。。

そこでパッチ2では、選択した画面アイテムをカーソルキー(←↑→↓)で移動できるように改善いたします。

カーソルキーだけの場合、10pxずつ移動し、Ctrlキーを押しながらカーソルキーを押すと1pxずつ移動させることができます。

これで微調整がやりやすくなり、1pxにこだわったデザインができるかと思います♪

フォーム・デザイナで画面アイテム選択時および枠線表示時に1pxずれる

配置した画面アイテムをクリックすると、見た目上、右方向と下方向に 1px ずれていました。。

原因は、画面アイテムが選択されたときに1pxの枠線を表示しているのですが、この1px分の枠線の表示方法に問題がありました。

画面アイテムの位置を変えずに、枠線を表示するためには、画面アイテムを1px分左方向と上方向にずらしてあげる必要があり、対応しております。。

この修正により、1pxのずれもなく、各画面アイテムを配置できるようになります。

アプリ実行時に画面アイテムの右端・下端が少し切れてしまう

「フォーム・デザイナ上ではちゃんと表示されているのに、実行すると、右端または下端が少し切れてしまう」という現象が度々報告されていました。。。

こんなとき私は、「大きめに横幅と縦幅のサイズをとってください」とお願いしておりました。。。

実はブラウザの問題と思っていたのですが、、調査していく中で、製品の問題であることに気づきました。。。

申し訳ございませんでした。

アプリ実行時の画面ではフォーム・デザイナより、右端および下端が16px分小さくなっておりました。。。

しかし、この問題が解消できても、1点注意していただきたいことがあります。

それはアプリを利用するブラウザによっては、切れてしまう場合があります。
たとえば、IE9でアプリを作り、そのアプリを違うブラウザ(IE8やFirefox等)で見ると、切れてしまう場合があります。この現象は画面アイテム「ラベル」で発生しやすいです。

主な理由は、ブラウザの既定フォントの設定内容です。
フォントが変わることで、「ラベル」に設定した内容が大きく表示される場合があり、下部が切れて表示されることがあります。

この問題については製品としての制御が難しいため、良い解決方法が見つかるまでは「大きめに横幅と縦幅のサイズをとって回避してください」とお願いさせてください。

-開発Blog
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

intra-mart Advent Calendar 2013 第15日:IM-Workflowの裏技

この記事は、intra-mart Advent Calendar 2013 第15日の記事です。 日曜日なので、簡単な記事ですが、IM-Workflowの裏技をご紹介します。 ■未処理・処理済などの案 …

no image

e Builder Application ProducerでDB設計♪

こんにちは、開発本部の江本です。 私は現在、e Builder Application Producer の開発をやってます。 e Builder の便利な機能やTips、今後の機能強化などについてブ …

no image

intra-mart Advent Calendar 2013 第1日:iAPでもiWPみたいにURLだけでログインする方法

気がつけば、もう12月です。12月といえば、クリスマス。そのクリスマスを指折り待つ、技術系Advent Calendarを久しぶりにimでもやってみたいと思います。正直、どこまでネタがもつかかなり微妙 …

no image

intra-mart Advent Calendar 2013 第13日:ログイン後に任意の画面を開く方法

この記事は、intra-mart Advent Calendar 2013 第13日の記事です。 intra-mart Advent Calendar 2013 第1日目の「iAPでもiWPみたいにU …

no image

intra-mart Advent Calendar 2013 第18日:認可関連のタグ3種(imAuthz, imUrlAuthz, imAuthzPolicyEditor)

この記事は、intra-mart Advent Calendar 2013 第18日の記事です。 今回は、認可関連のタグ3種(imAuthz, imUrlAuthz, imAuthzPolicyEdi …