カテゴリー: テクノロジー

デザインの進捗とバージョン管理のススメ

 

こんにちは。デザイン担当のLQヒロシです。

 

WEB開発ではGitというアプリケーションを用いてプログラムファイルなどの更新状況管理をしているのですが、ファイルの更新状況を上書き時に業務ログも残しています。
この業務ログは、ひとつのプロジェクトを複数人で作業することの多いエンジニアさんにとって、他のメンバーがどのような進行状況なのか、どういったところで詰まっているのかを知る目安になっています。
プロジェクトの管理担当者も作業者を評価する指標として活用しているケースもあるかと思います。

 

もちろんデザイナーもコーディング作業であればGitを使ってファイルの進行状況を管理したり業務ログを残しますが、デザイン、特にビジュアル作成フェーズの業務ログを残すのってなかなか大変で、デザイナーの管理が難しいと言われる要因の一つかもしれません。

 

弊社ではデザインデータのバージョン管理アプリを利用して業務ログを残すようにしています。今回はその取り組みについて少しご紹介したいと思います。
Gitの仕組みを利用したものになるのでバージョン管理もできるのでおすすめです。

 

デザインデータの管理アプリについて

 

よく利用されているアプリケーションは以下の2種類になるようです。

 

Kactus(カクタス)

 

Githubベースのアプリで弊社ではこちらを利用しています。
基本的にはSource treeみたいな感じで使えます。詳しくは後ほどご紹介します。

【概要】

  • 標準のバージョン管理方法はGit。
  • 対応データ形式はSketchファイルを推奨。aiファイルやpsdファイルも利用できます。Sketchファイルの場合は、png画像を自動で書き出し差分が確認できます。

 

 

Abstract(アブストラクト)

 

デザインデータのバージョン管理アプリではこちらの方が新しく評価も高いです。

【概要】

  • Gitを介さずにできるのでスムーズな導入が可能(Git連携可能)。
  • UIが特に使いやすく、Sketchとの親和性が高い。
  • Kactusよりストレスフリーで使い勝手は良いのですが、Sketchファイルにしか対応していないのが残念。

Abstractの最大の利点はデータを保存するだけででてくるコミット入力ウィジットです。Sketch限定ですがすべての作業がSketch上で完結します。これが非常に便利!!Sketch主体で業務を行っているならこちらの方が良いと思います。

 

 

弊社ではUIデザイン以外にもロゴやイラスト作成などSketch以外で作成する業務もありますのでKactusを選びました。

 

そもそもなぜデザイン業務はログが残りにくいのか?

デザイン業務、ビジュアル作成のフェーズではIllustratorなどのソフトを使ってレイアウトを組み立てていきます。

 

手書きラフなどを先に作成する場合もありますが、基本的には画面上でオブジェクトを動かしながら組み立てていくことが多いです。
色の設定から少しづつ整っていくこともありますし、漫然とした状態からアイデアがカチッとはまって次の瞬間には出来上がることもあります。
このようなところが業務ログを残すことが難しいと感じるのではないでしょうか。

 

完璧なログを残すのではなく、保存のタイミングなどで簡単な状況説明をする、もっと砕いて言えばボヤキぐらいでもいいのでアプリを活用してちょっとしたメモを残す。「誰がどんな感じで業務にタッチしているのかがわかる」ことが重要なのではと思います。
Sketchであればpng画像として自動的に残すこともできるので尚良しですね!

 

それではKactusの利用方法について

 

KactusもAbstructも使い方は検索すれば割と見つかると思います。いくつかピックアップしましたので参照ください。

Kactus – 変更点が見て分かるデザイナーのためのバージョン管理ツール
デザインデータのバージョン管理ができるAbstractを試してみた

 

書かれている内容は概ね、新規にディレクトリを作成して対象リポジトリにするという感じですので、本記事ではKactusで実際のプロジェクトとの紐付方について少しご紹介できればと思います。

 

弊社の場合はプロジェクト毎にgithubリポジトリに紐付いているため(Web開発であれば大抵そうじゃないのかなと思います)、gitクローンするところから始めます。

 

左上メニューの File > Clone Repository を選択

こちらのダイアログが表示されるので  URLタブ内、A欄に Clone 対象リポジトリーURLを B欄にClone先のディレクトリパスを入力して Cloneボタンで完了です。
※クローンするとコーディングファイルなども落ちてくるので管理には注意してください。

 

  1. 管理ディレクトリ内でデザインファイルを作成、または更新すると、ファイル変更情報が A に表示されます。
  2. A をクリックすると ※Sketch 利用時のみ B に画像が表示されます。
  3. まずはCの Fetch origin からリモートの最新バージョンを取得します。
  4. Dの Summary欄にコミットメッセージを入力。弊社の場合はRedmineと連動しているので最低限チケット番号を入力。
  5. 細かいメモはEのDescriptionに残せば良いと思います。
  6.  Commit to master をクリックすればコミット完了。

 

