TexturePacker

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-04-20-25-04
そろそろgame開発を真面目に勉強するかなと思ったので、texturePackerがほしくなった。
しかしtexturepackerは有料ソフト。そんなに高くないけれど貧乏な人間には少々辛い。
なにやら調べてみると、ブログで記事にしたらフリーライセンスもらえるとのことなのでその波に乗ってみる。
フリーライセンス申し込みはここから
ちなみに吐き出す形式は色々選べて、いろいろなプラットフォームをサポートしている。
ぼくは、pixi.js,unity,spriteKitで使う予定
ずっと昔にこの記事読んだの思い出した。Sprite Kit Animations and Texture Atlases in Swift
デファクトスタンダードなのかな。texturePackaer使いましょう。

開発者に感謝して買うべきところだけど、無料にこしたことはない。。いつか還元します。 あっといまにsprite素材ゲットできるのは嬉しい。

Pocket

フロントエンジニアのWordPress抹殺術(Express+Prismic.io)

今回は前置きのみです。
※深夜の駄文です。流し読み程度にしてください。怒らないでください。

  • 前書き
  • フロントエンド開発環境構築(Prismic.ioの使い方)
  • EC2にNode環境構築。お名前.comで取得したドメイン当てる。
  • Nginxリバースプロキシ設定 pm2でデーモン化

前書き

まず、フロントエンドの開発ディレクトリを見てもらいたい。

ついこないだまで

今日この頃

「ふぁ!!??」

昨今のフロントエンド開発は、ご存知の通りすごいことになっており、nodeなりなんなりでいろんなものを自動化してる。
もはやhtmlを素書している古代文明の人はいないだろう。汗
静的サイトをつくったり、ajaxでapi叩く程度ならフロントで完結するので話は簡単なのだが、
サーバーと連携したシステムを構築する場合、フロントエンジニアとサーバーエンジニアはどうやって仲良くしたらよいのだろうか。

こんなに世の中進化したというのに、CMSとなるとなぜか今もwordpressが根強い。
モダンなwordpressのテーマを作るフローはどうなっているのだろうか。
フロントエンジニアがnode環境で吐き出したhtmlにサーバーサイドエンジニアがphpのタグを組み込んでいるのだろうか?
考えただけでも吐き気がする。jadeなりslimなりで作ったhtmlをその後いじるというのはどう考えてもやばい。
(実際の作業を知らないのでそんなことないと思う。偏見で喋っていますごめんなさい。あったら知りたいです教えてくださいお願いします。切実)

そして苛立ったフロントエンジニアは言った。
「えーい!全てnodeでつくってやる!php消え去れ!」
そしていきついたのが

Express + Prismic.io
である。

AWS EC2でnode環境を構築し
ExpressをたちあげNginxでリバースプロキシを。デーモン化にはpm2のお世話に。
Expressのtemplate Engineにはjadeを使い、
コンテンツ管理にはPrismic.ioを使う。

「こ、これだ!!」

通常静的なサイトを作る時コンテンツ管理はyamlを使っている。(その昔、師匠に教わった)
Prismic.ioを使えば、yamlで使っていたjadeをほとんどそのまま利用できたりする。神のようだった。

ちなみにNodeで作られたCMSはけっこうある。GhostだとかKeystoneだとか他にもたくさん。
色々試してみたがすべてしっくりこなかった。
Ghostはいい感じだったのだが、template engineにデフォルトではjadeが使えず、handlebarsというtemplateを使っていた。pluginでjadeも使えそうだったけれど、ghostの開発者がjadeはロジックが中に書き込めてしまうからよくないみたいなことを言っていたが、使い方次第だと思うし、
僕にとってhtmlにタグが書けますよ的なtemplateは全く求めていなかったので思想が合わないと感じて止めた。
https://github.com/TryGhost/Ghost/issues/1131

そして行き着いたのが prismic.ioだった。
日本語での情報は全く出てこなかったがgoodpatchが社内blogで使っている様子だったので信頼が置けた。
Rubyで利用している様子。

Prismic.io自体はNodeでの開発にも重きを置いている様子?だった。(勝手な偏見かも)
実用的かどうかはサービスの信頼度が不明なのでよく分からないが、使い勝手はとてもすぐれていた。

