Mayaaでサイトを作るときのワークフロー

Leave a reply

これは Advent Calendar 2015 の15日目です。昨日は「Mayaaでm:idの組み方が原因でページ全体がエラーになるのを防ごう（CompiledScript / ScriptEnvironmentの拡張例）」でした。

今日を乗り切ればあと10日です。最後まで気を抜かず頑張ります！といいつつ、昨日もガチなこと書いてしまったので、今日はゆるく行きましょう。

Mayaaを使ったサイトの作り方

Mayaaを使ってサイトを作るってどんな感じになるんでしょうか。

HTMLを先に書くのが良いのでしょうか？Mayaaを先に書くのが良いのでしょうか？

今日はそんな話をしてみようと思います。

プログラマーが書くときは先にHTMLを書くと良い

意外かもしれませんが、最初にプロトタイプを書くのはプログラマー側のほうが良かったりします。まずは、m:idも何もない状態で、HTMLで骨組みを作ります。

<div m:id="LOOP_ITEM">
名前: <span m:id="NAME_HERE">名前</span><br />
住所: <span m:id="ADDRESS_HERE">東京都</span><br />
</div>
<div m:id="DUMMY_TAG">
名前: <span m:id="NAME_HERE">名前</span><br />
住所: <span m:id="ADDRESS_HERE">東京都</span><br />
</div>
<div m:id="DUMMY_TAG">
名前: <span m:id="NAME_HERE">名前</span><br />
住所: <span m:id="ADDRESS_HERE">東京都</span><br />
</div>

<br />とか書いてるし、デザイナー・HTMLコーダーの方に言わせたら怒られるかもしれませんが、僕達が作るのはデザインではないのでこんな感じで骨組みを作っていきます。

そして、Mayaaファイルを作って動きを見ます。シンプルなデザインの方が結局ロジックを考えやすいです。

Mayaaはデザインを凝るためのテンプレートエンジンですが、デザインを放棄するために使うという発想です。

デザイナーが最後まで作るとどうなるか

残念ながらサイトを作る能力はデザイナー氏の方が上です。プログラマーって詰めが甘いんすよね。反省します。

なので、デザイナーが動くよりも前に必要な機能、m:idは全部そろえてしまって、デザインの人にグリグリいじってもらった方が良いサイトができます。

ただ、この方法を取ると次の問題が

  • デザイナー段階で手戻りや追加要件が発覚する場合が多い
  • デザイナーにどこまでテストの負担を強いるのか

結局のところ、システム開発という観点だと、この問題が発生します。

伝統を駆使する

こういう時は、伝統的な発想が役立ちます。

デザイナーはワイヤーフレームを作り、フォトショップでデザインを作り、コーダーがHTMLを打ち込む。

SEが基本設計、詳細設計を詰め、プログラマーがプログラミングして、単体テスト、結合テスト。。。

おう、受託開発＼(^o^)／ウォーターフォール／(^o^)＼

経験上、このスタイルでも、Mayaaはまあ、うまく使えてるかなと思います。

そうすると、気づいてみると、一つの組織の中に2つのフローが発生してきます。

*ディレクター→デザイナー→コーダー
*PM→SE→PG→テスター

一つの組織に2つのフローが入り乱れて行く、この問題はどこでサバくべきなのか！結構複雑になってきます。

それは、嫌なことなのかといえば、それって良いことだと思います。

専門性を発揮する

僕の所属する組織では、SEはPGの上位職ではなく、それぞれが専門チームとして活動しています。デザインチームも、デザイナーとフロントエンドエンジニアが対等に活動しています。それぞれが専門性を発揮できていることは、良いことだと思います。

Mayaaによってデザインとコードが分離できていること、一つの雛形を何度も使いまわせることが、各自の専門性をアップすることに一役買っているかもしれません。

そうだったらいいな。

まとめ

1人や2人でサイトを使うのにも、Mayaaは便利です。また、大人数で作るのにも十分向いています。大事なことは、各々が自分の専門性を理解して、良いサイトを作ろうと、皆で力を合わせることだと思います。

コメントを残す