(cache) Riot.js と Atomic Design ではじめるテクニカルクリエイター

7月頃リリースされた AMESTAGE の Web 版を担当している紫竹です。

AMESTAGE は"芸能人とあそべる生放送"と銘打ったサービスでして、芸能人の放送する番組に対してコメントしたりギフトを贈ったり、クイズなどのコーナーに回答して一緒にあそんだりできます！！是非放送を見てみてくださいね＾＾

AMESTAGE

今回はこの AMESTAGE で利用した Riot.js というライブラリを使って、Web 開発しやすいコンポーネントをデザインの時点からワンストップで行うことができる手法をご紹介したいと思います。

俺がテクニカルクリエイターだ！

↑これは言ってみたかっただけなんですが簡単に自己紹介をすると、僕は Java と Node.js でサーバーサイドばっかりやってた人なんですが、一方個人では Web や紙のデザインの仕事を頂いたり、BaPAという学校に通ったりとデザインには明るい感じの人です。

そんな僕がはじめての Web フロントエンド開発をいい感じで進めて行くことが出来たという話をさせていただこうかなと思います。

Riot.js で AMESTAGE を創りました

もうちょっと詳しく AMESTAGE の紹介をすると、Web, iOS, Android の３つのプラットフォームで利用することが出来、芸能人がスマートフォンから動画を配信してそれぞれから閲覧する事ができるというサービスになっております。特に特徴的なのが「コーナー機能」で、50種類以上の参加型コーナーで、芸能人の描いた絵や、ジェスチャーを４択の中から当てる様なものがあります。

いわゆるツールっぽい Web サービスというより、割と機能モリモリなサービスになっているのですが、Riot.js でも問題なくしっかり動いております。

Riot.js を導入したキッカケは元々お隣のプロジェクトのタクスタが使っていて簡単で良さそうだったのと、"Web Components" を手軽に導入でき、パフォーマンスもしっかり出そうだったので採用することに決めました。

Web components と Atomic Design について

Web components はこれからの Web 開発において収束していくべき考え方の１つです。フロントエンド開発で機能とパーツをコンポーネントとしてひとまとめにし、再利用可能なものとして実装していく事ができます。

さらに今回 AMESTAGE は Atomic Design という手法を使って Web components を管理しています。Atomic Design は弊社サービスのAbemaTV が先行して導入しており、開発初期の頃にその話を聞いて実際に Github リポジトリ閲覧権限など頂いたりして参考にさせていただいています。この場を借りてお礼させていただきます！ありがとうございます！チームサイバーエージェント！！

Atomic Design に関しては様々なところで話されているのですが、ここでも簡単に話すと Atoms, Molecules, Organisms, Templates, Pages という５つの単位でコンポーネントを管理する手法です。

それぞれは大体こんな感じで分かれています。

Atoms: ラベル（テキスト）、ボタン、インプット枠など、これ以上分割できないコンポーネント群
Molecules: 複数の Atoms がまとまったもの。（例：ボタンとラベル、インプットをまとめて１つのフォームになる）
Organisms: 複数の Molecules や Atoms がまとまったもの。（例：ロゴとメニューリスト、検索フォームを合わせてヘッダーになる）
Templates: Organisms をまとめたコンテンツがない状態のもの。（例：ここまで来るとほぼワイヤーフレームの様なイメージ）
Pages: Templates に実際の写真やテキスト等のコンテンツが入った状態のもの。

instagram だとこんな風に分かれているよというわかりやすい例があったので貼らせて頂きます。参考リンクこんな感じに分かれていきます。

Riot.js はテクニカルクリエイターを目指すデザイナーにもオススメ☆

Riot.js は html を直接書いて、css でスタイルを整えて、JavaScript (もしくは jQuery )でちょっとした機能を作ったことがある「ﾜﾀｼ､JSﾁｮﾄﾃﾞｷﾙ」人なら簡単に入門することができます。

ちょっと簡単な todo サンプルを見てみましょう。

todo.tagというファイルを作ります。

<todo> 
  <h3>TODO</h3> 
 
  <ul> 
    <li each={ item, i in items }>{ item }</li> 
  </ul> 
 
  <form onsubmit={ handleSubmit }> 
    <input> 
    <button>Add #{ items.length + 1 }</button> 
  </form> 
 
  <script> 
  this.items = [] 
 
  handleSubmit(e) { 
    var input = e.target[0] 
    this.items.push(input.value) 
    input.value = '' 
  } 
  </script> 
</todo>

この todoタグはindex.htmlのような場所でこのように設置されて描画され、機能します。

<todo></todo> 
 
<script>riot.mount('todo')</script>

↑※scriptの読み込み等は省略

todoタグの中には見慣れた html の様な記述とscriptタグの中にあるそのまま動くロジックが１つのコンポーネントとして作用するように構成されています。最後はこのタグを設置したらおしまいです。

Riot.js ならこんなに簡単に Web components を体験することが出来てしまうんです。そして「どうやって Web components 使っていったら良いかわからないよふぇぇ」という時に先ほどの Atomic Design がとても良い指標になります。

Riot.js と Web components は Atomic Design と組み合わせることで、再利用しやすいコンポーネント開発をデザインの時点からワンストップで行うことができます。

開発するだけの場合もデザインが使い回しなのか別のパーツなのか明確になります。統一されたデザインの意図・ルールを意識できるようになったり、コンポーネントに名前がつくのでデザインを部品単位で捉えやすくなります。

