ヒルドイド

ヒルドイド

不摂生が祟ったのか暫く(結構長く)寝込んでいます。起きるとツライけどずっと寝てるのもツライ。

体調を崩すととたんにアゴ周りにブツブツと吹き出物が出来て汚くなります。外出するのが恥ずかしいくらい。もっとも本当にツライのでめったなことで外出できないのですが。

(中略)

で、医者に処方して貰ったのがヒルドイド(ソフト)軟膏。
この軟膏、主成分がヘパリン類似物質で、ヘパリン(の類)自体も血液凝固抑制以外に効き目があるとかはないですが、それ以外の成分も効き目のあるようなものは無し。ガッカリ・・・
じゃない。この軟膏は保湿力が非常に高い。ネットには高い保湿用化粧品買うよりヒルドイドの方が良いとまで書かれています。(成分を見る限り何でそんなに保湿力が高いのか理由がよく解らないんだけど)
ついでに、界面活性剤という単語に過剰反応する系の人の記事も見かけましたがグリセリン脂肪酸エステルは普通に食品にも入ってるし肌が弱いアトピーの人向けのローションとかでも普通に使われているくらいなので特に心配することはないかと思います。

[ヒルドイドソフト軟膏0.3%]
グリセリン、スクワラン、軽質流動パラフィン、セレシン、白色ワセリン、
サラシミツロウ、グリセリン脂肪酸エステル、ジブチルヒドロキシトルエン、
エデト酸ナトリウム水和物、パラオキシ安息香酸メチル、パラオキシ安息香酸プロピル

実際に使ってみると、塗って暫くはちょっと軟膏の白っぽさが残る感じ。10分過ぎたくらいで白っぽさが無くなってテカった感じ。もう暫く経つと目立たなくなる。
吹き出物の酷いアゴ周りに3日ほど塗ったところ、赤くなっていた部分が綺麗に治まった。いつも赤みが引くのに日数がかかるのでこれは早い方だと思います。ついでにビタミンB,Cもしっかり摂って吹き出物が出るのも抑えたところ、久しぶりにアゴ周りが綺麗に。これで人前にも出られます。
ただ、まだ100m先のコンビニまで買い物に行くだけで体調悪くなるのでアレですが。
ネットスーパーと出前があって良かった・・

IFRAMEを使いこなす

ウェブのページを作る際に他所のページを組み込む方法としては昔からiframe(インラインフレーム)タグを使うのが普通。iframeはひっくり返す以外はそんなにクセがあるわけではないので普通にできると思うけど、某掲示板で悩んでる人がいたので説明用に臨時でこのページを作成。そしたら意外と見に来る人の多いページになったので再整備して残している。

普通にiframeタグを書く

先ずはスタイル無し、HTMLタグだけでiframeを入れる。敢えてスクロールバー表示指定も付ける。

(下のコードは表示の都合でiframeタグが途中で改行されているように見えるがタグの途中で改行してはいけない。<iframe hogehoge>の部分は1行で書く。読み飛ばす人がいるのでしつこく書く。HTMLタグは "<" から ">" の途中で改行してはいけない。<hoge>example</hoge>のexampleの部分はいくらでも改行して良い)

1
2
<iframe seamless src="https://denwa.intaa.net/" width="500" height="200" scrolling="yes">
</iframe>
表示結果

ズレた位置にiframeを表示させる

次はインラインスタイルを使ってインラインフレームを組み込む範囲や位置を指定。重なり合わせもインラインフレームの側を最前面とします。本来表示される筈の位置から右に50ドット・下に50ドットずらしてみた。
(下のコードは見易いようにスタイルシート部分を改行しているが、実際にタグを書くときは途中で改行してはいけない。下のコードだと<div hogehoge>や<iframe hogehoge>の部分は改行無しで書かなければならない。)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<div style="
	width:500px;
	height:200px;
	background:#fff;
	text-align:left;
	color:#000;
	">
    <iframe seamless src="https://denwa.intaa.net/" width="500" height="200" scrolling="no"
     style="
	position:relative;
	top:50px;
	left:50px;
	overflow:hidden;
	z-index:10;
	">
    </iframe>
