へたれ技術っぽいブログしてます

【プログラミング】今年もマスコットアプリ文化祭(アプリコンテスト)やるってよ!

今年もマスコットアプリ文化祭が開催されるようです。告知がありました。

 

mascot-apps-contest.azurewebsites.net

 

一昨年はUnityで作ったアプリ(というかチュートリアル)を、昨年はJavaFXで作ったアプリ(というかチュートリアル)を出品したので、今年は何で作ろうかと考え始めようと思います。

今年こそ参加賞狙いではなく、入賞しないまでもそれなりに遊べるアプリ等を作ろう!

...と毎年言ってる気がする。

 

 

【VR】Oculus 5万円セールだったのでついポチったよ

Oculus Rift CV1 & Touchで ¥50,000(税込)は安すぎるでしょう!

これで DK1, DK2, CV1と全て個人購入したわけだが。コレクションしたい訳ではないのだけど自宅でも「Robo Recallできるのかー」と思ったらつい出来心で...

それにしても会社用に購入した時と比べると半額ってのは凄い値下がりだなあ。まさかすぐに「CV2が出てCV1は販売終了」とかではありませんよねえ?

 

p.s.

まだ届いてないけど開発環境を学んでおこうと思って以下の本を買いました。読むよ。

 

【Android】AndroidアプリへのDropbox連携の実装

何年も前に作ったアプリなのでクラウドストレージ連携を実装してなく、使い勝手に不満が出てきた(実はとっくの昔から不満に思ってた)ので実装に取り掛かろうかと思った。

 

AndroidアプリなのでGoogle様に飲み込まれた方がいいよなと思ってGoogle Driveとの連携方法を探したのだけどお恥ずかしながらいまいち見つからないしわからない。Dropboxとの連携も同様にあまり資料がなかったのだけど、一応僕ごときでも読んでなんとなくわかりそうな実装手順を書いてくれているページがあったのでこれでトライしてみようと考えた。

www.webprofessional.jp

 

まあ、いきなり拙作アプリに組み込もうとして一旦頓挫したのだが(←バカ)、素直にサンプルプロジェクトがあったのでこちらに指示にしたがってDropbox開発者ページで取得したApp_Keyを埋め込んで試したけどアップロード時にエラーが出て動かない。

 

エラーメッセージを元に調べたら「どうやらこちらの症状では?」と推測できたので試しにMainActivityのOnCreateメソッドに以下の「パーミッション許可を利用者に問い合わせる処理」を組み込んだらうまくいった。

Android 6.0以降アプリがmkdirでフォルダを作れない場合の対処

上記処理の記事に一箇所記述ミスがあるのはご愛嬌。サンプルコード中の小さなミスを発見して自分で直すのも勉強になるから問題なし。

 

さて、本題の拙作アプリへのDropbox連携実装にかかろうかね。

 

おしまい

 

 

【覚書】jarファイルで画像などのリソースを扱う方法

JavaJavaFXなアプリを作っていて、開発環境上(IntelliJ IDEA)で動かしていた時は表示されていた画像(Imageオブジェクト)が、jarを生成して動かすと表示されないという事態に遭遇した。

ググったら割とポピュラーなことらしかった。以下、対処方法。

今までは

image = new Image(Paths.get("hogehoge.png").toUri().toString());

みたいに記述していたところを、

 

image = new Image(getClass().getResourceAsStream("hogehoge.png"));

と記述し直した。

画像ファイルはソースファイルと同じ場所に置く。

 

ちなみに、画像ファイルを IntelliJ IDEA の Projectエクスプローラで表示されている src ディレクトリの下に置いた状態で試して「動かない〜!」と悩んでいた。ソースファイルのあるところ、つまりパッケージのディレクトリ下に置かないとダメです。恥ずかしい〜。

 

【プログラミングクラブAdvent Calendar】AI学習事始めの事始め

 この記事は以下のAdvent Calendarの22日目となります。

www.adventar.org

 

人工知能をちょろっと勉強してみたいなと思って取り掛かってみたので、その覚書として記事にします。まだ途中だし、挫折しそうだし、ガッツリは無理だしなので参考にならないかと思うけど。

 

ステップ1:kazoo氏本を読んでみた

AI研究の現状を全体的に攫ってみたかったので「普通のお母さんが読んでもわかる」とう触れ込みのこちらをまずは読んでみた。

