Mac用のWebサイト作成ツールFlux 4のトライアル版を使ってみました。“Flux really is the Dreamweaver killer.”と評価するサイトがあるだけあり、使い勝手は別として多機能です。この単純なページを作成する過程で感じた感想です。全ての機能を試していませんが、使いにくさを原因とする悪い感想が多いです。
この記事はFlux 4で作成しています。
プロジェクトを作成します。すでにデザインされているテンプレートから選択するか、基本的な構造のみのプロジェクトを選択します。試しに、基本構造のWordPressを選択してみましたが、特にWordPressに特化しているような感じはしません。ここでは、デザインテンプレートを利用して作成していきます。主にサイトマネージャ、ページエディタ、インスペクタの3つのウィンドウで作業します。
テンプレートを選択すると、サイトマネージャが開きます。サイトマップのようなUIでファイルの管理を行います。今回は試していませんが、FTPはここで操作できるようです。とりあえず、この記事は1枚のみですから、index.htmlに作ることにします。index.htmlをダブクリックするとページエディタが開きます。
複数のhtmlファイルを開くと、タブで切り替えることができます。見落としているかもしれませんが、複数のウィンドウを表示させることはできないようです。また、一つのウィンドウ内に分割して開くこともできません。常に一つのファイルを操作するUIのようです。別のプロジェクトを開くと複数開きます。
ソースコードの表示も可能です。HTMLだけでなく、CSSやJS等のソースもここに表示されます。選択部分のソースがハイライトされるので、どこを編集しているのかがすぐにわかります。ここで編集することも可能ですが、編集後に対象のオブジェクトを操作すると、テキストを含め上書きされます。
ソースコードを編集したい場合には、Flux4の特徴でもあるFreeCodeモードにします。メニュー＞編集にありますが、選択すると「FreeCodeモードは、あなたのコードが間違っていても何もしないよ。」と警告が出ます。FreeCodeモードを解除するときは「整合性に問題が出るかもしれないから、バックアップをとってからがいいよ。」と警告されます。おそらく、プログラムで自動生成されたコードとユーザのコードとの整合性を完全に保つのが難しいのかもしれません。コードを編集しながら作業するなら、FreeCodeモードのままでいいのかもしれません。
それでは、この記事を作成していきます。最初は、テンプレートを使おうかと思いましたが、そうすると前回のFreewayがひどくチープに見えて比較にならないので、まっさらな状態から作っていきます。
画面上部にある、メニューから追加するオブジェクト（要素、element）を選択します。最初はbodyオブジェクトのみなので、その中に追加していきます。常に親子関係（親コンテナ）が必要となるので、最初はbodyオブジェクトを選択していないと、他のオブジェクトを追加することができません。
とりあえずタイトルを作成していきます。好みですが、いきなりheaderではなく、divを追加します。Containers＞Quick divを選択します。divオブジェクトが作成されるので、それを選択してテキスト＞H＊（数字）を選択すると、div内にheaderオブジェクトが作成されます。Textモードならダブルクリックで入力できますが、FreeCodeモードは、ソースコードに入力します。
テキストのオブジェクト（pやhなど）は、高さが0のオブジェクトが作成されます。このままだとダブルクリックしても、親コンテナに入力されてしまいます。さらに、テキストオブジェクトの高さを調整しようとすると、なぜか高さが変わりません。不意にマウスを上に移動させると高さが変わりました。反対じゃないですか？
上下のアンカーが重なってる場合、上のアンカーが優先されているのかもしれません。もちろん属性をインスペクタで変更することもできるのですが、マウスでできないはずがないと、アホみたいにハマりました。テキストオブジェクトを作成する度にこの操作が必要とは思えないので、初期設定があるのかもしれません。
さらに入力にも一工夫いります。設定があるのかもしれませんが、入力対象をダブルクリックしても親コンテナが入力対象になってしまいます。その状態で、もう一度入力したいオブジェクトを選択する必要があります。ソースコードやナビゲータ、インスペクタは最初に選択したオブジェクトを示しているので意味がわかりません。これを防ぐには、環境設定の’Double-click on page switches to text edit mode"をオフにします。この設定があるということは、何か使いにくさがあるということでしょう。手動でテキストモードに変更すると、上記の問題は発生しません。ただ、面倒です。
親子（入れ子）関係の変更方法が分かりませんでした。分かれば何てことはないのですが、左側にあるナビゲータを使えば可能です。ただ、同階層にある要素の入れ替えはできたりできなかったりと混乱します。色々と試していたら、FreeCodeモードにしてからそれを解除するとおかしくなることが分かりました。FreeCodeのオンオフでやたらと警告が出るのはそういうことでしょうか。FreeCodeにしたらそのままがいいのかもしれません。と思っていたら、一度もFreeCodeにしていないプロジェクトでも、入れ替わらないことがあります。何かルールがありそうですが、UI上は入れ替わるような挙動を示すので困ります。結局、最後まで理由が分かりませんでした。
オブジェクトを移動させようとすると、「このオブジェクトは’position’パラメータが〜」といったダイアログがでるので、absoluteかrelativeを選択します。ただ、自由に配置できるのはいいのですが、ソースコードが無茶苦茶になります。画面上では上にあっても、ソースコード内では下にあったり、CSSで位置を指定するだけなので、移動させる際はどのコンテナに属しているのかを考慮しないと、見た目とソースコードとの乖離がひどくなります。
オブジェクトの削除は選択してdeleteキー、または、ナビゲータのコンテキストメニューでも可能です。ただコンテナを削除するとそれに属する全てのオブジェクトも削除されます。
基本的な操作はこのような感じです。あとは、インスペクタで要素の属性を調整します。
器用貧乏という言葉がぴったりな気がします。操作感といった私との相性やスペックの問題もあると思いますが、不具合や作り込みの甘さがあります。一応マニュアルも参考にしていたのですが、操作方法が悪いのか元々の仕様なのか、思った通りに動いてくれず徐々にストレスが溜まる感じです。頻繁に落ちるのもいただけません。
今回はトライアル版なのでいいのですが、これで￥10,000を越える価格設定は強気だと思います。ただ、すべての機能が正常に動作すれば、その価値はあると思います。といっても、何かひっかかる独特の操作感というか、直感的でない独特な作法（使い方）を把握するまではストレスが溜まります。
バックグラウンドの処理が多く、ある程度のスペックを要求します。何かを操作する度に更新処理が入るので、操作ができない独特の間があったり、カーソルが飛んだり、下手をすれば落ちます。とりあえずWebサイトを作ってみようという初心者にはオススメしません。（使い勝手を気にしなければ）中級者以上向けかつ、HTMLとCSSの知識が必須です。
（ちゃんと動けば）良くできているので、すごくもったいないです。高性能CPUのMacなら快適なのかもしれませんが、購入する前にトライアル版を試すべきです。
正直なところ二度と触りたくないです。