
2025.02.12
職員一人あたり52時間の残業削減に成功 kintone導入がもたらした富士吉田市の自治体DX“変革”ハウツー
NoCodeでCMSと連携するデザインツールを作っている話(全1記事)
リンクをコピー
記事をブックマーク
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はメソッドで更新していくので、ここは主に初期値でそこから動的な値変更をやっていく感じです。
つまり何ができるようになるかと言うと、例えばアコーディオンメニューを考えてみると、これはすごくシンプルですがやることはいろいろあって、例えばオープンしているかどうかという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月ぐらいになりそうかなという感じです。
以上です。
(会場拍手)
関連タグ:
2025.02.13
“最近の新人は報連相をしない”という、管理職の他責思考 部下に対する「NG指示」から見る、認識のズレを防ぐコツ
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
2025.02.13
AIを使いこなせない人が直面する本当の課題 元マッキンゼー・赤羽雄二氏が“英語の情報”を追い続ける理由
2025.02.12
マネージャーは「プレイング3割」が適切 チームの業績を上げるためのマネジメントと業務の比率
2025.02.12
何度言っても変わらない人への指示のポイント 相手が主体的に動き出す“お願い”の仕方
2025.02.13
「みんなで決めたから」を言い訳にして仲良しクラブで終わる組織 インパクトも多様性も両立させるソース原理
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
2025.02.10
32歳で「すかいらーく」を創業、75歳で「高倉町珈琲」で再起業 「失敗したからすかいらーくができた」横川竟氏流の経営哲学
2025.02.14
報連相ができない部下に対するコミュニケーションの取り方 「部下が悪い」で終わらせない、管理職のスキル向上のポイント
2025.02.10
A4用紙を持ち歩いて殴り書きでアウトプット コクヨのワークスタイルコンサルタントが語る、2種類のメモ術
着想から2か月でローンチ!爆速で新規事業を立ち上げる方法
2025.01.21 - 2025.01.21
新人の報連相スキルはマネージメントで引きあげろ!~管理職の「他責思考」を排除~
2025.01.29 - 2025.01.29
【手放すTALK LIVE#45】人と組織のポテンシャルが継承されるソース原理 ~人と組織のポテンシャルが花開く「ソース原理」とは~
2024.12.09 - 2024.12.09
『これで採用はうまくいく』著者が語る、今こそ採用担当に届けたい「口説く」力のすべて
2024.11.29 - 2024.11.29
【著者来館】『成果を上げるプレイングマネジャーは「これ」をやらない』出版記念イベント!
2025.01.10 - 2025.01.10