平易な書き方で誰でもなんとなくわかった気になれる文章なので、最後までスルスルっと読み終われると思う。基本的に汎用AI(囲碁とかチェスとかに特化してないAI。小説やアニメで反乱起こしそうなやつ)について書かれた本だけど、流行りの機械学習についてもしっかりと書いてある。

この本で「教師あり学習」「教師なし学習」「強化学習」の違いや「深層学習(ディープラーニング)」の定義についてなんとなくわかった。

 

ステップ2:ディープラーニングのプログラムが書かれている本を読んでみた

プログラムが示されていて解説もしっかりしてそうなので以下の本を買って読んでみた。

特に1章と2章はわかりやすくプログラムからなんとなーくニューラルネットの仕組みがわかったような気になるのでなんとか読み進められた。実際には使われているAI用フレームワークのことがわかってないので本当になんとなーくだけで理解はできていない。

1章と2章に対して、3章は歯ごたえがありありでまだ読み終わっていない。さらに言うと、読み終わっても理解できる気がしない。

この本を選んだ一番の理由は「技術書としてはかなり(物理的に)薄い本だから」なのだけど、その薄さにもかかわらず内容は濃いと思う。今の自分(未来も?)には内容が難しいのでかなり苦労しているところ。

残念ながらプログラムの動作確認はまだしていない。動作に足るCore i7, GTX1080くらいの専用Linux機を用意したい。

 

ステップ3:個人ブログを読ませていただいて勉強

前述の本が手強かったので、並行してWeb上の記事を色々と探してみた。その中でも、こちらの方のブログにある「高卒でもわかる機械学習」というシリーズ記事がとても読みやすくて一番参考になった。

頭の中に思い浮かべた時には

特にニューラルネットワークの仕組みと1層パーセプトロンと2層パーセプトロンの違い

 などは、前述の本でさらっと流している部分をしっかり納得しやすく書かれているのでとても勉強になった。こちらの記事がなければ本を読み進めることができなかったと思う。

 

ステップ4:Pythonフレームワーク使ってなんか動かしてみる(未達)

Pythonの文法本は買ってつらつら読んでいる。まだAIには触れていないけど、AIとは関係ないなんかアプリでも組んでみようと思ってる。文法や組み方に慣れてからAIの方向に着手する予定。

 

番外:よもやま

Web上にある勉強リソース(無料)の Courseraに機械学習が学べるコースがあって評判が良いようなので終わらせたい。

www.coursera.org

https://www.coursera.org/learn/machine-learning/home/welcome

 

あと、数学の復習用に「NHK高校講座」の数学Iを見てみたけどこれ純粋に面白い番組だなと思った。数学苦手な人に是非観てもらいたい。

NHK高校講座 | 数学I

 

と言うわけでまだ着手したばかりなのでもうちょっと踏ん張る。

先は長い。長すぎる。自分がある程度理解できた頃には HAL9000 が稼働を始めてそうだ。

 

おしまい

 

 

 

 

 

【プログラミングクラブAdvent Calendar】部員の皆さんへの宿題です

この記事は横浜医療情報専門学校プログラミングクラブ Advent Calendarの13日目となるモノです。

www.adventar.org

 

関係ないけど、 Calendarってどうしても Calender にスペリング間違えちゃいそうになりますよね。ならない?

 

えーと、この日が空いていてどうも誰も書いてくれなさそうだったので、急遽 埋めてみることにしました。ちょっと悲しいよ僕は。

というわけで、唐突ですが 部員の皆様に宿題です。

 

こちらの プロ生ちゃんAdvent Calendarというもの

qiita.com

 

の、ちょうど同じ13日目の記事として恥ずかしながらこんな記事を書きました。

hiesuke.hatenablog.com

 

JavaFXというGUIライブラリを使って Java言語で画像を動かすってだけのチュートリアル(練習課題)みたいな何かです。書かれている通りに設定してプログラムコードを入力すれば多分動きます。

 

では宿題です。

1. この記事の通りに試してみてください

 ヒント

 ・写経するだけ。わからなかったら聞いて。

2. カーソルキーの左右( ← と → )で、右と左に移動するように変更してください

 ヒント

 ・左右はX方向です。xの値が増えれば右、減れば左に移動(表示位置変化)するよ。

 ・右向きに反転した画像を用意する(画像編集ツールで加工すればOK)。

 ・keyPressed関数の中で eventを調べれば押されたキーがわかるよ。

 (試しに「 System.out.println( event.getCode().toString() ); 」を加えてみよう)

 

簡単すぎる!という人はさらに

