2016年 8月 の投稿一覧

黒(偽)革の手帳~ITアレルギーな私のWEB部奮闘記~


こんにちは。
リンクバルの山本(♀)です。25歳です。

リンクバルの看板商品「街コン」のイベントプランナーでしたが、ひょんな事からリンクバルのシステム系の部署であるWEB部に異動となり、今はシステム開発のディレクターになるべく修行中です。

私、ITたるものにアレルギーをもっています。
「ヤバイ」と思って勉強しようと思ったこともあったのですが、トライ&エラーの繰り返しです。
理由としましては、根性があまりないほかに、「~入門」「初心者のための~」が読めないからです。もうお手上げ状態です。
こんな私ですが、今日からリンクバルWEB部の日常をたくさんアップしていきます。
どうぞ、お付き合いください。

リンクバルWEB部はこんな感じ。
IMG_20160829_115459 (2)
よく見ると赤く〇がついているでしょう?
そこが私の席。エンジニアの中に、ポツン。
何であなたがいないかって?
撮影者が私だからです!

現在はWEB部の事務系の仕事をこなしつつ、IT用語の勉強中。
仕事をしながら、勉強なんて偉いね~ですって?
いやいや、とんでもない。日々の仕事でもうクタクタですよ。
私、あまり根性が無いので、頑張ることには限界があります。
私の長所は、自分の限界を知っていること。

そんな私の為に活躍中なのが、黒(偽)革の手帳。
IMG_20160829_124247 (4)

いつも持ち歩くこの手帳に、分からないIT用語を全て書きなぐり、スキマ時間に見て、覚える、といった勉強をしています。
私のような(あまり根性のない)方にオススメです。
IMG_20160829_125322 (1)

時々お買い物リストになったりもする。
IMG_20160829_150051 (1)

効果はどれくらいかというと・・・よく分かりませんね。
こんな私ですが、どうぞよろしくお願いします。

では、今日はこの辺で。


NewRelicのTransactionTrace機能がとても便利な件


NewRelicの便利な機能を紹介します

NewRelic公式サイト
https://newrelic.com/

このAPMの「Transaction Trace」というAPMのPro版の機能がソースコードのメソッド単位でレスポンスタイムが分かるので、サイトのチューニングやボトルネックを発見するのにとても役に立ったことがありましたので、記事にさせて頂きました。

ライセンス料金
https://newrelic.com/calculator

Transaction Trace
TransactionTrace

Transaction Trace Detail
TransactionTraceDetail

このような具合でソースコード単位でボトルネックになっている箇所を見つけ出し、
パフォーマンスのチューニングをすることができます。
またデータベースで実行されたクエリを確認することもできます。

最後に
もしサイトが重く悩んでいましたらNewRelic APM Pro版を導入してみるのも良いかもしれません。
フリーで登録後、14日間はPro版をトライアルできるようですので、NewRelicの導入がまだの方は試してみてはどうでしょうか。


私が愛してやまないSassの関数5選


Sassの関数には数値や文字列を操作するものもありますが、私が愛してやまないのは専ら色を操作する関数たちです。
どのような関数か、といった解説は今更感が半端ではないため割愛させていただきます。

rgba

CSSでは16進数での色指定ができませんが、Sassではできます。地味に便利です。
また変数での指定もできるため、単に透明度を上げたい時にもよく使います。

