GBStudioの紹介と、そこから始めることになったPython画像処理〜入門〜

2019年4月下旬、画期的なツールが発表されました。その名は"GBStudio"

ゲームボーイのゲームをプログラミングが知らなくても作れちゃうというこのツール。実はすごいのはそこだけじゃなくて、

Web上に公開できて、インストールせずに遊ぶことができる！スマホなら操作ボタンもセットでついてくる！！

これは画期的。だってGitHub Pages を利用すれば誰でも無料で簡単に自分のゲームを公開し、全世界の人に自分のゲームをプレイしてもらえるんだから。
まあ色々制約もあるわけで、例えば、日本語は使えないんです。 しかし、ASCIIコードの一部文字のみ→ASCIIコード対応PNG画像を書き換えて日本語入力を可能にするアプリを開発した方がいらっしゃいました。こちらを参考に。
あと、音楽はMODファイルを使わなきゃいけないのがちょっと使いづらいところ。でもでも、一番大変なのは、

画像は自分で緑系4色を使ったドット絵を用意しなきゃいけないってところ。（イベント画像も）

しかも白黒じゃなくて緑系の微妙な色。
これは結構敷居が高いぞ。

そこで思いついたPython画像処理

簡単にこの問題を突破できる方法はないか、と考えて思いついたのが”Pythonの画像処理”
これを使って画像を上の写真の4色の色に変換すればいいんじゃないか？
そうして作ったのがImageConverter というアプリです。
仕組みは、まず元画像を256階調グレースケールに変換して、それを4つに分けて、上画像の対応色に書き換えるというものです。
どうせならということで、色々な方法でグレースケール変換ができるようにしました。これについては下で解説します。
詳しいことはGitHubを見ていただきたいんですけど、実際に使ってみてこんな感じでした。マップチップはedgeを利用したりして作ったんですけど、やっぱりわかりやすいイベント画像をみていただきましょう！
画像はニコニコのフリーアイコンのものを使用させてもらっています。 うん！ちゃんと表示されていますね！！！

実は色変換をしなくても画像は勝手に変換されてしまうというオチ。

先ほど述べたように、画像は4色でしか表示できません（オブジェクトは3色）。しかし、元画像はそのまま突っ込んでも勝手にツール側で4色に変換してくれました。

今作ったこの画像編集アプリ、無意味じゃん。

残念ですが、悔しいので実際にそのまま突っ込んだ場合とアプリで4色に変換した場合の違いを見てみましょう。
左がそのまま、右が画像編集アプリを使った場合です。
お？！思ってたよりも全然違うぞ
右のほうが髪色とかの色変化がくっきりしてますね！作ったアプリに意味はあったみたいです！！
これで画像が扱えるようになったので、ゲーム開発に挑戦します！！
これで今回の記事は終了です。ここから下はグレースケールの変換に方法の考察を少ししたいと思います。
（編集中）

本場中国の鍋を食べれるお店があったよ

中国には火鍋と呼ばれる食べ物があるらしい。特別変わった食べ物じゃなくて日本でも普通に食べる鍋なんだけど。 中国で人気のお店が新宿にあるらしいから行ってみよう！と知人に誘われていってきました。

海底撈火鍋 新宿店

歌舞伎町に入ってでっかい映画館？の近くのビルに入ったとこの6階にあります。 エレベーターで上がってみると、開放感のあるひろーい店内で、ほぼワンフロアそのお店でした。 予約してきたのでホールの方に尋ねてみたら、、、

店員さん「^&#^&@^#^@()@($@&@#&* 」

いや、わけわからんし、、、、。2秒ぐらい固まってると、「ニホンジン？￥」「あーそうですそうです（焦）」案内されたんだけど、

中は本当に日本かな？？？ひょっとして時空歪んでる？？？と思っちゃうほどそこは日本ではない「どこか」でした。

