削除」って出てくるんです。「え?Dropbox??Dropboxと連携でもするの??デフォルトで??」って思っちゃうじゃないですか。「Dropbox」って言ったらオンラインストレージサービスのDropboxが有名じゃないですか。これややこしいですね。Workflowにはあるようですが(詳しくないです)、ここに関しては別に連携しているわけではないんですよね。ただのリストの添付ファイルなんですよね。添付ファイルの他にも出てきます。削除!これは結局、コントロールを削除するメニューなんですよね。削除」は「Delete」でした。削除」になったんでしょうかね。Dropboxはいったいどこから出てきたんだ...、謎です。ややこしいので正直「Dropbox」という表記は表示させたくないですね。Formsの編集画面のリボンの方はイイとしても、添付ファイルの部分に関してはユーザーが見る部分なので。JSで消せそうだし、CSSでも消せそうなので、そのうちやってみようと思います。今回はとりあえず問題提起。Dropboxに意味があるなどご存知の方はご一報いただければと思います。FormsはGUIでグリグリ操作できるのは便利ですが、クセがすごい!(千鳥のマネじゃないです)。クセを把握した上でコツさえ掴めば大丈夫です。その1として、コントロールをキレイに配置した後に、コントロールの大きさを調整したい場合、該当コントロールを選択し、ドラッグしてマウスを動かすと、なぜか隣のコントロールの大きさが変わってしまう事がある件について。これはコントロールの重なり順に関係してくるようです。コントロールは一応レイヤーの概念があり、PowerPointの「オブジェクトの順序」みたいなもので、コントロールの配置順に重なっていくイメージです。(厄介なのは最前面と最背面しかない事ですが。)▼コントロールがキレイに配置されている場合。▼コントロールを全て選択すると重なり具合がわかります。隣接されたコントロールが重なると、この上になっている方を優先して掴むようです。(というより掴める範囲が上になっている方が広いという表現の方が正しいです。)今置いてるカーソルの位置で掴んだらどちらのコントロールが掴めるかの判定は、カーソルを置いて1秒程度で表示されるコントロールの説明ダイアログで判定してください。厄介なのは一旦操作したいコントロールを選択した上で、サイズを変える□を掴んだとしても、やはり上になっている隣のコントロールを掴んでしまうんです。▼「body」というラベルを左寄せのまま横幅を狭めたい場合、ラベルを選択し、右の□を掴もうとします。(すでに説明ダイアログには「複数行テキストボックス」と表示されてしまっていますので、この後の挙動は推測できてしまいますが...)▼案の定、右隣の複数行テキストボックスコントロールが左に広がってしまい、意図した操作ができません。したら良いのか?1px単位の細かさでマウスを動かして良さげな場所で掴めば意図したコントロールの□を掴めますが、正直ダルいです。▼ブラウザを200%くらいに拡大すると、ギリギリの場所を掴むのに少しは楽になります。▼他の方法としては、コントロールを選択して、下矢印キー(↓)などで少しズラす。すると隣のコントロールの□と重ならないので掴めます。リサイズした後に元の場所に戻せばOKです。こんな感じで結構イラっとくる事が多いのですが、挙動を把握した上で、コツさえ掴めば楽しくデザインできます。divパズルの仕様をもう少し掘り下げてみるNintexの中でもFormsは若干マニアックなようなので、果たしてFormsの記事のニーズはあるかどうか疑問ではありますが、実際自分で試行錯誤している中でググっても特に日本語の情報が薄いので、同様に困っている後発の方々のお役に少しでも立てたらと思います。前回、コントロールがdivでパズル状態であるという説明をしましたが、もう少しその仕様を掘り下げてみます。カスタムリストに何も手を加えずにFormsを起動し、タイトル列のラベルとコントロールのみを残し、他を全て削除してみます。これで一番シンプルな構成になったので解析開始。IEの開発者ツールを見ます(個人的にはFireFoxのFirebugの方が好きなのですが...)。SharePointあるあるですが、シンプルなデザインなのに中身は超入れ子状態のdivを展開しながら色々観察すると、nf-ではじまるclassがあり、なんとなくここからNintexのターンだなと感じてきます。そこから更に入れ子が激しいのですが、把握するためにも1つずつ展開させていき、最終的にtdが1つしかないtableに出会います。ms-formbody”がFormsの大枠にあたり、インラインでposition:relative;が記述されています。この左上の位置がコントロールの基点ですね。このスクショでは見切れてしまっていますが、このコントロールの枠のdivにはclass「.nf-filler-control」があって、これにposition:absolute;が記述されています。インラインでtopとleftが指定されており、このラベルは基点に置いてあるのでtop:0;left:0;です。↑次にタイトル列のコントロール。ここに先ほど見切れていた「.nf-filler-control」の記述がありましたね。position:absolute;が記述されています。基点からの位置でtop:0px;left:200px;が指定されています。ラベルではwidth:200px;が記述されていたので、キレイに並ぶという感じです。いう仕組みで基点からtopとleftで位置を指定して、パズルが組みあがるという仕様です。ちなみにコントロールの枠のdivから実際のinputタグの間に更に3個ものdivがありました。見た目はシンプルなように見えても、中身は複雑で読み解くのが面倒ですね。SharePoint自体のデザインカスタマイズでもそうですが、この見た目シンプルでも中身は複雑である事は逆手にとることもでき、CSSのみのデザインカスタマイズをおこなう際に、セレクタを駆使すれば難易度は高いけど自由度が意外と高くなったりしますね。ほら、僕はゴリゴリのカスタマイズや開発は基本的には反対派なので。FormsはGUIでコントロールを配置できるので非常に使いやすい!デザイン面では最初はそう思っていました...。Formsを特に教わったこともなく使い始めてGUIを見た時に、作業手順としては、とりあえずまずはキレイにコントロールを配置して、後からCSSを記述しようと考えたんです。これは結果的に間違いでした。デザイン面でのFormsの特徴やクセや配慮する点を把握し、まずはモックを作って確認したり、設計を先にしないと、後々苦労する作業手順です。デフォルト状態で仕様を確認します。Formsを起動すると、すでに追加済みの列は勝手にキレイに配置してくれます。ソースを見るとコントロールってdivをパズルのように配置しているんですよね。コントロールの自由度が高いのもtableレイアウトじゃ無理ですもんね。大枠がposition:relativeになっていて、配置するコントロールがposition:absoluteでtopとleftで基点を指定する感じ。(パネルを入れ子にすると...という話はここではとりあえずしません。)次にFormsのデフォルトのデザインです。Formsのデフォルトのデザインの行区切りのボーダーに関しては、各コントロールであるdivに.nf-sectionというclassが設定されていて、これのborder-topが指定されている感じ。余談ですが、ここにmargin-top:-1px;が記述されているのですが、後々Formsの仕様を把握すればこの記述は納得するのですが、この話はまた別の機会に。Formsを使用する際に、このデフォルトのデザインでは上下(厳密には上のみ)のボーダーのみですが、デザイン面でのカスタマイズとして、フォームをTableのように表組みしたいニーズは多いと思います。Table的にth部分とtd部分の背景色を変えたり、枠線を上だけでなく上下左右全てつけたり。冒頭の手順の通りに、GUIでコントロールをキレイに配置をしたら、後はCSSで.nf-sectionに背景とボーダーを指定すれば完成!楽!と思いきや...むむむむむ...選択肢列のラベルが縮んでる!よく見ると数箇所でボーダーがズレていたりする!1px程度の誤差ですが、仕事としてはダメですよね。設定画面に戻ると、とりあえず選択肢列に関してはコントロール自体が縮んでいました。デフォルトで配置される選択肢列(ラジオボタン・チェックボックス)は修正が必要です。選択肢列のラベルとコントロールを縦に広げて直しました。よくなったけどボーダーのズレは気持ち悪いです。「添付ファイルを追加」をクリックすると...添付ファイルのコントロールに左のラベルのサイズは追随せず、かなり段が崩れて、これまた気持ち悪くなります。簡単にはキレイなテーブルにはならないんです。残念ながら本記事ではここまでです。これをどう解決してキレイなテーブルにできるのか?これは僕もかなり苦労したところですが、コツがたくさんあって結構重い内容なので、問題提起だけして放置するのも申し訳ないですが、今後の記事にご期待ください。予告としてFormsで大事な要素はパネルがキモだよ並べ順も大事だよボーダーは下線が問題かなり変則的な工夫が必要だよコントロールによってはclassが二重になっている事もあるよこんな感じでしょうか。仕事もプライベートも色々と多忙なので更新頻度が低くなってしまいますが、気長に情報発信していこうと思います。2007/2010/2013の運営・サイト構築を担当。仕事でも登壇活動などをしています。契約し、家庭内活用しています。楽しさを多くの方に伝えられたら、と思っています。当ブログは完全に個人の趣味で運営しています。しているので、正確性に欠けている場合があります。日々変更のあるサービスをネタとして扱っているため、特に古い記事についてはご自身でも調査・検証を行ってください。2019-2020受賞しました。当ブログに掲載されている情報は、必ずしも正確性や安全性を保証するものではありません。掲載された内容によって生じた損害等の一切の責任を負いかねます。当ブログに掲載されている情報は個人の見解であり、所属する団体・組織は一切関係ありません。