« 風モザ 追記:反り指の人について | トップページ | 風モザみてた »

2016年5月19日 (木)

学内ホール案内図を作成

 演奏会の会場が今年は変更ということで、一足先に、会場案内図を作成しておきました。

 なんでかっていうと、今年も現役の人手が足りてるとはいえず、早めに巻きで動かしとかないと、後で抱え込んで倒れて人も時間もなくなるとかあり得るんで…
 (人に頼らずまじめに頑張るのはいいことではないよ、どっちかというと、一人で抱え込んで倒れるとか、あとから手間増えるし、キツいことをいえば信頼関係やら協調性やらコミュニケーション能力が心配です。
 できないなら早めに荷物を誰かに分けちゃえよー時間さえあれば何とかなるんだ)

 まぁそれはいいとしても、私の方でも早めにしておけば安心、というわけでしてw

 で、ふだんwebやらないので使ったことがなかったんですけど、SVG(ベクター形式の画像フォーマット)を使ってみました。

 SVGってなに?という私のようなひとのために書いてある記事がこちら。
 WEBデザイナーのはじめての「SVG」

 普通の画像は、ラスター形式といって、ドットを使って表示してあるので、画像を拡大するとザキザキの荒れ荒れのなってしまうんですね。
 SVGは、ベクター形式という別のフォーマットなので、どれだけ拡大してもなめらかでそのまんまのものが表示されるのです。

 ためしに、18*19pxのアイコンをブラウザで500%拡大してみます。

20160519_svg_gif_500

 左がSVG、右がgifのアイコン。スクショでとって並べました。
 見え方全然違うの、わかると思います。
 スマホで画像を見るとき、画面が小さい分、拡大して見たいとき多いと思うので、どうしてもきれいに地図の文字が読めるようにしたくて。

 SVG、アニメーションもできるみたいから、面白いなーと思うのですけど、今回は、「拡大してもきれいに読める地図」のためのSVGなので、動きはないです。w

 マウスをオンしたときに変わる、ホバー効果もつけてみたいなーと思うんですけどね。
 地図の駅にマウスをのせたときに、経路がピカピカして道がわかりやすくなるとか。同じく、バス停ホバーしてそこからの道がピカピカ。とか。
 でもタッチデバイスでそれは意味があるのかどうかとか;

 スマホで見ることを前提としているので、拡大したときに荒れないのが、一番の目的なんで、重くなるのはアレだな…

 重さといえば、SVGを圧縮するSVGZという保存形式があるのですけど、それを使うと、ブラウザで見れなくなってしまって、困ってました。
 htaccessというやつに追記すればいいみたいだけど、追記してみたけど駄目だったから、何かあるんだろうとは思います。
 幅指定を%にしてるせいかな…;

 とりあえずはSVGの保存、詳細設定して少しは軽くできたので、暫定これでいっておこうかと。

 なんとか、形にはなったから良かったな…

 できるときにできるとこまでやっとくと、個人的には一安心w
 あとは修正待ちであれこれしたらいいだけなんで、ちょっと気が楽ですw

 

|

« 風モザ 追記:反り指の人について | トップページ | 風モザみてた »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/129339/63654065

この記事へのトラックバック一覧です: 学内ホール案内図を作成:

« 風モザ 追記:反り指の人について | トップページ | 風モザみてた »