※ パクレゼルヴではWeb開発エンジニアを大募集中!詳細はこちら

Archive

Archive for the ‘Tips’ Category

携帯電話のキャリア毎のHTMLの解釈の差を吸収する

2009/7/31 金曜日 18:00:20

お久しぶりです

のびーにょです。

さて、携帯電話のHTMLに関するお話でも。

<div>
	<div style = "background-color:#FFAAAA">TITLE</div>
	<div style = "background-color:#CCCCCC">
		コンテンツ<br />
		コンテンツ<br />
		コンテンツ<br />
	</div>
</div>

ってな感じで書いた場合
ドコモ端末だと
block_dc1
ってな感じで
au端末だと
block_au1
こんな感じになっちゃいます。

divタグとdivタグの間に隙間ができてしまって、何ともみっともないことになります。
CSSでどうにかして隙間を埋めてしまいたいのですが、これはほぼ不可能です。

で、これ実はHTMLの書き方だけで同じようなレイアウトになります。

それが以下

<div>
	<div style = "background-color:#CCCCCC">
		<div style = "background-color:#FFAAAA">TITLE</div>
		コンテンツ<br />
		コンテンツ<br />
		コンテンツ<br />
	</div>
</div>

htmlの概念的にはよくはないんですけどね
イメージとしては以下のような感じ
灰色の部分がコンテンツのdivでピンクの部分がタイトルのdiv
s2

普通のイメージは
s1
こんな感じで、タイトルとコンテンツ部分の隙間をなくすようなCSSを書いたりしますが
携帯の場合、サポートしていない場合が多いです。

上記のHTMLで書いた場合は
ドコモ
block_dc2

au
block_au2
ってな感じで表示されて両方同じ見え方になります


もう一個例を出しましょう
1エリアごとに交互に色を入れ変えたい場合
良くあるのがランキングとか一覧表示とか
そのあたり。

<div>
	<div style = "background-color:#FFAAAA">aaaaa</div>
	<div style = "background-color:#CCCCCC">aaaaa</div>
	<div style = "background-color:#FFAAAA">aaaaa</div>
	<div style = "background-color:#CCCCCC">aaaaa</div>
	<div style = "background-color:#FFAAAA">aaaaa</div>
	<div style = "background-color:#CCCCCC">aaaaa</div>
	<div style = "background-color:#FFAAAA">aaaaa</div>
	<div style = "background-color:#CCCCCC">aaaaa</div>
	<div style = "background-color:#FFAAAA">aaaaa</div>
</div>

こんな感じで書きたくなりますよね。
でも、こう書くと
list_dc1
ドコモは問題ない

list_au1
でもやっぱりauで問題が出ます。

これも、以下のようなイメージでHTMLを記述することでドコモと同じように見せることが可能です。

s4

htmlはこんな感じで

<div style = "background-color:#FFAAAA">
	aaaaa
	<div style = "background-color:#CCCCCC">aaaaa</div>
	aaaaa
	<div style = "background-color:#CCCCCC">aaaaa</div>
	aaaaa
	<div style = "background-color:#CCCCCC">aaaaa</div>
	aaaaa
	<div style = "background-color:#CCCCCC">aaaaa</div>
	aaaaa
</div>

そうすると、ドコモ、auが以下のように同じように見えます。
list_dc2
list_au2

まぁ、そんな感じで一つ下のdiv要素の色を上の階層に持ってきてやると意図しない隙間をなくすことができます。


色々めんどくさいですけど、結構HTMLだけでも表現できたり色々便利
例えば、以下のような色分けを隙間なく表示したいときとかも
s5