3. 以下の画像を使って上下左右に移動するように変更してください。

  f:id:Hiesuke:20161214095959p:plain

  98.png

 ヒント

 ・1枚の画像(Image)から任意の場所だけを切り取って表示することができます。

  Googleで検索した結果

  (例:  gc.drawImage( image, 0, 0, 32, 32, x, y, 32, 32);  // 左上のキャラだけ)

 

おしまい

 

p.s.

ジョウホウカガクセンモンガッコウのアドベントカレンダーもアッタンダネ...

qiita.com

 

 

 

 

【プロ生ちゃんアドカレ】ドット絵のプロ生ちゃんを動かせるだけ(2016年版)

ドット絵のプロ生ちゃんを動かせるだけ(2016年版)

この記事はプロ生ちゃん Advent Calendar の13日目分です。

qiita.com

 

昨日の記事は orange_recさんの「プロ生ちゃん アプリ開発支援プログラムと作ったやつ」です。

対して本日の記事には目新しさも知見もありませんのでゴメンなさい。プログラミングに詳しくない人向けの記事っぽい何かということでご容赦を。

 

動機

最初は「なんやかんやで忙しいし、別に書けることないし...」と参加を日和ってたんですが、プロ生ちゃんから「みなさんAdvent Calendarに記事を書いてください」といった旨のメールが来たから参加させていただきました。義理を果たさなければ!(昨年開催した勉強会でプロ生ちゃんグッズ配布の提供を受けてましたので ^^; その節は誠にありがとうございました)

ちなみに、メール来る前は超絶過疎ってましたけどメール来てすぐにたくさん埋まりましたね。でもこれを書いてる12月7日現在で、まだ6個ほどが空欄ですが...

 

概要

昨年はこんなチュートリアルっぽい記事を書いてました。

hiesuke.hatenablog.com

というわけで今年も「サイトや本をひもときながらアプリ作成した経緯を書く」ことで、「マスコットアプリ文化祭の参加賞を貰うための初心者向けチュートルアルっぽいもの」になればと考えて記事を書きます。せっかくなので昨年と同じUnityではなく別の開発環境でプロ生ちゃんを動かすアプリを書いてみようかと思います。今年使ってみようと思ったのは「JavaFX」です。ちなみに、単純に「使ってみたかったから」選びました。自分、勉強始めるきっかけがないとなかなか新しいことに取り掛かる機会がないもので。しかもAdvent Calendarの締め切りに追われるってことは、こりゃ身が入るってもんです。...たぶん。

 

JavaFXとは?

AWT、Swingに続く Javaに用意された最新のGUIライブラリですね。最新といっても、2007年5月のJavaOneでお披露目されたってことなのでもう10年近く経ちますね。詳しくはWikipediaをご覧ください。

JavaFX - Wikipedia

 

マスコットアプリ文化祭とは?

マスコットアプリ文化祭 2016(MASCOT CHARACTER APPS CONTEST 2016)は、指定されたキャラクターを使用したアプリ作品のコンテストです。

マスコットアプリ文化祭

応募規定の詳細はこちらをご覧ください。

応募規定・応募方法 | マスコットアプリ文化祭2016

プロ生ちゃん以外にもたくさんのキャラクターが用意されています。過去にはこんな参加賞が貰えてますよ、ほれほれ。

マスコットアプリ 参加賞 - Google 検索

 

使うマスコットキャラクターは?

もちろん我らがプロ生ちゃんです。こちらに素材が用意されています。プロ生ちゃんの紹介部分にある「ダウンロード」からクリエイター向け素材のダウンロードページに移動できます。他のキャラクターの素材や賞品も魅力的なので目移りしてしまいますが...イカンイカン

mascot-apps-contest.azurewebsites.net

今回は以下の「dot_illust.zip」に入っている画像を使いますので、ダウンロードして展開をしておいてください。

  f:id:Hiesuke:20161207133003p:plain

 

JDKの準備

Java言語での開発をするために JDKJava SE Development Kit)をインストールしましょう。JavaFXのアプリを開発するので Java 8を選んでください。同じ Java 8でも古いバージョンだとJavaFXの最新機能が使えないので、最新版に上げておきましょう。

Java SE - Downloads | Oracle Technology Network | Oracle

現在の最新バージョンは以下の通りです。

Java SE Development Kit 8u112

 

開発環境の準備

