CEDEC 2020 セガグループによるセッション紹介！

皆さんこんにちは、毎年恒例のCEDECでのセガグループによるセッション紹介です！
株式会社セガ、第3事業部の麓です。

来月に今年はオンラインで開催されるゲーム業界最大のカンファレンス

CEDEC2020

https://cedec.cesa.or.jp/2020/

会期：2020年9月2日(水)～9月4日(金)
にセガグループ(および関連会社)から今年もいくつか登壇します！
今回で５回目となる、セガグループ関係者によるセッションと登壇者紹介に加え、ここでしか見れない講演者からのメッセージや、当日の資料からの抜粋等、紹介します。

デフォルメとリアルの両立を目指して　～新サクラ大戦のキャラクター作成事例～

セッション内容と講演者より

「新サクラ大戦」のキャラクター表現では、トゥーン的諧調表現とPBRのリアル質感表現の双方を混在させて使用することで、アニメ・漫画的なデフォルメ感とリアリティのある質感・存在感を両立させることを目標としていました。一見すると相反する組み合わせのようにも見えますが、適切な使いどころを分けることによって双方の良さを引き出すことを試みています。
また、複数のキャラクターデザインが混在する今作で、全体の統一感を出しつつ、元デザインの個性を活かして調整するという点についても課題の一つとなっていました。
今回はその制作手法とプロセスを紹介し、更にそこから判明した課題点を共有したいと思います。

講演者

株式会社セガ

ジャパンアジアスタジオ統括本部　第２開発２部　第1デザインセクション

デザイナー

柳瀬 遼平

09月03日(木) 11:00 〜 12:00（レギュラーセッション）

cedec.cesa.or.jp

スナップショット

セッションについて一言

当セッションでは「新サクラ大戦」のキャラクターモデル表現のノウハウを紹介させて頂きます。

細かい技術の積み重ねで出来ているタイトルですので、その中で少しでも制作のヒントになる発見があれば幸いです。

よろしくお願いいたします。

「歌い出すSympathy」、PSO2のボーカルBGM制作談

セッション内容と講演者より

PSO2のBGMシステム「Sympathy」の仕組みやその使用例につきましてこれまでも講演を行ってまいりましたが、今回は各エピソードで制作した「ボーカル」を用いたBGMにつきまして制作事例をご紹介できればと思います。プロシージャルであり、インタラクティブである「ボーカル曲」は果たして作ることができるのか？そのためには作曲、編曲、作詞、レコーディングから、BGM制作ツール「MusicEditor」の改良まで、様々な要素についてチャレンジが必要でした。そのときの体験をご紹介できればと思います。

講演者

株式会社セガ

ジャパンアジアスタジオ統括本部 第2事業部 サウンドセクション

サウンドディレクター・クリエイター

小林 秀聡

09月03日(木) 11:00 〜 12:00（レギュラーセッション）

cedec.cesa.or.jp

スナップショット

セッションについて一言

具体的な内容は多めですが、完成までの流れを追って説明を入れることでわかりやすさを目指しました。

ご興味持って頂けましたら幸いです。

また、BGMツール「MusicEditor」を使用した実演（楽曲再生）も予定しております。

在宅勤務でスクラム！

セッション内容と講演者より

私達は、約半年前より新規プロダクトの開発を行っているスクラムチームです。
プロダクトの最初のリリースを目前に控えたある日、在宅勤務による開発を取り組む必要に迫られました。
セレモニーはどうするのか...スクラムを継続できるのか...
様々な不安がよぎりましたが、私達はスクラムを継続する選択をしました。
物理的に距離を乗り越えスクラムを継続した中での成果や気付き、そして失敗をお伝えできればと思います。

講演者

株式会社セガ

グローバルパブリッシング事業本部 DMS事業部 システム開発部 研究開発2課

課長／シニアエンジニア

横島 太志

09月03日(木) 18:00 〜 18:25（ショートセッション）

cedec.cesa.or.jp

スナップショット 

セッションについて一言

在宅勤務、オフィス勤務、それぞれの在り方を模索されている方も多くいらっしゃるかと思います。

このセッションでは、どのようにリモートでスクラムを実践し、何が良く何につまずき、そしてどう改善していったのか発表させていただきます。

私たちも挑戦の最中ではありますが、皆様にとって何かのキッカケになれば幸いです。

「龍が如くスタジオ」のQAエンジニアリング技術を結集した全自動バグ取りシステム

セッション内容と講演者より

近年のゲーム開発におけるバグは、大規模化や開発期間の長期化によって数が増大し、内容も複雑化する傾向にあります。また、バグは見つけて修正するだけではなく、様々な作業フローが必要です。本講演では、バグのワークフローを探索・報告・選別・修正・修正確認のフェーズに分けた上で、「龍が如くスタジオ」で取り組んできた自動テストや開発環境の自動化技術を活用し、バグにまつわる作業フローを最大限自動化した全自動バグ取りシステムについて、実際に運用した「龍が如く7 光と闇の行方」での事例を交えてご紹介いたします。

講演者

株式会社セガ

第1事業部

QAエンジニア

阪上 直樹

開発技術部

ビルドエンジニア

粉川 貴至

09月02日(水) 18:00 〜 19:00（レギュラーセッション）

cedec.cesa.or.jp

スナップショット 

セッションについて一言

本講演では、手動でのバグの作業フローを整理した上で、自動化に至る過程を丁寧に説明しますので、
エンジニア以外の方にも得られる知見があると思います。
また、チケット管理システム以外に、Jenkinsやテスト自動化にも触れる予定です。
龍が如くシリーズの自動化の集大成となる講演を目指します！是非ご視聴ください！

 

ワーママ・ワーパパたちの「働き方」って改革できていますか？　４社事例から道を探ってみよう！

セッション内容と講演者より

2017年に始まったワーママ・ワーパパ（WM/WP）ラウンドテーブルから分離した、
企業規模を問わない４社合同の情報共有セッションです。以下内容を予定しています。
・各社の働き方情報共有
　（タイムテーブル実例、在宅勤務事情、男性育休の状況、勤務制度の活用状況など）
・各社WM/WPの働き方や悩みの紹介
・どうやったらより働きやすくなるかの試行錯誤状況の共有
・各社社内コミュニティの紹介や、その活動状況の共有
※例年ラウンドテーブルに続けて行われていた自費ランチ交流会は、後日改めての開催となりましたため、
　セッション内でご案内させていただきます。
※ワーキングペアレンツの働き方に関するアンケートへのご協力ありがとうございました。
　結果は本講演内でのご紹介、及び、後日Cedilの資料に掲載させていただきますのでご参照くださいませ。

講演者

株式会社セガ

ジャパンアジアスタジオ統括本部　第５事業部　第５開発２部　プログラムセクション

柳瀬 彩佳　他

09月03日(木) 11:00 〜 12:00（レギュラーセッション）

cedec.cesa.or.jp

スナップショット 

セッションについて一言

４社の様々な働き方を紹介します。
昨年までのCEDECワーママ・ワーパパラウンドテーブルにて多く聞かれた、「子育てしながら働いていけるのか不安」「子育て中の部下のことを知りたい」という疑問への回答の１つに、また、同じく子育てしながら働く人の参考になれると嬉しいです。

スケジュール作成をもっと楽に！という動機から生まれた内製アプリケーション開発実例

セッション内容と講演者より

スケジュール作成アプリケーション『ScheduleCanvas』を内製で開発する中で得られた知見を共有します。

・必要な主な機能をピックアップし、何が重要だったかを説明。

・ツールの運用と開発を同時進行するためのノウハウ。

・アンケート結果と要望をまとめ、対応策やユーザー傾向を俯瞰。

・アプリケーション実装からガントチャート描画に関して

このツールはSEGA Techblogでも紹介していますが、ブログの内容を掘り下げて紹介します。

講演者

株式会社セガ

第３事業部　第３開発２部　テクニカルサポートセクション

テクニカルアーティスト：マネージャー

麓 一博

テクニカルアーティスト

清水 宣寿

09月03日(木) 13:30 〜 13:55（ショートセッション）

cedec.cesa.or.jp

スナップショット 

セッションについて一言

今回ご用意したセッションは『ScheduleCanvas』の紹介だけではなく、内製ツールを開発するためにどういった対応が必要なのかを実体験を元にまとめて発表させていただきます。皆様が内製ツールを開発する時にちらっと思い出していただけるような、そんなセッションになることを目指しています。よろしくお願い致します。

Technical Artist Bootcamp 2020 :「ToolDev for TA」

セッション内容と講演者より

前半：今野「新卒からのTA推移」

「TAはベテランのアーティストやアートへの造詣が深いプログラマがなるもの」

この言葉は僕がTAになるにあたって何度も聞かされた言葉です。本当にそうでしょうか。

求めるTA像によりますが、決してそんなことはなく、むしろ経験の量に限らず技術面の知識はアーティストの武器になることを、実例を併せて紹介させていただきたいと思います。

後半：清水「TAブートキャンプ　ツールのGUIを作ろう」

本セッションでは、C#とWindows Formsを使用してのツールのGUIの作り方を1から紹介します。

Visual Studio上でのプロジェクト作成からシンプルなGUIを作成し、任意の処理を動かすところまでの流れを解説します。

また、ツールにあって当然の機能として求められる「ドラッグ＆ドロップ対応」「設定の保存」「プログレスバー実装」の実装方法の一例を紹介します。

講演者

株式会社セガ

第３事業部　第３開発２部　テクニカルサポートセクション

テクニカルアーティスト：マネージャー

麓 一博

テクニカルアーティスト

清水 宣寿　他

09月04日(金) 09:45 〜 10:45（レギュラーセッション）

cedec.cesa.or.jp

スナップショット 

セッションについて一言

テクニカルアーティストに必要なスキルをブートキャンプ（基礎訓練）と言う形で学び、日々の業務に活かしていこうという趣旨のセッションにて、今回は清水からツールの作り方を基本的なところからを１セッションの半分の時間を使って解説します。
この講演でTAも皆簡単なツールは作れるようになって開発環境をどんどん効率化していきましょう。よろしくお願い致します。

技術同人作家になろう ～働き方改革時代におけるエンジニアのレベルアップの一例～

セッション内容と講演者より

近年、「技術同人誌」がIT業界を中心として劇的な盛り上がりを見せています。

「技術同人誌」は、IT技術だけに留まらず、科学や数学、工学系分野等非常に広範な技術内容を取り扱う同人誌の総称です。

このセッションでは、「元々blogで積極的に情報を発信していたエンジニア」と「プライベートでは全く技術情報を発信してこなかったエンジニア」の二人が、それぞれの視点から「技術同人誌」の執筆を通じて得られたものについて紹介します。