フロントエンジニアの皆様はCMSをどうしているのでしょうか。

次回は
実際に組み込みの作業をメモがてら書こうと思いますす。深夜の駄文ですた。

そしてこのサイトもその昔wordpressで作った。そのうち殺す。

Pocket

Python QTアプリ Standalone App化メモ

pythonアプリをdesktop化する必要がでたので色々と調べた。
pythonアプリをstandaloneアプリにするツールはいろいろあったけれど、結局pyinstallerを使うことにした。
ちなみにqtcreatorをつかうとGUI作るのまじで楽。

OUTLINE

  • 環境
  • pyenvで環境作る
  • PyQt5
  • pyinstaller
  • qtアプリケーションを作成
  • standaloneアプリ生成

環境

mac環境でpythonのバージョンをpyenvで管理している人はたくさんいる気がするし、pyenvやqtをhomebrewで入れている人は多い気がするのに、まとまった情報は探してもなかなか出てこなかった。

pyenvで環境作る

何も考えずpyenvで入れたpython3.5.0で pyinstaller使おうとしたら
libpython3.4.dylibがないよ!的なエラーが出た。
pythonをframeworkとして入れておかないといけないらしい。
コンパイル周りにも気を使ってpythonをインストールする必要があった。

そしてこれも。

PyQt5

とりあえずinstall

pyqtはpipでinstallできないぽいので、brewでインストールしたpyqt5をpyenv環境にシンボリックリンクして使えるようにする。

とりあえずこれで使える。 若干きもいが。。

pyinstaller

pyinstaller はpipからinstallできる。

qtアプリケーションを作成

とりあえず簡単なqtアプリをかく。

以下をqt.pyとして保存

standaloneアプリ生成

そしてやっとお待ちかねのこれ。
コマンドラインから

どりゃ。
./dist/に
qt.app
ができる!!!!

やったぜ!!

Pocket

Mawaru

guruguru

GLSLお遊び
http://junpop.lolipop.jp/_test/ultraq/?text=Gollowars
urlのGollowarsのとこを好きな文字に置き換えれば、その文字がウネっとするよ。

source

Pocket

OpenCV with Python

  1. 環境づくり

– 画像生成
– 画像読み込み
– 画像の色の平均値出す
– 画素をいじる
– トリミング
– リサイズ
– 加算
– アフィン変換
– 反転
– グレースケール変換
– 描画関数のCircleを使う。
– 色の抽出
– カラーチェンネル入れ替え
– alphaチャンネルの操作 ※途中

環境づくり

はいさて。画像処理まともに勉強せんとな。。!そんならopenCVだろ!と思ったところで、
openCVをいじる環境を整えるのが一苦労なのです。普通の人は。
とりあえずpythonでいじろうと思います。
構成は

  • pyenv-virtualenv
  • anaconda
  • opencv

(Mac OSX Yosemite 10.10.5,Python 2.7.11,opencv 2.4.12)

です。今時じゃないのが悔しいが。。
python2.7でopencv2で書かれてる情報が多いからとりあえずの勉強はこれでよいかも。

僕の場合pyenv-virtualenvがhomebrewで昔入れてました。別にバージョン管理とかいらねえよって方はごめんなさい。
MacのHomebrewでpyenv-virtualenv環境を作る
たぶんこのへん参考にしたらできます。

pyenvの環境ができたら
勉強したいディレクトリに移動

どりゃ。これでopencvいじれます。簡単すぎ
ありがとうここ
pythonでOpenCVを使う一番簡単な方法

画像生成

画像

画像読み込み

画像

画像の色の平均値出す

画像

画素をいじる

画像

トリミング

画像

リサイズ

画像

加算

画像
画像
画像

アフィン変換

画像

反転

上下に反転
画像

左右に反転
画像

グレースケール変換

画像

描画関数のCircleを使う。

画像

色の抽出

Original

画像

Extraction

画像

Add

画像

カラーチェンネル入れ替え

画像


sourceはこちらgithub
勉強すること無限なのでたぶん続編あります。

Pocket