店員さんはおそらく全員中国人。お客さんも子供づれからカップルまで多種多様だったけど、日本語は一切聞こえない。席についてエプロンつけたらセットと単品どちらがいいですかー？と聞かれて、今回は珍しいものをいっぱい食べようと決めてたので単品を選びました。単品はお昼だと3割引。（ただし単品の肉とか野菜類のみ） タブレットも日本語対応だから何にも困ることはなかったんだけどとりあえず相手に全部お任せで頼んでもらいました笑。 じゃーーーーーん。 まず、スープは左のほうが牛肉が入った、牛タンのお店とかでよくあるテールスープみたいな味。右側は激辛のからうま鍋。唐辛子がたっくさん入ってた。 右側は普通のお肉とかだから説明はいらないと思うんだけど、左側にあるもの一体なんだかわかります？？？

まず写真一番手前に見えるのが小籠包的なやつです！小籠包を鍋に入れるって発想はなかったけど、水餃子の鍋って普通だしそんなものかなって感じでした。

左奥に見えるのが「鴨の血」です！！！　柔らかくて噛むとするっと溶けていくようなこんにゃくみたいな感じでした。いきなりすごいものが出てきたぜ、、 そしてその手前が、なんだったっけ？牛のお腹？？　「お腹のどこ？？？」思わず突っ込んじゃったけど牛のお腹は牛のお腹だそうで
中国語翻訳アプリで翻訳してもらったらそう訳されたんです。 すごいコリコリしててザラザラしてて正直これはあんまりでしたーーーー。

そして最後に紹介するのがこの袋に入ったやつ。これは「エビつみれ」だそうです。
なんかこの形見るとホイップクリーム思い浮かべませんか？？子供の頃お母さんと一緒にケーキを作ったとき、よくケーキの上にちょこんとクリームをしぼって飾り付けしたなーなんて。
そんな感じで鍋の中に入れていきます。

あ、話それちゃいますけど、ここのお店って本当に頻繁にお店の方がきてくださって色々やってくださるんです。 例えば、たれとか薬味とかが少なくなったら補充してくれたりとか、しいたけがいっぱい余ってたら「しいたけお鍋に入れましょうか？」と。 すごく丁寧な接客なんです！

エビつみれの味は、丸ごとエビなんじゃないかなって感じのエビの風味の強さで、ハマりました。 そして、後半になってくるとからうまスープのからさがグッときて辛くなりました。 たれはゴマだれの他にも色々なのがあるんですけど、オススメのたれを作ってもらいました。えーとなんだっけ。 お味噌とお醤油とネギとパクチーとごま油。 最初？？？ってなったけど、一口食べてみるとこれがすごく美味しい！！！ からうまスープの方ともなぜか合うんですよ！！

お腹いっぱいになって周りを見渡してみたらちらほら日本語が聞こえてきました。 基本的にこのお店は中国の人に紹介された日本人しかほとんど来ないみたいです。 珍しいものが食べてみたい、異国の雰囲気を感じてみたい！という方は是非訪れてみては？？

Herokuにデプロイ完了！今日から再運用開始！！

DjangoGirlsTutorialでこのブログを作ってpythonanywhereにアップロードしていたがミスでブログが消えてしまった。 そしてついに今日、Herokuで復活させることができました！いえーーーーーーい。 実は今回がDjangoアプリのHeroku初デプロイとなるのでその際に詰まったところなどを書いておこうと思う。

migate関係のつまずき

flaskでHerokuにデプロイした経験はあったから必要ファイルなどの用意はすんなりいった。 ググった記事を参考にしながらやってたらスイスイ進んでたんだけど、ここでエラー発生。

エラー文に従ってあーはいはいこうすればいいのねーとやっていてもエラーは解決せず。
原因はコンソールの方でmakemigrationsやmigrateを行なっていたからだった。
いったん戻って、ローカルの開発環境で上の二つを行い。gitにプッシュ。そしてHerokuにプッシュすることでこの問題は解消された。

前も散々苦しめられてきたこやつ　「gunicorn」

このエラー。H10のアプリクラッシュ。正直このエラーが一番嫌い。なんでかって原因がわからないから。

前回の経験からいくとこういう時って大体gunicornがおかしかったりする。再度インストールをしてみる。