「技術同人誌」とblog・勉強会での講演・商業誌等の他の情報発信手段の比較についても実例を元に解説します。

また、ゲームエンジニアが「技術同人誌」を書くことで技術以外の視野が広がり、より広い意味でのレベルアップを果たすことができる点についても紹介します。

講演者

株式会社セガ

エンジニア

竹原 涼

山田 英伸

09月03日(木) 18:30 〜 18:55（ショートセッション）

cedec.cesa.or.jp

スナップショット 

セッションについて

「技術同人誌」という言葉を聞いたことはありますか？
「同人誌」なら聞いたことはあるけど「技術同人誌」って何だろう？と思う人の方が多いかもしれません
当講演では、この「技術同人誌」を通じて、私達がエンジニアとしてレベルアップした事例を共有します
気楽な形で聞ける内容にしようと思ってますので、「技術同人誌」って何だろうという方から、エンジニアとして行き詰まりを感じている方まで、お気軽にご視聴ください
そして、当講演を切っ掛けにゲーム業界にも「技術同人誌」が広がると嬉しく思います

※
・当講演は副業活動の一環です
・講演内容は個人の意見であり、株式会社セガの公式見解を示すものではありません

リギング・クロスオーバー　～ゲームと映像、それぞれのリグ制作事例

講演者

マーザ・アニメーションプラネット株式会社

デジタル本部　映像制作課

ショットワークチーム マネージャー

赤木 達也 他

09月02日(水) 18:00 〜 19:00（レギュラーセッション）

cedec.cesa.or.jp

今回紹介したセッションで聴講したい！と思ったセッションはありましたか？
多くのゲーム開発者から注目が集まるCEDECは、今年はオンラインで 9月2日(水)～9月4日(金)の間、開催されます。

CEDECに聴講して情報収集や交流をし、ゲーム業界の今を知り、業界の未来について語り合いませんか？
それでは皆さんCEDECでお会いましょう！

私達は将来CEDECに登壇してみたいと思っている、技術に興味のある方を求めています。
そんな貴方、以下にアクセスしてみませんか？

recruit.sega.jp

※複数社登壇の場合でもセガの社員のみ表記しています 
©SEGA

『Ｄ×２ 真・女神転生リベレーション』でのビッグバナー画像制作事例

はじめまして。セガ 第4事業部・第4開発1部・TAセクションの村上です。

アーケード向けのゲーム開発におよそ10年間携わった後、現在ではスマートフォン用ゲーム『Ｄ×２ 真・女神転生リベレーション』（以下、『Ｄ×２（ディーツー）』）に3D背景チームリーダー兼テクニカルアーティストとして参加しています。

『Ｄ×２』の3D背景制作に携わる一方で、制作工程における技術的なサポートも行っています。 

『Ｄ×２』は悪魔召喚・交渉・悪魔合体・3Dダンジョンなど『真・女神転生』シリーズが持つ醍醐味を踏襲しつつ、スマートフォン向けとして最適化された戦略バトルRPGです。

2.5周年を記念した「超・感謝祭」キャンペーンとイベントを開催中ですので、ご興味がありましたら公式サイトをご覧ください。

d2-megaten-l.sega.jp

『真・女神転生』シリーズとは皆様ご存知の通りアトラスさんが開発・販売されている25年以上の歴史を誇る「荒廃し、悪魔が跋扈する現実世界を舞台としたRPGシリーズ」です。

「メガテン」の愛称のほうが馴染み深いかもしれませんね。弊社の家庭用ゲーム機でもいくつものタイトルが発売されてきました。

つい最近「ゲームギア」が発売30周年になることを記念したミクロサイズの「ゲームギアミクロ」が発表されました。

全4色のうちの「レッド」には、なんと『女神転生外伝 ラストバイブル』と『女神転生外伝 ラストバイブルスペシャル』が同梱されます。

今まで上記タイトルをプレイする機会に恵まれなかったため、個人的に発売が待ち遠しいです！

60th.sega.com

さて少し時間を戻した2020年2月。『Ｄ×２』のファンミーティングが有楽町にて開催されました。

新型コロナウイルス対策にスタッフ一同細心の注意を払った上で、ご応募をいただいた皆様の中から抽選により約100名様にご来場いただきました。

app.famitsu.com

game.watch.impress.co.jp

当日会場にサービス2周年記念悪魔である英雄 マサカドと天魔 アスラおうを撮影できるビッグバナー（フォトスポット）をご用意したところ、ファンの皆様には大盛況でした。

この画像の制作工程を紹介したいとの依頼を受けまして、本記事では要点を絞り2部構成にしてお届けします。

前半

• 画像の拡大変換ツールwaifu2x-caffeの使い方
• waifu2x-caffeとAdobe Senseiの拡大性能を比較検証

後半

• 拡大前の元素材画像のメイキング（UnityでのキャプチャーからPhotoshopでのレタッチまで紹介）

うーん、少し地味ですかね。知っていてもすぐに役立たない情報もあるかもしれません。

例えるなら弊社「メガドライブミニ」のヘッドホンボリュームは動かせますが、本体の音量は変わらないんです、ぐらい地味な話もあるかもしれません。

faq.sega.jp

それでもお1人でも役に立ったと言っていただけるように、作業効率が変わりそうなコツを取り揃えてみました！

前置きはほどほどに、地味～にお付き合いください。

フォトスポットってなに？

巨大なビッグバナーの前で撮影する場所

当日は『真・女神転生』シリーズの人気悪魔と一緒にファンミーティングの楽しい思い出を残せるフォトスポットができました。このフォトスポットに設置されている巨大な写真のことをビッグバナーと呼びます（スマートフォンでさっと撮影した写真で失礼いたします）。

英雄 マサカド

天魔 アスラおう

ビッグバナーの解像度はいくつなのか？

高さ2ｍ、横幅4ｍ

「えっ？　高さ2m？　横は4mもあるの！？」

最初にビッグバナーの大きさを聞いた時はビックリしました。

会場で見た実物は床から天井まで届く、文字通り「ビッグバナー」でした。

 

ビッグバナーのスペック

• 2ｍ ｘ 4ｍ（高さ ｘ 横幅）
• 布地に印刷　※ベルクロ（マジックテープ）で箱に貼り付け
• 入稿はIllustratorフォーマット

「画像解像度いくつだろう・・・」と不安が頭をよぎりましたが、問題なく作業するには8K～16K解像度が限界ではないか？と予想しました。

※8K＝7,680×4,320ピクセル

※16K＝15,360 x 8,460ピクセル

印刷の密度表現としてはdpiが一般的ですが、ここではピクセルで考えてみます。

タイミング良くPhotoshopを起動していたので、数値入力欄で計算してみましょう。

Photoshopの入力欄で数値の計算

例えば横幅を約16,000ピクセルで作るとします。

横幅1m辺り約4,000ピクセル、横幅1mmだと約4ピクセルの面積となるでしょうか。

撮影対象となる悪魔モデルはビッグバナー画像の中央に大写しに立たせることになっていますので、撮影時のカメラまでの距離を考えるとなんとかなりそうです。

「きっと16Kでも大丈夫！」と自分を納得させることにしました・・・（ドキドキ）。

出力する画像解像度は16K

少し適当に決めた解像度に聞こえてしまいますが、それにしても16K・・・本当に大きいです。

拡大しても、拡大してもピクセルが見えない！

ちょっと大げさですが、普段はスマートフォン向けゲーム開発をしているだけにこんな気持ちになりました。

後でdpiを計算すると約100dpiでした。※一般的な印刷物は300〜400dpi。

PC用モニターは標準で72dpiなので、標準的なPC用モニターよりは細かくできました（Retinaディスプレイは除く）。16K解像度は結構妥当だったようです。

制作する画像解像度は８K

私の普段の業務は『Ｄ×２』の3D背景制作と技術サポートです。開発業務と平行してのビッグバナー制作のため、入稿締め切りギリギリのスケジュールでした。

『Ｄ×２』はアトラスさんの監修を経てリリースされていますので、監修に必要な営業日と修正にかかる時間も考慮する必要があります。

 

スピーディーなワークフローが求められるため「制作自体は8K解像度で作業し、入稿直前に16K解像度に拡大変換する」方法を選択しました。 

 

印刷される画像解像度を最終的に2倍に拡大することができれば、レタッチ面積を節約できるだろうと考えました。

また作業するPSDファイルサイズは8K解像度で経験上1GB～2GBになります。16K解像度で作業するよりも軽くできますね。

 

拡大変換ってなに？

例えばPhotoshopで画像の解像度を2倍に拡大してみます。おそらく拡大する前よりもボヤ～っとしていませんか？

 

数年前まではPhotoshopで拡大してもそれほど良い結果は得られませんでした。それはバイキュービック法やバイリニア法という簡単な補完方法による変換だったからです。

 

でも当時はそれが当たり前でした。

 

――――当たり前だったのですが、ここ数年のAdobe社の画像テクノロジーへの取り組みは目覚ましく、ついにはAdobe Senseiという新技術が生まれました。

 

現在はPhotoshopでもAIと機械学習によるキレイな拡大変換が可能となっています。

※拡大変換＝アップスケーリングとも呼ばれます。

 

AI／機械学習による拡大変換は、縮小画像と解像度の高い元画像のペア（教師データ）を大量に学習した成果を生かして、ただ引き延ばすのではなく、不足情報を補っています。

 

機械学習の説明は、こちらの記事が大変参考になりました。

techblog.sega.jp

入稿前に拡大変換

waifu2x-caffeとは？

それではビッグバナー制作においては、どのように画像を拡大させたのでしょうか？

 

この流れだとAdobe Senseiを――――Photoshopを使う流れに見えますが・・・違うんです。

これからご紹介するツールwaifu2x-caffeを使用すると簡単に、かつキレイに拡大変換できます！

waifu2x-caffe

• 画像変換ソフトウェア「waifu2x」のWindows用ツール
• 「waifu2x」の変換機能のみをCaffeを用いて書き直した

｢オレの嫁ね！｣と、愛称で呼ばれて既に利用されている方もいらっしゃるかと思います。最近だとスマートフォン向けアプリにリリースされていたり、市販の画像最適化ツールにも搭載されていますね。

ゲーム開発の立場で考えると、Windows上で実行できるスタンドアローンツールというのが大変に嬉しいです（外部サーバーに開発データをアップロードするのは問題ありますから）。

この素敵なツールは下記からダウンロードして使うことができます。

github.com

waifu2x-caffeのダウンロードからインストールまで

Windowsへのインストールもとっても簡単です。

インストール方法

1. lltcggie/waifu2x-caffeのダウンロードページを開きます。

2. waifu2x-caffe.zipをクリックして保存します。　※最新版を選びます

   
   
   

