中小企業に勤めるITエンジニアの徒然日記

中小企業に勤めるITエンジニア(三十路女子)が日々のよしなしごとや、IT技術についての記事をつらつらと書いていきます。

HTML5

オフラインでいろいろしたい場合、
・Web Storage
・IndexedDB
・Application Cache
など、HTML5にはオフラインでWebアプリケーションを利用するための方法がいくつかあります。

IndexedDBの特徴としては、

・Key-Value型
・javascriptから操作ができる
・オリジン(プロトコル/ドメイン/ポート番号)ごとににデータをもつ
・Cookieのようにサーバに自動的に送られはしない

といったところでしょうか。

私が持っているイメージはCookieを大容量・高機能にした、という感じです。


ただし、IndexedDBはKey-Value型なので、それなりのデータ量を扱う場合は、普段からRDBMSをデータストアとしている人には使いづらいところがあるかもしれません。

そんな人におすすめ、IndexedDBをRDBMSのように使える「lovefield」のご紹介をします。


http://qiita.com/ryo-ma/items/33386ec4b4c3b0261ce3


以下がテーブル定義を作成してInsert、Selectするサンプルコードです。



// スキーマを作成
var schemaBuilder = lf.schema.create('SchemaName', 1);

// テーブルを作成
schemaBuilder.createTable('TableName').
    addColumn('id', lf.Type.STRING).
    addColumn('name', lf.Type.STRING).
    addPrimaryKey(['id']);

// テーブルにレコードを追加
schemaBuilder.connect().then(function(db) {
	table = db.getSchema().table('TableName');
	var row = table.createRow({'id': '1', 'name': 'name1'});
	db.insertOrReplace().into(table).values([row]).exec();
});

// テーブルからレコードを抽出する
schemaBuilder.connect().then(function(db) {
	db.select().from(orders).exec().then(function(rows) {
		rows.forEach(function(row){
			console.log(row.id);
		});
	});
});

テーブル操作は非同期なので、同期処理をしたい場合はthenで処理を書いてください。

あとテーブル構造が変わるとよく考えないと面倒です。

私の場合は重複したデータをもつカラムをキー設定してしまったらしく、手動でブラウザのキャッシュを消すまでconnectができなくなりました。。


どうテーブル構造が変わった場合にどうアップデートさせるかはここに書いている模様。

https://github.com/google/lovefield/blob/master/docs/spec/03_life_of_db.md


あまり情報は多くなく、現時点でQiitaに2件、StackOverFlow(英語)に17件と、Googleが開発している割にいまいち人気がないようです。

かなり使いやすいので広まるといいなー。

このエントリーをはてなブックマークに追加

私もちょくちょくプログラミングをしているので、たまにはブログにソースコードを載せたいと思っています。

ソースコードを公開している人のブログを見ると、ソースコードが成形され予約語などの色わけも綺麗になっており、いいなーと漠然と思っていました。

みんなどのようにやっているのだろうか?そもそもlivedoorブログでそういうことができるのかな?

Google先生に聞いてみたところ、Google先生ご本人のライブラリ、google-code-prettifyを使えば良いことがわかりました。


それではgoogle-code-prettifyを導入してみます。

livedoorブログでgoogle-code-prettifyを使う


上記のサイトを参考にしました。

1. 「ブログ設定」→「カスタムJS」を選択
2. 「head内」に以下を追加
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
記事を書くときに以下のタグで囲むことでGoogle様が言語を判定して適切な表示に設定してくれるようです。

<pre class=“pretty print”>
</pre>

素晴らしい!
このエントリーをはてなブックマークに追加



タイトルのまんまです。

jquery使っていろいろしようとしていたのですが動かない。

<html>
<head>
<script src="../js/jquery-1.8.3.js"></script>
</head>


<script>
jqueryを使ってごにょごにょ
</script>



jqueryが実行されていないように見える。jqueryのパスはあっているしなぜだ?jqueryを使ってごにょごにょしているところが間違えているのか?とデバッグすること数分。


原因は、HTMLの最初に
<!doctype html>
を書いていなかった
ためでした。

これがないとHTML5ということが認識されないから<script>タグだけだとjavascriptも読み込めないようですね。


めでたしめでたし。
このエントリーをはてなブックマークに追加

↑このページのトップヘ