JavaScriptで行と列の入れかえ(転置行列、transpose)

4×4の果物のデータ(ID,名前,個数,価格)の行と列を入れ替えるJavaScriptです。やっていることは簡単で、4行4カラムと分かっているので、データの入っていない4×4の二次元配列を作成します。最新のJavaScriptの場合、以下のように、fllとmapを使うと1行でゼロ埋めされた二次元配列を作れます。

あとは、全てのデータを走査して、移し替えていくだけです。

 

特殊な書式なデータなども、文字列や数字を配列の要素と考えると、転置行列とみなせます。CSVファイルなどもこの仕組みで転置できます。

ソースコード

 

GAE/Go開発メモ

GOOGLE_APPLICATION_CREDENTIALS

AppEngineで各種クライアントライブラリーを使う場合はこれを求められる。日本語情報も豊富にあるので、設定方法は簡単で、ファイルをダウンロードしてpowershellで設定。これで、ローカル開発環境で各種ライブラリーが使えます。

本番環境は自動化されている

本番環境にこのファイルを持っていけばいいのかというと、その必要はなくて サーバー間での本番環境アプリケーションの認証の設定 で、この指定がなければ自動で、デフォルトのサービスアカウント情報を使います。

そのため、ソースコード内には、クライアントライブラリーを使うための認証ソースコードなどがなく(もちろんその方法もあります。)github.comなどでも管理しやすいです。

pyコマンドで、dev_appserver.pyを動かす方法

Windowsでは、Python2と3をインストールしている場合、py -2コマンドでPython2.7を実行します。またSDKのインストール先が、sdk.staging/binになる場合があるので、エクスプローラーで確認する必要あります。(現状再インストールしたら、sdk.stagingはなくなり、sdk/binになりました。)

dev_appserver.pyでサーバーを実行した場合、ファイル監視されているので、Goファイルを修正したら、ブラウザーリロードで変更が確認できます。

  • –clear_datastore=trueでdatastoreをクリア
  • –clear_search_indexesでインデックス削除。データストアのクエリーを変更してインデックスが不正な場合などに使う

本番環境デプロイはgcloudコマンド

少し前までは、Google Cloud SDKではなく、AppEngine SDKのためgoappコマンドがありましたが、今は存在しないので、glcoud app deployで本番環境にデプロイします。

Windows環境でGAE/GoとPythonについて

Google Cloud SDKがPython2.7に依存しているためPythonが必要になります。Windowsの場合は、Python2.7とPython3系を両方インストールすればよいです。現在のPythonはpy.exeで”py -2″でPython2を実行し、”py -3″でPython3を実行できます。

Google Cloud SDKの場所

コマンドプロンプトの場合は、%localappdata%でアクセスします。

“%localappdata%\Google\Cloud SDK\google-cloud-sdk”

PowerShellの場合は、$env:localappdataでアクセスします。

“$env:localappdata\Google\Cloud SDK\google-cloud-sdk”

ちなみにLocalAppDAtaは、C:\Users\<username>\AppData\Local

dev_appserver.pyの場所

Google Cloud SDKの場合は、”$env:localappdata\Google\Cloud SDK\google-cloud-sdk\bin\dev_appserver.py”フルパスで指定するとよいです。

ひとまずフルパスで指定するとよい

数年前はAppEngine SDKがあったので、それを環境変数Pathに設定して、dev_appserver.pyなどを実行していましたが、今は、Google Cloud SDK付属のdev_appserver.pyを使います。

2018年06時点では、Google Cloud SDKで本番にデプロイできますが、単体テストをするためには、AppEngine SDKを使う必要があります。

両方のSDKを環境変数Pathに通すと、「ある日突然、コマンドが動かないトラブルが発生しコードを長時間調べても問題なし、結局Pathの順番が落ちだった。」みたいになりかねないので、理解が深まるまでは、フルパスで実行するのもよさそうです。

Google Cloud SDKインストーラーが正常に動作しない

Google Cloud SDKは、Python依存のためインストーラーが正常に動作しない場合があるようです。エンコードエラーが発生したと表示される場合があります。このような場合は、バージョニングされたアーカイブ で少し前のバージョンをインストールするとうまくいくかもしれません。

私の場合は、更新後問題が発生したため、すべて削除して解決しました。

 

