2019-01-30

【WebRTC】ビデオチャットを作れるWebRTCを触ってみた①（SkyWayユーザ登録）

プログラミング WebRTC

今回は、数年前から話題になっているWebRTC（Web Real-Time Communication）を触ってみます。

WebRTCはブラウザのみでビデオチャット、音声チャット、ファイル共有などができるリアルタイムコミュニケーション用のAPIです。

有名どころだとSkypeやChatWorkなどもWebRTCを使っているようです。

自分で一からサーバを構築する場合は、NAT越えに必要なSTUNサーバ／TURNサーバが必要になるとのことです。

※NAT越えとは家のネットワーク機器のIPアドレスと、インターネット通信をするためのIPアドレスを変換する処理のことです。

それはすごく大変そうなので、NTT Communicationsさんが出している「SkyWay」というサービスを使うことにしました。

・WebRTCに必要なサーバを提供してくれます。

・メンテナンスもやってくれるので、こちらは開発に専念できます。

①SkyWayのユーザ登録をする

SkyWayを使用するにはユーザ登録が必要になります。

webrtc.ecl.ntt.com

画面の右上の新規登録から新規登録画面を開きます。

次に、無料で使える「Community Edition」の「無料で新規登録」ボタンをクリックします。

※無料なので制限がありますが、小規模なサービスでしたらこれで十分だと思います。

f:id:tkslab:20190129235657p:plain

開発者登録画面で、お名前、メールアドレス、パスワードを入力して仮登録をします。

仮登録のメールが送られてくるので、メール内に書かれているリンクにアクセスします。

これで登録が完了です。

f:id:tkslab:20190130000850p:plain

②ログイン

画面右上のログインからログインメニュー画面を開きます。

Community Editionの「ダッシュボードにログイン」ボタンをクリックします。

f:id:tkslab:20190130001101p:plain

ログイン画面でメールアドレスと、パスワードを入力してログインします。

③アプリケーション設定

ログインできたら、アプリケーション一覧から「新しくアプリケーションを追加する」をクリックします。

f:id:tkslab:20190130002000p:plain

作成するアプリケーションの説明と、APIを使用するドメインを入力します。

f:id:tkslab:20190130002114p:plain

あとはデフォルトで、「アプリケーションを作成する」をクリックします。

f:id:tkslab:20190130002243p:plain

作成するアプリケーションのAPIキーが表示されました。

これから作成する画面でWebRTCを使うときに必要となるキーです。

f:id:tkslab:20190130002425p:plain

今回はここまでにします。

次回はビデオチャットができるところまで実装して行きたいと思います。

2019-01-27

【Unity】2Dゲームを作ってみる①（仕様決め）

プログラミング Unity

iPhone（iOS）のアプリを作りたいのですが、

Macが無いと作ったアプリを公開できないみたいなので、また別の機会に挑戦します。

（MacBook Proが欲しいですが、高くて買えません…。）

前回は簡単な3Dのゲームを作ってみたので、

今回は2Dのゲームを作ってみたいと思います。

※PCで操作するゲームです。

まずは仕様を決めます。

剣が好きなので、剣で攻撃するカッコいいゲームにしたいですね。

操作

・左右に移動できる。

・ジャンプできる。

・剣で攻撃できる。

その他仕様

・体力は３つ。

・敵にあたると体力が１つ減る。

・体力が３つ無くなるとゲームオーバー。

・穴に落ちるとゲームオーバー。

こんな感じですかね。

タイトルは「Sword」（ソード）にしますｗ

ありきたりですがｗ

では、次回から作成していきます。

2019-01-24

【CakePHP】XserverにCakePHP3.6プロジェクトをアップロードする

PHP その他

ローカル環境（XAMPP）で開発していたプロジェクトが

落ち着いてきたのでいったんサーバにアップしてみることにしました。

以前も使ったことがあったので、Xserver（エックスサーバ）を契約しました。

ということでアップしてみようと思ったのですが、

情報が少なく、はまりました。

以下、メモを残しておきます。

ローカルからリモート環境にファイルをアップできる「WinSCP」を使用したいので、Xserver側でSSH設定が必要です。

※「WinSCP」は別途インストールが必要です。

SSH設定

XserverのサーバパネルからSSH設定を開き、

設定をONにします。

f:id:tkslab:20190124233259p:plain

公開鍵認証用鍵ペアの生成で適当な「パスフレーズ」（パスワード）を入力して、登録を確定します。（右隣の「公開鍵登録・設定」は触らなくて良いです。）

その後、秘密鍵をダウンロードします。

f:id:tkslab:20190124233340p:plain

サーバにファイルアップロード

「WinSCP」でファイルをアップロードします。

以下のように必要な情報を入力します。

ポートは「10022」にする必要があります。

f:id:tkslab:20190124232901p:plain

設定ボタンを押して、SSHの認証で秘密鍵を設定します。

先ほどダウンロードした秘密鍵ファイルを選択します。

f:id:tkslab:20190124233942p:plain

ログインボタンを押してパスワードを聞かれたら、先ほどXserver設定したパスワードを入力します。

アップロードするディレクトリ構成は以下のようになります。

