javascript:ブラウザ判定

使用ブラウザを判定したいとき。

 var userAgent = window.navigator.userAgent.toLowerCase();
 console.log('userAgent:',userAgent);
 if(userAgent.indexOf('msie') != -1 || userAgent.indexOf('trident') != -1) {
     console.log('Internet Explorer');
 } else if(userAgent.indexOf('edge') != -1) {
     console.log('Edge');
 } else if(userAgent.indexOf('opr') != -1) {
     console.log('Opera');
 } else if(userAgent.indexOf('chrome') != -1) {
     console.log('Google Chrome');
 } else if(userAgent.indexOf('safari') != -1) {
     console.log('Safari');
 } else if(userAgent.indexOf('firefox') != -1) {
     console.log('FireFox');
 } else {
     console.log('不明');
 }

Operaの判定はChromeより前で行う。

Operaでのユーザーエージェントの文字列にChromeが含まれているので。( 下記参照 ) userAgent: mozilla/5.0 (windows nt 6.1; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/61.0.3163.100 safari/537.36 opr/48.0.2685.50

(Opera48.0 ver:48.0.2685.50 (PGO))

 

参考 https://qiita.com/sakuraya/items/33f93e19438d0694a91d http://freefielder.jp/blog/2013/07/webkit-opera.html

CSS:WEBサイト印刷時にページが切れる・崩れる・消える現象の対策

WEBサイトを制作していると、ページを印刷しようとしたときに一部分が消えたり、縦が切れたりしてしまうことがあるので、その対策メモ。

overflowプロパティに初期値(visible)以外を指定していることが原因でした。

以下コード。 印刷用CSS(@media print)にて、初期値であるvisibleを指定することで解決。

/* 印刷用 */
@media print {
 body{
  overflow-y: visible;
  overflow-x: visible;
 }
 .divMain{
  overflow-y: visible;
 }
}

私はだいたい全体用CSSで「overflow-y:hidden; overflow-x:hidden;」と指定して、 各ページのスクロール部分で「overflow-y:auto;」と指定することが多いので、上記CSSのようになります。

ちなみに通常の「.divMain」CSSの下に記入しないと読み込み順的に反映されないので注意。

フッターを下部固定するために「min-height:calc(100vh - 500px);」などを指定していると、印刷時にフッターが半端に2枚目にはみ出たりするので、そういうときは印刷用CSSで「min-height:0;(初期値)」にしましょう。

反映されないときはキャッシュを消してみる。

 

あと検索していて見つけた興味深い印刷用プロパティ。

印刷時の改ページ位置を指定する。

たとえば下記のように指定すると、印刷時にh2タグごとにページが区切られる。

@media print {
 h2 {
  page-break-before: always;
 } 
}

※ always:強制的に改ページする

普通のWEBページならあまり出番はなさそうだけれど、章ごとに印刷するというときは便利かも。(そんな場面あるのか?) そのほかの値は下記リンク内参照。 http://www.htmq.com/style/page-break-before.shtml

スーパーマーケット関連の画像収集Tumblrを作りました

 

f:id:sgmtmzk:20170205205448p:plain

 

無人建築物にも通ずるものがあるのですが、スーパーマーケットも大好きです。

受け取り手待ちの情報が沢山あってたまりません。

外観、内装、陳列棚、商品、その他もろもろスーパーマーケットに関連する画像を収集したサイトです。

 

良いスーパーマーケット

スーパーマーケットには無数の、受取りきれない情報が存在、カテゴリごとに陳列され、棚、通路、棚、通路、幾多の色が洪水のように押し寄せてくるが、混ざりあうことはなく、あなたが選び取るまで、商品たちは身動きもせずただそこに佇むのみ

ii-supermarket.tumblr.com

 

同じものがずらっと綺麗に整頓されて並んでいるさまも好きなので、そういう意味ではスーパーマーケットに限らずユニクロ無印良品も好きです。たまに癒されに行きます。本当は閉店後の誰もいない状態が1番ですがそればかりはバイトでもしない限りしょうがないですね。

 

以前アメリカに行ったときはスーパーマーケットが広すぎて、物が多すぎて、情報過多で興奮しすぎて動悸が半端じゃありませんでした。楽しかった...

https://www.instagram.com/p/BBY91wZMexc/ https://www.instagram.com/p/BBY9nKfMexG/

Instagram

▲「 2列 」+「 2列の通路面」を使ってこのただのケースを陳列しているってすごくないですか?

 

https://www.instagram.com/p/BAdvlvjMe83/

instagram:walmart

▲ ひとつのカテゴリに対して場所がふんだんに使われている

 

色んな国のスーパーマーケットを巡る旅がしたい。

 

 

 

無人の建築物 ( 主に営業時間が存在する類のもの ) の画像収集Tumblrを作りました

 

f:id:sgmtmzk:20170205205117p:plain

 

かねてから作ろう作ろうと考えていたものをやっと形にしました。

私はタイトル通り、無人の建築物、人の気配が全然無くて、巨大な空間で、静寂と無と隣り合わせ、受け取り手のいない情報をもった無数の人工物に囲まれる、誰も見かけない…みたいな環境が大好きなんですが、そういう画像を収集したサイトです。

廃墟も好きなんですけれど、それはまた別で、退廃していない状態が良いんですよね。

 

誰も居ません

:人の気配がない。 開店前であり、閉店後であり、利用時間外であり、ただ利用されていない時間、方向性が失われた時間。 観測者が居ない、あらゆる情報の受け取り手が居ない世界で、尚も彼らは存在し続ける。定期メンテナンスのもと、退廃を許される宣告がなされるまで。

daremo-imasen.tumblr.com

幼稚園の塀と中国華北竜山文化

6年越しの謎が解けたかもしれない。

 

今「世界の歴史2 古代ギリシアとアジアの文明」を読んでいるんですけれど、華北で栄えた竜山文化の土器「三足土器」の画像を見た瞬間、衝撃が走りました。

f:id:sgmtmzk:20170205153620j:plain

▲キュートなフォルム、これがパンだったらこねくり回されすぎてて食べる気起きませんが焼き物なので良いですね

 

昔写真におさめて以来ずっと謎だったこの塀の動物に似ている・・・! ( 画像:右 )

f:id:sgmtmzk:20170205154006j:plain

▲西日具合がいい感じ、扉の青と、塀のピンク・茶がすごい合う、なんとなく絵本「ももいろのきりん」を思い出します

ももいろのきりん (福音館創作童話シリーズ)

ももいろのきりん (福音館創作童話シリーズ)

 

 

 

ちなみにこの写真は、当時学生で好きなテーマで「マップリーフレット」を作成するという課題の際に撮影したもので、私は自宅を中心とした半径500m以内の近所を、散歩しながらツッコミを入れるというマップ「R500 MAP」を作りました。( ↓ 部分キャプチャ ) 

f:id:sgmtmzk:20170205154310p:plain

▲テキスト位置のメチャクチャさに若さを感じる、今なら許せない反面新しさも感じてしまう、そして語彙の乏しさ

 

「幼稚園の塀に謎の生物が!右のなんて持つとこついてるし。」とつっこみを入れていますが、そこがポイントであり大事な大事なヒントだったんだ... 

右の謎の生物が三足土器だとすれば、左の牛は牧畜、または農耕 ( すきを牛に引かせる等 ) の表現とも考えられるぞ...

 

私が高校で真面目に世界史を学んでいればこの場で解けたかもしれない謎

高校で真面目に世界史を学ばなかったおかげで6年越しで解明するという快感を得られた謎

 

こういうことがあるので情報収集はやめられないですね。

読書もネットサーフィンも、関連付けられたときの快感がやみつきの一端を担っていると思う。

 

とりあえず今度からよくわからんものに取手がついていたら土器を疑うことにします。

 

図説 世界の歴史〈2〉古代ギリシアとアジアの文明

図説 世界の歴史〈2〉古代ギリシアとアジアの文明

 

 

ラスト・ウェイ・アウト

ラスト・ウェイ・アウト (ハヤカワ・ミステリ文庫)

 

フェデリコ・アシャット「ラスト・ウェイ・アウト」を読んだ。

 

訳者あとがきでも触れているように、まるで映画を観ているように、脳裏に映像が浮かぶ。どの本を読んでいても映像は割と浮かぶけれど、より映画と認識するというか、脳裏に浮かぶ映像の湿り気が映画っぽかった。

これを読んでいるさなか、どこかで映画:エスターについての文章中から何の気なし気にヴェラ・ファーミガを検索したら、作中のセラピスト/医師ローラの脳内イメージとぴったり一致した。気がする。

勝手にブロンドにしているのはドラマ:ハンニバルに出てくる女性精神科医がブロンドだった記憶があるからなのかな。外観についての描写なかったよね?確か。とにかくローラだけがはっきりとした印象で、キャスティングもされていたのでした。

 

綺麗に左右対称にしたのに、最後の最後に2/3あたりで真っ二つにちぎっちゃうみたいな、そんな感じ。

好きです。

 

ラスト・ウェイ・アウト (ハヤカワ・ミステリ文庫)

ラスト・ウェイ・アウト (ハヤカワ・ミステリ文庫)

 

 

 

Midnight in Paris

ミッドナイト・イン・パリを観た。

現在。現在と過去。コンテンツ。背景。現在のものではないコンテンツ。