3. ダウンロードしたZIPファイルを右クリック→「すべて展開」します。
4. waifu2x-caffeフォルダ内のwaifu2x-caffe.exeを実行します。
   ※今回はGUI版を使用しますが、コマンドライン版も用意されています（waifu2x-caffe-cui.exe）。

   
   
   

5. 「WindowsによってPCが保護されました」と警告が表示される場合は、「詳細情報」をクリックすると「実行」ボタンが押せるようになります。

   
   
   

6. ウインドウが立ち上がったら、「cuDNNチェック」ボタンを押します。
   特にエラーがなければ、準備完了です。

   

 cuDNNについて

• GPUを使って変換を行う（※Compute Capability 3.0 以上のNVIDIA製GPU）
• 高速に画像変換できる
• VRAM使用量を減らせる

以前のバージョンでは別途NVIDIAのサイトからdllをダウンロードする必要がありましたが、ver 1.2.0.3より同梱されることになりました。とっても便利になりましたね。

エラーが出たら？

もし「cuDNNチェック」で「GPUで変換できません」等のエラーが出た場合は、通常は指示に従いますが、ここではCPU変換にすることで解決してみます。

1. 「動作設定」ボタンを押します。
   

   
   
   

2. 「使用プロセッサー」を「CPU」へ変更します。
   ※CPUは変換時間が遅くなりますが、確実に動作します。

   

便利なカスタマイズ

同じ「動作設定」にある「入力参照時固定フォルダ」 で入力パスを設定できます。起動のたびにデフォルトフォルダから変更するのが面倒になったら、カスタマイズしてみましょう。

「入力参照時固定フォルダ」で入力パスをカスタマイズ

waifu2x-caffeの使い方

設定のポイントは2つだけ

詳しい使い方はフォルダ内の「README」ファイルを読んでいただくとして、今回のビッグバナー制作における設定をご紹介します。

『Ｄ×２』ビッグバナー画像の変換設定

使い方

1. 入力パスの「参照」ボタンを押して、変換する画像を選択します。
   ※出力パスは自動で設定されます。
2. 「変換モード」はそのままにします。※「ノイズ除去と拡大」
3. 「ノイズ除去レベル」を選びます。※今回は「レベル2」
4. 「拡大サイズ」を選びます。
5. 「モデル」を選びます。※今回は「写真・アニメ(UpPhotoモデル)」
6. 「実行」ボタンを選んで、変換開始です。 

   

このように数クリックで変換できてしまうこともwaifu2x-caffeの魅力ですね。

「実行」ボタンを押してしばらく待つと拡大された画像が作成されます。8Kから16K解像度への拡大もGPU変換なら短い時間で終了します。

ノイズ除去レベル

ノイズの具合が、質感に大きく影響している印象があります。ここはしっかり設定したほうが良いですね。

まずは「レベル1」を選んで一度変換し、結果を確認することをオススメします。

「レベル1」の結果を見た上で

• 質感が失われ過ぎていれば「レベル0」で変換する。
• ノイズが強ければ「レベル2」で変換する。

適切なレベルを設定することで、さらに良い結果を得られると思います。

モデル

ビッグバナー画像では「写真・アニメ(UpPhotoモデル)」を選んでいます。
※「写真・アニメ(Photoモデル)」より高速かつ同等以上の画質で変換できます。

アニメやイラスト系の画像では「2次元イラスト」モデルを選びますが、目的に合わせて「UpRGBモデル」「Yモデル」など最適なモデルを選べると良いですね。

結局どれくらいキレイになるの？

「オレの嫁（waifu2x-caffe）」と「アドビ先生（Adobe Sensei）」を比較

ところでどれくらいキレイに拡大変換できるのか、気になりませんか？

そこでwaifu2x-caffeとAdobe Senseiをビッグバナー画像を使って比較してみました。いったいどちらの拡大変換がよりキレイな画像になるのでしょうか？　私も楽しみになってきました。

 Adobe Sensei (Photoshop)

• 人工知能（AI）とマシンラーニング（機械学習）
• 「イメージ」→「画像解像度」のダイアログにある再サンプルから「ディテールを保持 2.0」を選ぶ
  ※Photoshop CC 2018からの新機能

waifu2x-caffeとAdobe Senseiの検証

ベース画像（8K解像度）はそのままの大きさ、100%表示です。

比較画像（16K解像度）は見やすくするため実際よりも200%拡大表示しています。

それでは英雄 マサカドの口元から比較してみましょう。 

ベース画像	100%表示
Adobe Sensei ディテールを保持 2.0 （ノイズを軽減0％）	化粧の質感は残っているが、エッジ処理に問題があり 200%表示
Adobe Sensei ディテールを保持 2.0 （ノイズを軽減50％）	エッジはスムーズ、化粧の質感はノッペリ 200%表示
waifu2x-caffe 写真・アニメ (UpPhotoモデル) ノイズ除去レベル2	化粧の質感を保ちつつ、エッジをスムーズにするバランスが良い 200%表示

waifu2x-caffeの結果が一番良いですね。Adobe Senseiの挽回なるか？

次は天魔 アスラおうの鎧装飾を比較してみましょう。

ベース画像	100%表示
Adobe Sensei ディテールを保持 2.0 （ノイズを軽減0％）	四角いドットが残ったまま 200%表示
Adobe Sensei ディテールを保持 2.0 （ノイズを軽減50％）	エッジはスムーズ、質感は若干失われた 200%表示
waifu2x-caffe 写真・アニメ (UpPhotoモデル) ノイズ除去レベル2	エッジはスムーズ、質感も問題なし 200%表示

ここでもwaifu2x-caffeの結果が一番妥当ですね。Adobe Sensei頑張って！

最後は天魔 アスラおうの背景です。段差のエッジとピンク色の背景との境界を比較してみましょう。

ベース画像	100%表示
Adobe Sensei ディテールを保持 2.0 （ノイズを軽減0％）	エッジの輪郭がにじむ 200%表示
Adobe Sensei ディテールを保持 2.0 （ノイズを軽減50％）	エッジのにじみは改善、あと一歩 200%表示
waifu2x-caffe 写真・アニメ (UpPhotoモデル) ノイズ除去レベル2	エッジのにじみが一番抑えられている 200%表示

最後もwaifu2x-caffeの結果が一番でした。

以上で「口元」「鎧装飾」「背景」の3つの比較が終了しましたが、ビッグバナー画像を元に検証した拡大性能に関しては「オレの嫁」――――waifu2x-caffeとの相性が良い結果となりましたね！

※検証を行ったバージョン：waifu2x-caffe (1.1.8.3)、Adobe Sensei (Photoshop CC 2019)

上記検証ではwaifu2x-caffe一択ですが、Adobe Senseiの「ディテールを保持 2.0」が活かせるケースもあります。

例えば「テクスチャーデータを簡単に拡大できる」ところですね。数世代前のゲームを移植する際にテクスチャーがHD化されていないこともあります。

この機能をバッチ処理することで、テクスチャーのHD化を低コストで量産できるかもしれません（弊社内で事例があると聞きました）。

「ディテールを保持 2.0」が使えない場合は？

おかしいぞ？　本来はここにあるはずなのに、選べない場合は・・・

「ディテールを保持 2.0 アップスケールを有効にする」をオン

（Photoshop CC2018以降であれば）環境設定→「テクノロジープレビュー」の「ディテールを保持 2.0 アップスケールを有効にする」をオンにします。

前半まとめ

というわけで前半はビッグバナーの解像度、拡大変換ツールwaifu2x-caffeの紹介、Adobe Senseiとの比較を行いました。ここからは画像を拡大変換する前の「元素材ができあがるまで」のメイキングについてご紹介していきます。

メイキング：拡大前の元素材の作成手法

全体のワークフロー

それでは全体の工程を確認していきましょう。 1～5までの工程がありますが、このメイキングでは「1. Unity～」と「2. Photoshop～」にフォーカスした内容となります。

ビッグバナー制作全体ワークフロー 

1. Unityでキャプチャーする
   ・8K解像度
2. Photoshopで作業をする
   ・合成
   ・レタッチ
3. waifu2x-caffeで画像を拡大する
   ・8K→16Kに拡大変換
4. Photoshopで入稿用画像を作成する
   ・RGB→CMYK変換
   ・色調補正
5. Illustratorで入稿データを作成する
   ・印刷業者側から提供されたテンプレートファイルに入稿用画像を読み込む
   ・側面デザインや権利表記等などIllustrator上の作業を行う

 

まずはUnityから

Unityのキャプチャー環境

『Ｄ×２』はUnityをゲームエンジンとして採用し、開発が行われています。

悪魔モデルと背景シーンは3Dで作成されているため、Unityでカメラを作成することで色々な角度から悪魔モデルと背景シーンをキャプチャーすることができます。

用意するデータは

1. 悪魔モデル
2. バトルステージ用の背景シーン　※ゲーム中にロードされる
3. キャプチャー用のシーン　※ゲームには含まれない

です。

シーン内にどのデータが入っているのかは、リストにして下記にまとめました。

背景シーン（バトルステージ用）

• 背景モデル
• （背景内の）バトル開始位置
• バトル開始位置に付随するフォグやライト等の環境設定
• 悪魔モデルの質感調整等パラメーター

 キャプチャー用シーン

• 悪魔モデル
• キャプチャー用バトル開始位置
• キャプチャー用カメラ
• キャプチャー用ライト

シーン内のバトル開始位置と連動して背景環境を変更させる仕組みとなっています。そのため同じ背景シーンでも、バトル開始位置によってはガラリと雰囲気が変化します。

バトル開始位置を切り替えるとシーンの雰囲気や見た目も変わる

この仕組みを流用してキャプチャーのためのカメラのポジションやライティング環境を作り、キャプチャー用シーン内に保存しています。

マメなセーブデータが大切だ！ということを『真・女神転生』シリーズのザコ敵に全滅させられた経験から学んでいますので、うっかりミスで「あの背景をキャプチャーし忘れた！」と問題が発生しても、すぐ同じ環境を復帰できるように備えています（ああ、当時のトラウマが・・・）。

キャプチャー

キャプチャー用カメラのベースはバトル時のカメラと同じなのですが、画面をキャプチャーするコンポーネント（スクリプト）がアタッチされています。

画面のキャプチャーはフリーツールが多数ありますが、『Ｄ×２』では独自の描画方式を用いているのでフリーツールや標準機能では正しくキャプチャーできません。そのためキャプチャーツールは独自実装となっています。

カメラの背景色ですが「Background」をPhotoshopで抜きやすい色に変更しているだけです・・・横着ですね。背景エフェクトをキャプチャーする場合は「Background」を黒色でキャプチャーしています。

「Background」カラーを抜きやすい色に変更

