NINXIT-BLOG

7月終わり

By utahta, on 7月 25th, 2010

すっかり更新が滞ってますた。

Twitter でぶつぶつ呟いて満足しつつ、ブログに書くようなことを全然してない今日この頃。
なにかとダラダラ過ごしてしまうのよね。

最近したことと言えば、ドラマの原作本を買ってみたりとか。

ちなみに小説。

ドラマや映画が原作本を超えることって滅多にないなら、
以前見て面白かったドラマの原作本ならハズレはないだろうと。

流星の絆と新参者を読破した。

どちらも東野圭吾さん。

目論見通り面白かった！両方とも350ページぐらい。
久々に技術書以外の本を読んだ気がする。

なにかとドラマのキャストで脳内再生しがちだったけど、それはそれで情景がパッと浮かんで宜しかった。

ほんとは文庫がほしかったけど、なかったからハードカバー。

もし電子書籍で発売されてたら迷わずそっちを買ったんだけどなぁ。
てか、iPad アプリの話になってしまうけど、1つの本を1つのアプリにするのやめてほしいね。
1つのアプリで複数の本を管理したい。

あとは YouTube の動画を見ていたり。
こないだロンハー見たときから楽しんごって芸人のドドスコが頭から離れなくって、うっかり動画を探してしまった。

なんかクセになるんよねぇ。ドドスコスコスコ。
浜ちゃんのツッコミが絶妙すぎるｗ

WP Social Bookmarking Light

By utahta, on 6月 13th, 2010

WordPress 用のプラグイン、WP Social Bookmarking Light を公開しました。

概要

ソーシャルネットワーク, ソーシャルブックマーク系のリンクをエントリーの先頭か後尾に自動で追加するプラグイン。

例えば、はてなブックマークや Facebook や Google Buzz や Twitter など。

どのリンクを追加するかは、設定画面から選択可能です。

尚このプラグインは、Social Bookmarking JP や wp-hatena を超絶インスパイアしております。

インストール

1. こちらのページからプラグインをダウンロードして、wp-content/plugins/ にアップロード。

2. WordPress 管理画面のプラグインメニューから、WP Social Bookmarking Light を有効化。

3. お好みで、WP Social Bookmarking Light Options メニューからプラグインの構成を変更。

スクリーンショット

エントリーに表示されるアイコンたち。

設定画面。

お問い合わせ

コメント欄か Twitter までお気軽にどうぞ。

WordPress プラグインを公開する手順

By utahta, on 6月 13th, 2010

WordPress Plugin を公開するまでの流れをメモ。

公開するページは、WordPress.org Plugins。

アカウント登録

最初に、WordPress.orgでアカウント登録。

必須項目は、Username と Email。

登録するとメールが届く。中にパスワードが入ってる。

パスワードは、Forums ページの右上にある View your profile から変更できる。

プラグイン登録申請

続いて、Add Your Pluginで登録申請。

Extend → Plugins → Developer Center → Add Your Plugin という順番でたどり着く。

必須項目は、Plugin Name と Plugin Description。

申請の結果が出るまで、大体1週間ぐらいかかるらしい。

完了するとメールが送られてくるので、しばし待つ。

SVN チェックアウト

承認メール内に Subversion のリポジトリ URL が書かれている。

この URL が、基本的にプラグインの公開場所となる。

リポジトリをチェックアウト。

$ svn co http://plugins.svn.wordpress.org/wp-hoge/
A    wp-hoge/trunk
A    wp-hoge/branches
A    wp-hoge/tags

trunk が作業する場所。
tags が公開する場所。
だいたいそういう感じで間違いじゃないはず。

公開準備

既にプラグインを作成しているのであれば、作成済みファイルを trunk にコピー。
まだであれば、作成しる。

プラグインが完成したら、readme.txt の準備。
WordPress 公式の readme.txt サンプルは、ここにある。

フォーマット通りに記述すると、readme.txt の内容が WordPress Plugin 公開ページに反映される。
フォーマットの確認は、こちらのサイトで行える。
足りない項目があると、以下の図のように教えてくれる。

