baserCMS4の管理画面リニューアルの進捗報告の代わりのこれまでの流れ報告

baserCMS Advent Calendar 2016ということで baserCMS 4 で進行中の新管理画面リニューアルのUIとかデザインのこととか、どんな感じで進めているのか、時系列でつらつら書きます（未完成）

管理画面リニューアルの進行関する大まかな時系列

1. 2016/10/13 管理画面MTG vol.1 ブレストなミーティング開催
2. Cacooでたたき台のワイヤーフレーム作成（我流）
3. たたき台の画面デザイン作成 (大川）
4. 2016/11/17 温泉合宿前 最終オンライン会議
5. 2016/11/26〜27 管理画面 温泉合宿開催
6. 鋭利HTMLコーディング中（平尾、我流） ←イマココ
7. 管理画面新テーマ公開

2016/10/13 管理画面MTG vol.1 ブレストなミーティング開催

[peg-image src=”https://lh3.googleusercontent.com/-wm1NltJPQC8/WFf-m_q84cI/AAAAAAABU90/zUnMir-o-EAMZhbzzaDbej_jZs98KUTZACCo/s144-o/IMG_20161013_215309.jpg” href=”https://picasaweb.google.com/106976385501485397763/6365836543481201393#6365836544191553986″ caption=”” type=”image” alt=”IMG_20161013_215309.jpg” image_size=”2026×1519″ ]
2016/10/13(木) 19:00〜　にステキオフィスなディーゼロ様のステキ会議室をお借りして行いました。

[peg-image src=”https://lh3.googleusercontent.com/-rqeRA0TzAb8/WFf-mzK5Q3I/AAAAAAABU90/Ng2MU7h9m6ciHX2USiKH7ZZ_gKB1D07NwCCo/s144-o/IMG_20161013_215247.jpg” href=”https://picasaweb.google.com/106976385501485397763/6365836543481201393#6365836540835873650″ caption=”” type=”image” alt=”IMG_20161013_215247.jpg” image_size=”4032×3024″ ]
プロジェクターに画面出して、あーだーこーだと議論。
この時に横サイドバーにすることが決まりました。

[peg-image src=”https://lh3.googleusercontent.com/-Zt57TngBNAo/WFf-mymqLzI/AAAAAAABU90/22uqwRSlnzcBIdrE5nEQja7ObycSHctvgCCo/s144-o/IMG_20161013_215233.jpg” href=”https://picasaweb.google.com/106976385501485397763/6365836543481201393#6365836540683890482″ caption=”” type=”image” alt=”IMG_20161013_215233.jpg” image_size=”4032×3024″ ]
議論の温度感は写真から推し量ってください。

どんなことを話したか気になる方はこの時の議事録を御覧ください（雑

https://docs.google.com/a/cgfm.jp/document/d/17OlkPBYNt3bN3SUqn9_ddT-AM6dbjbDj91gzCgNBa1c/edit?usp=sharing

個人的に「ボタンのレベルデザイン(僕の造語)」は全然やれてないけど、もっと深掘りしたい。
全画面の全リンク、ボタンを洗い出して考えたい。

Cacooでたたき台のワイヤーフレーム作成（我流）

打ち合わせで話した内容を元に、僕がざっくりワイヤーフレームをみんな大好きCacooで作成。

画面デザインたたき台を作成 (大川）

GoreyDesignの大川松樹さんが三案、ベースの画面デザインを作成してもらいました。
ワイヤーフレームの意図を汲み取ってくれての、さすがの出来栄え。
これで温泉合宿前の最終会議に望みます。

2016/11/17温泉合宿前 最終オンライン会議

画面デザイン担当の大川さんや、全国のbaserCMSサポーターズのコア開発者の方々、HTMLコーディング担当者とか、裏ボスとかとか、baserラブな方々とCacooのワイヤーフレームを見ながらHangoutで真夜中に会議。
主に温泉合宿に備えて、ワイヤーフレームの確定が目標でした。

ここでCacooが大活躍。皆、オンラインだったのですが、Cacooのおかげでワイヤーフレームをかなり深く議論できたのです。

「これをここの下に持ってきたらいいんじゃない？」
「そしたらこいつはこれと入れ替えるね」
「メニューが閉じたパターンを別シートで作ったんですけど確認よろしく〜」

「あ、今、我流さんが動かしたのは元に戻して〜」
「了解っす〜（アンドゥで一発）」

こんな感じでHangoutは音声だけでもかなり議論できました。

途中途中、開発メンバーから「これはできる」「ここは厳しい、合宿期間中には難しい」など合宿中にどこまで作り込むのか、機能を実装するのかを協議しました。

改めてCacooに惚れ直した夜でした

2016/11/26〜27 管理画面 温泉合宿開催

合宿所：筑後川温泉 桑之屋 

[peg-image src=”https://lh3.googleusercontent.com/-uIljgPSd1gg/WFgJnrgxfiI/AAAAAAABU-g/lQpVrL23xHgP4qXuC-kJu_LVsHstFEptwCCo/s144-o/IMG_20161126_115812.jpg” href=”https://picasaweb.google.com/106976385501485397763/6365836543481201393#6365848650587930146″ caption=”” type=”image” alt=”IMG_20161126_115812.jpg” image_size=”4032×3024″ ]

[peg-image src=”https://lh3.googleusercontent.com/-73zAjt9ngjk/WFgKDR5w3oI/AAAAAAABU-0/mxwpSH9AvOUtvKmDgxAYiw2VY6VKDliRQCCo/s144-o/IMG_20161126_190708.jpg” href=”https://picasaweb.google.com/106976385501485397763/6365836543481201393#6365849124749762178″ caption=”” type=”image” alt=”IMG_20161126_190708.jpg” image_size=”1293×969″ ]

[peg-image src=”https://lh3.googleusercontent.com/-Oc-Ma2RB1Jo/WFgJnqkRozI/AAAAAAABU-k/W-qn_BwbbowuB5WZcBMPPH4RICJ2-xUsgCCo/s144-o/IMG_20161126_115637.jpg” href=”https://picasaweb.google.com/106976385501485397763/6365836543481201393#6365848650334184242″ caption=”” type=”image” alt=”IMG_20161126_115637.jpg” image_size=”3584×2567″ ]

[peg-image src=”https://lh3.googleusercontent.com/-KLCONljb5JM/WFgJnu-1l3I/AAAAAAABU-w/iQNcV4EgkzUg3uE4VW-8estNiB8KO1RpQCCo/s144-o/IMG_20161126_201235.jpg” href=”https://picasaweb.google.com/106976385501485397763/6365836543481201393#6365848651519334258″ caption=”” type=”image” alt=”IMG_20161126_201235.jpg” image_size=”4000×2992″ ]

みんな頑張りました（雑

欠席された大川さんの代わりに、カネウチカズコ(べっしーの作者）がデザイナーとして、大川さんの画面デザインをベースに、他の画面やログイン画面、パーツデザインなど手がけてもらいました。
フロントエンド側からすると良いデザインってテンション上がりますよね〜
お二人には本当に感謝です。

僕はゆうてん(@cloud10designs)とHTMLコーディングを開始。
いろんな方針とかルールとか手順とかを隣合って協議しながら作業。

いつも1人寂しくHTMLコーディングとかCSS設計とかやっていたので、尊敬してるゆうてんさんと議論しながら制作でき、
間近でゆうてんさんのSASS設計を共有できたのは至福の時でした。
自分の中であいまいだったいろんなことが整理できて、自分のレベルアップを実感。

[peg-image src=”https://lh3.googleusercontent.com/-3PH7cMARNBg/WFgJnkmZ7mI/AAAAAAABU-8/mAaF55bvfJUZGQ1m0Wo13kU7frdCldfUACCo/s144-o/IMG_20161127_042948.jpg” href=”https://picasaweb.google.com/106976385501485397763/6365836543481201393#6365848648732503650″ caption=”” type=”image” alt=”IMG_20161127_042948.jpg” image_size=”3382×2537″ ]

深夜4時ぐらいまで作業部屋で残って一番最後まで作業してた。

2日目はずっと作業集中して温泉入れなかったのが残念。

[peg-image src=”https://lh3.googleusercontent.com/-KJeLNF2AkTw/WFgOp6xYqEI/AAAAAAABU_o/b1VNwPD0PmAs_Ur3ESr_yRJon_ZBcF02gCCo/s144-o/15241222_1306896376028089_3127928378755410185_n.jpg” href=”https://picasaweb.google.com/106976385501485397763/6365836543481201393#6365854186602014786″ caption=”” type=”image” alt=”15241222_1306896376028089_3127928378755410185_n.jpg” image_size=”785×555″ ]
桑之屋さんの食事はどれも美味しくてついつい食べすぎて確実に数キロ太りました。
ちなみに桑之屋さんはbaserCMS関係者の1人のご実家の旅館で、おかげで大変よくしていただけました。
そして”baseCMS”と間違ったスペルを旅館に誤伝した犯人もその人です。

各自HTMLコーディング中（平尾、我流） ←イマココ

合宿から戻り、各自手HTMLコーディングを進めてるのですが、
僕はまだ1画面も完成できてませんm(__)m（年末進行

テーマの構造は極力変更せず、旧画面のClassを極力残しつつ、新Classを付与してHTMLコーディングしていくスタンスなので、中々の手間です。

baserCMSの新管理画面やUI周りのお手伝いしてくれるフロントエンドエンジニアさん、絶賛募集中です。
オープンソース開発に携われるチャンスですよ！

正月に少しでも進めたいなと、、、

管理画面新テーマ公開

予定では2017年4月頃のはず・・・

新管理画面に乞うご期待！

最後に。
ここまで書くと僕が仕切ったように見えてしまいますが、温泉合宿含めた新管理画面の名プロデューサーは河野 哲哉氏です！！
温泉合宿では風邪で体調悪い中、みんなの尻を叩いてくれました。本当に感謝です。