最後に右上の Push origin からリモートを更新して完了です。
余談ですがhtmlなどのファイルの管理もこちらからできたりします。
※プライベートリポジトリを利用するには有料の登録が必要です。

 

 

他にもHistoryからコミットログのテキストやSketchであれば差分画像を確認できます。
Redmineと連携していればそちらでもリポジトリの履歴確認が可能になります。
ブランチの作成もできますので複数人で管理することもできます。

 

 

以上、最後が駆け足になってしまいましたが、今後もKactusのナレッジなどより良い使い方をご紹介していければとおもいます。

 

 


Slackからイベントを受信

社内でのチャットツールはSlackを利用しています。
でもメッセージを見ていなかったり気づかなかったりすることがあるので、社内では確認したという反応が欲しい時は@つきでメッセージを送り、Slackのリアクション機能を使うことで確認したかどうかを判断する運用を行なっています。

 

さてここで問題です。
連休やメッセージのやり取りが流れすぎた時@つきのメッセージを追えるのか?というところです。
どうしてもメッセージが流れすぎるとリアクション漏れが発生してしまいます。
そして誰が確認していないかを確認するのも手間です。他に方法を探しましたがSlackのShow Activityの機能では求めていることが満たせません。

 

自分の職種はなんでしょうか?プログラマーです。なければ作ればいいじゃない?
幸いSlackには色々なAPIが用意されています。
そして色々触って試行錯誤した末たどり着いたのは、こちらからリクエストを投げる形式ではなくSlackからイベントを全部受け取るという方法。

概略のみになりますが、

1. メッセージを受け取って@つきのもののみ保存
2. メッセージに対してリアクションがあればリアクション情報を保存
3. メッセージに対して対象の全員がリアクション完了するとメッセージを消す

 

上記の流れでまだ自分がリアクションしていない自分宛のメッセージ一覧を残すことができるようになりました!合わせて自分が発言したメッセージに対してリアクションしていない一覧もリアクションしていない人に対して再度通知することも!

今回は使っていませんが他にも色々とできるイベントがあるようです。
Slackのアプリ作成からEvent Subscriptionsで設定できます。


 
Slackはチャット以外にも何かしらの通知や連携など色々できて便利です。
そして足りなければ自分で色々機能を追加することも用意されている。
まだ利用していなければどうぞ業務に活用することをオススメします!


Swift4でARKitを触ってみた

TikTokでホコリよけダンスを披露するため日々脳内トレーニングしてるけどダンス経験がないことを理由にビビってTikTokできていません。
マエダです。
 

 
みんな大好きiPhoneアプリ開発で必要となるプログラミング言語Swiftも気づけばバージョン4になり月日が経っていることをしみじみ実感しております。
 
前にコーポレートブログに自分が書いた記事のときはSwift2だったなんて。。。

Swift2でUISearchBarの背景透過


 
さて、そんな進化したSwiftの中でもARKitを触ってみました。

