kugi's notebook

やったこと、思ったことなどつらつらと書きます

ハッカソンを主催してみた話

はじめに

卒業するまでにやりたかったことの一つであるハッカソンの主催をCammelで行ったので今回はその話をします。

f:id:kugi_masa:20200926214331p:plain
CammelデザイナーのDaigoくん作ハッカソンロゴ

HU hackathon オンラインハッカソン 2020 - connpass

そもそもなぜ主催??

私の初参加ハッカソンは昨年6月頃です。 connpassを使うようになって偶然見つけた「広島エンジニアハッカソン」が私の初ハッカソンでした。

広島エンジニアハッカソン Vol.1 - connpass

ちょうどCammelでの開発が始まりアウトプットを意識するようになった時期で、

「自分では何ができるかわからないけど挑戦してみよう」

という気持ちで参加したのを覚えています。

実際参加してみて、最初のアイディア出し以降は技術的に全く貢献できず、同じチームの現役エンジニアの方がすごくて圧倒されっぱなしでした。

そして、「何もできなかったな〜」という気持ちから「次はもっと頑張りたい」と思いました。

それからこれまでいろんなハッカソンに参加してきました。

賞を受賞できたり、決勝まで進出できたときもあれば、思うようにいかず悔しい思いをしたこともあります。 ただ、どんなハッカソンでもその期間はアドレナリン全開です。そして、成果発表やデモでいろんなチームのや人のプロダクト、作品に触れてとてつもなく刺激を受けることができます。

このようにハッカソンにどっぷりつかれたのも「広島エンジニアハッカソン」のFIRST STEPがあったからだと思います。

さて、前振りが長くなってしまいましたが、今度は私自身がハッカソンを主催、運営する側として「アウトプットする機会」「チームで何かを開発する経験」FIRST STEPとなるようなイベントを企画したいと思ったのがきっかけです。

開催にあたって

企画したい!という思いから開催そして1人で運営までなんとか走りきることができましたが、 私1人の力では開催はおろか、企画倒れで終わってしまったと思います。

結果的にコロナもありオンラインにはなってしまいましたが、当初は学内ハッカソンにしたいと思っていました。

そのため、学内のコンピュータサークルHiCoderさんとチームのCammelには事前に声をかけていました。最終的にconnpassでも募集ページを用意し広島内外合わせて9名の方が参加してくださいました。ありがとうございます!!!

f:id:kugi_masa:20200927002135p:plain
スライドより抜粋

また、大学起業部の代表をしている後輩に審査員をお願いして、審査員賞として後日開催されるビジコンの参加権をいただけることになりました。

オーディエンス賞としては就活でもお世話になった株式会社ジースタイラス様より受賞チームメンバーそれぞれに好きな技術書1冊を協賛いただきました。

みなさん本当にありがとうございました。

これまで多くのオンラインイベントでDiscordを活用していたので、今回もDiscordを使うことにしました。

事前に以下のチャンネルを用意してチームビルディング会、ハッカソン当日がスムーズに進むように準備を進めました。

  • 「はじめに」チャンネル : Discordの軽い使い方や今回のハッカソンサーバーの各チャンネルの使い方を説明
  • 「タイムスケジュール」チャンネル:チームビルディング会、ハッカソン当日の流れ
  • 「大部屋」チャンネル:メインホールのようなもの
  • 「[id]チーム」チャンネル:各チームのチャンネル

f:id:kugi_masa:20200927030428p:plain
「はじめに」チャンネル

f:id:kugi_masa:20200927030751p:plain
「タイムスケジュール」チャンネル

チームビルディング会

さて、「チームビルディング会」という言葉が出てきましたが、いきなりはじめましてからの開発は辛いなと思っていたので

(特に初ハッカソンだとさらに辛い...)

アイディア出しも兼ねてチームビルディング会を開催することにしました。

オンラインでのチームビルディングをスムーズに進めるにはどうすればいいかを考えたときに、

ちょうどコロナによる自粛期間が始まった5月ごろから数回参加をしていた「分散アジャイルチームについて考える会」でのkyon_mmさんのファシリが頭に浮かびました。

distributed-agile-team.connpass.com

このイベントはDiscordとZoomそしてMuralを使ってLTやOST(オープンスペーステクノロジー)を行うイベントだったのですが、

(OSTについてはTAKAKING22のスライドをご参照ください...!!)

はじめにMuralのハンズオンとしてkyonさんが「お立ち台」を用意されていたのを思い出しました。 ハンズオンからの流れがそのままMuralを使うアクティビティにスムーズにつながっていたので、 私も同じように「お立ち台」を用意することにしました。

Cammelのミーティングでは主にMiroを使っていたので今回のチームビルディング会でもMiroを使うことにしました。

まずSTEP1として、付箋を出してテキストを書くことに慣れてもらい

STEP2で「お立ち台」を活用して、自己紹介をしました。

実際に話す人が「お立ち台」に立って(付箋を置いて)自己紹介を行い、他の人がその横に並んで(付箋を並べて)待つというようにして進めました。

「お立ち台」はオンラインでも付箋の場所並ぶという行為で存在を示せるという点でとても優れものだと改めて思いました。 また、付箋の動きや絵文字でリアクションを付けてワイワイしているうちに、Discordがミュートでもだんだん盛り上がっていくのがわかりました。

f:id:kugi_masa:20200927025000p:plain
Miroのハンズオン

そして、アイディア出し、チーム発表、チームごとにアイディアを具体化というように進めていきました。