見つからない？？はいーーーーー？？？

もうほんとgunicorn大嫌いマンへと変貌を遂げてしまったのだが、このコマンドとエラーをよく見ると、

[Guicorn]

実はただのスペルミスだったというなんとも悲しいオチ。 herokuのデプロイには数週間かかったみたいな人も調べてたらいてビビってたんだけど、 こういうしょうもないミスで時間をとられるのはすごく悔しい。

ホストのエラー

このエラーが解消されてheroku open でひらいてみると、今度はこんなエラーが。正しくホストが設定されていない？？？

この問題は サイト1やサイト2を参考にして解決。 エラーの通りにALLOWED＿HOSTSに設定してあげれば良い。
Qiitaの記事だとそこを[*]にすればいいよとか書いてあるんだけど、セキュリティ面を考えるとあまりよくないので、そのことがきちんと書いてある二つの参考記事をピックアップ。ここについてはまた勉強する。

静的ファイルのエラー

最後にこのエラー。もうサイトは動いていて動作上問題はないんだけど、CSSとか読み込まれてないじゃん。
このエラーの解決するためにはherokuの記事が一番参考になった。
適切なディレクトリを指定するだけじゃなくて、Whitenoiseをインストールしないといけない。 あと静的ファイルをひとまとめにしないといけないみたいでそれはcollectstaticってコマンドでやる。 collectstaticは先ほど設定したstaticディレクトリに静的ファイルを根こそぎ集めてくれる。そのディレクトリに元からあったものは上書きされてしまう恐れがあるので注意。

とにかくこれでブログが公開できて一安心。

デプロイしたらしくってブログデータが消えました。

djangoでアプリ開発をするのは二度目。  

一度目はDjango girls tutorialのサンプルのブログ。これをもとに自分で手を加えたものをpythonanywhereにデプロイし、少し運用していた。

今回作ったアプリをデプロイしようとし、新しいコンソールを開いて環境を構築。

いま思えばとあるエラーが全てを物語っていた

そのエラーは直訳すると--nuke 末尾に入力してもう一度やってください。というもの。

--nuke というコマンドは作った環境を再構築するというもので、これは最初のデプロイ時に学んだ。

初めてのデプロイでこれが表示されるのはおかしいぞ

そこで一回立ち止まればよいものの、あーはいはいこのエラーね！ってそのまま突っ走ったのがバカだった。

ブログが新しいアプリの方に上書きされてしまったのだ。バックアップもない。無念。

herokuにしとけばよかった。

ついにMacユーザーに!!

生まれてから今までMac OSに触れることがなかったためその使い方に戸惑っている…

購入したのはこちらの商品

容量は128にするか256にするかかなり悩んだけれど長く使うことも考えて256を購入。 プログラミングをするのに便利ということでキーボードはUS配列を購入した。
（エンターキーの大きさ的にUKにした方が良かったかもなんて今では考えている。）
学生価格で購入できたので値段はこれより少し安めの税抜￥158000。さらにギフトカードが￥18000分ついてきたのでかなりお得に買えた。
（某電気店に安くしてもらえるか価格交渉に行ったが結局オンラインストアのが得だった）
本来よりも￥6000 安く買えてさらにギフトカードもついてくるなんて学生のうちに買っとくべきだよMacbook!!

早速設定に取り掛かる。

起動して初期設定を終えた後に入れたのが「英かな変換」。
これはJIS配列以外のキーボードでは付いていなくてUSとかだと代わりのキーで行うけど、それをCommandキーだけで行えるソフトを導入。
右の記事を参考にして設定。 参考サイト
右Commandキーで日本語入力、左で英語入力にできた。

Macにおけるキー操作

Winとは違うので備忘録として書いておく。

-コピーペースト command+C or V
-スクショ shift+command+5
-ファイル削除 command+delete

次回はプログラミングについて。

初デプロイ！Heroku苦労日記

PythonのフレームワークFlaskで開発したWebアプリを公開してみる！

これを目標としてPythonを勉強していて、

