2011年12月24日土曜日

ElementsAutoAnalyzer.exe

CPU負荷が異常に高く、PCがウィンウィン音をたてて唸っていたので、タスクマネージャ開いてみたところ、ElementsAutoAnalyzer.exeというのが犯人でした。

で、ググッてみたらこれはAdobeのPhotoshop ElementやPremiere Elementにくっついてくるプロセスなんだとか。
PC内のメディアファイルを探してインデックスしてくれるみたいです。余計なお世話ですね。

少し前に動画編集ソフトAdobe Premiere Elements10を買って使ってたんですが、Premiereを起動してない時も勝手に起動してせっせと働いてくれてたようです。

こいつを止めるにはこうします。


Premiere Elements10を起動

整理

編集

環境設定

メディア解析

「システムの起動時に解析を実行」と「システムの待機中のみ解析を実行」のチェックを外す


これでマシンを再起動してもElementsAutoAnalyzer.exeは起動しなくなりました。

自宅サーバー再構築メモ

自宅サーバーを新しく構築しなおしました。
これまでCentOS4+ThinkPad R50eで運用してましたが、少し前に不穏なディスクエラーが出てたこともあったので、CentOS5+let's note CF-Y4に変えました。

ThinkPad R50eはCDROMドライブなのでCDを3枚くらい焼いた記憶がありますが、CF-Y4はDVD読めるのでディスク1枚で済みました。


以下はOSインストール後のサーバー構築手順メモ。
備忘録として残しておきます。


■selinuxを無効化


# vi /etc/sysconfig/selinux
SELINUX=disabled
再起動

■yum


# yum list installed
インストールされているパッケージを調べる

■SSH


# vi /etc/ssh/sshd_config
Port 10022
PermitRootLogin no
PubkeyAuthentication yes
AuthorizedKeysFile .ssh/authorized_keys

(sshd_configじゃなくてssh_configを編集するミスをした。。)

■iptables


/etc/sysconfig/iptablesを旧サーバーからまるごとコピペ

■vsftpd


この辺を参考に。
http://pro-grammer.info/archives/902

■yumでphpとMySQLのインストール


この辺を参考に。
http://iwbc.info/archives/877

# yum install php
# yum install php-pear
# yum install php-devel
# yum install php-gd
# yum install php-mysql
# yum install php-mbstring
# yum install php-xml
# yum install mysql
# yum install mysql-server


■pear


# pear upgrade --force PEAR-1.5.4
# pear upgrade PEAR
# pear update-channels
pearが古い場合、最初に強制的に1.5.4にアップグレードする必要がある。

そしてもう一度upgradeして最新版に。
# pear upgrade PEAR

で、あとは必要なパッケージを入れていく。
http://kawama.jp/archives/2006/06/pear.html

■php


# vi /etc/php.ini
error_reporting = E_ALL & ~E_NOTICE & ~E_DEPRECATED
date.timezone =Asia/Tokyo


■mysql


http://kawama.jp/archives/2011/02/mysql5-5_character-set-server.html
データはdumpで移行する

■http


/etc/httpd/conf.d/vhost.confをコピペして移行

■https


こちらを参照
http://kawama.jp/archives/2011/07/07/centos5_mod_ssl.html

■cron


コピペで移行

■バックアップ


バックアップスクリプトやcronなど各種設定を移行。

■USBメモリの設定


この辺参考。
http://kawama.jp/archives/2005/12/linuxusb.html
http://kawama.jp/archives/2008/03/usb.html
http://kawama.jp/archives/2009/10/linuxusb_1.html

■モニタの電源消灯


http://kawama.jp/archives/2010/07/linux%E3%81%A7%E3%83%A2%E3%83%8B%E3%82%BF%E3%81%AE%E9%9B%BB%E6%BA%90%E3%82%92%E7%AE%A1%E7%90%86.html

■postfix


Postfixを入れ、mtaを変更
http://kawama.jp/archives/2007/10/mtasendmailpost.html

sendmail削除しておく
# yum remove sendmail

OP25対応
http://kawama.jp/archives/2007/03/postfixop25b.html

送信テスト
http://kawama.jp/archives/2011/05/linux_mail_oneliner.html

main.cfの編集
# vi /etc/postfix/main.cf
inet_interfaces = all
myhostname = home.nainai16.com
mynetworks = 192.168.1.0/24
mydestination = $myhostname



■メール転送


# vi /etc/aliases
rootとかをgmail宛に転送
# newaliases

DiCEの設定


http://www.hi-ho.ne.jp/yoshihiro_e/dice/linux.html

とりあえず以上。
移行漏れがあれば随時対応していきます。

2011年12月22日木曜日

自宅の電波時計が狂った

うちには5年くらい前に買った掛け時計タイプの電波時計が2つあって、そのうちひとつが数ヶ月前から5分遅れるようになり、さらに今週になってからもうひとつのほうも5分遅れるようになりました。

値段は確か数千円で、片方はカシオ、もう片方は無名メーカーのものです。


電池を交換してリセットしてもやはり5分遅れたまま。おかしいと思ったので調べてみました。


まずは3.11の地震のせいで、福島県にあった電波送信所がしばらくの間、機能していなかったようです。ただし、今はもう復活してるみたいですが。

http://casio.jp/support/wat/topics/20110325/


それから「電波時計 狂う」でググってみたところ、うちと同じような症状の例がたくさん出てきました。

原因はいろいろ考えられるようですが、電波時計というのはけっこう繊細で、ちょっとした障害物や環境の変化で電波を受信できなくなったり、品質が悪いものは壊れることも少なくないとか。


なおカシオのほうは5分遅れのまま数ヶ月放置していたんですが、最近になってまた刻時が正しくなってました。原因は不明です。
無名メーカーのほうはまだ狂ったままです。

電波時計って「一度設定したらあとはほうっておくだけで良い」って思ってたんですが、必ずしもそういうわけではないようです。

2011年11月22日火曜日

「inodes that were part of a corrupted orphan linked list found」エラー に遭遇する

自宅サーバーの調子が悪いのでリブートしたところ、起動しなくなってしまいました。

エラーメッセージは「inodes that were part of a corrupted orphan linked list found」とのこと。

inodeってことなんでファイルシステム関連でトラブってるみたいです。
さらに「/dev/mapper/なんたらかんたら」がおかしくなってるみたいなことも言われました。

とりあえずググってみたらfsckしろってことだったので、

# fsck

を実行しました。(オプションや引数は何も無し)

その後はよくわからないけど、yesを5~6回くらい繰り返し。
そしたら直ったみたいで無事起動してくれました。


ちなみに今回問題を起こしたハードはThinkPad R50e。たしか7~8年くらい前に買ったやつです。
OSはCentOS4。

さすがThinkPadだけあってよく頑張ってくれてますが、そろそろハードを変えたほうがいいのかもしれないです。

2011年10月31日月曜日

はじめてのAndroidプログラミング入門

Androidアプリの作り方をおおまかに把握しておきたいと思って、図書館で借りられるもので比較的新しい(2011年の出版)ものを探し、これを借りてきました。

他にもAndroid開発系の本は何冊もありましたが、ほとんどが貸出中で待ち人数も多い中、唯一この本だけ待ち人数が少なく、1週間くらい待って借りられました。

はじめてのAndroidプログラミング入門

あまり人気がないだけあって内容もそれなりでしたが、とりあえず入門書としては及第点だと思います。

2011年7月初版ですが、10月の時点ですでにちょっと情報が古くなってるところもあります。eclipseとかAndroid SDKとかでメニューや画面が本の内容とちょっと違うところがちらほらありました。

今Androidはすごいスピードで進化してるので、気になる本があったら即買って即読んでしまうのがいいのかもしれません。

それから他のandroid開発本だと、本屋でちらっと立ち読みしてみた中では週末プログラミング サクサクつくろう!Androidアプリが良さそうな感じでした。

内容までは吟味していませんが、値段が手頃な上読み応えもありそうな感じです。もし次に読むならこの本かな、と思ってます。

2011年10月27日木曜日

IrfanViewで画像を一括切り抜き(クロップ)

座標と幅&高さを指定して、一括で画像の切り抜きをしたい、簡単に。

と思ってググっていたら、なんとIrfanViewでそれができることが分かりました。

http://watawata-knoppix.cocolog-nifty.com/blog/2010/08/irfanview-f4c4.html

IrfanViewって実はかなり高機能なんですよね。使いこなせてないだけで。

というわけで専用のフリーソフトなどを入れることもなく、目的達成できました。IrfanView、ホント重宝します。

2011年10月25日火曜日

ソニーサービスステーション秋葉原でデジカメを修理してもらう

デジカメのレンズ内部にホコリが入り込んでしまいました。
こんな感じです。

左上の薄い丸いシミみたいなのがそれです。
ズームしてない時はあまり目立ちませんが、ズームすると色が濃くなります。







ググってみたところ、レンズ内部に入ったホコリの除去は分解清掃が必要。素人には難しい。メーカー修理窓口に問い合わせするのがいい、ってことだったので、修理窓口に電話してみました。

うちのデジカメはソニーのDSC-WX5というやつで、今年の1月に買ったのでまだ保証期間内です。

電話で症状を話すと郵送で無償修理可能とのこと。ただし手元に戻ってくるまでに1週間程度かかるそうです。
1週間デジカメなしは辛いなー、ってことをぼやいてたら、秋葉原にソニーサービスステーションというのがあって、そこに持ち込めば即日修理してくれるということなので、そっちに持っていくことにしました。


電車に揺られて秋葉原へ。



場所はここ。秋葉原と御徒町のちょうど真ん中のあたりです。

行ったのは土曜日の昼でしたが、特に混んではいませんでした。

番号札をとって5分ほどで呼ばれ、症状を説明して保証書と一緒にデジカメを預けます。
修理完了まで約1時間半くらいかかるということだったので、終わったら携帯に電話をかけてもらうようお願いし、その間秋葉原を散歩したり、喫茶店で休んだりしてました。

1時間15分後くらいに電話が鳴ったのでまだサービスステーションへ行き、復活したWX5を受け取って帰宅しました。

ちなみに分解清掃ではなく、レンズ部分がまるまる新品に交換してありました。おそらく分解清掃のほうがコストがかかるんでしょう。

なお今回は保証期間内だったので無償修理でしたが、保証がない場合はサイバーショットの場合11760円かかるそうです。


秋葉原まで片道1時間以上かかるのでちょっと面倒でしたが、1日で修理が済んだのは助かりました。

2011年10月21日金曜日

evoでフォントの変更をしたいけどあきらめた

安くて高機能で全く申し分のないevoですが、唯一弱点があります。

それはフォント

あまりきれいなフォントではありません。
ちょっと前までipod touchを使っていてそのフォントのきれいさを知っているので、これがかなり気になります。

特に気になるのはブラウジングの時。
文字が小さいと、フォントが潰れて非常に読みにくいです。





それと一部のフォントが変で、中国企業が作った日本語ページみたいな雰囲気になってしまいます。


で、フォントを変更しようと思っていろいろ調べたのですが、結論としては今はあきらめることにしました。


海外版evoでのフォント変更の成功事例は多いのですが、日本版でのそれはほとんどみかけません。逆に失敗事例のほうがちらほらあったり。。

まだandroid初心者ですし、最初からリスクを冒すのも怖いので、ひとまず保留にしました。

こういう時、端末がもう一台あるといいですね。

もうすぐevo 3G出るし、投売り出てたらテスト用に買ってみるのもいいかも。

2011年10月20日木曜日

android用ブラウザはoperaが速い

気まぐれでandroid用のoperaを使ってみたんですが、これが速い速い。

標準ブラウザより圧倒的に速くて快適です。速攻で乗り換え確定しました。

なおandroidマーケットではoperaは「Opera Mini」と「Opera Mobile」の二種類がダウンロードできます。



Miniのほうはレンダリングエンジンがサーバー側にあって、Mobileのほうは端末でレンダリングするという点が違うそうです。
詳しくは http://m.opera.com/ で確認できます。

スペックの低い端末だとMiniが良いみたいですが、evoくらいの端末ならMobileのほうが適してるみたいです。

あとは電池の消費を抑えたい時はMini、そうでないときはMobileを使う、みたいな使い分けもできるかもしれません。

2011年10月19日水曜日

evoでGmailの通知機能を使う

andoroidといえばGmail

もちろんevoでもGmailを使ってます。

最新のgmailアプリでは特定のラベルの付いたメールを受信したときのみ通知することができるので、これを利用します。

自分はgoogle appsを使っているので携帯専用にひとつメールアドレスを作って、メインアカウントへ転送します。
転送専用アドレス宛のメールには専用のラベルをつけ、そのラベルのみ通知対象にしました。

そしてそのラベルへのショートカットをデスクトップに置いておけば完璧。
これでメールが届いたらワンクリックでそのラベルをチェックすることができるようになります。

以上でこれまでのガラケーと同等の使い勝手を実現することができました。

evoだと@ezweb.ne.jpのメールも使えますが、Gmailがあれば十分なのでもうキャリアメールは使わない予定です。

2011年10月18日火曜日

3kNetViewerで産経新聞を読む

産経新聞はiphone/ipadだと公式のビューワーアプリがありますが、androidにはありません。

が、個人の方が作ってる3kNetViewerというアプリがあるので、それを使っています。

これは産経NetViewという、紙面情報をFlashで見られる公式サービスのデータを取得してandroid端末で見られるようにしたもの。なので産経NetViewの会員(月額315円)になる必要があります。





もともとうちは親の代から産経新聞を購読してたんですが、3.11以降産経の原発擁護姿勢があまりにも露骨なので、購読をやめました。

が、社説や土曜日の人生相談など一部の記事や、見出しの流し読みはしたいので、この3kNetViewerのお世話になっています。

なおこのアプリはevoSMT-i9100の両方で使っています。evoだと画面が小さくてちょっと見辛いですが、SMT-i9100だとそこそこ見やすいです。

複数端末で使えるし、これで月315円なら高くはないと思います。