動きのあるポーズはTimeline機能を使う

特定のポーズでキャプチャーしたい場合では、Timeline機能を使っています。

※Timeline機能＝シネマティクスやカットシーンを作ることができる

Timelineを利用したキャプチャー

Timeline機能を使うとライティング、パーティクルエフェクト発動のタイミングも自由に組み合わせることができます。

「再生開始から◯◯フレーム目のアニメーション」をキャプチャーすることで、同じポーズとカメラアングルを再現しています。 

猛将 マサカドのレタッチ画像の制作では、「カメラ」「猛将 マサカドのモデル」「攻撃のアニメーション」をTimeline機能で読み込んでキャプチャーしました。この猛将 マサカドの攻撃アニメーションは何度見ても迫力があってカッコイイですね！

猛将 マサカド「マサカドチャレンジ」 ※クリックすると大きい画像で表示

撮影舞台の紹介

英雄 マサカドのビッグバナー撮影の舞台は専用の「チャレンジクエスト」ステージ（いわゆるボス戦）です。

海上の歌舞伎舞台をイメージしていて、奥には三重塔が英雄 マサカドを見守るように佇んでいます。

英雄 マサカド専用の「チャレンジクエスト」ステージ

『真・女神転生Ⅲ-NOCTURNE』にマサカド公が登場する場面がありますが、アトラスさんからの提案により篝火と鳥居の要素をオマージュとして取り入れています。

ここからはPhotoshop

レタッチの方向性は？

Photoshop上にて、以下のように作業を進めていきます。

背景

1. 空、遠景、近景、エフェクトの合成
2. レタッチ
3. 色調補正

キャラクター

1. 影とライティングの合成
2. レタッチ
3. 色調補正

英雄 マサカドは「格式の高さ」、そして天魔 アスラおうは「壮麗さ」をキーワードとして写真に収めた際に格好よく見えるような、写真映えするような方向性となっています。

記事ボリュームの都合上、ここでは英雄 マサカドのレタッチ工程を中心に進めていきます。

まずはゲーム画面の背景だけのスクリーンショットを確認してみましょう。

ゲーム画面の背景スクリーンショット（参考用）

ゲーム中は迫力ある背景だと思ったのですが、スマートフォンのカメラで撮影するにはやや物足りないですね。

空を高解像度化

屋外の背景で空が見えているようであれば、空から作業を始めます。

画像全体のトーンを空を見ながら決めやすいですし、光がどのように射し込むかイメージできます。

また、単純に絵としてのクオリティーが上がりやすい印象もあります。

実は空の元画像素材は8K解像度には足りていませんでした。

先程Photoshopでの作業と書きましたが、この空だけは先にwaifu2x-caffeを使って４倍に拡大します。

異なるノイズ除去レベルで４倍拡大した画像を２枚用意

変換してみるとノイズ除去レベル２ではノイズが残り過ぎ、３だと完全にノッペリしていましたので、この２枚を合成して画質をコントロールすることにしました。

もし元画像の地平線が傾いていれば「切り抜きツール」の「画像上に線を引いて画像を角度補正」を使います。

余白を自動的に補正する設定

自動で傾きを修正してくれるので便利ですね。

「画像上に線を引いて画像を角度補正」で水平線に沿って線を引く

この時に「切り抜いたピクセルを削除」オフ、「コンテンツに応じる」オンに設定します。

本来であれば傾きを修正すると空白が生まれてしまいますが、Photoshopがいい感じに埋めてくれます。

ポイントになるのは「コンテンツに応じる」という機能です。

こうして拡大された空をレイヤーマスクを使ってゲーム中の空に合成していきます。

ゲーム中の空

合成した空

空を変えただけですが、ずいぶんと雰囲気が変わります。

遠景と画像の切り抜き

ここからは三重塔と橋を合成していきます。

三重塔の画像をPhotoshopで読み込み、塔の形状で抜く作業をしていきます。

選択範囲から「色域指定」

選択範囲メニューから「色域指定」を選んで、抜きたい色を削除するのが一番簡単な方法ですが、フチに１ピクセルほど微妙に色が残る場合がありますので注意が必要です。

フチに色が残ったケース（極端な例）

フリンジ削除でフチを削除

レイヤーメニューから「マッティング」→「フリンジ削除」で1ピクセル削ってしまうと安心です。

背景だと上記で大抵は問題ないのですが、木々のある背景や複雑な形状のキャラクターでは繰り返し調整可能な「レイヤーマスク」を使う方がより良い結果を得られます。

選択レイヤーに「レイヤーマスク」を追加し、マスクの「属性」にある「色域指定」を使います（「反転ボタン」を押すと選択を逆転できます）。

レイヤーマスク「属性」の「色域指定」と「選択とマスク」

次に「選択とマスク」を使いながらエッジの処理を調整することができます。※以前のバージョンでは「マスクの境界線」

「選択とマスク」を使用してエッジを微調整

空気感の演出として、レイヤースタイルや修正を加えていきます。

「カラーオーバーレイ」は空気感を演出できる便利な機能ですね。

三重塔を追加

レイヤースタイルの「カラーオーバーレイ」を選んで、三重塔に空気感を追加

フォグと橋を追加して遠景の完成

ゲームからキャプチャーした素材だけでは足りなかったので、雲ブラシでフォグを描き足しました。

近景と水面反射

歌舞伎舞台、鳥居を合成していきます。

遠景のレタッチによって鳥居のシルエットがハッキリしました。この状態であればキャラクターを追加しても背景に埋没する心配はいらなさそうです。

歌舞伎舞台と鳥居を追加

8K解像度ではライトマップの精度が荒い箇所がいくつも見つかりました。またアンビエント・オクルージョンも物足りないと感じたため、地味な作業ですが修正します。

歌舞伎舞台中央には水面があります。映り込むと美しさが増しますので、三重塔と空の水面反射を追加していきます。

レイヤーを選択して、フィルターメニューから「スマートフィルター用に変換」します。これでフィルター効果を何度でも修正できるようになりました。

フィルター→「スマートフィルター用に変換」

編集の「自由変形」→「垂直方向に反転」で上下反転させますが、若干タテに伸びるように変形させた後に、フィルター→「ぼかし」→「ぼかし（移動）」を実行します。ぼかし表現をタテ方向（90度）に加えていきます（「距離」はケースバイケースで調整します）。

フィルター→「ぼかし」→「ぼかし（移動）」で90度のぼかし

水面反射として三重塔を追加

水面への映り込みは若干暗くなるように「トーンカーブ」で暗めに調整します。

次に空の反射を追加しますが、水面がツルッとしてしまいました。

空の反射も追加

手っ取り早く調整する方法として、レイヤースタイルの「ブレンド条件」を使っていきます。

「下になっているレイヤー」のスライダーを左右に動かして、ピクセルの明るさを基準にしながら、選択中のレイヤーより下になっているレイヤーを合成します。

「ブレンド条件」で明るい部分だけの反射を残す

このままだと合成が荒いままなので、一度「Alt（Windows）／Option（Mac）」キーを押しながらスライダーをクリックします。

1つだったスライダーが2つに分割されます。隙間を空けるようにスライダーを移動させると、スムーズに境界が合成されます。

※スライダーは左右両端にありますので、目的に応じて使い分けます。

さらにレイヤーマスクを追加して、合成する範囲をコントロールしても良いかもしれません。

近景の完成

エフェクトと色調補正

Unityでエフェクトごとにキャプチャーした画像を基本的には描画モードを「スクリーン」で合成していきます。炎だけ、煙だけと要素に分けてキャプチャーするため、キャプチャー枚数は背景よりもずっと多くなります。

エフェクトは描画モードを「スクリーン」で合成

背景の完成
※クリックすると大きい画像で表示

それでも足りないエフェクトはブラシで描き足します。色調補正を重ねて背景の完成です。

リテイクに強いゴミを消す方法

少し脱線しますが、フォトバッシュやレタッチ作業をしていると画像から不必要なゴミを消したい場合もあります。

定番というと「スポット修復ブラシツール（修復ブラシツール）」「コピースタンプツール」が思い浮かびますが、今回はCC 2019から追加されたマイナー（？）だけど便利な方法をご紹介したいと思います。

スマートフォンで撮影した実物のビッグバナー写真からエフェクトやシミなどを削除してみます。

火の粉や鳥、印刷のシミを削除するには・・・

削除したい範囲を囲み・・・

メニューから編集→「コンテンツに応じた塗りつぶし」を選びます。
※CC 2019より以前のバージョンでは編集→塗りつぶし→「コンテンツに応じる」ですが、新規レイヤー作成はできません。

「新規レイヤー」を選ぶと、修正箇所を別レイヤー化できて便利

CC 2019からはプレビューで確認しながら調整できるようになり、出力先として「新規レイヤー」が選べるようになりました。このままデフォルト設定で適用します。※意図した結果にならないケースでは、「サンプリング領域」をブラシで塗り直します。

「サンプリング領域」と選択範囲を調節するだけで結果が変わるため、一気に修正できてリテイクに強い便利な機能となりました。

囲った箇所を一気に修正

一方でブラシのストロークで修正できる「スポット修復ブラシツール」も捨てがたいです。

ああ、元画像を直接修正しない方法があれば・・・スマートオブジェクトでも修正できれば・・・。分かります。

実は「スポット修復ブラシツール」の「コンテンツに応じる」を選んでから「全レイヤーを対象」にチェックを入れることで解決できます。

「スポット修復ブラシツール」の「全レイヤーを対象」を選ぶ

新規レイヤーを作成すれば、ストロークした修正箇所のみ新しいレイヤーに分けることができます。

ここまでポイントなっているのは「コンテンツに応じて◯◯」という機能です。Photoshop CS4からバージョンが上がるごとに対応が増えている機能ですが、こちらで詳しく使い方をフォローされています。

blogs.adobe.com

キャラクターのライティング

ここからは背景に英雄 マサカドを立たせて、基本的にはキャラクターのライティング調整を優先していきます。

その理由として悪魔モデルはモデリングと質感のクオリティーが非常に高いレベルにあるため、大きい修正をする必要性を感じられないからです（アトラスさんの監修も通っていますし）。

ちなみに下記画像のポーズは元のイラストのマサカド公を再現しています。イラストと見比べても再現性バッチリで、モデリングチームとアニメーションチームの熱意が伝わってくるかのようです。

向かって左側に立っている英雄 マサカドがゲーム中のリアルタイムライトでキャプチャーした画像です

まずは影の調整をしてみましょう。

左側の画像をベースにブラシを使用してアンビエント・オクルージョンを追加していきます。

ベースのキャプチャー画像（左側）

アンビエント・オクルージョン追加後（右側）

