Google App EngineとDjangoを使って、自作webサイトを開設する!

前々から自分のwebサイトを持って見たい!と思っていました。

しかし、自分はweb系を専門にしているわけではないのでレンタルサーバなどはちょっと...

そんな中、Google App Engine(GAE)とDjangoPythonを学習する機会がありこれを使ってwebサイトを開設できるのではと思い、やってみました。

 Django公式のチュートリアルが非常にわかりやすくなっているので、この通りにすればすんなり開発できるはずです。

よって、今回はDjangoで開発したwebサイトをGAE用に適用させる際に苦労した点についてまとめていきたいと思います。

 

1. ローカルで開発したDjangoアプリケーションをGAEにデプロイ

Djangoで作成したアプリケーションをGAEにデプロイするには開発したプロジェクト内に、GAEデプロイに必要な2つのファイルを追加しなければなりません。

1つ目はapp.yamlファイルです。

app.yamlをmanage.pyと同じ階層の所に作成。

中身を↓のように書き込む

 

<~~~ProjectName~~~>のところを自分のプロジェクト名に置き換えてください。

 

2つ目はrequirements.txtファイルです。

app.yamlと同様の階層に作成し、↓のように書き込みます。

 

 使用するバージョンによって値は書き換えます。

 

ここまでは、GitHubのサンプルプロジェクトでも確認できます。

 

その後、

 

virtualenv env
source env
/bin/activate
pip install
-r requirements.txt

のコマンドを実行して、デプロイの準備をします。

モデルを設定している場合は、

 

python manage.py makemigrations
python manage
.py makemigrations polls
python manage
.py migrate

も実行します。

 

あとは、

 

gcloud app deploy

でデプロイすれば完了です。

 

https://<your-project-id>.appspot.com

にアクセスすれば、作成したwebアプリケーションがみれるはずです。

 

 

2. ALLOWED_HOSTSの設定

僕はデプロイが完了しても、ホスト名で弾かれました。

調べてみると、Django1.5以降ではsetting.pyファイルのALLOWED_HOSTSを設定しなければいけないらしい。これを設定しておかないと、時間をかけてGAEにデプロイしたのに弾かれてしまう...泣

僕はまだ開発中なので、とりあえず

ALLOWED_HOSTS = ['*']

ワイルドカードにしておきました。プロジェクトが完成してドメインを取得したら、ちゃんと設定しようかと....

 

 

3. webサイトへの静的ファイルの追加

これが一番苦労しました。

ローカル環境では画像やJavaScriptファイルなどの静的ファイルはうまく機能していたのですが、GAEにデプロイしたものを確認すると画像は表示されないし、jsは機能していませんでした。調べてみると、GAEはGunicornサーバーだから静的ファイルを処理できないという.....。

じゃあ、どうするのかというとGoogle Cloud Storageを使えとのこと。

 

gsutil mb gs://<your-gcs-bucket>
gsutil defacl
set public-read gs://<your-gcs-bucket>

で、一般読み取り可能なCloud Sttorageバケットを作成。

 

python manage.py collectstatic

でローカルの静的ファイルを一箇所にまとめます。

そして、まとめた静的ファイルを

 

gsutil rsync -R static/ gs://<your-gcs-bucket>/static

でCloud Storageにアップロード。

 

あとは、htmlなどから

https://storage.googleapis.com/<your-gcs-bucket>/static/~~~~~

にアクセスすれば画像ファイルやjsファイルが得られるので、webサイトに貼り付けられます(~~~はstatic以下のディレクトリ)。

 

 

これらをやってみると....

f:id:IKEP:20180919215235p:plain

無事、webサイトとして公開できました🎉

 

 

これでDjangoもGAEも勉強は完了したので、本格的に自分のwebサイト作っていこうかな...😁

 

参考サイト:

App Engine フレキシブル環境での Django の実行(Google)

 Django 1.5以降ではALLOWED_HOSTSの設定が必要

RGBカメラ画像処理による関節角度推定

大学の画像処理の実習で、実験の課題が出されました。

実験の内容としては、「今まで学習したことを使って、実験する価値のある画像処理プログラムを作成する」ことです。「実験する価値がある」というのは、すでに実現できるとわかっているものではなく、実験してみないとわからないものということでした。

 

そこで私はRGBカメラによる人間の関節角度推定システムを作ることにしました。