</div>

表示結果
本来の位置(参考)

iframeの中のコンテンツの任意の位置を表示する

インラインフレーム自体の位置は変えずにインラインフレームの中のコンテンツの位置を任意に指定して組み込む。
下の例ではインラインフレームの中のページの上から100px; 左から100px;を指定したのと同じになる。実際にはマイナスのマージン値を指定することで本来の表示エリアから左100px;上100px;分をはみ出させて表示しないようになっている。
(下のコードは見易いようにスタイルシート部分を改行しているが、実際にタグを書くときは途中で改行してはいけない。下のコードだと<div hogehoge>や<iframe hogehoge>の部分は改行無しで書かなければならない。)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<div style="
	width:600px;
	height:200px;
	margin:0;
	overflow:hidden;">
    <iframe seamless width="800px" height="800px" frameborder="0" scrolling="no"
     style="
	margin-left:-100px;
	margin-top:-100px;
	overflow:hidden;
	" src="https://denwa.intaa.net/">
    </iframe>
</div>

表示結果

iframeの中のコンテンツを拡大・縮小させる

インラインフレームの中のコンテンツを拡大・縮小して組み込む。
transform:scale(0.5,0.5)を使い縦横共に50%のサイズにするが、面倒でも主要ブラウザのベンダープレフィックス付きも指定する。-moz(mozilla系), -webkit(chrome,safari系), -o(opera系),-ms(internet explorer)。ちなみに中の写真の大きさ変わらないのは中の写真が可変サイズで指定されているから。その他は正しく縮小している。
(下のコードは見易いようにスタイルシート部分を改行しているが、実際にタグを書くときは途中で改行してはいけない。下のコードだと<div hogehoge>や<iframe hogehoge>の部分は改行無しで書かなければならない。)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div style="
	width:1000px;
	height:200px;
	margin:0;
	overflow:hidden;
	">
    <iframe seamless allowfullscreen src="https://denwa.intaa.net/" scrolling="no"
     style="
	width:1000px;
	height:400px; 
	-moz-transform:scale(0.5,0.5);
	-webkit-transform:scale(0.5,0.5);
	-o-transform:scale(0.5,0.5);
	-ms-transform:scale(0.5,0.5);
	transform:scale(0.5,0.5); 
	overflow:hidden;
	position:relative;
	top:-50%;
	left:-25%;
	">
    </iframe>
</div>

表示結果

iframeを回転させる

上の縮小したものを回転させてみる。transform:rotate(15deg)とすると右に15度傾く。マイナス値指定で左に傾く。
(下のコードは見易いようにスタイルシート部分を改行しているが、実際にタグを書くときは途中で改行してはいけない。下のコードだと<div hogehoge>や<iframe hogehoge>の部分は改行無しで書かなければならない。)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div style="
	width:1000px;
	height:200px;
	margin-top:150px;
	overflow:hidden;
	-moz-transform:rotate(15deg);
	-webkit-transform:rotate(15deg);
	-o-transform:rotate(15deg);
	-ms-transform:rotate(15deg);
	transform:rotate(15deg);
	">
    <iframe seamless allowfullscreen src="https://denwa.intaa.net/" scrolling="no"
     style="
	width:1000px;
	height:400px;
	-moz-transform:scale(0.5,0.5);
	-webkit-transform:scale(0.5,0.5);
	-o-transform:scale(0.5,0.5);
	-ms-transform:scale(0.5,0.5);
	transform:scale(0.5,0.5);
	overflow:hidden;
	position:relative;
	top:-50%;
	left:-25%;
	">
    </iframe>
</div>

表示結果

iframeの中のコンテンツを左右反転させる