夕日のバックライトに合わせて手のひら、袖の下、洋服の重なり部分、足首周りにしっかりと影を落とします。

 

ここからはラィティングの調整をしていきます。作り込んだモデルの立体感とPBRマテリアルによる繊細な質感をさらに引き出すことを目標とします。

基本はキーライト、フィルライト、バックライト（リムライト）があれば対応できます。顔周りが暗かったり、余計な影が顔に落ちているケースではフェイス用ライトを何個か追加してキャプチャーしておきます。

最終的にPhotoshop上で合成するため、Unity上でのライト調整はそこそこで大丈夫です。

1ライトにつき1枚キャプチャーしておくと、調整がしやすくなります。

フロントライト（左側）、フィルライト（右側）

ベースの画像を1枚目として数えると、フロントライト、フィルライトの追加を行ったので合計3枚キャプチャーしたことになります。

意外と少ないキャプチャー枚数なのは屋外だったからかもしれません。もし屋内であれば光源が多数あるケースが多いため、キャプチャー枚数も増えていたでしょう。

以前はMayaでディフューズ、スペキュラーなどレンダリング要素別に出力していたことに比べると、とってもシンプルな手法ですね。

英雄 マサカドを取り囲むように篝火が配置してありますので、照り返しを感じられるように「トーンカーブ」を使って色調補正します。

ベース（左側）、レタッチ完了後（右側）

足元には水面反射と影を追加し、注目される箇所を優先して修正します。

顔は注目度が高いので、瞳や歯の辺りは丁寧に手を入れています（口の中までクッキリと映る解像度なんです）。

最後に背景とキャラクターをなじませ、全体のバランスを調整をしてレタッチの完成です。

英雄 マサカドのビッグバナー完成画像
※クリックすると大きい画像で表示

新生ホーム画面背景にそびえ立つ天魔 アスラおうのビッグバナー画像も上記と似たような工程を経ています。

天魔 アスラおうのビッグバナー完成画像
※クリックすると大きい画像で表示

この後の作業工程ですが、記事前半でご紹介したwaifu2x-caffeを使った拡大変換へとつながっていきます。ここまで長かったですね・・・長文にお付き合いいただきまして、ありがとうございました！

まとめ

というわけで『Ｄ×２』ビッグバナー制作事例いかがでしたでしょうか？

• waifu2x-caffeを使って入稿用画像を拡大変換する。
• waifu2x-caffeの方がPhotoshop (Adobe Sensei)よりもキレイな拡大結果を得られる可能性がある。
• Photoshopの「コンテンツに応じる」機能はどんどん使ってみる。

辺りがポイントでした。

ちょっとしたツールの使い方の違いで作業効率が地味に変わることもあります。今回の記事が皆様にご活用いただける内容でしたら幸いです。

セガではこのような取り組みに興味のある方を募集しています。もしご興味を持たれましたら下記サイトにアクセスしてみてください。

www.sega.co.jp

最後は『真・女神転生』シリーズ定番のセリフでしめたいと思います。

『コンゴトモヨロシク』お願いいたします。

©SEGA/©ATLUS

セガ・セガロゴ、ゲームギア、ゲームギアミクロ、メガドライブミニは株式会社セガまたはその関連会社の登録商標または商標です。

記載されている会社名、製品名は、各社の登録商標または商標です。

在宅でチームの働き方改革！！

ごあいさつ

初めまして、株式会社セガ開発技術部の廣島です。

今回のBlogでは新型コロナウィルスの感染拡大防止のために弊社で実施されたリモートワークに関して、私達のチームで起きた問題やその問題に対してどう対応したのかを紹介します。 

リモートワークをしてみて、私たちのチームに発生した問題は、コミュニケーションが上手くいかず、チームとしての機能が低下していくことでした。

そして、その原因は距離でした。

チームの間に物理的な距離ができてしまったことで、雑談のような気軽なコミュニケーションが減り、心の距離までもが遠くなってしまったのです。そしてこれまで何事もなく回っていたチームの歯車が、少しずつ噛み合わなくなっていきました。

しかし、リモートワークなので当然、物理的な距離を近づけることはできません。

どうすれば良いのか？何をすればこれまでと同じように上手くチームが回るのか？

そういった試行錯誤をした記録とそこから得た知見を共有したいと思います。

どうぞ宜しくお願いします。

対象となる読者

• リモート環境でチームとして何かに取り組んでいる

• リモート環境でこれからチームとしての作業に取り組もうとしている 

そういった方たちの活動の参考になれば幸いです。

仕事の内容

前置きになりますが、私達が所属する開発技術部はゲームを開発している部署ではありません。

 Windows上で動作する開発支援ツールの作成や、UnityのPlugin開発などを行い、開発現場を支援しています。

これは私達が制作している、企画さんやデザイナさん向けのGit のクライアントツール「Pengit」です。過去には「第1回 GitHub Enterprise ユーザ会」などでも紹介させていただきました。

私達のチームにはエンジニアが４人いて、それぞれがツールを作ったりプラグインの開発をしたりと、２人から４人のチームを組んで仕事をしていました。

 ４人が関わっているツール作成のプロジェクトに関しては２週間単位で業務の計画を立て振り返りを行うスタイルで開発をしていました。

 それ以外のプロジェクトではやり方はバラバラで必要になったときに都度情報を共有するスタイルで仕事をしていました。

 ビックリするかもしれませんが会社ではお互い席も近く振り向けばそこにチームメンバーがいる環境だったので、このような進め方でも問題ありませんでした。

しかしリモートワークではそう上手くはいかなくなります。が、その話はもう少しあとで紹介します。

リモートワーク開始準備　　２月の中頃から

リモートワークを始めるにあたって、在宅で何をするのかを上司とすり合わせました。

まず、基礎研究や調査と言った案件は比較的個人でも進めやすいので、これを機に新しい技術を勉強することになりました。

リモートワーク期間が短期で終われば新技術の勉強だけで良いですが、問題が長期化することも考え、その場合は在宅でも通常業務を回すという方針を立てました。

 まだこの時点では、出社をする必要があるツールのサポート業務が続いていたため、チーム内で順番に出社する人を決めて週に２日ほど出社する半リモートワーク生活からスタートしました。 

当時はまだ緊急事態宣言も発令されていなかったので、出社している人が数多くいたのを覚えています。

リモートワーク開始　　３月

リモートワークが始まるといくつか困ることが出てきました。 

毎日チャットで朝会を行っていたのですが、当初は文字のみでコミュニケーションをとっていたため、あまりにも効率が悪かったのです。

• 一つの議論に多くの時間が掛かる
• 情報が流れてしまうので、あとから情報を追うのが大変

そこで、文字のみのチャットは止めて音声チャットを導入しました。

文字のみで行っていた朝会

しかしサポートのために出社しているメンバーは周りにも人が居るため音声によるチャットがしにくいなど、環境の不一致による問題が起こりました。

機材調達もまだだったのでマイクが無い人、音声チャットそのものに抵抗感がある人もいて、全員が気軽に使える状態ではありませんでした。

すると、音声チャットが気軽に使えないことから、あまり大きな問題が無い場合は朝会を短縮もしくは中止してしまうようになりました。それが重なり、徐々にそれぞれのプロジェクトが何をやっているかが見えづらくなっていきました。

これはちょっとマズい状態ですが、この当時はまだ基礎研究や調査が中心だったのでそこまで大きな問題にはなりませんでした。

そうしている間にも、新型コロナウィルスの情勢は一向に良くならず長期化が見込まれたため、４月からは完全にリモートワークへ移行することになりました。

完全リモートワークへ　　４月

私たちのチームは４月から完全なリモートワークに移行したのですが、振り返って以下のような問題がありました。

• 長期間一人で作業をすることで、孤立感が高まっていく

• 行き詰まったときに解決に以前より時間が掛かる

これは「チーム」としてあまり機能していないことが原因だと考えました。マズいと思い進め方を見直しました。

具体的には以下のように変えました

1. リモート朝会を毎日やる！

2. 時間が掛かっても全プロジェクトを対象に行う

3. 計画、振り返りを１週間単位に見直す、これも全プロジェクトでやる

4. 雑談も積極的にする

5. 小さいことでも皆で褒めよう！

不定期になっていた朝会でしたが、全員がリモートワークに移行しマイクも無事到着したので、全プロジェクトを対象に音声チャットでやることにしました。

ダラダラしないようにルールを決めて進めることがポイントです。

朝会で設けたルールは以下のようなものです。

• 前日の作業内容と今日の予定を事前にチャットに書き込んでおく

• 共有したいことなども事前にチャットに書き込む

• 書いた内容を読み上げるのではなく気になったことのみを報告する

• 司会が順番に発言者を指名する

• プロジェクトごとの詳細な議論は朝会の終了後にそれぞれ行う

このあたりのルールやWeb会議のノウハウは今や色々なところで紹介されているので、自分達の状況に合ったものを見つけてくると良いと思います。

また情報の共有が終わったあとはそれとなく雑談をするようにしました。時事ネタから技術ネタまで自由に話してOK。もちろん強制ではないので忙しい人は自由に抜けてOKです。

こういう空気はとても大事です、雑談を強制されてもツラいだけですしね。

あまり長時間にならないように、時間に気を付けながら進めることも大切です。

また褒められると嬉しいしハッピーに仕事ができるよね。というわけで、些細なことでも褒めるスタンスで進めていくというルールになりました。 

計画から振り返りの期間を１週間に短縮したのにはいくつか理由があります。

• ２週間後どうなっているかわからない
• ２週間分の振り返りをリモートで行うと時間が掛かる
• プロジェクトに関わりの無い人を長時間拘束してしまう

 などです。

私のチームでは同時に複数のプロジェクトを抱えているという特徴もありこのような理由で期間を短縮しました。

ちなみに朝会を含めた私達のチームで行うWeb会議ではカメラはOFFでやっています。

• 会議の度に部屋を片付けたくない
• 服を着替えたくない

など色々な理由があるのですが、Web会議に対する心理的なハードルを少しでも下げたかったのでカメラはOFFで運用しています。

メンドクセと思われたらアウトです。

私の作業環境

在宅勤務なんだからパジャマで仕事したいと思っている人もいるかもしれません。

ただカメラをONにしたほうが臨場感は出るので、オンライン発表などするときはカメラがあった方が良いですね。

最初は時間が掛かって「もう昼じゃん」みたいなこともありましたが、進行の慣れやルールの見直しによって良い感じに進むようになってきました。

こりゃ駄目だなと思ったら柔軟にルールを変え改善していくことが大事です。

ルールの見直しの一例

