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

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

プログラミング 数学 〜プログラミングと数学の接点〜

イントロダクション

ここ最近は、ブラウザアプリの作成について記載していたのですが、そろそろ実装レベルの内容しか記載する事がなくなってきたので、ここから先は下のブログ「PGボックスにて記載する方向にシフトします。

ぢゃ何を書くか?

実は、結構前から機械学習に躓いており…いろんなアプローチで理解に挑戦するもあえなく断念。TensorFlowの実装(チュートリアル)をやってみたがこれも、各学習モデルの作り方が分からず…

どーするか?

今迄の経験(機械学習の理解)では、共通して理解出来なかったのは「理論」です。ここでいう理論と言うのはどー考えたら、このような結果が得られるのか?を組み立てるための理論です。
キーワードになるのは以下のものです(自分の場合)
1. 統計学
2. パターン認識
3. 線形代数
4. ベクトル、数列などの計算方法

数学をJavaで切る!

以前この様に考えて次のようなリポジトリを作成とりあえず、2〜3次関数までのグラフを作成するプログラムを作りました。がこの次はどう進んで良いか分からず放置していましたが、キました(笑)

数学的アプローチ

丁度、機械学習に躓いていたので、数学の基礎からJavaで切り刻んでしまおうと思いました。そもそも行列とか、集合とか、言葉は聞いた事あるけど今迄の人生で学ぶ気にはならず…当選学生の時です。現在になり、やっとけばよかったと思う次第です。 しかし、目の前に立ちはだかる以上、倒さなければならないので少ない脳みそを捻り打開策を考えました。それの一つが数学的アプローチで理解すると言うものです。 よく「数学は積み重ねだからわからない時は前に戻ってみる」と言います。ぢゃ〜戻ろうか?と戻ってみると行列の基礎まで戻りました。

行列ならば

この言葉を聞いてピンときました。行列→PythonならばNumPy、JavaならばND4Jがある!世の中捨てたもんではないなとつくづく思いました。とりあえずは、行列の扱いに慣れるために、行列を使いグラフを描いてみました。これで基礎的な事は理解したと思っています。(自己満です) 行列は、座標計算→2次元描画(通常の絵)や3次元描画を行うのにも使用されているので、それぞれ着手する時に再度突き詰めて行こうと思っています。

画像処理

機械学習なのになんで?」と思っていました。しかしOpenCvチュートリアルなど読んでみると、機械学習の根本である、特徴量やアルゴリズムなどの使い方が書いてあるので、ここを理解すればイケる!と思った次第です。 実際、画像の分析や顔認証などの技術を説明していました。詳細を読んでいくとヒストグラムとか特徴抽出などの方法について言及していました。なので、とりあえずは勉強したものの、よくわからない状態ですが、当時は行列の理解がなかったので、わからなかった事にして再度OpenCvの理解に挑戦しようと思う次第です。

再学習

今にして思えば、OpenCvを使用して画像処理を行う事のみを実装したので、その目的や用途に関して理解していなかった。今回はもっと突っ込んで学習しようと思います。 でわでわ。。。

学習方法 トップダウン 〜わからないをわかったへ〜

イントロダクション

ここ数ヶ月…機械学習の理解に挑戦してきました。いろいろと調べてみたけど、どれも数式ばかりで、わからない。他のものは根本的なトコがわからない… というような状況で足踏みをしていました。

OpenCvを学ぶ

結論から言うと機械学習の先駆けはOpenCvであろうと思った次第です。実際に機械学習の本などで使用される言葉があり、それに対する説明が記載されていました。 早い話が「機械学習の根本的なトコはOpenCvのものと同じだから、そっちを理解すればおっけ⭐️」となった次第です。

<ポイント>

  1. わからないに対してわかる部分から攻め入る
  2. 「早い話がなんなのよ?」と言う疑問をはじめに解決する
  3. 「早い話」がわかったら詳細に向かって疑問点を掘り下げていく

<疑問点を掘り下げる>