とはいっても最近は社説をはじめとした紙面のクオリティが著しく下がってるので、これもそのうちやめるかもしれません。

でも他の新聞社もロクなのがないので、しばらくは続けると思いますが。


もっとまともなメディアが出来てくれると嬉しいんですけどね。

著名な作家とかが主導して、ネット専業でやってみたらおもしろいと思うんですが。

2011年10月17日月曜日

evo用にUSBケーブルを買う

evoには標準でUSBケーブルが付属していて、これで充電、PCとのSync、USBテザリングなどを行います。
が、このケーブルが太くてゴツくて、ちょっと使いにくいのです。

というわけで、Amazonで細くてスマートなUSBケーブルを買いました。

ELECOM スマートフォン用microUSBケーブル スリム 0.5m

500円。細くて扱い易いです。あと50cmという長さも自分にはちょうどいいです。

2本買って自宅と会社で使ってます。

2011年10月16日日曜日

Google Appsアカウントと一般アカウント間でのカレンダー共有

一般のGmailアカウントとGoogle Appsアカウントの間でカレンダーを共有しようとしてもうまくいかない問題に遭遇しました。

具体的には『Appsアカウントのカレンダー「A」に対する変更および共有の管理権限を、Gmailアカウント「G」に対して付与しようとしても、強制的に予定の時間枠のみ表示の権限にさせられてしまう』というものです。

最初は自分の設定ミスを疑って何度もやり直したんですが、それでもうまくいかないので、バグや不具合の線で調べてみました。

するとこちらがヒット。

http://www.google.com/support/forum/p/calendar/thread?tid=4bbc9b47ccf7f953&hl=ja

なるほど、そういう仕様なんですね。

さっそくAppsの管理者でログインして設定変更。即時反映はされないようなので30分くらいしてから再度試してみたらうまくいきました。

このせいで1時間ほど時間を無駄にしてしまいました。

「Appsでカレンダー共有の制限がかけられてます。」みたいなエラーメッセージを出してくれると親切なんですけどね。

2011年10月15日土曜日

Thunderbirdでドラッグ&ドロップによるフォルダ移動を禁止するアドオン「 Disable DragAndDrop」

Thunderbirdを使っていて、気づかないうちにフォルダを移動して、メールが行方不明になって困ったことはありませんか?

自分は過去に3回、それをやってしまったことがあります。フォルダ(ラベル)を元に戻したりさらにフィルタもおかしくなってしまって、直すのに面倒な思いをしました。

たぶん、手がノートPCのタッチパッドにつっかえて意図せずD&Dしてしまったんだと思います。

で、この度4回目の意図しないフォルダ移動をしてしまい、なんとかならなんものかと思ってググったところ、まさにドンピシャなアドオンがありました。

Disable DragAndDrop

さっそくインストールするとD&Dしてもフォルダが移動しなくなりました。素晴らしい!

逆に意図してフォルダを移動したい時はアドオンを一時的に無効にすればOKです。

シンプルだけど非常に有意義なアドオンだと思います。

2011年10月14日金曜日

No Root Screenshot Itでスクリーンショットを撮る

android2.2ではShootMeというアプリでスクリーンショットを手軽に撮れたみたいなんですが、2.3からは使えなくなってしまったそうです。

スクリーンショットアプリはandroidマーケットを探すといくつも出てくるんですが、どれもroot化必須のものばかり。
evoでもroot取得はできるみたいですが、手間がかかるし危険もあるみたいなのでやりたくありません。

で、唯一使えそうなのがこの「No Root Screenshot It」というアプリ。

400円ですが、とりあえず買ってみました。

スクリーンショットが撮れるようになるまでは、以下の手順を踏む必要があります。

