コードを書かずに動的なWebサイト制作ができる「STUDIO」が目指すもの

コードを書かずにWebサイト制作ができるプラットフォーム「STUDIO」

miyaoka氏：始めていきます。みなさんこんばんは。「NoCodeでCMSと連携するデザインツールを作っている話」というタイトルでお話させていただきます。よろしくお願いします。

STUDIOという会社でメインで働いていて、あとはROXXという会社でも働いています。

今日のアジェンダなんですが、働いているSTUDIOという会社で作っているプロダクトの話をしていきます。最初はSTUDIOでやっていること、この次がSTUDIOで動的なサイトを作るということ、あとはCMSと連携するというお話をしていきたいと思います。

では、最初のSTUDIOでやっていること。「STUDIO」とは何かというと、コードを書かずにWebサイト制作ができるプラットフォームサービスです。簡単に見せると、こういうキャンバスにDOMを置いて、サイズを変えて、画像を選んで、何かテキストを配置して、テキストのサイズを変えて、テキスト内容のラベルをクリックして、編集することができます。ちなみにVue.jsで作っています。

それでテキストのフォントを変えて、みたいなことがGUIだけでできる。このあと、この右上のPublishをやると公開ができるという、要はホームページビルダーみたいな感じです。

まず、どんなものを目指しているのかというお話をしようと思います。STUDIOが「なぜやるか？」「どうやるか？」「何をやるか？」ということで、なぜやっているかと言うと、STUDIOのビジョンは「Everyone is creative.」、誰もが本来クリエイティブだよというのを掲げているのですが、実際にはそうなっていません。

コード書く人はエンジニアだし、デザインする人はデザイナーに限られる。そのためにどうするかというと「Unleash your creativity.」、クリエイティビティを解放するということで、コード書けないとかデザインできないとか、そういう障壁になっていることをツールによって取り除くことをミッションに掲げてます。

そのために何をするのかということで、いろいろワークフローを改善したり、コードを書かずにもやっていけたりということをやろうとしているので、そんな話をこれからしていきます。

我々フロントエンドがやっていることは、このようにstateを作ってrender関数を作って結果を出してという感じで、普通にやるとこの辺のコードをいろいろと書いていきます。

これをGUI化すると、エディタでいじって、それで結果を作れるのがいいんじゃない？　という感じです。これはつまり「がんばってコードを書く」というところから「いい感じに見た目を作る」ということで、デザインのクリエイティビティを追求することができるようになります。

実際、このGUIエディタでやっていることをいじっていると、リアルタイムでDOMのデータをリアルタイムに書き換えて更新していっています。こういったことはコードを書かなければいけませんが、それをGUIでやるという感じです。

やっていることは、JSONデータを読み取ってJSONデータを更新するということをGUIを通してやっていて、作ったDOMのデータを各種renderを通して、例えばtype:'text'で'This is a Text.'と書いてあったらTextRendererを通して、これはスタイルが青色なのでこんな感じでレンダリングして、これはiconDomという独自のやつなんですけど、これはマテリアルアイコンかな？　faceというやつだと顔が出るという感じです。

あとはこんな感じで実際にライブプレビューという、エディタでいじったものをリアルタイムに各種環境でプレビューできるようになっています。

技術的な話は、サイトでいじるとデータはFirebaseで同期しているので、さきほどのように同時にプレビューができます。最終的に公開するサイトはFirebaseを使わずに静的化したJSONデータを使って表示します。

というわけで、だいたいいい感じにできるようになったんですが、これは静的サイトに限っての話です。現状の課題点は、要はコンテンツとレイアウトが分離されていないので、LPやペライチのページを作るのには適しているんですが、データの概念がないので、ブログのように更新していくことができません。なので、やはり世の中のサイトはCMSで作られているので、そういったことをやっていこうというのがこれからです。

コードの表現力も利用した動的サイトの作成

というわけで、動的なサイトを作れるように頑張っています。「動的とは」ということで、mizchiさんの発言を引用しているのですが、「動的ページをGUIで作ると複雑さが爆発するので、人類はまだそれを発明できてない」ということで「それでも成功しているGUI環境は単目的や補助ツールであって、制御構造をGUIでやるよりコードを書いたほうが表現力があって、いいんだよね」。

それはそうです。そこで、STUDIOではどんなことをやっているかというとSTUDIO Codeという物を作っていて、NoCodeというコードを書かずに済ませるやり方だとかえって複雑になってしまうようなところには、コードの表現力も利用するようにしています。

例えば、日付表示ですね。APIから取ってくると、だいたいこういったDateStringになっていて、このままのかたちではページに表示できず、フロントでnew Date()でDateオブジェクトにして、そこから変換する必要があります。

STUDIOだとこれをどうやるのかというと、表面的には日付変換のGUIを作っていて、だいたいいい感じにフォーマットするような選択肢を作っています。

しかし、例えば曜日も表示したいとか、秒まで表示したいといった要求をあげればいくらでもあるので、先ほどmizchiさんが書かれていたように「要求の複雑さが爆発してしまうので、それをGUIでやるのはあまりよくない」という状況になってしまいます。

