Webサービス

ウェブページを見たまま印刷&スクリーンショットの方法いくつか

ウェブページを印刷して!とか言われることってないですか?

たまにあるのです。
ノートPCやタブレットを持ち歩いて相手に見せればいいじゃんっていう話なんですが、どうしても紙にして持っていきたいということが。

そんな時にブラウザから普通に印刷しても期待通りに印刷されないことは多々あります。
印刷用に考慮されたページもありますがほんの一部ですよね。
また、印刷専用にレイアウトされていて、ブラウザでの見た目とは違ってる場合も。

ウェブページをブラウザで見えてるまま印刷したい!っていう時の方法について

1)Awesome Screenshotを使う(GoogleChromeのみ)

GoogleChromeの拡張機能「AwesomeScreenshot」をインストールします。
普通にスクリーンショットを取ります。

完了画面からプリントをクリックすると、取ったスクリーンショットをブラウザから印刷できます。

Awesomescreenshot印刷

2)Print What You Like を使う。

PrintWhatYouLikeは、ブックマークレットで利用できるツール。

http://www.printwhatyoulike.com/

Chromeなら拡張機能もあります。(私はいつもこれを使っています)
PrintWhatYouLike
https://chrome.google.com/webstore/detail/printwhatyoulike/npgfabafajliaooeicdoahbpoajfmbbe?hl=ja
印刷する内容を自由にセレクトすることができます。

印刷したいページを表示し、保存したブックマークレットをクリック。
すると、左サイドバーに操作ボタンが表示、印刷するページ上には
ツールバーが表示されます。

記事中にある広告などを印刷したくない場合は、広告を選んで
ツールバーの「Remove」をクリック

印刷内容をセレクトしたら左サイドバーの「Print」をクリック

新入社員が知っておくべきホームページを崩さず綺麗に印刷する裏ワザ
http://www.chrome-life.com/chrome/5033/

固定バーがあるページの印刷・スクリーンショット

最近のページではposition:fixed;で上部などに固定されたナビゲーションがあるウェブページは多いですよね。

でもそのようなページをスクリーンショットを撮ったり、印刷しようとすると
固定バーが何度も表示されたり、ずれたりしませんか。
これを回避する方法としてFirefox限定ですが、Firefoxのアドオン、「Pearl Crescent Page Saver」を使う。

残念ながら愛用しているAwesomeScreenshotは使えません。
Pearl Crescent Page Saverなら固定バーが繰り返さずキャプチャできるようです。
Pearl Crescent Page Saver
http://pearlcrescent.com/products/pagesaver/

Google Maps API warning: NoApiKeys の対処法

Google Maps JavaScript API v3からAPIキーが不要というのを聞いていたので
特に取得せずに使っていたら、コンソールでこんなエラーが

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

Apikeyがないって怒られているようです。
やっぱり必要なのか!?

デベロッパーサイトでAPIkeyを発行します。
https://developers.google.com/maps/documentation/javascript/get-api-key

APIkeyを発行したら、keyを引数に追加

 

これ以外にもこんなエラーが

Google Maps API warning: SensorNotRequired https://developers.google.com/maps/documentation/javascript/error-messages#sensor-not-required

Sensorが必須では無くなったということらしいです。

Google Maps APIを読み込んでいるスクリプトに引数[?sensor=true/false]が以前は必須だったけれど、必須で無くなったということですね。

こちらは削除して完了です。

エラーが出ていてもマップは表示されているので、コンソールを見て初めて気づいた。。。って感じでした。

Google mapを静止画としてウェブページに埋め込む Google Static Maps API

一つのウェブページに複数のGoogleマップを設置したい場合、
どうしても表示の重さが気になります。
あと現在のGooglemapはIE7、IE8などの古いブラウザには対応していないので
そのような古いブラウザでもGooglemapを表示したい場合にも役立つ?

Google Static Maps APIを使えば、
Googleマップを画像として生成してくれるので、高速、軽量で表示できます。
※ウェブ、Andoroid、iOSとそれぞれに無料で使える制限あり。
ウェブページの場合、
「マップのロードが 90 日間連続して 1 日 25,000 回を超過するまで無料」

くわしくはこちらで
https://developers.google.com/maps/documentation/static-maps/?hl=ja

APIキーの取得から

1)Googleアカウントを取得し、Google Developers Consoleにアクセス
https://console.developers.google.com

2)プロジェクトを作成

ホーム My Project_8

3)GoogleAPIを利用する

ホーム demo1602_7
4)Google Static Maps APIをクリック

Google Maps APIの中にGoogle Static Maps APIがあります。初期状態では隠れてるので、「その他」をクリックすると表示されます。

API ライブラリ demo1602_6
6)APIを有効にする

APIを有効にするをクリック
Google Static Maps API demo1602_5
7) 認証情報にすすむ(API KEYを作成)

「認証情報に進む」をクリック

Google Static Maps API demo1602_4

APIを呼び出す場所は「ウェブブラウザ(javascript)」を選びました。
「必要な認証情報:をクリック

認証情報ウィザード demo1602_3

8) APIキーを生成

名前の「ブラウザキー1」は特に変更しなくてもよいのかな。
APIキーを作成するをクリック

 

認証情報ウィザード demo1602_2

APIキーが生成されます。これをコピー

認証情報ウィザード demo1602

Google Static Maps APIを使う

基本のURL

parametersの部分に必要なパラメータを付加していきます

1)center (※必須)

地図の中心を座標やキーワードで指定する
キーワードはURLエンコードする
markers,path,visibleを別途指定している場合は省略可。