自分の「機械学習がわからない」の場合は次のようになります。

「早い話が」

機械学習は、色々なアルゴリズムを使って学習モデルを作り、色々な物事を判定する(分類する)

掘り下げる

上のところで明確にならない「色々なアルゴリズム」と「学習モデル」について同じように「早い話が…」を理解できるように学習します。 同じ事を繰り返し、掘り下げていきます。

現在学習中

OpenCv機械学習について調べています。これに関しては「わからん」の一言に尽きます。

わからない原因など
  • 数式がわからない
  • 記載し記載している内容がわからない
  • 数学の話はどうでも良い
  • プログラムに関しては最小限度

上記の理由で今まで読んだ本では理解できませんでした。

実際に撮っている方法

色々な本を読んだけど、わからなかったので他の方法を探していたところ、OpenCVの本を持っていたので中に「機械学習」という文言があり学習し始めた次第です。 読んで見ると、画像解析(顔識別、人間の抽出)を行うために使用する技術が「機械学習」でした。こいつを応用しているのが世間巷で言うところの「AI(ディープラーニング)」であろうと言うところまでたどり着きました。 つまり、「機械学習」を理解すればディープラーニングも理解できるであろうと言う認識です。

OpenCVを学ぶ

結局ここにたどり着くのですが、現状で少し学習しておりました(笑)。学習した時の記事リストです。

OpenCv

  1. Java OpenCV 環境セットアップ(on Mac)
  2. Java OpenCv Lv1 〜入門: 写真の表示〜
  3. Java OpenCV Lv2 〜画像を表示する〜
  4. Java OpenCV Lv3 〜画像の平滑化(smooth())
  5. Java OpenCV Lv3 〜画像にガウシアンフィルタ(GaussianBlur())
  6. Java OpenCV Lv3 〜画像に中央値フィルタ(medianBlur())
  7. Java OpenCV Lv4 〜画像の中身をみてみる〜
  8. Java OpenCV Lv5 Matクラスで描画処理〜
  9. Java OpenCV Lv6 Matクラスで背景から作成してみる〜
  10. Java OpenCV Lv7 MatクラスでEllipseしてみる〜
  11. Java OpenCV Lv9 〜画像編集「足し算」(cvAdd)
  12. Java OpenCV Lv9 〜画像編集「引き算」(cvSubtract)
  13. Java OpenCV Lv9 〜画像の掛け算〜
  14. Java OpenCV Lv10 〜行列演算Mat#submat()
  15. Java OpenCv Lv10〜画像の平均値をだす〜

OpenCv + JavaFX

  1. EclipseにSceneBuilderを追加する
  2. JavaFX SceneBuilder 〜EclipseとSceneBuilder連携~
  3. Java OpenCv Lv1 〜入門: 写真の表示〜
  4. Java OpenCV Lv2 〜JavaFXでの画像表示〜
  5. Java OpenCv ビデオキャプチャ〜カメラからの入力を表示〜
  6. OpenCV tutorial〜ヒストグラム〜
  7. OpenCV tutorial 解析 〜ヒストグラム〜
  8. OpenCV tutorial 解析2 〜ヒストグラム計算〜
  9. OpenCV tutorial 〜フーリエ変換など〜

Ajax PHP 〜登録したデータをマップに表示〜

イントロダクション

前回画面からデータを入力してDB に登録するとこまでやりました。次は、登録したデータの表示をやります。 作成したソースはGitにアップしてあります。

DB 〜ピン表示

レンタルサーバMySqlからデータを取得〜XmlHttpRquestのレスポンスを受けてグーグル マップにピン(オーバーレイ)を表示する迄の実装を行います。

設計を行う

  1. 対象のHTMLにアクセスされる
  2. JSで初期表示(onload)処理が走る
  3. PDOを使用してDB コネクションを取得、SQLステートメント生成($statement)
  4. SQLでDB のデータを取得
  5. 取得したデータ(テキストとイメージ)をHTMLテキスト(div visible="hidden")に出力(レスポンスで返却)
  6. XmlHttpのレスポンステキストで受け取った5のdivタグからピン(オーバーレイ)の情報を取得、作成を行い、吹き出し(WindowInfo)の作成及びバインド(オーバーレイとの関連付け)を行う。エラーハンドルはこちらを参照しました。

