すちをブログ

すちをブログ

デンマーク・スウェーデン・アイスランドへ行った その1

11月に11日間かけて北欧のデンマークスウェーデンアイスランドへ行ってきた。
どの国もよかったが、特にアイスランドが今まで行った国の中でも一番ではないかと思うくらい素晴らしかった。

今回は日本出発〜コペンハーゲンについて振り返ってみる。

1日目 コペンハーゲンへ出発

アイスランドへは日本から直接行くことができないため、デンマークコペンハーゲンに数日滞在しスカンジナビア航空を利用して向かった。
ちなみに飛行機代は往復で10.5k (サーチャージ込) とかなり安かった。


f:id:suteewo:20161110030747j:plain
おなじみの成田空港


f:id:suteewo:20161110025310j:plain
搭乗

コペンハーゲンまでは11時間30分ほどかかるが機内で出た白ワインを飲んだら寝不足もあってか速攻寝てしまっていた。


f:id:suteewo:20161110025343j:plain
標準的な機内食1 🍞は美味しかった。IKEAにあるようなケーキが出る。

機内でWi-Fiが使える(€10くらいだった)と座席ポケットに書かれたしおりがあり、試しにプルリクをしてみようと接続を試みたが支払画面でタイムアウトしまくりだったので諦めて映画を何本かみた。


f:id:suteewo:20161110025342j:plain
標準的な機内食2

空港に着いてコペンハーゲンカード(電車や地下鉄観光施設が無料になるカード24時間分を購入 約6,000円)やSIMカード(1GBで約700円 総務省指定のiPhoneにぶち込む)を買ったりなんやかんやしていたら夕方になったのでそのままホテルへ向かった。


f:id:suteewo:20161110025309j:plain
コペンハーゲンのカストラップ空港


f:id:suteewo:20161110013450j:plain
空港を出ると夕方で日が暮れはじめていた。


ホテルは2人で1泊1.3kくらいのとこをエクスペディアで予約した。
1851年に作られた歴史のある建物で外観は由緒ある感じだったが、内装はモダンな感じになっていた。


f:id:suteewo:20161110025302j:plain
ホテルの中庭のようなところ


2日目 コペンハーゲンをまわる

この日は1日かけてコペンハーゲンの主要な箇所を観光していった。

f:id:suteewo:20161110025308j:plain
時差のせいか早朝に起きたのでホテル周辺を散歩する

f:id:suteewo:20161110025341j:plain
ホテルの朝食のパンが充実している

f:id:suteewo:20161110025301j:plain
好きな大きさに自分でカットするタイプ

f:id:suteewo:20161110025340j:plain
朝のコペンハーゲンの町並み

f:id:suteewo:20161110025338j:plain
確か大学だった

f:id:suteewo:20161110025339j:plain
ハロウィン前でかぼちゃをくり抜いたキャンドルの置物があちこちに飾られていた

f:id:suteewo:20161110025300j:plain
carlsbergをはじめとする充実のビール


1時間ほど船でコペンハーゲンを回った後、ストロイエを通り最近できたノアポート市場に行くことにした。

f:id:suteewo:20161110025337j:plain
ノアポート市場

f:id:suteewo:20161110025334j:plain
デンマークの野菜

f:id:suteewo:20161110025321j:plain
デンマークの花

f:id:suteewo:20161110025335j:plain
こちらもパンが充実している

市場には食事ができるお店があったのでデンマーク名物のスモーブロー(オープンサンド)を食べることにした。


f:id:suteewo:20161110025333j:plain
白身魚のフライとサーモンのスモーブロー


その後、ローゼンボー城を見学した。
この城はデンマーク王家が夏に訪れるための離宮として作られたそうだ。中はヨーロッパでよくみられるルネサンス式の作りになっておりとても贅沢だった。


f:id:suteewo:20161110025332j:plain
城の外観

f:id:suteewo:20161110025330j:plain
城内の博物館にあった展示物

f:id:suteewo:20161110025331j:plain
城周辺の庭園


その後、コペンハーゲン郊外のフムレベック(Humlebaek)という小さな町にあるルイジアナ美術館に電車で向かった。
この美術館は1856年に建てられた家を改装して作られたようで、中は幾つもの繋がった建物と大きな庭があった。



f:id:suteewo:20161110025329j:plain
先頭についているゴムみたいなのが気になる 🚃

f:id:suteewo:20161110025326j:plain
道中の景色はすっかり秋模様である

f:id:suteewo:20161110025328j:plain
カルダーの彫刻庭園

f:id:suteewo:20161109234530j:plain
大きな庭のような広場では子どもたちの賑やかな声が聞こえた


その後コペンハーゲン駅に戻りチボリ公園の中を少し覗いたが、ものすごい人で早々に退散した。
写真にはないが、コペンハーゲン中央駅を降りた一等地に広島のパン屋「アンデルセン」が鎮座しており少し驚いた。

www.andersen.co.jp



f:id:suteewo:20161110025327j:plain
公園内の船

f:id:suteewo:20161110025324j:plain
かかしのクオリティは日本のほうが上か

f:id:suteewo:20161110025323j:plain
公園とは思えない絶叫系の乗り物

f:id:suteewo:20161110025307j:plain
夜の町並み