2)size (※必須)

生成する画像のサイズ[横width]x[縦height]で指定

幅300ピクセル、高さ240ピクセルの画像にしたい場合は
300×240

3)sensor(※必須)

GPS情報を取得してする場合はtrue,そうでない場合はfalse

sensor=true,
sensor=false

4)key(※必須)

取得したAPIキー

5)zoom

縮尺値(1~22)

6)markers

マーカーを表示

7)maptype

地図の種類を指定
・roadmap(通常の地図:デフォルト)
・satellite(航空写真図)
・ hybrid(roadmapとsatelliteの組み合わせ)
・terrain(地形図)

8)format

画像形式を指定できます
・png(デフォルト)
・GIF
・JPG

9)language

地図上のラベルの言語を指定できます。

英語の場合はen
日本語の場合はja

10) path

地図に線を引きます

11)visible

ちょっとよくわからず

Google Developersより

visible (optional) specifies one or more locations that should remain visible on the map, though no markers or other indicators will be displayed. Use this parameter to ensure that certain features or map locations are shown on the Google Static Maps API.

12)region

これも使いどころがよくわからず

Google Developersより

region (optional) defines the appropriate borders to display, based on geo-political sensitivities. Accepts a region code specified as a two-character ccTLD (‘top-level domain’) value.

例)ジブリ美術館

youtube動画のサムネを取得する

Youtubeで動画をアップすると自動でサムネが生成されていると思いますが、

このサムネを別サイトで使いたい場合、以下の方法で取得できました。

http://i.ytimg.com/vi/動画ID/画像サイズ.jpg

動画IDは、

なら、 watch?v=以下の部分

サムネのサイズ

デフォルト:120x90

サムネ1:120x90

サムネ2:120×90

サムネ3:120×90

サムネ4:320×180

サムネ5:480×360

サムネ6:640×480

サムネ7:1280×720

 

思った以上にカンタン。さすがGoogleです。

参考サイト

YouTube動画のサムネイル画像を取得する

YouTubeの動画のサムネイル取得が思った以上に簡単だった件

webフォント(Font Awesome)の使い方

ウェブサイトでアイコンを使いたいときに、画像ではなく、Webフォントを使って表現することって多くなりました。
手軽だし、サイズが変わっても荒くならないのもいいですよね。

いろいろなWebフォントサービスがありますが、Font Awesomeが一番有名でしょうか。

Font Awesome  the iconic font and CSS toolkit

 

Font Awesome
https://fortawesome.github.io/Font-Awesome/

種類も多いし、導入し易いこともあり時々使います。

使いかた簡単に。

CDNでも提供されているので、ダウンロードせずに<head></head>内に記述するだけでも使えます。

ファイルをダウンロードして使う場合は、
ダウンロードしたフォルダの中にあるcssとfontsフォルダを自分のサイトにアップロード。

fontsフォルダの場所を変えた場合は、font-awesome.min.css内の

@font-face {
font-family: ‘FontAwesome’;
src: url(‘../fonts/fontawesome-webfont.eot?v=4.3.0’);
src: url(‘../fonts/fontawesome-webfont.eot?#iefix&v=4.3.0’) format(‘embedded-opentype’), url(‘../fonts/fontawesome-webfont.woff2?v=4.3.0’) format(‘woff2’), url(‘../fonts/fontawesome-webfont.woff?v=4.3.0’) format(‘woff’), url(‘../fonts/fontawesome-webfont.ttf?v=4.3.0’) format(‘truetype’), url(‘../fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

を変更する必要あり。
※Sass,LESS用のファイルも用意されています。

基本的な使い方

fa + fa-○○○

<i class=”fa fa-camera-retro”></i> fa-camera-retro

サイズを大きくしたい場合は

<i class=”fa fa-camera-retro fa-lg”></i> fa-lg
<i class=”fa fa-camera-retro fa-2x”></i> fa-2x
<i class=”fa fa-camera-retro fa-3x”></i> fa-3x
<i class=”fa fa-camera-retro fa-4x”></i> fa-4x
<i class=”fa fa-camera-retro fa-5x”></i> fa-5x

よく使いそうなリスト要素で使う場合

fa-ul,fa-li を加えると、アイコンとテキストの幅を持たせてくれます。

font2

 

上記はhtml に i要素を記述することになりますが、htmlには余計なタグを入れたくない場合は、contentプロパティでもいけます。

fa-arrow-circle-rightのユニコード、 [&#xf0a9;]の先頭の&#xを\に変更します。フォントファミリーにFontAwesomeを指定。

font1

 

アイコン・ユニコードの一覧はfont awesome チートシートで
http://fortawesome.github.io/Font-Awesome/cheatsheet/

使い方サンプルはこちらから
http://fortawesome.github.io/Font-Awesome/examples/

 

 

読み込みを少なくしたいときには、必要なファイルだけインポートするファイルという手も。

 

PCにインストールされているフォントで好きな言葉を一覧表示できるWebサービス

ロゴとかタイトルなんかを作るときにどんなフォントにしようか悩むことってよく有りますよね?

そんな時にすごく便利なサービス。

http://wordmark.it/

テキストボックスに文字を入れると、今使っているPCにインストールされているフォントでその文字を表示してくれます。

wordmark.it   helps you choose fonts

上部にあるツールバーで簡単な設定もできます。
以下は「negative」、「AA」 白抜きで全て大文字で表示したところです。

wordmark.it   helps you choose fonts2

 

フォントの違いを比較したいときにはすごく便利でした!