2018/06/29 インストーラー実行時にバンドルのPythonを有効にし、CLOUDSDK_PYTHON=C:\Python27\python.exeをシステム環境変数に設定したら正常にインストールできました。矛盾してますが…

Google Cloud SDKと App Engine SDKの違い

現在はGoogle Cloud SDKをインストールして、gcloudコマンドで本番環境にデプロイしますが、以前はApp Engine SDKがありappcfgやgoappコマンドがありました。

Unitテストを実行する場合はgoapp testコマンドを実行するので、Google Cloud SDKとApp Engine SDKが必要になります。Google Cloud SDKに統合されていないので、非常に面倒です。

Local Unit Testing for Go

goappコマンドを使えるように一時的にPowershellで環境変数を設定する

Unitテストをするために、App Engine SDKのzipファイルをc:\devに展開しました。powershellでは、環境変数のダイアログではなく、起動しているPowershellのコンソールのみに以下のように適用できます。

 

GAE/Goの単体テストが重すぎる

Corei5 3GhzのPCで以下のdatastoreにデータを1つ登録、取得し確認するのに、30秒ぐらいかかります。

goapp testコマンドを実行すると以下のようにログが出力されて、go-app 11.997sと最終行に出ていますが、ログが表示されるまでに10秒以上かかる場合があります。

 

Cloud Datastoreの親子関係

以下のデータ構造はよくあります。

  • ユーザー毎のブログデータを作る
  • カテゴリ分けした記事を作る
  • ディレクトリーに分けて、ファイルを保存する

このような親子関係で分類したデータをCloud Datastoreで作る場合は、Cloud Database – データの整合性 を読むと解決できそうです。祖先クエリーや、エンティティグループという概念があるので、これで作れます。またカテゴリー分けしたTodoListのサンプルコードもあるので、これをベースにするとすぐに実装できそうです。

チュートリアル

py -2でutf-8にしたい

C:\Python27\Lib\site-packages\sitecustomize.pyを用意して、pythonコマンドを実行した場合はutf-8。py.exeだとascii。

Google Cloud SDKのインストーラーがひとまずインストール完了まで

Google Cloud SDKのインストーラーがPythonエンコード絡みのエラーで動かなかったのですが、いろいろ試しているうちに、インストール完了まで進んで、コマンドが打てる状態になりました。

Google Cloud SDKは、バージョニングされたアーカイブという最新でないインストール方法もあるので、再度Cloud SDKをアンインストールして試して見る必要がありそうです。

Windows10でdev_appserver.pyを実行する時は、pyコマンドとフルパスで指定するとうまくいく

AppEngineのGoのチュートリアルをWindows10で試したら以前は動いていたのにバージョンが上がって動かなくなりました。いろいろ調べたらWindowsの場合はいくつか注意点がありました。結果的には以下のコマンドでdev_appserver.pyを動かせました。

Windowsで使うときの注意点

  • Python2、Python3はpyコマンドで使い分ける
  • Google Cloud SDKのインストール先を再確認。(アップデートなどでディレクトリーが変わるようです。)

また、先ほどのように、フルパスでdev_appserver.pyスクリプトを指定するのが無難なようです。

 

Python2とPython3をインストールしてpyコマンドを使えるようにしておく

Google AppEngineはPython2に依存するので、Windows10では、Python2とPython3をインストールしてpyコマンドでPython2を起動するようにします。また、

Cloud SDKのパスを理解しておく

Cloud SDKは以下のどちらかにインストールされています。私の場合は以前はgoogle-cloud-sdkにdev_appserver.pyなどがインストールされていましたが、アップデートのタイミングなどで、google-cloud-sdk.stagingにスクリプトなどが移動されてました。

C:\Users\<USERNAME>\AppData\Local\Google\Cloud SDK\google-cloud-sdk\

C:\Users\<USERNAME>\AppData\Local\Google\Cloud SDK\google-cloud-sdk.staging\

環境変数のおさらい

Windowsのコマンドプロンプトでは、以下の環境変数で、ユーザー毎の情報が取得できます。

  • %homepath%で、c:\User\<USERNAME>
  • %appdata%で、C:\Users\<USERNAME>\AppData\Roaming
  • %localappdata%で、C:\Users\<USERNAME>\AppData\Local

Powershellの場合は$env:で取得できます。

  • $env:homepath
  • $env:appdata
  • $env:localappdata

 

 

