2015.07.01
【Re:Genesys】再構築したっていいじゃない、システムだもの
技術話これまでのものはプロトタイプにすぎなかった
もちろん、手抜きというわけではなかったし、常にその時のベストを尽くし、細かな改善を続け、その度により良いものになっています。それは、これまでの実績を見れば明らかではあります。
Genesysは、約四年近くの期間、開発元自らが自社の業務を遂行するために利用されてきました。システム開発会社の大半は、顧客のためのシステムは作りますが、自社のためのシステムはあまり作りません。普通の絵描きは自分で筆を作らない。と言えば伝わるでしょうか。しかし、我々はWebサイトを作るための筆を自ら開発し、三年以上の歳月をかけ、Webサイトを作り続けました。
その間に、欠点が多く見つかったのかというと、そうではなく、それどころか、まだ使いこなせていない面すら存在するのではないかという状況です。そんな歳月の中で明らかになったのは、むしろGenesysのさらなる可能性でした。
会社設立当時、Genesysは他に例の無いアイディアをもとに開発が開始されました。そのため、技術の成熟という面では、ゼロに等しいものでした。それが、今や凄まじい数のWebサイトの屋台骨を支えています。そこまで使い続けると、目指すべき方向性も自ずと明らかになってきます。
今回、これまでのノウハウ、経験を踏まえ、(社内的にはバージョンアップということになっていますが)思いきったリファクタリングを実施する事にしました。これまでに蓄積されたGenesysの利点、欠点を含め一度全ての要素を解体し、再構築する。
「Webデザイナーだけで動的Webサイトを作る」という、開発開始以来変わらないコンセプトだけを残し、今の時代、そして昔よりも遥かに成長した我々の技術力に相応しいものに創りかえるのです。
冒頭の「これまでのものはプロトタイプにすぎなかった」という表現は決して大袈裟なものでなく、多くの改善をもたらす予定です。
四年前と比べ、Webを取り巻く環境も大きく変わってきました。
スマホが普及し、古いブラウザが淘汰される事により、HTML5も一般化していくでしょう。
当然、今回のバージョンアップで適切に対応していくつもりです。
これまでとの違い
さて、前置きが長くなりましたが、今回のバージョンアップで目玉となる変更内容について具体的に紹介をさせていただきます。
1.cmsモードajax化
パーツの設置や移動、編集の際、変更のある箇所のみ非同期でhtmlを取得し、更新するようにします。これにより必要最小限のロードとなり、レスポンス及びサーバー負荷が改善されます。また、更新の度にページが先頭にスクロールという事もなくなります。
2.履歴、undo、redo
これまで、Genesys特有のシステム構成から、コンテンツの編集履歴を管理することは困難でした。wysiwygエディタ一つでページを作るようなCMSならともかく、Genesysの場合はパーツの組み合わせでページを作る上に、Darwinの場合は、制作者がパーツを自作する事もあります。他にも様々な制約がこの機能の実装を妨げていました。しかし、根本的な構成を変える事で、この障壁を克服し、完璧な履歴管理を実現しました。
3.ページが出来てから公開
履歴管理が実現することで、これも実現する事ができました。ページを作りこんでから、公開用のボタンをクリックすることで、変更内容がコミットされます。作りかけの中途半端な状態でページを公開しなくてよくなります。
4.ドラッグ&ドロップでパーツ追加
今回のバージョンアップで、パーツをドラッグ&ドロップで追加出来るようになります。動作的には、パーツの移動と同じ仕組みを共有するため、移動が可能な領域にはパーツの追加もできます。
この変更による利点は二つあります。
・領域の末尾以外にもパーツが追加できる
・追加用のボタンがなくなるため、より実際の見た目に近づく
5.階層構造を表すパーツツリーの追加
枠(divタグ用パーツ)等、freelyのパーツは入れ子にできるものがいつくかあります。そのような入れ子構造を視覚化するUIを追加します。このUIを用いて、パーツの並び替え(=パーツの移動)も可能ですし、ここから直接パーツの編集ダイアログを立ち上げる事も可能です。
ツリーの要素にカーソルを合わせる事で、表層上のパーツの色が変わり、実際にどのパーツなのかもわかりやすいようになっています。
弊社の制作陣に、まだ開発途中のバージョンを少し触らせてみたところ、誰もが口を揃えて「これは便利だ」と言います。確実に生産効率を向上させる事になるでしょう。
6.HTML5対応
これは、将来的にHTML5が普及する事を見込んでの準備という位置付けではありますが、HTML5用のタグを出力できるようにする予定です。
将来、HTML5が普及すれば、検索エンジンがHTML5で作られたサイトを優遇するという事が考えられます。HTML5は(HTML5の意図通りに作れば)よりセマンティックなものであり、HTML4よりも圧倒的にページを解析しやすいものになっているからです。
新バージョンでは、HTML4/5を管理画面上でスイッチ出来るようにしておきます。HTML4/5が混在する期間中は、HTML5専用タグの替わりにdivタグを出力するHTML4モードで動かしておき、タイミングを見計らってHTML5に切り替えられるようにしておけば、cssを作る時に若干の注意は必要ですが、もとから気を付けて構築していれば、比較的スムーズに移行が出来るはずです。
他にも細かい調整はあり、開発途中で新たな仕様が発生する可能性はありますが、わかりやすい改修は概ね上記の通りとなります。
内部のロジックにも、大きな改修が入ってはいるものの、純粋に開発/制作に特化したものであるため、ここでは割愛させていただきます。
最後に
この記事をご覧になっている関係者の皆様、また、未来のパートナー様におかれましては、是非とも新しいGenesysにご期待を寄せていただければと存じます。私自身も、早く完成させ、お披露目するのを非常に楽しみにしております。
取締役 最高技術責任者 CTO
久保 一也