カテゴリー
技術的なお話

Web Storageを試す

ブラウザにデータを保存する仕組のWeb Storage。html5+JavaScriptでWebアプリをつくっているのですがデータを保存する必要がありこれが使えないか試してみました。

Local StorageとSession Storage

Web Storageは2タイプある。
Local Storageはデータを永続的に保存する仕組。ブラウザを閉じてもデータは保持される。

もう一方のSession Storageはデータを一時的に保存する仕組。ウインドウを閉じるとデータは破棄される。

何れもKey,Value型でテキストのみ保存可能。

カテゴリー
技術的なお話

JavaScriptのデバッグはalert()ではなくconsole.log()を使う

JavaScriptのちょっとしたデバッグにはalert()を使う事が多かったのですが、console.log()なんていう便利なものがある事を最近しりました。

console.log(hoge);

とするとhogeがコンソールに出力されます。

コンソールの出し方はブラウザにより異なります。

  • chrome(Windows):F12 or Ctrl+Shift+I
  • chrome(Mac):コマンド+オプション+I
  • Safari (Mac):コマンド+オプション+I
  • IE(8以上): F12

FirefoxはFirebugを入れましょう。

htmlの要素がみられるインスペクタは年中使っていたので、まさかこんな身近なところに、ぐぬぬ…という感じでした。

ちなみにconsole.logはIE7等の古いブラウザではエラーとなってしまうようなのでご注意ください。

カテゴリー
iPhone/iPad 技術的なお話

iPhone/iPad用のhtml要素をドラッグ&ドロップできるページを作る

技術的な内容の備忘録をつけていこうと思います。
本来はテーマごとにブログをたちあげたほうが良いのでしょうが、とりあえずここで。

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を利用したことがあれば簡単だと思います。

サンプル

jQuery UI
jQuery UI Touch Punch

カテゴリー
WordPress

WordPressのテーマにJavascriptを追加する

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が使えるようになりました。

tooltipサンプル

via wp_enqueue_script のススメ