google map 印刷時バグの対策・解決策

こんにちは。そらまめです。

本日も以前の印刷用CSSに続いて、WEB関連のお話です。

印刷用CSSについてはこちらをご覧ください。

印刷用CSS printCSS の改行や背景について

google map を使ってサービスってたくさんあるんですが、

web view では問題なくても、

印刷時に途切れたり、ページを跨いだりということがあります。

そんな中、今回はなぜか chrome や safari ブラウザで google map を横印刷すると、

謎の帯?余白?が出てしまうバグと遭遇したので、

そのお話とバグ回避についてお話しします。

google map 印刷時に出る帯・余白のバグが起こる条件とは

まず、今回の印刷時に帯のような余白のようなものがでる再現パターンは下記になります。

  • google map API を使用しての埋め込み
  • chrome や safari ブラウザで横印刷時
  • 特定のgoogle map サイズ

google map API を使用しての埋め込み

今回の場合、google map の ifreme ではなく、 API を使用しての埋め込み時に起きました。

ifreme 使用時には起きなかったのですが、 google map API を使用すると起きるという現象でした。

chrome や safari ブラウザで横印刷時

また、再現の状況としては、 chrome や safari ブラウザで起きており、

IE や  Edge などでは 帯や余白はないものの、

ページをまたがったり、他要素に被ったりと

これはこれでバグが起きていました。

特定のgoogle map サイズ

サイズが特定の場合、再現することはないのですが、

それ以外のサイズではこのバグは発生し、

発生率もそれなりに高いものなのかなと思います。

他に再現してる人はいるのか?

このバグに直面して、まずは回避策や解消策がないかググります。

基本、この手のものはググれば出てきます。w

ググると出てくるのかこの辺り

埋め込んだグーグルマップで印刷時、横を指定すると帯がでる
Google Maps JavaScript API で埋め込まれた地図を、横方向で印刷しようとすると、ある部分で横に白い帯が出て上下に地図が続かない。
ブラウザで普通に見るのは問題がないが、印刷プレビューで帯が発生し、印刷するとプレビューの通り帯がでる。縦印刷は問題なし。

Google マップ ヘルプ フォーラム

これはフォーラムと言われるもので、いわゆるその手の有識者同士が問題などがあった時に解決策を検討したり、

アドバイスしたりという掲示板のようなものですかね。

ここに出てくる時点で、まあそれなりのバグかなとは思います。

この時、確かにこれと同じ症状だったのですが、

残念ならがら上記のフォーラムでは私の実装する内容での解決策はありませんでした。

また、フォーラムでは縦印刷は問題なしとありましたが、

私の場合、縦印刷でも帯・余白のようなものが出ることはありました。

さらには、teratailでも質問がされていました。

Google mapを印刷する時、地図が欠ける
地図を印刷して来られる方がいるのですが、地図を印刷する際に地図の一部分が欠ける(グレーになる)と指摘を受けました。
確認してみるとChromeで印刷する時にどうやら発生するようで下数%がグレーになっていました。

ITエンジニア特化型Q&Aサイトteratail

こちらは、teratailというサイトで、

基本的にはエンジニア特化のQAサイトですね。

この質問は2016年にされていますが、未だ回答がついていないという状態ですね。

このように、再現してる人はいますし、

実装者としてはブラウザや印刷レンダリングでのバグなので、

「ようわからん!!」というのが正直なところで頭を抱えることも多々ある話です。

google map 印刷時に出る帯・余白のバグを回避・解消する方法

今回、実装するなかでバグの調査をしつつ、回避、解消策を模索していました。

一つは、特定のサイズにして対応させることでバグが起きないようにということも考えましたが、

特定サイズの場合、印刷時にページがまたがってしまうなどの問題もあり、

根本的な回避、解決にはなりませんでした。

そんな中、調査をしてると海外のフォーラムを見つけました。

書かれている内容は私が直面した内容と同一のものでした。

その中で回避策として上がっていたのは、

#map_canvas div > img {
  position: absolute;
}

google map api を使った地図描画はimg画像を256×256に分割した画像をタイル式に並べて描画しています。

そのimg画像にpositionをつけるというものでした。

この内容でも私が直面した問題は回避はできましたし、

.gm-style div > img {
  position: absolute;
}

という内容でも回避はできました。

Missing tiles when printing Google Maps API v3

ただ、最後に

The position: absolute; workaround is not a reliable solution.
I am displaying a map with a polygon drawn via KML data and the position: absolute; style causes the polygon to be seriously misaligned when you zoom out.
Any alternate workarounds?

という一文もあったので、これで完璧に問題ないとは言い切れないかもしれません。

本来はgoolge map apiが問題なく動作してくれれば、こういった対応もしなくて済むのですが、

goolge も 人の子が作ったサービス達なので、

こういったバグは出てくることはありますね。

出てきた時に、対処方法が本当にないのかを深掘りすることが大事なんだと思います。

もし、google map apiで同じようなことに直面してる人がいたら参考にしてみてください。

印刷用CSS printCSS の改行や背景について

こんにちは。そらまめです。

今日はいつものガジェット系とは違い、Tech系の記事となります。

日頃多くのwebサイトを見ると思いますが、それらの見た目を調整しているのは

CSSというファイルです。

今日はそんなCSSの印刷時のお話をしようと思います。

印刷用CSS printcss とは

印刷用CSS printcssとはその名の通り、印刷時に使用されるCSSファイルのことです。

CSSファイルの読み込みを設定する際にmedia属性を付与して、特定の使用を行うことができます。

media属性には下記の項目がありますが、基本的には特段指定をしなければ、[all]の扱いとなります。