普段、開発をしていてRGBカメラしかない状況で、「深度センサーを組み込んだRGB-Dカメラのような距離情報を取得できるカメラがあれば…」ということが多々あります。例えば、iPhoneアプリ開発で、iPhoneのカメラを使ってセンシングする場合など.....

Kinectのような深度センサーが組み込まれたRGB-Dカメラなら関節推定はできる(と思う)のですが、RGBカメラでは普通にはできません。

 

 

システム構成

今回は腕の関節角度推定をしました。

肌色領域抽出とテンプレートマッチングがベースのシステムになっています。

 

簡単な流れとしては、

1. 上腕と前腕部分をテンプレート画像として抽出

2. 腕を任意の角度に曲げて角度推定開始

3. 上腕と前腕部のテンプレート画像から腕の状態の候補となる合成画像を生成

4. 角度推定を開始したときのフレーム画像と3の合成画像を肌色抽出し、2値化

5. 4で生成した二枚の画像でテンプレートマッチングし類似度計算

6. 3で肘関節、肩関節の角度を変えながら3~5を繰り返す

7. 最も類似度が高かった時の合成画像の状態を推定結果として出力

となっています。実際の画像で見ていきましょう↓

 

1. 上腕と前腕部分をテンプレート画像として抽出

マウスドラッグで赤色の枠を出し、画像切り出し部分を選択します。

f:id:IKEP:20180805142001p:plain

切り出した画像が↓

page6image1768224  page7image1772480
 

 2. 腕を任意の角度に曲げて角度推定開始

適当に腕を曲げて角度推定開始です。今回、角度推定開始はキーボードのpキーを押したら始まるようにしました。

 

3. 上腕と前腕部のテンプレート画像から腕の状態の候補となる合成画像を生成

一度、上腕に対して前腕部を回転させた画像を生成し、その画像全体を回転させています。その結果の合成画像が↓

f:id:IKEP:20180805143821p:plain

前腕部回転により肘の回転、そのあとの画像全体の回転によって肩の回転の候補を作成しています。

 

4. 角度推定を開始したときのフレーム画像と3の合成画像を肌色抽出し、2値化

合成画像に対して肌色領域抽出して2値化したものです↓

f:id:IKEP:20180805150155j:plain

 

5. 4で生成した二枚の画像でテンプレートマッチングし類似度計算

6. 3で肘関節、肩関節の角度を変えながら3~5を繰り返す

7. 最も類似度が高かった時の合成画像の状態を推定結果として出力

 

 

プログラム

以上のことをプログラミングしたのが↓

Visual StudioC++OpenCVで実現しています

今回は腕の肩側が左側に、手のひら側が右側でカメラに映るのを前提にしています。

 

 

 

動かしてみる

コンソールに出力されてる文字が見にくいですが…

肘関節角度は肘の開き具合です。肘を曲げずに腕がまっすぐなら180度、完全に曲げたら10度(?)です。

肩関節は腕を水平にしている状態が0度、そこから下に降ろした状態が-90度、上にあげた状態が90度です。

 

まとめ

色々試行錯誤して作った結果、そこそこいい感じに推定できているのではないかなと....

ただ、計算速度が遅すぎるのは問題ですが....笑