以下参考サイトです。(ありがとうございます!
https://github.com/shu223/ARKit-Sampler
https://github.com/kboy-silvergym/ARKit-Emperor
 
感想としてはAR機能をシンプルに追加できる強力な機能でした。(普通の感想すぎる・・・)
 
この強力な機能をどう活かすかで話題となっておりました3Dスキャナ。
https://www.3dscannerapp.com/
ARを身近にしたポケモンGOはデジタルと自然を調和させる楽しみ方が話題に。
http://nlab.itmedia.co.jp/nl/articles/1810/23/news113.html
 
今後もARの活用事例をチェックしながらいろいろと妄想したいと思います!
 
#TikTokerと繋がりたい


「人間大砲」ゲームを作ってみました!

こんにちは。開発担当のマットです。

以前の記事でUnityという3Dゲームエンジンを使って、3Dを体験できるゲームを作りましたが、今回は簡単なゲームを作りたくて「人間大砲」というゲームを作りました!
どうやって作ったか説明していきたいと思います。

ゲーム・デザイン

まず、ゲーム・デザインを行い、以下の目標を設定しました。

  1. 誰でも簡単に遊べる
  2. 開発に時間がかからない
  3. ハマってしまい遊び終わった後に『もう一回だけ』という気分になる

「こんなゲームを作れるのかな・・・そのためにはどんなゲームを作ろうかな・・・」と考えていたら、なぜか頭に浮かんだのは息子のスーパー・ボールでした。

単純でおもしろい、スーパー・ボール

スーパー・ボールを壁に向けて投げてキャッチする息子の遊びを何度も見ています。
ボールはもちろん物理の法則を則った動きをしますが、ちょっとした壁の凸凹や投げる力や方向の変動により、跳ね返り方は大きく変わります。

そこで「何かを適当に投げて、跳ね返りを楽しむのは良いかもしれないな」と思いました。

しかし、ボールはつまらないかな・・?
もっと面白い形の何かはないかな・・?
何を飛ばせば、息子に1番ウケるかな・・?
そうだ!人間!

「大砲で人間を打って、どれだけ遠く飛ばせるか」というゲームのアイディアがひらめきました。
下記のとおり目標で決めた条件を満たしていたので、開発に進めることにしました。

  1. 狙って打つだけなので、誰でも簡単に遊べる
  2. 複雑なAIや処理がないので、開発に時間がかからない
  3. 狙って打つ操作は時間がかからないのでハマって、『もう一回だけ』という気分になるはず

「アセット」の準備

Unityゲームは「アセット」と「コンポーネント」の組み合わせでできています。

「アセット」とはゲームの部品。
例えば、サッカー・ゲームの場合、ボール、選手、審判、ゴールポスト、スタジアムなどはそれぞれ「アセット」となります。

それらのアセットに付属させる「振る舞い」は「コンポーネント」と言います。
例えば、「ボール」のアセットに「球体として動く」コンポーネントを付属させることもでき、「スタジアム」のアセットに「歓声を上げる」コンポーネントを付属させることもできます。

Unityには「ラグドール」(Ragdoll = 人形のような動き)なコンポネントをアセットに付属させる機能があるので、それを使いたいなと思いました。
しかし、先に人間やゲームの中の世界となるアセットを準備する必要があります。

Blenderで3Dモデルを作成する

Blenderとは3Dモデリング・アプリケーションです。
簡単なものから、複雑なものまで、Unityゲームで使えるものが欲しければ、Blenderで作ることができます。

今回のゲームでは飛ばされる人間、その人間を飛ばす大砲、そして途中でぶつけてしまう建物や樹木などのモデルが必要だったので、それぞれをBlenderで準備しました。

Blenderでの3Dモデリング

次はこれらのBlenderファイルをUnityにインポートして、ゲーム作りに使います!

Unityでゲームを作る

上記のモデルが全部出来上がったら、次は実際のゲーム作りです。
まずは、アセットを組み合わせて世界を作ります(今回のゲームでは都会の街を使います)。

実は、今回のゲームで1番時間がかかったのはこの街づくりでした。
ユーザーが退屈にならないよう、それぞれのエリアをユニークにしたくて、コピーペーストをできる限り使わないように頑張りました。

なお、街を部分的に区切って、パフォーマンス問題を防ぐために街を部分的にロードする仕組みを取り入れました。

街が出来上がったら、それぞれの建物や木のアセットに「Collider」(衝突反応)のコンポーネントを付属させることで、「RigidBody」(固体物体)のコンポーネントが付いている人間が当たると跳ね返るようにしました。

そして、街の真ん中に大砲のモデルを設置して、ユーザーがボタンを押すと、人間が大砲から飛び出ていくスクリプト(コンポーネント)を書いて付属させます。

最後は人間の服色と髪型をランダム化、複数カメラ、及び音楽と効果音をつけました。


すべてのアセットとコンポーネントが揃ったら、ゲームは完成です。
 
まとめ

良いアイディアさえあれば簡単なゲームを開発することができ、とても楽しいです。


Google HomeとNature Remoで涼しい帰宅を!

毎日家に帰ると暑い部屋が出迎えてくる・・・そんな日々を変えたくて家にGoogle Homeを導入しました!

 

Google Home miniとNature Remo

 

左:Nature Remo:備え付けの旧式のクーラーなので赤外線のみ有効なのと遠隔で操作する為に購入。
右:Google Home mini:スピーカーの違いぐらいだったのでminiにしました。

 

届いた後の設定等はいろんなサイトが紹介しているのと、手順通りにすれば動いたので省略します。
ここでは導入した後の快適さを実感とともにアピールしたいと思います!

 

・帰宅前にスマホからクーラーを起動できるので帰宅した時の部屋の中は快適!(超重要)
・部屋の明かりを消すのにリモコンを探さなくていい!「ねぇ Google おやすみ」
・タイマーセットが簡単「ねぇ Google 3分測って」
・外出時のクーラーと部屋の明かりを消すのがラク「ねぇ Google 行ってきます」
・起きる時間にアラームとともに部屋の明かりをつけることができる!(重要)

 

ただし不満点が全くないとは言えません。

 

当初は外出するときに「ねぇ Google 行ってきます」と言って、IFTTTを経由して電気とクーラーを消してました。
しかし「行ってらっしゃい」としか反応してくれないことが何度かあったので、今では大体朝出てるだろう時間をトリガーに電気とクーラーを自動で消すようにセットして電気とクーラーをつけたまま外出するようになりました。
外に出るまで電気はついてるし消し忘れはないしで最終的にはこっちに変えて快適になりましたが、思った通りの動作をしなかったのは少し微妙に感じました。
あとたまに音声をちゃんと認識してくれないときもある。

 

それを踏まえても導入した後の快適さを考えれば購入費用はペイできてる気がします!
日々の生活を快適にするためにスマートホーム化はおすすめです!