銀の弾丸

プログラミングに関して、いろいろ書き残していければと思っております。

EdgeがIMGタグのSVGをストレッチしてくれないことがある

f:id:takamints:20181014160024p:plain

HTMLのIMGタグでSVG画像を表示するとき、EdgeではSVG画像がIMGタグのサイズに拡大・縮小されず、SVGで指定されたサイズでそのまま表示されることがあります。

他のブラウザ(ChromeFirefoxSafari)では大丈夫でした。 また他の画像形式ならばEdgeでも問題ありません。

どうやらEdgeでは、SVGのサイズ指定方法によって表示が変わるようです。これが不具合なのかどうなのかはわかりません。

このようにEdgeはちょっと邪魔くさいことが多く、ブラウザシェアも6%程度(2018年9月現在の日本国内シェア)のようなので、できれば無視したいのですが、Windows 10の標準バンドル品なので、無視しがたいのが悩み所・・・。

※ 本記事で確認しているEdgeのバージョンは42。レンダリングエンジンEdgeHTMLのバージョンは17。


目次

SVG関連の記事:

takamints.hatenablog.jp

takamints.hatenablog.jp

発生する現象

下の画像は、9×9のクロスハッチで、SVGのサイズは1215×1215pxのSVG画像です。 Edge以外では正しく表示されているはず。

gray-9x9-crosshatch-1215x1215.svg:

<img width="270px"
  src="https://takamin.github.io/images/gray-9x9-crosshatch-1215x1215.svg"/>

Edgeでは下のように表示されてしまいます。 IMGタグの領域内にオリジナルのスケールで表示されています。

原因

SVGファイル内での画像サイズの指定がstyle属性で行われていると、(Edgeだけで)この現象が発生するようです。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   style="width:1215px; height:1215px;"
   viewBox="0 0 321.46874 321.46876"
   version="1.1"
   .
   .
   .

対策

SVGファイルのSVG要素のサイズ指定をstyleではなくwidthと height で行えばEdgeでも正しく表示してくれます。

※ widthとheight属性でサイズ指定していても、styleでサイズが指定されていれば、スケーリングされないようです。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   width="1215px"
   height="1215px"
   viewBox="0 0 71.437498 71.437502"
   version="1.1"
   .
   .
   .

以下は属性だけでサイズ指定したSVGです。Edgeでも正しく表示されているはずですよ。

<img width="270px"
  src="https://takamin.github.io/images/gray-9x9-crosshatch-1215x1215-edge.svg"/>

他の対策

他の対策もありますので以下に書いておきますね。

style属性を書き換える

SVGのstyle属性でサイズを指定していても、表示したいサイズに変更すれば問題ありません。 しかしこれだと、大きなサイズの画像を縮小してサムネイル的に表示したいときなどに、ファイルを分ける必要があり、SVGを使っている利点が出ません。

XHRでSVGを取り出して表示。

外部サイトのSVGファイルなどで編集できない場合などは、別途XHRでSVGを取り出して内容を編集してから表示する必要があるかもしれません。 この場合は、IMGタグではなくインラインSVGSVGタグ)で表示する手もあります。

何が正しいのかよくわからん

この挙動が、HTMLの仕様として正しいのかそうでもないのかは読み取れませんでした。 しかし、SVGの仕様では、style属性の中でwidthやheightを指定できるという記述は見つけられませんでした。

つまり、本来widthやheightはstyleで指定するものではないけれど、Edgeはそれを(良かれと思って?)解釈してくれて、上記のような挙動になっているのかもしれません。

リンク

developer.mozilla.org

developer.mozilla.org

developer.mozilla.org

ウェブアプリからGoogle Driveのファイルを扱う 'gdrive-fs'

f:id:takamints:20171130164857j:plain
photo credit: suzyhazelwood DSC04299-02 via photopin (license)

ウェブアプリからユーザーの Google Drive のファイルを操作するモジュール(npm)を公開しましたので、ご紹介&宣伝しますよー。

これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん
たにぐちまこと
マイナビ出版 (2017-03-27)
売り上げランキング: 13,953

npmはこちらです。

www.npmjs.com

目次

関連記事:

takamints.hatenablog.jp

takamints.hatenablog.jp

機能概要

ユーザーのGoogle Drive のファイルを操作する

ウェブアプリケーションを利用するユーザーが、自身のGoogleアカウントでサインインすることで、 ユーザー自身のGoogle Driveのファイルへアプリケーションがアクセスする機能を提供します。

これによって、一般的なアプリケーションの「ファイルを保存する」機能や「ファイルを開く」機能をWebアプリケーションに実装できます。 ユーザーがウェブアプリを使って作成した情報を、ユーザー自身のGoogle Driveへ保存したり、再び開いたりする機能ですね。

これらのファイルは、ユーザーが特別に共有設定などをしない限り、他人には見ることができません(ただしアプリは内容を把握できることには注意が必要)。

パス名でファイルを操作する

ローカルのファイルシステムと同じように、ファイル名とフォルダ名によって構成されるパスを使ってファイルを扱うAPIを提供しています。 Google Drive APIでは、ファイルIDを元にしてファイルにアクセスします。 でも、ユーザーが目にしているのはファイル名ですので、パスでアクセスできるほうが直感的ですよね。

APIは、おおまかに、Node.jsのFsモジュールのメソッド名に従っています(一部processモジュールなど)。 ただし、多くが非同期関数として動作しますが、callback は受け付けず、Promiseを返します(ほとんどが async 関数です)。

