SPLOUT BLOG - Part 73

Qoobo(クーボ)が届いたよ

こんにちわ。
リエです。

昨年10月にあるクラウドファンティングに参加しました。
それは「Qoobo(クーボ)」
Qoobo(クーボ)とは？
しっぽのついたクッション型セラピーロボットです。
そっと撫でるとふわふわと、たくさん撫でるとぶんぶんと、そしてときどき気まぐれにしっぽを振って応えてくれます。
引用元：http://qoobo.info/

発表されたときから反響が大きかったそうで、クラウドファンティングは開始して6日目で達成。
商品出荷は夏頃を予定していますと案内が届きました。

ワクワクして待っていましたが、夏頃に届くはずが開発が遅れていたそうで届かず。。
実際に届いたのは10月下旬。（アメリカは日本より届くのが1週間ほど早かったみたいです）
1年待ちました( ；∀；)ｷｬｰ

さっそく開封。

中身はQoobo本体と説明書と充電ケーブルとシンプル。
クラウドファンティングの特典ステッカーも入っていました。

充電が約4時間必要だったので、さっそく充電。（充電後の使用可能時間は約8時間）
充電中はランプが点滅します。

充電が終わったらスイッチを押して、Qooboを起こします。
ちなみに撫で方でしっぽの振り方は変わります。
やさしく撫でるとふわふわと、はげしく撫でるとぶんぶんとしっぽを振ります。

手触りはふわふわでとってもいいです(*´ω｀*)
大きさも重さもちょうどよい感じ。

わたしはワンちゃんを飼っているのですが、たしかにこんなしっぽの振り方をするなぁとQooboを撫でて思いました。
ちょっと機械音が気になるのがタマ二キズ。。

Qooboがきっとオフィスに癒やしを与えてくれるでしょう。

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

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

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

ゲーム・デザイン

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

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

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

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

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

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

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

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

「アセット」の準備

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

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

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

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

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

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

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

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

Unityでゲームを作る

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

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

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

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

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

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

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

まとめ

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

クレジットカードを不正利用されたときのお話

こんにちわ。
リエです。

今回はクレジットカード（以下クレカ）を不正利用されたときのお話をしようかと思います。
ちなみに個人カードではなく法人カードです。

とある9月のある日。
カード明細書をチェックしていました。（webで確認できるようにしているので、1週間に1回は必ず確認しています）
そこで見覚えのない引き落としを発見しました。
YahooJAPANから4件の引き落とし。しかも内３件が同額。
調べてみるとYahoo！プレミアム会員費と同じ金額。でもなんで3件も？
そもそもYahooに登録すらしてないんですけど。。

調査開始

まず確認すべきは社内。
確認したところ登録はしていなかったので、すぐにカード会社に問い合わせをしてもらいました。

不正利用と発覚

カード会社に問い合わせをし事情を説明。
ここで不正利用と発覚し、すぐにカードを止めて新しいカードを発行してもらいました。
補償期間内だったので、返金もあるとのこと。（※カード会社によって補償期間は異なります）
あとはカード会社が調査してくれることになったので、この件はお任せすることになりました。

不正利用は絶対許せない

カード会社の方によると同じ被害が他でもあったみたいです。（※クレカの普及率が上がるとともに、不正利用も増えています）
こういう少額での不正利用の怖いところは、気づきにくいところ。
毎月利用明細書を確認していればすぐに気づくと思いますが、確認していないと自分が把握している引き落とし額じゃなくても、少額だと何かの手数料かな？と思い確認しないので、知らず知らずのうちに毎月不正利用されるのです。。（こえ〜）
そして少額で引き落としができることが確認できたら、このカードは使えるぞということで高額引き落としをされる場合があります。

なぜクレカの不正利用は起こるの？

不正利用されてしまうケースは色々ありますが、対策はしっかりとしてクレカ情報の取扱には十分気をつけています。
どれだけ気をつけていても防げないのがクレジットマスターという、プログラムを使って利用可能なカード番号と有効期限を割り出す犯罪。
この犯罪は1999年ころから被害が確認されているのですが、具体的な防止策は見つかっていないそうです。
引用URL：https://news.cardmics.com/entry/credit-master-mondai/

