Monthly Archives: 7月 2011

You are browsing the site archives by month.

[CSS3]transitionプロパティで簡単なアニメーション

CSS3のtransitionプロパティを使ってアニメーションを作ってみた。
※Chrome,SafariなどのWebkit系でしか動作しないので注意

コードは簡単で以下の3つのプロパティを設定するだけ

・-webkit-transition-property
→transition を適用するプロパティ

・-webkit-transition-duration
→transition の変化をどれくらいで表現するか
 とりあえず、1s(1秒?)で設定

・-webkit-transition-timing-function
→変化の具合を設定。
 いくつか設定できるみたい。
 今回のサンプルは選択できるようにしてみた。

以下、サンプルのCSS

#sample{
    width: 240px;
    height: 120px;
    background-color: #FF33FF;
    -webkit-transition-property: background-color, width, height;  
    -webkit-transition-duration: 1s;  
    -webkit-transition-timing-function: linear;
    
}  
#sample:hover{  
    background-color: #0000FF;
    width: 240px;
    height: 240px;
}

CSS3 transitionを使ってみる – jsdo.it – share JavaScript, HTML5 and CSS

[CSS3]radiusを使ってみた

CSS3をはじめてつかってみた。
とりあえず角丸を使ってみました。
ついでにHTML5のrangeも使ってますが。

CSS3 radiusを使ってみる – jsdo.it – share JavaScript, HTML5 and CSS

[HTML5]アプリケーションキャッシュを使ってオフラインアプリ的なものを作ってみる

HTML5にはアプリケーションキャッシュなるものがあるらしいと。

明示的に特定のファイルをキャッシュさせることができるらしい。

(参考)
【特集】詳解! HTML 5と関連APIの最新動向 – Webアプリ開発編 (2) アプリケーションキャッシュ | エンタープライズ | マイコミジャーナル
WebTecNote – [HTML5] アプリケーションキャッシュの使い方

試しにWebデータベースを使って簡単なものを作ってみた。
まずは、マニフェストファイルを作成。
ここになにをキャッシュさせるか記載する。
こんな感じで。

sample.manifest

CACHE MANIFEST
# version 1.0
sample.htm

そして結構長くなってしまったがオフラインでも、単語を登録できる
アプリをつくってみた。
→サンプル

<!DOCTYPE html> 
<html manifest="sample.manifest">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-script-type" content="text/javascript" />
<title>サンプル</title>
<script>
function init() {
    setInterval(function() {
        applicationCache.update();
    }, 5000);
    applicationCache.addEventListener("updateready", function() {
        if (confirm("アップデートを利用できます。リロードしますか?")) {
            applicationCache.swapCache();
            // リロード
            location.reload();
        }
    }, true);
}

function nav(){
  var nav = (navigator.onLine ? 'オンライン' : 'オフライン');
  document.getElementById("navigator").innerHTML = "接続状態: <b>" + nav + "</b>";
}

function regist(){
  var word = document.getElementById("text").value;
  var db;
  try {
    if (window.openDatabase) {
      db = window.openDatabase("words", "1.0", "Sample Database", "1048576");
      if (!db) {
        alert("データベースストレージが使えません。");
      }
    } else {
       alert("データベースストレージはサポートされていません。");
    }
    db.transaction(
      function(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS words(id INTEGER PRIMARY KEY, word TEXT)');
      }
    );
    db.transaction(
      function(tx) {
        tx.executeSql("INSERT INTO words VALUES (NULL, ?)", [word], 
          function(tx, rs) {alert("Success!"); document.getElementById("text").value = "";select();},
          function(tx, error){alert("insert failed.");}
        );
      }
    );
  } catch (error) {
    alert("ERROR");
  }
}

function select(){
  var db;
  try {
    if (window.openDatabase) {
      db = window.openDatabase("words", "1.0", "Sample Database", "1048576");
      if (!db) {
        alert("データベースストレージが使えません。");
      }
    } else {
       alert("データベースストレージはサポートされていません。");
    }
    db.transaction(
      function(tx) {
        tx.executeSql("SELECT * FROM words;",[],
          function(tx, rs) {
              var content = "<table><tr><th>ID</th><th>WORD</th></tr>";
              for (var i = 0, n = rs.rows.length; i < n; i++) {
                content += "<tr><td>";
                content += rs.rows.item(i)['id'] + "</td><td>" + rs.rows.item(i)['word'] + "</td>";
                content += "</tr>";
              }
              content += "</table>";
              //var content = "ID: " + rs.rows.item(0)['id'] + "<br/>\n";
              //content += "ワード: " + rs.rows.item(0)['word'] + "<br/>\n";
              document.getElementById("content").innerHTML = content;
          },
          function(tx, error){
            alert("Select failed.");
          }
        );
      }
    );
  }catch(e){
    alert("ERROR");
  }
  nav();
}

</script>
</head>

<body onload="init()">
<div id="regist">
入力: <input type="text" id="text">
<button onclick="regist()">登録</button>
</div>
<br /><br />
<p><button onclick="select()">更新</button></p>
<div id="content">
</div>

<br /><br />
<div id="navigator">

</div>

<script>
nav();
</script>
</body>
</html>

[HTML5]Web Workersを使ってみる

Web Workersとは、Webアプリケーションにおいてバックグラウンドでの
処理実行を実現するための技術らしい。

メリットとしては、バックグラウンド実行させることで、おもて側(UI)の応答を
妨げないらしい。

ただ、DOMにアクセスできないらしい。

→サンプル

以下、サンプルコードです。

<script type="text/javascript">
/* 通常の計算用 */
function calculate1() {
  var num = parseInt(document.getElementById("num1").value, 10);
  var result = 0;
  for (var i = 0; i <= num; i++) {
    result += i;
  }
  document.getElementById("ret1").innerHTML = "計算結果: " + result;
}


/* WebWorker用 */

// 計算を行うワーカを生成
var worker = new Worker("worker.js");
// ワーカから結果を受け取る
worker.onmessage = function(event) {
  // dataプロパティにメッセージ本文(任意のJSオブジェクト)が格納されている
  document.getElementById("ret2").innerHTML = "計算結果: " + event.data;
};

function calculate2() {
  var num = parseInt(document.getElementById("num2").value, 10);
  // ワーカに数値を渡す
  worker.postMessage(num);
}
</script>

<p>普通に計算</p>
数値を入力:<input type="text" id="num1">
<button onclick="calculate1()">計算!</button>
<div id="ret1"></div>
<br /><br />
<p>WebWorkerで計算</p>
数値を入力:<input type="text" id="num2">
<button onclick="calculate2()">計算!</button>
<div id="ret2"></div>

そしてworker.jsの中身

// メッセージの受信
onmessage = function(event) {
    var num = event.data;
    var result = 0;
    for (var i = 0; i <= num; i++) {
    result += i;
    }
    // 生成元に結果を返す
    postMessage(result);
}

[MySQL]レプリケーションエラー

MySQLのレプリケーションで謎のエラーが。。。

以下のSQLを実行するも、設定できない・・・

CHANGE MASTER TO 
master_host = 'hoge',
master_user = 'user',
master_password = 'password',
master_log_file = 'XXXXXX',
master_log_pos = XXXXXX;

エラーログに以下のようなメッセージが出力されてます。

[ERROR] Failed to open the relay log './mysql-relay-bin.000001' (relay_log_pos 4)
[ERROR] Could not find target log during relay log initialization

いろいろ調べてみましたが解決方法は至って簡単でした。

reset slave;

これだけ。