40歳から始めるブログ: 2015

2015年11月7日土曜日

AndroidStudioとBitBucket

Android StudioとBitBucketでのソースの管理に関して備忘録として残しておきます。

準備編

１．Bitbucketeでリポジトリを作成
２．以下のコマンドをGitで管理したいフォルダで実行

$mkdir /path/to/your/project
$cd /path/to/your/project
$git init
$git remote add origin git@bitbucket.org:abetakashi/git.git

３．Android Studioでプロジェクトを作成し、上記のフォルダに保存
４．VCS->Enable Version Control Integrationを選択し、Version Control SystemでGitを選択。
　　 enter image description here
　　
５．表示をprojectに切り替えて、右クリック -> Git -> Add

最初のCommit&Push

１．Version ControlタブのLocal Changeタブでdefaultにコミットしたい項目が入っていることを確認し、VCSボタンをクリック
　　 enter image description here
２．Perform code analysisとCheck TODOのチェックをはずし、コミットメッセージを記載して、Commit and Push。
　masterにコミットされる。
　　

修正分のCommit&Push

コードを修正し、くぎりのよいところで節目として残したい場合は、最初のCommit同様にVCSボタンを押して、Commit and Push。
Logを見るとちゃんと追加されている。
enter image description here

あるところまで戻したい場合

もどしたいコミットを選択し、右クリックし、Checkout Revisionを選択。
enter image description here
右下のGitの表示がmasterから指定したRevisionのコードと、HEADの位置も変わっている。
　

戻したところから再度修正し、Commit&Pushをしようとすると以下のような警告がでるので、戻ったところからブランチする。
enter image description here

ブランチの仕方

先ほど戻したRevisionで右クリックし、New Branchをクリックし、ブランチ(TEST1)を作成する。
enter image description here

これにより、masterからTEST1ブランチに移動している。
enter image description here 　

この状態で先ほどの修正をCommit&Push。
コミット1追加からブランチされて修正が反映されている。
enter image description here

マージの仕方

先ほどTEST1ブランチで修正した内容をmasterにマージしたい場合は、以下の通りLocal Branchesのmaster -> origin/masterを選択してMerge

enter image description here

Conflictsしていたのでファイルを修正し、再度そのファイルを選択してGit -> Add後、Commit & Push

enter image description here

マージはされたがTEST1をmasterにマージしたのではなく、masterがTEST1にマージされたっぽい。

RESETやREVERTをやってみたがうまく戻せないのでもう一度ブランチ(TEST4)を作ってMASTERをチェックアウトし、TEST4を選択してMARGEとすることでmasterにマージできました。

enter image description here

うまくマージができたのでTEST4は削除されたみたいです。
enter image description here

2015年11月1日日曜日

Google Mapを使ったアプリを作ってみる。

Google Mapsのサンプルアプリを勉強したので、備忘録として残しておきます。
※Android Studioでの開発が前提です。

１．build.gradleにgms:play-servicesを追加し、 enter image description here をクリック。

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:appcompat-v7:22.2.1'
    compile 'com.google.android.gms:play-services:7.0.0'
}

２. 以下でコマンドでフィンガープリントがでてくるので、
SHA1のやつをメモっておく。
keytool -v -list -keystore ~/.android/debug.keystore

enter image description here

３．以下にて名前、パッケージ名、フィンガープリントを入力し、作成する。
https://console.developers.google.com/apis/credentials/key?project=mapsactivity-1116&type=CLIENT_SIDE_ANDROID

４． AndroidManifest.xmlでgogle_maps_keyに取得したAPIキーを入れる。

 <meta-data
 android:name="com.google.android.maps.v2.API_KEY"
 android:value="@string/google_maps_key" />

[参考]
http://qiita.com/POCOio_oi/items/e0f30ad5fcfc82fe0f52

AndroidでDropboxを使う

AndroidアプリからDropboxへのアクセスするための準備を調べたので備忘録としてまとめて置きます。

