2017年12月26日火曜日

iframeのGoogleマップを印刷したときに中心にしたい(特にIEとEdge)。けど印刷時の余白を設定して諦めた。

web-print病院や組織のホームページを作っていて「確認してください」というと、ウェブサイトを印刷して紙で確認(回覧)する。

レスポンシブデザインを採用していると、A4で印刷すると横幅が狭くなるので「ここで改行してほしくない」と言われることもある。ウェブ上で完璧に仕上げてもそもそも画面で見ていない。

「画面ではぴっちり収まってます。普通は印刷しないので大丈夫です。」

と言う前に出来るだけ印刷してもいい感じになるようにしたときの覚書。


まずはブラウザごとにデフォルト値が違う余白の設定。

これだけでだいぶ違う。

参考: @page - CSS | MDN

@page {
   margin: 5mm;
}


あとは@media printを使って地道に調整していく。

@media print {
   #nav-area {display: none;}
}


特に困ったのが画面の横幅いっぱいにiframeでGoogleマップを表示しているページ。

印刷すると左部分しか表示されない。特にIEとEdge。Google Chromeは中心まで表示されるから許せる。

印刷したときのイベントを取得してJavaScriptで制御しようとしても、再表示やsrcの置き換えをしようとしてもうまくいかない。

参考: Detecting Print Requests with JavaScript

iframeではなくGoogle Maps JavaScript APIを使ってsetCenterすれば出来るかもしれない。けど使用制限があるので、普通のホームページで使いたくない。


拡大、縮小など試してみたけどダメ。

中途半端は逆効果になるのでやめた。


どうしても見た目通りに印刷したい場合は、サイズ固定の別ウィンドウを表示した方がよさそう。

もしくはウェブサイトを(サーバー側で)PDFにして表示してもいいかもしれない。


< Related Posts >

2017年12月20日水曜日

【健康経営】医療の力を人材力に。「産業医プロ」のホームページを制作

産業医の先生のホームページを手掛けたときの覚書。

制作したサイトはこちら

産業医プロ I 合同会社DB-SeeD



産業医は労働者50人以上の事業所ごとに1人以上選任しないといけない。

最近は「働き方改革」で企業も職場環境改善に関する意識が高くなってきているけど、法律だから仕方なく産業医と契約している企業が多いらしい。

産業医の先生も「メンタル診れない(診たくない)」という方が多いらしいので、神田橋先生のような意識高い方が評価されるようになってほしい。



< Related Posts >

2017年12月18日月曜日

Googleのロゴ、「Android」の使用に関するガイドライン

Google製品のロゴをドキュメントに入れたいと思って調べたときの覚書。

今は日本語で分かりやすく説明している公式サイトがある。

「よくある質問」に答えがあった。

手順などをわかりやすく説明するため、標準的な Google スクリーンショット(Google のホームページ、メイン プロダクト ページ、または検索結果ページの画像)を何も改変せず、印刷形式またはデジタル形式で使用するのであれば、Google の許可を得る必要はありません。ただし、使用に関するガイドラインに従うことが条件となります。必ず、一切加工せずに使用してください。スクリーンショットの上にグラフィック、写真、広告文を重ねたり、取り込んだ画像の外観を変えたりすることはできません。スクリーンショット以外の部分に Google ロゴを掲載する場合は、Google の使用許諾を得る必要があります。

よくある質問 | 使用許諾 | Google


別件で「Android」という単語はGoogleの商標で使い方に関するガイドラインがあった。


< Related Posts >

2017年12月17日日曜日

Googleマイビジネスの「更新内容の確認」が消えない

google-my-businessGoogleマイビジネスを使っていてバグと思われる現象をサポートに問い合わせしたときの覚書。


現象

Googleマイビジネスの一覧画面に「更新内容の確認」が表示され、それをクリックして「情報」を表示すると、右上に「Googleによる更新」が表示される。

そこの「ビジネスの変更をすべて承認」しても「更新内容の確認」が消えず残ったまま。

この画面の下部に「送信」ボタンは表示されていない。

管理中のビジネス2件が同じ現象。



サポートに連絡

以前の画面に戻って指示通りの手順をしても直らない。

技術の方に問い合わせてみるとのこと。


2日後に再度電話が来て、「不具合なのでしばらくしたら直っている」とのこと。

これが2017年12月11日時点。


カバー写真に設定したのが反映されないのは、これが原因かもしれない。


とりあえずGoogle先生の中のエンジニアが頑張ってくれるよう祈るのみ。


< Related Posts >

2017年12月15日金曜日

ウェブページのSEO対策ガイドライン by Google

google-seo-guidebookGoogle先生が検索エンジン最適化(SEO)対策のためのスターターガイドを更新したので覚書。

ウェブサイトを見ただけだと、これらに対応しているかが分かりづらい。

しかもサイトを作る人(開発者)が意識してないと、後で対応するのが大変。

後々人を雇ったときのためにSEOチェックリストを作った方がよさそう。


< Related Posts >

2017年12月10日日曜日

Titanium SDK 7.0.0.GAとAndroid NDKはAndroid Studio経由に切り替え

axway-titaniumAxway Titanium SDKが7.0.0になってAndroid NDK r16に対応したということでアップデートしたときの覚書。

環境: macOS Sierra v10.12.6, JDK 1.8.0_131, Android Studio 3.0.1


参考



1.Android Studio経由でNDKをインストール

Android Studioを起動して、SDK Toolsの中にあるNDKをインストール。

インストールされた場所
/Applications/android-sdk-macosx/ndk-bundle/

環境変数は指定しなくてもいいのかな?と思いコメントアウトしてみる(昔は必要だった)。
$ less .bash_profile

# Android SDK, NDK
export ANDROID_HOME=/Applications/android-sdk-macosx
#export ANDROID_NDK=/Applications/android-ndk-r12b




2.Androidモジュールをビルド

arm64に対応したらしいので、公式サイトを参考にmanifestを変更。

ビルド実行
$ appc run p android --build-only

エラー

[ERROR] There is discrepancy between the architectures specified in module manifest and compiled binary.
[ERROR] Architectures in manifest: arm64-v8a,armeabi-v7a,x86
[ERROR] Compiled binary architectures: armeabi-v7a,x86
[ERROR] Please update manifest to match module binary architectures.


新しいモジュールを作成したらビルド成功したので、コードの中に64bit対応していないものをimportしているからだと思う。



< Related Posts >

2017年12月7日木曜日

FoundationのBlock GridをBootstrapで使う

block-grid前に調べたCSSフレームワーク「Foundation」のBlock GridをBootstrapで使いたくなったので調査したときの覚書。

環境: Bootstrap v3.3.7


参考


GitHub Gistで公開されているのが使いやすかった。

画像サムネイル+タイトルをいい感じに並べるのに便利。


< Related Posts >

2017年12月4日月曜日

CSSフレームワーク「Foundation」

zurb-foundation今のところBootstrap v3を便利に使っているけども、「Foundation」というCSSフレームワークを知らなかったので調査したときの覚書。


参考


Foundationの理解(Bootstrap v3との比較)


今までの資産を捨ててまでFoundationに切り替える理由はなさそうだけど、公式サイトのShowcaseはデザインの勉強になる。


< Related Posts >

Related Posts Plugin for WordPress, Blogger...

Blog Archives