UZUMAKI TechBlog
UZUMAKI TechBlog
オフショア企業とのチームビルディングにP5.jsでワークショップをしたら最高だった ~オレたちの共通言語は英語じゃなくてプログラミング言語だ！~

オフショア企業とのチームビルディングにP5.jsでワークショップをしたら最高だった ~オレたちの共通言語は英語じゃなくてプログラミング言語だ！~

image

概要

UZUMAKIでは現在フロントエンドの業務の一部をGENKI SYSTEMと提携して仕事を進めています。業務で円滑にコミュニケーションするためにワークショップを実施しました。お互いがどんなキャラクターなのかを知り、仲良くなることが目的です。

ワークショップはp5.jsという、クリエイティブコーディング(簡単に説明すると、丸や四角や線などを描画して動かしたりする)のためのプログラミング言語を使って行いました。

全員初めて触れるプログラミング言語でしたが、日本、ベトナム双方のメンバーがソースコードを媒介に楽しそうにコミュニケーションを取っていました。

仕事上のチャットで使う共通言語は英語になりますが、ベトナム人メンバーも日本人メンバーもそれほど英会話は得意ではありません。我々はソフトウェアエンジニアなのでプログラミング言語が共通言語なのです。

その後の懇親会も双方の国のメンバーで固まることなく交流し楽しく行うことができました。

目次

目的

オフショア企業とコミュニケーションミスを減らし効果的にプロジェクトを運営するために、お互いをよく知り、チームビルディングをすることが重要です。簡単な言葉でいうと現地のメンバーと仲良くなることが重要です。本稿ではUZUMAKIではこの問題をどのように解決したかを共有します。

対象読者

  • 日本語の不自由な外国人のエンジニアとなかよくなりたい日本のエンジニアの方
  • オフショア開発に興味がある企業の担当者
  • かつてオフショア開発をしてうまく行かなかった方

PR

UZUMAKIではアジャイル開発で新規事業の開発から、大規模Webアプリケーションのアーキテクチャ更新などの開発をしています。

お問い合わせはUZUMAKIのHPのお問合せフォームから

大学でコンピュータサイエンスを学んだ平均的なベトナム人エンジニアの英語力について

さて、一緒に仕事をしているベトナム人メンバーも日本人メンバーもそれほど英語が得意ではありません。読み書きはできるが込み入った会話は難しいのが現状です。それにどちらかというとベトナム人メンバーの方が英語が得意です。

なんとなく新興国は高等教育になると授業は英語で行われ、教科書も英語の物を使うと思っている方も多いのではないでしょうか？しかしベトナムの人口が2020年時点で1億人近くおり、専門書を自国の言葉に翻訳するには十二分に人口がいます。またフィリピンやインドのように米英の植民地であった歴史や異なる言語を民族がたくさんいるわけではないので共通語は英語ではなくベトナム語です。

現にベトナムのECサイトを見るとベトナム語のJavaの本などプログラミングに関連した書籍を見ることができます。また現地の大型の書店に行くと、アメリカのビジネス書の多くがベトナム語に翻訳されているのを見ることができます。(TikTokマーケティングの翻訳もなんかもありました) 日本とベトナムで仕事をする際にビデオチャットでのミーティングは通訳の方を通して日本語で行いますが、チャットツールでは共通言語は英語でコミュニケーションを取っています。 通訳の方がいるにも関わらずチャットは英語にしたのにはいくつか理由があります。ここでは本題と離れるので手短に説明すると以下のような理由です。

  • 日本側で指示や説明を英語にすると簡潔な短い文になり誤解を防げる
  • 技術的な内容はほぼカタカナ語なのでほぼ英語と同様、さらに技術的な内容は通訳するの難易度が高くコミュニケーションコストがかかる
  • 設計書はシーケンス図などUMLを用いて共有するため齟齬少ない

なぜP5.jsを使ってグループワークをすることにしたのか

グループワークに避ける時間が仕事の都合上、半日が限界だったので、成果物を見せて各々話ができるものが良いかと思いp5.jsを使ったグループワークをしました。これがハッカソンだと、何をしようか話したり実現可能性を調査しているだけで終わってしまいます。

このp5.jsを使ったプログラムで作った画像をNFTとして公開して大成功した事例(下記参照)もあるので、ベトナムの若い野心的なエンジニアも興味を引くのではという狙いもありました。

p5.jsを使ってグループワークの詳細

p5.jsとは

教育用やクリエイティブコーディングに使うプログラミング言語ProcessingをJavaScriptで実行できるようにしたものです。 下記にp5.jsを使うことにした理由を挙げます。

  • プログラミング初心者にも優しいので初見でも取り組みやすい
  • Web上の開発環境があるので開発環境構築が不要
  • JSなのでクラスの概念なども使えるのできれいに書くこともできる
  • 各種ライブラリを使うことで物理演算や、マイクやカメラの入力を使うことができる

p5.jsの例:　サンプルで作ったマイクの音量に応じて円が散らばります。このようにセンサーとインタラクティブに動かすことができます。

image

参考資料

p5.js https://p5js.org/

ブラウザで動かせるp5.jsの開発環境　OpenProcessing https://openprocessing.org/

p5.jsのチュートリアルも揃っている https://openprocessing.org/learn/https://openprocessing.org/sketch/1142253/

p5.jsのサンプル Organic Trail Tutorial https://openprocessing.org/sketch/1036179/

ジェネラティブアートのサンプル http://www.bnn.co.jp/support/generativedesign_p5js/

ジェネラティブアートとは

数学的な処理を実装したプログラミングによって表されるアート作品のこと、p5.jsでも実装することができます。