処理詳細

  1. 初期表示処理でDB へのコネクションをグローバル変数に設定、呼びだし時にコネクションの有無を確認
  2. 地域情報テーブルよりデータを取得
    SELECT * FROM AREA_INFO
  3. 取得したデータよりdivタグにデータを埋め込み非表示でレスポンスに出力
    imgはデータをHTMLに出力
  4. 吹き出しに表示するようバインド。

実装

  1. PDOでDBコネクションを取得する
  2. SELECT * FROM AREA_INFOを実行する
  3. 実行結果をdivタグに出力する
    <予備情報>
    ・メタ文字をHTMLに表示する("<"とか"%"など)
    ・イメージをHTMLタグに出力する(URLスキーム)
    PHPのヒアドキュメント実装方法
    ・WindowInfoデータのタグ
    <div id="test" data-name="名前" data-url="URL.com"/>
       var doc = document.getElementById("test");
        console.log(doc.dataset.name);
        console.log(doc.dataset.url);

PHPでの出力>
スマホでデータの登録を行う想定のため、保存したデータの形式がどのようになるのか調査が必要なため課題としてあげることにします。

後日

とりあえずデータを取得、HTML に出力してみたところ、imgがパスになっていてURLスキームでの表示が出来ませんでした。 登録処理を見直して見ようと思います。。。

でわでわ。。。

PHP Google Map 〜ライブハウス照会サイトを作りたい〜

イントロダクション

タイトルの様なウェブページを作成しようとしております。現状ではサンプルとして作成中です。
今回は、地域情報(ライブハウス)を多少登録、表示した後にどーやるか?を考える事にしたいと思います。

ユーザーを喜ばす

せっかく作ったアプリなので「多くの人に使ってもらいたい!」と思うのは自然な話だと思いますが「役に立つ」=「喜ばす」のはとても難しい様で簡単な様で複雑な感じです。

どの様に喜ばすか?

このアプリケーションは位置情報と対象のホームページをリンクさせて表示するシンプルなものです。「普通にグーグル マップじゃん?」と言われると「左様でございます。」となります(笑)
このままでは、通常のグーグルマップなのですが、そこに付加価値をつけるのが我々エンジニアの役目ではなかろうか?と思うこの頃です(笑)
しかし、最近のGoogle人工知能(TensorFlow)などの技術が実用化されたのもあり、検索jか色々な面で太刀打ちができないのも現状です。。。。
そこで考えました。マップは対象の位置を表示しただけでは「不親切」なアプリとなります。 理由は、人が道順を説明するときは「〜の近く」とか 「〜の向かい」などのように説明することが多いからです。つまり地図上に目印となるような物件(オーバーレイ)を表示してやる方が良いと思うのです。

f:id:Takunoji:20190711225427p:plain
オーバーレイ

ちょっと話がややこしい

「親切なアプリケーションを作りましょう!」という話はわかったけどそれだけで「お客様」はお金を払ってくれないであろうと思うのは至極当然なことだと思います。 ここからが本題です

付加価値をつける

自分が今までに読んだ、もしくはニュースなどのメディアで聞いた中で「よく聞く話だな」と思うのは「付加価値をつける」という言葉です。近代化した今の時代に「最低限必要なもの」というのはすでに揃っている状態です。つまり手に入れるのが難しくない、もしくはすでに提供するサービスが整っている状態です。
そこで「付加価値」という意言葉が出てきます。「既存のものに何かをプラスαして価値を出す」というテクニックです。これならばほぼ無限にありそうです。

Google Maps