ここでの振り返りとして以下をあげます。

  • 良かった点
    • 最悪アイディアが出なかったときのことを考えて予めCammelのミーティングで案を何個か考えておいた
    • (結局使われなかったけどそれで良し)
    • チームビルディング会からの1週間の使い方について参加者に聞いてみた
  • 悪かった点
    • 「キーワードからブレスト」をした後「実際作るもの」を考えましょうという流れにしてしまった
    • その間に「出たアイディアから課題について考えてみよう!」があった方が良かった
    • テーマが「広島大学」... 広島外からの参加者を募っていたにもかかわらず、明らかにアウェーになるようなテーマにしてしまった...

テーマに関しては、広島大学生を必ずチームに含めるようにしてはいたものの、このように差が出るテーマにはするべきではなかったと反省しました。

運よく参加していただいた広島外のお二人は積極的に参加してくださったので本当に救われました。

土日でチームビルディング会、ハッカソンとせずにあえて1週間あけたのは少しでも開発までにチームで交流する時間を増やすためと考えていましたが、その間で開発を進めていいかについては明確に決めてはいませんでした。

なので実際に参加者の意見をそのまま反映することにしました。

f:id:kugi_masa:20200927033624p:plain
実際に聞いてみたところ...

過半数が開発は1Dayでとのことだったので、ルールをはっきりさせました。

f:id:kugi_masa:20200927033846p:plain
当日までのルール

実際にハンズオンまでするチームもいたので1週間あけたのはやはり正解でした。

ハッカソン当日

ハッカソン当日は各チームごとに時間を取ってそれぞれのボイスチャンネルにいようかと思っていたんですが、 チームビルディング会と当日までの各チームでのコミュニケーションのおかげか、 どのチームもおおかたスムーズに開発が進んでいました。

そこに甘んじてしまったところもあったので、

反省としては、「初めてのハッカソンを意識してもう少し積極的に各チームのサポートをしても良かったなと思いました。

各チームの成果物

広福 「西条交通確認LINEBot」 github.com

カラス 「食堂メニュー決定アプリ」 github.com

ちゃにまつ太郎 「ひろだいさんぽ」 github.com

広島戦隊和久レンジャーズ「Kinder」 github.com

どのチームも1Dayで作ったとは思えないできのものばかりでした!!!

割と手が空いてしまった運営は何をしていたかというと...

github.com

結果

成果発表後に投票、審査にうつり審査員賞オーディエンス賞が決まりました!!!

f:id:kugi_masa:20200927035303p:plain
オーディエンス賞

f:id:kugi_masa:20200927035324p:plain
審査員賞

オーディエンス賞の「ちゃにまつ太郎」のみなさん、審査員賞の「広島戦隊和久レンジャーズ」のみなさんおめでとうございます!!

(表彰状はもちろんDaigoさん...!!ありがとう!!!)

まとめ

ハッカソンを主催、運営してみました。 オンラインそして初めての試みということもあり、大変だと感じることも多かったですが、 学生の今だからこそできることをやれてよかったです!

また、私の「ハッカソンを開催したい」というワガママを聞いて協力してくれたCammelのメンバー、参加者のみなさん、審査協力してくださった起業部のみなさん、協賛企業の株式会社ジースタイラス様、改めて本当にありがとうございました!!

次回があるかは今のとこ未定ですが、前向きに検討したいと思っています!

やったこと

わかったこと

  • 事前チームビルディングからの流れはとても良い
  • 何事も FIRST STEP は大事

次やりたいこと

  • 卒業までに自作キーボード作る
  • 卒業までに3Dプリントする

unity1week online共有会 #2-B📘 視聴メモ

はじめに

またまた前回の記事からだいぶ時間が空いてしまいました。

今回はunity1week online共有会 #2-B📘の視聴中に書き残したメモをここでまとめたいと思います。

f:id:kugi_masa:20200920014209p:plain

https://www.youtube.com/watch?v=SS_2VbdzSL0&feature=youtu.be

unity1week共有会とは

青木ととさん(@lycoris102)が開催されているunity1week参加者による共有イベントで、 1週間の流れ、ゲーム作りへのこだわり、アイディアの出し方、といったお話が開発者本人から聞ける素晴らしいイベントです。

実は私も第一回に参加をしていて「作りたいものを作りきる」という題でお話をさせていただきました。

speakerdeck.com

youtu.be

登壇される方が「ふえた」ということで今回は #2-A📕 #2-B📘 と2週に分けての開催でした。

今回#2-Bはリアルタイムで視聴ができたのでメモを取りながら視聴していました。