例えば当初は各プロジェクトに対して一人ひとり発言していたのですが、関わりの無い人には無駄な時間なのでプロジェクトごとの確認は行わないようになりました。
その代わり各プロジェクトのリーダーが事前にプロジェクトの状況をチェックして問題がありそうであれば共有をするスタイルに変わりました。

発言に関しても、初めの頃は何か意見はありますかと呼びかけていましたが、これを司会が指名する方式に変更しました。
これは発言が被ることの防止や、会議の時間短縮に役立っています。

気軽に相談や質問ができる環境を作る

雑談や相談は非常に重要で、何か上手くいかない問題があった場合も誰かに相談した途端に解決することは良くあります。

雑談や相談がリモートではやりにくかったので、積極的に音声で質問や相談を行えるようにルールを作りました。

ルールと言っても話は単純で、事前にチャットで聞くだけです。

「今ちょっと良いですか？」

「５分待ってください」

「わかりました、待ちます」

みたいなやり取りをするだけです。

数回チャットでやり取りをしても解決しなければ音声チャットに移るルールも作りました。

時間が掛かりそうだと思ったらすぐに音声チャットへ

こんな簡単なやり取りですがチームで意識を合わせることでお互いに相談して良いんだ、質問して良いんだという雰囲気ができました。

チャットでのやり取りに関しては、以下のことに気を付けようとチームで共有しました。

• 対面の会話より意図が伝わりにくいので、質問するときは前提条件などを丁寧に書こう
• 対面の会話より感情が伝わり辛いので指摘等はきつくならないよう・誤解を招かないように表記に注意を払おう
• いいね 等のエモーションを多く使おう

雑談に関しては、雑談専用のチャットルームを作ったり、お昼休みに行うフリーインフリーアウトのビデオチャットルームを作るなどして交流していました。

結果どうだったか

毎日朝会を音声チャットでやることで心理的な負担や孤独感を軽くすることができ、音声チャットへの抵抗感も段々と軽減されていきました。

また各プロジェクトの状況もきちんと把握できるようになりました。

相談を積極的に行えるようなルール作り雰囲気作りによって相談や質問の頻度は格段に上がりました。

相手を褒める姿勢は計画の振り返りの際に、メンバーのファインプレーを挙げたり、フォローされて助かったことなどを相手に伝える行動に繋がりました。

リモートワーク開始当初に比べてチームとして機能するようになったと実感しています。

以下は週に一度行う振り返りの様子です。振り返りはKPT(Keep・Problem・Try)方式で行っています。継続したい良かったこと、抱えている問題、トライする項目を書き出し共有する方式です。

コミュニケーションに関してはポジティブな意見が多く出ていることがわかります。

カンバンを使ったKPT方式の振り返りの様子

まとめ

チームで仕事をする上での強みは相互に補強できることにあると思っています。
チームが上手く回っていないときにそれを妨げている要因は何なのかを見極めることが重要です。

それぞれチームによって事情は違うと思いますが、私達の問題はコミュニケーションにあったので、コミュニケーションを改善することに力を入れました。

• 仕事のやり方、進め方を変える
• Web会議への心理的なハードルを下げる
• 機材を調達する（マイクが無いと音声チャットは厳しい）
• 当たり前のことでもルールとして周知する
• チャットでのやり取りで気を付ける点を共有する

こうすることでリモートワークの良いところをそのままに、悪いところを解消できたのではないかと思います。

今後も状況は変わっていくと思いますが、問題を見極めチームの力が発揮できるように頑張っていきます。

セガではより良いチームを目指し、一緒に働いてくれる方を募集しています。

興味がある方は下記サイトにアクセスして下さい。

www.sega.co.jp

Pythonの勉強会(入門編)の事例紹介 ―― アプローチを変えてみる

特にこういった方によんでいただけたら・・・

今回のブログは主に次のような方に向けて、Python の社内勉強会を開催した事例を紹介します。

• Python に興味があって学習したいと考えているが何から手をつけてよいかわからない
• Python などプログラミング言語の勉強会をこれから開こうと考えている
• TA（テクニカルアーティスト）やスクリプターなどに Python の使い手をもっと増やしたいと考えている

プログラミング言語を学ぶ側と教える側、両方の方にとって何か少しでもヒントになれば幸いです。

今回のブログで伝えたいこと

Pythonの勉強会（全4講演を予定）の入門編である第１回目の講演について予想以上に盛況となった自身の成功体験から得た知見を最初に共有させていただきます。

• プログラミング（Python）を学びたいと思っているオトナでかつプログラミング経験ゼロないし初心者に対する入門としてはビジュアルプログラミングや作業分解が教材としては有効である
• いきなりPythonに手をつけることは一旦我慢して、まずはプログラミングの基本（順次処理、条件分岐、繰り返し）を学ぶことが近道である
• 先にたっぷり自信をつけた上で少し困難なことにチャレンジして成功体験を得られるサイクルになるようになるべく交通整理することで挫折せず継続できる

それではPythonを学びたい方、教えたい方への入門の参考教材として、
勉強会当日の内容についてご紹介しようと思います。

第１回目の勉強会の内容とは

当日はワークショップ形式にて開催しました。ワークショップ形式にすることで、

• グループ内での協力
• 発想の違いの発見
• 安心感の向上
• チームメンバを意識することで集中力の向上

などの効果を期待して設定しました。

またパソコンは使わずに、運営側で鉛筆とプログラムを書くための用紙を準備して、手ぶらでも参加できるようにしました。

 用紙イメージ

時間の使い方としては、

• 事前説明に5分
• 順次処理の学びに30分（ビジュアルプログラミング）
• 順次処理＋条件分岐＋繰り返しの学びに25分（作業分解）

で設定しました。

順次処理の学びについて

最初はビジュアルプログラミングを通して、順次処理だけに集中して学んでいただきました。
ここでは、

• 「自分はできるんだ」
• 「プログラミングって想像してたより簡単かも」

などといった、自分に自信をつけていただくことが最大の目的です。後半の作業分解の課題の難易度が１段上がることがわかっているため、ここでどの程度自信をつけていただくかによって、後半の課題に対する印象がガラッと変わります。

あともう１つ大事な目的があります。それはプログラミングすることで課題を解決する力を高めることです。

教材としては、コマンドをつかってキャラクタを操作して宝箱まで導くといったプログラミングのアナログ的なゲームを準備しました。

それでは、コマンドから見ていきましょう。

コマンドの紹介

キャラクタは各コマンドの内容にしたがって動かすことができます。 

コマンド（記号）	コマンドの内容
	向いている方向に１マス進む
	時計回りに90度回転
	反時計回りに90度回転

コマンド３つを理解したところで早速課題に移りたいと思います。

 課題その１

下図の青いキャラクタを先ほど学んだコマンドをつかって宝箱まで到着できれば、課題クリアです。参加者にはプログラムを書く用紙の縦１行を使って、コマンドを鉛筆で書き足してプログラムを完成させていただきます。

正解はたくさんあります。正解の１例としては、下図右側の「プログラム例」をご覧ください。

またこの課題その１において難易度をあげたければ、以下のような条件を加えてあげましょう。

• 課題その１-A：コマンド（どれでも構わない）を９つぴったり使って宝箱まで導いてください
• 課題その２-B：３種類すべてのコマンドを使って宝箱まで導いてください

 課題その２

新しいルールとして「岩」を追加します。岩のあるマスはキャラクタは通ることができません。課題クリアの条件は課題その１と同じですが、参加者は岩をうまく避ける形でプログラムを作成する必要があります。ルールを追加することで課題の難易度をバランスよくあげていきます。

こちらも正解はたくさんあります。正解の１例としては、下図右側の「プログラム例」をご覧ください。

マスを増やしたり、岩の位置や数を変える（必ず宝箱には到達できる並びにしました。）ことで、難易度を調整することもできます。その場合はよりプログラムが複雑になり、コマンドを書き込む枠を増やす必要があるかもしれません。

ぷちエピソード

勉強会当日、道を岩で完全に塞ぐように配置して宝箱への道を絶ったあとに参加者の皆様に「この場合、どういうプログラムを書けば、宝箱まで到達できますか」と無茶ぶりな質問をしてみました。

すると1人の優秀な方が、「マスの外は歩けないというルールは聞いてないので、マスの外に出て迂回して移動するようにコマンドを書けば良いと思います」という異次元の回答を出してくれました。

「とっても素晴らしい正解です！」と賞賛させていただきました。

回答者の方が一枚上手でした。

わたしはまだまだプログラマとして、ルールの詰めの部分で修行が足りていなかったというわけです。。。

プログラミングの世界ではこういったルール抜け、欠陥のことをバグといいます。バグによってこちらが意図しないような想定外の問題を引き起こします。

色々な状況や問題を事前にすべてもれなく想像できるようになれることが最高です。

このブログを今よんでくださっているあなたも時間が許すようなら鉛筆と紙を準備して、今回の課題のプログラムをご自分の手で書いてみてください。

プログラミングと聞くとパソコンで何か作業をするイメージがとても強いですが、実はそうではないことがわかっていただけたのではないでしょうか。

順次処理がどういったものかイメージはつかめたでしょうか？

プログラミングって意外とカンタンではありませんか？

今回、記号（絵）を使ってプログラムを書きましたが、絵や図を用いるプログラミングを ビジュアルプログラミング といいます。ビジュアルプログラミングとして有名なものとして「ScratchJr（スクラッチジュニア）」、「Scratch（スクラッチ）」などがあります。無料のアプリケーションですので気になる方は調べて触ってみてください。

ちなみにPythonはというと、文字や数字、また記号を用いるプログラミングで テキストプログラミング といいます。

前半は以上となります。

順次処理に加えて、繰り返し、条件分岐の学び

後半では作業分解を行うことで、プログラミングの三種の神器である

• 順次処理（シーケンスともいいます）
• 繰り返し（ループともいいます）
• 条件分岐

について学んでいただきました。

どんな作業でもこの３つを駆使すれば再現できます。

では、当日準備した教材についてご紹介します。

カレー作りの工程を作業分解して学ぶ

まずはカレー作りの工程の例をあげて、「作業分解する」ということがどんな感じなのか学んでいただきました。

わたしなりにカレー作りの工程を作業分解したものがこちらになります。

1. 野菜の皮をむいて野菜やお肉を一口大に切る
2. 野菜やお肉を油で炒めて鍋に入れて水を足す
3. 煮込む
4. 野菜がやわらかくなったか？
   Yesなら５へ、Noなら3へ
5. ルゥを溶かして煮込む
6. カレー完成（※作業ではないですがわかりやすくするために）

基本的には１から順に行う順次処理となりますが、ポイントは４の作業です。
野菜がやわらかいのかそうでないかでその後の進むべき道が枝分かれすることが条件分岐の考えです。
そして「野菜がやわらかくなる」という条件が満たされるまでひたすら３→４→３→４→…を繰り返して野菜を煮込み続けることが繰り返しの考えです。