１．以下にアクセスして画面右側にある enter image description here をクリックする。

https://www.dropbox.com/developers/apps

２．アプリを登録するとApp keyとApp secretが取得できるのメモっておく。

enter image description here

３．以下にアクセスしAndroid版のDropbox SDKをダウンロードし、解凍する。
https://www.dropbox.com/developers-v1/core/sdks/android

４．解凍したフォルダのlibフォルダの下にある以下の２つを自分のアプリの\app\libsフォルダにコピーする。
　dropbox-android-sdk-1.6.3.jar
　json_simple-1.1.jar

５．コピーしたライブラリをプロジェクトに読み込ませるために
Android Studioの enter image description here ボタンを押す。

６．MainActivity.javaに以下を記述し、先ほど取得したkeyとsecretを入れる。

 private static final String APP_KEY = "app key";
 private static final String APP_SECRET = "app secret";

７．AndroidManifest.xmlに以下を追加する。

<activity
  android:name="com.dropbox.client2.android.AuthActivity"
  android:launchMode="singleTask" >
  <intent-filter>
    <data android:scheme="db-APP_KEY" />
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.BROWSABLE" />
    <category android:name="android.intent.category.DEFAULT" />
  </intent-filter>
</activity>

[参考]
http://www.theappguruz.com/blog/10-steps-integrate-dropbox-api-android
http://qiita.com/mizofumi0411/items/fed5c43fc36c5a945a7b
https://www.dropbox.com/developers-v1/datastore/sdks/android

2015年10月18日日曜日

Atomで文字コードの自動判別

Atomエディタにて日本語のファイル名が豆腐になっていたり、
開いたファイルの文字コードをいちいち変えなくてはいけなかったので、調べていたところ
以下でできるようになりましたので、備忘録として記載します。

１．iconv-liteとjschardetのインストール

　※node.jsも必要なのだが、Ubuntuは入っているということなので、インストールはしていない。
　　

npm install iconv-lite
npm install jschardet

２． init.coffeeの修正
.atomフォルダにあるinit.coffee ファイルに以下の記述を追加する。

fs = require('fs')

atom.workspace.onDidOpen ->
  editor = atom.workspace.getActiveTextEditor()

  try
    filePath = editor.getPath()
  catch error
    return
  return unless fs.existsSync(filePath)

  jschardet = require 'jschardet'
  iconv = require 'iconv-lite'
  fs.readFile filePath, (error, buffer) =>
    return if error?
    {encoding} = jschardet.detect(buffer) ? {}
    encoding = 'utf8' if encoding is 'ascii'
    return unless iconv.encodingExists(encoding)

    encoding = encoding.toLowerCase().replace(/[^0-9a-z]|:\d{4}$/g, '')
    editor.setEncoding(encoding)

【参考】
http://qiita.com/moris/items/281a588b9773357b27f7
http://text.baldanders.info/remark/2015/atom-editor/

2015年10月1日木曜日

ipodの歌詞の表示に関して

かなり久しぶりにブログを記載します。

iTunesで曲に歌詞を入れられることは知っていたのですが、
歌詞の表示位置や大きさを変えることを今頃になって知りましたので、メモとして残して置きます。
htmlのタグで使えるものがあるようです。

左寄せ:

<style>
div {text-align:left;font-size:16px;line-height:1.4em;white-space:pre;}
</style>
<div><!-- ここに歌詞を入れる --></div>

段落:
<h1>文字</h1>
などh1からh6タグが使えます。

太さと色:
太字 赤字

下線など:
下線 <s>取り消し線</s> 下付き文字 上付き文字

参考:
http://d.hatena.ne.jp/xlc/20121111/1352606682
http://d.hatena.ne.jp/wild-man/20100212/p1

2015年6月29日月曜日

OpenGLのサンプルをやってみたPart2

