chromeapps @ ウィキ
http://w.atwiki.jp/chromeapps/
chromeapps @ ウィキ
ja
2012-04-29T18:18:14+09:00
1335691094
-
タイマーアプリ ver1.2
https://w.atwiki.jp/chromeapps/pages/43.html
2012-04-29T18:18:14+09:00
1335691094
-
作ったもののソース公開
https://w.atwiki.jp/chromeapps/pages/22.html
2012-04-29T18:03:29+09:00
1335690209
-
jQuery mobile プラグインの紹介その2
https://w.atwiki.jp/chromeapps/pages/42.html
2012-04-28T00:27:25+09:00
1335540445
-
How to be heard ver1.0
https://w.atwiki.jp/chromeapps/pages/41.html
スペースお借りいたします.
今回, 作ってみたのは英語の発音練習アプリです.
一応, Chrome Extension です.
ここの Wiki に掲載されている, Extension の作り方と, style については, 随分と参考にさせていただきました.
使い方
注意) マイクを接続しないとうまく動きません.
1) ユーザーは, 左上の入力フォームへ単語(文でも良い)を入力する.
2) speak ボタンをクリックし, 1) で入力した単語を話す.
3) 音声認識に成功すれば, speak ボタンの下に, 認識された音声がテキストで表示される.
発音が正しいかどうかの結果について
1) で入力した単語と, 2) でユーザーが話した単語との近さによって, 以下のようにアラームが表示されます.
ユーザーの話した単語とフォームへ入力した単語が, ほぼ同じだった場合, Great!
ユーザーの話した単語とフォームへ入力した単語が, 近いけど少し違う場合, Good!
そうでなければ, Bad!
使用している技術
chrome.experimental.* APIs の chrome.experimental.speechInput
【コメント】
Chrome Extension の音声認識モジュール（？）である, speechinput を利用しています.
しかしながら, 2012/4/26 現在, speechinput は, まだ試験的な Chrome API (experimental.* API と呼ばれるもの? )であるそうです.
なので, speechinput を利用するためには, manifest.json の記述と, Chrome の設定を少し変更する必要があるみたいです.
私の場合, 以下のように変更を加えたらうまくいきました.
1) manifest.json に, 次を加える.
"permissions" : "experimental"
2) Chrome のアドレスバーに, chrome://flags/ と入力し Enter を押す. すると, 試験運用機能の設定画面のようなものが表示される. 表示された項目のうち, "試験運用版の拡張機能 API" というものがあるので, これを有効にする.
詳細に関しては, chrome.experimental.* APIs のリファレンスの参照をお願いいたします.
多分ですが, Chrome のバージョンは最新のものにしたほうが良いです.
Android で動くかどうかは未確認です.
あと, "speechinput により音声認識がされる=正しい発音"ではないだろう！というツッコミはなしでお願いします(笑
【バグ】
-英語以外の音声認識ができない. 日本語とかもサポートされているみたいですが, 上手く動きませんでした.
-icon_128.png
128x128 ピクセルの, "icon_128.png"という名前のファイルを, html, json ファイルがあるフォルダと同じフォルダへ配置してください.
-manifest.json
{
"name": "Speech Example",
"description": "Testing",
"version": "1.0",
"app" : {
"launch": {
"local_path": "speech.html"
}
},
"icons": {
"128": "icon_128.png"
},
"permissions": [
"notifications",
"experimental"
]
}
-speech.html
<!DOCTYPE html>
<html lang = "ja" >
<head>
<meta charset = "utf-8" >
<title> How to be heard</title>
<style>
#userText
{
width : 500px
}
#userInputButton
{
width : 100px
}
#log
{
width : 500px
}
</style>
<script>
function checkStart()
{
if( chrome.extension.lastError )
{
alert( "Could not start speech input: "
+ chrome.extension.lastError.message );
}
else
{
var log = document.getElementById( "log" );
log.innerHTML = "Hearing ...........";
}
}
// ---------------
// ---- Event ----
// ---------------
function failRecognition( _err )
{
alert( "Speech input failed: " + _err.code );
if( _err.code == "noSpeechHeard" )
{ alert( "noSpeechHeard" ); }
else if( _err.code == "noResults" )
{ alert( "noResults" ); }
else if( _err.code == "captureError" )
{ alert( "captureError" ); }
else if( _err.code == "networkError" )
{ alert( "networkError" ); }
else
{ alert( "??" ); }
}
var resultString = "";
function succeedRecognition( _result )
{
resultString = "";
for( i = 0; i < _result.hypotheses.length; i++ )
{
//resultString += _result.hypotheses[i].confidence;
//resultString += " : ";
resultString += _result.hypotheses[i].utterance;
resultString += "</br>";
}
// display result
var log = document.getElementById( "log" );
log.innerHTML = resultString;
// checking
var userText = document.getElementById( "userText" );
userInputString = userText.value;
for( i = 0; i < _result.hypotheses.length; i++ )
{
if( userInputString == _result.hypotheses[i].utterance )
{
switch( i )
{
case 0:
alert( "Great!" );
break;
case 1:
alert( "Good!" );
break;
default:
alert( "Bad!" );
break;
}
}
}
}
function endSound()
{
var log = document.getElementById( "log" );
log.innerHTML = "You speak ...";
}
chrome.experimental.speechInput.onError.addListener( failRecognition );
chrome.experimental.speechInput.onResult.addListener( succeedRecognition );
chrome.experimental.speechInput.onSoundEnd.addListener( endSound );
function init()
{
chrome.experimental.speechInput.start( {"language" : "en" }, checkStart );
}
</script>
</head>
<body>
</br>
<form>
<input type = "text" id = "userText" placeholder = "Please input a word" >
</form>
<form>
<input type = "checkbox" value = "English" >English</input></br>
<input type = "checkbox" value = "Japanese" >Japanese</input></br>
<input type = "checkbox" value = "Chinese" >Chinese</input></br>
</form>
<button type = button id = "userInputButton" onclick = init() >speak</button>
<div>Your words is heard as follows...</div>
<div id = "log" >...</div>
</body>
</html>
#comment()
2012-04-27T00:09:05+09:00
1335452945
-
ボールを転がすアプリ
https://w.atwiki.jp/chromeapps/pages/35.html
HTML5 の canvas を練習するために作りました。
マウスでキャンバス上のボールを転がすアプリです。
使い方
キャンバス上を適当にクリックすると、赤いボールがクリックされた方向へ転がります。
ボールは徐々に減速し、最後には止まります。
使用している技術
html5 の canvas
javascript
【バグ】
-たまに、ボールが壁をすり抜けてしまう。
以下、ソースを掲載します。
-bound.html
<!DOCTYPE html>
<html lang = "ja" >
<head>
<meta charset = "UTF-8">
<title> アニメーションサンプル </title>
<style type = "text/css">
<!-- キャンバスの定義 -->
#id_canvas
{
position : absolute;
top : 0px;
left : 0px;
z-index : 1;
}
</style>
<script src = "./utility.js" ></script>
<script type = "text/javascript" >
// --------------------------
// ---- コールバック関数 ----
// --------------------------
// マウスクリック時に呼ばれる関数
mouseClkEv = function mouseClickEvent( e_ )
{
var rect = e_.target.getBoundingClientRect();
var mouseClickX = e_.clientX - rect.left;
var mouseClickY = e_.clientY - rect.top;
ball.dirTo( mouseClickX, mouseClickY );
ball.addVelocity( 10 );
}
// マウスが動いた時に呼ばれる関数
mouseMoveEv = function mouseMoveEvent( e_ )
{
canvas = document.getElementById("id_canvas");
context = canvas.getContext("2d");
var rect = e_.target.getBoundingClientRect();
var mouseMoveX = e_.clientX - rect.left ;
var mouseMoveY = e_.clientY - rect.top ;
textArea = document.getElementById("coodination");
textArea.innerHTML = "("
+ mouseMoveX
+ ", "
+ mouseMoveY
+ ")";
}
// キャンバスを再描画する関数
function redrawAll( _obstacles, _ball )
{
canvas = document.getElementById("id_canvas");
context = canvas.getContext("2d");
context.clearRect( 0, 0, width + 10, height + 10 );
drawAll( _obstacles, _ball );
}
function drawAll( _obstacles, _ball )
{
drawObstacles( _obstacles );
drawBall( _ball );
}
function drawWalls( _walls )
{
canvas = document.getElementById("id_canvas");
context = canvas.getContext("2d");
context.beginPath();
context.strokeStyle = "rgba(0, 0, 0, 0.5)";
for( i = 0; i < _walls.length; i++ )
{
context.moveTo(
_walls[i].tailX_, _walls[i].tailY_
);
context.lineTo(
_walls[i].headX_, _walls[i].headY_
);
}
context.stroke();
}
function drawObstacles( _obstacles )
{
for( j = 0; j < _obstacles.length; j++ )
{ drawWalls( _obstacles[j] ); }
}
function drawBall( ball_ )
{
canvas = document.getElementById("id_canvas");
context = canvas.getContext("2d");
context.beginPath();
context.strokeStyle = "rgba(255, 0, 0, 0.5)";
context.arc(
ball_.curX_,
ball_.curY_,
5,
0,
360
);
context.stroke();
}
// ----------------------------
// ---- アニメーション関連 ----
// ----------------------------
// 0.1 秒毎に呼び出される関数
// 0.1 秒毎に ball 動かし, 衝突判定と再描画をします.
// ball は 0.1 秒毎に少しずつ減速します.
var delta = 0.1;
function action()
{
ball.gensoku( delta ); // 減速
ball.moveTo( delta ); // 動かす
collision( obstacles, ball, delta ); // 衝突判定
redrawAll( obstacles, ball ); // 再描画
}
onload = function init()
{
drawAll( obstacles, ball );
// キャンバスへのマウスイベントの登録
canvas = document.getElementById("id_canvas");
context = canvas.getContext();
canvas.addEventListener( "click", mouseClkEv, false );
canvas.addEventListener( "mousemove", mouseMoveEv, false );
// 100 ミリ秒毎に, action() 関数が呼ばれるに, 関数を登録.
setInterval( "action()", 1000 * delta );
}
// インスタンスの定義
// 障害物の生成
var obstacles = new Array(0);
// 外壁の生成
var width = 500;
var height = 500;
var field = new Array(4);
field[0] = new Wall( 0, 0, 0, height );
field[1] = new Wall( 0, height, width, height );
field[2] = new Wall( width, height, width, 0 );
field[3] = new Wall( width, 0, 0, 0 );
obstacles.push( field );
// ボールの生成
// 初期位置は 250, 250
var ball = new Ball( 250, 250 );
</script>
</head>
<body>
キャンバス↓
<div id = "coodination" ></div>
<canvas id = "id_canvas" width = 1200 height = 1200 ></canvas>
<menu type = "toolbar">
</body>
</html>
-utility.js
// 壁にボールが当たって跳ね返る処理を記述したコードです。
// HTML5 の機能とは関係ないのですが, 掲載いたします。
// ----------------------
// ---- 数学いろいろ ----
// ----------------------
function normalize( _x, _y )
{
d = Math.sqrt( innerProduct( _x, _y, _x, _y ) );
var ret = new Array(2);
ret[0] = _x / d;
ret[1] = _y / d;
return ret;
}
function computeNormalVector( _x, _y, _theta )
{
var ret = new Array(2);
ret[0] = Math.cos( _theta ) * _x + Math.sin( _theta ) * _y;
ret[1] = - Math.sin( _theta ) * _x + Math.cos( _theta ) * _y;
return normalize( ret[0], ret[1] );
}
function innerProduct( _ux, _uy, _vx, _vy )
{ return ( _ux * _vx ) + ( _uy * _vy ); }
function computeRadian( _t ) { return _t * Math.PI / 180.0; }
// ABC が左回りならば, 正となる符号付き面積.
function signedArea(
_ax, _ay,
_bx, _by,
_cx, _cy
)
{
temp1 = ( _bx - _ax ) * ( _cy - _ay );
temp2 = ( _cx - _ax ) * ( _by - _ay );
return temp1 - temp2;
}
function isIntersected(
_ax, _ay,
_bx, _by,
_cx, _cy,
_dx, _dy
)
{
abc = signedArea( _ax, _ay, _bx, _by, _cx, _cy );
abd = signedArea( _ax, _ay, _bx, _by, _dx, _dy );
cda = signedArea( _cx, _cy, _dx, _dy, _ax, _ay );
cdb = signedArea( _cx, _cy, _dx, _dy, _bx, _by );
temp1 = abc * abd;
temp2 = cda * cdb;
if( ( temp1 < 0.0 ) && ( temp2 < 0.0 ) )
{ return true; }
else
{ return false; }
}
function intersection(
_ax, _ay,
_bx, _by,
_cx, _cy,
_dx, _dy
)
{
var n = new Array(2);
var m = new Array(2);
var a = new Array(2);
var b = new Array(2);
n = normalize( _ax - _bx, _ay - _by );
a[0] = _ax; a[1] = _ay;
m = normalize( _cx - _dx, _cy - _dy );
b[0] = _cx; b[1] = _cy;
beta = ( ( n[1] * ( a[0] - b[0] ) ) - ( n[0] * ( a[1] - b[1] ) ) )
/ ( ( n[1] * m[0] ) - ( n[0] * m[1] ) );
var ret = new Array(2);
ret[0] = ( m[0] * beta ) + b[0];
ret[1] = ( m[1] * beta ) + b[1];
return ret;
}
// ----------------
// ---- ボール ----
// ----------------
function Ball( _startX, _startY )
{
this.curX_ = _startX;
this.curY_ = _startY;
this.preX_ = _startX;
this.preY_ = _startY;
this.dirX_ = 1;
this.dirY_ = 0;
this.velocity_ = 0.0; // 速度( pix/sec )
this.acceleration_ = -4; // 加速度( pix/sec^2 )
this.dirTo = function( _x, _y )
{
var temp = new Array(2);
temp = normalize( _x - this.curX_, _y - this.curY_ );
this.dirX_ = temp[0];
this.dirY_ = temp[1];
}
this.moveTo = function( sec_ )
{
this.preX_ = this.curX_;
this.preY_ = this.curY_;
this.curX_ += this.dirX_ * sec_ * this.velocity_;
this.curY_ += this.dirY_ * sec_ * this.velocity_;
}
this.gensoku = function( sec_ )
{
if( this.velocity_ > 0 )
{ this.velocity_ += sec_ * this.acceleration_; }
}
this.addVelocity = function( iV_ )
{
this.velocity_ += iV_;
}
}
// ------------
// ---- 壁 ----
// ------------
function Wall( _tailX, _tailY, _headX, _headY )
{
this.tailX_ = _tailX;
this.tailY_ = _tailY;
this.headX_ = _headX;
this.headY_ = _headY;
this.collision = function( _ball )
{
var normalVector = new computeNormalVector(
this.headX_ - this.tailX_,
this.headY_ - this.tailY_,
computeRadian( 90.0 ) );
var tempVector = new Array(2);
tempVector[0] = -_ball.dirX_;
tempVector[1] = -_ball.dirY_;
var a = innerProduct(
normalVector[0],
normalVector[1],
tempVector[0],
tempVector[1] );
_ball.dirX_ = ( 2.0 * a * normalVector[0] ) - tempVector[0];
_ball.dirY_ = ( 2.0 * a * normalVector[1] ) - tempVector[1];
}
}
function collision( _obstacles, _ball, _sec )
{
for( j = 0; j < _obstacles.length; j++ )
{
for( i = 0; i < _obstacles[j].length; i++ )
{
temp = isIntersected(
_ball.preX_, _ball.preY_,
_ball.curX_, _ball.curY_,
_obstacles[j][i].tailX_, _obstacles[j][i].tailY_,
_obstacles[j][i].headX_, _obstacles[j][i].headY_
);
if( temp == true )
{
_obstacles[j][i].collision( _ball );
var intCoord = new Array(2);
intCoord = intersection(
_ball.preX_,_ball.preY_,
_ball.curX_,_ball.curY_,
_obstacles[j][i].tailX_, _obstacles[j][i].tailY_,
_obstacles[j][i].headX_, _obstacles[j][i].headY_
);
_ball.curX_ = intCoord[0];
_ball.curY_ = intCoord[1];
_ball.preX_ = intCoord[0];
_ball.preY_ = intCoord[1];
}
}
}
}
- jsでオブジェクトとか初めて見たから新鮮… オブジェクト内のメソッドってこんな風に書くのか！ -- たかぎ (2012-04-23 22:55:50)
- ありがとうございます！実は、僕も初めてオブジェクト使って書いてみました^^ -- 鈴木泰斗 (2012-04-26 22:41:04)
#comment
2012-04-26T22:41:04+09:00
1335447664
-
jQuery mobile プラグインの紹介その１
https://w.atwiki.jp/chromeapps/pages/40.html
jQuery mobileのプラグインを紹介します。
機能
タッチパネルで操作する場合、スワイプしてページを移ることができます。
普通のＰＣで開くと左と右に矢印が出るのでそれをクリックすることでページを移ることができます。
導入方法
以下のＵＲＬからjsとcssファイルをダウンロードして使ってください。
https://github.com/filamentgroup/jqm-pagination
#comment()
jQuery mobile1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>sample1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<!-- jquerymobileのcssの後に追記 -->
<link rel="stylesheet" type="text/css" href="./jquery.mobile.pagination.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<!-- jquerymobileのjsの後に記述 -->
<script type="text/javascript" src="./jquery.mobile.pagination.js"></script>
</head>
<body>
<section data-role="page" id="page01">
<header data-role="header">
<h1> header1 </h1>
</header><!-- /header -->
<ul data-role="pagination">
<li class="ui-pagination-prev"><a href="#page02">1</a></li>
<li class="ui-pagination-next"><a href="#page03">2</a></li>
</ul>
</section>
<section data-role="page" id="page02">
<header data-role="header" data-theme="b">
<h1> header2 </h1>
</header><!-- /header -->
<ul data-role="pagination">
<li class="ui-pagination-prev"><a href="#page03">1</a></li>
<li class="ui-pagination-next"><a href="#page01">2</a></li>
</ul>
</section>
<section data-role="page" id="page03">
<header data-role="header" data-theme="c" data-position="fixed">
<h1> header3 </h1>
</header><!-- /header -->
<ul data-role="pagination">
<li class="ui-pagination-prev"><a href="#page01">1</a></li>
<li class="ui-pagination-next"><a href="#page02">2</a></li>
</ul>
</body>
</html>
2012-04-26T21:41:49+09:00
1335444109
-
参考サイト
https://w.atwiki.jp/chromeapps/pages/17.html
2012-04-24T22:59:59+09:00
1335275999
-
でんた君
https://w.atwiki.jp/chromeapps/pages/39.html
[[電卓アプリ]]のＵＩを少しまともにして、機能不足を少し解消しました。
変更点
小数点の計算も可能になりました。
jQueryでUIをまともにしました。
-cal.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>でんた君</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script language="JavaScript"><!--
total = 0;
input = "";
cal = 0;
work= new Array("","+","-","*","/")
f = 1;
function Value(Data){
f=0;
input += Data;
document.myForm.myLine.value = input;
}
function C(){
input="";
total=0;
document.myForm.myLine.value = input;
}
function Calc(Data){
if(f == 0){
f = 1;
total = total + work[cal] + input;
total = eval(total);
input = "";
document.myForm.myLine.value = total;
}
if(Data == 5){
total=0;
cal = 0;
}else{
cal = Data;
}
}
//-->
</script>
</head>
<body>
<section data-role="page" id="page01">
<header data-role="header" data-position="fixed" data-theme="b">
<h1> でんた君 </h1>
</header><!-- /header -->
<div data-role="content">
<form name="myForm">
<table>
<tr>
<th><input type="text" data-inline="true" name="myLine" value="計算結果"></th>
<td><input type="button" value="C" data-inline="true" onclick="C()"></td>
<td></td>
</tr>
</table>
<input type="button" value="1" data-inline="true" onclick="Value(1)">
<input type="button" value="2" data-inline="true" onclick="Value(2)">
<input type="button" value="3" data-inline="true" onclick="Value(3)">
<input type="button" value="/" data-inline="true" onclick="Calc(4)">
<br/>
<input type="button" value="4" data-inline="true" onclick="Value(4)">
<input type="button" value="5" data-inline="true" onclick="Value(5)">
<input type="button" value="6" data-inline="true" onclick="Value(6)">
<input type="button" value="*" data-inline="true" onclick="Calc(3)">
<br/>
<input type="button" value="7" data-inline="true" onclick="Value(7)">
<input type="button" value="8" data-inline="true" onclick="Value(8)">
<input type="button" value="9" data-inline="true" onclick="Value(9)">
<input type="button" value="-" data-inline="true" onclick="Calc(2)">
<br/>
<input type="button" value="0" data-inline="true" onclick="Value(0)">
<input type="button" value="." data-inline="true" onclick="Value('.')">
<input type="button" value="=" data-inline="true" onclick="Calc(5)">
<input type="button" value="+" data-inline="true" onclick="Calc(1)">
</form>
</div>
</section>
</body>
</html>
2012-04-24T20:18:20+09:00
1335266300
-
割り勘君（仮）
https://w.atwiki.jp/chromeapps/pages/38.html
2012-04-23T23:06:04+09:00
1335189964
-
タイマーアプリ ver1.1
https://w.atwiki.jp/chromeapps/pages/37.html
2012-04-22T23:30:16+09:00
1335105016