几帳面な方だと、３と４の間にアクをとる作業を追加で入れたりするかもしれません。

また人によっては２と３の間に隠し調味料を入れる作業を追加するかもしれませんし、野菜を水で洗ってないことには気づきましたか。あなたならどこに追加しますか？

「作業分解する」ことについて、なんとなくイメージは掴んでいただけましたでしょうか。

次は参加者に日頃よく行っているあることについて、実際に作業分解を行っていただきました。

お題は「洗濯」

当日はグループごとにメンバ全員で相談し合って「洗濯」の作業を分解していただきました。

複数人で考えることで、他のメンバの考えを聞いて何か発見があったり、あと前半よりも難易度が上がっている点にみんなで考えれば怖くないといったことなどに期待しました。

また自由に想像・発想してほしかったこともあって、あえてこちらからは条件はつけずに、どういう設定でどこまで細かく分解するかも含めて考えていただきました。

当日の回答を少しだけ

参考に勉強会当日に、あるグループが作成した洗濯の作業分解の回答を１つだけのせておきます。

条件分岐と繰り返しをちゃんと理解して使っていることがわかります。
今回紹介した回答はブログで掲載するためにぱっとみてわかりやすいものを選びましたが、他の回答ではもっと複雑に作業分解されているものも多くあったり、どのグループも理解力の高さに驚かされるものがたくさんありました。
たまたま賢い方ばかりが勉強会に参加されていた可能性も十分に考えられます。

あなたが日頃無意識に行っている洗濯ではどういう手順で行ってますか？試しに書き出してみると、意外と色々なことを行っている自分(人)の優秀さに気づくかもしれません。

もしロボット（コンピュータ）に洗濯させるとなると一から十まですべて手とり足とり教えてあげないといけません。

以上が勉強会の内容となります。

日頃の業務において何か改善したいと思ったときに、どういう手順でどの作業を行って解決するか、その一連の流れを考えることがとても大事です。作業分解を実際に行うことで、この課題を解決するための力、すなわちプログラミング能力を高めることが大いに期待できます。

講師としての成功体験とは

Pythonの勉強会の講師を行っての成功体験をいくつかご紹介しようと思います。

• 参加人数110人は過去最高を記録
• アンケート結果がおおむね良好で、特に講演の理解についてはアンケート結果的に全員理解できた様子なのでわたし自身の目標としていた脱落者0についてはおそらく達成できた
• アンケートの所感欄でも非常にポジティブな所感を多くよせていただいた

実際のアンケート結果

設問：当セッションの内容は如何でしたか？

設問：講演の内容は理解できましたか？

設問：講演は今後の業務に役に立ちそうですか？

印象に残る所感として

60個程度の勉強会に対する所感をいただきましたが、どの所感もわたしにとってはありがたい内容ばかりで、その中でも特に印象に残るものをピックアップしました。 

• グループの方と交流しながらできたのは楽しかったです。プログラミングへの難しそうという意識がなくなった気がします。

• ムズカシいのを覚悟していたのですが、非常に楽しく参加できました！

• 分かりやすかった。プログラミングに対する恐怖感が減った気がした

• プログラミングに苦手意識があったので、絵を使った導入で、これなら自分でも続けられるかも・・・？と思いました。Pyson使える様になればよいな・・・最後ちょっと慌ただしかったかも？

• プログラミングをしたことがなかったので、理解できるのか不安でしたが、理解することができました。ありがとうございます。

以上の所感からは参加者の中にはやはり苦手意識や不安などをお持ちの方がそれなりにいらっしゃって、そういった方がプログラミングに対して自信を持ってくれたことが自分としては一番の成功体験でした。

また「次回も楽しみ」といった次への前向きな所感も数多くよせていただいたことも講演者としては非常にありがたく、第2回目への準備にもさらに力が入るきっかけを与えてくれました。

 勉強会あとの反響として

今回はまだ第１回目ということもあって反響は少ないものの、資料に関するお問い合わせがあったり、別のグループ会社様からプログラミングの勉強会に関する相談の打ち合わせをさせていただいたりしました。とにかく評判がよかったことだけは確かなようです。 

そういえば。　Python勉強会の開催のキッカケについて

わたしがPythonの勉強会を企画するきっかけを与えてくださったのは何名かのTA（テクニカルアーティスト）の方の以下の声を拾ったからでした。
（声をあげていただいたTAの皆様にはこの場をお借りして心よりお礼申し上げます。）

• TAをもっと増やしたい
• Python使いを増やしたい

Pythonの勉強会を開くにしても、ふたをあけてみて需要がなければ開催の意味がないので先に本当に需要があるのかどうか裏をとるために各部デザインセクションのマネージャの皆様のご協力の元で、グループ内のデザイナーの方へのアンケート調査を行いました。
するとアンケート結果から、

• Pythonの勉強会に参加したい割合は確かに多い（90%）
• Pythonを触ったことがないもしくは少ししか触ったことがない方の割合が多い（76%）

という非常に興味深い傾向がわかりました。

今回のPythonの勉強会はまさにこの約76％をターゲットにした内容になっています。

またプログラミングの入門から行うのであれば、デザイナーだけに職種を絞る必要はないことなどから職種は問わないように最終的に変更しました。

職種を絞らなかったことが、結果的に参加人数100人を超える勉強会につながりました。
（アンケート結果：デザイナー62%、それ以外の業種38％）

最後はこのブログの「オチ」をあてようのコーナー

最後はこのブログのオチをあてようのコーナーです。

すでに過去のセガの技術ブログに足を運んでいただいた方や、他の企業様のエンジニアブログなどをよくご覧になっている方なら、すでにこのブログのオチがかんたんに予測できているのではないでしょうか？

まだオチがわからない方は、いくつか過去のブログをチェックしてみてください。この記事や、この記事や、この記事などにヒントが隠されてます。

そのまま行って帰ってこない可能性ももちろんありますが、そういったオチも正解の1つだと思います。

 
弊社ではPython勉強会以外にも、月例の勉強会としてグループ内の色々な立場の方が講師を行ってくださっています。社外からゲスト講師をお招きしてすることもあります。また月例の勉強会以外にも SDC や 各種イベント（GDCやCEDEC）の報告会、プロジェクト内の勉強会などグループ内には多種多様な勉強会があります。

弊社では、勉強会などを通じて自他共栄を行える人を求めています。

みんなで共に成長して感動体験をたくさん創造しあえたら幸いです。(開発技術部 菊川) 

www.sega.co.jp

©SEGA

スケジュール作成をもっと簡単に。内製アプリケーション「ScheduleCanvas」

早速ですが皆さん。

プロジェクトの計画を立てるとき、スケジュールの作成が面倒だと感じたことはありませんか？

汎用的なExcel等のツールを使って作成すると、まずは管理するためにフォーマットを決めなければならず、途中でのタスクの入れ替えやパスの変更はなかなか容易ではありません。

市販のツールを使おうにもただ試すだけにはハードルが高すぎたり・・・。

そういった悩みを解消するために社内開発に踏み切ったのが、内製アプリケーション「ScheduleCanvas（スケジュールキャンバス）」です。

今回のBlogではこのツールの仕様と、スケジュール作成がどう変わったのかを紹介するとともに、ツール実装におけるノウハウの一部を少しだけ紹介します。

今回このブログを担当するのは、セガゲームス　第３事業部　第３開発２部　テクニカルサポートセクションの麓です。

まずは私からScheduleCanvasとはどんなアプリケーションなのかなど説明していきたいと思います。

ScheduleCanvasってどんなツールなの？

単体で使用できるアプリケーション

このツール開発は、スケジュール表の作成、タスクの入れ替えをExcelから脱却し、煩雑なフォーマットを統一するためにスタートしました。

また、WebサービスやDBを社内向けに作ってしまうと、外部協力会社との連携のときの障壁が多かったことと、とりあえずアプリケーションを作ってみることでどこまで効果があるのかを見てみるには大きなシステムは向かないということで、単体で動くexe、アプリケーションとして開発されました。

アイコン

ガントチャートと各リストで構成

画面要素はガントチャートをベースにそこに表示されるデータがリスト形式になっています。

ガントチャートによって、スケジュールの可視化ができ、マウス操作を充実させることで、簡単にタスクの入れ替えや調整ができるように作られています。

主な動作をいくつか紹介します。

タスクの作成

タスクをガントチャート上で簡単に登録でき、タスク名も即座に変更することができます。

担当者変更

担当者の追加とタスクのアサイン変更もドラッグ＆ドロップで手軽に行えます。

休日の自動調整

タスクの長さは工数（日数）ベースで設定されていますので、休日を跨ぐと自動で長さを調節します。

オート整列機能

複数のタスクを並べ直して総工数を確認する機能も充実しています。

また、ガントチャートに表示される情報は全てリスト形式で管理され、リストの編集性もできるだけExcelに近づくように(完全再現への道はまだ遠いですが)設計されています。

例えば、リスト項目のコピペや追加、削除、順番の入れ替えは簡単にできるように作られています。

リスト処理「タスク一覧」

Excelのような外部アプリケーションのリストから、コピー＆ペーストでタスク登録、一覧のセルの内容のコピーペースト、値も外部アプリケーションからコピーペーストで設定することもできます。

リストのフィルター機能

各要素のフォーカスを切り替えられるようなフィルター機能は大量のタスクを管理するのには重要な機能です。

また、スケジュール作成の簡便化やフォーマットの統一等はScheduleCanvasを使ってもらうことで解決していますので、印刷や報告書などに活用できるようにExcel出力機能も用意しています。

このように、主だった機能はゲーム開発者であるユーザーのニーズに常に答えるようにしてアプリケーションは開発されました。

外部連携

Excelの他にも各種チケット管理やバグトラッキングシステムなどと連携させて、ガントチャート視覚化も実装済みですが、今回は記事のボリュームを考慮して割愛させていたできます。

その効果は？

機能実装がある程度落ち着き、現在では多くのプロジェクトで試用してもらっています。

そこで今後の開発継続に向けて参考にするために、ちょっとしたアンケートをとって見ました。

集計結果は…。

質問：ScheduleCanvasを利用するメリットを感じますか？

質問：ScheduleCanvasを利用して、効率化した部分はありましたか？

ここでは概ねポジティブな印象です。

また、意見として以下のようにもいただいていますので、ひとつひとつを参考にさらに使いやすいツールにするために開発を続行していきます。

良い意見

• スケジュールの入れ替え、パスの調整等にかかる時間が短縮した。
• ユーザーのタスク負担度が一目でわかる。
• 今までバラバラだったスケジュールのフォーマットが統一され、見やすくなった。