この日はもう少し行動したが長くなるのでこの辺で終わりにしたい。
次回はスウェーデンのマルメに行った記事を更新することにする。



CSSのfilter:blur()をうまく利用する

Can I use... Support tables for HTML5, CSS3, etc

CSS3のfilterプロパティがほとんどのブラウザでサポートされていたので下記のようなマウスオーバーした画像を全体の背景にして切替時にfadeInするような実装をした。

背景画像はCSSfilter:blur(40px); でボケボケにする。

当初このような実装をしていたのだが、大画面でblurさせた要素にopacityのアニメーションをかけると will-change: opacity; の甲斐も虚しくFirefox49ではカクつきが発生してしまっていた。

詳しくみてみるとFirefoxはアニメーション最中にFPSが最低の5.63fpsまで低下しており、filter: blur(10px); だと7.79fps、全くつけない状態だとアニメーション中fpsは20前後となった。 描画面積は1200*680でmacOS Sierra i7/2.5GHz/16GB検証

filter: blur(40px); f:id:suteewo:20161018132650p:plain

filter: blur(10px); f:id:suteewo:20161018132657p:plain

filter: blur(0); f:id:suteewo:20161018132658p:plain

opacityはComposite layerで処理されるはずだが、それでもカクつきが起こっている状態が治らないので別のアプローチで解決方法を考えることにした。

Chromeなんかは逆にこの辺の挙動がいいかんじである。

上記の通り根本的な原因はblurのかけ過ぎにあったので、blurを極限まで弱くかつwidthを縮小し、transform: scale(4); で拡大し似たような見た目にすることにした。

改良版

See the Pen wzYWvd by aun343 (@aun343) on CodePen.

See the Pen wzYWvd by aun343 (@aun343) on CodePen.

filter: blur(8px); transform: scale(3); f:id:suteewo:20161018151450p:plain

24fps位は出ており、見た目もほぼ気にならないのでいいのではないかと思っている。

bowerを導入した 〜gulpを添えて〜

今更ながらbowerをつかってみました。

bowerについて

Twitter製のフロントエンドパッケージマネージャです。 Node.jsのnpmのフロント版ツールという認識でいいと思います。

なぜ導入したか

クライアントサイドで新しいライブラリを入れようとソースをコピペする作業をした瞬に。。。

必要なもの

  • $ npm install bower -g グローバルでインストールします。
  • bower.json このJSONファイルに管理したいファイルパスやバージョンなどを書いていきます。
  • .bowerrc ルートディレクトリ以外にbower.jsonを置きたい時や、bower.jsonに記載したファイルの置き場所を指定したい時に使います。 Configuration · Bowerこちらに設定一覧があります。

管理するディレクトリを設定する

.bowerrcファイルをrootに作る

{
    // bower管理したいディレクトリ
    "directory": "bower_components/"
}

使いたいライブラリにタグが存在しない

(例)

{
  "dependencies": {
    // ライブラリにbower.jsonが存在しタグで管理されていればバージョン番号を指定するば良い
    "TweenJS": "0.4.1",
    "PreloadJS": "0.3.1",
    // そうでない場合はコミットのハッシュ値で管理する
    "EaselJS": "http://github.com/thammin/EaselJS.git#5e61534164"
  }
}

$ bower install nameの後に、パスを書かないといけない

ck86/main-bower-files · GitHubでbower.jsonファイルを読み、dependenciesで定義した、パッケージのコアファイルを返します。 色々調べましたが、main-bower-files以外を使っているのを見けませんでした。

{
    "overrides": {
        "BOWER-PACKAGE": {
            // gulpを使ってdistしたいファイル名を書いておく(bower_components内のライブラリのファイルのパスです)
            "main": "lib/hogejs-*.*.*.min.js",
            // 配列で複数指定も可
            "main": [
              "lib/hogeljs-*.*.*.min.js",
              "lib/fugaljs-*.*.*.min.js"
            ]
        }
    }
}

npm memcaced clientを0.3系から2系にメジャーアップデートしようとした

c++コンパイラがビルドサーバーにインストールされておらずhashringで警告された、

www.npmjs.com

yum info gcc-c++で確認してみる。

Available Packages
Name        : gcc-c++
Arch        : x86_64
Version    : 4.4.7
Release    : 3.el6
Size        : 4.7 M
Repo        : base
Summary    : C++ support for GCC
URL        : http://gcc.gnu.org
License    : GPLv3+ and GPLv3+ with exceptions and GPLv2+ with exceptions
Description : This package adds C++ support to the GNU Compiler Collection.
            : It includes support for most of the current C++ specification,
            : including templates and exception handling.

やはりインストールされていなかったので yum install gcc-c++を行った。

Charles 3.10以降でiOSでMapLocalができずハマった件

Charles3.10以降では新しいSSL証明証が必要で、なおかつJava8がインストールされてないとmapLocalができなくなっていた。

Version History • Charles Web Debugging Proxy

Java 6 is really old, and it doesn't support any of the latest SSL ciphers, which are increasingly essential these days. Not to mention other SSL features. So I'm thrilled that Java 8 is working well on Mac OS X now, including on retina displays.

新しくプロファイルをインストールする必要があるので

http://www.charlesproxy.com/getssl

こちらからDLする。

これまでとURLが変わっていてわかりづらい。

もう少しアプリケーション側で警告してくれた方が親切な気がした。