mix-anブラウザにデータを保存する仕組のWeb Storage。html5+JavaScriptでWebアプリをつくっているのですがデータを保存する必要がありこれが使えないか試してみました。
Web Storageは2タイプある。
Local Storageはデータを永続的に保存する仕組。ブラウザを閉じてもデータは保持される。
もう一方のSession Storageはデータを一時的に保存する仕組。ウインドウを閉じるとデータは破棄される。
何れもKey,Value型でテキストのみ保存可能。
JavaScriptのちょっとしたデバッグにはalert()を使う事が多かったのですが、console.log()なんていう便利なものがある事を最近しりました。
console.log(hoge);
とするとhogeがコンソールに出力されます。
コンソールの出し方はブラウザにより異なります。
FirefoxはFirebugを入れましょう。
htmlの要素がみられるインスペクタは年中使っていたので、まさかこんな身近なところに、ぐぬぬ…という感じでした。
ちなみにconsole.logはIE7等の古いブラウザではエラーとなってしまうようなのでご注意ください。
技術的な内容の備忘録をつけていこうと思います。
本来はテーマごとにブログをたちあげたほうが良いのでしょうが、とりあえずここで。
iPhone/iPadのSafariでhtmlの要素をドラッグ&ドロップ可能にする方法です。
PC用のWebページの場合はjQuery UIを使えばさくっと簡単に実装できるのですが、iPhone/iPadではマウスではなくタッチ操作になるのでそのままでは動きません。
jQuery UIをiPhone/iPadで動かすにはjQuery UI Touch Punchを利用する必要があります。
jQuery UI Touch Punchはタッチイベントからマウスのイベントへ橋渡しをしてくれるもの。これを使えばマウスでドラッグ&ドロップするのと同様にタッチ操作でドラッグ&ドロップが可能になります。
jQuery UI Touch Punchは読み込ませるだけで使用可能です。jQuery UI Touch Punch用のコードを書く必要はありません。
ではさっそく試してみましょう。
jQuery UIとjQuery UI Touch Punchをダウンロードし、ページに読み込ませます。 jQuery UIはダウンロード時に使わない機能を除外して軽量化することができます。ドラッグ&ドロップだけ実現でいいのであればUI CoreとInteractionsのみで他は除外してかまいません。また、jQuery UIにはjQuery本体が必要になりますので忘れずに読み込ませます。
<script src="js/jquery-1.6.2.min.js"></script> <script src="js/jquery-ui-1.8.16.custom.min.js"></script> <script src="js/jquery.ui.touch-punch.min.js"></script>
あとはjQueryのセレクタでdraggable()してあげれば、指定した要素がドラッグ可能になります。
$(".hoge").draggable();
jQueryを利用したことがあれば簡単だと思います。
そういえばこのブログのデータベースのバックアップとってなかったなーという事で唐突に技術ネタ。
mysqlのデータベースのバックアップはAutoMySQLBackupでさっくりとやっちゃいます。
AutoMySQLBackupはShell Scriptでcronと組み合わせることで定期的にmysqldumpを実行してくれるもの。実行結果はメールで通知してくれます。
AutoMySQLBackupをダウンロードしてエディタで開いて、以下のものを設定すればとりあえず動きます。バージョンは2.5.1を使用。
あとはcronで1日1回まわせば、指定した保存場所にファイルがたまっていくというイメージ。
バックアップファイルはdaily、weekly、monthlyとディレクトリにわけられローテーションされます。
シンプルで簡単です。
今回の内容は「データベースの内容をファイルとして保存する」というところまでですので、バックアップしたファイルを物理的に異なるストレージにコピーする事もあわせて考えてください。
WOWHEADのTool Tip用Javascriptを入れたかったので調べてみた。
普通にテーマのheader.phpに<script～って直接書いても動きそうですが、wp_enqueue_scriptって関数があったのでこちらを使います。
これを使うと重複して同じライブラリを読み込むのをふせげるようです。
（WOWHEADのライブラリが他で読み込まれることなんでそうそうなさそうだけどね 😉 ）
以下のコードをheader.phpに追加。wp_head();の部分でフラッシュしてるのでこれより前に配置しないとうまくいかない。
<?php
wp_enqueue_script( 'wowhead_tooltip', 'http://static.wowhead.com/widgets/power.js' );
?>
これでWOWHEADのtool tipが使えるようになりました。