公開

readme.txt が完成したら、あとは公開するだけ。

readme.txt の Stable tag 項目に設定したバージョン番号をタグ名にする。

Stable tag: 1.0.0

上記の場合なら、1.0.0 という名前のタグを作成すればいい。

最初に trunk のファイルをコミット。
コミットするときに WordPress アカウントのユーザ名とパスワードを求められるので要確認。

$ svn add wp-hoge.php readme.txt
$ svn commit -m "first release."
Authentication realm: <http://plugins.svn.wordpress.org:80> WordPress.org Subversion
Username: user	
Password for 'user':
...
Transmitting file data .....................
Committed revision 251421.

続いて、タグを作成。

$ svn copy http://plugins.svn.wordpress.org/wp-hoge/trunk http://plugins.svn.wordpress.org/wp-hoge/tags/1.0.0 -m "tagging 1.0.0 release."
Committed revision 251422.

最後に、プラグインのページにアクセスし、readme.txt の内容が反映されていることを確認したら完了。

参考

WordPress.orgのプラグインディレクトリに自作プラグインを登録する方法（Windowsユーザー向け、TortoiseSVN使用） : 参考エントリー。Windowsユーザ向け。

MacPorts + MySQL5 + Apache2 + PHP5

By utahta, on 5月 25th, 2010

MacPorts で MySQL5 と Apach2 と PHP5 を入れたメモ。

インストール完了まで意外と時間をくってしまった。

MySQL5

ややこしいことに mysql5 と mysql5-server の２つが対象としてあるので要注意。

mysql5 を選ぶと mysql_install_db5 で一手間必要だったり、 plistを自前で書く必要がでてくるので、mysql5-server を選ぶ。

$ sudo port install mysql5-server
--->  Computing dependencies for mysql5-server
--->  Fetching mysql5
--->  Verifying checksum(s) for mysql5
--->  Extracting mysql5
--->  Applying patches to mysql5
--->  Configuring mysql5
--->  Building mysql5
--->  Staging mysql5 into destroot
--->  Installing mysql5 @5.1.46_0
The MySQL client has been installed.
If you also want a MySQL server, install the mysql5-server port.
--->  Activating mysql5 @5.1.46_0
--->  Cleaning mysql5
--->  Fetching mysql5-server
--->  Verifying checksum(s) for mysql5-server
--->  Extracting mysql5-server
--->  Configuring mysql5-server
--->  Building mysql5-server
--->  Staging mysql5-server into destroot
--->  Creating launchd control script
###########################################################
# A startup item has been generated that will aid in
# starting mysql5-server with launchd. It is disabled
# by default. Execute the following command to start it,
# and to cause it to launch at startup:
#
# sudo launchctl load -w /Library/LaunchDaemons/org.macports.mysql5.plist
###########################################################
--->  Installing mysql5-server @5.1.46_0
******************************************************
* In order to setup the database, you might want to run
* sudo -u _mysql mysql_install_db5
* if this is a new install
******************************************************
--->  Activating mysql5-server @5.1.46_0
--->  Cleaning mysql5-server

無事インストールが終わったら、mysql_install_db5 を実行する。

$ sudo -u _mysql mysql_install_db5
Installing MySQL system tables...
...略
Please report any problems with the /opt/local/lib/mysql5/bin/mysqlbug script!

ログイン時、MySQLが自動で起動するように設定。

$ sudo launchctl load -w /Library/LaunchDaemons/org.macports.mysql5.plist

これで、mysqld が勝手に立ち上がる。
最後にログイン出来るか確認して、インストール完了。

$ mysql5 -u root
...略
mysql>

Apach2 と PHP5

Apach2 と PHP5 をいっぺんにインストール。