円をつなぐ線 p5.js

数日前にTwitteerでopenFrameworks/C++ベースのシンプルで面白いプログラムを見つけました。junkiyoshiさんの「円をつなぐ線 openFrameworks」。ブログではソースコードも公開されているのでp5.jsで実装してみました。

円の頂点を繋げただけなのに、面白い動き!

通常のプログラミング

準備中

関数型プログラミングのように書いたもの

最近C#Linqや関数型プログラミングを勉強しているのでzip関数や参照透過性を考えながら書いたコードです。

 

PivotalCloudFoundryでMySQLのデータソースを設定する方法

結論からいうと、ClearDBサービス(MySQL)を用意してアプリにバインドすると自動でユーザー、マスワード、JDBC-URLを用意してくれました。

このデータソース情報を使うために、src/main/resourcesにapplication-cloud.propertiesを用意します。ローカル環境では、application.propertiesを使い、クラウド環境ではapplication-cloud.propertiesを使うようになるそうです。

中身は、以下のように、spring.jpa.hibernate.ddl-auto=updateで、テーブルがなかったらエンティティクラス情報から作るという指定でよいです。

https://docs.spring.io/spring-boot/docs/current/reference/html/howto-database-initialization.html

cf envでデータソースの確認

コマンドラインから、cf env アプリ名でユーザ、パスワード、jdbcUrlが確認できます。(*以下は、ユーザー名などをxyzなどのようにダミーにしてます。)

 

その他・参考にしたチュートリアル

TAGVOTE「タグボート」の SpringBoot入門 Spring公式のチュートリアルである Accessing data with MySQL や Building an Application with Spring Boot

まとめ

ローカルにMySQLとSTSを用意したので、PCFでMySQLを設定する方法が分からずいろいろ調べましたが簡単でした。

 

docfxをいろいろ調べてみる

Microsoft公式サイトは、docfxをもとに作られています。https://docs.microsoft.com/ja-jp/aspnet/core/tutorials/

またオープンソースでgithubに公開もしています。https://github.com/aspnet/Docs.ja-jp

docfxを使うとMicrosoft公式サイトのように、APIドキュメントと、Markdownで記事を用意できます。docfxの場合は、Markdownの拡張がありプロジェクトのソースコードのリンクなどが簡単にできます。

docfxのインストール

Windowの場合は、chocolateryでインストールするのが簡単。

https://dotnet.github.io/docfx/tutorial/docfx_getting_started.html#2-use-docfx-as-a-command-line-tool

ワークスルー(チュートリアル)

https://dotnet.github.io/docfx/tutorial/walkthrough/walkthrough_overview.html

このワークスルーで、通常のMarkdown記事とAPIドキュメントの作成方法と組み込みサーバーを起動してブラウザで確認する方法がわかります。

ソースコードと画像を追加した記事

 

srcディレクトリーに配置したC#プロジェクトのAPIドキュメントを表示

作業の流れ

上記のサイトを試しに作ってみて一通り作業の流れが分かりました。

最初にdocfx init -qを実行し、必要なディレクトリーを生成します。srcフォルダーが作られるのでここにC#プロジェクトを作ります。docfx.jsonで、metadataのところにsrc/**.csprojと書かれているため配下の*.csファイルがすべてAPIドキュメントの対象になります。

次に、APIドキュメントを作るためdocfx metadaを実行します。C#ソースコードの変更などがあったら作り直す必要があります。

Markdownを書いたらbuildして、serveコマンド後にブラウザーで動作確認です。デフォルトでは、http://localhost:8080/です。

 

UnityのTilemap機能のGameObjectBrushの使い方

Unity2017.3では、githubから2d-extrasを取得して2d-extras/Tilemapフォルダーを自分のプロジェクトにコピーするといろんなブラシやタイル機能が追加されます。この中に、GameObjectBrushがあります。以下訳してみましたが、ちょっとわかりづらいので実際に使ってみます。

GameObject: This Brush instances, places and manipulates GameObjects onto the scene. Use this as an example to create brushes which targets objects other than tiles for manipulation.

GameObject: このブラシは、シーン上のオブジェクトのインスタンス化、配置、操作をします。タイル以外のオブジェクトを操作対象とするブラシを作成します。

使ってみる