Sass
.button {
  background-color: blue;

  &.disabled {
    background-color: rgba(blue, 0.25);
}
CSS
.button {
  background-color: blue;
}

.button.disabled {
  background-color: rgba(0, 0, 255, 0.25);
}

lighten, darken

メインカラーの明度だけ調整したサブカラーを作りたい、といった時に使います。

Sass
.button {
  background-color: blue;

  &:hover {
    background-color: lighten(blue, 20%);
  }
CSS

.button { background-color: blue; } .button:hover { background-color: #6666ff; }

saturate, desaturate

こちらは明度ではなく彩度を変更する関数です。
同系色のバリエーションは明度を変える方が作りやすいですが、こちらも時々使用します。

Sass

.button {
  background-color: blue;

  &.secondary {
    background-color: desaturate(blue, 90%);
  }
CSS
.button {
  background-color: blue;
}

.button.secondary {
  background-color: #73738c;
}

scale-color

上記を含めたあらゆる色の値を操作できます。
全てこの関数に統一してしまうのも良いかもしれません。

Sass
.button {
  border: 1px solid blue;
  background-color: scale-color(blue, $lightness: 80%, $saturation: -50%);
}
CSS
.button {
  border: 1px solid blue;
  background-color: d9d9f2;
}

complement

指定した色の補色を返します。補色のアクセントカラーを入れたい時に便利です。

Sass
.button {
  background-color: blue;
  color: complement(blue);
}
CSS
.button {
  background-color: blue;
  color: yellow;
}

私がSass(CSSプリプロセッサ)を初めて導入した時に最も感動したのは、長期にわたって運用されるWebサイトにおいても、デザインの一貫性が保ちやすくなったことです。

jpgの画像からカラーピッカーで拾ってきたような、非常に近いけれどよく見ると違う、意図的なのか何なのかよく分からない、星の数ほどあるカラーバリエーション。

そういう残念な状況を見なくなったことの喜びを噛み締めていたら、無性にガリガリ君が食べたくなった為これで終わりにします。

ご愛読ありがとうございました。俺たちの戦いはこれからだ!


Mobile VR Jam in Tokyo に参加してきました


概要

Mobile VR Jam in Tokyo

Mobile VR ヘッドセット(モバイル端末を利用するタイプのヘッドマウントディスプレイ)向けのアプリケーションを開発する30時間のハッカソンです。

場所はドワンゴさんのセミナールーム(銀座松竹スクエア13F)で開催されました。
協賛はmerge社さん。
普通は賞金などは出ない(らしい)のですが、今回は最優秀作品には賞金がでるとのことで、若干色めき立ちました。

参加チームは6チーム、1チーム5人の30人くらいの予定でしたが、雨の影響か7割くらいしかいなかった気がします。
チームは運営の人が事前のアンケート内容を考慮して割り振ってくれていました。

スケジュール

内容
8月27日(土) 10:00 会場オープン
11:00〜 Mobile VR Jam スタート
8月28日(日) 〜17:00 Mobile VR Jam 終了
17:00〜 発表会

Mobile VR Jam とは?

おおよそ Global Game Jam の Mobile VR 版だと理解していただければよいのですが、ゲームに限らずさまざまなアプリケーションやツール・サービスなどを開発いただいてもOK

Global Game Jam とは?
ハッカソンって何?

ハッカソン歴

自身としては3回目のハッカソン参加となります。
過去に参加したハッカソン
Hack Day 2016 (Yahoo!さん主催)
Japan VR Hackathon (MoguraVRさん主催)

チーム編成

・Oさん Unity歴2年。仕事でバリバリUnityを使った開発をしている。
・Hくん 大学生でUnityを趣味で触ってる。
・自分 Unity歴1年くらい。仕事でちょろっとだけ触ったこともある。

以上の三人

人が多くいると作業の分担などできて完成度も高くなる、と思うかもしれませんが、30時間という制限の中で企画、設計、開発となると3人くらいが丁度良かった気がします。
欲をいえば3Dのモデリングができる人が欲しかった。

ハッカソンやゲームジャムでは企画する時間も当然ながら作業時間に含まれているので、アイデアがまとまらないで時間が過ぎていくのは致命的です。
開発も企画もスピードがとにかく大事です。
細かいことは後!!まずは手を動かす!!
これは仕事にも言える。

そういえば昔は自分も3人のチームでゲーム開発してたなぁ…(遠い目)

企画/アイデア

すんなり1時間くらいで企画の大枠が固まり、モバイルVRで脱出×ホラーゲームを作成することに、、、!

アイデアはこんな感じ
・ゲームがはじまるとプレーヤーは真っ暗な部屋にいる
・唯一最初に持っているのはペンライトだけ
・ペンライトで照らして部屋を見渡す(360度ぐるぐる動かす)
・ペンライトの明かりは段々弱くなってくる(時間がなくなると心拍音が大きく強くなる)
・ペンライトの明かりが完全になくなって真っ暗になる前に外に脱出する
・部屋にある鍵を見つける
・鍵で部屋の扉の一つを開く
・別の部屋に移動する
・謎のうめき声が聞こえて来るのでその声から逃げる
・不安感を煽るBGMと効果音で演出を盛り上げる

とりえあえずはアセットストアで雰囲気にあう素材を手分けして探す…
https://www.assetstore.unity3d.com/en/#!/content/21789
有料ですがこちらのホラーゲームで使える音のアセットを購入して使うことに。

こちらの音を聞いてグッドイメージが固まりました。
ホラーコンテンツ作るなら音の素材は超重要!今後もどっかのハッカソンで使えそうです。

自分以外のメンバーはホラーゲーム作ったことあるようで、他にもいくつかすでに持っている素材を持ち寄って早速開発に着手!

開発

開発の様子は長いので割愛

今回の開発で得た知見

・Mobile向けのVRにはMobile向けの素材を使わないと処理落ちしまくります。素材はできる限りローポリで。アセットストアにある素材はMobile向けに作られていないのでそのままでは全然使えない。
・オブジェクトを纏めてMeshを1つに扱えるEditor拡張(MeshCombiner)は使える。テラシュールブログに記事があります。
・ライティング貼ったステージ素材のビルドが超重い。(1時間とか平気でかかる)
・設定でライティングをリアルタイムレンダリングじゃなくすればビルドがかなり短くなる
Unity->Window->Lightingで設定可能
・PCで動いてもMobileでは全然予期した動作にならない事態多発!こまめに実機で確認したいところ。(PCでは動いていたが、デモ用にビルドしたら特定のイベントが発火しないバグ)

結果発表

試遊会で動作しなかった事もあり、あえなく撃沈しました。次回(あれば)必ずリベンジしたい。。。
優勝はVRでRPG/アクションゲームを作ったチームでした。
このチームは素直に完成度が高かったです。無念。。。

まとめ

ゲームジャムやハッカソンは都内では頻繁に開催されているので、興味があれば一度参加してみるといいと思います。
エンジニアやデザイナーの参加が多いですが、基本的にはその分野に興味があれば誰でも参加可能なイベントが多いようです。
勿論、学生もOKです。学生オンリーのハッカソンイベントもあります。

素材探しやストーリー作成、デバッグ、発表会用の資料作成などいろんな参加の形態があるので、プログラムできない、絵もかけないという人も是非参加してみてください。
プログラミングでわからないことがあれば他のチームの人でも丁寧に教えてくれる人が多いです。

他のチームが作ったものを体験したりするのも楽しいですし、なにより、ここで一緒に開発をしたメンバーは戦友みたいなものなので、その後飲みに行ったりするのもまた楽しいです。


【WordPress】「get_posts」関数を使ってみた


はじめまして!社会人2年目エンジニアの関です!
今回は、WordPressで開発をする上でなくてはならない「get_posts」について簡単に説明していきたいと思います。

はじめに
get_postsって実際どんなときに使えばいいの?というと、

get_posts の最も適切な使い方は、パラメータに基づいて投稿データの配列を作成することです。最近の投稿あるいはパラメータに一致した投稿を取得します。
参照:WordPress Codex テンプレートタグ/get posts

だそうです。

この条件で記事を取得してきたい。
でもSQLを書くのは苦手。負荷もSQLインジェクションも気になる。
という人にぜひオススメしたい関数です。

※利用目的がよく似ているquery_postsWP_QUERYとの使い分けについては、
以下をご参照ください。
参照:WordPressで押さえておきたい!get_posts,WP_Query,query_posts の違いと用例

パラメータ指定方法
get_postsで利用する主なパラメータは以下の通りです。
※内部的にWP_QUERYを利用するため、WP_QUERYのパラメータも利用可能です。

パラメータ 指定条件 備考
numberposts 取得件数 省略時は5件取得
category カテゴリID 配列で指定
tag_id タグID 配列で指定
orderby 並び替え条件 省略時は日付順(date)
order 並び替え順 省略時はDESC
include 取得したい投稿ID 配列で指定
exclude 取得したくない投稿ID 配列で指定
post_type 投稿タイプ 省略時は記事(post)
post_status 投稿ステータス post_typeがattachmentの場合はinherit
それ以外の場合はpublish 

実際に使ってみる
例えば、最新の公開済み記事の中から5件取得したい場合、以下のように記述します。

$args = array(
     'posts_per_page' => 5,
     'post_status' => 'publish',
     'orderby' => 'date',
     'order' => 'DESC'
);
$posts_arr = get_posts($args);

実行すると、以下のようなクエリが自動的に吐き出されます。

 SELECT wp_posts.ID FROM wp_posts WHERE 1=1 AND wp_posts.post_type = 'post' AND ((wp_posts.post_status = 'publish')) ORDER BY wp_posts.post_date DESC LIMIT 0, 5

その他のパラメータ
①カスタムフィールド
カスタムフィールド(postmeta)を指定したい場合、以下のパラメータを使用します。

※複数指定する場合は「meta_query」を使用します。
参照:get_postsで、複数のカスタムフィールドをキーにして検索・取得する方法

  • meta_key
  • meta_value
  • meta_compare(比較演算子)

カスタムフィールド「test」の値が1かつ最新の公開記事の中から5件取得する場合:
●実行するコード

$args = array(
     'posts_per_page' => 5,
     'post_status' => 'publish',
     'meta_key' => 'test',
     'meta_value' => '1',
     'meta_compare' => '==',
     'orderby' => 'date',
     'order' => 'DESC'
);
$posts_arr = get_posts($args);

●上記のコードにより実行されるクエリ

SELECT wp_posts.ID FROM wp_posts INNER JOIN wp_postmeta ON ( wp_posts.ID = wp_postmeta.post_id ) WHERE 1=1 AND (( wp_postmeta.meta_key = 'test' AND wp_postmeta.meta_value = '1' )) AND wp_posts.post_type = 'post' AND ((wp_posts.post_status = 'publish')) GROUP BY wp_posts.ID ORDER BY wp_posts.post_date DESC LIMIT 0, 5

②期間
投稿日を指定したい場合は、パラメータ「date_query」を使用します。
参照:WordPressのdate_queryパラメータを使って、複雑な期間指定の投稿を取得する

1ヶ月以内に投稿された記事の中からランダムに5件取得する場合:
●実行するコード

$date = date_i18n('Y-m-d', strtotime("-1 month"));
$args = array(
     'posts_per_page' => 5,
     'post_status' => 'publish',
     'date_query' => array('after' => $date),
     'orderby' => 'rand',
);
$posts_arr = get_posts($args);

●上記のコードにより実行されるクエリ

SELECT wp_posts.ID FROM wp_posts WHERE 1=1 AND (wp_posts.post_date > '2016-07-28 23:59:59') AND wp_posts.post_type = 'post' AND ((wp_posts.post_status = 'publish')) ORDER BY RAND() LIMIT 0, 5

(この期間指定の方法を知ったとき、あまりの簡単さに私は感動しました。)

おわりに
WordPress特有の、あまり正規化されていないDBのテーブル構造に悩まされている人も少なからずいると思います。(私も最初は頭を抱えました…orz)

しかし、get_postsのようなWordPress標準の関数を使うと、
この値をSELECTしてきて、あのテーブルをJOINしてきて…といったことを考えずに、SQLを意識することなく、内部でなかなかイイかんじにクエリを生成してくれるので非常に便利です。

WordPressで開発を行う際にはぜひぜひ活用してみてください。