$ sudo port install php5 +apache2 +mysql5 +pear
Password:
--->  Computing dependencies for php5
...略
--->  Building apache2
--->  Staging apache2 into destroot
--->  Creating launchd control script
###########################################################
# A startup item has been generated that will aid in
# starting apache2 with launchd. It is disabled
# by default. Execute the following command to start it,
# and to cause it to launch at startup:
#
# sudo launchctl load -w /Library/LaunchDaemons/org.macports.apache2.plist
###########################################################
Note: apache2 installs files outside the common directory structure.
--->  Installing apache2 @2.2.15_1+darwin+preforkmpm
--->  Activating apache2 @2.2.15_1+darwin+preforkmpm
--->  Cleaning apache2
...略
--->  Configuring php5
The +mysql5 variant is obsolete. Please install the php5-mysql port instead.
--->  Building php5
--->  Staging php5 into destroot
Note: php5 installs files outside the common directory structure.
--->  Installing php5 @5.3.2_0+apache2+darwin_10+macosx+mysql5+pear
--->  Activating php5 @5.3.2_0+apache2+darwin_10+macosx+mysql5+pear
To customize php, copy
/opt/local/etc/php5/php.ini-development (if this is a development server) or
/opt/local/etc/php5/php.ini-production (if this is a production server) to
/opt/local/etc/php5/php.ini and then make changes.
 
If this is your first install, you need to activate PHP in your web server.
 
To enable PHP in Apache, run
  cd /opt/local/apache2/modules
  /opt/local/apache2/bin/apxs -a -e -n "php5" libphp5.so
--->  Cleaning php5

ログイン時、Apache2 が自動で起動するように設定。

$ sudo launchctl load -w /Library/LaunchDaemons/org.macports.apache2.plist

php.ini をコピー。

$ sudo cp /opt/local/etc/php5/php.ini-development /opt/local/etc/php5/php.ini

php5 単体では、MySQLインターフェースがインストールされないらしい。
なので、別途インストールする必要がある。

$ sudo port install php5-mysql
...略
--->  Staging php5-mysql into destroot
--->  Installing php5-mysql @5.3.2_0+mysqlnd
To use mysqlnd with a local MySQL server, edit /opt/local/etc/php5/php.ini and set
mysql.default_socket, mysqli.default_socket and pdo_mysql.default_socket
to /opt/local/var/run/mysql5/mysqld.sock
--->  Activating php5-mysql @5.3.2_0+mysqlnd
--->  Cleaning php5-mysql

MySQLに関わる設定をする為、php.ini を修正する。

$ sudo vi /opt/local/etc/php5/php.ini
pdo_mysql.default_socket =/opt/local/var/run/mysql5/mysqld.sock
mysql.default_socket =/opt/local/var/run/mysql5/mysqld.sock
mysqli.default_socket =/opt/local/var/run/mysql5/mysqld.sock

mbstring も分離されているようなので、別途インストールする。

$ sudo port install php5-mbstring
...略
--->  Installing php5-mbstring @5.3.2_0
--->  Activating php5-mbstring @5.3.2_0
--->  Cleaning php5-mbstring

以上で、port を使ったインストール作業は完了。
続いて、httpd.conf の設定を行う。

httpd.conf に php5 モジュールを追加。

