見出し画像

Vue.js v-tokyo Meetup #9で登壇しました

miyaoka

4月24日に 株式会社Speee にて Vue.jsのmeetup が開催されました。Vue.jsを使ったサービスということで STUDIO が技術的にどのように開発されているかという内容で登壇してきました。

フロントエンドのライブラリではReactやVueが現在多く利用されていますが、Vueは特にコミュニティの人気が高く、今回のmeetupも募集開始からあっという間に定員が埋まってしまいました。（100人の参加枠に400人以上の応募という人気ぶりで、ボランティアのスタッフ枠ですら定員オーバーという盛況）

そんなわけで参加できなかった方も多いとは思いますが、当日の動画のほうは後日 crash.academy で公開されるようなのでそちらをご期待下さい！

（追記：↓こちらで見られるようになりました）


登壇資料

こういう登壇では一般的にスライドを作るものなのですが、STUDIOは「Webサイトを制作できるデザインツール」なので、せっかくだから自分の発表資料もSTUDIOで作ってみることにしました↓

作ってみた感想としては

- スライドみたいにフォーマットがかっちりしてないので体裁を整えるのに時間がかかる
- レスポンシブの表示も考えないとスマホで読みづらい
- （STUDIOの機能として）コードのシンタックスハイライトが無い / インラインのリンクが設定できない

などというところが苦労しました。
逆に良かったところだと

- スクロールできるので、スライド一枚のサイズにとらわれなくていい
- 共有するときに普通のサイトなのでスライドより一覧性が高く読める
- （STUDIOの機能として）モーダル表示のインタラクションを入れたりできた

という感じでした。

普段開発しているとユーザーとしてしっかり使い込む機会があまり無かったので、こうしてドッグフーディングすることでいろいろ課題点が実感できたのが良かったように感じます。

STUDIO v1→v2への歩み

STUDIOは今年1月に新バージョンとなるv2をリリースするまでに去年の夏頃から開発してきました。

当初はもっと短い期間で単体の新機能を追加する予定だったのですが、いろいろ土台から作り直した結果、半年くらいかかって全体的にリニューアルすることに至りました。

内容については登壇資料に書いたことや書いてないことなどまあいろいろやったんですが、主に自分が開発したところだとドラッグ＆ドロップ機能のあたりになります。こういうのはUIを司るフロントエンドでも実はそんなに携わることが無いんじゃないかなと思います（普通の管理画面や、サイト表示だとそういうインタラクションはあまり求められないので）。

今のフロントエンドで求められる状態管理や設計も好きなのですが、自分が元々Flashから開発をやっていたこともあり、やはりツールとしてグリグリ動かすアプリを実装するのは単純に楽しい感じがします。

次期バージョンに向けて

v2をリリースしてからは不具合修正などしつつ、引き続き新しい機能を設計し続けています。

4月19日には STUDIOの3周年イベントを noteの 株式会社ピースオブケイク で開催したのですが、そこでいくつか開発中の新機能についても発表しました。

今までのSTUDIOだと静的なサイトしか作れなかったので、外部からデータを動的に取得して表示する機能を現在開発しています。

WordPressのような記事管理画面（CMS）も作ることで、STUDIOでブログ更新みたいなこともできるようになるんじゃないかと思います。

モリサワフォント

さらに、ちょうど登壇した日の昼に新機能をリリースしました。

STUDIO上でモリサワのフォントを無料で利用できる機能です。今までもGoogle Fontsは利用可能でしたが日本語書体となると数が少なく、日本語を活かしたデザインをするのはなかなか難しい状況でした。

今回からモリサワの日本語書体が500種類以上利用可能になったことで、日本語でのデザインの幅がとても広がりました（↓サンプルサイト）

縦書きの設定も要素を選択してボタン一発で変えられるようになってます。

日本語書体や縦書きを活かしたデザインはWebだとなかなか作りづらかったので、これでかっこいい日本語サイトデザインのコンペをやったりしたら面白いかもしれません。

いろいろSTUDIOの機能を開発していっていますが、こうしてユーザーの表現の幅が広がっていくのはとてもいいなーと思います。

この記事が気に入ったらサポートをしてみませんか？