今度は左右を反転させてみる。transform:scaleX(-1)で左右の反転となる。scaleY(-1)で上下反転となる。
(下のコードは見易いようにスタイルシート部分を改行しているが、実際にタグを書くときは途中で改行してはいけない。下のコードだと<div hogehoge>や<iframe hogehoge>の部分は改行無しで書かなければならない。)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div style="
	width:1000px;
	height:200px;
	margin-left:-500px;
	overflow:hidden;
	-moz-transform:scaleX(-1);
	-webkit-transform:scaleX(-1);
	-o-transform:scaleX(-1);
	-ms-transform:scaleX(-1);
	transform:scaleX(-1);
	">
    <iframe seamless allowfullscreen src="https://denwa.intaa.net/" scrolling="no"
     style="
	width:1000px;
	height:400px;
	-moz-transform:scale(0.5,0.5);
	-webkit-transform:scale(0.5,0.5);
	-o-transform:scale(0.5,0.5);
	-ms-transform:scale(0.5,0.5);
	transform:scale(0.5,0.5);
	overflow:hidden;
	position:relative;
	top:-50%;
	left:-25%;
	">
    </iframe>
</div>

表示結果

なお、反転の際は例えば左右反転なら反転対象の右辺を軸にパタンと本のページをめくるようにひっくり返す処理となるので元々の位置までマイナス値のmargin-leftなどで左に移動させる必要がある。上下反転の場合も下辺を軸に下側にひっくり返すのでマイナス値のmargin-topなどで上に移動させる必要がある。(反転ではここを知っておかないと途方に暮れる)
文字で書いても伝わらないので図にしてみた(下)。


iframe反転

iframeの中のコンテンツを半透明化させる

最後にインラインフレームを半透明化させる。基本的にはopacity:0.5;で半透明度50%になるが面倒でも主要ブラウザのベンダープレフィックス付きも指定する。さらにIE8以下は手間のかかる子なのでそれ用も追加。
(下のコードは見易いようにスタイルシート部分を改行しているが、実際にタグを書くときは途中で改行してはいけない。下のコードだと<div hogehoge>や<iframe hogehoge>の部分は改行無しで書かなければならない。)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div style="
	background-image:url(/wp-content/uploads/2014/05/bg1.png);
	width:600px;
	height:338px;
	">
    <div style="
	width:1000px;
	height:200px;
	position:relative;
	top:69px;
	left:50px;
	overflow:hidden;
	">
        <iframe seamless allowfullscreen src="https://denwa.intaa.net/" scrolling="no"
         style="
    	    width:1000px;
	    height:400px;
	    -moz-transform:scale(0.5,0.5);
	    -webkit-transform:scale(0.5,0.5);
	    -o-transform:scale(0.5,0.5);
	    -ms-transform:scale(0.5,0.5);
	    transform:scale(0.5,0.5);
	    filter:alpha(opacity=50);
	    -ms-filter:alpha(opacity=50);
	    -moz-opacity:0.5;
	    -webkit-opacity:0.5;
	    -o-opacity:0.5;
	    opacity:0.5;
	    overflow:hidden;
	    position:relative;
	    top:-50%;
	    left:-25%;
	    ">
        </iframe>
    </div>
</div>

表示結果

このページではスタイルシートを全てインラインスタイルで記述しているが、HTMLヘッダでスタイルを指定しても別ファイルのスタイルシートでももちろん構わない。ただ、インラインフレーム使うのって例外的(限定的)なことが多いように思っているのでソースが汚らしくなってもインラインスタイルを使うかなと。

2016年12月3日: この記事の初稿公開から暫くしてからコード部分をSyntax Highlighterで表示するように変更したんだけど、初稿で意図した表示と大きく変わっていることに気付いたので弄った。ついでに記事自体も少し見易くした(つもり)。

php5.5.12にアップデート

FreeBSD Nginx php-fpm

FreeBSDのports情報を更新したらphp-5.5.12が来てたので適当にググってトラブってなさそうだったので何も考えずにいつもどおりに更新したらエライ目にあった。
nginxのサーバでPHP-FPMと組み合わせて使ってたサーバでウェブのphpのページを表示しようとすると、BAD GATEWAY 502というメッセージが出て白い画面。全くダメポ。
php-fpm.confで

1
2
3
4
listen = /var/run/php-fpm.sock
listen.owner = www
listen.group = www
listen.mode = 0666

影響受けるのはソケットでやってた人だけなのかな。
マスクなんてすぐに気付きませんって。