2019-11-08

【VR】Unityで物をつかむ、投げるサンプルでログ表示するまで【Oculus Quest】

この記事は、Oculus Questのアプリ開発時に、サンプルとして用意されている「AvatarGrab」シーンの不具合を解消するまでのメモ。

記事を書く理由

Oculus Questのアプリ開発にちょっと興味があったので「まずは軽くサンプルで動きを確認しようかな」とサンプルシーンをビルドしたのです。

そうしたら手が表示されない、持てるはずのものも持てないといった状態。
サンプルが正常に動かないって厄介な！

というわけで、せっかく調査したので記録を残しておこうと思いました。

開発環境

Mac OS X
Unity 2019.1.7f1
Oculus Integration ver1.41
Oculus Quest

サンプル修正手順

サンプルとして用意されているSceneを起動。
Assets/Oculus/SampleFramework/Usage/AvatarGrab

このシーンをそのままビルドしても手が表示されない。

なので以下の記事の「サンプルシーンの確認」から「Handの手動追加」までを行う。https://raspberly.hateblo.jp/entry/OculusQuestHand

デバッグ用のテキストを表示

こちらの手順は以下の記事を参照。
https://raspberly.hateblo.jp/entry/OculusQuestDebugConsole

Unityはほとんど触っていなかったので、UGUIだけじゃなく Text Mesh Pro なんていう機能まで追加されていて驚いた。

とりあえず、今やってるAvatarGrabシーンでテキスト表示できるか実験。

最初、全然表示されなくて割と悩んだけど、そもそもCampusやTextオブジェクトがデカすぎて変な位置にいたせいだった。

ちゃんと見える位置にサイズ調整して配置したら問題なく動いた。

これで今後わかりやすい形でログ出力ができる。ログは大事。すっごく大事。

おまけ

上記の記事にあるデバッグ用関数の改変版を貼っておく。
ものを持った時と、手放した時だけログ出力するように変更したもの。

using UnityEngine;

public class OVRDebugConsoleTest : MonoBehaviour
{
    OVRDebugConsole console;

    public OVRGrabbable grabbable;

    bool isGrabbed;

    void Start()
    {
        console = OVRDebugConsole.instance;
    }

    void Update()
    {
        
        if (grabbable.isGrabbed != isGrabbed)
        {
            string message = "Grab.";
            isGrabbed = grabbable.isGrabbed;

            if (!isGrabbed)
            {
                message = "Release.";
            }
            console.AddMessage(message, Color.white);
        }
    }
}

OVRDebugConsoleは、デバッグ目的に使うなら AddMessageじゃなくて AlertとかLog関数を作って、使いわけたほうが良いかも。

おまけ2

困ったことは Raspberlyさんのブログを見ればだいたい解決しそう（思考停止）

raspberly.hateblo.jp

2019-08-07

グロースハッカーって何なのか、それと経営者目線

ライフスタイル

どうも、無職のエンジニアです。
せっかくの長期休暇なので、自分に合う方向性をちょくちょく探しているところです。

今回は、グロースハッカーという方向性について調べてみた。

名前からして「何かを成長させるエンジニア」感のあるグロースハッカー。
本を読んで、ネットの記事をいくつか見て、だいたい理解はできたと思う。
けど、ひとことでグロースハッカーを表すのは難しい（私に適切な語彙がないだけかもしれない）。

なんてったって、サービスを成長させるためにできることをなんでもするのだ。
より良いサービスにするための開発はするし、マーケターみたいに広告戦略も考えるし、サービスの前提が望ましくなければそれすら変えようとする。

なんていうか、コンサルティングの目線を持ったアジャイル開発者みたいなイメージだ。

このサービスはどんな人の、どんな課題を解決してくれるのか？
それはお金を払ってでも使いたいと思えるものなのか？
もっとよい課題や、解決法があるのではないか？

こういった、そもそも論から