もう少しOpenGLの理解を深めるためにネットに転がっているサンプルをやってみようと思います。
ということで今回は以下。
http://utage.headwaters.co.jp/blog/?p=1724

サンプルソースもすべて公開されており、ソースにコメントもあるので
大変勉強になったのですが、初心者にとっては理解ができないところがあったので、メモを残したいと思います。

renderMainでglMatrixModeを２回設定しているのはなぜ？

座標系としては透視投影(奥行きによって、大きさが変わる)ような表示をしたいので、
視体積を設定するglFrustumfの前にGL_PROJECTIONとして設定し、それ移行のオブジェクトはモデルビューで設定したいからっぽい。

**テクスチャ画像ファイルは2の階乗になっていないといけない (128px*128pxなど)？？**

　と書いてあったが以下の解像度を試しましたがリードできてました。
　1600x1200
　278x204
　1333x1000
　1600x1600

使った画像は以下です。一応著作権フリーのもの。
enter image description here

キャラの周りが透明にならない。

上記のキャラの周りは透明(アルファ=0)にも関わらず以下のように周りが黒くなってしまいました。

enter image description here

renderMainに以下を追加することで解決しました。

gl.glEnable(GL10.GL_ALPHA_TEST);
gl.glAlphaFunc(GL10.GL_GEQUAL, 0.1f);

これはアルファ値が0.1f以上は描画するということなので、逆にいうとアルファ値が0の部分は描画されなくなったということです。ちなみに黒となっていたのはアルファ値が0の部分のRGB値がすべて0となっていたためです。

gl.glFrustumfって何?

　透視投影への視体積の設定。　引数は、以下の順。
　　Nearの左側の座標
　　Nearの右側の座標
　　Nearの上側の座標
　　Nearの下側の座標
　　Nearの距離
　　Farの距離

　　gl.glFrustumfの引数を変えて見え方がどう変わるかを実験をしてみました。
　　　　　

実験	変数	コメント
オリジナル	-0.3f, 0.3f, -0.2f, 0.2f, 0.5f, 20.0f
実験1	-0.5f, 0.5f, -0.2f, 0.2f, 0.5f, 20.0f	透視投影だと遠くにいくほど大きくなるので、奥行き感がなくなると想定していたが、逆に奥行き感が増えた。よくわからない。
実験2	-0.3f, 0.3f, -0.5f, 0.5f, 0.5f, 20.0f	Nearの縦方向を大きくすることでFar方向の縦の距離の差が減るので縦方向が狭まった。
実験3	-0.3f, 0.3f, -0.2f, 0.2f, 1.0f, 20.0f	見ている視点がZ=1.0fの為か手前側しか見えない
実験4	-0.3f, 0.3f, -0.2f, 0.2f, 0.2f, 20.0f	オリジナルよりNearとFarの距離が増えたので奥行きが広がった？
実験5	-0.3f, 0.3f, -0.2f, 0.2f, 0.5f, 10.0f	オリジナルと変わらない。10.0fも20.0fも同じ？試しに5.0fにしても変わらなかった。
実験6	-0.3f, 0.3f, -0.2f, 0.2f, 0.5f, 1.0f	ねこより後ろが表示されていない
実験7	-0.3f, 0.3f, -0.2f, 0.2f, 0.5f, 2.0f	ねこより後ろが表示されるようになったが、空が表示されていない
実験8	-0.3f, 0.3f, -0.2f, 0.2f, 0.5f, 3.0f	オリジナルと同じになった

参考
http://seesaawiki.jp/w/mikk_ni3_92/d/%BC%C2%C1%A9%CA%D407
https://sites.google.com/a/gclue.jp/android-docs-2009/openglno-kiso
http://www.kameda-lab.org/lecture/2012-tsukuba-ic2/chapter08-j.html
http://ameblo.jp/xcc/entry-10276958074.html

gl.glTranslatefって何?

移動の設定。