やっぱ、RGB-Dカメラを使うのが手取り早いです..... (^^;

 

 

Swiftによる自作開発アプリの紹介

私が自作&現在リリースしているアプリを紹介していなかったのでこのブログでも紹介しておきます。

プログラミングを始めて間もない頃に作ったものですので、2年弱前(?)くらいのものかと....。IKEPはApple信者であることもあり、その頃からSwiftを勉強してiPhone用とMac用を1つずつ作りました。

それがこちら↓

 

Eye Break Timer 

f:id:IKEP:20180801225355p:plain

 

iOSアプリはこちら↓

Binary Calculator 

f:id:IKEP:20180801230016p:plain

 

 

2つとも自分が使いたいからという理由で作りました(笑)

EyeBreakTimerはこの頃開発のためにPCを触る時間が増えたことによって、時間を忘れて作業してしまうのを防ぐために作りました。作業を邪魔しないことが大前提になっているため、ステータスバーでの表示とMacのスリープとの連携によって全自動化を図りました。

BinaryCalculatorは大学の授業課題(宿題)の中で2進数などを扱うことが多々あった時期に、サボるために作りました(笑)

 

よかったらダウンロードして使ってください(^_^)/

 

余談

AppStoreへのリリースは日本では20歳にならないとできないと知った時は悲しかったです.....。よって20歳になるまで1年近く公開せずに眠っていたのです~~~

 

また最近、たまたま私のアプリを紹介してくださっているブログ(?)記事を見つけたので載せときます~↓

 Macで眼精疲労・疲れ目をを軽減・対策する設定方法

 

本格的なゲームを作ってみたい ~進捗その1~

今までUnityを色々勉強したり、何か作ってみたりとしてきたが、(Unityを使った制作物で)商品として売り出せるような作品を作ってないなと思い、商品レベルの本格的ゲームを最初から最後まで1人で作ってみるかと思い立った。

 

そこでどういうゲームにするかを考えたときにちょうど知ったのが、Nintendo Switchゼルダの伝説 BREATH OF THE WILD」

販売からかなり時間が経っていましたが、友人から神ゲーと言われて少しやってみると、神ゲーでした 笑

知らない方はこちらから~(Youtube)

 

まあ、そんなこんなでこんな神ゲーが作れないかなと.....w

RPGはUnityの勉強で簡単なのは作ったことがあったんで、RPGで作るかと決定。

(RPGゲームの勉強で作ったやつ~↓)

 

 

で、とりあえずRPGで方向は固まったんで、アイデア出しをしてどんなゲームにするかは自分の中では決めました。(細かいことを変更するかもなんで、まだ内緒...)

プラットフォームとしてはPCとスマホの両方を考えています。

 

ゼロから開始して1ヶ月ほどでこんな感じ(スマホ版収録)↓

 

最初の1ヶ月はステージ作成と移動制御関連ばっかだったような.....

 

で、さらに1ヶ月(制作2ヶ月目)ほどでこんな感じ(PC版)↓

 

だいぶ発展しました。ジャンプや泳ぐのができるようになり、敵の種類も増え攻撃してくるようになりました。最後のワープはエフェクトだけ作りました(ゼルダBotWのワープシーンのマネですw)。

 

このプロジェクトのプログラムはこちらから~(Github)

UnityプロジェクトがGithubにあげれなかったのでスクリプトだけ(随時更新します)

 

以上、進捗その1でした。これからもたまに進捗書くと思いますので、またその時に~

Processingを使ったインタラクティブコンテンツ作品 with OpenCV, ARToolKit

大学での実習を通して、Processingを使ったインタラクティブコンテンツを作成しました。

Processingを使うのは初めてという中で、ある程度形になったものをここに上げておきたいと思います。

(課題提出締め切りギリギリまで制作していたので、ソースコードは汚いです.... m(_ _)m)

 

画像処理インタラクティブコンテンツ

カメラ入力を使ったインタラクティブコンテンツを作成せよ、と言う課題が出されました。

そこで私はOpenCVでの画像処理を組み込んだコンテンツを作成しました。

完成品はこちら↓

 

モグラたたきです。カメラを机に向けて設置して、机の映像に対応した部分を叩くとモグラを叩くことができます。アルゴリズムを試行錯誤したら、手が早く動いてもトラッキングの精度が落ちないようにできました。

 

OpenCVでは顔認識はデフォルトで簡単に行えるようになっているのですが、手形状認識はできません。そこで、手形状認識をしてバーチャルなものに触れることができるものを作ろうと思いました。

普通のRGBのwebカメラで映像を取得し、HSVでの肌色抽出で実現しました。この肌色領域を取得して、その領域とモグラのCGが接触したらモグラを叩いたと認識させています。

 くわしく詳しくはこちら(プログラム)

 

 

ARToolKitを使ったオブジェクトの3次元制御ARシステム

次にARToolKitを使ったARインタラクティブシステムを作成せよ、という課題が出されました。

ARToolKitはARマーカーを使って仮想オブジェクトを表示します。しかし、マーカーをオブジェクト表示だけに使うだけではつまらないと思い、コントローラとして使おうと考えました。

完成品はこちら↓

 

マーカーを手で隠したり見せたりする事でボタンとしての機能を持たせつつ、マーカーの回転角度をアフィン行列で取得。その中から平面に対して垂直な軸を中心とした回転角度を抽出し(その他の軸の無駄な回転角度を削る)、この角度を使ってオブジェクトをアフィン変換しています。

回転軸切り替えをした時に、オブジェクトに適応しているアフィン行列を今までの変換行列に掛け合わせることで、今までの回転操作の状態を保存したまま異なる回転軸でさらに操作を行えるようにしました(線形代数学ちゃんと勉強しといてよかった…(^^))

詳しくはこちら(プログラム)

 

感想

普段、Unityの方をメインで使うんでProcessingはあまりやった事なかったですが、やってみると面白かったのでもっと勉強したいですね(^_^)

なによりも描画関係がすごく簡単にできるのが衝撃的でした。

 

 

追記

最終課題で、上記のことを全部混ぜたレーシングカーゲームを作りました。ARマーカーの回転角度で車を操作、手認識とオブジェクトへの接触判定でスピードアップです。

ついでにランキング機能を組み込みました。ランキングの順位は、(速くゴールする)>(遅くゴールする)>(ゴールできなか ったときの走行距離⻑)>(ゴールできなかったときの走行距離短)の順です。

完成品はこんな感じです↓。昔のゲームによくある8ビット風の世界です♪

 

 

PC内蔵のカメラを使っているので、映像の精度が悪いです....

工夫点としては、

・「ゴールできないかもしれないリスクを背負うが、スピードアップして走行距離をかせぐ」か「走行時間は遅くなるが、着実にゴールするのを狙う」など、ユーザの判断によって、ユーザ個人個人の楽しみ方を自然に提供したところ

・ARマーカー、画像処理による操作をインタラクティブかつ直感的なものになるよう設計

などですね

 詳しくはこちら(プログラム)

 

 ただ、自分がunityでの制作に慣れたせいか、シーンの切り替えがprocessingではやりにくいなと感じました 笑

AfterEffects, PhotoShopでVFX、アニメーション動画制作

今回はプログラミング関連ではなく、Adobeで映像制作をした時のゆる〜いお話です。

 

VFX制作

大学生になって初めてPCを購入し、本格的な映像制作ができる環境になり早速Adobeをはじめました。で、VFXというかっこいいジャンルを知り、何もないところからmacが出てくるVFXを作りました。

素材は二枚の写真

f:id:IKEP:20180629235000j:plain

f:id:IKEP:20180629235018j:plain

全く同じ構図でmacを置いた写真とと置いていない写真です。

 

まずはphotoshopで加工〜

macを部品ごとに分解します。

f:id:IKEP:20180629235324j:plain

最終的には、キーボード、トラックパッド、ディスプレイ、USB差し込み口、本体上部・下部、アイコン、ステータスバーに分解しました。

 

この分解したのをAfterEffectsで動きをつければ完成です。

(作ったのが2年前でなので制作中のスクショが残っていません.....)

 

 

 

 アニメーション制作

しばらくしてアニメーション映画「君の名は。」で一大ブームを起こしました。Youtubeでは、 実写で予告編を再現してみた動画が流行りました。そこで僕は大学キャンパスの風景を使ったアニメーションの予告編を作ってみました(笑)

今回は正式な予告を真似てみたものです。正式予告はこちら

キャンパスを歩き回って写真を撮り、その写真を「君の名は。」風に加工し、AfterEffectsの下準備。例えば↓

f:id:IKEP:20180630000813j:plain

↑これをAfterEffectsで動かすために雲を切り取り、欠損部分を修正↓

f:id:IKEP:20180630000955j:plain

 

編集様子(1万倍速?)↓

 

で、完成品がこちら↓

 

 

おまけ「なぜ映像制作をしていたのか」

僕は幼稚園から高校生までずっとサッカーをしていました。中学生の頃、自分たちの試合の分析や敵チームの傾向分析などのために、カメラで試合の動画を撮ることがありました。その時に撮り方がうまいと言われ、映像に興味を持ちました。(単純w)

そこで、映像音響についての勉強ができる今の大学に行きました。しかし、大学に入ってプログラミングに触れ、映像以外のモノづくりにもハマりました。つまり、僕にとって映像制作は今の僕の原点なのです(笑)

Unity&Blenderによるキャラクターアニメーション 〜モデリングからアニメーション、表情つけ、物理判定まで〜

Unityでゲームとかを作るとなると必ずと言ってもいいほど、必要なのはキャラクター。そのキャラクターのアニメーションはゲームの面白さや完成度を左右すると言っても過言ではないと思います。しかし、Unityのアニメーション関連を説明している書籍やサイトはあまりないように思います。アニメーションよりプログラムなどの動作関連に重視しすぎな感じが.....

そこで今回は、私が今までいろいろキャラクターアニメーション関連でいじってきた小ネタたちをまとめて載せておきたいと思います。興味があるとこだけ見ていただいたら良いかと思います......

 

Blenderによるキャラクターモデリング

僕はモデリングよりはUnityとかでのプログラミングの方が専門ですが、Unityで自作キャラクターを動かして見たいと思って、作りました。

こちらの方の記事を参考にして作りました。

非常にわかりやすいので、作り方はここでは割愛。

制作中の様子だけ↓

 UnityにこのBlenderデータをそのまま取り込み、アニメーションをつける(アニメーションの付け方は↓で)。せっかくなんでARでやって見ました。

 

アニメーション制作方法

モデルが用意できたらアニメーションをつけます。

まず、モデルのボーンをUnityで適用させる

UnityにインポートしたモデルのInspectorの画面からRigを選択=>Configure...を選択

f:id:IKEP:20180615123009p:plain

自動的にボーンが適用されます↓

f:id:IKEP:20180615123024p:plain

 

もし、適用できていないところがあれば赤く表示されるのでその部分は修正します。

f:id:IKEP:20180615123502p:plain

 

適用されない主な原因としては、「モデルがT字ポーズになっていない」、「ボーンの階層構造がおかしい」、「必須のボーンが存在しない」などがあげられると思います。

T字ポーズはUnity画面の右下のRotationをいじってT字にしてあげれば解決すると思います。階層構造だとモデリングソフトでボーンの階層構造をUnityが認識する構造にしてあげる必要があります(こちらの記事など参考にすれば良いかと....。動作確認はしてません)。必須ボーンはUnity画面右の図で実線の丸になっているものがそうです。破線は任意なので設定してもしなくても良いです。

 

そして、アニメーションをつけます。

 Animator Controllerを作成してAnimation Clipを配置

この辺のことはググれば出てくるので割愛

f:id:IKEP:20180615140002p:plain

 

Animation Clipを自分で作るならAnimationウィンドウでこんな感じに編集↓

f:id:IKEP:20180615140634p:plain

 

 

表情つけ

キャラクターの表情をつけていきます。基本的にはAnimationClipの作成と同じで、AnimationClipで体とかを動かすのではなく、顔のBlendShapesの値をAnimtionClipでいじるという感じになります。

自作モデルの場合はモデリングソフトで前準備をしておきます。

Blenderの場合はシェイプキーを設定しておきます。

f:id:IKEP:20180615144431p:plain

f:id:IKEP:20180615144510p:plain

シェイプキーを設定したモデルをUnityにインポートするとBlendShapesが表示されます。

f:id:IKEP:20180615144750p:plain

AnimationClipでこの値を変化させると表情の完成です。

瞬きと笑顔をつけてみました。瞬きをつけるだけで、無表情の時よりリアルさがグッと増します(^_^)

 

 

物理判定

物理判定といっても、キャラクターの服や髪、体などのキャラクターの部品同士の物理判定です。

まず、最初にこれらを考慮しなかった時がこちら↓

 髪が硬いままだったり、髪やスカートが体に食い込んでしまってます.....。

これを改善していきます。

まず、体の各部位にColliderを設定

f:id:IKEP:20180615152155p:plain

そして、スカートにClothを設定。これだけでスカートがなびく感じが出ます。

スカートとの接触するもの部位のcolliderを教えてあげます。

f:id:IKEP:20180615152509p:plain

 

同じく、髪の毛も設定していきます。

f:id:IKEP:20180615152824p:plain

髪のなびく感じにもClouthを使いました。髪の毛の動く範囲も決めます。

ClouthのEditConstraintsを選択

f:id:IKEP:20180615153138p:plain

頭皮の部分(赤い点)を選択してMaxDistanceを0にします(これをしないと髪の毛が落ちていくw)。それ以外のところはMaxDistanceを任意の値にします。

 

これで物理判定は完了です。

 さっきと比べると、かなりリアルさが出たと思います。(ARで動画を撮りたかったですが、iPhoneで動かすと重たくて動きがカクカクしたので、Unity上で動かしてます)

 

 

感想

ヒマな時にこれらを小ネタとしてやっていましたが、これら全部を組み合わせてゲームとかを作るのは大変だなと思いました。しかし、頑張って組み込めば(アニメーションの点では)ゲームのクオリティは上がると思います。

今制作中のゲームにも頑張って組み込むか.....

ただ、モデリングはもうやりたくないかな 笑

 

おまけ

最近、いろいろ勉強したのを使って任天堂スイッチ「ゼルダの伝説 ブレス オブ ザ ワイルド」のワープシーンを作ってみました。(アニメーションだけでなく、パーティクルの勉強もいるが...)