いろんなメッセージを送ってみて、いちばん成約率が高いのはどれになる？
お客さんがまわりにサービスを紹介したり、自分から広めてくれるような魅力や仕組みはあるか？
ユーザーの定着率を下げるようなデザインになっていないだろうか？

といったサービスの改善まで、とにかく幅広く検証し、数値目標を改善させていく。
なんでもやるからこそ、型にはまらない感じなんだよね。

ただこういう働き方自体は既視感があって。
なんとなく「経営者目線を持った社員」と似てると思わない？

いやまぁブラック社長とかはコストカットとかそういう面でしか見てなかったと思うけど、まともな社長なら「言われたことをこなすだけじゃなくて、製品やサービスの売上がよくなるように自主的に動いて欲しい」っていう考えはあると思うんだよね。

それのエンジニア版がグロースハッカーなんじゃないかと、そう思ったわけです。

どんな人がグロースハッカーに向いてるの？

以下の記事を見てもらったほうがわかりやすいと思うけど、お客さん目線での想像力があったり、分析や細かい改善が苦にならない性格を持ってる人が向いているようだ。

有能なグロースハッカーに求められる能力とは？
https://www.leadplus.net/blog/growth-hacker.html

私自身は（資質的に）向いているんだけど、何か言語化できていない違和感があるので、まだ保留って感じです。

グロースハッカー第2版

作者: ライアン・ホリデイ,加藤恭輔(解説),佐藤由紀子
出版社/メーカー: 日経BP
発売日: 2015/02/19
メディア: 単行本
この商品を含むブログを見る

2018-12-08

PHPのリーダブルコード（第一回）読みやすい関数が持つ、3つの特徴

PHP 技術

PHPのリーダブルコード第一回です。次回はありません（気分屋）

まえがき

当記事はコードの書き方ではなく、理解しやすい関数のポイントや、定義の仕方を解説するものになります。

先に結論を言うと、内部の実装を見なくても処理が理解できる関数が良い関数です。

読みやすい関数の特徴

1. 処理内容が推測できる関数名である

関数の機能にふさわしい名前をつけてあげるとグッドです。以下に例を挙げます。

商品を取得する関数 get_products
会社情報をデータベースに登録する関数 insert_company
条件を元にひとりのユーザー情報を取得する getUserByConditions
一人のユーザーを取得するユーザークラスの関数 getById （User::getById）

これらの関数は名前を見ただけで処理が推測できます。

加えて、推測内容とジッサイの処理内容がほぼ同じです。

比較のために、私が今まで遭遇した名前から機能が想像できなかった関数も挙げておきましょう。

データを取得する関数 set_data()
ユーザーのid情報だけ取得する関数 get_user_list()
CSVをアップロード、もしくはダウンロードする関数 udload()

これらは一見して何の機能かわからない、もしくは別の機能をイメージさせる名前です。

こういった名前の付け方は避けましょう。

大丈夫です、ちゃんと機能にあった名前かどうかを考えれば、わかりやすい関数名がつけられるはずです。

※補足ですが、変数名や関数名に略語（account_name => anなど）を使うのは避けてください。

他人が見ても何の略語かわからない時がありますし、わかったとしても見るたびに脳内変換をかける必要があり、コードを読むコストが増します。

※名前をつけるときは、できるだけ動詞で始めてください。何をする関数なのかがすぐにわかります。

2. 使い道がイメージできる引数である

以下の関数を見てみましょう。

public function get_products($prd_obj) {
  $id = $prd_obj->id;
  $type = $prd_obj->product_type;
  // ...以下略
}

この get_products()関数では $prd_objという、おそらく商品に関するオブジェクトを渡していることはわかりますが、それがどう使用されているのかは内部を見るまで理解できません。

オブジェクトや配列は複数のデータを渡せて便利ですが、どんな情報を内部で使っているかを隠してしまうので、使いどころには注意してください。