前述の通り、このαを考えるのが我々エンジニアの仕事ではなかろうかと思うこの頃、そしてこのプラスαを実現するために以下のようなフローを考えました。
1. Google Mapにライブハウスを表示する
2. 各ライブハウスまでの道程にある物件を表示
3. ライブ告知と同様に近隣の広告情報も表示する

これで、自分の作成したサイトのアクセス数が多いのであればライブハウス近郊の企業体も「広告料」を払ってくれるであろうと思うわけです。

問題

しかし、この作成した自分のサイトにそれだけのアクセスが稼げるだろうか?何もしない状態で(SEOのみ)では売れるほどのアクセスは見込めないでしょう。
ならばどーするのか?これも「どのように喜ばすか?」の時と同じように考えます。
1. 登場人物(法人などの抽象的なものも含む)を洗い出す。
2. ここに登場する人物たちが喜ぶ、想定通りに動いてくれるであろうと期待のできるアイディアを考える
3. 「2」出立てた仮説を実証できるように「アプリケーション」=「仕組み」を考える。

まとめ

こんな感じで、計画〜実行までを繰り返して目標達成まで進んでいく手順を導き出す方法を考えました。
それを「目標ブレーク」と名付けました。
こちらもよければどうぞ参考にしてください。
お互い頑張りましょう。
でわでわ。。。

PHP Ajax 〜プログラム設計〜

イントロダクション

今、Google Mapを使ったブラウザアプリを作っています。これの設計を見直すので、確認がてらに記載します。

やりたい事

まちをブラブラしてる時に発見したライブハウスやイベントスペースなどを地図に登録して音楽マップを作るための、ツールを作る

概要設計

  1. 初期表示時(リクエスト受信時)にDB(MySql)より地域情報を取得
  2. 取得した地域情報をHTML(hidden)で出力
  3. 出力したHTML(地域情報div)をonload時に読み込み地図上にオーバーレイを描画する
  4. データ入力ボタンを押すと入力フォームが開く
  5. データ登録ボタン押した時に対象のデータをDB に登録する
  6. 登録したデータを地図に描画する

詳細設計

  1. DB接続情報よりDB接続、地域情報テーブルよりすべてのデータを取得
  2. 取得したデータでdivタグを作成してオーバーレイの情報として出力
  3. 以下の様なかたちでHTML出力する
    div:data-name=地域情報名
    div:data-url=対象のホームページURL
    div:data-img=同様に画像
    div:data-lat=位置情報Lat
    div:data-lng=位置情報Lng

使用する言語

クライアントサイドJavaScript
サーバーサイドPHP

実装に向けて

実装環境としては、PHPMySqlが使えるワードプレスをインストールできるサーバーを使用(レンタルサーバー)です。
これにHTMLとJavaScriptでクライアントサイドを作りPHPでサーバーサイドを作る。

実装時に気をつける事

PHPでは、HTMLを(なるべく)出力しない、クライアントとサーバーを分断し、それぞれに依存関係を作らない様に作成する。→クライアントサイドを修正したら、サーバーサイドを修正しなくてはならない様な実装をしない。

具体的に

PHPでは画面(HTMLの表示コンポーネント)を出力しない。非表示のdivタグのみを出力する
クライアントサイドは、全てPHPが出力したHTML をJSで読み込みオーバーレイを描画する。

まとめ

今回のマップは、ライブハウス照会サイトの機能です。この機能が土台となり画面上に表示したオーバーレイの吹き出しから各店舗の情報を表示します。
今回のパージョンでは、対象の入り口などの目印になる様な画像とホームページのURLを表示します。
実装後運用して多少のデータを追加した後、登録するべきデータはひとりで登録し切れないので、自分のレンタルサーバにユーザー登録している人が地図情報を追加できる様にしていこうと考えてます。
登録ユーザーはワードプレスを使用してプログ記事を書くことが可能で、記載した内容(文字数制限あり)がオーバーレイの吹き出しに表示されます。

現状のプログラム設計でした。
でわでわ。。。

PHP PDO 〜Ajax + PHPでDBに入力したデータを登録する〜

ブラウザアプリを作る