UI作成支援機能

こちらはまだα版。動作確認用のサンプル実装程度です。 そのうちまじめに作って公開するつもりなのでちょっと待ってネ。

インストールと使い方

npmで公開しているので、npmでinstallしてください。

$ npm install --save gdrive-fs

バンドラーを使われているなら、CommonJS的にインポートしてください。

const Gdfs = require("gdrive-fs");
(async()=>{
    await Gdfs.loadApi(<clientId>, <apiKey>);
    .
    .
    .
})();

バンドラーを使っていない場合、HTMLのScriptタグで 本モジュールの/build/gdrive-fs.min.jsを読み込んでください。 この場合、グローバル変数として、Gdfsが利用できます。

<!DOCTYPE html>
<html>
<head>...</head>
<body>
.
.
.
<script src="<path-to-module>/build/gdrive-fs.min.js">
(async()=>{
    await Gdfs.loadApi(<clientId>, <apiKey>);
    .
    .
    .
})();
</script>
</body>
</html>

動作条件

APIキー」と「クライアント ID」

ウェブアプリ開発者は、Google Developer Console でプロジェクトを作成し、ウェブアプリケーション向けの認証情報として、「APIキー」と「OAuth 2.0のクライアント ID」を作成し、適切に設定しておく必要があります。

多くの場合、APIキーはHTTPリファラーによる制限をかけ、クライアントIDのタイプは「ウェブアプリケーション」としておきます。

APIリファレンス

本モジュールが提供しているクラス、APIの説明は、以下のリンクからどうぞ。 現在英文で書いていますが、翻訳したらこちらに掲載しなおします。

(英語は個人的な練習&お勉強です。英語の得意な方からの指摘をお待ちしております m( uu )m)

制限事項・注意事項

名前だけではファイルを特定できない問題は無視

Google Driveでは、一つのフォルダ内に同じ名前のファイルが複数存在できます。 なので、本当は名前だけではファイルを一意に特定できません。 でも、そういう使い方自体が混乱のもとですから、本モジュールではバッサリ無視して最初に見つけたほうを採用しています(多分)。

削除してもゴミ箱には入りません

Gdfs.unlink(path) メソッド で削除した場合、ごみ箱には入りませんので、重々気を付けてくださいね。

セキュリティ警告とアプリケーションの申請について

未申請のアプリケーションに、ユーザーがサインインしようとすると「安全でないアプリケーションである」との警告が表示されます。 Googleにアプリケーションを申請して承認されていれば、これは表示されなくなるはずです。 アプリケーションを正式に公開する場合は申請しておいたほうが良いでしょう。

アプリケーションの申請はそれぞれのエンドポイントで行う必要があるため、本モジュールで行うものではありません。

ライセンス

本モジュールはMITライセンスにおいて公開しています。

免責

本モジュールは、これを利用するアプリケーションの安全性を保証せず、その動作について一切の責任を負いません。 本モジュールを利用するアプリケーションのすべての動作は、アプリケーションの製造者の責任において試験され、ユーザーに提供されるべきです。 悪意のあるアプリケーションや不具合によって被害を受けないためには、信頼できる人以外が作ったアプリケーションには接続するべきではありません。

SVGでツールチップを表示する

f:id:takamints:20181014113409p:plain

小ネタです。SVGツールチップを表示する方法です。

ホームメイド 製菓用チョコチップ160g
共立食品
売り上げランキング: 114,017

ツールチップってのは、マウスポインタを乗せてしばらくすると、小さなボックスに説明文などが表示されるアレですね。

HTMLの場合

HTMLでは「title属性(Attribute)」です。 title属性に表示したい内容を設定しておけば、マウスポインタを乗せてしばらくすると、ツールチップが表示されます。

以下のHTMLで描いたボックスにマウスを乗せると・・・

HTMLでは「title属性(Attribute)」に設定します。

ソース:

<span style="border-radius:5px; background-color: #080; color:white; font-weight:bold; padding: 1em 2em;"
class="tooltip-container"
title="これはTITLE属性の内容です。">
HTMLでは「title属性(Attribute)」に設定します。
</span>

SVGの場合

しかし、SVGにはtitle属性がありません。 「じゃどうするか?」って調べてみると「SVGでは『title要素』を使いましょう」とのことでした。

以下のインラインSVGで描いた図形にマウスを乗せるとSVGツールチップが表示されます。

これはSVGのタイトル要素。 SVGではTITLE要素に設定しますの・・・

ソース:

<svg viewport="0 0 400 100" width="100%">
  <g>
    <title>これはSVGのタイトル要素。</title>
    <rect x="0" y="0" width="400" height="100" fill="#080" rx="5" ry="5"/>
    <rect x="30" y="20" width="50" height="50" fill="#008" rx="5" ry="5"/>
    <rect x="70" y="45" width="30" height="30" fill="#088" rx="5" ry="5"/>
    <rect x="20" y="50" width="40" height="40" fill="#800" rx="5" ry="5"/>
    <circle cx="340" cy="75" r="20" fill="#880"/>
    <circle cx="310" cy="40" r="40" fill="#808"/>
    <circle cx="350" cy="32" r="30" fill="#088"/>
    <text x="25" y="80" width="400" fill="white" font-weight="bold"
        >SVGではTITLE要素に設定しますの・・・</text>
  </g>
</svg>

JavaScriptではツールチップの内容は、title要素のtextContentに設定します。