もし配列を使う場合は、検索条件など、キーや値がコロコロ変わって安定しないものに限定しましょう。オブジェクトに関しては、どうしても必要な時を除いて避けるのが賢明でしょう。

読みやすい関数も合わせて書いておきます。

public function get_products($product_id, $product_type) {
  // ...以下略
}

このような引数の書き方であれば、IDとTypeから商品を取得してくるんだなと内部を見ることなく理解でき、実装を見る時間を節約できます。また脳のCPU使用率も下がるのでオトク感があります。

3. 適切なコメントが書かれている

関数に適切なコメントをつけることで、すこし難しい機能でも理解が容易になり、実装を見る時間が減ります。

/**
 * 条件を元に、商品データを取得します。
 * @param  array $conditions
 * @return array
 */
public function get_by_conditions($conditions = []) {
    // 処理
}

関数やクラスの上に書かれている上記のようなコメントは、PHPDocとか phpDocumentorとか呼ばれてます。

参考: phpDocumentorの書き方

これがあると、引数はどんな型なのか、どういう型で返ってくるのかが実装を見ることなく理解できます。

一緒に関数についての簡単な説明が書いてあると、よりわかりやすくなります。もっと言うとストレスが減ってやる気が出て良い気分を保ちやすくなります。

関数を作った場合はPHPDocをつけるようにしましょう。

また、メンテされていないPHPDocがあったら、ちゃんと実装に合うようにコメントを書き直しておきましょう。

※PHPDocの副次的効果として、引数に違う型のデータを指定したときにIDEが警告を出してくれるようになり、たいへん便利になります。あとPHPStormはPHP使いには必須アイテムだから、一度も使ったことない人は無料版をさわってみてほしい。

結論

最初にも書きましたが、内部の実装を見なくても処理が理解できる関数が良い関数です。

みんなもわかりやすい関数を書いて、未来の自分やプロジェクトメンバーが頭を痛めないように頑張りましょい！

2018-05-20

自宅でMacBookProをデスクトップ化して使った感想

周辺環境

f:id:thinkhead:20180520090349j:plain

持ち運びに便利で、いちいち起動しなくても良いMacBookは便利だけど、自宅で作業するには画面が狭いし大量の文字を打つにはキーボードの押し心地がイマイチ……。

最近は持ち運びにもあまり使われず、自宅で休眠状態になっていたMacBookをなんとか活用できるようにしたいと思った私は「そうだ、クラムシェルモードがあるやん！デスクトップ化しよ！」と叫び、テンションマックスでAmazonの巡回を始めました。

何を求めてデスクトップ化するのか

ディスプレイはひとつが良い

複数の画面を行ったり来たりすると妙に疲れるし、マウスカーソルが画面間を超えるせいで見失いやすくなる。

「あれ、マウスカーソルどこにいった？」とタッチパッドをぐるぐるなぞる作業はわずかながらストレスになるし、もーめんどくさいなーという気分にさせられる。

打ち心地の良いキーボードを使いたい

バタフライキーボードの打鍵感はどうにも慣れない。パチパチと甲高い音を出すのは百歩譲って問題ないとしても、押し心地が妙に悪い。MacBookAirの頃に比べて大幅に劣化しているように感じる。「ターンッ！」とエンターキーを押すような人種には反発が感じられるキーボードだ。

せっかく自分で環境を変えられる自宅での作業なのだから、打ち心地の良いキーボードを使いたい。

純正マウスとキーボード、縦置きされたMacBookの見た目が良い

かっこいいのは大事。

購入したもの

モニター

モニターは当初買う必要はないかと思ったが、MacBookと比べると画質が落ちることに加えて、ゲーム用に用意しただけあってサイズが大きかった（27インチ）ので、もう少し小さい方が使いやすいと思い、新しいものを買うことにした。