日本では毎日かんたんなジェネラティブアート作品を作成してSNSにアップするデイリーコーディングという文化が生まれ始めています。

GenerativemasksとNFTについて

デイリーコーディングの第一人者は甲南女子大学の高尾俊介先生で、Generativemasksと言う作品をNFTマーケットに売り出し、2時間程で当時のレートで3億円超の売上を記録しました。

このようにNFTとジェネラティブアートとの結びつきは強いです。

image

参考資料

Coincheck NFT（β版）、日本発ジェネラティブアートのNFTコレクション『Generativemasks』を5月26日より取扱い開始 https://www.jiji.com/jc/article?k=000000139.000021553&g=prt

NFT Artwork Created from Daily Coding https://mirror.xyz/generativemasks.eth/kWq2KAJ3IwIHP0DfZebSEgB5swJsQz_eVH6TF8rV0es

generative masksのサイト

https://generativemasks.io/ openseeのgenerative masksのページ https://opensea.io/collection/generativemasks 高尾先生のインタビュー記事 https://valed.press/programming-learning/The-habit-Daily-coding-that/

参加者

今回のプロジェクトに参加するメンバーに加え、p5.jsに興味のあるエンジニア総勢20名強 通訳の方5名。

スケジュール

事前準備

  • ワークショップ用のチャットツール(Discord)の作成、参加者に参加してもらいました
    • アナウンスやグループ内のコミュニケーションに利用しました サンプル等を提示して、どういうものを作ったらいいかインスピレーションが湧くよう促しました。
      • image
  • openprocessingのアカウントの作成をお願いしました
    • 余裕がある人にはチュートリアルの実施してもらいました。

当日のスケジュール

  • 0.2h イントロダクション
  • 0.5h グループ分けと自己紹介
  • 1.0h　個人作業
  • 0.5h　中間段階の発表グループ内で見せ合う　各自5分
  • 1.0h　個人作業(2作品目か、1作品目のブラッシュアップ)
  • 0.5h　最終発表の発表 -> 各チームから1つ作品を選びプレゼンをして優勝作品を決める

余談ですが、イントロダクションではオンライン英会話で鍛えた英会話力を駆使して説明しました。

Dicordの活用

generalのチャンネルで全体へのアナウンス, 各チームのチャンネルを作り参照情報やコードをチーム内でシェアに使いました。

generalチャンネルではチュートリアルやサンプルをサンプルを提示したり、NFTアートはp5.jsやprocessingで作られたgenerative artで作られた作品もあることを伝えています。

image

image

image

generalチャンネルに投稿した文章中にはこういうのも投稿しており、p5.jsやgenerative artに興味やモチベーションを感じてもらえないかと狙って投稿しました。

Do you play some crypt games, like STEPN, Axie Infinity, or something to earn crypto money? But you are all programmers and learned how to make generative arts today. You can make generative art now, and you will also sell generative arts you create from tomorrow!! It means you have the key to becoming a crypto billionaire.. (あなた達はSTEPNやAxie InfinityなどのNFTゲームをプレーして仮想通貨を稼いますか？でもプログラマーだし、ジェネラティブアートの作り方を今日学びました。あなた達は今からジェネラティブアートを作れるし、明日から売ることができます。それは暗号資産の億万長者への秘密の鍵です。)

グループごと開発作業中の様子

image
image

成果物

カメラやマイクなどセンサーを使って顔認識や、手の形を認識させたものが多かったです。 限られた時間内でインパクトがあるものを作ろうとするとセンサー系を使うのがわかりやすいでしょう。

動作確認可能な作品をいくつか抜粋して紹介します。下記のリンクを開くと動作確認ができます。

困難を乗り越えた後の宴は盛り上がる

ワークショップ終了後は懇親会を行いました。(ワンピースでも強敵を倒したら宴をしますよね) 懇親会では双方の国のメンバーで固まることなくコミュニケーションを取ることができました。これはひとえにワークショップの成果の一つだと言えます。 ここで得た友情(結びつき、ラポール)が帰国後のコミュニケーションミスを防ぎます。具体的には仕様の抜けを教えてくれたり、スケジュールや仕様の変更に対してネガティブな反応を減らせます。

仕事をお願いする会社の国に行き、一緒に何かをやり遂げて、一緒に現地の食べ物を美味しく食べることは、別々の国同士の人間が円滑なコミュニケーションをするための必須項目だと考えています。これらの行動は一言でいうと現地の方々に対するリスペクトです。

もし、これまでオフショア開発でプロジェクトがうまく行かなかった方は、現場の人と交流を図りましたか？現地のメンバーと一緒にを食卓を囲みましたか？現地の料理を食べず接待されるままに日本食レストランにばかり行っていませんか？これらを振り返ってみると具体的な改善ポイントがみつかるかもしれません。

余談ですが、25歳前後の人が多いので酔っ払うと大学生みたいなノリでした。こういうのは観光やただのビジネスでは感じられない現地の空気を感じられて旅行好きとしてはとても楽しかったです。

image

image

　

まとめ

ベトナムにあるシステム開発会社に開発をお願いする際に、現地のメンバーとチームビルディングを行うためにワークショップを実施しました。

ワークショップはp5.jsを使って、日本ベトナムの混合チームでグループを作りプログラムを作り発表してもらいました。

ソフトウェアエンジニアはやはりソースコードで語るべし。

PR

XではUZUMAKIの新しい働き方や日常の様子を紹介！ぜひフォローをお願いします！

noteではUZUMAKIのメンバー・クライアントインタビュー、福利厚生を紹介！

UZUMAKIではRailsエンジニアを絶賛募集中です。

↓の記事を読んでご興味を持っていただいた方は、ぜひ応募よろしくお願いします！

是非応募宜しくおねがいします！