ウェブデザイン on akky@サイボウズラボ・ブログ

The Deep Sea - 深海の深さをブラウザの縦スクロールで表現

Sun, 08 Dec 2019 00:00:00 +0000

The Deep Seaは、深海の生物を紹介するウェブサイトです。

面白いのは、深さを縦長のウェブページで表現しているところ。

スクロールダウンすると、海の深さが少しずつ深くなっていき、その深さで観察される生物が表示されます。

生物の名前やその特徴の紹介文などはすべてテキストなので、Chrome ブラウザの翻訳機能を使えば自動翻訳の日本語でも読むことができます。

それにしても、このページ、長い長い。ページの最後は、1960年にマリアナ海溝の最深部に到達したトリエステ号のチャレンジを紹介しています。

via Geekologie

StackOverflow が90年代風にデザイン変更も、Netscape Navigator 3.0で表示できず

Mon, 01 Apr 2019 00:00:00 +0000

StackOverflow をはじめ、StackExchange の各質問サイトが一斉にデザイン変更されています。

上部にはバナーが右から左へ流れ、マウスカーソルの後にはキラキラ星がついてきます。

同社のアナウンスによれば、この「タイムマシン機能」によって、もしStackExchangeが1998年に存在していたなら、を追体験できるということ。

ページのフッターには、ゲストブックも設置されています。

しかし、ゲストブックの後ろ、サイトの末尾に高らかに「Netscape 3.0で最も良く表示されます」アイコンをつけたせいで、バグレポートが出されています。

「Netscape Navigator 3.0 で表示したが何も出てこない」

試したんかい。

しかし、実際問題、NN3 でも表示できるようにするのって大変そう。NN3 で「だけ」表示ならともかく。

Salieo - レスポンシブ・いい感じに画像を切り出し表示してくれるサービス

Tue, 17 Apr 2018 00:00:00 +0000

Salieo は、Javascript で画像ファイルから写真の重要そうなところを切り出して表示してくれるというサービスです。サイトのキャッチは"instantly, intelligently, responsive"(即座に、賢く、レスポンシブに)となっています。

ユーザー登録してAPIキーをもらってみました。同じ一つの写真がこんな風に自動でクロップされて表示されます。

比較のため、スクリプトをオフにすると以下のようになります。横長でも縦長でも、元の画像がそのまま縮むので、車の形がゆがみますね。

# 物があるところをうまく切り出してくれる、ということなのですが、この写真はちょっと例には良くなかったかな。

ユーザー登録した上で、申請したドメインやURLパターンに合致した画像だけが変換の対象となります。変換できる画像の数や変換の回数によって料金が変わりますが、一番下の無料枠でも10画像、月25,000回までの呼び出しができるようです。

先行の類似サービスとして、imaggaやImageKit.ioが見つかりましたが、どちらも無料枠は無いようです。Salieo の無料枠もお試し用という感じの枠ではありますが、実際に試せるのはやはりいいかと。

これらのサービスを使えば、切り出しについて特に考えずに元の画像一つをアップロードしておけば、サイトで表示した時にその時の縦横比にあわせて動的にクロップされるわけです。あとは写真から重要そうな場所を切り出す判定部分の精度が良ければ、画像が表示される際の縦横比を固定しにくいサービス運営者からは、有料でも嬉しいサービスとなるかもしれません。

via Hacker News