LG モニターディスプレイ 24UD58-B 23.8インチ/4K(3840×2160)/IPS 非光沢/HDMI×2、DisplayPort/ブルーライト低減機能

出版社/メーカー: LG Electronics Japan
発売日: 2016/09/28
メディア: Personal Computers
この商品を含むブログ (2件) を見る

4Kディスプレイであり、24インチ、3万円台の価格ということでこのモニターを購入。さっそく使っているが、MacBookと比べても劣化を感じさせない綺麗な画面で満足。

スタンド

LAMPO®【2年保証】アルミノートPC スタンド Apple MacBook Pro / Air クラムシェル【日本ブランド】収納 stand 立て冷却 Laptop ラップトップマックブック (シルバー)

出版社/メーカー: インターサポート
メディア: オフィス用品
この商品を含むブログを見る

MacBookを立てるためのスタンドも購入。縦置きはロマン。すこし幅が大きいせいか、ちょっとだけ傾いた形になるのが気になるといえば気になる。

キーボードとマウス

f:id:thinkhead:20180520095016j:plain

純正キーボードとマウス。キーボードは古き良きMacBookAirと同じような押し心地で素晴らしい。値段が高いことを除けば一番Macに最適なキーボードだと思う。

マウスはまだ使い込んでいないから不満点があげられないが、操作感はそこまで悪くないように思う。汗っかきな人で、手がべたつくとスクロールに支障が出るので気をつけよう、くらいかな。

カーソルの速度は最大にしてもまだ遅かったので、カーソル速度を早くするアプリを使っている。

USB Type-C ハブ

充電ができて、かつシンプルなものが良いかなと思ってこれを購入した。

USB C ハブ　USB Type-c ハブ 4K HDMI出力タイプ C PD充電器　USB3.0ハブ Type C-HDMI マルチ変換アダプタマルチハブ USB-C HUB　Ｍacbook (白)

出版社/メーカー: raycue
メディア: エレクトロニクス
この商品を含むブログを見る

これでお出かけのときはケーブルをひとつ外せばオッケーって寸法よ。見た目もMacBookに合っていて好みだが、あまり色々なものをつけられないので後々問題になって交換しそうな気もするが、まあ満足している。

総評

わりと満足したはいいけれど、特にいま作りたいものがないのでブログ書くくらいしかやることがない。カスタマイズまでして優秀なMacBookなだけに、宝の持ち腐れ感がある。

（2018/11/22追記）現在はMac mini + HHKBの組み合わせにしています。いずれ現在の構成についても記事を書きたいですね。

2018-03-09

【Unity2D】チュートリアルで引っかかったところまとめ

Unity Unity2D 技術

Unity 2Dチュートリアルのトラブルシューティング

unity3d.com

Unityの 2Dシューティング作成チュートリアルを行う上で、よくわからなかったり引っかかったポイントをまとめた。

環境： Unity 2017.1 + Rider IDE

画面へのテキストの追加

適当なGameObjectを作成
GameObjectを選択したまま、上部メニュー Component > Rendering > GUI Text を選択
（Inspector で Add Component > Rendering > GUI Text でも良い）

スクリプトを当てても背景がスクロールしない

Materialの Shaderが、Sprites > Diffuseになってるか確認する。違っていたら Sprites > Diffuseに変更しよう。

Shaderによってはスクリプト制御を受け付けない場合がある。チュートリアルにも記載があるが、テクスチャがスプライトとして使用されているパターンでは（オフセットの変更ができないため）背景が動かないことがある。

画像の表示順を変えたい

Prefabに追加されている Renderer系のコンポーネントに、Sorting Layerがあるので指定しよう。Sorting Layer は表示順を定義したもので、上部メニューのEdit > Project Settings > Tags and Layersで設定できる。

背景画像のマテリアル作成

チュートリアルの背景を作成するチャプターで、用意してあるはずの背景 Material が用意されていなかった（代わりにテクスチャーは用意してあった）ので、テクスチャーからMaterialを生成して背景として配置する手順を調べた。

