このエントリーをはてなブックマークに追加
4797768436_43b448d7aa_b (1)

読了: 約 4 分

先日adobe museの記事を書いたところ、幾人かの方からメンテナンスコストはどうなのかというツイートがあったので、adobe museではないですが、他のサービスを試してみて、それを生かして受託開発をしてみたのでその時の感想。

目次

  • ・誰もが夢見る自動コーディング
  • ・adobe museにふれる
  • ・某自動コーディングサービスにふれる
  • ・運用や納品等含めた受託的な側面
  • ・作って納品するだけのサイトでの利用

誰もが夢見る自動コーディング

数年前からコーディングの自動化が叫ばれ、もしくは中国など海外に外注して
安価でクオリティはそこそこのコーディングをしてもらうということが言われています。

日本人やある程度技術力のあるリーダーを置いてマネジメントしながらであれば、クオリティを担保しつつ人件費は抑えられると思いますが、
ウェブサービスなど運用が必要なものだと自動コーディングは厳しいのかなと、

今となっては、マークアップエンジニアという言葉が死語になりつつありますが、
おれたちマークアップエンジニアは終わった…なんて考えていました。

adobe museにふれる

【サービス】Webデザイン・コーディングが圧倒的に効率化するというAdobe museを触ってみた所感
http://makoto-tanaka.com/css3-2/4959/

先日書いた記事はこちらなのですが、adobe museはレスポンシブデザインなども
含めてわりかししっかりしている印象。
かといって、pngやpsdデータから一括で変更してくれるわけではなくて、
レイヤーやボタンなどのパーツごとでの部分生成という感じなのかな。

ディレクトリ・カテゴリーなどもXcodeでいうストーリーボードのような形で
GUIベースで管理できるのは、ワイヤー・構造が理解できていれば、
HTML/CSSでのPathを考慮しなくても済むので、デザイナーさんにとっては楽かもしれません。

若干、FireworksとPhotoshopに似ているけど、
基本的にはmuse上でデザインを再度作っていくという感じなので、
Photoshopのボタン配置や他のファイルを追加するという機能があります。

スクリーンショット 2015-05-17 午後10.54.57

このような形で、ブラウザでプレビューすることも可能です。
Dreamweaverのライブビュー機能があれば、別にブラウザ確認する必要もそこまで無さそうかな。

スクリーンショット 2015-05-17 午後11.09.43

ちなみに生成されるHTMLとCSSの構造はこのような形。
割としっかりと構造ができていて、感動しました。
classもClearfixなど、通常のコーディング同様なものも使用されていますが、
idの命名とinlineで書かれたCSSが気になりますね。

スクリーンショット 2015-05-17 午後11.12.22

個人的には、もう少しFireworksの機能を踏襲して、
muse上でのデザインをし易くし、それをHTMLにパブリッシュできたほうが、
FireworksとDreamweaverの美味しいところどりという形で
使い道があったかなーという印象。それでもここまで進化しているのには驚きましたね。

某サービスに触れる

営業妨害になるかもしれないので、某サービスとぼやかせていただきますが、
自動でコーディングできるサービスがこのところ増えてきています。

某サービスに関していうと、
text-1,text-2のようにclassが連番で振られる仕様になっているようなので、
連番のコーディングのメンテナンスコストは、非常に高いです。

設計が汎用的・HTMLの構造も直感的でなく、
OOCSSやSMACSS、BEM、SuitCSS、MCSS、FLOCSSなどモダンなHTML/CSS
設計と比較するともう手がつけられないレベルで辛い
です。

参考までにFLOCSSを見ていただけるとモダンなHTML/CSS設計がわかるかと思います。
参考:FLOCSS

運用や納品等含めた受託的な側面

受託でウェブサービスやウェブサイトを作った時の難点として、
クライアント側で作業がしにくいという点。

コメントが吐き出されるわけではないので、
連番で生成されたとしてもそれが設計上どの部分にあたるのか
判断しにくいのです。

コメントを付けて納品したとしても、
途中から命名規則を変更するのは難しく、
運用している中で段々破綻してくるようになるでしょう。

また、JSを使用する動的なサイトではjs-やisなどの状態を
表すクラスを接頭辞として利用するかと思いますが、
それも混在し始めると読むのが非常に困難なコードになるでしょう。

それでも下記のようなコードが乱用されている訳ではないようでしたので、
まだマシな方でしたが、受託開発では厳しいのではないかといのが
結論です。

position:relative;
position:absolute;

作って納品するだけのサイトでの利用

デザイナーさんにとっては良い流れだと想いますが、
昨今のウェブサイト・Webサービスというのは「生物」。
つまり、運用が大事で、運用次第で如何様にでもなる。
逆に運用しなければ、古いものとして終わってしまうと思います。

まとめ

結論としては、企業や大規模案件、運用まで考慮して自動コーディングに達している実用的なサービスやツールはまだない。
だが、実験的に、一部サイトで使用することは可能になっているということです。

Webでのサイトやアプリ、サービス開発に携わる者としては、
作って終わりではなく作ってからのメンテナンス・運用が全てだと思うので、設計がされていないと厳しいと思います。

今後としては、デザインデータのlayerの名前を統一して、
PhotoshopのJSでの自動吐き出しのプログラムを書く要領で、
構造がある程度明示的であれば、作れるのかな。
githubとかもうちょっと調査してみたら面白そうかなと思います。

機会があれば、もうちょっとその辺のツールやら、実装やらを調べて
adobe museあたりはもう少しさわりがいがありそうなので、何か作れればと思っています。

photo credit: seier+seier plywood chair christmas card 2009 via photopin (license)

SNSでもご購読できます。

運営メディア

男性向けお役立ちメディア Coolhomme
就職・転職、エンジニア転職向け求人サイト Rplay
'