読者です 読者をやめる 読者になる 読者になる

KazumaLab.

流行りとリラックマが大好きです。

Instagram APIを使ってみました。Ruby on Rails編

かずまです。

Omnioauth-TwitterFacebookは使ったことあったのですがInstagramでのoauth認識は初挑戦でした。
ただ、ほぼ同じ実装でできました。

# Gemfile
gem omniauth-instagram

これを追加するだけでできます。
多分Githubはこれ・・・だと思います。
github.com

devise + omnioauthはこちら2つ参考にするといいと思います。
これはやっていいのかわかりませんが、自分はSocialProfileのカラムにaccess_tokenを追加しました。
パラメーターで@socialprofileを読み込むとaccess_tokenも見えてしまうので安全ではないかも・・・と疑問ですがInstagram apiで使いやすいのでカラムを別につくりました。もしやらないほうがいい、というのがあればコメント等で教えていただけるとありがたいです。

qiita.com

qiita.com

Instagram Developper

コレにアクセスしてアプリケーションを作ります。(作り方割愛)
https://www.instagram.com/developer/
callback URIにちゃんと入れないとエラーが出ます。

僕の場合、ローカル環境のURI

http://localhost:3000/users/auth/instagram/callback

です。

"補足"
昨年末からSandboxというものができたため、Instagramに承認されるまで(提出、審査が必要)
Sandboxに登録されているユーザーのみAPIを利用できます。
【保存版】Instagramの審査の流れ、手順、必要なものまとめ - Qiita
詳しくここに書かれています。助かる〜。

アプリケーション作成後

Client_idとClient_secretはコピーしてomnioauth.ymlにペーストしておきます。

次はこんな感じでdevise.rbに書きます。

# config/initializers/devise.rb
OAUTH_CONFIG = YAML.load_file("#{Rails.root}/config/omniauth.yml")[Rails.env].symbolize_keys!

config.omniauth :instagram, OAUTH_CONFIG[:instagram]['key'], OAUTH_CONFIG[:instagram]['secret']

これらはOauth認証するときに必要になります。
サインイン機能がきちんとできていればこれで

Instagram APIを使う

今回はユーザーの詳細ページにて、Instagramの画像を取ってきます。
gem のinstagramを使います。

# Gemfile
gem instagram

今回はInstagramでサインアップ、サインインさせてSocialProfile.access_tokenにトークンを追加している状態で話を進めます。

UsersControllerの中に書いていきます。

# users_controller.rb
before_action :set_user, only: :show

def show
   if user_signed_in?
      @social = SocialProfile.where(user_id: current_user.id).first
      client = Instagram.client(access_token: @social.access_token.to_s)
   end
   
   unless client
      @medias = ""
   else
      @medias = client.user_recent_media
   end
end

def set_user
      @user = User.find(params[:id])
end

次にview/user/show.html.erbに書いていきます。

<p>
  <strong>名前:</strong>
  <%= @user.username %><!-- 適宜カラム名は変更してください -->
</p>

<% @medias.each do |media| %>
	<img src='<%= media.images.low_resolution.url %>'class="img-thumbnail img-responsive">
	<p><%= media.caption.text %></p>
	<p><%= Time.at(media.created_time.to_i) %></p>
<% end %>

これで表示できるようになります。

f:id:kazumalab:20160826084630p:plain
いい感じですね〜。このスクショでは写真が縦横並ぶようにその他の要素を非表示にしています。

Instagramの時間は1421677966 のように返ってきますのでそれを変更してあげます。
RubyではTime.atを使うみたいです。かっこのなかはIntegerですのでStringではエラーが出ます。(to_i利用)

情報を取り出す

上のshow.html.erbのコードではmedia.caption.textとありますが、これは投稿の際につけたテキストを取ってくることができます。このテキストにはハッシュタグも含まれます。

mediasの中には最近の写真が入っています。そのデータの情報を取り出す一覧で良いサイトを見つけました。
Instagram API から投稿画像を取得しスライダー/カルーセル表示 – lesson me
うーん。今のところCaptionとcreated_timeぐらいですかね。。。少ない。

もしかするとSamd boxでなければ全部使えるのかも知れないので申請してみます。

こんな感じで簡単に使えるのがいいですね。

ゲームでよくある現在地を表す地図をUnityで表示させる方法

かずまです。