ということで、先ほどの選択肢を選ぶと何をやっているかというと、実はJavaScriptのDateオブジェクトの.toLocaleString()の引数を選択したフォーマット関数を生成するようにしています。関数自体をデータとして保存するようにしているので、このGUIでいじりきれなくても、GUIはあくまで関数を作るだけなので、生成した関数に手を入れれば何とでも表示できるようになっています。

こちらはワークフローのイメージですね。普通はコードを書いたらwebpackなどでファイル更新を検知してビルドされて再実行されるという感じなんですが、STUDIOはWebブラウザ上のGUIなので再ビルドされません。そこで、アプリケーション実行中でもコンポーネントの定義をいじったらその定義で再計算されればよさそうという考えに基づいて、再ビルドしなくても処理を変えられるようにしようとしています。

つまり、動的にstateを持ったコンポーネントを作りたいということで、この辺は細かいと思うので、あとでスライドを見ていただければと思いますが、各DOMのpropにVMを追加してしまう。VMはVueで作っているので、Vueのインスタンスですね。一個一個のDOMがVueのコンポーネントなんですが、そのコンポーネントの上にもう1個Vueを作るということをやっています。

そうすると、作ったVueモデルにstateやメソッドを生やすことができるので、それを使っていろいろやる。つまり、もう少し具体的に説明すると、こういうコード、例えばcountというstateを持っていて、このボタンを押すとincrementというメソッドが呼ばれてcountがインクリメントされるというものを……。このコンポーネント自体を動的に書けないので、うまいことやります（笑）。

ということで、デモとしては最初はどんなデータでもJSONをいじって、またJSONで更新していくというかたちなんですが、今までのSTUDIOでJSON自体をいじるとここの表示が直接変わってしまいます。stateはメソッドで更新していくので、ここは主に初期値でそこから動的な値変更をやっていく感じです。

STUDIOでできることと今後の展開

つまり何ができるようになるかと言うと、例えばアコーディオンメニューを考えてみると、これはすごくシンプルですがやることはいろいろあって、例えばオープンしているかどうかというbooleanのstateを持っていて、そいつをトグルするメソッドがあって、あとはこのヘッダー部分をクリックするとtoggleメソッドを呼ぶというイベントハンドラがあって、あとはこのスタイルを変更するということがあります。

こういったものを作るために、動的なGUIのモデルが必要という感じです。

こういった制御を独自でやるのはまだまだ大変で、GUIでグリグリしたら実質コード書いているのと同じことをやったらいいんじゃないかなと思って作っています。

機能的にはなんとなくできるようになってきたので、あとはUIへの落とし込みをがんばっています。keimaというのはSTUDIOのプロダクトオーナーで、彼はデザイナーでありエンジニアなので、めちゃくちゃ使い心地にこだわる人です。

「最終的に何も考えなくても使えるのが正しい」ということで、どんな感じになったのかと言うと、左側にコンポーネントのstateが出ていて、そこからDOMにバインドをするとテキストだったらテキストが出るし、画像だったら画像のURLがバインドされるというかたちです。

「ついに長年の夢のUIが誕生した！！」と言っていましたね。

そもそもSTUDIOが一番最初に作り上げたときに、これはDropboxの元デザイナーが書いたModern Design Toolsのブログ記事なんですが、Design with Real DataというのをSTUDIOはもともとやろうとしていて、普通デザイナーがデザインするときはモックデータで作ります。

ですが、エンジニアだったらAPIにアクセスしてリアルデータを使えるので、もはやデザインツールにリアルデータが入っていて、リアルな表示を確認しながらデザインするのが一番手っ取り早いワークフローです。それをやることによってSTUDIOの最初に少し説明したようなミッションを達成できるんじゃないかと思います。

今はそういう動的な機能と、さらにやっているのはCMSですね。CMSに関してはいろいろヘッドレスCMSなどがあってAPIで接続ができますが、まずAPIを設定するのはエンジニアならできますが、そうでない人にはそれだけでもなかなか大変なので、STUDIO用のCMSを作ります。

管理画面は左にモデルがあって右にコンテントがあるというオーソドックスな感じですね。

コンテント編集画面、モデル編集画面という感じでコンテンツを作って、そこからデザインエディタにどうつなぎ込むかと言うと、CMSで作ったらエディタにコンテンツのデータが出ているので、それをキャンバスにドロップすると、このような感じでデータがバインドされたDOMが作られる感じです。

それでデザインをしていくと、こういった記事一覧ページで、この画像やauthor、ボディのテキストなどはすべて先ほどのCMSでデータのみで作っていて、そのデータがこのページに注入されて表示されています。

一覧ページから詳細ページの表示もここでデザインできます。このあたりをデザインしていくには、ページのデータはここに来ているので、あとは先ほど見せたようにドラッグしてバインドしていけば使いたいデータの表示に結び付けることができます。というわけで、CMSでコンテンツを編集して、デザインエディタではstateとして注入していきます。

stateに応じた表示制御をするのがSTUDIO Code機能ということで、CMSとコード機能を作っています。いつできるのかというと、4月ぐらいになりそうかなという感じです。

以上です。

（会場拍手）