$ sudo /opt/local/apache2/bin/apxs -a -e -n "php5" libphp5.so 
[activating module `php5' in /opt/local/apache2/conf/httpd.conf]

httpd.conf に php の設定を追加。

$ sudo vi /opt/local/apache2/conf/httpd.conf
...
<IfModule php5_module>
    AddType application/x-httpd-php .php
    AddType application/x-httpd-php-source .phps
 
    <IfModule dir_module>
        DirectoryIndex index.html index.php
    </IfModule>
</IfModule>

httpd を再起動。

$ sudo /opt/local/apache2/bin/apachectl restart

最後に、php ファイルを用意しブラウザからアクセス出来ることを確認して、インストール完了。

なんか・・・

意外と手間取った。

有吉弘行の動画でひまつぶし

By utahta, on 5月 22nd, 2010

暇だったから、YouTubeで有吉弘行の動画をみてた。

有吉弘行といえば何年か前、猿岩石だった頃ぶりにテレビで見たとき自分の発言でヘラヘラ笑ってるとこ見てなんだこいつとか思ってた。

けどここ最近、妙に気になる存在に。

飾らない毒舌や、ぶっとんだ行動とか。

芸人色が強いなーって感じ。

たまに見せるさりげない礼儀正しさは良いギャップ。

有吉の真骨頂

暴言よりの毒舌。
さりげない毒舌。
礼儀正しく毒舌。

有吉ゼミナール

トークが飽きない。

有吉弘行（なんかしらのインタビュー）

狡猾。
じつは、ひろいき。

有吉 VS 吉瀬美智子

これはすごい。

有吉ドッキリ！Ｔ編集長と運命の再会

トラウマ体験。
コーヒーを置きやすいように椅子をずらす、あのさりげなさに惚れた。

WordPress ソーシャルブックマーク系プラグインその２

By utahta, on 5月 10th, 2010

以前、Social Bookmarking JP が便利といったエントリを書いたけど、少し気になる点をみつけてしまった。

Twitter へのツイートボタンがあるのだが、通常だと短縮URLが使われず、URLに日本語が混じっていると非常に長いURLになってしまい、ツイッターの１４０文字制限を軽くオーバーしてしまう・・・。

たとえば、こんな感じ。

WordPress ソーシャルブックマーク系プラグイン : http://www.ninxit.com/blog/2010/05/05/wordpress-%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E7%B3%BB%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3/

９２文字ほどオーバーしてる。

これを対策するには、プラグインを弄るしかないのだけど、短縮URLサービスのAPIを叩くように変更するのは、かなりめんどくさい。

そこで、ブログ１年生でも設置できる超シンプルTwitter「つぶやきボタン」を使うことにしてみた。
このサービスを使えば、URLを自動で短縮してくれるっぽい。

変更内容は、以下のとおり。

social-bookmarking-jp.php

    // Twitter
/*
    'twitter' => array(
	'label' => __('Twitter', 'social-bookmarking-jp'),
	'entry' => array(
	    'link' => 'http://twitter.com/home?status=@URLENCODED_TITLE@%20@URLENCODED_LINK@',
	    'icon' => WP_PLUGIN_URL . '/social-bookmarking-jp/twitter.gif',
	    'width' => 16,
	    'height' => 16,
	    'alt' => __('Post to Twitter', 'social-bookmarking-jp')
	),
	// http://tweetbuzz.jp/static/imgcounter
	'users' => array(
	    'link' => 'http://tweetbuzz.jp/redirect?url=@LINK@',
	    'icon' => 'http://tools.tweetbuzz.jp/imgcount?url=@LINK@',
	    'alt' => __('Tweets for this web page', 'social-bookmarking-jp')
	)
    ),
 */
    'twitter' => array(
	'label' => __('Twitter', 'social-bookmarking-jp'),
	'entry' => array(
	    'link' => 'http://2bu.in/j',
	    'icon' => 'http://2bu.in/tw',
	    'alt' => __('Post to Twitter', 'social-bookmarking-jp')
	),
	// http://tweetbuzz.jp/static/imgcounter
	'users' => array(
	    'link' => 'http://2bu.in/d/http://www.ninxit.com/blog/',
	    'icon' => 'http://2bu.in/i/http://www.ninxit.com/blog/',
	    'alt' => __('Tweets for this web page', 'social-bookmarking-jp')
	)
    ),

時間があれば、自分用にプラグインを作ってみたいところだけど、とりあえずしばらくこのままで行こうかな。

WordPress ソーシャルブックマーク系プラグイン

By utahta, on 5月 5th, 2010

エントリーの最初 or 最後に自動でソーシャルブックマーク用のボタンを追加してくれる超便利なプラグイン。

Social Bookmarking JP の導入メモ。

インストールは簡単。zipファイルをダウンロード＆解凍して、plugin ディレクトリに置くだけ。

しかし、見た目がなんか気になる。
その画像がこちら。

ボタンの周りが灰色になっていてカコワルイよ。

ブックマーク数を表示する部分なんて小さな灰色の四角となって申し訳なさそうにたたずんでいるじゃないか。

原因は、テーマで設定されている CSS の img 項目。
おもいきり干渉してる。

とりあえず解決策として、「プラグインのソースコードを弄って、オプションから CSS の設定をできるようにする」ことを考えた。

けど、めんどくさい。

興味本位からソースコードをサッと眺めてみた感じ、かなり分かり易くて修正は容易っぽかったけど、
後々プラグインがアップデートされたときとか考えるとやっぱ面倒。

結局テーマの CSS を弄くることにした。

使用中の Atahualpa 3.4.6 テーマは CSS の拡張が自由にできて地味に便利。

以下、修正コード。

.bookmark_entry img{
background: #ffffff;
padding: 3px 0;
}
.bookmark_users img{
background: #ffffff;
padding: 3px 0 3px 2px;
}

bookmark_entry は、ブックマークボタン用のクラス。
バックグラウンドを白くして、上下に 3px 幅を持たせた。

bookmark_users は、ブックマークとかリツイートされた数用のクラス。
こちらもバックグラウンドを白くして、上下に 3px 幅を持たせた。さらに左に 2px 調整値をいれてみた。

修正後の見た目がこちら。

ずいぶんシュッとしてよい感じになったである。

MacBook Pro 15 インチまとめ

By utahta, on 4月 23rd, 2010

昨年の暮れからいつ出るか出ないかと待ち続けて、はや4ヶ月。

よーやく先週 AppleStore に陳列された new MacBook Pro！

即ポチれるほど財力がないので、ネット上のレビューを待ってから決めることにしてた。

そろそろ出揃ってきた感があるので、ここらでいっちょまとめてみる。

対象は、15 インチ。

関係ないけど、英語で開封のことを Unboxing って言うらしい。知らなかった。

YouTube に Unboxing 動画をアップしてる人が結構いて、みんな楽しそうでうらやましい。

英語的に Open だとニュアンスが違ってくるのかな。

中にはただ誰かがしゃべってるだけの動画もあったり。

英語だからまー何言ってるか分からないけども。

MacBook Pro 15 2.4GHz Core i5 でゲーム

MacBook Pro 15 2.4GHz Core i5 でゲームしてる動画。

YouTube のコメントからこの方は、スタンダード解像度なグレア¹ 仕様。

Windows7（たぶんBootCamp）で Call of Duty: Modern Warfare 2 をやってるらしい。

動画を見る限り、かなりスムーズ。

ファンの音が聞こえないから、この程度なら楽勝なのかも。

ついでに発熱が抑えられてると嬉しいんだけど！

グレアなので、背景が黒くなると鏡のように撮影者が写りこんでいる。

MacBook Pro 15 Hi-res Antiglare

ハイレゾ² アンチグレア³ の動画。

ハイレゾのアンチグレアをアップしてる人が意外といない。（探し方が悪いだけかも）

ちょっと文字が小さいように見えるけど、慣れの問題だろうか。

それより、銀ベゼルが思ったよりもカッコイイ！デロリアンっぽくって好み。

モーションダイ部定例 2回目

http://www.ustream.tv/recorded/6337532

冒頭の数分間、MacBook Pro 15 Core i7 Hi-res Antiglare SSD256GB の開封からアイコンパレードまでを紹介してる動画。

省エネモードのくせに、アプリがあんなに速く立ち上がるなんて。

SSD のパワーおそるべし。

俄然 SSD にしたくなってくる！

てか、銀ベゼルかっこいい。

MacBook Pro (15-inch, Mid 2010) ベンチマーク

MacBook Pro 15 のベンチマークを紹介してるサイトさん。

MacBook Pro 13 と比較すると顕著に差がついてる。

今回は、主に GPU 周りが強化されているんだとか。

3年後も現役で使えるようなスペックが欲しい。

MacBook Pro (April 2010) Review – Part 2/3

The Wandering Blog

海外の方のレビュー。

英語苦手なので長文はつらい・・・ということで Screen の項目だけ参考にさせて頂いた。

雰囲気で訳した感じでは、

グラフィッカーならハイレゾおすすめ！
プログラマーなら微妙！
コード書くときは、縦の画面スペースが大事であって、画面エリア?は別に…なんだよね！
ハイレゾっつっても実際広くなるわけじゃなくて、要は密度が高いだけなんだよね！

的な。

たしかにアップルストアで実物を見たとき、密度が高いというか、画面全体が圧縮されてるみたいな印象を受けた。

いろいろ小さくなってるから結果広く見えてるだけなんじゃ・・・って感じがして。

慣れれば都なのかしらん。

しかし、コメント欄にプログラマハイレゾ不要?論に意義を唱えてるひとがいて、その人は、

横の広さもあんたが書いた縦の広さと同じくらい重要だぜ！
ウィンドウいっぱい開くときとかね！云々！

的なことを言ってる。（たぶん）

まーこれも一理ありそげ。

Photo of MBP 15″ Hi-Res Anti-Glare v. MBP 15″ Std Res Glossy & Speck Satin Case

海外の交流サイトの１スレッド。

MacBook Pro Hi-res Antiglare の写真がいっぱい載ってる感じ。

なかでも http://farm5.static.flickr.com/4018/4527906155_78560564cf_o.jpg の写真は、やばい。

こういっちゃなんだけど、惚れてまうやろ！

【PC Watch】新MacBook Proレビュー

新MacBook Proレビュー Core iシリーズを搭載してパフォーマンス大幅向上～新たに搭載されたグラフィックス自動切り替えとは?

PCウォッチの記事。

新世代モデルは買って損なしなベンチマーク結果らしい。

他にもグラフィック自動切り替え、BootCamp で Windows7 を利用したベンチマークの結果などがまとめられている。

適当にまとめ

最後に、一般的に使う感じ（ブラウジングとかメールとか …）を前提に適当なまとめ。

てか、箇条書き。

・ハイレゾのアンチグレアは、試す価値ありげ。
・Core i5 と i7 に大した差はなさそう。
・GPU 256 と 512 も大した差はなさそう。
・SSD 爆速。一番、体感速度があがりそう。
・発熱は、噂に聞く程ひどくないっぽい。

あと1度は自分の目で見てから買うと後悔しなさげ。

なんせ高い買い物。

最悪、気に入らなかったら返品という手もある。

けど、開封済みだと 10% の手数料がかかる。

ちなみにアップルストアに行って、ジーニアスなお兄さんお姉さんにハイレゾとアンチグレアについて相談してみたところ、

「無理にハイレゾアンチグレアにしなくてもいいんじゃない？
意外とアンチグレアフィルターもいけますよ！気泡が入らなければね。」

との返答を頂いた。

ストアでフィルターをおすすめされるとは予想GUYだったけど、逆にフィルターはジーニアス的にありなんだなぁとか思ったり。

ハイレゾに関しては、やっぱり好みの問題だからか、なんとも言えない雰囲気を醸し出してた。

熱のことも聞いてみたけど、知ってるのか知らないのかよく分からない感じで、

「全然大丈夫だと思いますよ〜」

と言いつつ、ひっくり返して裏面を触らせてくれた。

Safariぐらいしか立ち上がってなかったから、たぶんあんま参考にならないけど、たしかに熱くなかった。

とりあえず帰って、色々じっくり考えた結果。

いま気分は、MacBook Pro 2.66GHz 8GB SSD 256GB Hi-res Antiglare USキーボードに傾いている。

ほぼ全部乗せ。

銀ベゼルとSSD。

高い。

でも、この構成なら 3 年は余裕で保ってくれると信じてる。

光沢。ツルピカ。写りこみが激しい。発色のよい液晶 [↩]
ハイレゾリューション。高解像度。ここでは 1680 x 1050 を指す [↩]
非光沢。ノンピカ。写りこみが少ない液晶 [↩]

localStorage でオプション設定の管理その２

By utahta, on 3月 22nd, 2010

以前、localStorage でオプション設定の管理というメモを書いたけど、それよりもっと良い管理方法があったので再度メモ。

JSON

JSON.parse と JSON.stringify を使う。

JSON.parse はテキストをオブジェクトに変換してくれる関数。
JSON.stringify はオブジェクトをテキストに変換してくれる関数。
Google Chrome は、ネイティブでこれら２つを使うことが出来るらしい。

以前、eval でせっせと書いていた箇所をまるまる削除することができる。

var options = {
    cat:{
        name: "tama"
    },
    dog:{
        name: "pochi"
    }
};
// 文字列にする
var options_txt = JSON.stringify( options );
 
// 文字列なのでそのまま保存可能
localStorage.setItem( 'options', options_txt );
 
// 保存した文字列を取得してくる
options_txt = localStorage.getItem( "options" );
 
// オブジェクトにする
var options_obj = JSON.parse( options_txt );

こんな便利な関数があったとはなー。ありがたや。

localStorage でオプション設定の管理

By utahta, on 1月 31st, 2010

Google Chrome extension のオプション設定周りについてのメモ。

localStorage は、データをローカルに保存したり管理したりする機能。
Chromeブラウザのキャッシュをクリアすると保存データも一緒に消えてしまったり。
永続的に保存することができるわけではないらしい。
あと、html5 の機能で Chrome 独自の機能というわけではないらしい。

キーと値の連想配列ような感じで使える。文字列しか保存できないといった制限がある模様。

Chrome extension ではこの機能をオプション設定の管理に用いることが多い様子。

簡単な使い方

localStorage.setItem( "short_cut1", "ctrl" );
localStorage.setItem( "short_cut2", "shift" );
 
var val1 = localStorage.getItem( "short_cut1" ); // ctrl という文字列が取得される
var val2 = localStorage.getItem( "short_cut2" ); // shift という文字列が取得される

というように例えばショートカットの設定なんかに使ったりする。

しかし、文字列しか保存できない制限の為、設定が構造的な場合、管理が煩雑になってしまったりする。

var hoge_option = {} // hoge 設定用の連想配列
hoge_option["short_cut1"] = "ctrl";
hoge_option["short_cut2"] = "shift";
//localStorage.setItem( "hoge_option", hoge_option ); // 本当はこうしたいけど、文字列しか保存できない。
localStorage.setItem( "hoge_short_cut1", hoge_option["short_cut1"] ); // １つ１つキーを作るのは管理的に辛い...
localStorage.setItem( "hoge_short_cut2", hoge_option["short_cut2"] );

構造的に保存

文字列しか保存できないなら、連想配列を文字列に変換して保存すればいいじゃない。

文字列から連想配列への変換には eval を使ってみた。

// 連想配列を文字列へ変換する関数
function toSource( elm )
{
    var out = '';
    for( var key in elm ){
        if( out != '' ) out += ',';
        out += "'"+key+"':'"+elm[key]+"'";
    }
    return '{' + out + '}';
}
 
var hoge_option = {}
hoge_option["short_cut1"] = "ctrl";
hoge_option["short_cut2"] = "shift";
localStorage.setItem( "hoge_option", toSource( hoge_option ) ); // {'short_cut1':'ctrl', 'short_cut2':'shift'} という文字列が保存される。
 
eval( "var hoge_out = " + localStorage.getItem( "hoge_option" ) );
hoge_out["short_cut1"]; // ctrl という文字列が取得される
hoge_out["short_cut2"]; // shift という文字列が取得される

toSource 関数は改善の余地が多分にあるけど、まぁ大体こんな感じでいけるっぽい。

eval が遅いとかありそうだけど、オプションのロードで最初に1回呼び出すぐらいなら問題ないと思いたい。

FastLookUp for Chrome のオプションは、この方法を使って設定を管理ちう。

CALENDAR

RECENT POSTS

CATEGORIES

ARCHIVES

あわせて読みたい

概要