統合開発環境である IntelliJ IDEAのオープンソース版、IntelliJ IDEA Community Editionを使います。自分は、IntelliJ IDEAを元に作られた Android Studioという開発環境にほんの少しだけ慣れているのでここは一択です。

www.jetbrains.com

現在の最新のバージョンは以下の通りです。

IntelliJ IDEA 2016.3
Build #IC-163.7743.44, built on November 18, 2016
JRE: 1.8.0_112-release-408-b2 x86_64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o

 

JavaFXアプリ作成開始

それでは作成開始です。

(1) IntelliJ IDEA を起動し、「Create New Project」を選ぶ。

  f:id:Hiesuke:20161207151907p:plain

 (2) 左の領域にある「Java FX」を選んで「Next」ボタンを押す。

  f:id:Hiesuke:20161207152103p:plain

(3) Project name 欄に「ProNamaWalk」と入力して「Finish」ボタンを押す。

  f:id:Hiesuke:20161207155833p:plain

※これで、ProNamaWalkというサンプルプロジェクト(雛形となるファイル群)が作成されました。

 

サンプルプロジェクトの構成を確認する

どのようなファイルが用意されたかを確認しましょう。

(1) 左の領域にある三角形を順次クリックして開く(内容表示をする)。

  f:id:Hiesuke:20161207160452p:plain

    ↓

  f:id:Hiesuke:20161207160626p:plain

(2) 「Controller」「Main」「sample.fxml」をそれぞれダブルクリックして開く(右側の領域に表示させる)。

 それぞれの役割は以下の通りです。

  ・Controller 処理を記述する。Javaプログラムファイル。

  ・Main アプリケーション本体。Javaプログラムファイル。

  ・sample.fxml 画面レイアウトを記述する。XMLファイル。

 sample.fxml中に「Controllerに処理が書かれています」と記載されています。 

 Mainの中に「sample.fxmlのレイアウトを使います」と記載されています。

 どの行にどのように記載されているか、確認してみてください。

 

サンプルの動作を確認する

(1) 「Run」メニューから「Run 'Main'」を選ぶか、以下のボタンをクリックする。

  f:id:Hiesuke:20161207165409p:plain

 ※アプリが実行されて、次のようなウインドウが表示されます。

  f:id:Hiesuke:20161207165756p:plain

タイトル表示を変えてみる

(1) ウインドウのタイトルを変更する。

 Main中の「primaryStrage.setTitle("Hello World")」を以下のように変更。

f:id:Hiesuke:20161207170159p:plain

 

プロ生ちゃんを表示させてみる

(1) 先ほど展開したプロ生ちゃん素材の中から「02.png」ファイルを、IntelliJ IDEAの画面のProNamaWalkという部分にコピー&ペースト(またはドラッグ&ドロップ)する。

  f:id:Hiesuke:20161208102506p:plain

  以下のようになればOK!

  f:id:Hiesuke:20161208102755p:plain

 

(2) sample.fxmlに以下の2行を追加する。追加する場所は画像の通り。

<?import javafx.scene.canvas.Canvas?>
<Canvas fx:id="canvas" width="300" height="275" onKeyPressed="#keyPressed" focusTraversable="true"/> 

f:id:Hiesuke:20161208100632p:plain

  ※(参考)追加した行は以下のような意味です。

Canvasという部品を使用しますので準備してください」

「画面にCanvasを表示します。幅は300ドット。高さは275ドット。キーが押されたらkeyPressedという命令を実行します。キー入力を受け付けます」

 JavaFXでグラフィックを描画するときに使うパネルのような部品が Canvas です。現実世界で絵を描くときに使うキャンバスと同じですね。

 

(3) Controllerを以下のように変更する。

package sample;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.image.Image;
import javafx.scene.input.KeyEvent;

import java.net.URL;
import java.nio.file.Paths;
import java.util.ResourceBundle;

public class Controller implements Initializable {
@FXML
Canvas canvas;
GraphicsContext gc;
Image image;

@Override
public void initialize(URL location, ResourceBundle resources) {
gc = canvas.getGraphicsContext2D();
image = new Image(Paths.get("02.png").toUri().toString());
gc.drawImage(image, 200, 100);
}

@FXML
void keyPressed(KeyEvent event) {

}
}

  簡単に解説します。

  • 直前に @FXML を付けるとsample.fxmlから参照できるようになる
    canvasという部品と、keyPressedという命令が参照可能になっています)
  • グラフィック表示の要となるのがGraphicsContext。略してGC。例えばキャンバスのGCを取得してそのGCを使うことで、キャンバスへの線や画像の描画、色の変更などができる。
  • Imageが画像を使うための部品。Imageに画像ファイルからイメージを読み込んでおくことで、後からキャンバスなどに描画ができる。

 ちなみに、キーを押されたときに行わせたい処理(keyPressed) の中身はまだ空っぽですのでどのキーを押しても何も変化は起こりません。

 

  ※ここまでの変更でプロ生ちゃんが表示されます。確認してみてください。

  f:id:Hiesuke:20161208111519p:plain

