調べつつ社内向けに書いたけど別に競争的な内容(わらい)を含んでないのでインターネットの皆様でお役立てください。
いわゆる情報量が低い記事となっておりますので、各位共々よろしくお願いいたします。
追記
この記事はネタをネタとして楽しめる子供のインターネットとしてお楽しみください
dis られたので、真面目に考えてみた。
よーけんてーぎー
- HTML + CSS の職人技を軽減させる
- 視覚的に HTML の構築と CSS のスタイリングができる
- モジュール化などしてくれて再利用性が高い
- 大規模案件にも耐えうる
- CSS (Sass) 管理
- アセット管理
少なくともこの2つが何とかなればあとは目をつぶれる…つぶれる…つぶれ！
あとは
- テンプレートファイルが読み込めたりとかできる
- Web Components の使用ができる、もしくはサポートされている
- Template
- Shadow DOM
- Custom Elements
- HTML Imports
- マークアップの精度 (セマンティック) とかはこの際もはや気にしない(どうせ div しか使わない)
くらいな気がする。
果たして僕たちは幸せになれるでしょうか。
Adobe Contribute
http://www.adobe.com/jp/products/contribute.html
なんか、そういうのじゃないのでそっと閉じた。
今流行(笑い)の Wordpress (笑い) っていう PHP (笑い) のツールを使って、みんなやってる(笑い)ブログ(笑い)っていうのを作れます。
Adobe Dreamweaver
http://www.adobe.com/jp/products/dreamweaver.html
ちょっと見ない間(4年くらい)にわりと進化はしていたけど相変わらず駄目な部分を直そうとしないっていう田舎のヤンキーの友達みたいな感じだった。
でも、地味に Sass とかサポートしてたので他人のふりをしつつも褒めてあげたい気持ちにはなる。
GUI ツールではないのでそっと閉じた。
Adobe Edge Reflow
http://html.adobe.com/jp/edge/reflow/
レスポンシブウェブデザイン用のウェブデザインツール。基本的には要素をポンポン画面へ置いて、各 width で調整してパブリッシュみたいな感じ。
現在プレビュー版。進化すると Photoshop CC と連携して動くらしい。どんな連携かはまだ未公開。進撃の巨人くらいもどかしい。さっさと公開しろ。
所感
- GUI ツールとしては直感的に使える。また Photoshop とかと同じようなショートカットが使えるのでいい
- 要素のポジションとかその関連性や階層とかもわりと細かく設定できる。が、全てではないし、ユーザが自由に CSS 入力できるところはない
- 要素にクラスとか ID が自由に付けられない。付けられる項目すらない
- はき出される CSS はページ毎。なので、ツール側では CSS を concat することは考えてないので、くっつけられない
- div, p, image くらいしか使えない
- パブリッシュされる HTML, CSS 綺麗とは言いがたいし使いづらい
- アニメーションとかの機能はない
これだけで完結できる、もしくは最初の1回だけこれをベースに作っていくのなら使えなくはない。が、はき出される CSS などが手を付けづらいので結局職人技になるのでは。
使い回しやモジュール化もしづらい。そういう機能があるっぽい？けど、使い方が分からなかった。
高級ペライチ向け。
Adobe Muse
http://www.adobe.com/jp/products/muse.html
どこかで見たことあるだろ…？この黄色…そう、奴だよ。分かるか？一度しか言わねぇぞ…。アイツの名は…。 "FireWorks"
すごい簡単に言うと FireWorks で HTML に直接デザインできるようにしました。っていう感じのツール。
それだけ聞くと完全に勝った感じがして、俺も思わずエディタを消そうか悩んだりはしました。 パブリッシュを行うまでは。
ただ一つ、この時点で使い物にならなかったのでそれだけ説明してこの章は終わりにしたいと思います。
作ったものをローカルにパブリッシュすることはできず、Adobe Buisiness Catalyst とかいう謎の HP が立ち上がって初めてウェブページを確認できる
何が起こったのか分からない？ぼくにも分かりません。
どう頑張ってもツール上でローカルへ HTML と CSS を保存することができなかったので心が折れた。
MONTAGE STUDIO
専用の Web アプリ上での GUI ツールを使って DOM のエレメントツリーを作りながら、Web アプリを作る的なアレ。
出力は HTML + CSS + JS。ビルダー側は Node で動いてるっぽい。
所感
- DOM ツリーの GUI とかはわかりやすいと思うけど、CSS などは結局手で当てる必要がある
- アプリ化して出力してみたが、起動に数秒かかっている。(ボタン置いただけなのに)
- 専用のいろんな JavaScript に依存してるので今回の要件との相性は悪いのと説明が少ないので先に心が折れた
- めっちゃロックインするのでこいつから離れることができなくなる
- アニメーションとかの機能はない？
ある程度最初から用意されているスタイルがあるのでそれを見ながら組み立てる感じ。 jQuery Mobile(わらい) みたいな。
パブリッシュされたファイル、DOM 構造は HTML で各要素の設定は JSON オブジェクトで表されているので、それを直で編集してもよさそう。直編集からでも GUI ビューには反映されていた。
いわゆるリスト型のアプリ(TODO みたいな)のを作るならいいと思います。ゲームを作るのは辛いのでは。
Macaw
$179.00 (2014/04/28現在)
Adobe Edge Reflow に似た、レスポンシブウェブサイト用のウェブデザインツールって感じ。画面上にポンポン置いてけばパブリッシュしてくれる。
所感
- GUI ツールとしては直感的に使える(が、直感的すぎてゴミみたいな DOM がちょいちょいできる)
- 置いた要素に対してのスタイリングはある程度 GUI 上でできる。全部のスタイルプロパティを自由にできるわけではない
- 1要素に1つだけ自分でクラス名を付けられる(逆に言うとそれ以外のアトリビュートは付けられない)
- 複数ページで同じクラス名とか付けるとぶつかる
- 簡易的なスクリプトエディタがあって、記でクラス名を付けたエレメントたちが羅列されたりしている
- jQuery v1.8.3 が一緒にパブリッシュされてて渋い
- パブリッシュされる CSS にユーザのスタイルを追加とかはできる
- 共通スタイルとかはここで作れたりするけど、そもそもクラス名が付けられないので死んでる
- パブリッシュされる CSS と HTML、綺麗とは言いがたい。なのでテンプレート化するのも辛そう
- アニメーションとかの機能はない
- 複数ページで同一のクラス名をガンガン使ってくるが、そもそもパブリッシュさせる CSS がページ毎なので大丈夫っちゃ大丈夫だけど concat & minify したら死ぬ
レイアウトモックを作ったりするのはすごく楽そうだけど、はき出される HTML の構造は見やすいものの CSS がゴミで気合いが入った絶対配置ばかりでいざアプリケーションにしようって思うと魂が叫びそう。
デザイナーがざっくり作って、フロントエンドエンジニア殿が手を入れながら繋ぐのもありっちゃありだけど、SAN 値が MAX になりそう。
せめてクラス名に prefix 付けたりとか attribute を好きに付けられる機能があれば、蜘蛛の糸くらいの気持ちで掴んでもいいかも。
現状、アプリケーション向きではない。高級ペライチ向け。
結論