(#2-Aも視聴はしていたんですが、別の用事と被ってしまい途中からの参加だったので視聴メモは残せていませんでした...)

視聴メモ

発表を聞いて得た学びや感じたことは人によって違うと思うので、これはあくまで私が感じたこととして捉えていただけると幸いです。 また、発表全てを要約したものでないことはご了承ください。

SilCilさん 「技能向上のためのunity1week」

専門用語を「知っている」 = 「検索できる」

ある技術や知見に対して「詳しく」なくても、「知って」いれば「検索する」ことはできる。

もちろん習得するためには

"調べて" => "学んで" => "習得する"

という流れだとは思いますが、まず何よりもそのことについて「知る」がないといけません。 そのためにはこういった勉強会に出て情報を取りに行くことが大事だなと改めて痛感しました。

「100日後〇〇できる」= 99日間は「失敗」、「毎日30分〇〇する」の方が安全

捉え方にもよるとは思いますが、確かにロングスパンでのゴールでなく、短い時間での(毎日30分やり切ったといった)成功体験を感じながら何かを学ぶことでモチベーションにもつながるなと感じました。

SilCilさんはBlenderの進捗をTwitterに投稿されていて、私も投稿を密かに追っていました。 日を追うごとにどんどんリアルさを追求されているのがわかって凄かったです! (PCの光がしっかりキーボードに照り返されているのとか凄かった...)

発表時のバーチャル背景もレンダリングした画像になっていて、言われるまで気づかないほどのリアルさでした!

NightS/ナイトレイさん 「斯くて世界は創られる」

見た目から世界を創る - 記号化と対比

キャラを色とモデルで視覚的に対比させ自然と敵だと認識できるように創られていてすごいなー!と感じました。

音楽から世界を創る - インタラクティブミュージック

ストーリーや演出に合うように音を出すタイミングや曲調をコンポーザーである九藤 周(くどう あまね)さんとしっかりすり合わせをして創られていました。

何故ゲームを創るのか? 世界を創るため

ゲームを「作る(Make)」ではなく「創る(Create)」というNightSさんのクリエイターとしての熱い気持ちが伝わってくる締めの言葉でした。

今回もNightSさんの周さん愛を感じる発表でした。 発表とBGMが同期していたのが最高にエモかったです!!!

まっともぉんさん 「大切な技術検証 ~本当にそれ動く?~」「大切なモチベーション〜本当にそれ続く?〜」

発表のテーマを前半後半で2つに分けて発表されていました。 すごい!!

モチベーションを保ちながら開発を進めるには

  • タスクの可視化してしっかり見積もる
  • ブレない面白さを意識する
  • SNSに進捗を投稿してフィードバックを得る

ドッグフーディングで「面白さの軸」を早めに固めて、他の人からのフィードバックを得ることでその「面白さの軸」がちゃんと立っているかを確認する。 ハッカソンでは特に時間がないので早めに軸を固めることで手戻りも少なくなりますね。

(まっともぉさんのイントネーションは🍿と同じらしいです笑)

zizoさん 「7日間でこうなりました」

ゲームを作られたゲームの流れを紹介されていました。

ゲームの方向性をなるべく早く確認する

これはまっともぉんさんのお話でもありましたが、「本当に面白いの?」という方向性をやはり早めに固めることが重要だなと感じました。

やはりコアな部分での手戻りはツラいですよね...。

「2割の時間で8割の全体像を確認する」が目安とのことでした。

「タイトル画面(仮) 仮なのよ」がツボでした笑

ベコタイジさん 「なんとなくチームで参加したら1weekデスマになった話」

ドット絵調のUnityで作られた発表スライドで凄かったです! 冒頭はチームの紹介で、みなさん「各分野のスペシャリスト勢揃い」でした。

そんなスペシャリスト集団のチームがデスマに陥ってしまった話をされていました。

原因として以下をあげていました。

工数の見積もりの甘さと進捗管理を怠ったため。作業能力に対して制作物の難易度が高かった。仕様に関してその場しのぎで変更しながら作ったため。

確かにハッカソンだと見積もりが難しいと常々感じます。 作っているときは楽しくて、あれもこれもと詰め込んでしまいたくなって後半「えいやー!」とオールでやってしまう経験を何度もしています...

作りたいものを作りきることはもちろん大事で今後もそのモチベーションで作っていきたい気持ちは変わりませんが、 一歩引いて「やらないことリスト」を作る余裕を持って開発することも大事だなと学びました。

idealさん 「Unityインターハイ入賞クリエイターが語る!モチベを1週間維持するコツ」

10分タイマーを使ってみる

ポモドーロ・テクニックのように、10分間全力で集中してタスクをこなす、休憩する、10分間全力で集中してタスクをこなすを繰り返す。 ハッカソンという特殊な期間でモチベを維持して生産性をあげるためにはこのような取り組みを取り入れるのも一つの手だなと感じました。

わけんさん 「自分的Unity1Weekでの企画の考え方」

アイディアをたくさん出したしとしてもその中で本当にいい案を見つけるのは難しい。 そこで指標にすると良いわけんさん流の「10つのリスト」のお話でした。

大量の案から良い企画を引っ張り出す10つのリスト

  • 実現可能性 (自分のスキルと照らし合わせて)
  • 仕様に曖昧さはないか(核はしっかりしているか)
  • 革新的か(u1wだったら「斬新さ」につながる)
  • 既存ゲームの劣化版になっていないか(ただの二番煎じは避けたい)
  • 「面白そう」を提供できるか(スムーズに面白さが伝わるか)
  • 「面白い」を提供できるか(リスク・リターン、メカニクスの衝突はないか)
  • 「面白かった」を提供できるか(やりごたえ、バズり)
  • ターゲットユーザーにマッチするか(まずはペルソナ定義しっかりする)
  • マネタイズできるか(資金的にOK?広告など)
  • 直感的に良さそうか(自分の感性を信じる)
"面白そう" => "面白い" => "面白かった"

ユーザ感情の流れを「面白そう」から「面白かった」まで持っていくには どういう企画でないといけないか抑えられていてとても勉強になりました!

さちぎょϵ( 'Θ' )϶さん 「1weekでかわいいアメーバを?できらぁ!〜デザイン奮闘記〜」

スライドの雰囲気がめっちゃくちゃ可愛かったです✨ 今回はデザイナー担当のさちぎょϵ( 'Θ' )϶さんがデザイン側とエンジニア側をまとめてお話をされていました。

UI = ロジック

色、大きさ、位置には理由がある。(言語化できる)

発表を聞いているとどれも本当に理にかなっていてめちゃくちゃ納得できました。

「色を考える」:色の"対比"で情報の優先度を伝える

ゲームの中で優先度の高い情報にはコントラストが強い色を使う。 一旦ゲームシーンをモノクロにして確認している様子がスライドに載っていて「天才か!?」と思いました。

「位置を考える」:プレイヤーの行動に合わせて自然な位置に配置する。

キーボードとUI配置の整合性をとることで、プレイヤーが違和感なく自然に遊べる。

UI/UXは本当に奥が深いなと感じました。

うにうにちゃんさん 「レトロ風ゲーム、作ってみませんか?」

発表がめちゃくちゃ素晴らしかったです! 某ネズミーランドのスタッフさながらの喋りで聞いていてワクワクするプレゼンでした。

レトロなグラフィックのゲーム

  • ドット絵がにじまない・劣化しない => スプライトの設定でバイリニアフィルタはかけない、圧縮もかけない
  • ドットが潰れない => Pixel Perfect Cameraを使う
  • 1スプライトあたりの色数が限られている => Asepriteを使え!

Asepriteはたったのうま○棒約200本分らしいです!!!

先日ギルドの方で拝見したうま○棒のドット絵がここにつながるのか!!と思いました笑

さいさん 「『スライム牧場』でそこそこ頑張ったゲームデザインと設計」

ゲームデザインについてのお話でした。

1weekでの自分のルール

さいさんの場合だと一番遊んでもらいたい一般ユーザー(多くはスマホユーザ)のことを考えて「左クリックのみでできるゲーム」といったルールを決めているそうです。 遊んでもらいたいターゲットはどこなのかと、そのターゲットユーザに遊んでもらうためにはどういったゲームデザインにするべきか。 とても勉強になりました。

ゲームの言語化

さちぎょϵ( 'Θ' )϶さんの発表の「UIを言語化する」と同じように、ゲームそのもの自体を言語化することで面白さの確認にもつながるんだなと感じました。

まとめ

今回はunity1week online共有会 #2-B📘 の視聴メモを整理してみました。 発表者のみなさんお疲れ様でした!そして何よりこの会を開催されている青木ととさんありがとうございます!! 今回も本当に学びの多い会でした。

(#2-Aの発表も余裕できたらまとめたいと思います...!!!できないかもしれない...そのときはごめんなさい...)

やったこと

  • unity1week online共有会 #2-B📘に参加した

    わかったこと

  • UIやゲームの面白さを「言語化」することはダイジ
  • ドッグフーディング + 他の人からのフィードバックで早めに「面白さ」のコアを固める

    次やりたいこと

  • 次回のu1wでは今回得た知見を少しでもいかす(特に操作性やゲームのわかりやすさの部分)
  • 自分の振り返り記事も書きたい(書かないと...)

Mitsuba 2 導入(macOS Catalina)

はじめに

以前macOSでのMitsuba Renderer導入についてまとめました。

kugi-masa.hatenablog.com

今回は新しくなったMistuba 2の導入についてです。

♧Mitsuba 2♧

リリースノートを見ると2020年3月3日にMitsuba 2.0.0がリリースされたようです。

3月3日→♧月♧日

狙った日付だったのでしょうか...?👀

SIGGRAPH Asia 2019で論文としても発表されています。

rgl.epfl.ch

Merlin Nimier-David, Delio Vicini, Tizian Zeltner, and Wenzel Jakob. 2019. Mitsuba 2: A Retargetable Forward and Inverse Renderer. In Transactions on Graphics (Proceedings of SIGGRAPH Asia) 38(6).

今回からかなり見やすいドキュメントも用意されているので、もしかしたら導入ブログは不要かもしれません💦

が、自分も記録として残しておきたいので早速やっていきましょう。

mitsuba2.readthedocs.io

GitHubからfork

ドキュメントでは本家のmitsuba-renderer/mitsuba2リポジトリからcloneするような手順になっていますが、私は本家に影響を及ぼしたくないのでfork🍴します。

ではforkしたリポジトリをローカルに持ってきたいと思います。 (私のようにforkする場合は[yourname]を変更してください)

$ git clone --recursive https://github.com/[yourname]/mitsuba2.git

ただ、forkしてしまうと本家にコミットが追加されてもfork先には変更がないので、ローカルに適宜本家からpullしてfork先に反映するのが良いようです。

以下で本家の情報を取ってきましょう。

$(master) git remote add upstream https://github.com/mitsuba-renderer/mitsuba2
$(master) git fetch upstream
$(master) git merge upstream/master

しかし、このままでは最新版に追従できていません。 Mitsuba 2ではgitのSubmodulesという機能を使っています。

--recursiveオブションをつけることで他のプロジェクトの連携までを管理してくれるためセットアップが楽になるとのこと

git-scm.com

Submodulesをつかっているため通常のpullコマンドのみではダメみたいです。

ドキュメントにしたがって以下のpullallコマンドを追加しましょう

$(master) git config --global alias.pullall '!f(){ git pull "$@" && git submodule update --init --recursive; }; f'
$(master) git pullall

pullallコマンドを実行することでforkしたリモートリポジトリのmasterブランチも

This branch is even with mitsuba-renderer:master.

になっているはずです。 (もしかしたらpushが必要だったかも...)

バリアント(Choosing Variants)

Mitsuba2ではビルドする前にRGB、スペクトル、偏光レンダリングなど、どのようなレンダラーとしてビルドするかを指定する必要があるそうです。

その種類はなんと36通り!! 以下のようにRGB、スペクトルなどを選んで組み合わせることができるようです。

  • Computational backend
    • scalar
    • packet
    • gpu
    • gpu_autodiff
  • Color representation
    • mono
    • rgb
    • spectral
  • Polarization
    • polarized
  • Percision
    • double

まずは以下のコマンドで設定ファイルをmistubaのルートディレクトリにコピーしてきましょう。

$ pwd
<your mistuba root directory>
$ cp resources/mitsuba.conf.template mistuba.conf

コピーしたmistuba.confenableのところでバリアントが指定されています。

"enabled": [
    # The "scalar_rgb" variant *must* be included at the moment.
    "scalar_rgb",
    "scalar_spectral"
],

コンパイル

macOS では以下がインストールされている必要があります。

また、Pythonについてもversion 3.6以上が必要です。 macOSのデフォルトのPythonversion 2.7.16でした。(2020/07/28時点)

$ which python
/usr/bin/python
$ python --version
Python 2.7.16

このままではコンパイルが通らないので、Python3をデフォルトにします。

以下の記事がとても参考になりました!!

opensource.com

pyenvを使ってPython3をデフォルトにします。今回はmistuba2のドキュメントに合わせてversion 3.7.3をインストールします。

$ brew install pyenv
$ pyenv install 3.7.3
$ pyenv global 3.7.3
$ pyenv version
3.7.3 (set by /[Your Directory]/.pyenv/version)

ここではまだ、macOSデフォルトのPythonです。

$ which python
/usr/bin/python

なのでパスを追加しましょう。macOS Catalinaからデフォルトのシェルはzshになったらしいので以下を.zshrcに追加します。 (詳細はコチラ)

if command -v pyenv 1>/dev/null 2>&1; then
  eval "$(pyenv init -)"
fi

新しいターミナルを立ち上げて、最後にもう一度確認をしてみましょう!!

$ which python
/[Your Directory]/.pyenv/shims/python
$ python --version
Python 3.7.3

ヤッター!!!🐍 🐍 🐍

CmakeやNinjaについては、それぞれhomebrewでインストールしました。

$ brew install cmake
$ brew install ninja
(--- If you haven't installed the xcode command line tool ---)
$ xcode-select --install

では、ビルド用のディレクトリを作成してコンパイルしましょう。 (Python3をデフォルトにする前に以下を実行してしまった場合は一度buildディレクトリを削除しましょう)

mkdir build
cd build
cmake -GNinja ..
ninja

mitsuba2 を動かしてみる♧

mitsuba2のルートディレクトリにあるsetpath.shを実行することで、mitsubaコマンドが使用できるようになります。

$ pwd
<your mistuba root directory>
$ source setpath.sh
$ mitsuba scene.xml

mistubaレンダラーはシーンファイルにxmlファイルを使用しています。

コチラのサンプルを参考に金色のドラゴンをレンダリングしてみました。 Stanford Dragon reference

http://graphics.stanford.edu/data/3Dscanrep/

f:id:kugi_masa:20200728170022p:plain
金のドラゴン

まとめ

今回はmacOSにおけるMitsuba2の導入をしてみました。

かなり長くなってしまいましたね...

冒頭にもあるようにドキュメントが整っているのでそちらも是非!!

やったこと

  • mistuba2をfork
  • Python3をデフォルトに設定
  • mitsuba2をコンパイルして動かしてみた

わかったこと

  • 導入は前のバージョンよりも遥かに楽
  • ドキュメントが素晴らしい

次やりたいこと

  • いろんなシーンでレンダリングしてみたい
  • 実際に中身をいじってみる

Flutter build for iOS ~SDKは更新すべし~

はじめに

Cammelでは4月からFlutterを用いた新プロダクトを開発しています。 クロスプラットフォームReactNativeFlutterとなったときに、どちらとも誰も経験がなかったのでルーレットで決まりました。

f:id:kugi_masa:20200715110246p:plain
Flutterに決まったぞ!🎉

コロナの影響でフルリモートです。

👨‍💻 ))))) (((((👨‍💻

私はMacユーザなので、今回はiOSビルドで困ったことについて書きます。

Simulatorと実機

Simulatorビルド後に実機ビルド(逆もしかり)をしようとすると、 以下のようなエラーが出ていました。

error: Building for iOS, but the linked and embedded framework 'App.framework' was built for iOS Simulator. 
(in target 'Runner' from project 'Runner')

先に結論からいいます。

SDKは更新しましょう!

以下のリンクにもあるように、v1.15.4以降のFlutterプロジェクトであれば、切り替えてビルドをしてもエラーは出なくなっています。 Xcode 11.4 Support - Flutter

何をしたか

ここからは、私が行った手順に沿って書いていきます。

前振り

私たちは開発スタート時Flutter SDKv1.12.13.hotfix+9を使っていました。

Flutter SDKのアップグレード

flutter upgrade

SDKを更新します。

Flutter is already up to date on channel stable
Flutter 1.17.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 8af6b2f038 (11 days ago) • 2020-06-30 12:53:55 -0700
Engine • revision ee76268252
Tools • Dart 2.8.4

現在の最新は

  • Flutter SDK : v1.17.5
  • Dart : 2.8.4

でした。

エラーの確認

上記の公式のドキュメントや以下のIssueにもあるように、v1.15.4以前のFlutter SDKではSimulatorと実機を切り替えたとき私と同じようにエラーが出ていたようです。 https://github.com/flutter/flutter/issues/50568

App.framework、Flutter.frameworkを一度取り除く

公式ドキュメントの手順にそって、App.frameworkFlutter.frameworkを削除します。

コマンドラインから

rm -rf ios/Flutter/App.framework
rm -rf ios/Flutter/Flutter.framework

コマンドラインから削除した場合はios/Runner.xcworkspaceでもReferenceが消えているか確認

Xcodeから

f:id:kugi_masa:20200715112703p:plain
Referenceは残さず完全に削除

ドキュメント通りの設定がされているか念のため確認

Simulatorにビルド

私はAndroid Studioを使っているので、Android Studioでビルドしました。

Embed Frameworksの確認

再度ios/Runner.xcworkspaceを開き以下のようにチェックをつける

f:id:kugi_masa:20200715113258p:plain
Runner.xcworkspace

実機にビルド->Simulatorにビルド-> and so on ...

この後、AndroidStudioに戻り、 iOS実機 -> Simulator -> iOS実機の順で3回ビルドしました。

これで実機からSimulator、Simulatorから実機での切り替えを確認できました。

まとめ

実は開発が始まって1ヶ月がたったぐらいでSDK更新の話は出ました。 (そのときはv1.17.1 or v1.12.13+hotfix.9でした)

しかし、そのときの最新(v1.17.1)ではなぜかiOSで画面遷移後にWidgetが一部表示されないという問題があり、最新SDKに合わせて実装し直すか、チームで統一した現在のバージョン(v1.12.13+hotfix.9)の実装のままでいくかで議論しました。

そのときは開発序盤だったので機能追加を優先して手戻りをせずにv1.12.13+hotfix.9で統一することとしました。

今回ビルドで問題が起きたことでSDKはあげることになりましたが、 v1.17.1時点でのチームの結論はそれはそれでよかったのかなと思います。

何はともあれ、スムーズにアップグレードに移行できてよかったです👍 (現在の実装ではv1.17.1時点でのWidgetのバグも解消されていた...!!)

github.com

やったこと

  • FlutterのSDKを更新してスムーズにiOSビルドできるようにした

わかったこと

  • SDKは積極的に更新していこう!!

次やりたいこと

  • そろそろ右上のDebugラベル取りたい

Scrum Fest Osaka 2020 参加レポート

はじめに

f:id:kugi_masa:20200627155523p:plain

Scrum Fest Osaka 2020に参加してきました!! www.scrumosaka.org

今回はオンライン開催ということもあり、地方スクラム/アジャイルコミュニティの100以上のセッションに参加することができるイベントでした。

今回はenPiTで大変お世話になったmiholoveさんにいただいたアトラクタさんのスポンサーチケットで参加しました。学生のうちにこんなBIGなイベントにできるのは本当にありがたいです...

miholoveさん、アトラクタさんありがとうございます✨

www.attractor.co.jp

ざっと書いているので個人的な主観や間違った認識もあるかもしれません...💦

miholoveさん基調講演「今あえてのスクラム

今回オンラインでの開催と聞き3、4秒程度「うっ」となったそうです。

でも、あえて「うっ」と思うことに取り組んでいこう! そういう機会にこそ成長がある。

確かに...!!

アジャイルマインドセットをもって非秩序な問題に取り組んでいく。

自分とは違う考え方、感性を持つ人とたくさん触れ合って、 ぶつかって、話し合って革命を起こす。

いい話...!!

Zoomの背景をスライドにした発表でした。 (ビールを想起させるスライドによるサブリミナル効果笑)

ご本人のスライドもこちらに載っています。

miholovesq.hatenablog.com

Agile Wars -アジャイルチームの夜明け-

kyon_mmさん、neno nenoさん、Gota Miyazakiさん、Takao Oyobeさんによるセッションでした。

内製開発チームの及部さん、受託開発チームのkyonさん

別々の環境でアジャイルに触れたお二人がどういった経緯でコミュニティに参加したのか、どのように出会ったのかというお話を聞くことができました。

対極かのように思える「内製」と「受託」のお二人もアジャイルコミュニティーでの関わりから見るともはやチームだった。 (CEDECやRSGTでは偶然にもリンクしたお話をされていたらしいです)

STAR WARS要素も満載で

MAY THE TEAM BE WITH YOU

がとても刺さりました。

Episode 9「Agile Wars -アジャイルチームの夜明け-」としてのセッションを受け、最後には「もし来年Episode 10を自分がするならなんというタイトルをつけるか」を参加者全員で考えました。

私は自分のチームであるCammelのことを思い、卒業で一足先にチームを離れたとしても心、気持ちとしてはチームの一員でありたいという思いを込めて、

「チームを離れてもチーム」

をあげました。

演奏付きの講演でもはや「映画」でした笑

アジャイル & プログラムマネジメント

せっかく広島にいるので広島テーブルのセッションに参加しました。

広島修道大学の佐藤達男先生によるセッションで、 プロジェクトマネジメントの歴史からアジャイルの考え方への移行やユーザー参加型のデザイン、ユーザーを巻き込んでいくプロジェクトマネジメントについて聞くことができました。

ユーザーを巻き込んだデザインのところで講義で学んだ 「誰のためのデザイン」を思い出しました。

www.amazon.co.jp

エッセンシャル モブプログラミング 〜実践者が考えるモブの価値,原則,プラクティス〜

モブチームの成長についての話でした。

モブチームのレベル感を図式化、そのレベルでのプラクティスについて聞けました。

ちょうどCammelでもオンラインモブプロで開発をしているので、参考にしたいです!!

上級モブ:One is all, All is one 「僕はチーム、チームは僕」

speakerdeck.com

エクストリームプログラミング」から読み解く現代ソフトウェア開発~「ストーリーポイント」と「自動テスト」の功罪~

アジャイルスクラムについてはこれまで学んできましたが、XPについてのお話を聞く機会はあまりなかったので参加しました。

XPでは工数の見積もりにおいてストーリポイントの使用は外され、時間での見積もりにシフトしているようです。

以下のような話も👀

poohsunny.hatenablog.com

ストーリーポイントやチェックリストといったツールを使用する際に、 なんでこのツール使ってるんだっけ??と忘れたころに再確認することが大事だよねという話もありました。

プランニングポーカーをするのは見積もりをしてコミットメントを確約するためではなく、チームのコミュニケーションを通じて合意をとるためにする

なるほど...

まとめ

今回このような貴重なイベントに参加できて本当によかったです。アトラクタさん、miholoveさんありがとうございました!!

DiscordとZoomを使ったイベントだったので気になるセッションに気軽に参加できるのはとてもよかったです。

学びの場が湯水のように溢れていたので整理して実践までとなるとかなり骨が折れそうですが、自分のペース、チームのペースで成長していきたいです。

オフラインのコミュニティイベントも参加できる日ができたら参加したいです。

運営のみなさんもありがとうございました!お疲れ様でした🎉

(余談:Discordの廊下チャンネルがよかった。オンラインなのにトイレもあった安心🚽。)

やったこと

  • Scrum Fest Osaka 2020でワイワイした

わかったこと

  • コミュニティイベントに参加するのは楽しい

次やりたいこと

  • 今回得た学びをCammelに共有、実践したい

レッドハッカソンオンライン2020振り返り

はじめに

レッドハッカソンオンライン2020に参加しました!

www.pref.hiroshima.lg.jp

レッドハッカソンとは

広島県HMCN(Hiroshima Motion Control Network)さんが主催するハッカソンイベントで、エンジニアだけでなくデザイナーやプランナーとしても参加ができます。

今回はコロナの影響でオンランでの開催でした。 今後ハッカソンはオンラインが主流になっていくのでしょうか...

オンラインでの開催ということもあり、広島以外からも参加する方が多く参加者約40人となかなかな規模のイベントでした。

アイディア出し

テーマは

「人々が安心して外出できて集うことができる日」が来たときに始めたいサービス・プロダクト

オンラインということで、以下のようにアイディア出しが行われました。

  • 参加者がGoogleSlideの自分のスライド(1枚)にアイディアを書いていく
  • 1分間のピッチ
  • 各自3票投票
  • 上位のアイディアを選出し作りたいプロダクトのチームに参加 or どうしても作りたい場合は新しくチームメンバーを募集

私は大学の先輩で今年新社会人のみやぎさんのピッチで「あ、これ作りたい!!」と思いました。 もともと投票では上位アイディアとして選出されませんでしたが、 私からみやぎさんを逆指名してチームに参加しました。

(あとあと、みやぎさんが自分の逆指名メッセージを見たのではなく、 みやぎさん自身もどうしても作りたくメンバーを募集したことがわかりました笑)

f:id:kugi_masa:20200603202627p:plain
みやぎさんのピッチ資料

顔バト

メンバー

みやぎさん(@daking1756)と去年広島エンジニアハッカソンで知り合ったたぞえくん(@jdkfx)と自分の3人でチームを組みました。 お互い顔馴染みではありましたが、開発をともにするのは初めてでした。

ツール

今回のハッカソンではプロダクトの中間発表の時間以外は開発スタイルやつかうコミュニケーションツールなどの指定はありませんでした。 Cammel🐫でも4月からフルリモートでの開発が始まり、コミュニケーションツールとしてDiscordを使っています。 (Cammelでの話は別の機会にでも書けたらと思います)

私たちのチームでもDiscordを活用することにしました。

モブプロ導入

今回のプロダクトはみやぎさんがおうちハッカソンで開発されたものを発展させて制作しました。 根幹の部分は既にみやぎさんが実装されていましたが、以下の点で問題が残っていたようです。

  • 通信をして写真を撮り結果を表示する際、「撮影」をした側でしか画像とその評価結果が表示されない。

まずは、システムの構成を理解することも踏まえ簡単なタスクをモブプロでこなし、開発環境になれてきたら分業する方針を提案しました。

モブプロ(モブプログラミング)とは、

実際に手を動かし実装をするドライバーとその後ろから実装のアドバイスや先回りをして調べたりバグを仕込まないようにドライバーを助ける複数人のナビゲーターに分かれて開発をする手法です。

(モブプロのワークショップに参加したときの内容をコチラに書いています。ご参照ください)

オンラインでも画面共有をすればモブプロはできます👍

「招待URLをクリップボードにコピーする」を最初のタスクにし、

  • ドライバー:たぞえくん
  • ナビゲーター:みやぎさん、kugi

で開発スタートしました。

Firebaseの導入でつまる

たぞえくんはバイトがあったので初日の中間発表以降はみやぎさんと二人で開発しました。

次のタスクは、「お題の情報を通信者間で共有する」です。

現状のシステムとして、撮影を押した側でお題の表情が決まりそのお題が共有されていませんでした。 hostingにFirebaseをつかっていたこと、またお互いFirebaseを使うことが多かったことから、 データベースにはCloud Storeを使うことにしました。

しかし...

なぜか以下のエラーが

The Cloud Firestore API is not enabled for the project

プロジェクトを最初から立て直してみたり、以下の記事を参考にCloud API Managerを確認しににっても有効にはなっている qiita.com

1度はデータを送信できてもまた同じエラーが出てしまいました。

この時点で深夜1時で進展がなくお互い疲弊していました。 とりあえず見栄えや体裁を整えることにしようとFirebaseは一晩寝かせることにしてUIやアニメーションに取り掛かりました。

最終日

初日?は3時に手を止め残ったタスクから逆算して7時に起きればなんとかなりそうとわかったので7時から再スタートすることにしました。

朝起きて試しに寝かせておいたFirestoreにデータをプッシュしてみると...

なんか動いた!!!🙌

昨日の心配はなんだったんだと言わんばかり普通に動いてくれたので安心しました。

Firebaseについて深堀できたので良しとします。

逆算して見積もりをしたおかげか、なんとか動く状態で割と余裕を持ってプレゼン準備をすることができました。

docs.google.com

各チーム本当にいろんなプロダクトを開発されていました! 特に自分が気に入ったのは最優秀賞とオーディエンス賞を獲得された「ガヤ人形」です。 プロダクトもスライドも発表も素晴らしかったです!!

チームリーダーのtantanさんが参加レポートを書かれているのでご参照ください。 tantan.work

私たちのチームは賞を受賞することはできませんでしたが、久しぶりのウェブ開発であったり、新しいチームでの開発はとても楽しかったです!

まさかの(時差)受賞

ようやく2日間のハッカソンが終わり、ちょうどスプラ2のフェスがやっていたので友人と遊んでいるとみやぎさんからDiscordで報告がありました。

f:id:kugi_masa:20200603213902p:plain
まさかの受賞!!

まさかの特別審査員翔を受賞することができました。 月刊アスキーの遠藤様ありがとうございました!!

まとめ

広島に来て5年目ですが、レッドハッカソンは初参戦でした。 オンラインのハッカソンということで運営の方々もかなり大変だったと思います。 運営のみなさま本当にありがとうございました!

オフラインでのハッカソンに越したことはありませんが、これからのハッカソンやイベントのあり方そのものが変わっていくのかもしれないなと感じました。

ハッカソンが終わったあとも実は開発を継続しています!

github.com

やったこと

  • レッドハッカソンオンライン2020に参加
  • 顔馴染みのメンバーで開発
  • 久しぶりのWeb開発
  • モブプロ導入

わかったこと

  • ハッカソンなのでどこで折り合いをつけるかがとても重要
  • タスクの逆算ダイジ
  • モブプロたのしー

次やりたいこと

  • CIの導入
  • 再戦ができない状態なので改善

unity1week「密」振り返り

はじめに

Unity1週間ゲームジャムお題「密」に参加しました! 今回は制作の1週間を振り返ろうと思います。

(少々長くなりますがお付き合いいただけると幸いです。)

f:id:kugi_masa:20200510184344p:plain
蜜蜂~Cluster Bee~

ゲームはこちらから遊べます!!

unityroom.com

Unity1週間ゲームジャム

1週間でUnityを使ってゲームを作り、次の1週間でお互いのゲームをプレイして評価し合いランキングが決まります。

(詳しくはUnity1週間ゲームジャムのサイトを参照)

投稿したゲームはunityroomから遊ぶことができます。

私にとっては今回が2回目の参加でした。

kugi's 1week

Day1

お題が初日の0:00に公開されました。

今回のお題は...

とりあえずアイディア出しをして寝ます。

f:id:kugi_masa:20200510170425j:plain
アイディア出し

蜜蜂の「蜜(Honey)」を「密(Cluster)」に文字って

「密蜂〜Cluster Bee〜」というタイトルで作ることにしました。

ハチを動かして仲間のハチを集め、目標の数が集まったら巣に帰るゲームです。 前回は2Dで参加したので今回は3Dで挑戦です!

初日はUnityプロジェクトを立ち上げて終わりました。

Day2

とりあえずフィールドをおかないとやる気が出ないのでアセットストアでアセットを探します。 GGJでも使用したローポリアセットを使うことにしました!

LowPoly Vegetation Season Pack Lite

2日目はまだデフォルトのCapsuleオブジェクトですが、フィールド上を動くようにしました。 あまりに広すぎると大変なので、動ける範囲を限定して出そうになったらポップアップでお知らせするようにしました。

Day3

ツイートでの宣言通りこの日はBlenderでモデルを作っていました。

f:id:kugi_masa:20200510172409p:plain
Blenderでモデル作成

マテリアルはある程度Blenderで作ってしまし、Unityにインポートした後に調整しました。

羽はTransparentに、花弁の色は青・ピンク・白にしました。

ちなみに、Day2までの領域外に出たときのポップアップは廃止して、半透明な壁を設置することにしました。

Day4

この日は他のハチをフィールドに生成しゲームの核となるCluster処理と時間制限を実装しました。

また、虫取り少年とハチの巣モデルも追加しました。

このときまでは少年が網を振ってハチの妨害をしてくるギミックを考えていました。 まさか、彼があんなことになるとは...。

Day5

ハチをさらに増やし、ある距離直進したら反対方向に振り返って進むようにしました。

しかし、ツイートからもわかるように、たくさんのハチを同時に動かしているのでかなり動きが遅くなってしまいました...。 どうしたものか...

Day6

残すところあと2日!! 処理おもおも問題もありますが、UIやルール画面、スコアを実装してある程度ゲームとして成り立つようにしました。 naichiさんのランキングパッケージも活用してランキング機能をつけました。 naichiさんありがとうございます!!!

とりあえず、処理が重い問題を解決したいのでLightingを調整することにしました。 UnityでLightingをいじるのは初めてでしたが、ドキュメントを読んだりチュートリアル動画を見て調整することができました。

最終的にMixed Lightingを使うことにしました。 CGの研究しててよかった...!!

参考にした動画

今回は1週間の制限があったので深追いはしませんでしたが、もう少し詳しく勉強したいと思います。

Day7

さて、ライティングも調整でき最終日はレベル調整をして提出しよう!と思い寝ようとしたところ、 彼の存在を思い出しました。

あ...虫取り少年のギミック作れてない...!!

もう1日しかないから置物ってことにしようかな...

でもせっかく網を振るアニメーションもつくったしなー...

まてよ、ハチ取りのゲームにしちゃえばよくない??

気付いたら夜が明けてました。

完成🎉

BeeHunterの方は急ピッチで作ったためランキングスコアのところでバグを作ってしまいましたが、 なんとか1週間で完成することができました!! (バグは修正済みです)

まとめ

2回目として参加したunity1weekでしたが、1回目より学びのある1週間でした。 また、前回よりも多くの方にプレイしていただきコメントをもらいました。 プレイしていただいたみなさん、ありがとうございました!!

実況していただいたPAFUさん、さまシロさんありがとうございます!!!

そして運営されてるnaichiさんもこの素晴らしいイベントを開催していただきありがとうございます!!! 他の方からのコメントや他の方のゲームをプレイすることでたくさん刺激をうけることができました。

何よりうれしかったのは高校の頃の同期がたくさん遊んでくれたことと、 そのうちの一人が全てのランキングで1位をとるまでプレイしてくれたことです。 まだまだ、不十分な点はたくさんありますが1週間で頑張って作ってよかったなと感じました。

次回のunity1weekもできたら参加したいと思います。

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

やったこと

  • unity1weekに2回目の参加
  • UnityでLightingをいじってみた

わかったこと

  • すごい人はほんとうにたくさんいる
  • ゲーム制作は楽しい!!!
  • 遊んでもらって反応を聞くともっと楽しい!!!

次やりたいこと

  • UnityのLightingの勉強