ランキングシステム「みんラン」リリース！
夜な夜なひとりで頑張って作っていたWEBシステム「みんラン」を
本日 リリースしました！
（アイキャッチ画像が表示されない…？）
ランキングを皆様で作成していただき、皆様で投票して行くサイトです。
自由に使ってみてください。
成人向けなどの不適切な内容はご遠慮ください。
見つけた場合は予告なしに削除します。
1本目なのでバグ等あるかもしれませんが、よろしくお願いします。。
何かあれば当ブログの問い合わせフォームか、ツイッターにお願いします。
【Selenium IDE】Webテスト自動化に使えるアドオン（Chrome）
Google ChromeでWebテスト自動化に使える「Selenium IDE」というアドオンを見つけたので紹介します。
↓こちらのページを開きます。
Selenium IDE - Chrome Web Store
（開けない場合はウェブストアSelenium IDEで検索してみてください。）
「Chromeに追加」をクリックします。
「拡張機能を追加」をクリックします。
Seというアイコンが追加されました。
アイコンをクリックするとウインドウが開きます。
「Record a new test in a new project」をクリックで新しいプロジェクトを作成して操作記録を開始します。
適当にプロジェクト名を入力してOKをクリックします。
操作記録を開始するURLを入力します。
レコーディング画面が開くので、
googleから「tkslab.net」を検索してサイトにアクセスする操作を手動で行います。
終わったら停止ボタンをクリックします。
テストケース名を適当に入力してOKをクリックします。
あとはCtrl + Sとかで適宜プロジェクトを保存してください。
あとは再生ボタンを押せば、先ほど手動で記録した操作が自動で実行されます。
こんな感じになります。
①検索でtkslab.netを入力して、検索ボタンをクリック。
②表示されたら、リンクをクリック。
以上です。
【Unity】2Dゲームを作ってみる②（アニメーションのあるプレイヤーオブジェクトの作成）
久しぶりにUnityを触るので色々と忘れています。
まずはプロジェクト名に「Sword」（ソード）を入力、
テンプレートで2Dを選択してプロジェクトを作成します。
※Swordは前回決めたゲームの名前ですｗ
①プレイヤーオブジェクトの作成
アニメーションのあるプレイヤーオブジェクトを作成していきます。
画像はこちらからダウンロードさせていただきました。
プロジェクトにダウンロードした画像を追加したら、複数アニメーションがある画像を選択して、Sprite Modeを「Multiple」にします。
そのあと、「Sprite Editor」をクリックしてエディタを開きます。
Type「Grid By Cell Size」を選択して、今回は「183,123」で分割したいので以下のように入力したら「Slice」をクリックします。
そのあと「Apply」をクリックして完了です。
アニメーションしたい画像を複数選択して、シーンビューにドラッグ&ドロップして、オブジェクトが作成されました。
ヒエラルキーウインドウでリネームして「Player」オブジェクトとしました。
インスペクターウインドウの「Add Component」でプレイヤー用のscriptを作成します。
「PlayerScript」としました。※移動やジャンプ処理などに後で使います。
あと「Add Component」で「Rigidbody2D」を追加しておきます。
※こちらも後で使います。重力をかけたりします。
これで実行すると、キャラが下に落ちていきますね。
地面オブジェクトが必要みたいです。
②地面オブジェクトの作成
ヒエラルキーウインドウから3D ObjectのCubeを作成して、「Ground」にリネームしました。
PlayerとGroundの両方に当たり判定用に「Box Collider 2D」を追加したら実行時に地面に着地するようになりました。
※「Ground」の3D用の「Box Collider」は削除してください。
良い感じ。浮いてるけどｗ
続きは次回にします。
XAMPPのローカル環境にスマホなどからアクセスする方法
ローカル環境でPHPなどの開発をする場合、XAMPPを使ったりしますが、
実は同じWi-Fi上にいれば、そのローカル環境にスマホからアクセスできるんです。
（スマホでローカル環境のWebページを開ける）
まずはコマンドプロンプトを開いて
「ipconfig」コマンドを打ちます。
IPv4 アドレスを確認します。
ローカル環境のWebページに
「localhost/test/」とアクセスしていた場合は
スマホで
「192.168.11.6/test/」とIPアドレスを使ってアクセスするだけです。
開発中のWebページをAndroidやiPhoneなどの実機で確認したい時に便利です。
以上です。
【WebRTC】ビデオチャットを作れるWebRTCを触ってみた②（実装）
今回はSkyWay × WebRTCでビデオチャットを作ってみたいと思います。
まず、ローカル環境で動かしたいので、XAMPPを使います。
XAMPPのインストール手順はこちらから。
XAMPPのhtdocs配下に「demo-rtc」というディレクトリを作成しました。
C:\xampp\htdocs\demo-rtc
これでブラウザ上から「localhost/demo-rtc/」でアクセスできるようになります。
demo-rtcに以下のhtml、jsファイルを置きます。
※style.cssも読み込まないといけないのですが、今回はcssの中身は省略します。
index.html
ビデオを表示する領域などを確保します。
<!DOCTYPE html> <html> <head lang="ja"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>TksLab Video Chat</title> <link rel="stylesheet" href="style.css"> </head> <div class="pure-g"> <!-- Video area --> <div class="pure-u-2-3" id="video-container"> <video id="other-video" autoplay></video> <video id="my-video" muted="true" autoplay></video> </div> <!-- Steps --> <div class="pure-u-1-3"> <h2>TksLab Video Chat</h2> <p>私のID: <span id="my-id">...</span></p> <form id="make-call" class="pure-form"> <input type="text" placeholder="相手のIDを入力してください。" id="callto-id"> <button href="#" class="pure-button pure-button-success" type="submit">通話</button> </form> <form id="end-call" class="pure-form"> <p>相手のID <span id="other-id">...</span></p> <button href="#" class="pure-button pure-button-success" type="submit">通話終了</button </form> </div> </div> <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="https://cdn.webrtc.ecl.ntt.com/skyway-latest.js"></script> <script type="text/javascript" src="script.js"></script> </html>
script.js
javascriptがメインって感じですね。
'use strict';
let localStream = null;
let peer = null;
let existingCall = null;
// getUserMediaでデバイス情報を取得する。
navigator.mediaDevices.getUserMedia({video: true, audio: true})
.then(function (stream) {
// Success
$('#my-video').get(0).srcObject = stream;
localStream = stream;
}).catch(function (error) {
// Error
console.error('mediaDevice.getUserMedia() error:', error);
return;
});
// Peerオブジェクトの作成。APIキーを指定する。
peer = new Peer({
key: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
debug: 3
});
// Peer Openイベント
peer.on('open', function(){
$('#my-id').text(peer.id);
});
// Peer Errorイベント
peer.on('error', function(err){
alert(err.message);
});
// Peer Closeイベント
peer.on('close', function(){
});
// Peer 切断イベント
peer.on('disconnected', function(){
});
// 通話押下
$('#make-call').submit(function(e){
e.preventDefault();
// 相手のIDにローカルストリームを送る
const call = peer.call($('#callto-id').val(), localStream);
setupCallEventHandlers(call);
});
// 通話終了
$('#end-call').click(function(){
existingCall.close();
});
// 着信が来た時の処理
peer.on('call', function(call){
// ローカルストリームを返す
call.answer(localStream);
// 着信元の状態イベントハンドラ
setupCallEventHandlers(call);
});
// 着信元の状態イベントハンドラ
function setupCallEventHandlers(call){
// 着信済みだったらクローズ
if (existingCall) {
existingCall.close();
};
existingCall = call;
// ストリームが来たらビデオ表示
call.on('stream', function(stream){
addVideo(call,stream);
setupEndCallUI();
$('#other-id').text(call.remoteId);
});
// 切れたらビデオ削除
call.on('close', function(){
removeVideo(call.remoteId);
setupMakeCallUI();
});
}
// ビデオ表示
function addVideo(call,stream){
$('#other-video').get(0).srcObject = stream;
}
// ビデオ削除
function removeVideo(peerId){
$('#'+peerId).remove();
}
// 初期UI表示
function setupMakeCallUI(){
$('#make-call').show();
$('#end-call').hide();
}
// 通話中UI表示
function setupEndCallUI() {
$('#make-call').hide();
$('#end-call').show();
}
待機画面
相手のIDを入力して通話をかけます。
通話中画面
相手の映像も表示されるようになりました。
※同じPCで開いた画像になってしまいましたが、別PC同士でも問題ありませんでした。
こんな感じで簡単に実装できました。
何かのシステムに組み込みたいですね。
そのうち考えます。
【お名前.com】独自ドメインを設定したページが表示できなくなる
最近、お名前.comでドメインを取得したのですが、
ドメインを設定していたブログが本日、突然表示できなくなりました。
Wi-Fiでは表示できるのに、iPhoneの4G環境では表示できないという不思議な現象が発生しました。
最初ブログ側に問題があると思って探ったのですが、原因はドメイン側でした。
というより悪いのは自分でした…ｗ
お名前.comでドメインを取得すると以下のようなメールが来るようです。
「【重要】[お名前.com]ドメイン情報認証のお願い」
メール本文内の「期限までに以下URLへアクセスしてください。」と書いてあり、URLにアクセスしないと制限がかかるみたいです。
そしてその期限が今日でした…ｗ
すみません、メール気が付きませんでした。
URLにアクセスしたところ「解除完了」のメールが来て、数分後にページが開けるようになりました。
本当にすみませんでした。
もし同じような現象が発生している方がいたら参考にしてみてください。
