ブログ – Reharmonize

Reactのチュートリアルを拡張しました

2019年7月15日2019年7月15日 lion コメントをする

こんにちは。
長いこと更新をあけてしまいました。

仕事の関係でVue.jsをよく触るんですが、最近Reactにも興味が出てきまして・・・。

チュートリアルの三目並べ（https://ja.reactjs.org/tutorial/tutorial.html）を一通り実装し、課題部分も実装しました。さらに、独自にリファクタと機能追加を行いました。

また、AWSのS3、CloudFront、Route 53、ACMを使ってホスティングまで行いました。実際のページはこちら。
https://aflat.reharmonize.art/tic-tac-toe/index.html

リファクタしたのはハードコーディングになっていた勝利判定のところとボードの大きさ、プレイヤー名の取得です。

勝利判定の部分ですが、判定するラインはそれぞれボードの大きさから数学的に
・水平方向のライン
・垂直方向のライン
・斜め方向のライン
を計算することができます。

また、自分のプレイから1秒後に自動プレイするコンピューターを実装しました。
ランダムに打ちつつ、ピンチは防ぐようになっています。

実際のコードはgithubに上げています。
https://github.com/lionel36/tic-tac-toe

React、結構楽しい。

音声認識

2018年12月12日2018年12月12日 lion コメントをする

こちらの記事を読みました。

JavaScriptで音声認識のコードが書けるんですね。
色々と使えそうだったので、試しに自分で書きつつ、少しアレンジしてみました。

https://reharmonize.art/myApplications/jsStudy/study1/index.html

ほとんど丸パクリ&CSSライブラリのbulmaで装飾と、”ありもの”ですが・・・。笑

※Google Chrome最新版のみ動作確認。
※コードはコンソールから見てください。

精度はそこそこですね。ニュースを朗読してみたら、9割くらいは起こせてました。

音量のスレッショルドもあるのか、後ろで流してる動画の音は拾わなかったです。

拾った言葉をp5.jsでグラフィック化するとか、kintoneに入れてメモアプリにするとか・・・。上手く使えばおもしろくなりそう？

p5.js

2018年12月9日2018年12月9日 lion コメントをする

お久しぶりです。

前回から記事の投稿が空いていますが、その間、Python〜Djangoを触ったり、scalaやProcessingなどJava系の言語を触っていました。

今、仕事ではkintoneをベースにJavaScriptやHTML、CSSを触っているのですが、やはりJavaScriptの勉強を進めることが大事だなと思い、散々他の言語に浮気した後、なんやかんやとJavaScriptに帰ってきました。

今はグラフィックデザインに興味を持ち、タイトルにもある「p5.js」を触ってみています。（詳細説明は諸先輩方のエントリーに任せます。）

特に「The Nature of Code」というサイト（https://natureofcode.com/）を参考にして、自然現象をJavaScriptで記述することにハマっています。

頑張ると、某映画のランタンを空に飛ばすシーンなんかも作れるみたいですね。

とりあえず惑星の動きまで進めてみました。
（https://reharmonize.art/myApplications/p5Study/study1/index.html）

もう少し頑張ってみようと思います。

では。

SQLへの画像のアップロードでつまずく

2018年3月4日2018年3月4日 lion コメントをする

かなりつまずいています。

<html>
<head>
<meta charset="utf-8" />
<title>入力フォーム</title>
</head>
<body>
<div>
<form action="add.php" method="POST" accept-charset="utf-8">
<p><input type="hidden" name="MAX_FILE_SIZE" value="30000" />
<p>写真: <input type="file" name="file" />
<p>タイトル: <input type="text" name="title" />
<p>説明: <input type="text" name="description" />
<p><input type="submit" value="送信" />
</form>
</div>
</body>
</html>

のフォームに、

<?php
// データーベースへ接続
$db = new mysqli('(url)','(username)', '(password)', '(databasename)');
// SQL文を登録
$state = $db->prepare('INSERT INTO `(tablename)` (`(key1)`,`(key2)`,`(key3)`,`(key4)`) VALUES (?, ?, ?, ?);');

// フォームで設定されたデータを変数に一度保存
$user_key = 1;
$file = $_FILES['file']['tmp_name'];
$photo = file_get_contents ( $file );
$title = $_POST['title'];
$description = $_POST['description'];

// ?の部分を置き換える値を指定する
$state->bind_param('isss', $user_key, $photo, $title, $description);

// SQL文実行
$state->execute();

// データベースとの接続を切断
$state->close();
$db->close();

// index.phpへ遷移
header('Location: index.php');
?>

で扱っているんだけど、画像データがうまく登録されない。

バイナリデータへの変換が間違っているのかな・・・？

もう少し勉強が必要そう。