/home/サーバID/独自ドメイン/public_html/ に、CakePHPのwebrootの中身を配置します。

f:id:tkslab:20190124234253p:plain

/home/サーバID/独自ドメイン/cake/ に、CakePHPのwebroot以外を配置します。

※「cake」ディレクトリは自分で作るのですが、名前は何でも良いみたいです。

f:id:tkslab:20190124234651p:plain

/public_html/index.phpを以下のように編集します。

$cakephpRoot = realpath(dirname(__FILE__) . '/../cake');
// Check platform requirements
require $cakephpRoot . '/config/requirements.php';

～

require $cakephpRoot . '/vendor/autoload.php';

～

// Bind your application to the server.
$server = new Server(new Application($cakephpRoot . '/config'));

「'/../cake'」の部分を自分で作成したディレクトリ名にします。

基本的にはこれで動くはずです。

動作確認

実際にブラウザからURLを入力してページを開いてみると、「Asia/Tokyo」のタイムゾーン設定が見つかりません、のようなエラーが出る場合があります。

XserverのMySQLを覗いてみてもmysqlデータベースがなく、sqlファイルをインポートしてタイムゾーンの設定ができないみたいです。

タイムゾーンの設定を見てみると「SYSTEM」という設定になっていました。（JST？）

4時間くらいはまって、仕方ないので、CakePHPの方でapp.phpのdatabaseのタイムゾーンを「SYSTEM」に変えたところ正常に表示することができるようになりました。

色々と問題があるかもしれませんが、まあ表示できたので良しとしましょう。

2019-01-24

【CakePHP】CakePHP3.6の定期バッチ処理をXserverで動かす

PHP その他

ローカルのXAMPP環境でバッチ処理を動かしていた時は以下のように動かしていました。

例：TestShell.phpを動かす場合

C:\xampp\htdocs\project\bin\cake Test

これをXserver（レンタルサーバ）で定期的に動かしたかったので、挑戦してみました。

※XserverにCakePHPプロジェクトをアップする方法はまた別の機会に載せます。

まずはXserverのCron設定を開きます。

f:id:tkslab:20190124010928p:plain

Cron設定からCron設定追加を選択します。

毎時0分と30分に動かしたい場合は以下のように入力します。

「*」は毎回という意味です。

f:id:tkslab:20190124011113p:plain

コマンドは以下のように

「phpの指定　cake.phpの指定　バッチの指定」を設定します。

・phpはXserverに入っているバージョンを調べて設定しました。

・cake.phpのサーバIDと独自ドメイン名は置き換えてください。

・バッチはTestShell.phpのTestの部分を設定すればOKです。

（コマンド部分は全然うまくいかず、かなりはまりました。）

コメントは適当に入力します。

f:id:tkslab:20190124011454p:plain

あとはこのまま追加すれば、定期処理の完成です。

2019-01-18

【PHP】CakePHP3.6のクエリービルダーで２つのテーブルを集計する方法

PHP

やりたかったこと

2つのテーブルを集計する。

・「ATables」テーブルでグループ毎の「key」項目の数を求める。　→　集計結果をnumberとする。

・「ATables」テーブルの集計結果と、「BTables」テーブルの「number」項目の合計を求める

SQL上では実現できていたのですが、CakePHPでどのようにすれば良いのか

調べても見つからず、かなりハマりました。

以下のようにして実現できました。

// モデル読込み
$aTables = TableRegistry::get('ATables');
$bTables = TableRegistry::get('BTables');

// Aテーブルのクエリ作成
$aTablesQuery = $aTables->find();
$aTablesQuery->select(['id', 'key', 'number' => $aTablesQuery->func()->count('key')])->where(['test_flag <=' => '1'])->group(['id', 'key']);

// Bテーブルのクエリ作成
$bTablesQuery = $bTables->find()->select(['id', 'key', 'number']);

// テーブル結合
$unionQuery = $bTablesQuery->unionAll($aTablesQuery);

// 最終クエリ作成
$query = $this
    ->find()
    ->select(['id' => 'BTables__id', 'key' => 'BTables__keyword', 'number' => $this->find()->func()->sum('BTables__number')])
    ->from([$this->alias() => $unionQuery])
    ->group(['id, key']);

// クエリ実行
$query->all();

UNIONした結果は「BTables__id」のようにテーブル名が先頭に付くみたいなので、気を付けないといけません。

「from()」にUNIONしたクエリを渡さないといけません。ここはハマりました。

2019-01-18

【PHP】CakePHP3で一括登録する方法

PHP

CakePHP3で複数データを一括登録したかったので、調べました。

※バージョンはCakePHP3.6でした。

以下のように「values」に繰り返し追加することで実現できました。

// 登録データ作成
$insertDataArray = [];
foreach ($testArray as $data) {
    $insertData = [];
    // 登録値
    $insertData['code'] = $data['code'];
    $insertData['status'] = 1;
    array_push($insertDataArray, $insertData);
}

$query = $this->query();

// カラム設定
$query->insert(['code', 'status']);

// values設定
foreach($insertDataArray as $insertData) {
    $query->values($insertData);
}

// 実行
$query->execute();

以上です。

TksLab

IT系ブログ