プロ生ちゃんを歩かせてみる

(1) 歩かせるために必要なものを用意する。

  画像

  f:id:Hiesuke:20161208133815p:plain 01-1.png  f:id:Hiesuke:20161208133834p:plain 01-4.png

 

 歩いている姿をアニメーションっぽく表示するために2枚の画像を使います。

 02.png の時と同様にプロジェクトに追加をしてください。

 以下のようになればOKです。

  f:id:Hiesuke:20161209111606p:plain

 

(2) Controllerを修正する

 以下の通り修正をしてください。

package sample;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.image.Image;
import javafx.scene.input.KeyEvent;
import javafx.scene.paint.Color;

import java.net.URL;
import java.nio.file.Paths;
import java.util.ResourceBundle;
import java.util.Timer;
import java.util.TimerTask;

public class Controller implements Initializable {
@FXML
Canvas canvas;
GraphicsContext gc;
Image image;
int x, y;
Image[] imageWalk;
Timer timer;
int timerCounter;


@Override
public void initialize(URL location, ResourceBundle resources) {
gc = canvas.getGraphicsContext2D();
image = new Image(Paths.get("02.png").toUri().toString());
gc.drawImage(image, 200, 100);
x = 200;
y = 100;
imageWalk = new Image[2];
imageWalk[0] = new Image(Paths.get("01-1.png").toUri().toString());
imageWalk[1] = new Image(Paths.get("01-4.png").toUri().toString());
}

@FXML
void keyPressed(KeyEvent event) {
System.out.println("keyPressed.");
if (timer == null) {
timer = new Timer();
timer.schedule(
new TimerTask() {
@Override
public void run() {
if (timerCounter < 10) {
gc.setFill(Color.WHITE);
gc.fillRect(x, y, 32, 64);
x -= 4;
gc.drawImage(imageWalk[timerCounter % 2], x, y);
timerCounter += 1;
} else {
gc.setFill(Color.WHITE);
gc.fillRect(x, y, 32, 64);
gc.drawImage(image, x, y);
timerCounter = 0;
timer.cancel();
timer = null;
cancel();
}
}
},
0, 100);
}

}
}

  簡単に解説します。

  • キャラクタの表示位置を示す値を保持するために、 x と y というものを用意している。
  •  imageWalk[0] というもの 02-1.png の画像を、imageWalk[1]というものに 02-4.png の画像を持たせている。
  • 1秒間だけ歩くようにタイマー(Timer)を使う。
  • 1秒間を数えるために timerCount というものに値を保持させている。(0.1秒ごとに 0, 1, 2, 3, ... , 9 と数えさせています)
  • キーが押された場合、タイマーの予定(スケジュール)として歩く処理を作業(TimerTask)として割り当てる。
  • 歩いている間は 0.1秒ごとに横方向(x方向)の描画位置を4ずつ減らす。これにより左方向に移動して見える。
  • 1秒間(timerCountが 0,1,2,3,...,9 の間)は、プロ生ちゃんが歩いている2つの画像(01-1.pngと01-4.pmg)を交互に描画する。これによりアニメーションしているっぽく見える。
  • 1秒間経ったら、立ち絵の画像(02.png)を描画とタイマーの消去をして、歩く作業自体も終了させる。

   ※動作確認してください。

  何かのキーを押すたびに1秒間だけプロ生ちゃんが左に歩きます。

 

終わりに

 説明を端折り過ぎていてチュートリアルにさえなってない気もしますがご容赦ください。

一応、ソースをこちらに置いておきます。もちろん好きにお使いください。

github.com

 

まだ間に合いますので、みなさんも「マスコットアプリ文化祭」に応募しましょう。

昨年は下記のような歩くだけの作品でも参加賞をいただけましたので、優しい運営の方々はきっと上記のプログラムを元にちょっと改良したものでも、きっと、多分、きっと...

mascot-apps-contest.azurewebsites.net

 

 

それではみなさん、 Happy Programming!

おしまい