改善が必要な意見

• タスクの検索がExcelの検索より一覧性がない。
• 開発会社に委託する業務が多く、他社提出のスケジュール（Excel）との共存が難しい。
• 動作をとにかく軽くしてほしい。

他にもアンケートとは別にExcelで管理してたときよりも確実に３０％は効率化できているという声もありました。

社内ツールを開発する上で定期的なアンケートはとても有用で、現在主にどう使われていて、何が一番ボトルネックになっているのかのスコープを探るときに活用しています。

今後も・・・

内製アプリケーションということで、手軽なカスタマイズや要望に応じて機能実装を即時対応できるというのが大きなメリットとなります。

単純なスケジューラーは数あれど、ゲーム開発の現場でゲーム開発の状況に応じて作られているアプリケーションは他の会社だったとしても同じような問題に行き当たることが多いと思います。

こういったゲーム会社に特化した内製ツールだからこそ、会社の枠を超えていつか提供できるようにして、業界に貢献できたらという願いで製作しています。

ご興味ある方は…と言いたいですが、現時点ではそういった準備が整っていないので今しばらくお待ち下さい。

実装ノウハウをちょっとだけ

ここからは実装担当の清水から、このアプリケーションの実装について軽く触れてもらおうと思います。

というわけで本パートを担当させていただきます、セガゲームス　第３事業部　第３開発２部　テクニカルサポートセクションの清水です。

今回は、いろいろと応用ができそうなExcel出力に関する実装について紹介しようと思います。

 ScheduleCanvasのExcelファイルの出力にはClosedXMLというオープンソースライブラリを使用しています。（https://github.com/ClosedXML/ClosedXML）

簡単なコードでExcelワークシートを作成することができ、Excelファイル（.xlsx）で保存することができます。

また、PCにExcelのソフトウェアがインストールされていなくてもExcelファイルを作成することができます。これは、スタンドアロンツールであるScheduleCanvasにとって、とてもありがたい特徴でした。

NuGetからインストールできるのでVisual Studioを使用しているならば、インストールも簡単にできます。 

ClosedXMLを用いてExcelファイルを作成するには以下のようなコードを書きます。

//新規ワークブックを作成
var workbook = new XLWorkbook();

//新規ワークシート「Sample Sheet」を作成し、先ほど作成したワークブックに追加
var worksheet = workbook.Worksheets.Add("Sample Sheet");

//作成したワークブックを"HelloWorld.xlsx"として別名で保存
workbook.SaveAs("HelloWorld.xlsx");

このコードでは、初めに新規ワークブックを作成し、そのワークブックに新たなワークシート「Sample Sheet」シートを作成、ワークブックを「HelloWorld.xlsx」として保存しています。

作成されたHelloWorld.xlsx

では次に、ワークシートに何か値を入れてみましょう。

//新規ワークブックを作成
var workbook = new XLWorkbook();

//新規ワークシート「Sample Sheet」を作成し、先ほど作成したワークブックに追加
var worksheet = workbook.Worksheets.Add("Sample Sheet");

//「Sample Sheet」シートのA1セルの内容に"Hello World!"を記入
worksheet.Cell("A1").Value = "Hello World!";

//作成したワークブックを"HelloWorld.xlsx"として別名で保存
workbook.SaveAs("HelloWorld.xlsx");

このコードでは、初めに新規ワークブックを作成し、そのワークブックに新たなワークシート「Sample Sheet」シートを作成、「Sample Sheet」シートのセルA1に「Hello World!」を記入して、ワークブックを「HelloWorld.xlsx」として保存しています。

A1セルにHello World!を入力した出力結果

//「Sample Sheet」シートのA1セルの内容に"Hello World!"を記入
worksheet.Cell("A1").Value = "Hello World!";

この部分がセルに値をセットする部分です。

セルの指定方法は、複数あります。
以下のコードはいずれもA1セルを指定しています。

//セルのアドレスの文字列で指定
worksheet.Cell("A1").Value = "Hello World!";

//セルの行と列の数字で指定　※最小は1、0だとエラーになる
worksheet.Cell(1, 1).Value = "Hello World!";

//セルの行は数字、列は文字列で指定
worksheet.Cell(1, "A").Value = "Hello World!";

実際にプログラムを組む際は一番よく使うのは、行と列ともに数字で指定する方法になるかと思います。

セルには値だけでなく、背景色、フォント、文字列の配置位置、数値の書式、枠線のタイプ、枠線の色なども設定できます。

//「Sample Sheet」シートのA1セルを変数に入れる
var cell = worksheet.Cell("A1");
 

//セルの背景色(R=255,G=0,B=0)に設定
cell.Style.Fill.BackgroundColor = XLColor.FromArgb(255,0,0);

//セルの文字のフォントをHGS創英角ﾎﾟｯﾌﾟ体に設定
cell.Style.Font.FontName = "HGS創英角ﾎﾟｯﾌﾟ体";

//セルの文字の水平方向の配置位置を中央に設定
cell.Style.Alignment.Horizontal = XLAlignmentHorizontalValues.Center;

//セルの文字の垂直方向の配置位置を中央に設定
cell.Style.Alignment.Vertical = XLAlignmentVerticalValues.Center;

//セルの数値の書式を"yyyy/mm"に設定　任意のフォーマットに指定可能
cell.Style.DateFormat.Format = "yyyy/mm";

//セルの周りの枠線を点線に設定
cell.Style.Border.OutsideBorder = XLBorderStyleValues.MediumDashDotDot;

//セルの周りの枠線の色を黒色に設定
cell.Style.Border.OutsideBorderColor = XLColor.Black;

//文字の配置位置をわかりやすくするためにセルの大きさを変更
worksheet.Column(1).Width = 50;
worksheet.Row(1).Height = 50;

セルにいろいろ設定した出力結果

手作業でExcelを編集するときと同じように、セル単体ではなく範囲を対象に設定することもできます。

//「Sample Sheet」シートのA1セルからC5セルの範囲を変数に入れる
//範囲の指定は左上のセルと右下のセルを指定する
var range = worksheet.Range(worksheet.Cell("A1"), worksheet.Cell("C5"));
 
//範囲内の全てのセルの背景色を青色に設定
range.Style.Fill.BackgroundColor = XLColor.Blue;

複数のセルを範囲指定して背景色を設定した出力結果

このほかにも、

複数のセルを一つのセルにする「セルの結合」

//結合したいセル範囲を指定して...
var mergerange = worksheet.Range(worksheet.Cell("B2"), worksheet.Cell("D4"));

//Merge()で範囲のセルを結合する
mergerange.Merge();

//値を設定してみる
mergerange.Value = "結合セル";
//文字の配置位置を中央に設定
mergerange.Style.Alignment.Horizontal = XLAlignmentHorizontalValues.Center;
mergerange.Style.Alignment.Vertical = XLAlignmentVerticalValues.Center;

セルの結合を設定した出力結果

ワークシート上のデータを抽出して表示できるようにする「オートフィルタの設定」

//例示のために

セルにデータを入力

worksheet.Cell("B2").Value = "名前";
worksheet.Cell("C2").Value = "味";
worksheet.Cell("D2").Value = "知名度";
worksheet.Cell("E2").Value = "値段";
 
worksheet.Cell("B3").Value = "リンゴ";
worksheet.Cell("C3").Value = "甘い";
worksheet.Cell("D3").Value = "一般的";
worksheet.Cell("E3").Value = "500";

worksheet.Cell("B4").Value = "みかん";
worksheet.Cell("C4").Value = "甘い";
worksheet.Cell("D4").Value = "一般的";
worksheet.Cell("E4").Value = "300";
 
worksheet.Cell("B5").Value = "チリドッグ";
worksheet.Cell("C5").Value = "辛い";
worksheet.Cell("D5").Value = "低い";
worksheet.Cell("E5").Value = "700";

//オートフィルタを設定したいセル範囲を指定して...
var filterrange = worksheet.Range(worksheet.Cell("B2"), worksheet.Cell("E5"));

//SetAutoFilter()でオートフィルタを設定する
filterrange.SetAutoFilter();

//見やすいように範囲内のセルに枠線を設定
filterrange.Style.Border.OutsideBorder = XLBorderStyleValues.Thin;
filterrange.Style.Border.InsideBorder = XLBorderStyleValues.Thin;
//見やすいようにセルの幅を設定
worksheet.ColumnWidth = 20;

オートフィルタを設定した出力結果

特定の行や列を固定表示したままシートをスクロールできるようにする「ウィンドウ枠の固定」

//固定するワークシートの1～２行目とA列B列をピンク色に設定
worksheet.Column(1).Style.Fill.BackgroundColor = XLColor.Pink;
worksheet.Column(2).Style.Fill.BackgroundColor = XLColor.Pink;
worksheet.Row(1).Style.Fill.BackgroundColor = XLColor.Pink;
worksheet.Row(2).Style.Fill.BackgroundColor = XLColor.Pink;

//行と列の数字を指定して「ウィンドウ枠の固定」を行う
//Freeze(2, 2)だとC3セルを指定して「ウィンドウ枠の固定」したときと同じ状態になる
worksheet.SheetView.Freeze(2, 2);

//セルの指定では0を指定するとエラーになったが、この処理は0が指定できる
//0を指定すると、行方向だけ、または、列方向だけにウィンドウ枠の固定ができる
worksheet.SheetView.Freeze(2, 0);

//行方向だけ、または、列方向だけウィンドウ枠の固定をするための別メソッドもある
worksheet.SheetView.FreezeColumns(2);
worksheet.SheetView.FreezeRows(2);

ウィンドウ枠の固定を設定した出力結果

上記のとおり、Excel上で設定できるものは基本的にコード上で設定することができます。

ScheduleCanvasでは、これらを使ってツール上で表示している見た目と同じようなExcelファイルの出力を実現しています。

以下の2つの図はScheduleCanvas上での見た目と出力したExcelの見た目をそれぞれキャプチャしたものです。

ScheduleCanvasの見た目

ScheduleCanvasから出力したExcelファイルの見た目

なかなかの再現度ではないでしょうか。

ここまで見た目にこだわるとコードも結構複雑になりますが、データを出力する際に見出しの行に色を付けたり、オートフィルタを設定するだけならば簡単に実装できます。

皆さんも試してみてはいかがでしょうか。

ひとまずはツールの実装の一例としてExcelファイルとの連携をご紹介しましたが、ユーザーの要件に応えるために一つのツールには他にも多くの技術が盛り込まれて実装されています。

このようなゲームを作るための周辺ツールやワークフロー、ゲームエンジンのノウハウが豊富で、情報共有が盛んな職場で働いてみたいという方はぜひ、以下をチェックしてみてください。

www.sega.co.jp

(C) SEGA