ゲーム画面のどちらかに小さいマップ、現在地が表示されているコンテンツもあります。
これUnityだったらめっちゃ簡単じゃない?と思って実装してみました、のメモです。

いや、自分でやると簡単だけどここに書くのは大変でした…。


今回は作ってるゲームに導入してみました。
イメージはこんな感じです。

(注意)今回はキー入力によるプレイヤーの動き、Nav Mesh AgentによるEnemyの動きが付いているという前提で行っています。

f:id:kazumalab:20160823020831g:plain

Playerは白、Enemyは赤です。

用意するもの

Player,Enemyの画像

f:id:kazumalab:20160823025457p:plain,w100,h100
実際使っているのは白色で、カラー指定しています。
以下の文ではこのUI画像のことをplayer_imageと呼びます。

Mapと同じ形の画像

今回は正方形の地形なので正方形の画像を用意しました。
以下の文ではUI画像のことをmap_imageと呼びます。

マップの作り方(これは面倒。。。笑)

1. 見下ろしたスクショをとる
f:id:kazumalab:20160823042935p:plain

2. PhotoShop等に取り込んでトリミングしてpngで保存

3. Unityのスケール × 10のPixelで新規作成
f:id:kazumalab:20160823043158p:plain

4. 先ほどトリミングしたのを入れて両端をあわせる
f:id:kazumalab:20160823043343p:plain

これでpngの透過で保存してUnityに突っ込む!
ほんと遠回りで面倒。いい方法ないですかね。

UIの設定

Canvas以下に空オブジェクトを生成し、名前をMaskに変更します。
次にMaskの設定します。
f:id:kazumalab:20160823023717p:plain
Mask内はこんな感じです。
f:id:kazumalab:20160823023928p:plain

Maskを設定する

f:id:kazumalab:20160823024147p:plain

今回は形を自由に変形させたかったので、Rect Mask 2Dは使わずにMaskを利用しました。
MaskのComponentにImageとMaskを追加します。
サイズは大体300 × 300ぐらいがいいかも・・・?
ImageのColorはmap_imageがない部分の色になるので暗めを入れておきます。

ImageのSpriteは円の白をPhotoshopで作り、それをいれました。
Materialを設定してしまうとMaskできないのでMaterialは空にします。

子オブジェクトの設定

Mask以下にMapの画像を入れます。
Enemyを使う場合はenemy_imageをmapの子オブジェクトとします。

map_imageの設定

サイズはMap(Object)に合わせてサイズを調整します。
ちょっとわかりにくいですが、
f:id:kazumalab:20160823030820p:plain
20、15というのはUnity上のスケールの事を表しています。
この場合、map_imageはScale width = 200, height = 150にします。全部終わったあとにずれていればサイズを変更することもあります。

位置はMaskの中心に持って行きます。
f:id:kazumalab:20160823035759g:plain
三角のやつも持って行きます。


ちょっと小さいとやりにくいです。

player_imageの配置、設定

先ほどのPlayerのイメージ画像をCanvas以下に表示します。
サイズは自分で調整してください。
位置はMaskの中心に表示します。

f:id:kazumalab:20160823035355g:plain

UIの設定は結構面倒ですがこれでOKです。

Player(GameObject)の設定とスクリプト

Player(GameObject)の設定

まずはPlayerのPosition (0, player.transform.position.y, 0)にします。
y軸は0にすると足などが地面を突き抜けてしまうので、そこは個人で調節します。

スクリプト

スーパークラスをCharactorMainController.csでそれをPlayer.cs , Enemy.csで継承しています。

解説

わかりにくいかと思います。
player_imageは動いているように見えますがmap_image自体が動いて、必ず中心にいます。
Mapのイメージの(0, 0)の位置とPlayer (GameObject)の (0, 0)は同じということになります。
Playerが位置(15, 15)に行くとmap_imageは位置(-15 * 10, -15 * 10)となります。

map_image (-94.7, -62.7)
f:id:kazumalab:20160823051630p:plain

Player (9.47, 6.27)
f:id:kazumalab:20160823051659p:plain

次にEnemyです。
enemy_imageは動いています。しかもEnemy(GameObject)と同じ座標関係になります。
さらにmap_imageの子オブジェクトなので親が動くと子も勝手に移動します。
つまりlocalPositionにしている理由はenemy_imageのmap_image内で位置(50, 50)であれば実際Enemyは位置(5, 5)にいることになります。

