Chromeで日本語変換中の文字色が変わる時の対処
Chromeアップデートしたら日本語変換中に文字が消えてしまい、調査した結果。
Chromeのバージョン36から変換中の文字に、選択時の文字色CSSが反映されるようになったみたいです。
つまり日本語変換中に文字色が変わる場合は::selectionでcolorなどを弄ってるはずなので、そこを削除すればなおります。
::selection { background-color: #999; color: #fff; } ::-moz-selection { background-color: #999; color: #fff; }
僕はこんな感じで指定していたので変換中は文字色が白になってしまい、あたかも消えたようになって見えたのでした。
::selection { background-color: #999; } ::-moz-selection { background-color: #999; }
こうすることで直りました。
が、テキスト選択中の色が普通のままなので見づらくなりました。対策方法は見当たりません。
変換中の文字に選択中のCSSを当てるのはいいとして、何故文字色だけにしたんでしょう。
日本語ドメインからfile_get_contentsを使ってHTMLを取得する
file_get_contentsって日本語ドメインに対応してないので、
$url = 'http://日本語.jp/'; $html = file_get_contents($url); echo $html;
とかやろうとすると
PHP Warning: file_get_contents(http://日本語.jp/): failed to open stream: php_network_getaddresses: getaddrinfo failed: nodename nor servname provided, or not known in nihongo_domain.php on line 2
とか出て怒られます。
punycode
日本語ドメインってpunycodeという、普通のURLと同じような半角英数で出来たURLに変換されるようです。
日本語.jpだと
http://xn--wgv71a119e.jp/
というURLに変換されます。
このURLならfile_get_contentsでも取得できそうです。
日本語ドメインをpunycodeに変換する
PHP標準ライブラリでは変換出来ないのでPEARのライブラリを使います。
sudo pear channel-update pear.php.net
sudo pear install Net_IDNA2-0.1.1
PHPで日本語ドメインを扱う方法（Punycode変換）
ここを参考にしてやってたんですが、
Non-static method NET_IDNA2::getInstance() should not be called statically.
ってエラーが出たのでちょっと変えてこうします
require_once 'Net/IDNA2.php'; $idna = new Net_IDNA2(); $idna_instance = $idna->getInstance(); $url = 'http://日本語.jp/'; $encoded_url = $idna_instance->encode($url); $html = file_get_contents($url); echo $html;
HTML5で背面カメラを取得する
HTML5が世に出て久しく立ちますがあまりカメラを使ったサービスって見ないですね。
ピントが合わせることが出来なかったり対応してるブラウザが少ないのが原因だと思いますが。。。
「HTML5 カメラ」とかで検索するとgetUserMediaを使ってカメラ映像を取得しよう！みたいな記事が多いんですが、スマホなどで2つ以上カメラがある場合どちらか一方（ほとんどが内側カメラ）しか取得出来ないんですね。
なので背面カメラを取得したいと思います。
MediaStreamTrack
端末にあるカメラとかマイクの一覧を取得するAPIとしてMediaStreamTrackというものがあります。
MediaStreamTrack.getSourcesというAPIを使用するとカメラやマイクのIDを取得することが出来ます。
MediaStreamTrack.getSources(function(data) { console.log(data); });
という感じで呼び出すと、対応したブラウザでかつカメラやマイクがあるならコンソールに以下の様な感じで吐き出されます。
0: SourceInfo facing: "" id: "bf9f10e6cf64b14a4c5b544ccda64932e9565706316e78c2f97864ed2fd0338a" kind: "audio" label: "" 1: SourceInfo facing: "" id: "b65d00ea51cf8ea7cd33c31fc0dfc7e08ae7ee6b89b55b21d9454bf43efc16b7" kind: "audio" label: "" 2: SourceInfo facing: "" id: "3d75291cbeaffcdd1907f3fb9ec933c1846991f74795f02ad7ac72201b06f186" kind: "video" label: ""
これはMacbookAirでやった場合です。
このidがマイクやカメラへアクセスするときに必要になります。
背面カメラを取得する
getUserMediaで{video:true}みたいな感じでカメラを取得すると端末のデフォルト？のカメラが勝手に取得されますが、先ほど取得したIDを変数などに保持しといて以下のようにすると、対象のカメラを取得できます
navigator.getUserMedia({ video: { optional: [{sourceId: VIDEO_SOURCE_ID}] } });
VIDEO_SOURCE_IDの部分を変更してください。
マイクも一緒に取りたい場合は以下のようにしてください。
audio: { optional: [{sourceId: AUDIO_SOURCE_ID}] }, video: { optional: [{sourceId: VIDEO_SOURCE_ID}] }
デモ
Androidの最新版Chromeなどで見てください。Android標準ブラウザは対応していません。
iPhoneはどのバージョンでも対応してません。
HTML5で背面カメラを取得する - 遊び場
参考
ここに書いてあることのほとんどはここを参考にしました。というかほぼ一緒です。
simpl/getusermedia/sources/js/main.js at master · samdutton/simpl · GitHub
日本語の文章が少ないので増えて欲しいところですねー
FuelPHPでEXIF情報を読み画像を回転させる
iPhoneで撮った画像をサーバーにあげて表示すると、全て横向きで表示されます。
これはEXIFの情報で縦にしてるからなんですね。知らなかったです。
ということでEXIF情報を読み込んでFuelPHPで角度にあった回転をさせます。
public static function exif_rotate($filepath)
{
try
{
$exif = exif_read_data($filepath);
}
catch(Exception $e)
{
return 0;
}
if (isset($exif['Orientation']) && is_numeric($exif['Orientation']))
{
$rotate = 0;
switch ($exif['Orientation'])
{
case 1:
case 4:
break;
case 2:
case 3:
$rotate = 180;
break;
case 5:
case 8:
$rotate = 270;
break;
case 6:
case 7:
$rotate = 90;
break;
}
return $rotate;
}
return 0;
}こんな感じの関数を用意しました。
これにファイルパスを投げると画像に必要な回転の角度が返ってきます。
使い方はこんな感じ
$filepath = 'image.jpg'; Image::forge()->load($filepath)->rotate(self::exif_rotate($filepath))->output($filepath);
exif_read_dataでEXIF情報を読み込みます。
Orientationキーが回転を表す数値です。
詳しいことは下のURLを参考にさせてもらいました。
JPEGのExifタグ情報のOrientaionの定義の早見表 - DQNEO起業日記
EXIF情報はjpegかTIFFとかいう画像にしか存在しないので、それ以外のファイルが指定された時は0を返すようになっています。
本当は左右反転、上下反転ていうのが定義されてるのですが、GDには反転するメソッドは用意されていないし、わざわざ反転する人も殆ど居ないので無視しちゃってます。
Imageクラスのでrotateメソッドを使って回転させます。
Image - クラス - FuelPHP ドキュメント
これでiPhoneで撮った画像も正しい角度で表示されます
料理を美味しく見せるためのCSSフィルター
CSSフィルターって名前だけは聞いたことあったんですが、こんなに色々出来るんですね。。
・グレースケール
・セピア
・色相
・明度
・彩度
・透明度
・階調の反転
・コントラスト
・ドロップシャドウ
・ぼかし
CSSさんナメてましたごめんなさい。
CSS3のフィルター効果をまとめた | おぼめも
上記URLでとっても素晴らしい効果の数々を確認出来ます。綺麗なサイトですなぁ。
料理を美味しく見せるには
暖色系を使う
図る〜色と食欲の関係
人間には暖色系の色（赤とかオレンジ）を使うと食べ物がより美味しく見えるようです。
入った瞬間に売れなそうな店だなー、とか美味しくないのでは・・・と思う店ってあるんですが、そういうとこって大体青白系の蛍光灯を使ってるんですね。
よく中華料理屋とかラーメン屋とかで見かけます。
記憶色に近づける
用語解説辞典 | NTTPCコミュニケーションズ
人間は目で見たものを記憶するとき、より鮮やかな色として記憶するそうです。
つまり実際の色と同じ色の写真を見せるより、鮮やかな色にすることで記憶色に近い写真になるといえます。
CSSフィルター
元の写真。僕がどこかのラーメン屋でiPhone5Sで撮りました。
これだけでもラーメン好きの僕としてはかなり来るんですが、もっと美味しそうに見せられます。
明るさを足す
店内は大抵暗くて明るさも足りないので、明るくします。
img { -webkit-filter: brightness(1.2); -moz-filter: brightness(1.2); -o-filter: brightness(1.2); -ms-filter: brightness(1.2); filter: brightness(1.2); }
彩度を足す
記憶色に近づけるため鮮やかな色合いにします
img { -webkit-filter: brightness(1.2) saturate(150%); -moz-filter: brightness(1.2) saturate(150%); -o-filter: brightness(1.2) saturate(150%); -ms-filter: brightness(1.2) saturate(150%); filter: brightness(1.2) saturate(150%); }
ぐっと美味しそうになりましたね
暖色系にする
色相を弄って暖色系にします。
img { -webkit-filter: brightness(1.2) saturate(150%) hue-rotate(-10deg); -moz-filter: brightness(1.2) saturate(150%) hue-rotate(-10deg); -o-filter: brightness(1.2) saturate(150%) hue-rotate(-10deg); -ms-filter: brightness(1.2) saturate(150%) hue-rotate(-10deg); filter: brightness(1.2) saturate(150%) hue-rotate(-10deg); }
このhue-rotateってパラメータをどんどん弄ってくと、逆に青系とかの色にも出来るのでまずそうな写真にも出来ます。
元画像と比較
全然印象が違いますね！
個人差はあると思いますが僕は圧倒的に右の方が美味しそうに見えます。
てかラーメン食いたくなった！クソ！
各パラメータは画像によって調整が必要ですが、今あげた3つのフィルターをかけるだけでも結構効果が見込めますね。