all 全てのデバイス
aural 音声合成装置
braille 点字出力デバイス
handheld 携帯電話など、画面が小さいデバイス
print プリンタでの印刷、あるいは印刷のプレビュー画面
projection プロジェクタ。Opera のフルスクリーンモード時もこれに該当します
screen 一般的なコンピュータスクリーン。通常、パソコン、スマートフォンで動作するブラウザソフトはすべて対象になります
tty テレタイプなど、表示文字幅が固定されたデバイス
tv テレビなど、解像度や色数に制限があるデバイス

こんな感じでメディア属性には複数ありますが、だいたいwebサイトを作っていて指定して使うのはpintぐらいかと思います。

ちゃんと明示して対応させる場合はだと「screen」と「print」かなと思います。

そんな、pintですが、印刷要件が発生する場合には必須となりますし、

これが、なんだかんだで色々と面倒なのです。w

そんな、印刷用のCSS pint.cssを作成する際の注意点などをお伝えします。

印刷用のCSSの基礎知識

印刷用(print)cssを読み込ませる方法にはいくつかあります。

印刷(print)cssを別にファイルにして読み込ませる

印刷用(print)cssファイルを別で作って読み込ませる方法。

これは、HTMLのheadタグ内で読み込ませるときに「media=”print”」を使って読み込ませます。

実コードとしてはこのような形になります。

<link rel="stylesheet" type="text/css" media="print" href="print.css">

CSSファイル内に印刷(print)指定を記載して読み込ませる

続いてはCSSファイルを別にせずに読み込ませる方法。

これは、読み込んでいるCSSファイル内に「Media Queries」を用いいて読み込ませます。

実コードとしてはこのような形になります。

@media print{
  印刷(print)CSSの定義を指定する
}

このように印刷(print)cssの適用方法はいくつかあります。

続いては、印刷(print)cssを作るときに必要になってくる改行のお話を。

印刷(print)cssでの改行方法

印刷(print)cssを作っていてよくあるのが、印刷内容が1ページに収まらずに、2ページに跨ってしまったり、

表の途中で次ページに行ってしまい、見にくいということが起きます。

これを解消する方法が「改行」の適用となります。

印刷(print)での改行方法もいくつかあります。

コンテンツの前で改行実施と禁止

あるコンテンツがあって、そのコンテンツの前で改行したい場合や、改行を避けたい場合に使えます。

実コードとしてはこのような形になります。

/* コンテンンツ前の改行実施 */
.contents {
  page-break-before: always;
}
/* コンテンンツ前の改行禁止 */
.contents {
  page-break-before: avoid;
}

このように、コンテンツ前の改行実施と禁止が対応できます。

続いては、コンテンツ後の改行実施と禁止ですが、基本構成は同じとなります。

コンテンツの後で改行実施と禁止

あるコンテンツがあって、その次のコンテンツは次ページに送りたい。というときに使えます。

実コードとしてはこのような形になります。

/* コンテンンツ後の改行実施 */
.contents {
  page-break-after: always;
}
/* コンテンンツ後の改行禁止 */
.contents {
  page-break-after: avoid;
}

このように、コンテンツ後の改行実施と禁止が対応できます。

続いては、コンテンツ内での改行実施と禁止についてです。

コンテンツの内での改行禁止

あるコンテンツで改行をささせたくない場合に使用できます。

これは、よくある表組みなどに適用しておくと表の途中でページ送りがされないので使用頻度はそれなりに高いものになるかと思います。

実コードとしてはこのような形になります。

/* コンテンンツ内の改行禁止 */
.contents {
  page-break-inside: avoid;
}

と、これらを実施することでコンテンツでの改行位置を決めることができます。

続いては、割と面倒な背景についてお話しします。

印刷(print)cssでの背景について

印刷(print)cssを作っていて気づくことがあるかと思いますが、

それが、背景画像や背景色が適用されないことです。

基本的に背景色や背景画像は印刷時において除外されています。

そのため、通常のままではwebで見るぶんにはきちんと適用されていても、印刷すると真っ白。なんてこともあります。

そんな、背景画像や背景色を適用する方法が一部のブラウザにおいては対応方法があります。

chrome,safari,firefoxにおいては下記対応で背景色を表示させることができます。

/* chrome,safari,firefox対応 */
body {
  -webkit-print-color-adjust: exact;
  printer-colors: exact;
  color-adjust: exact;
}
.contents {
  background-color: #000 !important;
}

しかし、厄介なのがIE11やEdg

IE11やEdgというブラウザにおいては、CSSで背景色を制御して表示させる機能がありません。

そのため、IE11やEdgでも背景色を表示させたい!という場合においては、

別途jsを記述し背景色の画像を用意してい適用させるなどの対応が必要となります。

しかし、ここまでする必要が本当にあるのか?というのは実施前に検討すべきかと思います。

実装者はできることの知識を持っておくべきですが、

それを全て組み合わせて対応するだけの必要性があるのかをきちんと判断することが一番大事です。

印刷(print)css作成におけるまとめ

印刷(print)cssは割と厄介です。w

ブラウザによって適用されるものやされないもの。

または、ヘッダーやフッターのデフォルト表示などなど、

ブラウザによってその仕様は様々です。

実装者は対象ブラウザでの検証を積み重ねながら、一番最適な解を見つける必要があります。

そのために、基礎として必要なお話を今回はしました。

「改行」と「背景画像・背景色」

この部分を知っているだけでも、作成時の敷居は下がるかと思います。

ブラウザは常に進化しているように、実装者も多くのスキルを手に入れて問題解決の手段を持っておく必要がありそうです。