Takunojiのプログラミング・プレイグラウンド(遊び場)

「プログラミングのススメ」と学習した結果身につくもの、アイディアを実現するために何をしたら良いか?の答えが出せるようになります。

ND4Jを使って、行列をコントロール=マッピングをプログラムで行う

イントロダクション

ゲームなどで、マッピングを行うのに「行列」が使えると思った次第です。

実際には、[u16プログラミングコンテスト](http://www.procon-asahikawa.org)で使用しているゲームで使用しました。

結果的には、マップを描いて終わりにしてしまったのですが、良い刺激になりました。[ソースはGit](https://github.com/ZenryokuService/PracticeJava1/blob/master/PracticeJava1/src/jp/zenryoku/sample/u16/U16ProconClient.java)にアップしています。

マップ作成

自分の操作するキャラの周囲を3x3マスで表現する時、以下の様なルールを作ります。

  • 0:何もないマス
  • 1:敵キャラがいるマス
  • 2:宝箱があるマス
  • 3...

この様な形でマスの種類を10進数(通常の数字)で表現したら。

0,0,1

2,0,0

0,0,0

の様な形になります。これは右上に敵キャラ、左に宝箱、他は何もなし。

のマップを表現するデータになります。

そして、距離などを計算で求めることが出来ます。計算方法は頭をひねってやればすぐにわかると思うので割愛します。ちなみに、https://zenryokuservice.com/wp/2019/02/14/javafx-nd4j%E3%80%9C%E6%95%B0%E5%AD%A6%E3%81%B8%E3%81%AE%E6%8C%91%E6%88%A61%EF%BC%9And4j%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%80%9C/ND4Jを使うと各値の数値を加減乗除できるので、色んなゲームに使えるのではないでしょうかないでしょうか?

ちなみに、[ND4J](https://deeplearning4j.org/docs/latest/nd4j-overview)は、行列計算などのフレームワークで、流行りのディープラーニング系のプログラムで使用すると便利です。

自分としては、機械学習からしてよくわからなかったので、統計学の基本から学習中です。因みに、[OpenCv(画像処理)](http://labs.eecs.tottori-u.ac.jp/sd/Member/oyamada/OpenCV/html/py_tutorials/py_ml/py_knn/py_knn_understanding/py_knn_understanding.html)でも使うので画像解析とか興味のある人は是非!

<del>自分は絶賛戦闘中(笑)</del>

 

基本的なことはやってみました。

* [JavaFX + ND4J〜数学への挑戦1:ND4Jのインストール〜](https://zenryokuservice.com/wp/2019/02/14/javafx-nd4j%e3%80%9c%e6%95%b0%e5%ad%a6%e3%81%b8%e3%81%ae%e6%8c%91%e6%88%a61%ef%bc%9and4j%e3%81%ae%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%88%e3%83%bc%e3%83%ab%e3%80%9c/)
* [JavaFX + ND4J〜数学への挑戦2: 行列の計算〜](https://zenryokuservice.com/wp/2019/02/15/javafx-nd4j%e3%80%9c%e6%95%b0%e5%ad%a6%e3%81%b8%e3%81%ae%e6%8c%91%e6%88%a62-%e8%a1%8c%e5%88%97%e3%81%ae%e8%a8%88%e7%ae%97%e3%80%9c/)
* [Java + ND4J 〜数学への挑戦3: ベクトル(配列)の作成方法〜](https://zenryokuservice.com/wp/2019/02/19/java-nd4j-%e3%80%9c%e6%95%b0%e5%ad%a6%e3%81%b8%e3%81%ae%e6%8c%91%e6%88%a63-%e3%83%99%e3%82%af%e3%83%88%e3%83%ab%e9%85%8d%e5%88%97%e3%81%ae%e4%bd%9c%e6%88%90%e6%96%b9%e6%b3%95%e3%80%9c/)
* [ND4J ベクトル生成〜ワンポイントレッスン的な〜](https://zenryokuservice.com/wp/2019/02/19/nd4j-%e3%83%99%e3%82%af%e3%83%88%e3%83%ab%e7%94%9f%e6%88%90%e3%80%9c%e3%83%af%e3%83%b3%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88%e3%83%ac%e3%83%83%e3%82%b9%e3%83%b3%e7%9a%84%e3%81%aa%e3%80%9c/)
* [JavaFX + ND4J 〜数学への挑戦:5グラフを描く〜](https://zenryokuservice.com/wp/2019/02/20/javafx-nd4j-%e3%80%9c%e6%95%b0%e5%ad%a6%e3%81%b8%e3%81%ae%e6%8c%91%e6%88%a6%ef%bc%9a%ef%bc%95%e3%82%b0%e3%83%a9%e3%83%95%e3%82%92%e6%8f%8f%e3%81%8f%e3%80%9c/)

### やってみた感想

行列を使用して、行列データの生成〜四則計算をAPI(メソッドなど)でやってくれるので細かい計算などは不要でした。

あとは、この計算方法を利用して「何をするか?」がキモになります。

やっぱり、根本的な部分を理解しないといけないようです。

 

でわでわ。。。

ロードマップの作り方 〜今までの足跡をまとめ、今後の計画へつなげる〜

イントロダクション

今まで、色々とやってきましたが、なんだかぐちゃぐちゃになってきてしまったので。。。

そいつを整理!一覧化!今後の計画!とつなげて行くにはどうしたら良いか?と考えたところ「ふつーにロードマップがいんでないかい?」と思い至った次第です。

小難しいことは考えない!

色々と悩んだ結果、「とりあえず作ってそこから考える」というのが一番効率が良いという判断に至り、そのようにする次第です。

振り返りに、ロードマップを作る

<もともと何がしたくてこーなったのか?>

  1. 「プロでなくても音楽で生計を立てるにはどうしたら良いか?」という疑問があり、これを実現しようと四苦八苦したところ「A-LAMシステム」を作成し運用すれば実現できるというところに至りました。しかし、このアイディアは「生計を立てる」とこまでは行かず。。。生活費が稼げる程度ならいけそうだ、というレベルでしか実現できなさそうです。(やってみないとわからないですが。。。。)
  2. ではこれをどうしたら作れるのか?と考えたところWebアプリ(サーバー運用)とクライアントアプリ(スマホアプリ)の連携で地域情報とユーザー情報を組み合わせて実現して行くちょっと複雑なものになってしまいました。
  3. とりあえずは、作成するものが決まりました。「ウェブサーバー」と「クライアントアプリ」を作成すれば良いということになり、それぞれどのようなものを作成するのか?と考えたところWebサーバーに「A-LAMシステム」、クライアントアプリに「目標達成AP」を作成することにしました。
  4. それぞれのアプリ作成に着手したいところですが、W1:「誰が?」W2:「何を?」W3:「いつ?」W4:「どこで」H1:「どのように?」H2:「どうやって?」H3:「いくらで?」と自問自答して考えたところとても時間がかかることに気がついたので1つずつ完結させながらやって行くことにしました。

。。。と上記のような経緯があり現状に至ります。

ここからやってきたことをロードマップにすると。。。やっぱり、スゴロクのようなイメージでしかロードマップが描けないのです。悪くはないが、良くもない。。。

しかし、これで今までやってきたことが大まかに見えたのでやはり「やってみて、それを元に(考える材料に)して次の段階へ進もう」と思う次第です。

ロードマップVer0.1

<概要マップ(ブレークダウン)>

  1. A-LAM システム(WebApp)を作成する
    GoogleMaps APIを使用する。
    Webサーバー(レンタル)を使用する。
    SNSを構築する。
  2. 目標達成AP(ClientApp)を作成する
    ・目標をたて、実現するためのツール機能
    ・モチベーションキープのためゲームの機能
    ・実行履歴、作業管理などのタスク・スケジュール管理機能
  3. ウェブ決済システム連携用のシステム
    ・1と2ができてから考える。イメージとしてはデータ通信サーバーになる

<実行ロードマップ>

  1. 実装するためのデバイスの検討と用意
    ・Webサーバー(レンタル)はミニムサーバーを使用する
    ・クライアントアプリはスマホを使用するが、ゲーム機能に関してはスマホと連携する何かを作成するか検討中。
     ==候補==
     1:ラズパイ
     2:Arduino
     3:Micro:bit
  2. 使用するプログラミング言語の検討、クロスプラットホーム開発でやりたい
    C/C++による開発、Qtを使用する
    Java(JavaFX) + GLUONによるクロスプラットホーム開発
    ・Webサーバーに関してはサーバーに依存するが基本的にはJavaを使いたい、しかし使用するレンタルサーバーはPHPPythonCGIの利用が可能な感じで、まぁJavaが用意されていないので、自分でJDKを突っ込んでやる予定。

  3. クライアントアプリの機能と、実装について
    ・目標を達成するためのロジック(手順)を作成、テストする必要がある。
     これを目標達成プロジェクトとして作成するツール、実績をGithubに記載。
    ・テストで「じゃんけんゲームをGoogleAppStoreにリリース」を実施中

とりあえずは、目標と今までの経緯をまとめてみました。下のイメージは目標のカテゴリです。それぞれのカテゴリを組み合わせて自分の目標に近い、もしくは合致するアイコンを選択できるようにします。

f:id:Takunoji:20190607211856p:plain

目標カテゴリ(アイコン)一覧

まだまだブラッシュアップ中です。とりあえずは、自分の作成したロジックが想定通りに行くかテストをするために、じゃんけんゲームを作成して、リリースしようと考えています。そのためにプロジェクトサイトを作成したりとありますが。。。

www.youtube.com

これができれば、今後の開発〜リリースが楽になるであろうというところです。

そして、日本にはこんなサイトもあるようです。

devmart.jp

さすが、ものづくりの国、日本バンザイ(笑)

 

でわでわ。。。

 

期限を決めてアプリを作る

イントロダクション

2019/6/1までにCHaserServverクライアントアプリを作ることにしました。 まだ出来ていませんが、感想と反省を記載します。

こんな感じで動きます

www.youtube.com

ダメだったところ

  1. ソースがぐちゃぐちゃでデバックするのが大変
  2. 見た目に美しくない
  3. カスタム(新機能をる追加)しづらい
  4. 気に入らない
     ・
     ・
     ・
    【実際のソース】
   private String checkAround(String res) throws Exception {
        String cmd = null;
        Double[] bufMap = data.getBufMap();
        // 相手プレーヤの有無
        if (data.isPlayer()) {
            System.out.println("isPlayerAction staert");
            for (int i = 0; i < bufMap.length; i++) {
                if (bufMap[i] == 1) {
                    // プレーヤがいる時の処理フラグを設定
                    cmd = isPlayerAction();
                    break;
                }
            }
            if (cmd == null) {
                cmd = isPlayerAtFar();
            }
            return cmd;
        }
        // アイテムがある時
        if (data.isItem()) {
            System.out.println("isItemAction staert");
            for (int i = 0; i < bufMap.length; i++) {
                if (bufMap[i] == 3) {
                    // プレーヤがいる時の処理フラグを設定
                    cmd = isItemAction();
                    break;
                }
            }
            if (cmd == null) {
                cmd = isItemAtFar();
            }
            return cmd;
        }
        /// 上記の条件に当てはまらない場合はMap作成に走る ///
        
        // 進行方向が決まっていない時はSearchコマンドで広域確認
        int direction = data.getHandler().getDirection();
        if (data.isDebug) {
            System.out.println("direction: " + direction);
            System.out.println("isSearched: " + data.isSearched(direction));
            System.out.println("isLooked: " + data.isLooked(direction));
        }
        if (direction == -1 || data.allSearched() == false) {
            System.out.println("*** IN: Search Method ***");
            cmd = ClientData.SEARCH_CMD + decideDirection(ClientData.SEARCH_CMD);
            data.setSearched(direction);
        } else {
            if (data.isLooked(direction)) {
                cmd = isWalkAction(direction);
            } else {
                cmd = ClientData.LOOK_CMD + decideDirection(ClientData.LOOK_CMD);
                data.setLooked(direction);
            }
        }
        return cmd;
    }
アプリを作る時には設計をちゃんとやらないとソースがぐちゃぐちゃになる。

これは、大きなプログラムにならないと舐めてかかっていました。 「もっと計画的に!」「仕様を整理して!」などと言われる感じになってしまいました。言い訳はたくさんありますが、しても仕方ないのでこの問題が起きた原因と対策を考えたいと思います。 クラスの役割分担をするだけでは不十分 いつも、クラス分けして実装しているので、ちょっとくらいなら設計なしでイケルと思ってましたが、細かい部分でまとまりがなくなり…今回のような末路を歩む事になりました。つまり

対策1

一度、処理フローのイメージを作ったらそれをノートなどに書きながら作成したイメージの処理をシュミレートしてみるのが良いと思った次第です。
<対策内容>
1.大雑把でいいので、何をどう動かすか?を決める。 2.決まらない時は不明点を明らかにする。
<ダメなところ>
デバッグしながら実装
・不明点は実装しながら解決しようとした

今回の場合は、サーバーから送信されるデータがわからなかったので、とりあえず実装して、デバッグしながら実装しました。 通信内容に関しては、動かしてみないとわからなかったのですが、今にして思うと通信テストクラスを作り先に通信内容を理解してから実装すればこの様な事にはならなかったであろうと思います。

期限付きの実装

今回は、期限を決めてやりました。やはり、中途半端になってしまいましたが、大きな収穫としては以下の事に気がついた事です。

期限付きのプロトタイプ実装をやる

これは自分的に良いアイディアだと思っています。メリットとしては作って上手く行けばそのまま使えば良いし、上手くいかない時はそのまま反省点として機能するので、自分自身の成果物として意義のあるものになると思います。 ちなみに自分はこれをGitに上げているので、いつでも今回の反省を思い出す事が出来ます(泣)

でわでわ。。。

アプリのリリース計画を練る

イントロダクション

じゃんけんゲームのリリースをやろうと思ってます。これには、プロジェクトのサイトとプロジェクトの更新情報を通知するものが必要です。(Gluon のライセンス取得の為)
なので、これらの仕組みを作る事を考えています。

とりあえずGitを使う

ソースの管理にはGithubを使用しているので、ここにソースをコミット(登録)した時にツィッターで通知するようにしようと考えました。(TwiterAPIとか)

さらに。。。

Javaを布教したいと思っているのでJavaの実装方法など記載しているブログへのリンクなどもつけたいと思っています。

そして。。。

今後、作成するアプリなどの為にルートになるプロジェクトを用意する必要があります。これを目標達成プロジェクトとしてリポジトリを作成しました。ここに、目標達成の為に何をやるか?を整理するためのロジックというかフレームワークというか微妙ですが、作成した目標ブレークツリーなるものがあるのですがちょっと分かりづらいのでこれを見やすく、分かりやすくするためのサンプルアプリ(JSで作成中)を作ろうと思っています。まだ作成中です。

計画としては

1.Gitからコミット時にツイートする仕組み(WEB Hookの使い方)を作る(設定で済むかも?)
2.目標ブレークツリーのサンプルアプリを作る(公開)<目標ブレークツリーのイメージ
3.目標プロジェクトからじゃんけんゲームリポジトリを参照できるようにする
目標プロジェクトをルートにして、じゃんけんゲームそのほかのプロジェクトを作成&リリースしたいと思っています。(全部ではありません)
4.Gluon のライセンス取得申請
5.Googleへのアプリ登録などはGoogle play consoleから調べる
6.Google play storeに公開
7.Githubにじゃんけんゲームの作成方法、つまづいたところなどのドキュメントを作成する
8.Javaの布教をする->GOAL

この計画(手順)のために

必要な作業を洗い出します。

「1.ツイートする仕組みを作る」について
A. Gitからツイートする仕組みの詳細を調べる
B. ツイートの仕組みを作る
「2.目標ブレークツリーのサンプルAP(JS)」について
A. D3.jsでの実装を行う。
B. 目標の入力する項目をツリー状に表示する機能の実装
C. 項目を選択した時にその内容を表示領域(カード的な)に表示する機能
D. ツリー、内容の表示を編集する機能の実装
E. 入力した内容をhtml(js付き)ダウンロード出来る機能の実装
「3.目標プロジェクトからじゃんけんゲームに参照をつける」について
済み:Gitのリポジトリからじゃんけんゲームのリポジトリへ参照を付ける(README.MD)

これ以降は実行してからでないと話にならないのでここまでにします。

でわでわ。。。

GitプロジェクトをPULLしてアプリを動かす

イントロダクション

ここ最近(2019/05/17)はU16-プログラミングコンテストに着手しようとしています。実際には「CHaserServer」というゲームサーバーにアクセスして1対1でポイントを競うゲームをプログラムで動かすというものです。

U16-旭川プログラミングコンテストで使用する、CHaserServerを起動した時の画面が下のキャプチャです。

CHaserサーバー起動画面

実際にこのアプリのGitリポジトリからPULLしてアプリケーションを起動して見ました。そして、ここのリポジトリからPULLしてきました。この時に使用したものを記載しておきます。

  1. QtCreator(C/C++での画面作成フレームワーク)

    youtu.be

  2. ターミナル(Macでコマンドを叩きます)
  3. Github(無料のリポジトリサーバー(英語です))

実行したこと

  1. 対象のGitリポジトリからプログラムをフォーク(自分のリポジトリへコピー)
  2. コピーしたソースをPULLして自分のPCにダウンロード
  3. ソースをコンパイルして実行(起動ファイルもできる)

上記の様なことを行いました。詳細はこちらのページに記載しています。

感想

実際にプログラムを作成したわけではないが、妙な達成感があった。起動したらやっぱりクライアント側(ダウンロードしたサーバーに接続)を作成したくなりました。

なので作成しようと思います。(Javaの)サンプルプログラムがここにあったのでそれをカスタムして実行しようと思っています。ほぼ作り直す様な気もしますが。。。

ちょいとJavaを触ってみようかな?という人にはちょうど良いと思います。

色々とやっている様ですが、このプログラムでは159行目のgetUrlという変数で対象のURL(自分のPCではhttp://127.0.0.1)にアクセスする様にすればとりあえずは動きます。

その後 

JUnitでテストしながら開発しました。(テスト駆動開発的にやりたいと思っただけです。)作成したクライアントアプリはGitにアップしてあります。

github.com

 

このコードは、Javaでのソケット通信を行う、ソケットクライアントのアプリになります。接続先を変更してやれば対象のサーバーにアクセスできます。(パスワードなどは別途実装が必要です。というかプロコンようなので他には使えませんが、Socketクラスを使用した実装のサンプルにはなるので参考にどうぞ)

でわでわ。。。

 

 

Spcket通信 〜Javaとc#で通信する〜

イントロダクション

こんなサイトを見つけました。U-16プログラミングコンテストに関する、ページです。サンプルゲームとして面白いと思ったので記載します。

事の発端

目標ブレークツリー(サンプル)の作成中ですが大人向けのプログラミングコンテストがあったので、ちょいと興味を持った次第です。

概要

ダウンロードした、サーバーとクライアントのプログラムの内クライアント側を改造してコマを動かし得点を競うゲームでした。ここで、本来ならc#で出来ているプログラムだから、c#で… という話になりそうですが、自分はJava屋なので、クライアント側をJavaで作ろうと思い立った次第です。 作成したクラスはこちら

予備知識

ゲームを動かすのに以下の手順を踏みます

  1. サーバーを待機させる設定を行う
  2. クライアントを起動してサーバー接続
  3. ゲームの決着がつくまで無限ループ

そして、ダウンロードしたものはc#製のクライアントです。こいつを解析してJava版のクライアントを作ろうというわけです。

動くのか?

プログラミング言語が違うのに問題ないのか?と疑問に思う人もいるだろうと思うので、記載します。 結論から言うと動きます。 サーバーは「リクエストを受けるプログラム(アプリ)」なので、データを送信した後はプログラム言語は関係ありません。 詳細な通信(http)に関してはこちらをどうぞ。

動く理由

大雑把にアプリケーションの構造が下の様になっています。

f:id:Takunoji:20190510210352p:plain
アプリ概要図
リクエストとレスポンスはプログラミング言語に依存しない(各言語で実装してあるのでそれを使用する)のでServerとClientは別言語で問題なく処理することができます。

ちょっと注意!

通信を行ったときに使用するデータがServerとClientで双方とも読み取れる必要があります。 Serverで使用しているデータが数値や文字列なら問題ありませんが、他のクラスオブジェクトとかになるとClient側にインターフェースなどが必要になります。

例:EJB

Javaの場合は、上に挙げた様な問題を解決する手段としてよく使われるのが「EJB」というものです、これは「CORBA」という仕様に則り、もしくはフレームワークを使用して実装します。CORBA自体は言語に依存しないのでどの言語でもいけます。

f:id:Takunoji:20190510212436p:plain
EJBの概要

まとめ

C#とか記載しときながらほぼJavaの話になってしまいましたが、C#でサーバー(Socket通信サーバー)を起動してからJavaでクライアント(サーバーにデータを送信して、結果を受信するアプリ)を作れば問題なく起動できるというわけです。

訂正箇所

c#サーバーと記載しましたがプロコンで使用しているサーバーはc/c++(Qt)でした。

しかし。。。

世の中何があるかわからないので、実際に動かしてみないことには、なんともいえないことがたくさんあります。

でわでわ。。。

IDの管理に2進数を使う

イントロダクション

目標ブレークツリーを作るのにtreant.jsを使いました。 このツリーは、概要なので詳細がないと要件を満たせません。 なので、IDをつけて、対象になるデータを取得できる様にします。しかし、目標、タスクを複数作ると作業内容が被ってしまう事もあるので、その部分を考慮に入れてやります。 つまり、目標とタスクを分離、独立させて各目標とタスクとをリンクできる様にします。 このように、作った物(情報)を無駄無くフル活用する方法(考え方)をオブジェクト指向と呼びます。 目標、タスクをオブジェクト(物)として扱えるように、情報(目標やタスク)をカプセル化してやります。→クラス この考え方はプログラミングの世界では基本にして奥義足り得ます(笑)

具体的に

今回、自分がやろうと思っている方法です。 オブジェクトにidという項目を追加します。JSでやるのでobj.id = XXX;のように実装します。 設計レベルで行くと 目標オブジェクト.id : オブジェクトを一意に決定するID

そして、IDには以下の様な情報を持たせます。 1. 目標オブジェクトかタスクオブジェクトのどちらなのか? 2. 0→64までのid 具体的には、以下の様な形です。 ・データは8ビット=1バイト ・左から始めの1ビットは目標、タスクのフラグ、1=目標、0=タスクとする

①目標オブジェクトのid 1番 →"10000001"(バイナリ文字列)

②タスクオブジェクトのid 1番 →"00000001"(バイナリ文字列)

これを整数としてデータを持ちます。 つまり、①は129、②は1、をデータとして持ちます。 細かい所は、2進数の数え方を見て下さい。

でわでわ。。。

Eclipse セットアップ

  1. Java Install Eclipse〜開発ツールのインストール〜
  2. TensorFlow C++環境〜EclipseにCDTをインストール〜
  3. Setup OpenGL with Java〜JOGLを使う準備 for Eclipse〜
  4. Eclipse Meven 開発手順〜プロジェクトの作成〜
  5. Java OpenCV 環境セットアップ(on Mac)

目標カテゴリを作成する 〜絵が描けなくても、これならいけるかも?Fire Alpacaを使う〜

イントロダクション

自分は絵が描けないのですが、それでも「何とかしてどーにかしなくてはいけない」と思い、対策を考えました。

それは以下の様なやり方です。

レイヤーを使う

アップロードされているイメージファイルは基本的に、著作権上の問題が発生すると思っているので、ここを回避する方法を考えました。

以下の様な手順です。

  1. コピーしたいイメージファイルをダウンロードする(公開せずに個人で楽しむ分には問題ないものをダウンロード)
  2. ダウンロードしたファイルをFire Alpacaで開く

    f:id:Takunoji:20190430220605p:plain

    ファイヤーアルパカ


  3. 右下の方にあるレイヤーを追加する

    f:id:Takunoji:20190430220803p:plain

    ファイルメニューのレイヤ追加


  4. 追加したレイヤを選択して、トレース用紙の様にコピーして手で描く。。。

なぞるだけなら自分にもできるのでなんとか。。。

このレベルで作成することができました。アイコンを作成しました。

f:id:Takunoji:20190430221007p:plain

カテゴリ=音楽

用途

[OpenCv](https://zenryokuservice.com/wp/2018/11/11/java-opencv-環境セットアップon-mac/)を使用して画像を合成して60くらいのアイコンを作成しました。

作成物は[Gitにアップ](https://github.com/ZenryokuService/GoalAchievement/tree/master/dst)してます

 

でわでわ。。。

Eclipse セットアップ

  1. Java Install Eclipse〜開発ツールのインストール〜
  2. TensorFlow C++環境〜EclipseにCDTをインストール〜
  3. Setup OpenGL with Java〜JOGLを使う準備 for Eclipse〜
  4. Eclipse Meven 開発手順〜プロジェクトの作成〜
  5. Java OpenCV 環境セットアップ(on Mac)
 

ノン・デザイナーがデザインしてみる〜プログラマはデザイン(設計)もやるんです〜

イントロダクション

一応ですが、(ある程度実績を積んだら)プログラマは設計もやります。人によりプロジェクト管理者など様々ですが…

余談でした(笑)。

前回は、アプリケーションの設計2ということで、実際に「イメージを具体化するための手順」について記載しました。

「夢を形にする(ちょと盛っています)」なかなかに楽しい作業だと思います。

ちなみに、このイメージを具現化する手順の事を「目標ブレーク」と呼ぶ事にします。

そんなわけで、その続きで作業としては、目標をブレークダウンした(目標ブレークツリーを作成した)時にサンプルで作成したものだと、直感的でなくとても見づらいものになったので、これを改善しようと思い「イメージ(絵)を使用する」ところに至った次第です。

f:id:Takunoji:20190427221435p:plain

作成した目標ブレークツリー

実際に作成したJSでの表示はこちらです。

イメージを作成する。

下にあげるサイトを参考に、考えた結果「インディアンアクセサリーのシンボル」を引用することにしました。

どの様にやろうか?ここは大いに悩む部分ですが、前もってイメージを具現化しておくとわりかし簡単にいきました。(前もって、悩んだ時間長いです)

とりあえずは、目標の各項目に対しそれぞれのイメージを割り当てていきます。

目標ブレーク用のカテゴリ一覧はこちらのページを参照ください。

 

イメージ作成ルール

この部分もカテゴリ一覧のページに記載しています。そしてこのルールに則り上記の手順て割り当てたイメージをカスタムして目標ブレーク用のイメージを作成します。

イメージの部品一覧

  1. 外枠 → 「Lv0: 目標の方向性のカテゴリ」を示す(3種類)
    =[ 創造・実行, 学習・習得, 生活習慣(リズム) ]
  2. 内側 → 「Lv1: 目標行動のカテゴリ」を示す(13種類)
    =[ 音楽, ファッション, 学問, 園芸 etc... ]
  3. 土台 → 「Lv2: 成果物のカテゴリ」を示す(7種類)
    =[ 実物・制作物, ノート・日記・ドキュメント, コレクション etc... ]

全部で23種類のイメージ部品を作成します。

 

でわでわ。。。

 

 

Eclipse セットアップ

  1. Java Install Eclipse〜開発ツールのインストール〜
  2. TensorFlow C++環境〜EclipseにCDTをインストール〜
  3. Setup OpenGL with Java〜JOGLを使う準備 for Eclipse〜
  4. Eclipse Meven 開発手順〜プロジェクトの作成〜
  5. Java OpenCV 環境セットアップ(on Mac)
 

アプリケーション設計2〜イメージを形にする手順<やるべきことを一覧にする>〜

イントロダクション

前回は、アプリケーションの設計について記載しました。早い話が「夢を形にする作業(ちょっと盛っています)ですよ〜」と言うことでした。

そして「イメージを実現するために何をやるのか?」を明確にする必要があります。そこで「目標ブレーク」(自分が作った言葉ですので一般的ではありません。。。)を行う方法を使えば「夢を形にする」方向に進みやすいのではなかろうか?と考えた次第でございます。

アプリケーションの設計(夢を形にする)については下のリンクを参照ください。

夢を形にする① 目標ブレーク〜じゃんけんゲームの場合〜 – PGボックス

目標ブレーク

目標を決めて、それをブレークダウンする。シンプルな話ですが、なかなかに面倒な作業です。自分の場合はノートがないとリストアップした項目が頭の中に残らないので。。。そんなわけで考え出しました。大雑把に下のような絵で表現できます。

f:id:Takunoji:20190427133314p:plain

目標ブレークツリー

項目名が横に長くなるので、とても見辛く、直感的ではないのでこのままでは使用できません。。。がイメージとしてはこのような感じになります。

基本的に目標(対象項目)に対して、実現するために必要な物・事柄を3つ挙げていきます。なるべく3つ挙げるようにします。

このような形で、目標(夢、イメージ)を形(現実のもの)にするためにやることをリストアップします。これだけで「自分のやるべきこと」=「目標達成」までの道のりが見えると思います。いかがでしょうか?

 

余談

ちなみに上記のダイアグラムに関しては、Treant.jsを使用して作成しました。

ダイアグラム(ツリー状のグラフ)を作成するのに適した(便利な)JSライブラリのようです。実際に作成した感想を言うと以下のような部分で「とても便利だなぁ」と思いました。

  1. こんな感じでファイルをダウンロードしなくても使用できる(JSはみんなそうかもしれない。。。)
    ヘッダーに下のコードを記載すると使用できる
    「<script src="http://fperucic.github.io/treant-js/Treant.js"></script>」
  2. 簡単にツリーを作成することができる、JS特有の面倒臭さはあるが。。。
    とりあえず、使用するプロパティを見つけることができれば簡単に使用できます。Treant.jsのサンプルはこちらです。
  3. イメージファイル(画像)なども指定してグラフ上に表示できるのでアイディア次第で幅広く使用できる。

こんな感じです。

ちなみに、より詳細なことやTreant.jsでの実装部分に関しては下のページに記載しています。

Treant.js イメージ作成〜ダイヤグラムにイメージを表示する〜 – PGボックス

でわでわ。。。