map_image (90 , 62.7)
f:id:kazumalab:20160823051858p:plain
Enemy (9, 6.27)
f:id:kazumalab:20160823051924p:plain

PlayerのInspector

f:id:kazumalab:20160823042032p:plain

EnemyのInspector(Enemyを入れる場合のみ)

f:id:kazumalab:20160823042112p:plain
EnemyではMapImageは使いませんがスーパークラスで定義しているので一応入れます。

もっと良い書き方ありそう・・・。

さて再生します。
大体合っていればOKです。

f:id:kazumalab:20160823043626g:plain

最後に

わからないところや間違っているところ、こうした方がいいというのがあれば気軽にチャットでお知らせください。
個人的にぱぱっと作ったのでいろいろ手間が入っています。

FX Hit & Slashesを購入、利用してみました。

かずまです。

現在3Dのアクションゲームを作っていてエフェクトがほしいなぁと思っていたのでUnity Asset Storeで”FX Hit & Slashes”というものを購入してみました。

f:id:kazumalab:20160820221614p:plain

FX Hit & Slashesとは

パンチや斬るときによく出るParticleのパックです。
f:id:kazumalab:20160820221458p:plain
価格は$9.5です。
思ったより手軽なので買いやすいです。

セット内容

20種類の攻撃パターンがあり、値段の割にはボリューミーです。

f:id:kazumalab:20160820222051g:plain
テストシーン再生時の様子です。

ParticleはPrefab化されているのでCloneにしてあげるだけで利用できます。
さらにSelfDestruct.csがアタッチされており、それぞれタイミングのいい時にDestroyしてくれます。

実際に使ってみる

今回は今作ってるゲームに入れてみました。
このモデルもまたアセットですが笑

f:id:kazumalab:20160820222908g:plain

当たった瞬間にParticleを生成するようにしています。
何もない時よりかなり豪華になりました。

Unity 5.4.0p1 + GearVRでの開発メモ

かずまです。


今回Unityのバージョン5.3から5.4に上げた時に躓いた点をメモしておきます。
起こったエラーはCanvas->Buttonをクリックしようとした時に認識されないという問題です。

PointerEventData pointer = new PointerEventData (EventSystem.current);
		pointer.position = new Vector3 ((float)Screen.width / 2f, (float)Screen.height / 2f, 0);

以前はこのようなコードを書いていました。
このコードはスクリーンの中心からポインターを飛ばして当たったオブジェクト(UI)に対してどういう動きをするというコードでした。
PCだと動きますがGearVRにビルドすると全く動かないという問題に直面しました。

そこで

using UnityEngine.VR // この行を一番上に追加

PointerEventData pointer = new PointerEventData (EventSystem.current);
		pointer.position = new Vector3 ((float)VRSettings.eyeTextureWidth / 2f, (float)VRSettings.eyeTextureHeight / 2f, 0);

これで動きました。

この場合PCでは動かないのでbool isPCModeかなにかを定義してPCモードの時は

pointer.position = new Vector3 ((float)Screen.width / 2f, (float)Screen.height / 2f, 0);

GearVRモードの時は

pointer.position = new Vector3 ((float)VRSettings.eyeTextureWidth / 2f, (float)VRSettings.eyeTextureHeight / 2f, 0);

とするといいかもしれませんね。

Unity C#でのLINQ(難易度:中)

かずまです。


C#ではLINQというSQLを直感的に扱えるコードの書き方ができます。
結構これがC#の醍醐味と言ってもいいかもです。

実際の現場で使われているかどうかは定かではありませんが、分かる人にはすごくわかりやすい書き方です。
僕も抵抗なくかけました。

LINQとは

Language Integrated Query、略して LINQ と呼ばれるもので、 リレーショナルデータベースや XML に対する操作をプログラミング言語に統合するものです。

LINQ を用いることで、様々なタイプのデータソースに対する検索や操作を、 共通の構文で行うことができます。 IEnumeable を実装するコレクションクラスに対するもの(LINQ to Object)や、 XML に対するもの(LINQ to XML)、 それに、リレーショナルデータベースサーバに対する SQL クエリを生成するもの(LINQ to SQL)などがあります。

実際のコード

書き方はオブジェクト指向言語そのものですが若干なれないと難しいかもしれません。
今回はSelectだけメモしておきます。

Select文

実行結果は6以上の値を取って表示します。

もっと使って見たい感じはありますね。