今回はGoogle Mapで指定したポジションにマーカーを追加するブラウザアプリを作成しています。

<大雑把な仕様>

  • マップで表示しているところをタップするとピン(Overlay)が降ってくる
  • 登録していない「選択」した状態は下のようなイメージ
    f:id:Takunoji:20190711225427p:plain
  • <データ入力>ボタンを押下すると入力フォームが開く
  • <データ送信>ボタンを押すとAjaxでサーバー側のPHPにアクセスしてDBへ入力データを登録する

作成したものは以下にあります。

Simple Map

f:id:Takunoji:20190711230525p:plain              f:id:Takunoji:20190711230528p:plain

とりあえずはこんな感じで作成中です。

色々とつまづきながらやってます。

でわでわ。。。

 

関連ページ

 

  1. JS GoogleMaps API 〜オリジナル・データマップを作ろう〜
  2. Github page Github pageでリポジトリの情報を公開しよう〜
  3. 夢を形にする① 目標ブレーク〜じゃんけんゲームの場合〜
  4. プログラム 習得 順序概要
  5. PHP PDO 〜MySQLにアクセスする〜
  6. エラー:invalid data source name
  7. Github page Github pageでリポジトリの情報を公開しよう〜
  8. Github 使い方〜リポジトリにライセンスを設定する〜
  9. Github 使い方〜Issueでやることを整理〜
 

ソケット通信ゲーム 〜u16 プログラミングコンテスト〜

イントロダクション

