2012年8月 – ページ 4 – Linux & Android Dialy

JSON

JSONで文字列変換　
JSONは
java
script
object
notation
の略
JSONは
XMLのようなデータを記述するための言語
特徴として
javascriptのオブジェクト表記法がベース
にしていること
JSONは
データを記述しているものなので
文字列として扱える
これを使い
オブジェクト配列を
JSONに変換して格納する
オブジェクトのJSONへの変換は
JSON.stringify()
JSONからオブジェクトへの復元は
JSON.parse()
を使う
JSONが一番使われるのは
Web API関連
でレスポンスでよく使われるデータ形式
とくに、マッシュアップでよく使う

localStorageの構文

local storageを操作する構文
まずは書き込み
localStorage.setItem(キー,保存するデータ);
次に呼び出し
localStorage.getItem(キー);
削除するなら
localStorage.removeItem(キー);
データ数取得なら
localStorage.length;
n項目のキーの値を取得なら
localStorage.key(n);
ストレージそのものを削除なら
（DBのテーブル削除みたいにする）
localStorage.clear();
解説もメモすると
localStorageは
ブラウザーの
window.localStorage
というオブジェクトで提供される
ちなみに、
window.
は省略可能
jQueryでもそうだけど
結構省略できたりする
localStorageにデータ保存するなら
setItemメソッドを使う
保存してあるデータを読み出したいなら
getItemメソッドを使う
このあたりは
setで保存
getで呼び出し
と覚えるといいかも
ちなみに、キーをセットしてないと
nullが返る
nullはなしという意味で
よくsqlとかでDBのデータ入力で使われる
PHP +MYSQLの組合せだと使用頻度高め
キーの値削除ボタンには
removeItemを使う
javascriptでも、removeあるから
意味は近い
removeは削除という意味
.lengthは
ストレージに格納されているデータの数を返す
ちなみに、プロパティなので()はつかない
.key()
は
要素番号を指定しキーを取得
.clear()
はストレージ全体を削除

HTML5とストレージ機能

HTML5 とストレージ機能
一般にWebアプリでは
サーバ側にデータを送ったり
Webブラウザーのcookieでクライアント側に保存します
HTML5では
ストレージ機能を使い
MB単位のデータを保存できます
cookieだと、Maxで4KBです
ちなみに、
1MB = 1000KB
となります
つまり、最大容量は
ストレージ機能のほうが1000倍以上あります
HTML5のストレージ機能は２つあり
Local Storage
Session Storage
があり、これらをまとめて
Web Storageといいます
これは、
プロトコル://ドメイン:ポート番号
となります
たとえば、
http://hebereke.jp:8080
というかんじ
local storageは
データの長期保存が可能で
Webブラウザーを閉じても、また同じ画面が開けます
session storageだと
セッションが続いている間だけ保存できます
こちらはブラウザーを閉じると消えます
セッションは
PHPとかでよく使います

live と bind と on

live と bind と on
liveメソッドは
第１引数にイベント名
第２引数に実行したい関数を与えます
liveとbind の違いは
bindは
メソッド呼び出しのときに
HTMLに存在する要素に対して
イベントを設定
liveは
呼び出し以降に追加された要素にも
イベント追加できます
つまり、bindだと
タスク管理アプリとかで
後から新しくタスクを追加したら
イベントが登録されないということになります
かなりややこしいのですか
jQuery 1.7系から
live と bind を集約した
onメソッドが使えるようになりました
Webサイトやブログ、書籍とかで
jQuery1.7未満だと
bind liveでかいてあるのはこのためです

placeholder属性

フォームに説明文追加
普通のWebページなら
ラベルで説明文をつけるけど、
画面の小さいスマホでは向かない
そこで、HTML5の
placeholder属性を使う
これを使えば
フォームに説明文を埋め込めれます
よくあるアンケートとかで
枠に薄くかいてあるのに近い感覚です
使い方は
<input type=”text” name=”name” placeholder=”ユーザー名”/>
とか
<textarea name=”review” placeholder=”感想”/>
というように
わかりやすくなります

CSSとappearance

CSS3と appearance
appearanceは
Chrome Safari などのWebブラウザーが
それぞれ標準でりようしているデザインを
要素に適用する機能　
実験的なサポートが行われている機能
たとえばグラデーションとか
には、先頭に
ベンダープレフィックスがつきます
Chrome Safari Androidのブラウザーなら
レンダリングエンジンに
webkitが使われているから
-webkit
Firefoxなら
-moz
Internet Explorer なら
-ms
となります
逆に、この機能を無効化したいなら
-webkit-appearance:none;
というように
CSSで指定します
似たようなものとして
ul要素で・をつけたくないときに
list-style none
を指定します

WebページでURLパーを隠すには

Webアプリの起動時に
アドレスパーを隠すには
Webブラウザーの仕様を使います
とはいっても隠れているだけで
スクロールすればでます
AndroidとiPhoneは
アプリのウィンドウを
scrollTo関数で動かすと
勝手にURLパーが隠れます
実装は簡単で
window.scrollTo(0,1);
を追記し
ページの読み込みのときに読ませます
これを
javascriptにするか
HTMLで
<body onload=”window.scrollTo(0,1);”>
とします
これで、
Webページの呼び出しのとき
つまりonloadのとき
に
ページをスクロールさせられます
Webアプリの起動時に
アドレスパーを隠すには
Webブラウザーの仕様を使います
とはいっても隠れているだけで
スクロールすればでます
AndroidとiPhoneは
アプリのウィンドウを
scrollTo関数で動かすと
勝手にURLパーが隠れます
実装は簡単で
window.scrollTo(0,1);
を追記し
ページの読み込みのときに読ませます
これを
javascriptにするか
HTMLで
<body onload=”window.scrollTo(0,1);”>
とします
これで、
Webページの呼び出しのとき
つまりonloadのとき
に
ページをスクロールさせられます
注意点としては
コンテンツの縦のサイズを
スマホの画面より大きくしておくこと
画面ピッタリだと
スクロールしないから
表示サイズ以上にしないとだめ
この設定には
CSSの
min-heightを指定します　
このプロパティは
コンテンツの最小の高さを設定します

ToDo管理Webアプリ

ToDo管理のWebアプリ
日経Linux 2012年5月号を参考に作成
まずは付録DVDからサンプルコピー
mkdir SimpleTodo
cp -rp /media/LIN201205/article/rensai_android/* ~/SimpleTodo/
cd ~/SimpleTo
node ./web.js
で実行
ただし、前回のお絵かきアプリが動いているとだめみたいなので
一度再起動しました
この状態で
safariで
IPアドレス:3000/index.html
へアクセスします
サーバーのIPは
あらかじめ
ifconfig
で調べておきます

node.jsメモ

日経Linux 2012年4月号を参考に
サーバーサイドjava script
Node.jsの勉強中

今回のはちょっとわかりにくいので
メモしてみました
まず、前回までのファイルの完成版が
付録DVDにあるので
これを使います
というか、これを使わないと
ファイル名とかが被ってわかりにくくなります
ちなみに、開発環境は
ubuntu11.10 32bit
前回までのファイルが
~/public
にあるので
バックアップとります
mkdir bak
mv ~/public/* bak/
あとは、
cp /media/LIN201204/article/rensai_android/* ~/public
でサンプルをコピーしてから
始めるとわかりやすくなります
ちなみに、サンプルをコピーした場合、