<div style = "background-color:#FFF0E5">
	<div style = "background-color:#FFD0BF">
		<div style = "background-color:#FDDAF0">
			<div style = "background-color:#FABBEA">
				<div style = "background-color:#A3F27B">
					<div style = "background-color:#C0E9FA">
						<div style = "background-color:#FFF09C">
							<div style = "background-color:#F4DA67">
								<div style = "background-color:#ccccff">
									<div style = "background-color:#9966ff">
										<div style = "background-color:#FFB6C1">
											<div style = "background-color:#FF3333">
												<a href ="">
												<span style = "font-size:medium">
												かおもじ友の会</span>
												</a>
												<br />
											</div>
											┗3000個以上の顔文字やAAを収録!オリジナルな作品も投稿できてみんなで共有できちゃう!
										</div>
										<a href ="">
										<span style = "font-size:medium">
										あなたの過ごした時間</span>
										</a>
										<br />
									</div>
									┗時は金なり。あなたが生まれて今日まで過ごした「時間」について色々な角度から詳しく知りたいと思いませんか?
								</div>
								<a href ="">
								<span style = "font-size:medium">
								ちょいネタフーズ</span>
								</a>
								<br />
								</div>
								┗お手軽料理からネタ料理まで、レシピをケータイで簡単検索!オリジナルレシピも投稿しよう
							</div>
							<a href ="">
							<span style = "font-size:medium">
							切なさ成分解析</span>
							</a>
							<br />
						</div>
						┗身近な素材に含まれる「切なさ」を解析。結果を読むと思わず切なくなるかも?
				</div>
				<a href ="">
				<span style = "font-size:medium">
				明日に向かって叫べ</span>
				</a>
				<br />
			</div>
			┗魂の叫びに賞金がかかります!アナタも賞金首となって追われてみる?
		</div>
		<a href ="">
		<span style = "font-size:medium">
		NAME&nbsp;de&nbsp;QUEST</span>
		</a>
		<br />
	</div>
	┗あなたは世界を救う勇者となって、日頃の鬱憤を晴らすべく魔王に戦いを挑みます!
</div>

のびーにょ HTMLとか, Tips, キャリア, 携帯電話

ProxyCommandを使った踏み台サーバー経由のssh接続

2009/3/1 日曜日 2:54:29

MacやLinuxなど、sshクライアントにsshコマンドを使っている方のためのお話

夜間や休日で緊急事態のときは家からリモートメンテナンスを行うことがあるかと思います。
その際に、インターネットからサービスを行っているサーバーに直接sshでログインできるようにしておくのは不安がありますので、社内の特定のサーバーからのみ許可するようになっていることがあります。

この様な運用形態の場合、一度社内のサーバーにログインして、それから再度 sshコマンドで対象となるサーバにログインすることになり、一手間増えてしまいます。
できればワンステップでログインしたいところです。

sshコマンドにオプションをつけることで、ワンラインでログインできます。

ssh -o 'ProxyCommand ssh ユーザ名@中継サーバー nc %h %p' ユーザ名@ターゲットサーバー

これで一度にログインできるのですが、ProxyCommandと毎回入力するのは面倒なので、できれば更に短くしたいところです。

ローカルの ~/.ssh/config に以下のように記述しておくことで一度にログインできるようになります。

Host ターゲットサーバー
ProxyCommand ssh ユーザ名@中継サーバー nc %h %p

ターゲットサーバー名はワイルドカードが使えますので、*.xxxx.jpのような指定が可能です。

これで、

ssh ユーザ名@ターゲットサーバー

だけでログインできるようになります。

MacでSFTPおよびSCPクライアントを使用する場合は、Fuguを使用すると、~/.ssh/configに記述した内容を解釈し接続してくれます。
現時点ではCyberduckは中継をサポートしていませんので、Fuguを使用するとよいでしょう。

マカー Tips, ssh

docomoの絵文字

2009/2/27 金曜日 10:38:32

つい最近までdocomoの絵文字は色つきで表示されないのかと思ってた。
わざわざ絵文字毎に色を指定して表示させていたのですが、
どうやらbodyタグのstyleにcolorで色指定してあると、その色が適応されてしまうようです。

ということで、bodyタグにcolorは指定しないようにしましょう。
色考慮しなくていいので、開発が楽になりました。
そんなdocomo。

下音タヌキ Tips, 携帯電話

PHPでBOM付きUTF-8

2009/2/25 水曜日 12:36:06

お久しぶりです
のびーにょです
ちょっとはまったのでTips的に

ZIPをダウンロードさせるプログラムを書いてました。
右クリックして保存。とかじゃなくてアクセスしたらダウンロードするような奴です。

で、サーバ側でZIP生成してそれをダウンロードさせようとしてたんですがファイルサイズはサーバに保存した内容と同じぐらいなのに解凍すると中身が少ない・・・

解凍ソフトはLhaplus使ってたんですがWINRARとか使って解凍すると中身が全部ある という現象が発生。

色々調べてたんですけど結局わからず・・・
みたいになってバイナリエディタで比較してみると・・・

先頭に何やらついてますね・・・
EF BB BF
ってのが3つぐらい

これBOMのエンディアンじゃないですか・・・

ソース調べてみるとBOM付きUTF-8で保存されてるファイルが3つ・・・

まさにこれじゃないですか・・・

BOM無しUTF-8で保存しなおして実行すると何事もなかったかのように解凍できる

PHPでBOM付きUTF-8は使わないに越したことはないというお話でした

http://bugs.php.net/bug.php?id=22108

