FURYU Tech Blog - フリュー株式会社

フリュー株式会社の開発者が技術情報を発信するブログです。

新メンバー向けに機能実装ワークショップを行った話

フリューでプリントシール機の開発をしている高松です。
以前は主に落書き画面の開発担当を、現在はリーダー業務をメインに行っています。

突然ですが、開発者を増やしたいけど入門が難しいというジレンマを感じたことはありませんか?
落書き画面の開発はまさにそういった問題点がありました。
本記事では初めて落書き画面の開発担当になったメンバーに向けて
実業務へのスムーズな導入を目的とした機能実装ワークショップについてご紹介いたします。

プリントシール機の落書き画面とは?

撮影した画像をペンやスタンプなどの機能を用いて編集する画面をさします。
本画面は、市場にあるほとんどのプリントシール機に搭載されています。

落書き画面(IDOLY studio)

ワークショップ実施の背景

落書き画面を開発目線で見た場合の大きな特徴はとにかくUI要素が多く複雑です。

落書き画面(IDOLY studio) UI要素
実装するにあたって、どういう風に処理を実現しているのか 以前に
さわりたい オブジェクト や 設定 が そもそもどこに存在するのか 直感でわかりづらく、
とにかく入門しづらいという問題がありました。
※そのほかにもこまごまルールのようなものがあったり、ロジックにおいても複雑な面もありますので、そこも入門しづらさの原因となっている状況…。

実際の商品開発時に初めて触るとなると、
上記の通り入門のハードルが高いことに加え、納期のプレッシャーも発生してくることから

開発の楽しさを感じてもらえないのではないか
モチベーションが下がってしまうのではないか…

やはり入門は楽しく、ワクワクを感じられるものでありたい。

そこで、本格的に商品開発を行う前に、
とにかく楽しみながら触れてみよう を目的にワークショップを開設しました。

ワークショップの詳細

コンセプト

オリジナルパレットをつくって落書き画面をジャックしよう!

パレット is 何・・・?

パレットは落書き画面内の下図の部分で 描画したい落書きコンテンツを選択するUIが詰まったエリアになります。
パレットの組み込み作業は、落書き画面開発者としての最初の業務として割り振られることが多いです。

スタンプパレット(IDOLY studio)

実施内容

受講者1人1つずつ、まっさらなパレットを配布します。
そこへ、オリジナルコンテンツを組み込み、自分だけのオリジナルパレットを作成してもらいます。
とにかく触ることが目的なので、実際の商品として載せられるものか、は気にせず自由に作成してもらいます。
※上記とは別に学習の観点で必ず○○を使用してくださいのルールはあります。

中間と最後に発表の場を設け、成果物の共有と以下の内容について発表してもらいます。

  • オリジナルパレットのコンセプト
  • やったこと
  • やってみての感想
  • 運営側、ベテランメンバーからのフィードバック

スケジュール

①落書き画面の設計や開発ルールの説明

ワークショップの前に、落書き画面の設計、動作仕様や開発ルール、
開発ツールについての説明を行います。

②開発環境構築

マニュアルを見ながら各自実施してもらいます。

③落書きコンテンツ(スタンプ)の組み込み

落書きコンテンツ組み込み経験者を講師にたて、受講者全員で会議室に集まって一緒に組み込み作業を行います。
こちらもマニュアルに沿って実施します。

④オリジナルパレット作成(1~2週間ほど)

各自、自由にパレットの作成を行います。

⑤中間発表
⑥オリジナルパレット修正(1~2週間ほど)

中間発表でのフィードバックを受けての、ブラッシュアップ期間になります。
中間発表までに間に合わなかった項目についてもここで進めます。

⑦最終発表

※ 業務と並行で実施のため、作業期間は長めに設定しました。

ワークショップを実施して

業務と並行しての実施でしたが、想像以上に全員が試行錯誤を行い
オリジナルパレットを作成してもらうことができました。
作成したい機能に対して関係のあるコードはどれかを調べ
既存の機能がどのように実現されているか、
どのように変更すれば作成したい機能が実現できるのか まで踏み込んだ方もいました!✨

コンセプト内容に具体的な制約は設けなかったので、
面白いパレット、かわいいパレット、かっこいいパレットなど
様々な世界観の成果物が生まれ、
発表の場も和気あいあいとした雰囲気となりました。

本項目の最後に成果物の一部を紹介します。

  • とにかく好きな画像データのスタンプをたくさん置く
  • スクロールビューを搭載する
  • パーティクルなどのアニメーションを再生する
  • 時計表示(アナログ・デジタル)
  • 背景色を時間に応じて、もしくはスライダー操作で変化させる
  • ボタンを押すと特定の宛先にメールが飛ぶ
  • スタンプを時間に応じて、もしくはスライダー操作で2次元変形させる
  • スタンプをカラフルに点滅させる

いままでにはない派手な落書き画面に…!

おわりに

実業務への導入をスムーズにするために開催したワークショップでしたが、
既存のマニュアルを見て作業する場面では、
新メンバーが作業する上ではここの記載が足りない!や、
マニュアルを書いた当時と最新の設計で内容が異なっている!などの気づきから
マニュアル内容を見直す機会にもなり、
結果マニュアルのブラッシュアップにもつながりました。

また、本年度の受講者が来年度の講師になるなどのサイクルを作成することで
知識の輪も広げることができるのではないかと思っております。

開発者を増やしたいけど入門が難しいなと思う出来事があった場合に
本取り組みのなにかが参考になれば幸いです。

最後まで読んでいただきありがとうございました😊