投稿

12月, 2017の投稿を表示しています

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

イメージ
病院や組織のホームページを作っていて「確認してください」というと、ウェブサイトを印刷して紙で確認(回覧)する。レスポンシブデザインを採用していると、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 JavaScriptiframeではなくGoogle Maps JavaScript APIを使ってsetCenterすれば出来るかもしれない。けど使用制限があるので、普通のホームページで使いたくない。
拡大、縮小など試してみたけどダメ。中途半端は逆効果になるのでやめた。
どうしても見た目通りに印刷したい場合は、サイズ固定の別ウィンドウを表示した方がよさそう。もしくはウェブサイトを(サーバー側で)PDFにして表示してもいいかもしれない。
< Related Posts >Bootstrap3のWEBページを印刷してもいい感じにPHPでPDF生成するためにwkhtmltopdfをインストール

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

イメージ
産業医の先生のホームページを手掛けたときの覚書。制作したサイトはこちら産業医プロ | 合同会社DB-SeeD

産業医は労働者50人以上の事業所ごとに1人以上選任しないといけない。産業医 - Wikipedia最近は「働き方改革」で企業も職場環境改善に関する意識が高くなってきているけど、法律だから仕方なく産業医と契約している企業が多いらしい。産業医の先生も「メンタル診れない(診たくない)」という方が多いらしいので、神田橋先生のような意識高い方が評価されるようになってほしい。

< Related Posts >マーケティングは学問。本から学んだ広告コピーの基礎

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

Google製品のロゴをドキュメントに入れたいと思って調べたときの覚書。今は日本語で分かりやすく説明している公式サイトがある。使用許諾 – Google「よくある質問」に答えがあった。手順などをわかりやすく説明するため、標準的な Google スクリーンショット(Google のホームページ、メイン プロダクト ページ、または検索結果ページの画像)を何も改変せず、印刷形式またはデジタル形式で使用するのであれば、Google の許可を得る必要はありません。ただし、使用に関するガイドラインに従うことが条件となります。必ず、一切加工せずに使用してください。スクリーンショットの上にグラフィック、写真、広告文を重ねたり、取り込んだ画像の外観を変えたりすることはできません。スクリーンショット以外の部分に Google ロゴを掲載する場合は、Google の使用許諾を得る必要があります。よくある質問 | 使用許諾 | Google
別件で「Android」という単語はGoogleの商標で使い方に関するガイドラインがあった。ブランド ガイドライン | Android Developers
< Related Posts >会社設立のための商号・商標調査GPLライセンスについて整理BSDライセンスについて整理

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

イメージ
Googleマイビジネスを使っていてバグと思われる現象をサポートに問い合わせしたときの覚書。
現象Googleマイビジネスの一覧画面に「更新内容の確認」が表示され、それをクリックして「情報」を表示すると、右上に「Googleによる更新」が表示される。そこの「ビジネスの変更をすべて承認」しても「更新内容の確認」が消えず残ったまま。この画面の下部に「送信」ボタンは表示されていない。管理中のビジネス2件が同じ現象。

サポートに連絡以前の画面に戻って指示通りの手順をしても直らない。技術の方に問い合わせてみるとのこと。
2日後に再度電話が来て、「不具合なのでしばらくしたら直っている」とのこと。これが2017年12月11日時点。
カバー写真に設定したのが反映されないのは、これが原因かもしれない。
とりあえずGoogle先生の中のエンジニアが頑張ってくれるよう祈るのみ。
< Related Posts >サイトのスピードテストと画像を最適化してスコアを上げるGoogle検索結果にサイトリンクを表示したくてJSON-LDを設定

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

イメージ
Google先生が検索エンジン最適化(SEO)対策のためのスターターガイドを更新したので覚書。検索エンジン最適化(SEO)スターター ガイド - Search Console ヘルプウェブサイトを見ただけだと、これらに対応しているかが分かりづらい。しかもサイトを作る人(開発者)が意識してないと、後で対応するのが大変。後々人を雇ったときのためにSEOチェックリストを作った方がよさそう。
< Related Posts >Google検索結果にサイトリンクを表示したくてJSON-LDを設定SEO対策のためにGoogle Placesに登録してGoogle+ LocalとLinkする

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

イメージ
Axway Titanium SDKが7.0.0になってAndroid NDK r16に対応したということでアップデートしたときの覚書。環境: macOS Sierra v10.12.6, JDK 1.8.0_131, Android Studio 3.0.1
参考GA Release of Titanium SDK 7.0.0 (+Hyperloop), CLI 7.0.0, | Appcelerator Studio 5.0.0
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を変更。Android Module Upgrade Guide | Appcelerator Platform - Appcelerator Docsビルド実行
$ 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.
新しいモジュールを作成し…

FoundationのBlock GridをBootstrapで使う

イメージ
前に調べたCSSフレームワーク「Foundation」のBlock GridをBootstrapで使いたくなったので調査したときの覚書。環境: Bootstrap v3.3.7
参考Block Grid | Foundation Docs
GitHub Gistで公開されているのが使いやすかった。Foundation 5's block grids for Bootstrap 3. | GitHub画像サムネイル+タイトルをいい感じに並べるのに便利。
< Related Posts >CSSフレームワーク「Foundation」

CSSフレームワーク「Foundation」

イメージ
今のところBootstrap v3を便利に使っているけども、「Foundation」というCSSフレームワークを知らなかったので調査したときの覚書。
参考CSSデザインはComponents指向になって、BeMはなくなる?〜Web Components時代のCSSデザイン(座談会)に参加してきた〜 #html5exp | Developers.IOFoundationとは? | 基本 | Foundation5の使い方
Foundationの理解(Bootstrap v3との比較)IE9以上(IE8には対応していない)Sass単位はemBlock GridがECサイトで便利らしい。
参考:FoundationがBootstrapよりもECサイトに向いている理由 - Welcart カスタマイズ
今までの資産を捨ててまでFoundationに切り替える理由はなさそうだけど、公式サイトのShowcaseはデザインの勉強になる。
< Related Posts >Bootstrap3のWEBページを印刷してもいい感じにTwitter Bootstrap利用サイトでIE8だとimgが表示されない