1.Screenshot It EnablerというPC用の設定アプリケーションをインストールする
(ここからDL→http://www.lindylabs.com/screenshot_it/)

2.端末をUSBデバッグモードにしてPCとつなぐ

3.Screenshot It Enablerを起動して「Enable」のボタンを押す

以上。

これでスクリーンショットが撮れるようになります。設定すれば端末のシェイクでスクリーンショット撮影もできます。なかなか便利です。

が、再起動するともう一度上記の手順を繰り返さないといけないんです。
地味に面倒です。。

現状これ以外に方法がないみたいなのでガマンするしかありません。

2011年10月12日水曜日

evo用に32GBのMicroSDカードを買う

evo用に32GBのmicro SDカードを購入しました。

東芝 日本製 microSDHC 32GB class4 バルク品

evoはデフォルトで8GBのmicro SDカードが入ってるんですが、動画とか色々入れてみようと思って32GBを買ってみました。

evo関連でケーブルやら電池パックやら色々と買い物が増えてます。

2011年10月11日火曜日

ガラケーからevo(Googleのコンタクトリスト)へ電話帳を移行

まずはこれまで使っていたガラケーからドコモケータイdatalinkというソフトで電話帳データを吸い出します。

csvでエクスポートしてもそのままではgmailにインポートできないので、Outlookのフォーマットでエクスポート。

そのOutlook形式のデータをgmailに取り込むとメールや電話、姓、名などきれいにインポートできました。
手順はこちらです。
http://mail.google.com/support/bin/answer.py?hl=ja&answer=14024

ただしグループ分けは解除されてしまうので、仕方なく手作業で仕分けしました。
(件数少ないので大した手間ではなかったですが)

2011年10月10日月曜日

evoでUSBテザリング

evoはテザリングができます。

wi-fiテザリングも、USBケーブルで繋いでのテザリングもできますが、ノートPCで使う場合は給電しながら使えるUSBテザリングを使うケースが多くなると思います。

設定は簡単で、端末側でUSBテザリングの設定をしてUSBケーブルとPCをつなぐだけ。



ただし事前PC側にHTC Syncをインストールしておく必要があります。(起動してなくてもOK)

こんな感じで手軽にwimaxや3Gでのテザリングができてしまいます。これはかなり便利。


が、ひとつ問題が。VPNが使えません。

理由はこれ。
http://k-tai.impress.co.jp/docs/news/20110926_479754.html

IP枯渇問題にも絡んでるのでそう簡単には解決できなさそうですが、なんとかしてほしいですね。

2011年10月9日日曜日

evo用にモバイル電源パックを買う

電池食いのevoのために、モバイル電源パックを買いました。

Panasonic USB対応モバイル電源パック リチウムイオン5400

満タン状態でevoを約1.5回分くらい充電できるようです。

これで終日外出のときなどでも安心してevoを使えるようになりました。

しかしパナソニックはエネループみたいなブランド名をつけないんですかね。
エネループブランドは広く普及してるから、いずれはエネループで統合するつもりなのかな?

2011年10月7日金曜日

NoLockでロックを無効化

Androidには端末のロック機能があり、指でフリックして解除します。

使用頻度が高いと、この作業が面倒に感じるようになります。

で、NoLockというロックを無効にするアプリを入れました。

http://androider.jp/a/560980764cc6f317/



ロックが無効になるだけでも快適なんですが、付加機能で、音量ボタンから端末が起動するようになります。
evoは電源ボタンが押しにくい位置にあるので、すごく重宝します。

2011年10月5日水曜日

CentOSにrkhunterをインストール

インストールは無事成功して、定時cronも設定され、翌朝メールで送られてきたログを見ると、Warningが出てました。

「You may need to run rkhunter with the '--propupd' option.」と言われたので、

# rkhunter --propupd

を実行。
まず初回はこれを実行しないといけないようです。

それから

Warning: The SSH and rkhunter configuration options should be the same:
SSH configuration option 'PermitRootLogin': no
Rkhunter configuration option 'ALLOW_SSH_ROOT_USER': unset

というエラーも。

言われたとおりに/etc/rkhunter.confで設定変更。

これでエラーも出なくなり一件落着。


とおもいきや、yumでkernel関係のupdateをかけたらまた翌日「--propupdを実行しろ」というWarningが来てました。

rootkitのチェック対象ファイルが更新されたり増えたりしたときは毎回これを実行しないといけないってことみたいです。

2011年10月1日土曜日

htc evo wimaxを買う

ようやくスマホユーザーになりました。

購入したのはhtc evo wimax。台湾メーカー製です。日本はともかく、欧米ではけっこうシェアがあるとかいう話です。

まあ購入したと言っても端末代はタダで、さらに現金3万5千円のキャッシュバックとオマケでandroidタブレットまでもらえるという充実っぷり。
秋冬モデル発売直前で、さらにauからiphoneが出るという話もあったので投げ売り状態のところを拾った感じになります。

とはいっても購入前に2chで最近のスマホ事情を勉強し、twitterで安売りの店をじっくり探してゲットしました。

これからこのevoをいじって活用していこうと思ってます。とりあえずはOSバージョンを2.3に上げてみました。

2011年9月25日日曜日

Amazon PAAPIの仕様変更に対応(2011-08-01バージョン)

2011-08-01バージョンのAmazon PAAPI対応作業を完了しました。

https://affiliate.amazon.co.jp/gp/advertising/api/detail/api-changes.html

旧バージョンの終了は2011年10月26日なのでまだだいぶ余裕がありますが、早めに対応しておきました。

個人的に今回の仕様変更で一番影響が大きかったのは「ItemSearch オペレーションにおいて、ItemPage パラメータの最大値は従来の400から10に変更となります。」のところでしょうか。

とは言っても修正箇所はほとんどなく、Pear::Pagerに

if($itemcount>100){ $itemcount = 100; }

って処理を入れるだけで済みました。

まああまりページ数が多くてもボットの巡回でサーバー負荷が高まるし、PAAPIの利用制限にも引っかかってしまうので、この仕様変更はAmazon・利用者双方にとって妥当なところだと思います。


しかしPAAPIは年々縮小していく傾向ですね。
今後もさらに縮小していくことが考えられるので、PAAPIを活用したサービスを作るのは少し躊躇してしまいますね。

2011年9月17日土曜日

TigerVNCを使う

これまでVNCはRealVNCを愛用してました。

が、RealVNCのFree EditionはWindowsVista以降は対応しておらず、有料($30)のPersonal Editionを買わないと使えません。(Viewerは使えるけどServerが使えない)

このたびPersonal Editionの試用期間が終わってしまって、さてどうしたものかと考えました。

円高とはいえ、たまにしか使わないVNCに$30も支払うのはあまり気が進みません。


とりあえずフリーで有名なUltraVNCを試してみましたが、どうもイマイチです。


で、ググって調べてみたらTigerVNCというものがあることを知りました。

http://tigervnc.org/

早速インストールします。
設定画面を開くと、なんかRealVNCと似てます。というか瓜二つです。

よくわかりませんが、ReadhatとCentOSの関係みたいな感じなのかもしれません。


早速使ってみますが、エラーが出てうまく接続できず。
どうもOSが64bitだとサーバーモードではうまく接続できないらしく、ユーザーモードに切り替えてみたらうまく行きました。

2時間ほど無駄にしましたが、これで今まで通りのVNC環境を、無料で整えることができました。良かった良かった。

2011年9月16日金曜日

「通常使うプリンタ」が勝手に変わるのは無線LANユーティリティのせいだった

タイトルのまんまです。

通常使うプリンタを設定しても、気がつくと「Microsoft Office Document Image Writer」がデフォルトになってるという現象。
これに長いこと悩まされていたんですが、まあプリンタを使う頻度があまり多くないので問題を放置してました。

でこのたびこの問題をググってみたら、同様に困ってる人がいるんですね。
対処法もばっちりかかれてました。

それが無線LANユーティリティ。自分はLetsnoteにバンドルされてるユーティリティツールを使ってるんですが、そいつが通常使うプリンタも記憶してたというわけです。

というわけで、通常使うプリンタを設定した後でユーティリティの設定を上書きした無事問題解決。

長いこと疑問におもっていたことが解決してスッキリしました。

2011年8月27日土曜日

LinuxサーバーからWake-on-Lanする

外出先から自宅にVPN → wolでWinマシン起動 → VNCで操作 → やったね!

というのを目論んでいました。

が、ひとつ想定していなかった問題が。

wolで起動するWindowsマシン(Epson Endeavor)は、無線LANイーサネットコンバータ(wn-ag/cというかなり古いやつ)を経由してネットに繋がっています。

ググってみたところ、

http://www.zqwoo.jp/sak_bbsq/show_c/142437
マッピングがパソコン名とパソコンのMACアドレスになるべきところが、パソコンと(PCに接続している)無線LANイーサネットコンバータのMACアドレスがマッピングされちゃっています。


こちらの症状と見事に一致しました。コンバータの機能にもよるみたいですが、うちのwn-ag/cはダメみたいです。


ここで一度諦めかけたのですが、自宅には常時起動しているLinuxサーバーがあるので、そこからMagic Packetを飛ばせばいいんじゃないか?と思いついたわけです。


さっそくググってみたら、Linuxでもwolという、そのまんまの名前のツールがあることがわかりました。


インストールはyumで一発。

# yum install wol

こんな感じで実行します。

# wol MA:CA:DD:RE:SS:SS 192.168.12.34

これでEndeavorは見事に起動しました!

sshでサーバーにつないでコマンド打つのも面倒なので、phpスクリプトを書いてブラウザからwolできるようにしました。
まあ、これだけなんですが。

<?php?php
system('/usr/bin/wol MA:CA:DD:RE:SS:SS 192.168.12.34');
?>


とりあえずこれで自宅のwol対応は完了しました。

今はイーサネットコンバータを使ってますが、いずれは完全無線化したいですね。

無線でのwolはWake On Wireless LAN(WoWLAN)と言うそうです。Windows7から対応してるので、今後は対応ハードも増えてくるんじゃないかと思います。

2011年8月19日金曜日

Wake-on-LANでPCを起動する

先日予算を少しオーバーして購入したEndeavorをさらに活用しようと思って、Wake-on-LAN(wol)で起動できるようにしてみました。

Wake-on-LANというのはその名の通り、LAN経由でPCを起動するというものです。

調べてみたら、Endeavorのネットワークアダプターはwolに対応してたので、設定してみました。


設定はBIOSとWindowsで必要です。

まずBIOS設定のそれっぽいところをEnabledに変更。

そしてWindowsでもネットワークアダプターの詳細設定のところの、それっぽいところを有効にします。


どちらも「それっぽいところ」という曖昧な表現ですみませんが、ググってみつけたwolの設定に関するページをいくつか見ても、表記が一定ではありません。

BIOSの種類、ネットワークアダプターのドライバーの種類によって表記がバラバラみたいです。なので「それっぽいところ」を自分で探すしかありませんでした。


ひとまずこれで設定完了。


あとはEndeavorに対してMagicPacketという、起動を命令する特殊なパケットを送ります。

最初MagicBootというツールでMagicPacketを送ったのですが、うまくいかず。

次にWake up On Lan Toolというツールを使ってみたら、見事に起動が成功しました。

何が悪かったのかよくわかりませんが、とりあえず成功です。
初めてPCが起動した時はちょっと感動しました。


これでVPNで自宅に繋げば、いつでもどこでもEndeavorを起動できます。

今のところwolの活躍の場はまだありませんが、たとえばpicasaに大量の写真をアップするというような時、時間のかかる処理をする時には必ず役にたってくれると思います。

2011年8月15日月曜日

ieだけjqueryでbackground-positionが取得できない

件名そのまんまの問題が起こりました。

$('#hoge').css('background-position');

firefoxやchromeでは値が取得できるのに、ieだけ「undefined」になってしまいます。
(確認したのはie8のみです。)

ググったらありました。

http://5509.me/log/get-css-background-position-with-jquer

ieだけxとyを別々に取得しないといけないそうです。

ie、、、8になってもあいかわらずですね。

というわけで、

$('#hoge').css('background-position-x');

のようにして取得できるようになりました。

2011年8月10日水曜日

エプソンダイレクトでEndeavor ST150Eを買う

サブで使っていたデスクトップPC(Sycomの静音省電力スリムタワー)が3.11地震の揺れでバタンと倒れてしまい、それ以降ずっと調子が悪く、そして先週とうとうWindowsが起動しなくなったので、買い換えることにしました。

これまで5年使っていて、最近ではスペック不足を感じていたので、ちょうどいい買い替えのタイミングだったかもしれません。

新しいPCに求めるのは、

そこそこのスペック
小型
静音
省電力
なるべく安く

といった感じです。

最初はEndeavor NP25Sという超小型を買おうかと思っていたのですが、ちょっとスペックが低すぎるので、少し高くなりますがST150Eにしました。

hpのs5シリーズってのもけっこう良さそうでしたが、サイズがやや大きいのがネック。

それとMac Miniにもちょっと惹かれましたが、WindowsOSを別で買ったりインストールするのも面倒。


というわけでST150Eに決定しました。

当初は予算5~6万円くらいで考えていたんですが、CPUをCeleronからCore i3、メモリを1GBから4GBにしたところ、送料含めて合計で7万円ちょっとになってしまいました。

メモリ4GB積んだので、OSはWin7 Home 64bitにしてみました。


注文から2日で到着。

開封して現物を見ましたが、やはり小さいです。
死亡したスリムタワー型と比べると一目瞭然です。






まだ使い始めて数日ですが、サクサク動いていい感じ。
初めての64bit OSですが特に不都合は感じてません。ただ唯一困ったのが、使おうと思ってたUSBの無線LAN子機の64bit版ドライバが出てなかったこと。仕方ないので有線LANで繋いでます。

やはり新しいPCはいいですね。

2011年8月9日火曜日

Picasaに90000枚の写真をアップロードした

2005年から撮影して溜め込んでいる子供の写真、約90000枚、容量にして約60GBを、Picasaにすべてアップロードしました。

写真の解像度はほぼすべて1600x1200で統一しています。「20110802」みたいな感じで日付ごとにフォルダ分けしており、それをそのままアップしたので、アルバムは全部で1600超になりました。


最近オンラインフォトストレージを調べていて、最初はFlickerを使おうとしてましたが、あまりに遅いのと、使えるアップロードツールが見つからず挫折。

実はその後phpでflickrアップロードツールを作っていたんですが、「その途中でGoogle+に登録するとPicasaの使用容量が"ほぼ"無制限になる」という話を知り、Picasaを使ってみることにしました。

Picasaの容量制限について


とりあえず一番古い2005年の写真からアップロード開始。
とにかく速い。Flickrとは比べ物にならないスピードです。この時点でもうFlickrを使う気は失せました。

アップロードは一括アップロード機能が便利です。
複数フォルダを指定して一気にアップできるので、まとめて数千~数万ファイルを選択して一括アップしてました。

朝一括アップを始めて自宅を出て、夜帰ってきたらまだアップしてた、なんてこともありました。


途中何度かエラーでアップロードできていなかった写真もありましたが、一週間くらいかけて地道にアップロードし、最終的にすべての写真をウェブ上に置くことができました。


唯一の不満は、オンラインアルバムの階層化ができないことですかね。
自分の場合1600ものアルバムがあって、それがすべて並列で表示されているので使いにくいです。

まあどうしてもって時はクライアントアプリを使えばいいですし、いずれはこのあたりも改善されてくると思います。

(というか無料でこれだけ使わせてもらってるので、文句なんて言える立場ではないですね。)

2011年8月8日月曜日

軽くてサクサク動くjqueryプラグイン「Tiny Carousel」

以前jcarouselというプラグインを使ってカルーセルパネルを作りましたが、今度はTiny Carouselというのを使いました。

http://www.baijs.nl/tinycarousel/

jcarouselに比べると機能は少ないですが、そのぶん軽くてサクサク動く感じです。
ソースコードも短くてシンプルなので、カスタマイズもしやすいと思います。

2011年8月7日日曜日

「wipe-out」でHDDのデータを完全に消去

古いデスクトップPCが死亡(Windowsが起動しない。safeモードだとたまに起動)したので、HDDのデータを消去してみようと思いました。

ググってみたところいくつかツールが出てきましたが、このwipe-outというのを使うことにしました。

http://www.wheel.gr.jp/~dai/software/wipe-out/


イメージをDLしてCD-ROMに焼き、そのCDからブートするとFreeBSDが立ち上がってwipe-outが動きます。

最初開発版のv1.1を使ってみたのですが、文字化けしたりしてうまく動作しなかったので、v1.0で試したら今度はうまくいきました。

GUIなので操作も簡単。こんな感じです。







まああまり使うことはないでしょうが、いずれ必要な時がまた来ると思うのでメモがてらエントリしました。

2011年8月3日水曜日

/bootの使用量が90%超えてた

気まぐれで普段は滅多に見ないLogWatchのメールを最後まで眺めていたら、ディスク使用量の項目で/bootのパーティションの使用量が93%になっているのに気が付きました。

/bootにはyumで取得したカーネルを保管しているので、長く運用していると徐々に圧迫されるようです。

http://d.hatena.ne.jp/humumuu/20100319/1268964007

↑こちらのページを参考に、以下を実行。

# yum -y install yum-utils
# package-cleanup --oldkernels


これで古いカーネルが削除でき、/bootの使用量は15%まで下がりました。

SugarSyncは有料版から無料版にダウングレードできない

今月は一時的にファイル共有量が多いので、あまり深く考えず有料版30GBにアップグレードしました。

すぐに解約する予定なので、アップグレード後にメニューから有料版のダウングレード方法を探したのですが、見つけられません。

そこでFAQを探してみたら、ありました。

http://www.sugarsync.jp/support/answer.html#payment03

有料プランから無料プランへのダウングレードは行えません。


まじっすか。。(泣)

絶対後戻りできない一本道、アカウントごと解約するしかないみたいです。

まさかSugarSyncにこんな落とし穴があったとは、、、

SugarSync使ってる人で、有料版アップグレードを検討している人は気をつけましょう。

2011年7月20日水曜日

firefoxでタブを閉じる時のアニメーションをオフにする

最近一度chromeに浮気して、またfirefoxに戻ってきました。
chromeは爆速でいいんですが、自分的にはまだfirefoxのほうが使いやすかったです。

さてfirefox4から追加されたタブのアニメーション機能。正直ゴミ同然の機能です。
特にタブを閉じるときにワンテンポ間があって、その後アニメーションして消えるのがうざいです。

これを設定でオフにできることが分かったので、さっそくオフにしました。これでかなりすっきりします。

about:config

browser.tabs.animate

false

2011年7月18日月曜日

Pear::DBからMDB2への移行で修正した箇所

Pear::DBからMDB2への移行をしたのですが、けっこう面倒でした。
覚えている範囲でメモしておきます。

■DBへの接続

変更前
$db = DB::connect(DSN);

変更後
$db = MDB2::connect(DSN);
$db->loadModule('Extended');



■FETCHMODE定数の変更

変更前
$rs->fetchRow(DB_FETCHMODE_ASSOC)

変更後
$rs->fetchRow(MDB2_FETCHMODE_ASSOC)


■limit句

変更前
$db->limitQuery($sql, 0, 10);

変更後
$db->setLimit(10, 0);
$db->query($sql);



■quote関数

変更前
$db->quoteSmart($v["value"])

変更後
$db->quote($v["value"])


■その他

※MDB2ではexecuteMultipleで連想配列が使えないので注意。DBから値を取得して使う場合などは、MDB2_FETCHMODE_ASSOCじゃなくMDB2_FETCHMODE_ORDEREDを使うと良い。

※quoteSmartではnullを自動的に空白文字列化してくれていたが、quoteではその機能がないので、nullが入る可能性のあるカラムは予めnull化にしておく。

※上記修正の該当箇所はこんなふうにfindで調べました。

find . -name \*.php -print xargs grep limitQuery

2011年7月17日日曜日

Linuxでシンボリックリンクを張る

いつも引数の順番を間違えるのでメモしておきます。

ln -s リンク先のファイル 作成するシンボリックリンクのファイル

2011年7月15日金曜日

OpenPNEを2.14から3.3にアップグレード

OpenPNE2.14を使ってたんですが、既に主流は3系になっており、また2系はphp5.2以上では動作が保証されないということなので、面倒ですが3系にアップグレードすることにしました。


アップグレード手順はこちらを参考にしました。
http://www.openpne.jp/doc-upgrade-from-2x/


とりあえず深く考えず、手順通りにアップグレードを実施します。

が、案の定エラーがたくさん出てうまくいきませんでした。


ある程度時間がかかりそうな雰囲気だったので、腹をくくってアップグレードに取り組んでいきます。


・phpモジュールを入れる

そもそも動作環境が用意できてませんでした。yumでパッケージ入れます。

# yum install php53-xml
# yum install php53-gd


などを実行し、

# php -m

で指定のモジュールが入ってることを確認します。


・InnoDB化

$ ./symfony openpne:upgrade-from-2 --origin=2.14

を実行すると、SQLでエラーが出まくってました。
詳細は割愛しますが、テーブルが作れないとか、インデックスがどうのこうのとか言われました。

phpMyAdminでテーブルを見ると、もとからある2.14のテーブルはMyIsamで、新しく作られた3.3系のテーブルはInnoDBになってました。

ということは、InnoDBじゃないといけないのかな?と思ってググってみたらそのとおりでした。

http://d.hatena.ne.jp/shiku_otomiya/20110530/p1

というわけで、ALTER TABLEで2.14系のテーブルをInnoDBにします。

ALTER TABLE table_name ENGINE = InnoDB;

これでエラーが出なくなりました。


・php.iniの設定

アップグレード処理でメモリを使うみたいなので、一時的にmemory_limit=-1にしました。


・日記コメントの添付画像

アップグレード完了後、ログインして巡回してみたところ、日記コメントの添付画像が消えてるのに気付きました。

DBを見てみたところ、diary_comment.has_imagesのデータが移行できていなかったようなので、以下のように画像があるコメント調べてupdateしました。

select distinct diary_comment_id from diary_comment_image;

update diary_comment set has_images = 1 where id in (↑で抽出したid);



以上でアップグレード完了です。

多少手間取りましたが、勘と経験で乗り切ることができました。

2011年7月14日木曜日

facebookで特定の友達の投稿をニュースフィードから非表示にする

facebook、たまにログインして見る程度なんですが、いちおうアカウントは持ってます。

中にはすごい勢いで投稿しまくる人がいて、それがけっこうウザかったりします。

そこで役に立つのが、特定の人の近況のみをニュースフィードから非表示にする方法。

該当ユーザーの投稿の右上にある☓印をクリックすると、プルダウンで「○○○からの投稿を非表示にする」というのが出てくるので、それをクリックします。



もちろん非表示された側がそれを知ることはありません。

やり方がちょっとわかりにくいと思ったので、メモがてら記事にしておきます。

2011年7月8日金曜日

CentOS5でmod_sslの設定

こちらのページを参考にさせていただきました。

http://akibe.com/2010/10/centos-setup-20-ssl/

以下は作業ログ。

# yum -y install mod_ssl
# cd /etc/httpd/conf
# openssl genrsa -out server.key 2048
# chmod 400 server.key
# openssl req -new -key server.key -out server.csr
# chmod 400 server.csr
# openssl req -new -out server.crt -key server.key -x509 -days 10950
# chmod 400 server.crt
# vi ../conf.d/ssl.conf
SSLCertificateFile /etc/httpd/conf/server.crt
SSLCertificateKeyFile /etc/httpd/conf/server.key
# service httpd configtest

2011年7月7日木曜日

Ajaxデザインパターン

オライリーのAjaxデザインパターンを読みました。

が、イメージしていた内容とだいぶ違いました。。

この本でのデザインパターンというのは、Ajaxを使ったアプリケーションの形式(?)で、具体的には「XmlHttpRequestでサーバーからコンテンツを取得して、innerHTMLでDOMに挿入する」みたいな例が、最初から最後まで淡々と紹介されています。

自分はアプリケーションの設計パターンを学びたかったので、完全にミスマッチでした。


ちなみに本書のコンテンツは文字と絵がほとんどで、サンプルコードはほとんどありません。

技術者向けではなく、上流のエンジニア向けといった感じがします。

またAjaxが出始めた頃の本なので、初心者ならともかく、今となっては読んでもあまり得るところがありません。。

新品じゃなく、中古で買ったのが不幸中の幸いでした。

2011年7月6日水曜日

HTMLエンコードフォームを紹介していただきました

このサイトはだいたい1日のユニークユーザーが1000弱あります。

それが先週、突然その数字が跳ね上がっており、13001200という突出した日がありました。

また新しいbotでも来たかな?と思ってAnalyticsを見たのですが、botではなく、はてブで人気のwebクリエイターボックスさん経由のアクセスでした。


当サイトのHTMLエンコードフォームを、Web屋の私がブックマークしているサイト65というエントリで紹介していただいてました。なるほど、ここから来てたんですね。


自分もよく見させていただいてますが、さすが人気ブログ、集客力があります。

しかしこんな何年も前に作った超シンプルなツールが取りあげられるとは、意外でした。

でも、リンクしてもらえたのは素直に嬉しかったです^^

2011年7月2日土曜日

jqueryでAmazon商品情報をツールチップ風に表示

↓カーソルを乗せるとツールチップ風の小窓が表示されます。

JavaScript 第5版 jqueryドーナツ本 iPad2 アビイ・ロード

まずはphp側で、こんな風にtip=1がある場合は画像とタイトルだけを出力するようにします。
http://kawama.jp/php/amazon_products/?asin=4048684116&tip=1

そしてjqueryのhoverを使い、mouseover時にajaxで上記のデータを取得し、DOMに追加。
mouseoutの時にはDOMから削除します。

マウスオーバーのたびに$.getでデータを取得するのは無駄なので、キャッシュするようにしてみました。

//Amazon商品情報のチップを表示
var amazonProductsTip = function() {
var apt_cache = [];
$('a[href^=http://kawama.jp/php/amazon_products/?asin=], #amazon_products_tip').hover(
function(e){
e.stopImmediatePropagation();
var $this = $(this), $index = $this.index();
$(this).append('<div id="amazon_products_tip"></div>');
$('#amazon_products_tip').css({'padding-bottom':'5px', 'left':$this.offset().left+10+'px', 'top':$this.offset().top+12+'px'});
if(!apt_cache[$index]){ 
$.get($this.attr('href')+'&tip=1', function(data){ 
$('#amazon_products_tip').append(data);
apt_cache[$index] = data;
});
} else { 
$('#amazon_products_tip').append(apt_cache[$index]);
}
},
function(e){ 
e.stopImmediatePropagation();
$('#amazon_products_tip').remove();
}
);
}();


意外とあっさり実装できました。
なんか落とし穴がありそうな気がしますが、ひとまずここまでにしておきます。

2011年7月1日金曜日

FlickrとPicasa(とフォト蔵)

FlickrとPicasaを使ってみての感想です。
フォト蔵はちょっと覗いた程度ですが、いちおう入れておきます。

Flickr
ウェブでの写真管理が主。
ローカルの写真管理アプリはない。
アップロードツール(Flickr Uploadr)もあるが、イマイチ。
アップロード遅い。
年$25で無制限。

Picasa
ローカルでのファイル管理が充実。
逆にウェブアルバムはシンプル。
アップロード速い。
従量課金制。20GBで年$5~

フォト蔵
コンセプトはFlickrに近い。ただし機能数は少ない。
アップロードツール(貼る蔵)もあるが、Flickr Uploadr以上にシンプル。
アップロードは試してないので不明。たぶん遅いと思う。
完全無料


それぞれ一長一短ですね。
今はFlickrを使っていますが、今後ウェブアルバム機能が充実してくるようならPicasaへの乗り換えもあると思っています。

2011年6月30日木曜日

Flickr.NetとPowerShellでローカルからFlickrに一括アップロード

前回、Windows Liveフォトギャラリーを使ってFlickrに一括アップロードが安定していると書きましたが、ウソでした。途中で止まりました。

というわけでまた別の方法を。
Flickr.NetPowerShellを使います。

こちらのページを参考にさせていただきました。
http://d.hatena.ne.jp/itaosan/20110606/1307357514


PowerShellというのはWindows7以降で標準搭載されるシェルプログラムです。Vista、XPの場合は以下からDLしてインストールします。
アクセスはIEでしたほうが良いです。firefoxでDLしようとしたらWindowsGenuineナントカという認証が出てきました。

http://www.microsoft.com/downloads/ja-jp/details.aspx?FamilyID=30125a46-b97c-4704-aa10-605e809d5933


コマンドプロンプトを立ち上げ、以下でPowerShellが立ち上がります。

C:\>powershell
Windows PowerShell
Copyright (C) 2006 Microsoft Corporation. All rights reserved.


あとはSet-ExecutionPolicy RemoteSignedで権限変更し、バッチプログラムを走らせます。


現在も大量アップロードの真っ最中です。

そろそろ10時間くらい経ちますが、今のところまだ大丈夫のようです。

このまま止まらずにアップロードできると嬉しいんですが、、、

2011年6月29日水曜日

洗濯機は縦型、掃除機は紙パック式、テレビは2D

約5年前に買ったドラム式洗濯機「National NA-VR1000」が壊れました。

壊れたのはドアのロック部分。プラスチックの部品が折れてドアがロックできなくなり、洗濯できないという状態になりました。

保証も切れてるし、修理しても高くつくと予想されます。

そして何より、ドラム式に対して不満があったので、縦型に買い換えました。
新しく買ったのは日立のビートウォッシュ BW-9LVという機種。乾燥機能のない縦型タイプです。


ちなみにドラム式の不満とは「使用開始から徐々に乾燥が使えなくなり、あまりに乾かないので途中からほとんど使わなくなった」「頻繁に脱水が失敗する」などです。特に脱水が失敗するのにはイライラさせられました。

新しい物は良い!」と信じてドラム式を買いましたが、良いことはほとんど何もなかったです。強いていえば節水効果くらいですかね。


ドラム式洗濯機は、でかくて重くて、さらにパーツと可動部分が多いです。なので壊れやすいのは宿命なんじゃないでしょうか。
最近のドラム式はだいぶマシになったと言われていますが、それでもまだよく壊れるという話をよく聞きます。


今では、ドラム式は家電メーカーのマーケティング手法だったんじゃないかと考えてます。

縦型という完成された洗濯機では儲からないので、目新しくて値段が高くて壊れやすいドラム式を売りだしたんじゃないか、と。

サイクロン式掃除機なんかもこれと同じじゃないでしょうか。使ったことがないので性能の評価はできませんが、総合的にみて紙パックのほうが優れてるような気がします。

あと無理矢理すぎて消費者も乗ってきませんでしたが、3Dテレビも同じニオイがします。


この5年、不満を抱えながらドラム式を使い続けたことで、毎日使う家電は枯れた技術を使った製品を選んだほうが無難。ということを強く思いました。

というわけで、実用的な家電を愛する者として、「洗濯機は縦型、掃除機は紙パック式、テレビは2D」を強くオススメします。

2011年6月28日火曜日

Flickrを使ってみる

DropBox、SugarSyncなど、最近はいろいろなオンラインストレージサービスがあります。

さらにその中でも、写真に特化したオンラインフォトストレージというのもあります。

Flickr、Picasa、フォト蔵などがそれです。

これまでオンラインフォトストレージはあまり興味なかったのですが、たまたまFlickrが$25で容量無制限というのを知り、一気に興味が湧いて現在いろいろ試しています。


ちなみに自分の場合、5年分の子供の写真、合計数十ギガを保有しています。

これをFlickrにぶちこんでしまおう!と思って、さっそくアカウント登録し、$25支払ってProアカウントにアップグレードしました。

※Flickrは英語のみですが、使い方はなんとなくわかりました。


さあガンガン写真をアップロードするぞ!と意気込んでいましたが、そう簡単にはいきませんでした


アップロードがものすごく遅いんです。

試しに1600x1200の写真を1500枚一気にアップロードしてみたんですが、約9時間かかりました


たぶんFlickrは写真共有のためのサービスで、バックアップにはあまり向いていない気がします。


ちなみにまとめてアップロードするのもけっこう面倒です。
Flickr Uploadrというの公式アップロードツールがあるんですが、なんだか不安定です。2008年以降アップデートしてないので、ツールの開発には力を入れてないようです。

仕方ないので、Windows Liveフォトギャラリーというのを使って、ここからFlickrにアップロードしています。こちらは安定していますが、遅いのは変わらず。

相当帯域を絞ってるようですね。自分のようにバックアップ目的で使うユーザーに向けた対策なんでしょう。

ちなみに大量一括アップロードで垢バンされてる人もいるようです。
http://findaway-i.jp/web-service/flickr-accoun/334.html


というわけで、Flickrはメインのバックアップストレージとしては使えないということがわかりました。

既に$25払ってしまったので、とりあえずは補助的なツールとして使ってみようと思います。

2011年6月24日金曜日

JavaScript 第5版(サイ本)

分割したサイ本、読み終わりました。

序盤のjavascriptコアの部分は大いに参考になりました。

ただ終盤はxmlとかcssとか、domとか、javascriptと直接関係のない記述が多く、またそのあたりは既に別の本で学習済みだったのでほとんど読み飛ばしました。

あとはサンプルコード。
これはオライリー系全般に言えることなんですが、基本的に文系脳なので、"フィボナッチ関数"とかの処理を実装コードを見ても、頭にスンナリ入って来ないんですよね。。
著者にもよると思いますが、できたら車とか、食べ物とか、わかりやすいたとえを使っていただけるとありがたいです。


ひとまず読み終わりましたが、javascriptの理解は少しだけしか深まっていないと思います。
今は本を読むよりも、手を動かすべき時なのかもしれません。


とりあえず次はAjaxデザインパターン ―ユーザビリティと開発効率の向上のためにを読んでみようと思ってます。

この本も分厚いので分割して読むつもりです。
なお今回は古本を買いました。(分割するのに新品を買うのもちょっと勿体無いと思ったので)

2011年6月22日水曜日

エクセルで日付の差分を求める

datedif関数が使えます。

datediffじゃなくてdatedifです。



第3引数には"Y"、"M"、"D"が使えます。

2011年6月21日火曜日

CSSのclipプロパティを使ってみる

clipというCSSプロパティがあるのを知り、おもしろそうなのでちょっと使ってみました。

サンプル:CSSのclipを使ってみる

画像だけじゃなく、block要素にも使うことができます。

うまく弄ればCSSスプライトみたいに使えそうな気がします。

2011年6月19日日曜日

jqueryで月別アーカイブを年ごとの開閉式メニューにする

このブログのサイドバーの月別アーカイブですが、さすがに6年分ともなるとリストが長く、見苦しいので、jqueryで開閉式のメニューにしてみました。

ソースはこんな感じです。


var rebuildMonthlyArchives = function() {
var mnYearArr = [];

//1.月別アーカイブのリストを走査し、jquery要素を年別に配列に格納
$('#archives ul li a').each(function(){
var $this = $(this),
$this_year = $this.attr("title").substring(0,4);
if(typeof(mnYearArr['mn'+$this_year])==="undefined"){
mnYearArr['mn'+$this_year] = [];
mnYearArr['mn'+$this_year] = $('<li><span class="expand">'+$this_year+'年</span><ul class="monthly"></ul></li>');
}
mnYearArr['mn'+$this_year].find('ul.monthly').append($this.parent());
});

//2.新たにjquery要素を作り、1で配列に入れた要素を入れ、最後に#archivesに戻す
var $jq_obj = $('<ul></ul>');
for (var mni in mnYearArr) {
$jq_obj.append(mnYearArr[mni]);
}
$('#archives ul').remove();
$('#archives').append($jq_obj);

//3.見た目をよくする
$('#archives ul li span.expand').click(function(){
$(this).next().toggle();
if($(this).next().css('display')=="block"){ $(this).css("background-image","url(/imgs/btn_minus.gif)"); }
else{ $(this).css("background-image","url(/imgs/btn_plus.gif)"); }
});
};


ちょっと冗長な感じがするのでもっと短くしたいのですが、とりあえず今回はここまでにします。

あとwpのタグはこうなってます。


<li id="archives">月別アーカイブ
<ul>
 <?php wp_get_archives('type=monthly&show_post_count=true'); ?>
</ul>
 </li>
<script type="text/javascript">rebuildMonthlyArchives();</script>

2011年6月17日金曜日

Canonのインクジェット複合機 PIXUS MP280がすごい

先週、我が家のプリンタCanon BJ S500が突然臨終してしまいました。
電源は入るものの、PCから認識してれないという症状で、印刷ができなくなってしまいました。

約10年、よく頑張ってくれました。ノズルが詰まって色が出なくなった時、プリントヘッドを水洗いして復活させたりしたのもいい思い出です。


さすがに修理して使う気はないので、新しいのを探しました。

ヤマダ電機のチラシをネットで見ていたら、Canon PIXUS MP280というが限定5台で6280円。
kakaku.comで見てもこの値段はお買い得のようなので、すぐにヤマダ電機に行って購入しました。(ヤマダのポイントはもらえませんでした)



さっそく自宅に持ち帰って設置。
いやー、すごいです。

何がすごいかと言うと、、、

☆安い!

6280円でプリントはもちろん、スキャナもコピーもできてしまいます。

10年前はインクジェットプリンタも最低20000円くらいはしたもんですが、いい時代になったものです。


☆開く!

手前のフタ(用紙受け)を閉じたままで印刷を開始すると、なんと勝手にパカッと開いてくれます。
まあたいしたことではないんですけど、勝手にパカッと開いてびっくりしたので印象に残ってます。


☆高い!

高いんです。インクが。





しかも減りが早いそうです。
さらに互換品もありません

最近のCanonのインクはICチップがついていて、互換品を排除してるんだとか。

なるほど、だから本体をこんなに安くできるんですね~。Canonもなかなかアコギなことをします。

まあ我が家の場合、プリント枚数も少ないしほとんどモノクロなのでインクが高くてもそれほど困ることはありませんし、むしろコピーとスキャンができてこの値段なので大満足です。

とりあえず、これからプリンタを買う人はそのあたりに気をつけたほうが良さそうですね。

2011年6月11日土曜日

scpコマンドでファイルをサーバー間コピー

たまに使うときいつも忘れるのでメモっておきます。

リモートホストからファイルをコピー
$ scp username@remote_host:path/to/getfile.txt path/to/local/savedir

リモートホストからディレクトリごとコピー
$ scp -r username@remote_host:path/to/getdir path/to/local/savedir

ローカルからリモートにコピー
$ scp putfile.txt username@remote_host:path/to/remote/savedir

ポート番号を指定
$ scp -P 10022 putfile.txt username@remote_host:

2011年6月1日水曜日

オライリーの分厚い技術書を分割し、携帯性を高める 後編

前回は練習でしたが、今回はいよいよ本番、サイ本を切ります。

こちらがサイ本、ズッシリ重みがあります。



さっそくカットしていきます。



いきなり失敗しました。



なんか手応えが変わったな~と思ったら、案の定ページを削ってしまっていました。。

その後ページを削らないよう、丁寧に進めてみましたが、気をつけてもやはり少し削れてしまうので、やり方を変えました。
本を開いた状態で刃を入れていきます。



正直こっちのやり方のほうがやりやすいです。
ただ、こちらのやり方でも、少しでも手元が狂うと1ページ目が切れてしまいます。



まあこの程度は仕方ないと思って割り切ります。
テープで止めてもいいし、もしくは裁断機で背表紙をとってしまったほうが見た目はきれいですね。バラバラになってしまう恐れはありますが。

で、最終的にこのようになりました。



見た目はあまりきれいではないですが、致命的なミスはなかったし、満足しています。

というわけであとはひたすら読むのみ。

これから読んでいく上で気がついた点などあったらまた報告したいと思います。

2011年5月31日火曜日

オライリーの分厚い技術書を分割し、携帯性を高める 前編

最近はjqueryとjavascriptの勉強に力を入れています。

本を買って読んだり、ウェブで情報を見たりといろいろしてますが、いかんせん基礎をしっかり勉強していないので、未だに理解が浅い状態です。

というわけで、javascript勉強の定番、オライリーのサイ本こと、JavaScriptをぜひ読んでみたい!と思っていました。


が、このサイ本、ページ数が700、本の厚みが3.6cm、さらに測っていませんが、ズッシリとかなりの重さがあります。

なので通勤中にさっと取り出してさっと読む、みたいなことは到底できません。


最初、ipadを買って電子書籍版を入れて読もうかと思ってました。

が、それだけのためにipad買うのもちょっと勿体無いし、ipad自体600gあってそれなりに重いです。
なので購入に二の足を踏んでいました。


そこで考えたのが、本を切って分割する方法です。

中学生の時、学習塾に通っていたのですが、通称電話帳と呼ばれる、厚さや大きさが電話帳そっくりな問題集があって、その問題集を英・国・数で三分割して使っていたことがあります。

その問題集はオライリーに比べて紙も装丁も品質が低いですが、切って三分割にした状態でも1年間の使用に耐えたので、たぶんサイ本でもいけるんじゃないか、と考えました。

とはいっても4000円以上するサイ本を切り刻むのにはやはり抵抗があります。


が、「男は度胸、なんでも試してみるさ!」ということで、思い切って実行してみました。




・・・でも、念のため事前に練習しておきます。

以前読んだJavaScript: The Good Partsに練習台になってもらうことにしました。



こんな感じになりました。



このままだと少し心もとないので、読むときにはこういうクリップで留めます。




カッターの刃が一部錆びて切れ味が悪くなっており、その部分で切ったところがガタガタになってしまいました。

でも、うまく分割できそうな手応えは感じました。刃の切れ味さえ気をつけておけばいけそうな雰囲気です。

というわけで、意を決してamazonでサイ本をポチりました。

次回、いよいよサイ本に刃を入れます。

2011年5月24日火曜日

TryWimaxを試しました

Wimaxにちょっと興味があっていろいろ調べていたら、TryWimaxというお試しサービスがあったので、使ってみました。

まずはウェブのフォームから申し込み。氏名や住所のほか、クレジットカード番号も入力させられます。
カード番号は借りパク対策用みたいで、申込後に19800円分のオーソリがかかっていました。

金曜日に申込をして、端末が自宅に届いたのが火曜日でした。ちなみに自宅は東京の練馬区です。
今回借りた端末はURoad-7000SSというルータータイプです。

さっそく自宅で試したところ、0.8Mbps程度でした。
なお自宅はマンションで、最寄り駅まで徒歩15分。すぐ隣に畑があるような場所なので、繋がっただけでも喜ぶべきかもしれません。
その後図書館、マクドナルド、勤め先2箇所(新宿と中野)など、何箇所かでテストしてみましたが、どこも0.8Mbps程度で、練馬の図書館に至っては全くつながりませんでした。



中野での計測結果

駅から数百メートル離れており、さらに基本的に屋内なのでどうしても電波が弱くなってしまうようです。


都内ならだいたいどこでも繋がる、と勝手にイメージしてたので、この結果はちょっと意外でした。

でもこういう無料でお試しできるサービスがあるのはすごくいいですね。数年後、サービスエリアがさらに拡充してきたらまた試してみたいと思います。

2011年5月19日木曜日

jqueryの.load()は引数を与えるとPOSTで送信する

.load()の第二引数で、url(php)に引数を付加するのですが、その引数がphpにわたらない、という状況に遭遇しました。

実は.load()は、デフォルトではGETで送信するのですが、引数がある場合は自動的にPOSTで送信する仕様になっています。

今回、php側では$_GETを使って引数を取得していたので、当然引数は受け取れません。

この仕様に気がつかず、しばらく悩むことになりました。
最初から$_REQUESTで作っておけばよかった。。

2011年5月15日日曜日

CSSだけで吹き出し

吹き出し、ツールチップみたいなものを作りたいと思い、検索してみました。

探すとjqueryのプラグインとかいろいろ出てきますが、できればなるべくシンプルなものが良いと思ってたところ、cssだけで実現してるサンプルがありました。

CSS のみで吹き出し

ieだとborder-radiusが効きませんが、それ以外はまったく問題なし。
今後いろいろな場所で使わせていただこうと思います。

2011年5月12日木曜日

Gmail(IMAP)でもThunderbirdのメッセージフィルタを使う

現在Gmail(IMAP)+Thunderbirdの環境を構築しています。

基本的にメールのフィルタはGmailで設定していますが、細かい設定はThunderbirdでのフィルタのほうが便利です。

というわけでGmailのフィルタとThunderbirdのフィルタを併用しています。

が、Thunderbirdのメッセージフィルタは、受信トレイに入ってきたメールのみ自動で適用されるという仕様になっており、そこが悩みの種でした。

この問題を回避する方法も、ありました。

http://d.hatena.ne.jp/Rockridge/20100111/1263175543

about:configで

mail.server.default.applyIncomingFilters = true

以上。

これでまたさらに快適な環境に、、、なったと思いきや、まだ受信トレイのメールにしかフィルタが適用されてません。なぜだろう。。。

上記ページの元ネタであるhttp://blog.mozilla.com/bcrowder/を見てみたところ、

(It’s important that the key be a string), and you’ll get filtration in all of your IMAP folders.


と書いてあるのを見つけました。
真偽型じゃなくて文字列型じゃないといけないそうです。「true」って書いてあったので条件反射で真偽型にしてました。しかも、よくみたら日本語ページのほうにもちゃんと「文字列型で」と書いてありますね。

というわけで、改めて文字列型で設定しなおしたところ、無事フィルタが受信トレイ以外でも適用されるようになりました。

2011年5月8日日曜日

Gmailの迷惑メールフィルタを無効化する

自分はGmailアカウントからGmailアカウントへメールの転送をしています。
仮に転送元のGmailアカウントをA、転送先のアカウントをBとします。

困ったことに、Aでも迷惑メールフィルタが有効になっていて、たまに大事なメールがBに転送されない、ということが起こっていました。

が、Gmailには迷惑メールを無効にするという設定が存在しません。

これは困った、、、と思ってググったら、回避策が見つかりました。

http://www.nilab.info/zurazure2/000960.html

アカウント設定での転送は使わず、フィルタで全メールを転送させるというやり方です。なるほどなるほど。

さっそく自分の環境にも導入し、問題は解決。一件落着です。


*2012/2/28追記
この方法、Gmail側が仕様変更したようで、使えなくなってました。
http://groups.google.com/a/googleproductforums.com/forum/#!topic/apps-ja/hIxfpp_50l0

仕方ないのでフィルタでの転送はやめ、今は通常のメール転送機能を使ってます。

うまくやれば今まで通りフィルタで転送できるかもしれませんが、今のところ決定打はないようです。
https://groups.google.com/a/googleproductforums.com/forum/#!category-topic/gmail-ja/wEdYXTzG2Eg

2011年5月4日水曜日

Skydriveを試す

Microsoftのオンラインストレージ、Skydriveを使ってみました。

正直今後メインのストレージとして使うイメージが持てなかったので、本当に少ししか触っていませんし、調べてもいませんが、いちおう簡単にまとめてみました。

・デフォルトで25GBのフリースペースがある。dropboxやSugarSyncと比較して圧倒的に容量が多い

フォルダごとアップロードができなくて不便

・SkyDrive Explorerというクライアントアプリが便利らしい。

・dropboxやSugarSyncと違い、デフォルトでファイルの同期機能はない

・が、Windows Live Syncというクライアントアプリを使うと同期できるようになるらしい。

・なんか色々と分かりにくい

といった感じ。
無料容量25GBというのはかなり魅力です。

50MB以下で、
使う機会が少なく、
詳細なフォルダ分けをしていない

といったファイル群があるなら検討する価値はあると思います。

2011年5月3日火曜日

Thunderbird+Gmail(IMAP)がいい感じ

Gmail(IMAP)+Thunderbirdですが、受信トレイをスキップしたメールも新着チェック対象にするをやってから、すごくいい感じで使えてます。

以前のpop+becky!とほぼ変わらない使用感です。
Thunderbirdは重い!という話をよく聞きますが、それほど重いとも感じません。

そんなわけでまったく不満なし。

それどころか、サーバーにデータが保管されているという安心感と、さらにネットにつながってさえいればいつでもどこでもGmailにウェブアクセスできるという利便性がくわわったので、非常に満足しています。

移行作業はけっこう手間でしたが、それに見合う価値はあったと思います。

2011年5月2日月曜日

Yahoo!検索WebAPIも利用制限が始まっていた

昔作って放置していたサイトを久しぶりに見たら、Yahoo!の検索APIを使ってる部分が表示されていないことに気が付きました。

で、Yahoo!デベロッパーネットワークに行ってみたら、案の定、利用制限についてのアナウンスが出てました。

http://developer.yahoo.co.jp/webapi/search/premium.html

24時間中、1つのアプリケーションIDにつき1,000件


だそうです。うーん、少ない。。。Googlebotが来たら1~2時間程度で消化してしまうレベルです。

少し前にAmazon PAAPIでもアクセス数制限が導入されましたが、ポータルが提供するAPIは、膨大な負荷になってしまうんでしょう。


「1日1000件では少ない!」という人のために、アップグレード版というのが新しく作られています。

条件は以下。

(1)Yahoo!プレミアム会員、Yahoo! BB会員、Yahoo!ウォレットのいずれかに登録する
(2)アプリケーションIDの登録画面にてアップグレード版検索API専用アプリケーションIDを取得する
(3)アップグレード版検索APIを利用する


自分の場合、Yahoo!ウォレットに登録済みだったので(1)は既にクリアしてました。

(3)は、APIのURLを変更しろ、ということなので、ソースを修正。

そして(2)がちょっと分かりにくかったです。少し迷ってしまいましたが、「アップグレード版検索APIを使う用に、新しくデベロッパーネットワークを登録しなおせ」ということをようやく理解し、新たにIDを発行し、APIキーを差し替えました。





すべて完了すると、無事アップグレード版検索APIを使うことができるようになりました。


とりあえずの対応はしましたが、根本的な対策として無駄なアクセスを極力少なくする努力は継続しないといけないですね。
節電にもなりますし。

2011年5月1日日曜日

.htaccessでベーシック認証とIP制限を併用する

あるウェブページにベーシック認証をかける、ただし特定IPからのアクセスの場合はベーシック認証はスルーさせる

というのをやろうと思い、調べました。

http://private.ceek.jp/archives/001741.html

目新しいのは「Satisfy Any」の一行だけですね。

頭の引き出しの中に入れておくとちょっとした時に役に立ちそうです。

2011年4月28日木曜日

GoogleジオコーディングAPIを使ってみる

仕事絡みで使うことになりそうなので、GoogleMapsのAPIについて少し勉強しました。

APIといってもかなり多彩で、JavaScript用やFlash用など、いろいろありますが、とりあえず今回は定番のjavascript用のドキュメントを読みます。
なお、最新版はAPIバージョンが3になってるようです。amazonでGoogleMaps系の本を調べてみましたが、バージョン2のものが多いようでした。

で、GoogleジオコーディングAPIの話になります。

ジオコーディングという聞きなれない単語が気になって調べてみたのですが、住所を緯度経度に変換してくれるというものでした。
このAPIがあれば、住所情報さえあれば、GoogleMapsでマーカーなんかを配置するのに必要な緯度経度情報が取得できるというわけです。

たとえば「東京都墨田区横網1-3-28」の緯度経度を知るには、

http://maps.google.co.jp/maps/api/geocode/json?sensor=false&address=%E6%9D%B1%E4%BA%AC%E9%83%BD%E5%A2%A8%E7%94%B0%E5%8C%BA%E6%A8%AA%E7%B6%B21-3-28

という具合に、住所をURLエンコードしてAPIのURLを叩けばOK。

なお上の例はjsonでデータを取得してますが、xmlでも取得可能です。

http://maps.google.co.jp/maps/api/geocode/xml?sensor=false&address=%E6%9D%B1%E4%BA%AC%E9%83%BD%E5%A2%A8%E7%94%B0%E5%8C%BA%E6%A8%AA%E7%B6%B21-3-28

認証も必要なく、手軽に使えていい感じです。

なお「両国国技館」みたいな固有名詞から緯度経度を取得したいなー、とも思って調べてみたのですが、こちらはまた別のGoogleプレイスAPIを使う必要があります。
こっちは認証が必要になるので、また別の機会に調べてみようと思います。

2011年4月23日土曜日

SugarSyncをmp3保管庫として使う

SugarSyncを試しています。
多機能だし転送速度もそれほど遅いわけでもなく、かなり良い感じです。ただ、データ共有相手との兼ね合いもあるので、仕事関係ではdropboxを使い続けています。


それはさておき、SugarSyncにはウェブアーカイブという機能があることを知りました。

これはクライアントPCにはデータを残さず、SugarSyncウェブ上にデータをアーカイブしておくという機能。

PC上のファイルって、ほとんどがたまにしか使わないようなデータで、そいつらをウェブにアーカイブしておけるというわけです。これはかなり使えそう。

自分の場合、mp3を13GBほどローカルに持っていて、そのうちの大半はたまに、もしくは滅多に聞かないような曲ばかり。
とりあえずそれらの一部(約3GBほど)をSugarSyncのウェブアーカイブフォルダに放り込んでみることにしました。

ファイルの転送は全部で半日くらいかかりました。まあこんなもんですかね。

それとSugarSyncにはSugarSyncプレーヤーという音楽再生機能もあって、アップロードしたmp3をブラウザ上で再生可能だったりします。これもかなり便利。

とりあえず、このまましばらくSugarSyncをmp3倉庫として使ってみようと思います。

2011年4月20日水曜日

SugarSyncを試す

Dropboxの競合と言われる、SugarSyncを試してみました。

競合と言われる通り、Dropboxとほぼ同じです。

大きな違いは、SugarSyncにはエクスプローラーライクな管理画面があること。
この管理画面を使うことで、Dropboxよりも複雑な共有等の設定ができるようになっています。

あとは容量の違い。SugarSyncは無料アカウントでも5GB使えます。
後発だけあって、Dropboxの2GBに比べてサービスが良いです。あと有料会員に付与される容量もSugarSyncのほうが多いです。

ファイル転送はまだあまり試してませんが、転送速度にそれほど差がなければ、これから使うならSugarSyncのほうがオススメです。
※その後約3GBほどのファイルをアップロードしてみましたが、けっこう早かったです。

2011年4月19日火曜日

Evernote導入を検討する

最近はてぶ等で話題のEvernoteの導入を検討しています。

今年はいわゆるデータのクラウド化ってやつを進めようと思っていて、とりあえずメールのGmail化から手を付けてみたわけですが、次はドキュメントのクラウド化でEvernoteを考えてます。


とりあえずアカウント登録してWindows用クライアントもインストールしてみましたが、なかなか良い感じです。

自分はDropboxを仕事で使っていて、チーム内でデータを共有してますが、Evernoteは個人でのデータ管理を強化するツール、という印象を持ちました。


しばらく使ってみましたが、まず思ったのが、Evernoteはプレミアム会員にならないとほとんど使えない、ということ。

無料会員はtxtやpdfなど、限られたファイル形式しかEvernoteに放り込むことができません。

xlsとかpsdとか、仕事で使うようなファイルタイプはプレミアム会員にならないと扱えないのです。

月額$5なので、その程度なら支払ってもいいんですけど、プレミアム会員でも月に1GBまでしか転送できないというのがちょっと少ないと思うんです。

これが2~3GBくらいあるなら、写真とか比較的容量の大きいファイルのストレージも兼ねさせることができるので、即契約しちゃうんですけどね。

まあEvernoteって言うくらいだから、基本的にはテキストドキュメントが対象なんでしょう。そう考えると今後転送量制限が増えることはあまり期待できないかもしれません。


毎月500MB~1GB程度のデータが継続的に増え続ける、という人にとってはEvernoteはかなりお得なんじゃないかと思います。

とりあえず本格的な導入は見送り、他のオンラインストレージサービス等も調べてみようと思います。

2011年4月16日土曜日

Thunderbird+Gmail(IMAP)で、受信トレイをスキップしたメールも新着チェック 対象にする

タイトルのまんまです。
Thunderbird+Gmail(IMAP)のデフォルト設定のままだと、フィルタを使って受信トレイをスキップしたメールは新着メールチェックで拾ってきてくれないのです。

自分の場合、@gmail.com以外のメールは受信トレイをスキップし、ラベルをつけてアーカイブしてます。

新着チェックは10分間隔で自動で行われるんですが、受信トレイに入らないメールはチェック対象外になってしまうようで、困っていました。

で、ググって解決方法を発見。

http://piro.sakura.ne.jp/latest/blosxom/mozilla/thunderbird/2009-11-17_imap.htm


とりあえず、「about:configでmail.check_all_imap_folders_for_newを探して値をtrueにする。」をやっておけばOKでした。

ちなみにThunderbirdのabout:configは、「ツール→オプション→詳細→設定エディタ」にあります。

※追記
mail.check_all_imap_folders_for_new
は最新バージョンでは
mail.server.default.check_all_folders_for_new
に変わったそうです

2011年4月15日金曜日

firefoxでタブが意図せず別ウインドウになってしまう問題を解消

数週間前くらいから、firefoxを使っている時に別ウインドウが開いてタブが勝手に別ウインドウに移動してしまう、という問題に悩まされていました。

不便だと思いつつもそのまま使い続けていたんですが、「firefox タブ 別ウインドウ」でググってみたところ、同じ問題で悩んでる人がけっこういることがわかりました。

解決策はこれ。

Disable detach and tear off tab

既知のバグ(バグ仕様?)が原因のようで、それを解消するアドオンが出てました。

アドオンを入れて再起動したら、あのウザい別ウインドウはもう開かなくなりました。ああよかった。

ていうかieやchromeとのシェア争いが激しい中、こんなバグ出してたらかなりマイナスなんじゃないかと思います。。

2011年4月11日月曜日

greasemonkeyでのページ内のフォーム要素が取得できない

greasemonkey用のコードを書いている時、ページ内のform要素が取得できない、という状況に遭遇しました。
いろいろ試してみたんですが、どうしてもform要素がundefinedになってしまいます。

そこでググってみたところ、こちらの記事を発見。

http://d.hatena.ne.jp/hysa/20090813/1250175628

解決方法はこの記事のコメント欄にあります。

とりあえず unsafeWindow.document.form... としてこの場は乗り切りました。

2011年4月8日金曜日

chromeでgreasemonkey(ユーザースクリプト)を使う

firefoxでgreasemonkeyをよく使ってるんですが、chromeでも使えることを最近知りました。
なおchromeではgreasemonkeyの呼称ではなく、ユーザースクリプトと呼びます。

さっそく試してみました。

インストールは、

・Web上で公開されてるユーザースクリプトをダウンロードする
・ローカルのユーザースクリプトをchromeにドラッグ&ドロップする

だけ。簡単です。

インストールしたスクリプトは、WinXPだと以下のフォルダに格納されます。

C:\Documents and Settings\ユーザー名\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions

試しにfirefoxで使っている自作のスクリプトをインストールしてみましたが、chromeでも問題なく動きました。


ただ、greasemonkeyとはけっこう違いがあります。
特に自分の場合困るのは「@requireなどのgreasemoneky独自の機能がない」という点。

jqueryをrequireして使ってるスクリプトが動かなくなってしまうので、書き直しが必要になってしまいます。

このあたり、今後改善されてくるといいんですが、当分は各ブラウザを使い分けて対応するしかないですね。

2011年4月6日水曜日

javascriptでURLを解析するライブラリ「parseUri」

javascriptでurlをパースできるライブラリないかな~と思ってググったらいいのがありました。

http://blog.stevenlevithan.com/archives/parseuri

var pu = new parseUri(window.location.href);
alert(pu.path);


みたいな感じで使います。

使えるプロパティはデモページで確認できます。すごくわかりやすいです。

http://stevenlevithan.com/demo/parseuri/js/

2011年4月3日日曜日

Gmailに乗り換え2 Gmailの設定やメールデータ移行など

その1ではAppsの設定をしましたが、今回はGmailの設定です。

・まずはラベルフィルタを用意。

ラベルはフォルダのようなもので、フィルタは振り分け機能という感じです。

・ラベルは表示順をソート出来ないので、ソートしたい人は「01_****」とか「09_****」みたいな感じで頭に数字を振っておくといいと思います。自分はそうしてます。

・デフォルトではラベルのツリー表示ができませんので、設定Labsからラベルのネストを有効にし、ツリー表示をONにします。

Fromでkawama.jp@gmail.com以外のアドレスを使いたいので、設定アカウントとインポートから別のアドレスからメッセージを送信でFrom用のアドレスを登録しておきます。

サーバー側の設定はだいたいこのくらい。


続いてクライアント。
BeckyのメールデータをGmailに移します。

・BeckyにGmailアカウントをIMAPで追加。

・これまでにpopで受信したメールデータを、ドラッグ&ドロップでGmailアカウントへ移動します。けっこう時間がかかるので、量が多いなら夜寝てる間とかにやるといいです。あとフォルダごと移動ができないので注意。

・ついでにThunderbirdも試してみました。当たり前ですが、IMAPだとアカウントの設定だけすればいいので楽ですね。

・2~3年くらい前にGmailをIMAPで使ってみたことがあるんですが、そのときに比べてかなり便利になったような機がします。

・IMAPで使うのもいいですが、やはりWebインターフェースが一番機能豊富です。最終的にアカウントをひとまとめにしたらchromeをGmail専用ブラウザとして使ってみてもいいかな、なんてことも考えてます。


以上です。

ここまでやってしまうともう後戻りはできません。

ひとつ腹をくくって、これからはGmailを使いこなせるよういろいろ試していこうと思います。

Gmailに乗り換え1 Appsでメール設定

Gmailへの乗り換えを行いました。

これまでずっとpop+smtp、メールクライアントはBecky。という体制でやってきました。

が、いまやGmailも進化しまくって使いやすくなってるので、いずれは移行しないとな~、とは思っていました。

今回、震災や計画停電があって、ローカルにメールデータ置いておいても電気食うし、サーバーにデータ置いておいたほうがいろいろ安心なんじゃないかと思って、移行することにしました。


・まず最初にGmailアカウントを作成。仮に kawama.jp@gmail.com とします。

・今後はgmail.comのアドレスをメインにするのですが、自分の場合 ***@kawama.jp のアドレスもよく使うので、こちらをgmailへ転送する必要があります。

・今はこのブログが乗っているcoreserverのpopとsmtpを使っているので、そのまま転送してもいいのですが、せっかくなのでGoogleAppsのメールを使ってみることにしました。

・というわけでGoogleAppsに登録。もちろん無料プランで。

・Appsのメールを使うには、まずmxレコードを割り当てる必要があります。

・自分はvalue-domainを使ってるのですが、なんとAppsのヘルプページにvaluedomainでの手順が掲載されてました。

・これです→http://www.google.com/support/a/bin/answer.py?hl=ja&answer=115059

・指示通りに設定。しばらくしてからnslookup -type=mx kawama.jpでMXレコードが切り替わっているのを確認したら設定完了。

・せっかく設定したAppsメールですが、あくまで転送専用なので、kawama.jp@gmail.comへの転送設定をしておきます。


とりあえずこれでAppsでの作業は終了。

次はGmailの設定とメールデータの移行です。

2011年3月25日金曜日

項目が多いセレクトメニューを見やすくしてくれるjqueryプラグイン「 jQselectable」

http://5509.me/sample/jQselectable/

普通のセレクトメニューを、見やすく且つおしゃれにしてくれるjqueryプラグインです。かなりいい感じです。

cssが階層化してあるで、自分のサイトにあわせてデザインを変更したりする際は少し面倒な感じかしますが、項目数の多いセレクトメニューなどをこれで置き換えることができれば確実にユーザーフレンドリーになると思います。

2011年2月25日金曜日

JSDeferredでjavascriptの非同期処理の問題を解決

javascriptは非同期処理が基本です。
プログラムを上から下に順番に記述しても、それが必ず順番通りに実行されるわけではありません。

簡単な処理を作るときには問題になりませんが、Aを実行した結果によってBまたはCを実行する、みたいな処理がある場合、Aの実行が終わるまで待ったずに条件分岐を行ってしまう、というようなことがよく起こります。

これを解消するためにコールバックを使うのですが、扱いがけっこう面倒です。

そこでJSDeferredが登場します。

http://cho45.stfuawsc.com/jsdeferred/doc/intro.html

Deferを辞書で調べたところ、読みは「ディファー」、意味は「延期された; 繰延べ扱いの; 据え置きの」と出ました。

これは公式サイトのサンプルコード。

next(function () {
alert("Hello!");
return wait(5);
}).
next(function () {
alert("World!");
});


こう書くことで「Hello!(5秒停止)Worlds!」という実装ができます。すばらしい!

javascriptはめざましい進化を遂げて活躍の場も増えており、コードの量も増え、処理も複雑化してきているので、こういうライブラリはコーディングする者にとって本当にありがたいです。

2011年2月23日水曜日

console.log()を外し忘れてもieでエラーを吐かないようにする

console.log()。
firefox+firebugで使えるjavascriptのログ出力機能です。javascriptのコーディングでは常に利用してます。

非常に便利な機能ですが、ieでは使うことができません。console.log()を残したままでieでページを開くとjavascriptエラーが出てしまいます。当然リリース時などにはconsole.log()はすべて外しますが、開発途中でieでの動作チェックをする際などはいちいち消すのも面倒です。

そこで何か良い解決方法はないかと探していたら、こちらのページを見つけました。

http://manjiro.net/javascript/113_javascript_ie_consolelog

なるほど、シンプルな解決策です。
他にもいろんな方法でログ出力の改良をしてる方がいるようですが、とりあえずこの形から入ってみようと思い、自分の開発環境に導入してます。

2011年2月22日火曜日

jqueryでinputフォームの現在のカーソル位置(キャレット)を取得

したいんだけど、プラグインとかないかな~、と思って探していたら、ありました。

http://d.hatena.ne.jp/tubureteru/20110101/p1

さっそく使ってみましたが、いい感じです。

さらに別のプラグインも発見。

http://d.hatena.ne.jp/ja9/20100917/1284146159

こちらは選択範囲を取得して処理するプラグインですが、getCaretPos()というメソッドを使うことでキャレットだけ取得することも可能。


ちなみに文字の入力位置のことをキャレットと言うそうです。
ググるときに役に立ちました。

2011年2月20日日曜日

jqueryでドラッグ可能なダイアログを作る(ipop_multi.js)

を用意することになりました。

最初jquery uiのDraggableを使おうかと思ったのですが、単純に小窓を開いてグリグリ動かせれば良かったので、こちらのプラグインを使わせていただくことにしました。

ipop.js

が、途中で仕様変更があり、同時に複数ダイアログを開くことが必要になりました。

仕方ないのでipop.jsに少し手を加えさせていただき、複数ダイアログに対応させてみました。ipop_multi.jsと名付けました。

せっかくなのでサンプルとソースを置いておきます。良かったらお使いください。

サンプル:ipop_multi.js

ipop_multi.jsソース

2011年2月19日土曜日

JavaScriptオブジェクト≠JSON

phpのjson_decode関数でJSONデータを配列に変換しようとしたがうまくいかず、nullが返されてしまうということがありました。

json_last_errorというので調べてみたところ、「JSON の形式が無効、あるいは壊れています」と言われます。

デコードしようとしたJSONデータはこんな感じです。

{hoge:123, uho:"iiotoko"}

もしかしたら、、と思ってキーの文字列をダブルクオートで囲んだら、ちゃんとデコードされることがわかりました。

実はjson_decodeのマニュアルにこの事に関する記述があって、「json_decode()でのありがちな間違い」として具体例が出ています。こんな感じです。

○ $bad_json = '{ "bar": "baz" }';
× $bad_json = "{ 'bar': 'baz' }";
× $bad_json = '{ bar: "baz" }';
× $bad_json = '{ bar: "baz", }';


そのくらい大目に見てくれよ、、、という感じもしますけど、とにかくこの形式じゃないとダメということです。

2011年2月18日金曜日

jqueryで要素のindexを取得する

こんなリストがあって、

<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
</ul>


何番目の要素をクリックしたかindex番号を取得したい時はこうします。

$("ul li").click(function(){
console.log($("ul li").index(this));
});

2011年2月17日木曜日

jqueryのhoverイベントをunbindする

jqueryを使っていて、hoverイベントをunbindすることがありました。

が、hoverは他のイベントと違って

$('#hoge').unbind('hover');

のようにはできません。

さてどうしたものか、、、と思ってググると以下のページを見つけました。

http://d.hatena.ne.jp/tilfin/20080615/1213608859

先に答えだけ書いてしまうと、

$("#hoge").unbind("mouseenter").unbind("mouseleave");

このようにすることで目的は達成できます。

それよりもこの記事自体、マウスイベントについてかなり深く掘り下げているので勉強になりました。

こちらの公式のデモも参考になります。
http://api.jquery.com/mouseover#example-0

2011年2月16日水曜日

php5.3でDeprecatedエラーに遭遇

xamppをアップグレードしたらphpが最新の5.3になっており、その環境でもともとあったアプリケーションを動かしたところ以下の警告が出ました。

Deprecated: Assigning the return value of new by reference is deprecated in C:\xampp\php\PEAR\HTML\QuickForm.php on line ***

このDeprecatedのメッセージは、将来のバージョンで動作しなくなる可能性があるコードがあると出るアラートメッセージだそうです。

Pear::DBとかPear::HTML_QuickFormみたいな古いライブラリは要注意ですね。それぞれ新しいバージョンが出てるので早めに移行しておいたほうが良さそうです。

とりあえず毎回アラートが表示されても困るので、php.iniのerror_reportingを以下のように変更しました。

error_reporting = E_ALL & ~E_NOTICE & ~E_DEPRECATED

2011年2月15日火曜日

MySQL5.5で文字化け(character-set-serverで解消)

クライアントマシンのmysql(xamppでインストールしたやつ)が、最近非常に調子が悪く、まともにinsertやupdateもできないような状態になってしまったので、xamppを入れ直すことにしました。

xamppの設定をするのは何年ぶりでしょうか。2年以上は間が空いてると思います。

とりあえずapacheやphpは大きな問題もなく移行が完了。
mysqlも普通に動いてる、、、と思いきや、phpからinsertをしたデータが文字化け起こしてました。

というわけで、my.cnfにお約束の文字化け回避設定をします。

[mysqld]
default-character-set = utf8
skip-character-set-client-handshake


が、mysqlが起動しなくなってしまいました。なぜ。。。

ググってみたところ、バージョン5.5以降では[mysqld]セクションのdefault-character-setが廃止され、代わりにcharacter-set-serverが追加されたそうです。

[mysqld]
character-set-server = utf8
skip-character-set-client-handshake


これで無事文字化け解消できました。ひとまず安心。

mysql5.5ではこの他にもいろいろ変更や新機能があるっぽいです。
今はまだローカルのテスト環境ですが、サーバー環境で使うとなると色々問題出てきそうですね。

2011年2月13日日曜日

table-layout:fixedでテーブルの列幅を固定する

ie7で、テーブルのセル幅指定が無視され、レイアウトが崩れてしまうという問題が起こりました。
どうやらie特有のバグみたいです。いつもながらieには本当に困らされます。

色々調べてみたところ、cssのtable-layout:fixedが使えそうなことが分かり、試してみました。

サンプル:table-layout:fixedでテーブルのセル幅を固定

table-layout:fixedを指定すると、最初の一行目でテーブルの列幅を固定するという働きをしてくれます。

さらに2行目以降のセルを描画する際に再計算をしなくなるので、ページの読み込みも早くなるようです。
ieのバグ回避以外でも使えそうだし、覚えておくとあとあと役に立ちそうなプロパティだと思います。

2011年2月9日水曜日

jqueryでアコーディオンメニューを自作する

司馬遼太郎を読むというサイトを運営してるんですが、各ページのコンテンツが非常に多く、縦に長いページになってしまっているので、アコーディオンメニューを導入してみました。

javascriptのアコーディオンメニューは探せばいくらでもあると思いますが、今回も勉強のために自作します。
というか、簡単なものであれば自作したほうが後々のメンテナンスが楽だと思います。

とりあえずググってこちらのページを見つけました。参考にさせていただきました。

http://coder.blog.uhuru.co.jp/js/easy_accordion

$('.accordion_head').click(function() {
$(this).next().slideToggle();
}).next().hide();


ソースはこんな感じ↑。非常にシンプルです。


これをベースに少し改良を加えてみました。

$('.accordion_head').click(function() {
$(this).siblings('.accordion_body:not(:animated)').slideToggle("normal",function(){ $(this).siblings('.accordion_head').toggleClass('accordion_head_opened'); });
}).siblings('.accordion_body').hide();


修正点は

・DOMの構造が違ったので、自分のサイト用にセレクタを修正
・アコーディオンが開いている時と閉じている時でそれぞれマイナスアイコンとプラスアイコンを表示
・アニメーションが終わったタイミングでマイナス/プラスアイコンの表示を切り替え
・「:not(:animated)」を加えることで多重アニメーション防止

といったところです。

実際に動いているものはこちらのページ等で確認できます。
http://shiba-ryo.net/contents/144/%E7%87%83%E3%81%88%E3%82%88%E5%89%A3

ちなみにこのページ、ブログパーツ等の読み込みに時間がかかります。
「$(document).ready(...」の中に処理を記述すると読み込みがすべて完了するまでアコーディオンが動かないので、コンテンツのすぐ後にスクリプトを設置しました。

2011年2月4日金曜日

サムネイル画像作成についてのメモ

ウェブサイト制作の仕事をしてると、サムネイルを扱うことがよくあります。
画像のサイズが全部揃っていれば問題ないのですが、縦長だったり横長だったり、様々なパターンがあるということがほとんどです。

基本的にはimgタグのwidth、heightや、cssを使って調整するのですが、きれいに見せるのはなかなか手間がかかります。

で、今回たまたまamazonを見ているときに気がついたのですが、amazonは全部縦揃え、つまりサムネイルの高さを揃えてるんですね。



まあ考えてみれば当たり前なんですが、高さが揃っていると全体的にすっきりまとまった印象を受けます。
ちなみにこれは画像を横並べにした場合です。

じゃあ縦並べの場合は、逆に横、幅を揃えてやればいいのかな、と思いますが、



画像サイズがわかりやすいように選択状態でスクリーンショットを取っています。
こちらも高さで揃えてますが、左右に余白を入れて画像サイズを揃え、中央寄せにしています。なるほど。

では楽天ではどうなのか。



細長い商品のサムネがどうなってるのか見たかったので、ラケットで検索してみました。
長辺を96pxにして縮小しているようです。

サイトの構成によって最適なサムネイルサイズは変ってくると思いますが、縦揃え・横揃え、余白ありなど、あらかじめ何種類か作っておけば完璧だと思いますが、とりあえず最低でも高さを揃えたものは作っておいたほうが良さそうな気がします。

2011年2月3日木曜日

WinSCPで特定のファイル、フォルダをアップロードから除外する

TortoiseSVNを使うと、バージョン管理しているフォルダにはもれなく「.svn」という隠しフォルダが作成され、中にはさまざまなファイル・フォルダ(バージョン管理情報でしょう)が入っています。

サーバーにファイルやフォルダをアップする際、いちいちこの.svnを避けてアップロードするのは非常に面倒です。困りました。

自分はファイル転送はWinSCPを使ってるのですが、自動で.svnフォルダをアップロードから除外できる方法はないかな~と思って探したら、設定画面でそれっぽい項目がありました。



↑のように、「除外する」「.svn/」にすれば、.svnフォルダ以下はすべてアップロードから除外されます。

あっさり悩みが解決。これでTortoiseSVNの利用がさらに進みそうです。

2011年2月1日火曜日

TortoiseSVNで個人のWindowsPCでもバージョン管理を導入

バージョン管理といえば、サーバーだとCVSとか、クライアントだとeclipseなどが定番で、自分も少しですが使用経験があります。

が、自分の場合、趣味でも仕事でもチーム開発というものをあまりしないので、基本的にバージョン管理はしていません。

が、個人レベルの開発でも「3日前に戻したい」とか「あの時に書いたソースって、もう上書きしちゃったよな。。」みたいなことがチラホラあるので、バージョン管理はできれば導入したいと思っていました。

が、いちいちサーバーの設定してクライアントも設定して、、、というのは面倒なので、結局何もしていませんでした。


今回、気まぐれで「バージョン管理 Windows 個人」みたいなキーワードでググっていたところ、こちらのページを見つけました。

TortoiseSVN でバージョン管理

なんだかよさげなので、インストールしてみました。

TortoiseSVNは、操作のほとんど(ほぼすべて?)はWindowsの右クリックメニューからできます。eclipseみたいに起動に時間がかかることもなく、快適です。

リポジトリの登録やコミットなど、基本的な操作は前述のページを参考にしつつ試してみましたが、なかなか良い感じ。これなら継続して使えそうな気がします。

まだ使い始めたばかりでわからないことだらけですが、使いながら徐々に覚えていこうと思います。

2011年1月31日月曜日

iPhoneアプリケーション開発ガイド ―HTML+CSS+JavaScript による開発手法



会社の本棚に置いてあり、「HTML+CSS+javascriptでiphoneアプリが作れる」という帯が目に入ったので、おもしろそうだったので読んでみました。
ちなみに自分はiphoneは持ってません。触ったこともありません。

ひとまずiphoneアプリを作る予定はないので、ソースコードや詳細な解説などは適宜読み飛ばしましたが、iphoneアプリケーション、HTML5、Mobile Safari、jqtouchなどの概要を知ることができ、いろいろと得るものがありました。

特にHTML5の具体的な使用方法が分かったのは収穫でした。

簡単に言うと、HTML5ではローカルでのデータ操作にSQLが使えるようになったり、さらにそうした機能のほとんどはjavascriptでコントロールできる、ということみたいです。

今すぐHTML5をバリバリ使う、というわけではないですが、今後のウェブの進化の方向性をいろいろと考えさせられる内容でした。

2011年1月30日日曜日

Youtubeにアップした動画が勝手に短縮され、早送りのようになる

aviutlでエンコードした動画(H264,MP4)をYoutubeにアップすると、再生時間がおかしくなるという問題に遭遇しました。

具体的には、45秒の動画を投稿したのに、Youtubeに上がると12秒に短縮(?)され、再生してみると早送りのような状態になります。

ちなみに毎回発生するわけではなく、動画によって問題が起こったり起こらなかったりです。

他の人も同じような問題に直面してるようです。こちらのフォーラムを見つけました。

http://www.google.com/support/forum/p/youtube/thread?tid=3f2a52e55413b6a9&hl=ja

どうやらYoutubeがフレームレートをきちんと認識してくれないのが原因らしいです。

ベストアンサーを読みましたが、パラメータを見ても正直よくわからなかったです。そこでGUIのパラメータを見ながら色々試してみたところ、↓の画像の「ピラミッド参照化」を「none」にすることでうまくいくことがわかりました。



ひとまずこれで解決。
動画の編集やエンコードについてもしっかり勉強したいのですが、いかんせん時間がなく、場当たり対応ばかりです。

2011年1月29日土曜日

jquery.flatheights.jsでブロック要素の高さを揃える

cssでブロック要素の高さを揃えるやり方は知っていたんですが、改めて調べてみたところ、jqueryプラグインがあるのを知りました。

http://www.akatsukinishisu.net/itazuragaki/js/i20070801.html

こちらの記事は2007年と非常に古いですが、プラグインファイルの更新は「2010-09-15」となっており、定期的にメンテナンスされているようです。
ためしにjquery1.4.4で使ってみましたが、ちゃんと動作しました。

使い方も簡単ですし、jqueryを使っているサイトで高さを揃える要件があれば使ってみるといいと思います。

2011年1月27日木曜日

jqueryでvisibilityを切り替えるプラグインを作る

こちらのフォームを改良している際、要素のvisibility:visiblevisibility:hiddenの切り替えが必要になりました。

display:blockdisplay:noneの切り替えならshow()hide()が使えますが、visibilityの場合はそれがありません。
もちろんcss()メソッドを使えば切り替え可能ですが、いちいち書くのが面倒ですし、見た目もあまりきれいじゃありません。

というわけで、ちょうど良い機会だと思って、visibilityを切り替えるjqueryプラグインを作ってみました。

jquery.vtoggle.js

(function($){
$.fn.vtoggle = function(config){
var $this = $(this);

switch ($this.css("visibility")){
case "visible":
$this.css("visibility","hidden");
break;
case "hidden":
$this.css("visibility","visible");
break;
default:
//何もしない
break;
}

return $this; //メソッドチェーン用にreturn
};
})(jQuery);


見ての通り、本当に単純な関数です。

それでも、自分が作ったプラグインがメソッドチェーンの輪のひとつとして動いているのを見ると、ちょっと嬉しくなりますね。

まあ初めてのプラグインとしてはこのくらいでちょうど良かったと思います。

2011年1月26日水曜日

jqueryでformタグのonsubmit属性を削除する

Pear::HTML_QuickFormで出力したフォームには

<form action="/path/to/somewhere" method="post" name="testForm" id="testForm" onsubmit="try { var myValidator = validate_testForm; } catch(e) { return true; } return myValidator(this);">

という具合に、もれなくonsubmit属性がついてきます。

今回はこのonsubmitを消すという処理をしました。

$('#test_form').attr("onsubmit");

でさくっと消せるかな~、と思ってたのですが、消えません。

ググってみたところ、

$('#test_form').removeAttr("onsubmit");

で消せることが分かりました。

http://joshuaclayton.github.com/code/2009/06/08/handling-jquery-and-onsubmit.html


ちなみにonsubmitより利用頻度の高いonclickで検索すると、やはり属性が削除できず困っているというページが何件かヒットしました。

参考:onclick属性の操作
http://d.hatena.ne.jp/ftsh/20100729/1280396560
http://stackoverflow.com/questions/249074/how-to-change-onclick-handler-dynamically


それからこちらは「nameやidに"submit"という名前を付けるとjqueryの動作が怪しくなる」という件について。
属性の削除とは別の問題ですが、今回同様の問題に遭遇して、解決の糸口になりました。
http://www.takenoshin.com/web/blog/page/6.html

2011年1月24日月曜日

jQuery逆引きマニュアル Webデザインの現場で役立つ基本と実践



ざっと立ち読みしてなかなか良さそうだったので、買って読んでみました。

いちおうセレクタとかイベントの解説もありますが、あくまで気持ち程度。
「初級から上級まで」と銘打ってはいますが、それなりにjqueryの知識と経験があったほうが良いと思います。

ほとんどの項は1~2ページと短く簡潔にまとめられています。深く理解したい人にはもの足りないと思いますが、jqueryを使ってどんなことができるのかを広く浅く知るにはちょうど良いです。

あと自分用メモとして、サンプルのURL貼っておきます。
http://home.impress.co.jp/books/2961/

Web制作の現場で使う jQueryデザイン入門



会社の本棚に置いてあったので読んでみました。

セレクタやイベントなど、基本部分の解説がわかりやすいのが良かったです。
自分の場合、セレクタの使い方の復習として参考になりました。

とりあえずjqueryをはじめてみたい、という人向け。入門にピッタリの一冊だと思います。

2011年1月20日木曜日

jqueryで、inputフィールドにデフォルト値を入れておいてfocusしたら消す

というのをやりました。

こんな感じになります。

サンプル:jqueryでinputフィールドにデフォルト値を入れておいてfocusしたら消す

あとで知りましたが、こういうのをプレースホルダーと言うようです。ググるときはこのキーワードを使うといいと思います。

なお今回特に勉強になったのはdefaultValueの存在。

DOMで定義されている属性で、

$(this).attr('defaultValue')

という感じで取得できます。
フォームにアクセスした時にvalueがあると、この属性に値が保持されています。

参考:http://txqz.net/blog/2009/05/16/2312

2011年1月19日水曜日

jqueryで、要素をゆっくりhide()してからremove()する

というのをやるために、このようなコードを書きました。

$target.hide("slow").remove();

が、hideが終わる前にremoveされてしまうので、アニメーションの意味がなくなってしまいました。

少し悩んで、このページを見て解決しました。

http://stackoverflow.com/questions/1807187/how-to-remove-an-element-slowly-with-jquery

コールバック関数でremoveすればいいんですね。なるほど。

というわけで、コードをこのように修正してうまく動きました。

$target.hide('slow', function(){ $target.remove(); });

2011年1月18日火曜日

jqueryで指定要素"以外"のクリックイベントを実装するouterClickプラグイン

指定要素"以外"のクリックで発動するイベントを実装することになりました。
具体的には、特定のaタグをクリックすると小窓が開き、その小窓以外の、ページ内のどこかをクリックしたら小窓を閉じる、という処理です。

サンプル:outerClick

最初は.notなどのセレクタを使って実装しようと思ったのですが、小窓の中に子要素があるとうまく動作しなかったのですが、ググっていたらプラグインを見つけたのでこちらを使うことにしました。

プラグインページ
http://plugins.jquery.com/project/outerClick

デモページ
http://littleroom.se/playground/outerClick/

使い方も簡単で、

$('div#hoge').outerClick(function (event) { ... });

という具合に普通のイベントと同様に使えます。

2011年1月15日土曜日

ie8でjqueryのtoggle()が使えない

という状況に遭遇しました。

調べてみたところ、同じ問題で困っている人がけっこういるようでした。
http://okwave.jp/qa/q6169954.html

is(':hidden')も使えないようです。
この方はjqueryのソースコードの中まで見て調べています。
http://d.hatena.ne.jp/hiro_nemu/20090821/1250837131

ie8をie7互換モードで動かすという解決策もあるようです。
http://d.hatena.ne.jp/hide1080/20081116/1226833590

ie8でも環境によっては使えることもあるようで、正直よくわからないですね。
なんにしても迷惑な話です。

2011年1月14日金曜日

photoshopで「保存されるファイルの中に、ラテン文字以外の文字が含まれてい ます...」の警告メッセージ

たまにphotoshopを使うんですが、ファイルを保存するときにいつも「保存されるファイルの中に、ラテン文字以外の文字が含まれています。これらのファイル名と互換性のない Web ブラウザやサーバがあります。」というアラート(?)メッセージが表示されます。

特に不具合もないので無視してましたが、ちょっと気になったのでググってみました。

答えはadobeのサイトに載っていました。

http://kb2.adobe.com/jp/cps/223/223753.html

ファイル名やフォルダ名、つまり保存するパスに2バイト文字が含まれているとこのエラーが出るようです。
ほぼ毎回エラーが出る理由が分かりました。


そして解決策は、

上記の警告メッセージを表示しないで保存するには、「ファイル名」、「保存先のフォルダ名」、「保存先のフォルダのパス名」に 2 バイト文字を含まないようにします。


とのこと。
設定などでは回避できないようです。。

かなりウザいですが、いまさらPC内のフォルダ名を変更するのも難しいので、ガマンするしかないようです。

2011年1月13日木曜日

jquery+Pear::HTML_QuickFormでメールフォーム

を作ってみました。

フォームの送信はjqueryのajaxメソッドで、Pear::HTML_QuickFormはエラーチェックに使っています。
エラーがある場合はphpからjsonでエラーフラグとエラーメッセージを出力し、jqueryでエラーを受け取って処理します。

jqueryでエラーチェックのロジックを書いてもいいと思いますが、HTML_QuickFormのエラーチェックは使い慣れているので、この組み合わせでメールフォームを作ってみました。

こちらがそのフォームです。メールは飛ばないので、好きなだけ送信ボタンを押して大丈夫です。

サンプルメールフォーム

html,css,javascript,phpを完全に分離しているので、このようにブログ記事、ページ内にフォームを設置できます。(linkタグをdiv内に入れるな、という警告が出てしまいますが)


ソースはこちら。

mail_form.css
mail_form.js

phpはこんな感じです。


<?php

require('HTML/QuickForm.php');
require('HTML/QuickForm/Rule.php');
$form = new HTML_QuickForm('mailForm');

$form->addElement('text','contact_name','contact_name',array());
$form->addRule('contact_name', 'お名前を入力してください', 'required', '', 'server');
$form->addElement('text','contact_email','contact_email',array());
$form->addRule('contact_email', 'メールアドレスを入力してください', 'required', '', 'server');
$form->addRule('contact_email', 'メールアドレスを正しく入力してください', 'email', '', 'server');
$form->addElement('text','contact_title','contact_title',array());
$form->addRule('contact_title', '件名を入力してください', 'required', '', 'server');
$form->addElement('text','contact_description','contact_title',array());
$form->addRule('contact_description', '内容を入力してください', 'required', '', 'server');

$result = array();
$result["error"] = 0;

if($form->validate()){ $form->process("send_emails",FALSE); }
else{
$result["error"] = 1;
$result["error_msgs"] = $form->_errors;
}

echo json_encode($result);
exit;


function send_emails($v){
//メール送信
}
?>


昨年後半から少しずつjqueryの勉強をしていますが、こうやって実用的なアプリケーションが作れるようになってくるとコーディングも楽しくなってきますね。

今年はさらにjqueryの知識や経験を深めていきたいと思います。


※2011/01/24追記
display:noneの要素(送信中表示やサンキューメッセージ)からはouterWidth()等のメソッドで要素のサイズを取得できないことがわかったので、display:noneではなくvisibility:hiddenを使うようにソースを修正しました。

2011年1月12日水曜日

「Dust-Me Selectors」で使っていないCSSを整理する

サイトを長く運営していると、使っていないCSS、いわゆるゴミがどんどん増えてきます。

パフォーマンスに影響が出るほどのゴミではないのですが、編集作業の邪魔になったりすることはよくあります。

というわけでCSSの掃除をしようと思ってググってみると、まず「CSS Redundancy Checker」というウェブサービスが見つかりました。

が、サイトにアクセスしてもエラーが出るだけ。どうも閉鎖してしまったようです。

というわけで他の方法がないか探してみると、「Dust-Me Selectors」というfirefoxのアドオンがありました。

https://addons.mozilla.org/en-US/firefox/addon/5392/

さっそくインストールして使ってみます。

ステータスバーに箒のアイコンが出てくるので、これをクリックすると箒が動き出し、開いているページのチェックが始まります。



チェックが終わると使われていないセレクタの一覧が出力されます。
このkawama.jpだと、wp-calendarのセレクタなどが検出されました。



サイトマップなどを指定すると、サイトの全ページをまわってチェックしてくれます。

cssの掃除って面倒なのでサボりがちになってしまうので、こういうツールがあると助かります。

2011年1月7日金曜日

フォントをemで指定(bodyでfont-size:62.5%)

ユーザビリティの点で、フォントはpxでなくemで指定するのがベター

というのが少し前から言われています。

ただ、ずっとpxを使い続けている自分としては、実際にemを使うとなると戸惑いがあります。

が、最近、bodyに対してfont-size:62.5%を指定するという手法を知りました。

こんな感じで62.5%指定します。

body {
font-size: 62.5%;
}


これだけですが、詳しく説明しますとそのページの標準状態の文字サイズの大きさが10pxであれば、12pxの大きさは1.2emとなります。20pxであれば2emとなります。

body要素に対して"font-size: 10px;"としてしまうと、IEのメニューから文字サイズを変更できなくなります。そこでパーセント単位で指定するために、62.5%(10px÷16px)を指定しています。


http://css-style.jp/notebook/xhtml_css/font02.html

とりあえず一度使ってみましたが、なかなか使い勝手がいいです。px指定から卒業できそうな気がします。

2011年1月6日木曜日

jqueryで年齢認証っぽいダイアログを表示する

amazonなどで見かける「あなたは18歳以上ですか?」の警告、いわゆる年齢認証"っぽいもの"をjqueryで作ってみました。

参考:amazonの警告画面

amazonはサーバー側で認証してますが、javascriptだとクライアント側での認証です。
なので本質的に違うものになりますが、jqueryなら簡単に作れそうだと思ったので、とりあえず同じようなものを作ってみました。

流れとしては

0.クッキーを確認。認証が済んでいなければ1へ
1.ページにアクセスしたら画面全体を黒くし、認証ダイアログを表示
2.「いいえ」をクリックしたらYahooに飛ばす。「はい」をクリックしたらそのままページを表示
3.「はい」をクリックした場合、認証OKのクッキーを食わせて、再訪してもダイアログは出さないようにする

という具合になります。


クッキー制御にはjquery.cookie.jsを使いました。
http://plugins.jquery.com/project/cookie

認証ダイアログはSimpleModalというプラグインを選択。似たようなライブラリはいくつかありましたが、調べた中では最終更新が一番新しかったのでこれを選びました。
http://www.ericmmartin.com/projects/simplemodal/


サンプル:jqueryで年齢認証っぽいダイアログを表示


所詮はクライアントサイドなので限界はあると思いますが、先にcssでbodyをdisplay:noneにしておくとか、いろいろ工夫することでサーバーサイドの認証に近づけられると思います。

2011年1月5日水曜日

Yandexボットからのアクセス

正月休み中のログを見ていたら、Yandexというクローラーからアクセスが目につきました。

このYandexというのは、ロシアの検索エンジンだそうです。日本語には非対応ですが、コンテンツの収集をしているようです。

robots.txtを読んでるし、ちゃんとUserAgentで身元も明かしているのでそれほどお行儀の悪いボットではないようです。
またクロールされているのはAmazon PAAPIとは関係ないコンテンツサイトなので、アクセスが多くてもそれほど被害はありません。

というわけで、しばらくは様子を見てみようと思います。