投稿

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 JavaScript iframeではなく 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 archi

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.IO Foundationとは? | 基本 | Foundation5の使い方 Foundationの理解(Bootstrap v3との比較) IE9以上(IE8には対応していない) Sass 単位はem Block GridがECサイトで便利らしい。 参考: FoundationがBootstrapよりもECサイトに向いている理由 - Welcart カスタマイズ 今までの資産を捨ててまでFoundationに切り替える理由はなさそうだけど、 公式サイトのShowcase はデザインの勉強になる。 < Related Posts > Bootstrap3のWEBページを印刷してもいい感じに Twitter Bootstrap利用サイトでIE8だとimgが表示されない