以下画像は、パレットやブラシを使わず、Tilemapの子要素に、スプライトを直接配置して、Transformでグリッド上に配置したところです。画像ファイルをHierarchyにドロップして、Transfromのx,yの値を変更しました。

HierarchyでTilemapオブジェクトを選択し、GameObjectBrushを選択します。そうすると、タイルマップで用意されている他のブラシと同様に、このGameObjectBrushで、pickして、ペーストすることが可能です。またGameObject をこのブラシで扱えるようにするためには、グリッドに合わせる必要があります。

まとめ

  • GameObjectBrushで、任意のオブジェクトをブラシ操作できるようになる
  • 任意のオブジェクトはあらかじめグリッド上に合わる必要がある。

UnityでTilemap機能のカスタムブラシ(custom brush)を作成する

Unity 2017.2から2Dのタイルマップ機能が追加されました。スプライトからパレットを作成して、グリッド上で簡単にマップを作れるようになりました。Prefabをタイルマップに塗る場合は、現時点ではブラシを作成するようです。

sokobanパレット作成して、壁と地面をグリッドに塗ったところ

ブラシを一から作成するのは大変ですが、既にgithubにサンプルがあります。

https://github.com/Unity-Technologies/2d-extras

また、2d-extrasを使った簡単な2Dプラットフォームのデモもあります。

https://unity3d.com/jp/learn/tutorials/topics/2d-game-creation/intro-2d-world-building-w-tilemap?playlist=17093

このデモを動作させると、GameObject BrushとPrefab Brushがソースコード付きでありました。GameObjectBrushはグリッド上でゲームオブジェクトを配置したりするようです。またPrefab Brushはプレハブからブラシを作成するようです。

ブラシを作る必要があると思ったのですが、調べていくと2d-extrasを使えばよさそうなのが分かってきました。

ブロック崩しサンプル

https://github.com/Unity-Technologies/2d-techdemos

2d-extrasを使ったタイルベースのブロック崩しサンプルです。ブロックが消える時の衝突判定とタイル座標の求め方などがBallスクリプトから分かります。

ここまで調べて分かったこと

Unity 2017.2でタイルマップ機能がリリースされたので、まだ2d-extrasなど細かい機能はUnity本体に取り込まれてないようです。初めて使う場合は、上記のプロック崩しサンプルと、2d-extrasを用意して、似たようなプロジェクトを作ってみるのがよさそうです。

 

Unity公式2d-techdemo

Prefab custom brush(プレハブカスタムブラシ)の作り方

ダウンロード

https://github.com/Unity-Technologies/2d-extras をgit cloneまたはzipファイルでダウンロードして展開します。2d-extras/Assets/Tilemapフォルダーがあるので、これを自身のプロジェクトにコピーします。

ブラシ作成

コンテキストメニューからCreate->Prefab Brushでブラシを作成します。

ブラシにプレハブを設定

Tile Paletteタブから作成したブラシ(CoinBrush)がを選択します。

Prefabsのsizeを1にして、Element 0にプレハブを設定します。今回は、コインの画像からあらかじめCoinプレハブを作っておいたのでこれをブラシに設定します。

プレハブブラシで塗る

HierarchyでGridにタイルマップを用意して、それを選択します。以下画面中央の、Active Tilemapが選択されたものになります。この場合は、ItemTilemapになります。また、画面右下のブラシがCoinBrushになっていることを確認し、あとは、Sceneタブ画面で通常のブラシと同じように塗ることが可能です。

まとめ

プレハブ用のブラシを作成できるようになりました。プレハブだと、スクリプトで処理ができるので、OnTriggerEnter2Dでコイン取得後に削除などの処理をつくれます。またGameObject用のブラシもあるようです。

現時点では、2d-extrasを別途インストールしないといけませんが、Unityのバージョンが上がれば初期で対応されると思います。

 

ミニゲーム「どうぶつバスケット」を作りました。

バスケットのゴールに可愛いどうぶつボールを投げると得点が入ります。制限時間内にどれだけ得点を稼げるか競うシンプルなゲームです。もう少し、演出やゲーム性を詰めていきますが、ひとまずは動かせるのでリリースしました。

 

ブラウザでどうぶつバスケットをやる

https://dev001hajipro.github.io/AnimalBasket/

ソースコード

Unityのプロジェクト一式も公開しています。

https://github.com/dev001hajipro/AnimalBasket