実験	変数	コメント
オリジナル	0.0f, 0.0f, -1.0f
実験1	0.0f, 0.0f, 0.0f
実験2	0.0f, 0.0f, -2.0f
実験3	-1.0f, 0.0f, -1.0f	左に移動したので右半分がでていない。
実験4	0.0f, -1.0f, -1.0f	下に移動したので、上のほうがでていない

gl.glRotatefで-70.0fってなぜ-70.0f?

回転。X,Y,,Zどの軸を基準に回転させるか？
以下のように実験してみたが、-70.0fは結構いい感じで奥行き感がでている。

実験	変数	画像	コメント
オリジナル	-70.0f,1.0f, 0.0f, -1.0f
実験1	0.0f,1.0f, 0.0f, -1.0f
実験2	-45.0f,1.0f, 0.0f, -1.0f
実験3	-90.0f,1.0f, 0.0f, -1.0f
実験4	90.0f,1.0f, 0.0f, -1.0f
実験5	-80.0f,1.0f, 0.0f, -1.0f
実験6	-60.0f,1.0f, 0.0f, -1.0f

GraphicUtil.drawTextureって何?

ウインドウにテクスチャを貼り付ける方法の設定。

型	引数	説明
GL10	gl
float	x	テクスチャを貼り付けるウインドウの座標(x)左が0
float	y	テクスチャを貼り付けるウインドウの座標(y)上が0
float	width	1倍なら1.0f?
float	height	1倍なら1.0f?
int	texture	テクスチャのID。GraphicUtil.loadTextureで取得
float	u	テクスチャの横座標。左が0.0f
float	v	テクスチャの縦座標。上が0.0f
float	tex_w	テクスチャの横幅。最大1.0f
float	tex_h	テクスチャの縦幅。最大1.0f
float	r	赤。 1.0fならテクスチャの赤をそのまま表示
float	g	緑。 1.0fならテクスチャの緑をそのまま表示
float	b	青。 1.0fならテクスチャの青をそのまま表示
float	a	アルファ 1.0fならテクスチャのアルファをそのまま表示

型	引数	説明
オリジナル
実験1	width,hightを1.0f,1.0fに変更
実験2	width,hightを3.0f,1.0fに変更
実験3	width,hightを1.0f,3.0fに変更

gl.glPushMatrixって何?

行列スタックの一番上の行列をコピーして、その上に積む。
積まれた行列をスタックからとりだすときは、gl.PopMatrixで取り出す。

なぜ必要？

複数のオブジェクトを描画するときに、基準となる座標を１つ前に描画されたオブジェクト基準ではなく、常に同じ座標を基準に描画するようにする手段っぽい。

もう少し具体的にいうと
描画されるのは一番上のスタックにある行列で、
Translate, Rotateなどに描画に必要な操作はスタックの一番上の行列に対して計算されている。

この状態で次のオブジェクトを描画しようとすると、座標は１つ前の座標基準に考えなければならない。

Push,Popを使うことで
Push(コピー)されたものに対してTranslate, Rotateなどに描画するための演算をし、描画されたらその行列をPopで取り除くことで元の座標基準で描画できるというしくみ。
このサンプルでは地面を最初に描画しているが、地面は、座標をいじっていないのでPush/Popはしていない？

OpenGLでゲームを作る　図形の描画に非常にわかりやすく書いてあります。

使い方としては、以下のような形でPushとPopの間で描画する。

 gl.glPushMatrix();
{
            gl.glTranslatef(0.0f,1.5f,0.5f);  // y軸方向に1.5f,z軸方向に0.5f移動させる
            gl.glRotatef(90.0f, 1.0f,0.0f,0.0f);  // x軸を中心に90度回転
            // 奥背景の描画
            GraphicUtil.drawTexture(gl, 0.0f, 0.0f,
                    2.0f,1.0f,  // width, height
                    backTex,
                    0.0f,0.0f,
                    1.0f,1.0f,
                    1.0f,1.0f,1.0f,1.0f);
        }
        gl.glPopMatrix();