テクスチャをインポートする（Project で右クリック => Import New Asset を選択、背景画像を選択）
空の Materialオブジェクトを作る（Project で右クリック => Create > Material）
作成した Materialオブジェクトの Inspectorにて、Shaderを Legacy Shaders > Diffuse にする
Baseプロパティに画像を設定する四角い枠があるので、先ほど取り込んだ背景画像をドラッグ＆ドロップ
Shaderを Sprites > Diffuseに設定する

背景画像が黒くてよく見えない

チュートリアルの手順で行なっていて背景画像が暗くなるという現象があった。特にチュートリアル上では言及されていないが、これは背景に 3Dオブジェクトである Quad（平面）を使用したためである。これらは光源がないと暗くて見えないので、光源を追加する。

Projectで右クリック、Light > Directional Light を選択。これで光源を作成する。
作成されたオブジェクトを邪魔にならない場所に配置しておく。

点滅が作成できない（アニメーションのオンオフ方法）

チュートリアル11 にて自機の無敵アニメーションを作成する手順において、キーフレームを作った後「これを交互に60フレームまで「オフ、オン、オフ、オン...」というようにキーを打ち込んでください」と記載されているが、具体的にどう操作すればいいのかを調べた。

対象の画面

フレーム表示スケール（0:00, 0:05とか書いてあるところ）をクリックして、状態を変更したいキーフレームを選択する（キーフレームの四角を直接クリックしない）
状態を変更したいキーフレームの上に縦線が表示されていることを確認する
左の Sprite Renderer.Enable（当たり判定プロパティ）のチェックボックスがいわゆる「オンオフ」なので、チェックを入れたり外したりする
1 ~ 3を繰り返してオン・オフが交互になるようにキーフレームを修正する

最後に

手順が間違っていたり、より良い方法があればご教授ください！

2018-02-25

MagicaVoxel で作った3DドットキャラクターをUnityで動かすまでのメモ

Unity Unity3D 技術

MagicaVoxel

公式からダウンロード

https://ephtracy.github.io/

MagicaVoxelでモデルを作成する

http://github.dev7.jp/b/2015/12/15/precureadv20151213/ こちらのサイトから手に入れた「base.vox」を元にキャラクターを作成する。

完成したら、.objファイルで出力する。

Blender

ボーンの設定

http://github.dev7.jp/b/2015/12/15/precureadv20151213/ こちらのサイトから手に入れた BaseArmature.blend を開く。

File->import->(.obj)を選択、先ほど出力した objファイルを指定する。
左メニュー、ToolsタブのTranslateを一度押し、下にマウススクロールすると読み込んだモデルの拡大縮小ができるので、ボーンにあった大きさまで縮小する。
モデルを右クリックし、その後タブキーを押して Editモードに切り替える（タブを押すと、オブジェクトモードと Editモードを切り替えることができる）。
Editモードになったら、左メニューのToolsタブ、remove:項目の「Remove Doubles」を押す。
その後、同タブの add:項目の「subdivide」を押す。

（これらはモデルの頂点の重複などに関する処理のようだが、門外漢なので行う理由はわからない）
タブキーを押して、オブジェクトモードに変更する。
モデルを右クリックした後、Shiftキーを押しながらボーンを右クリックする（モデルが赤い輪郭で、ボーンがオレンジの輪郭で選択状態になる）
Control + P で　Set_Parent_toメニューを表示。その中の「With Automatic Weights」を選択する（モデルとボーンの紐付け）

きちんと紐づいたかの確認は、Poseモードで行える（ビューワー下に Object, Editなどのモードを変える箇所があり、そこでPoseモードに変更できる）。頭のボーンを右クリックして、左右に動かしてみるとわかりやすいと思う。
ボーンのセットを確認したら、File->export->(.fbx)を選択して保存しよう（UnityのAssetsフォルダにしまえると、入れる手間が省ける）