しかもパーツを細かく再利用可能に実装しているのでデザイン変更に強い！

いいことずくめですね＾ｖ＾

AMESTAGEはどうやって作ったか

上の話と被ってしまいますが、以前 Riot.js 勉強会で発表した資料でちょっと紹介させてもらっています。本稿ではもう少し細かくお話できればなと！

Style Guide を作った

完全に AbemaTV でやられていた手法をちょっと綺麗に見せたり機能をつけたりして導入してみたのがこの Style Guide というものです。コンポーネントをリスト化して Style Guide として参照することで、デザインの確認とコンポーネントの開発が同じ場所をみて行うことができるようになります。

この画像は Atoms のページになっていて、その他に Atomic Design の Molecules, Organisms までが見れるように作られています (Template 以降はStyle Guide に載せる手間の方が大きかった)。画面右側は背景色にコンポーネントを置いた時の色味を確認できたりできるようになっています。

他にはギフトアニメーションを試験的に動かすためのコンポーネント確認ページなども用意しています。

Style guide を作るために用意したディレクトリとファイルはこんな構成です。

components/ 
├── Atoms 
│   ├── follow-button 
│   │   ├── _follow-button.scss 
│   │   ├── follow-button.tag 
│   │   └── example.tag 
│   └── atom-component-name 
│       ├── _atom-component-name.scss 
│       ├── atom-component-name.tag 
│       └── example.tag 
├── Molecules (Atomsと同じ構成) 
├── Organisms (Atomsと同じ構成) 
├── styleguide 
│   ├── style-guide-item.tag 
│   ├── styleguide.html 
│   └── style-guide.js 
...

こんな感じで Atoms, Molecules, Organisms を分けて管理しています。その中にコンポーネント名のディレクトリを作り、そのtagファイルと今回は sass を使っていて( tag 内にも style 書けるのですが長くなるしファイルを別にして書きたかったので) scss ファイルを用意、最後のexample.tagが Style Guide の表示に使われています。style-guide.jsは各 tag ファイルを import して browserify (詳細は割愛)等でまとめてstyleguide.htmlから使っています。

Style Guide 内でのコンポーネント実装例

ちょっと簡略化したコードで上記 Style Guide のfollow-button実装の雰囲気をみてみましょう。上記ディレクトリ構成のファイルたちはこんな感じになります。

style-guide.tag

<style-guide> 
  <follow-button-exam></follow-button-exam> 
  <atom-component-name1-exam></atom-component-name1-exam> 
</style-guide>

follow-button/example.tagは follow-button-exam というタグ名で実装してます。ココでの実装が Style guide の見た目になります。

<follow-button-exam> 
  <style-guide-item title="{ title }"> 
    <h1>フォローボタン通常サイズ</h1> 
    <follow-button></follow-button> 
  </style-guide-item> 
  <style> 
    // Style guide 内でどのように配置するかstyleを書けます 
  </style> 
  <script> 
    this.title = 'フォローボタン'; 
  </script> 
</follow-button-exam>

このように、style-guide-itemタグで挟んだタグが、Style guideに表示されます。AMESTAGE の様な左右に２つ同じタグが表示されるように作るには Riot.js のyieldという機能を使えば簡単に出来ます。
style-guide-item.tag

<style-guide-item> 
  <h1>{ opts.title }</h1> 
  <div class="left"> 
    <yield> 
  </div> 
  <div class="right"> 
    <yield> 
  </div> 
  <style>/* 左右に分けるスタイルとかとか */</style> 
</style-guide-item>

follow-button.tagには欲しいコンポーネントの実装を書きます。

<follow-button> 
  <button onclick="{ follow }">{ text }</button> 
 
  <script> 
    this.text = "フォロー"; 
    follow() { 
      // APIを実行して、結果が帰ってきたら text をフォロー中に変更するみたいな実装(適当) 
      sendFollowApi(function(){ 
        this.text = "フォロー中"; 
        this.update(); 
      }); 
    } 
  </script> 
</follow-button>

かなり例が雑過ぎましたが、 follow ボタンを作って、ボタンがクリックされたら API を実行して文言を「フォロー」から「フォロー中」に変える、という実装をコンポーネントにしていきます。

今作った Style Guide 上のfollow-buttonタグは本番ソースでそのまま利用することが出来るようにしてあるので、Atom 上位の Molecule や Organism に組み込まれて本番で使われていきます。

この先いろんな箇所に置かれるであろうフォローボタンにもっと機能が追加実装されたりしても、機能自体がこのfollow-buttonコンポーネントに実装されているので、開発がものすごく楽になります。もちろんデザイン変更もコンポーネント単位で考えれば良いので、簡単に"再利用"できると言えます。

まとめ

Web Components + Atomic Design を意識することでデザイナーはディベロッパーに近い目線でデザインでき、ディベロッパーはよりデザイナーに近い目線で実装できるのではないかと思います。

Riot.js で再利用可能なコンポーネントの作成をシンプルな体験にすることで、Web components から Atomic Design までも簡単に導入でき、これからの Web 制作のやり方を手軽にバージョンアップできます。

AMESTAGE は Riot.js & Atomic Design をしっかり使って、おかげさまでRiot.js 勉強会を主催させてもらえたり、Riot.js 本家の SHOWCASE に載せてもらったり色々出来ました。
僕も無事サーバーサイドからフロントエンドエンジニアとしての良いスタートを切れたので、このテクニカルクリエイターのビッグウェーブに乗ることが出来たのかもしれませんね（謎）