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
-
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" というもの
2012-04-27T00:09:05+09:00
1335452945
-
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="
2012-04-26T21:41:49+09:00
1335444109
-
でんた君
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 =
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
-
冷蔵庫管理
https://w.atwiki.jp/chromeapps/pages/36.html
2012-04-22T22:56:46+09:00
1335103006
-
ボールを転がすアプリ
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( mouseClick
2012-04-26T22:41:04+09:00
1335447664
-
jQuery Mobileの機能を実験
https://w.atwiki.jp/chromeapps/pages/34.html
2012-04-22T16:30:43+09:00
1335079843