Unity

モデルとテクスチャの設定

Assetsフォルダにあるモデルは、そのままではテクスチャがないので全体が灰色のままだ。

Unityではモデルを取り込むと、その階層に「Material」フォルダが作成される。中を見よう。モデルのマテリアル（白球みたいな奴）を選択し、右メニュー（inspector）の shaderを「Mobile/Bumped Diffuse」に変更する。

肝心のテクスチャ用の画像は、MagicaVoxelで .objファイルをエクスポートしたときに、同じ階層に pngファイルが出来ているはずなので、それをUnityに取り込もう。

モデルのマテリアルを再び選択し、inspectorの Base（RGB）の欄にある四角いゾーンに取り込んだpngファイルをドラッグ＆ドロップしよう。これでテクスチャをモデルに関連づけられる。

最後に、Assetsフォルダにあるモデルを選択し、Inspector内の Rigタブを選択。Animation Type を Humanoidに設定。そしてApplyボタンを押して更新しよう。

これでモデルの取り込みは完了だ。

蛇足　アニメーション

Unityちゃんのアニメーションをパクって、アニメーションさせてみる。（あらかじめUnityちゃんを落としておくこと。Unity内のビューワー上部のAsset Storeも使えるぞ）

下のAssetsビューワー内で右クリックし、create->Animator Controller を選択。作成された Animator Controllerをクリックして開く。

表示項目のうち、Entryの下あたりで右クリック->create state->empty で空のアクションを作成。作成したアクションを選択し、右メニューのinspectorにて、Motionを設定する。（Unityちゃんが入っていないと、選択できるものがないので注意）

以上、あとは実行すればアニメーションをしてくれる。

以前投稿した、これに関するメモが残ってたのでアップしておく。
ネットの海で、この資料が役に立つ人が1人くらいいるかもしれない。 pic.twitter.com/LzKC37szk2
— かさっき（ハンター） (@kasackee_jp) 2018年2月25日

2018-02-12

はじめてのMarkdownエディタはTyporaがおすすめ

ツール技術

初めまして、坂井です。先月発見したMarkdownエディタの「Typora」が非常に使いやすく、いままで使っていたAtomが霞むほどだったので紹介したいと思います。

Typoraの公式

Typora — a markdown editor, markdown reader.

Typoraの何がすごいのか？

プレビュー画面でマークダウンを書ける

とにもかくにも、これが素晴らしいです。

まず画面がひとつしかないのでプレビューがエディタを圧迫することがない。これは長文を書いたりテーブルを作っていると特に感動するポイントです。

また、テキスト状態では見づらいリンクやテーブルなんかが非常に見やすいのもいいですね。

左右に目を動かす頻度も減りますので、地味にストレス軽減にもなります。

圧倒的軽さ

機能が全然違うので当然と言えば当然なのですが、Atomより軽いです。とっても。

200行も書かないうちに重くなり、編集もプレビューも時間がかかっていたマークダウンが、Typoraでは一切の遅延を感じさせませんでした。1ヶ月ほど仕事で使っていますが、遅延したり重くなったことはないです。

シーケンス図などの作成、PDFなど各種出力機能

Draw Diagrams With Markdown

もうドキュメント、全部テキストでいけるんじゃないかな（投げやり）

欠点（2018/11/22追記）

業務でしばらく使ってみた結果ですが、テーブルのデータが正しく保存されなかったり、変換がされないことがあったりなど、いくつかのバグのため継続利用を諦めざるを得ませんでした。

特にデータが消えたり変わったりするのは業務において致命的でした。いまは改善されているのかもしれませんが。

なので、使うならプライベートで使用するのが無難だと思います。

結論

いまならベータ版なので無料で、どなたでもお使いいただけます。

みんなTyporaを使ってみよう！

そしてバグ報告いっぱいお願いします（他力本願）。