Pragmatic Blog

ポップアップウインドウの良い点、悪い点をまとめておきます。

良い点

• 元の画像を見ながら編集することが出来る
• 画面を必要なフォームや文章のみに出来、わかりやすく出来る

悪い点

• 主なブラウザでポップアップブロックが最初から有効になっている
• ユーザーの設定によって開き方が変わる
• ポップアップされても、元のウインドウを操作出来てしまう
• 元ウインドウ、ポップアップどちらを操作していいのか、迷う場合がある

下記のブラウザで初期状態からポップアップブロックが有効になっています。
IE7、IE8、Firefox、Safari、Opera、Chrome

サーバーにインストールされている postfix のバージョンがわからなかったので調べる方法をメモしておきます。

# /usr/sbin/postconf  | grep mail_version

mailto で題名や本文に日本語などを含める時に URLエンコードをしないといけないが、URLエンコードすると逆に文字化けしたりして、よくわからなかったのでメモしておきます。

ファイルの文字コードは UTF-8 で記述しています。
URLエンコードをかけると DoCoMo、au だと日本語が文字化け。SoftBank は正常に表示される。
URLエンコードをかけないと日本語が正常に表示される（機種によっては文字化けする）。

mailto に半角英数字以外を含める時はURLエンコードしないといけないはずなのにかけると逆に文字化けしたりで混乱。
調べてみると
DoCoMo、au は shift_JIS に変換してから URLエンコード。
SoftBank は UTF-8 にしてから URLエンコード。
ということでなぜ文字化けしていたのかやっと理解。

取り合えず、php で文字コードを変換してURLエンコードする例を書いておきます。

DoCoMo, au

<a href="mailto:?subject=<?php echo urlencode(mb_convert_encoding('題名', 'sjis'));?>&amp;body=< ?php echo urlencode(mb_convert_encoding('本文', 'sjis'))?>">友達に知らせる</a>

SoftBank

<a href="mailto:?subject=<?php echo urlencode('題名');?>&amp;body=< ?php echo urlencode('本文')?>">友達に知らせる</a>

参考サイト

• 3キャリア対応ケータイXHTMLのTIPS 8つ : アシアルブログ
• mailto:について
• ウノウラボ Unoh Labs: 携帯サイト作成時の注意点(SoftBank編)

専用サーバーでの iptables の設定のメモをしておきます。

前提

外部からのポートはssh(22)以外は拒否設定。

やりたいこと

http(80)、https(443)を外部から接続できるようにする。

1. iptables のルール一覧をルール番号をつけて表示して現在の設定を確認

   # /sbin/iptables -L --line-number

2. httpを許可するように設定

   # /sbin/iptables -A INPUT -p tcp --dport http -j ACCEPT

3. httpsを許可するように設定

   # /sbin/iptables -A INPUT -p tcp --dport https -j ACCEPT

   -A ルールの末尾に追加（-I だと先頭に追加）
   -p プロトコルを tcp に指定
   –dport ポートを http, https に指定
   -j パケットの処理方法を ACCEPT に指定

4. ルール一覧に追加されているか確認

   # /sbin/iptables -L --line-number

5. 確認したら設定保存

   # /sbin/service iptables save

6. 保存されたか確認

   # cat /etc/sysconfig/iptables

先月から新しく人も入ってきたので、Firefox に入れておくと便利かも知れないアドオンを少しまとめておきます。

開発系

Firebug

JavaScript, HTML, CSS の開発ツール
参考：特集：Firefox 3とFirebugで始めるJavaScript開発｜gihyo.jp … 技術評論社

YSlow

ページのパフォーマンスを計測してくれるツール
Firebug が必要

Web Developer

いろいろな情報を表示したり、css を無効にしたり、何かと便利なツール

Html Validator

ページの html の文法をチェックしてくれる

ColorZilla

ページで使われている色を調べることができる

MeasureIt

ページ上を定規で測ることができる

Selenium IDE

自動でテストができるツール
参考：Selenium IDE を使って Webアプリケーションをテスト

Live HTTP Headers

HTTP header を見ることができる

User Agent Switcher

ユーザエージェントを切り替えられる
携帯サイトなど作成するときに便利
参考：ke-tai.org > Blog Archive > PCからケータイのユーザエージェントを詐称するには(Firefox編)

Greasemonkey

ユーザースクリプトを使えるようにするアドオン。JavaScript でページをカスタマイズできる
ユーザースクリプトの例：AutoPagerize - Userscripts.org

操作系

FireGestures

マウスジェスチャー

Tab Mix Plus

タブ機能を拡張してくれる

その他

Screen grab!

長いページでも全体のキャプチャーができるようになる

テキストリンク

リンクが張られていない URL をダブルクリックで開くことができるようになるアドオン

Make Link

ページの URL をコピーする時などに便利

It’s All Text!

テキストエリアを自分の好きなエディタで編集することができるようになる

Extension List Dumper

インストールしているアドオンをリスト表示できるようになるアドオン