とうとうアプリが完成！

さあデプロイするぞ！！

と思いHerokuに登録。色々とググりながらやっていくがエラーの連発…。その時のことをメモ程度に書いていく。

長いです。結論だけ見て飛ばしても結構です。

環境:

Win8 64bit 

Cygwin TerminalからgitやHerokuを操作 

Python3.7.5

最初に:

Herokuにアップするときはapp.pyなどのプログラムの他にTemplates(静的ファイル)、そしてさらにrequirements.txt(これに必要なライブラリなどをバージョン含めて書く。例 requests＝＝3.7.0)

そしてpythonのバージョンを書いたtxt、そしてさらにProcfileという起動ファイル。こいつにクソ面倒をかけられたのは後で記す。

まずググった記事を参考に、サイトにのってたサンプルプログラムでデプロイの実験。無事成功。

よし、いざ自分のアプリをデプロイだ！

しかし謎のエラー:H10…

H10エラー

アプリのクラッシュ

どうやらProcfileがapp.pyを読み込めないらしい。

同様のエラーはライブラリを読み込んでいないときによくおこるようだ。例えばrequestsがない時に requests not foundなどといったように。

でも今回はメインののapp.pyがないといつエラー。

ディレクトリも間違えていない。とするとやっぱりProcfileの書き方が間違っている？？

ネットの記事を参考に

web:guicorn manage:app

と書いたのに

別のサイトでは上のappの後ろに

--log-fileと追記してあったので追加してみたけど変わらず…

原因はguicorn？？

Procfileはforemanというやつで読み込んでいるらしい。HerokuのCLIを入れた時にこれがセットで入ってくるらしいのだが、入ってないこともあるらしく、また最新バージョンだと正しく動作しない的な記事を見つけたので、Cygwinにforemanを最新ではないバージョンでしてインストールしてみた。

コマンドは gem install foreman

インストールを完了してやってみても結果は変わらず？

正しくインストールされているかを確認するためにCygwinでチェックした。コマンドはguicorn start 結果はエラー。

結局foremanが正しくインストールされていなかった。

どうもCygwin君が認識してくれない。

rubyのインストール

この方法でインストールできないなら別の方法を使うしかない。rubyをインストールするとだうやらforemanもセットでインストールしてくらるそうだ。rubyをインストール後cmd起動。

cmdで確認したらきちんとインストールされていた。foreman startで起動した。

しかしCygwin上ではやはり認識しない…

Cygwinを諦める

Cygwinで認識しないならgit bushを使って実感してみよう。bushをインストールし、foreman startを実行。起動できた。

gitのアカウントをもう一個作り、こちらでデプロイをした、のだが謎のエラー発生。多分このエラーはgit側の設定によるもの？？

とにかくうまくいかなかった。

ここまでで1日と半分ぐらいを溶かす。

やはりWindowsでは大変なのか…

調べた記事の多くがmacかLinuxを前提としてやっていた。それでもあきらめきれなかった。

2日目ぐらい頑張っててふと気づいた。

"デプロイできたサンプルと自分のアプリで何が違うのか"

正直、サンプルは適当？だった。というのも、

requirements.txtには必要なライブラリとそのバージョンを記すのだが、サンプルプログラムにはFlaskなどと名前だけ。こういうのは1文字でも違った形式だと動かないと思ってたので、以外。

そして問題のProcfileを見てみたのだが、

成功したサンプルには app:appの後ろに ポートが記されていた。

これを入れて実行してみると…

それまでのページを覆い尽くすほどのエラーが全く表示されない。

無事に成功した。

結局原因はポートだったのか。foremanはなにも関係がなかった。

ググった記事のProcfileの書き方的なページやHerokuデプロイ入門！みたいな記事にはこのポートが書かれてなかった。

それが原因でここにたどり着くまでにかなりの時間をかけてしまったが、無事に自分のアプリを初デプロイできたので感動した。

MacやLinuxなどのOSではこのポートの設定はいらないのか？そんなことないと思うけど…

とにかく初デプロイ万歳🙌