以前u16 プログラミングコンテストの大人版に出てみました。
ゲーム用のサーバ(CHaser)にクライアントアプリで接続して現在位置と存在するアイテムや壁(ますに乗るとゲームオーバー)、相手プレーヤーの情報を電文(10ケタの数字)で受け取リ競うゲームです。
こちらにGit のリンクを貼っておきます。ゲームの詳細とサーバのソース(Git フォークしました)とクライアントアプリのサンプル(c#版とJava版)があります。

Java版のサーバ

前回、サーバアプリをPullして自分のPCでゲームサーバを起動してクライアントアプリを作ったのですが、今度はサーバの方を作ろうかと思った次第です。
要件としては以下の様なものです。 1. プレイヤーの人数を増やし4人同時プレイができる様にしたい
イメージとしては、昔のファミコンの様にワイワイやれるゲームにしたいという思いです。
2. クロスプラットホームで遊べる
クライアントアプリはソケット通信でやるので何でも良いのですが、マイクロビットでもこのゲームに参加出来る様に通信内容の工夫をする

その他は、プロコンサーバと同じ様な仕様で行こうと思います。

ここから計画!

とりあえず、やりたい事が見えたので計画を立てます。 立て方はリンク先を参考にして頂きたく…

現行のCHaserサーバは以下の様な動きをします。
設定画面(初期表示)でプレイヤーの受け付け(クライアントの受付)を行います。
プレイヤーが揃ったらゲーム開始ボタンを押下してゲーム開始
[ゲームはこちらにイメージ][https://github.com/ZenryokuService/AsahikawaProcon-Server/blob/master/README.md)があります。
こんなところで失礼します。

でわでわ。。。

Microbit アイディアを考える

何をやるか?

これは、いつも悩むのですが…自分の場合「何をやったら面白い?」と自問自答してることが多いです。

ポイント

・何か凄いものを作る必要はない
・とりあえずは実行する事が大事

駄菓子菓子

「なんかすげーモン作りてーな!」となるのが人情…「じゃ、中を取って…」とブレていく事が多々あります。

ワンアイデアで勝負!

  1. Microbit に付いているジャイロセンサーで画面上に表示した「何か」を動かしてプレイするゲームを作るとか…
  2. 温度センサーで温度計
  3. 腹を決めてC++実装してみる

    結果

    マイクロビットでソケット通信するアプリを作る方向に進もうと思った次第です。
    マイクロビットで使えるプログラミング言語は色々ありjs, python , c++と選べるので、c++が使える時点で何でも出来るだろうと思い…じゃクロスプラットホームで遊べるものが良いな…と思った次第です。
    つまり、ソケット通信によるデータのやり取りでゲームを楽しめれば色んな年齢層にプログラミングに触れてもらえるだろう→Javaを布教するチャンスという認識に至りました(笑)

でわでわ。。。

Microbitのススメ 〜遊びで本格プログラミング〜

Micro:bitを使う

タイトルに示すとおり、Microbitで、ちょびっとすごいこができるので始め方などを紹介したいと思います。

事の発端

実は今作成しているプログラムの作成に疲れたのでMicrobitで遊ぼうと考えた次第です。 しかしMicrobitを舐めてはいけない。。。Micribitには電気信号を送信するための端子〜データ通信、各種センサー(以下に示します)
1. ジャイロセンサー
2. 光センサー
3. 温度センサー
3. 加速度センサー
4. コンパス

上記のものが付いています。 そのほかBluetooth, 赤外線通信(シリアルデータ通信)など色々あります。

まず何をするか?

通常のプログラミング(JavaPHP, Rubyなど)でも同じですが、「何をやらそうか?」を考える必要があります。

何ができるのか?

上に示したセンサーがあるので、光や温度、動きなどを感知して(プログラムから)使用することができるので色々できそうですが、「何をやらそう?」と悩んでしまいます。

調査する

大半の物事に共通すると思いますが、知らないものを使うのであれば「調べる」が必要になりますね。そんなわけで調査しました。

Case1

インターネット接続(英語)

Case2
アイディアが出ない

調べてみましたが、結局はアイディアが出ないとどうしようもないです(笑)

コーディングイメージ

最後にMicrobitでの実装イメージを以下に示します。

f:id:Takunoji:20190707180603p:plain
Microbit実装イメージ
こちらにアクセスすると詳しくみれます、上記のイメージはこのページから失敬しました。 ※2つとも同じページです。

Microbitで花火を打ち上げた!

Google クロールエラーが出る 〜WordPressを使っているときの対処法〜

イントロダクション

Google Consoleで自作のPHPを登録したらエラーが出ました。 f:id:Takunoji:20190706174018p:plain こんな感じです。

これに対処すべく調査したところ以下のサイトを見つけました。

unskilled.site

これを参考に修正します。

自分の場合を考える

<参考サイトの場合> WordPressを使用して表示する→WordPressディレクトリ以下にあるページの問題でした。

<自分の場合> WordPress用のディレクトリを切っているので、ルートにあるファイルはWPの影響下にありません。強いて言えば関係ない状態です。 しかし、WordPressの機能を使用したいのでWordPressの関数などをロードしているのでGoogleクロールエラーが出ました。(多分。。。)

対処

WordPress外のphpで使用したい機能は「ユーザー情報の取得」なのでユーザー情報を取得するための部品(PHP)をロードする方法に切り替え、エラー解消に臨むことにします。 本当は、wp-load.phpなど全部まとめて読み込むようにすると実装は楽なのですが、以下の問題があります。 1. 画面表示などでLogin画面が出てくる 2. 不要なもの(機能)がたくさん読み込まれる 3. 結果、余計なリソースを使用することになり、処理が遅くなったり思わぬ不具合が発生するかも?→その危険性が増えます

安全面とパフォーマンスを考慮に入れて必要なファイルを読み込むように処理を変更しようと思います。 現状では以下のようなコードでWordPress関数をロードしています。

require( dirname( __FILE__ ) . '/ワードプレスディレクトリ/wp-blog-header.php' );

WordPressをロード

以下のように修正しました。

require( dirname( __FILE__ ) . '/ワードプレスディレクトリ/wp-includes/pluggable.php' );

そして、改めてGoogle Search Consoleでテストしてみたところ以下のように表示されました。「インデックス登録をリクエスト済み」にチェックが入っています。 f:id:Takunoji:20190706180411p:plain

多分解消できたと思いますが、結果は待つしかなさそうです(笑)

でわでわ。。。