#autocoding

1月の中旬に、勢い余って登録してみたAUTOCODING。 ほんのり使ってみたのでその感想を。

デザインデータからHTMLを自動作成してくれる、コーディング苦手な人に良さそうなサービス。 PSDデータをアップロードするだけで良いなんて便利すぎる！ というわけで登録してみたのです。

まず、AUTOCODINGにログインするとチュートリアルが。 チュートリアルを見れば大体の操作が分かるし、ページも8ページというスッキリ仕様。 そんなに難しい説明もなかったので、これでなんとなく使い方が分かりました。

とりあえず、進めてみようということで「新規プロジェクト」を作成。

次の画面で新規プロジェクトの内容を決めます。

1で左寄せ・中央寄せ・右寄せのどれかを選択。

2でテキストレイヤーの扱いを決めます。

＜文字と画像＞ デザイン時に指定したフォント等は無視され、デバイスフォント等に置き換わるようで、 後から@font-faceを指定することもできるみたいです。

＜全て画像＞ #textと指定した場所以外は全て画像へ変換。

3は画面表示の指定、可変か固定が選択します。

固定幅・レスポンシブ・背景のレイヤー幅に合わせて可変・自動（サービス側が判断）

以上を選択したら、新規作成ボタンをクリックし、新規プロジェクトを作成します。 この設定画面で、どうやって作るのかなんとなし気に分かってきました。

プロジェクト一覧へ移ると、新規プロジェクトが作成されています。 まだ中身がない状態なので、編集ボタンからプロジェクトの中へ入っていきます。

デザインデータがないので、＜デザインが存在しません＞と表示されています。

デザインをどんな感じで作れば良いのかもまだわからないので、 どうしよう…と思っていたらマイページにデモpsdがありました。

さっそくデモpsdをダウンロード！ プロジェクト一覧画面の新規ファイルのアップロードからアップします。

アップロードが完了すると、サムネイルが表示されます。

ここでこちら側の作業は終了。 あとはコーディングをしてもらうだけ！ サムネイルをマウスオーバーすると、サンプルダウンロードか購入を選択。 サンプルダウンロードで大体どんな感じで出来上がるのか分かります。 購入する場合は、購入ボタンへ進みます。

ポイントはクレジットカードまたはPayPalで支払いができます。 用途にあったチケットを購入して、進んでいくみたいです。 価格は下の通り。

とりあえず、お試しということでここで進めるのを終了しました。

チケットを購入してコーディングにかける、という形のようです。 (追記：コーディングは２分位で大体終わるようです)

中身はどんな感じかというと…

<section class=”main-content-wrapper”><img class=”mainimage” src=”images/mainimage.jpg” alt=”” width=”1200” height=”330”> <h2 class=”h2”>ここはｈ2として定義しています。このデザインはPSDを編集する際の見本です。</h2> <img class=”topimage1” src=”images/topimage1.png” alt=”” width=”979” height=”150”> <article class=”toptext”> <p style=”margin-top: -6px; margin-bottom: -5px;”> この部分はテキストファイルとして書き出されるようにしています。 テキストとして書き出したいレイヤーには、特に指定は必要ありません。<br> ただ、ラスタライズやレイヤー結合をしていて、テキストが保持されていない場合には画像として書き出されてしまうため注意が必要です。<br> テキストにしたい部分は、テキストが編集出来る形式で残しておくようにして下さい。<br> 逆に、画像にしたい場合には必ずラスタライズをして下さい。<br> テキストをsectionやarticleで加囲う場合はテキストを保持した状態でレイヤー名に #sectionや#articleと記述して下さい。<br> このテキストは、toptext#articleという名前をつけています。</p> </article>

こんな感じでした。 デモpsdをアップロードすると、サンプルページをダウンロードできるのでそこで大体どんな風にコーディングされるのか分かると思います。 サンプルページのソースを見た感想は、divいっぱい。 でも、この方法でコーディングだと仕方ないかな、とも思います。

h2とかarticleはどうやって指定するのかというと、レイヤーの名前で指定。 サンプルpsdは下のような感じで、レイヤーごとに名前がついています。

#header,#nav等フォルダごとにレイヤーを分別。 テキストにしておきたい部分は特に指定は必要ないようで、articleなど指定したい場合だけレイヤー名をtoptext#article、h2にしたければ#h2と記述します。 #listと指定していれば、ちゃんとリストになっていました。

こんな感じでレイヤーで大まかなマークアップを指定していくわけなので、 そこをきちんと指定しないとソースがグチャグチャになっちゃいそう。

これで全てコーディングして納品！っていう程の精度はない感じなので、 コーディングとおさらば！とはいかないですね。 時間のないとき、すぐモックアップがほしい！っていう時には便利そうだなと思いました。 値段も高くてもコーディング1回あたり1500円（+税） 高いと思うか低いと思うかは人それぞれだと思いますが、個人的には安いと感じました。