まだバグなおってないみたいだしね・・・

のびーにょ PHP, Tips, その他

存在するファイルはスルーしたい(mod_rewrite)

2009/2/7 土曜日 17:21:05

mod_rewriteのお話。
ファイルが存在する場合はそのファイルを表示し、存在しない場合はindex.phpを表示するようにしたい。
よくある例が以下のようになっているるのですが、実際にはうまく動かないことがあります。

RewriteEngine on
RewriteBase /
# ファイルが存在しない且つ、ディレクトリが存在しない場合は、index.phpを表示
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^$ /index.php [L,QSA]
RewriteRule ^(.*)$ /index.php?jb=$1 [L,QSA]

以下のように書くと期待通りに動作します。

RewriteEngine on
RewriteBase /
# ファイルが存在するか、ディレクトリが存在する場合は、そのファイルを表示する
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.* - [L]
# ファイルが存在しない且つ、ディレクトリが存在しない場合は、index.phpを表示
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^$ /index.php [L,QSA]
RewriteRule ^(.*)$ /index.php?jb=$1 [L,QSA]

これで目的は達成されるのですが、最初の例でなぜうまくいかないのか納得できないのです。
この挙動について説明できる方がおられれば、ご教授いただけると幸いです。

マカー Apache, Tips

WinVistaはダメな子じゃない!・・はず

2009/1/30 金曜日 15:46:36

そろそろ仕事用のパソコンでWindowsVistaを使われる方々も増えてきているのではないこと思う今日この頃。
大抵、メーカーのPCってパーテーションが区切ってなくてCドライブしかない!という状況でお困りの方、Vistaにはパーテーションを区切る機能が付いてるので、それをご紹介。

パーティションサイズの変更は、コントロールパネルの「システムとメンテナンス」→「管理ツール」にある、「コンピュータの管理」から行うことができます。
左側の、「ディスクの管理」を選択して、分割したいドライブを右クリックして、「ドライブの圧縮」から容量を指定して分割することができます。
ただし、Vistaを使用してから結構時間がたってると、HDDのいろんな場所にデータが書き込まれていて、選択できる容量が少ない場合がありますので、事前にデフラグ等をして整理すると多少改善されます。
ベストは、使い始めに区切っちゃうのが一番なんですけどね。

メーカー物のPCでパーテーション切ってないものとか少なくないので、これからの時代を生き抜くに覚えておいて損はないかも・・?
Windows7でもたぶん搭載されてると思いますし。

と、本日でVista誕生から2年が経ったんですね。

下音タヌキ Tips

日付整形手術

2008/12/29 月曜日 12:55:26

・フォームから送信された日付をDBにINSERT、UPDATEできる形にするための整形
・DBからSELECTで引っ張ってきたDATETIME型の日付の整形

上記を例として日付の整形ってよく出食わします。
sprintf、substr、explode、正規表現を使う等、いろんなやり方があると思いますが…
自分が使っている方法をまとめてみます。

※例 DATETIME型の文字列を整形して表示

$time = '2008-07-10 21:02:23';
$data = sscanf($time, '%d-%d-%d %d:%d:%d');

sscanf()はprintf()の入力版で、文字列を指定したフォーマットに基づいて配列で抜き出します。
(フォーマットについてはprintf()のマニュアル参照)

$dataは下記のようになります

Array
(
    [0] => 2008
    [1] => 7
    [2] => 10
    [3] => 21
    [4] => 2
    [5] => 23
)

一発で変数に入れたい場合はlist()関数を使いましょう。

list($year, $month, $day, $hour, $minute, $second) =
	sscanf($time, '%d-%d-%d %d:%d:%d');
echo $year.'年'.$month.'月'.$day.'日 '.$hour.'時'.$minute.'分'.$second.'秒';

//【結果】2008年7月10日 21時2分23秒

こんな感じにすれば取り敢えず整形して表示できますが、一桁の月、日はゼロで穴埋めしたかったりする場合もあったりするので、ここは関数sprintf()を使って整形します。

echo sprintf('%d年%02d月%02d日 %02d時%02d分%02d秒',
	$year, $month, $day, $hour, $minute, $second);

//【結果】2008年07月10日 21時02分23秒

sprintf()の引数では配列を指定できませんが、vsprintf()を使うと配列を指定でき、

list($year, $month, $day, $hour, $minute, $second) =
	sscanf($time, '%d-%d-%d %d:%d:%d');
echo sprintf('%d年%02d月%02d日 %02d時%02d分%02d秒',
	$year, $month, $day, $hour, $minute, $second);

の二行を一行でやっつけちゃえます。