対策と対処方法

クレジットマスターでの不正利用は防げませんが、他の被害は対策をきちんとしていれば防ぐことができます。
自分でできる対策としては下記のものがあります。
・カードの裏面には必ずサインをしておく。
・暗証番号を推測されやすいものにしない。
・利用明細書は日頃からマメにチェックする。
・怪しいメールやサイトを見つけても無視する。
・使わないカードは持ち歩かない。不要なカードは解約する。　など。
参考URL
https://card-repo.com/column/54
https://www.is702.jp/special/2132/

もしそれでも被害にあってしまったら、見つけた時点ですぐにカード会社に連絡しましょう。
不正利用と認められて補償期間内であれば、きちんと返金がされます。
ただし、補償期間を過ぎてしまうと返金されない場合がありますので、ご注意ください。
また自身の故意による不正利用も場合によっては補償されないことがあるそうなので、日頃からきちんと管理することがまずは大事ですね。
そして1番大事なのは「利用明細書を確認すること」です！
大切な財産を守るため、月に1回は必ず確認すると安心だと思います。

徳島県神山町で開発合宿をしました

こんにちわ。
リエです。

何度かご紹介している徳島県神山町に開発合宿でお伺いしてきました。

なぜここでなの？と言いますと、徳島県神山町は高速インターネット回線があり、ITの町と呼ばれています。多くのIT企業さんがサテライトオフィスを神山町に構えています。
〈参考記事〉
なぜ徳島県神山町に注目のIT企業のサテライトオフィスは集まるのか

今回開発するにあたり、お世話になったのは、神山バレー・サテライトオフィス・コンプレックスさん。（以下、コンプレックスさん）

コンプレックスさんは、閉鎖された元縫製工場を改修したコワーキングスペースです。
ビジター利用もすることができるのでお世話になりましたが、インターネット回線もサクサクと動きスムーズに開発を進めることができました。
合宿最終日は会議室にて成果発表。

宿泊はWEEK神山さんにお世話になりました。

夜は虫の声と川の流れる音しかしなくて、普段の生活ではあまり体験できない自然を感じる生活ができました。
ご飯もとっても美味しく、快適な滞在でした。

神山町の皆様、ありがとうございました！

Instagramの投稿を埋め込むとiPhoneで表示が大きくなる場合の対処法

Instagramの投稿をブログやサイトに埋め込んだとき、iPhoneのsafariのみ表示が大きくなり、はみ出ていることはありませんか？
AndroidやPCだとちゃんと表示できているのに…。

対処前の表示

例えばこのようなイメージです。（2018/9/20時点）

何故か埋め込んだInstagramの投稿が記事幅からはみ出ています…。

投稿が大きくなってしまう原因は、位置情報が長く、さらに「日本語英語」となっている場合のようです。

iPhoneのsafariのレンダリングが原因なのか、InstagramのCSSの指定が弱いのか、具体的なところは不明です。

対処方法

少々強引な対処方法となるのですが、表示されるInstagramのiframe「.instagram-media」に、下記のCSSを指定すると現象を回避できます。

@media screen and (max-width: 899px){
  .instagram-media{
    width:414px !important;
    max-width: 100% !important;
    min-width: initial !important;
  }
}

こちらの内容は、「@media screen and (max-width: 899px)」で幅900px未満のデバイスのみCSSが効くようにしています。
「414px」はiPhone XS MAXの横幅です。その指定のみだと、その幅以下のiPhoneでは大きすぎますので「max-width: 100% !important;」を指定しています。
「min-width: initial !important;」は、自動で生成される「min-width」の値が大きい場合があるので初期化しています。

対処後の表示

上記のCSSを指定した後の表示がこちらになります。
iPhoneでも通常の大きさで表示されるようになりました。

いかがでしょうか？
なかなかこのような表示崩れに出くわすことはないかもしれませんが、Instagramの投稿をブログなどに埋め込む場合の参考になれば幸いです。