echo vsprintf('%d年%02d月%02d日 %02d時%02d分%02d秒',
	sscanf($time, '%d-%d-%d %d:%d:%d'));

関数やメソッドで用意しておくと使い回しできて良いかと思われます。

チョコボール MySQL, PHP, Tips, データベース

波ダッシュ(にょろ、波線)に気をつけましょう

2008/12/4 木曜日 18:07:00

さて
文字コード周りで思いついたのでちょっと書いときます

波ダッシュ”〜”っていうのがあります。
にょろ とか 波線 とか言われてます。
Windowsだと普通に打つと”~”ですよね。
と、言ってもXPとそれより前では違うようですが・・・

色々問題があるようでSjisとUnicodeで変換かけると変わるとかあります。
と、いうか特定のエディタだと開けなかったりするみたいですね。
Shift_JISとUnicodeのマッピングが違うのが原因らしいですが、詳しいことはWikipedia見るといいと思います

で、PHP上で変換かける場合は

mb_convert_encoding('~', 'utf8', 'sjis-win');
mb_convert_encoding('〜','sjis-win','utf8');

ってな感じで”sjis-win”っていう拡張文字コード指定してあげれば求めている変換をしてくれると思います。
でもですね
特定のエディタで開けない(シェアのエディタ含む)場合があるので、複数人で触るようなソースに書くのはあんまりよろしくないのですよ

ってことで”〜”から”~”に変換するときは下の書き方の方がいいのかも

str_replace("xE3x80x9C",'~',$data);

たまーにMac使ってる人からデータもらうとそうなっている場合があるので、Macの方は注意した方がいいかもしれません。
携帯もSJISがメインなので。。。

“~”から”〜”に変換することはそうそうないと思いますので割愛

のびーにょ PHP, Tips, 携帯電話

指差し確認

2008/11/28 金曜日 15:45:33

お疲れ様です
のびーにょです

今日はDBオペレート時の話
自分はUPDATE文やDELETE分流す時には指差し確認を行っています。

なぜかって
怖いから

昔、本番環境のDB触ってるときにUPDATE文流す時に、”WHERE”句を付けずに実行した事があります。
会員のゲーム状況を保存しているテーブルで、それが一気に全部書き変わっちゃって・・・

あの時のあせりと言ったらもう、やばかったですよ。

幸い200件ほどしかテーブルにデータが入っていなかった(ゲームごとに違うテーブルでリリース直後だった)ので
手作業で戻すことができました。

また、上司が間違ってBBSのデータをdropしたことがありました。
あの時はバックアップから復旧したはずですけど、バックアップ取ってから書き込まれた内容は消えてしまっています。

そういう経験を見たり、自分でやっちゃってからは必ず指差しで”WHERE”句が付いていることを確認してから実行しています。

変更する物を先にSELECTで変更する内容、件数を確認してSELECT文を改変してUPDATE、DELETE文にするのもいい方法です。

それでも指差し確認してますけど。

皆様もDBを操作する場合には十分ご注意ください。

と、言っても自身がミスしない限りはきっと無理なんだろうなぁと思います。

プログラム組んでるとDBなんて日常的に操作する物だから、慣れで適当になってしまいますよね・・・

それでも自分で指差し確認をしているのはあの恐怖をもう二度と経験したくないからです。

皆さんも頭の片隅に入れておいて下さいね。

のびーにょ Tips, データベース

海外からのアクセスを防ぐ

2008/11/27 木曜日 15:45:09

海外からのアクセスを防ぐ。
そんなお困りな方は、.htaccessで大体のことはできます(サーバが.htaccessに対応している必要がありますが・・)。

order deny,allow
deny from all
allow from .jp

とすれば、jpドメイン以外からのアクセスを防ぐことはできます。
しかし、これだけでは、apacheの設定具合等によっては普通にアクセスできてしまう場合があるので、IPで直接制限をかけた方が良いかなと。

JPNICが管理しているIPアドレスは以下から確認できるので、それのみアクセスできるようにすれば、一応国内からのみアクセスということができます。
http://www.nic.ad.jp/ja/dns/jp-addr-block.html

設定方法としては以下。

order allow,deny
allow from all
deny from 210.128.0.0/11
deny from 221.16.0.0/12
 ・
 ・

.htaccessサンプル(一応2008/11/27付のデータで作成)

ずらっと、大量に記述する必要がありますが、こんなに多量にあってもIPv4はもう喝々で、更に桁数の増えるIPv6にそのうち移行するとか言う話も出てきていたりします。
そんな感じ。

下音タヌキ Apache, Tips