2018年2月1日木曜日

【備忘録】Chrome Developer Tools でスクリーンショットサイズがおかしくなる場合について

Google Chrome の Developer Tools は自由なサイズでスクリーンショットをとることができる優れたツールです。しかし保存したスクリーンショットのサイズが合わない場合があることにお気づきでしょうか。それは、各端末固有の「Device Pixel Ratio」が原因だったのです。それに気づいたので備忘録として残しておきます。

Developer Tools でスクリーンショットを撮る方法


まずはおさらいです。


  1. スクリーンショットを撮りたいページを開く
  2. 右クリックして「検証」を選択(表示メニュー > 開発 / 管理 > デベロッパーツール でもよい)
  3. エミュレーションするサイズを設定(Responsive だと自由に設定できる)
  4. 右端の縦三本の・をクリックし、Capture screenshot (画面に見えている範囲)あるいは Capture full size screenshot(ページ全体)を選択する

Responsive (400 x 600) でスクリーンショットしてみたら・・


※Capture full size screenshot の場合には、ページ全体なのでサイズはサイト設定によっても変わります。なので、試すのは、 Capture screenshot (画面に見えている範囲)のほうにします。


あれ、倍になってる(800 x 1200)!!

Device Pixel Ratio を設定してみよう!!



※これなにか知らなかったのですが、画像 1ピクセルを、実際の端末で何ピクセルで描写するかというレートということです。この数値が大きければ大きいほど、より繊細な表示ができるようになります。MacBookPro Retina Display は、2.0 になってます。
2.0ということは、容量の観点からいくと縦横各2倍の容量を使うということですね。



1. Developer tools のメニューある「Add device pixel ratio」を選択します。


2. すると、下図のように、DPR(Device Pixel Ratio)の設定が出てきます。
手持ちの MacBook Pro Retina Display は、2.0ですね。


3. デバイスサイズを選ぶか、Responsive にして自由にサイズを選ぶかして、DPR: 1.0 に設定します。

4. メニューより、Capture screenshot を選択して保存します。


おおー意図したサイズになったーーってな感じです。

2018年2月1日 @kimipooh

2017年12月12日火曜日

【備忘録】Chrome のスーパーリロード方法

Control + Shift + R (Macなら Command + Shift + R)というショートカットはよく知っていたのですが、マウスでの操作は知りませんでした。
かなり昔からある機能のようなのにお恥ずかしい。

いずれにしても忘れないようにメモっておきます。
macOS High Sierra (10.13.2) の Chrome 63で試しています。

  1. 右クリック(Macなら Controlを押しながらクリック)して「検証」を選択
  2. リロードボタンをプッシュ(長押し)する
これで「ハード再読み込み」「キャッシュの消去とハード再読み込み」が選択できます。

ハード再読み込み


そのページから直接参照される外部ファイルのキャッシュを無視してWebサイトから直接読み込み。
Control + Shift + R (Macなら Command + Shift + R)というショートカットがある。

キャッシュの消去とハード再読み込み


ページ上で実行される JavaScript から動的に読み込まれるファイルなどのキャッシュもすべてクリアして再読み込み

という感じだそうですね。

2017年12月12日 @kimipooh

2017年12月10日日曜日

【備忘録】iOS のGmailアプリで、Google以外のメールアカウントを追加可能に!

どうやら、5日前のアップデートから可能になっていたようです。
12月10日時点からなので、12月5日あたりから使えるようになっていたのかな。
  • Gmailアプリ 5.0.171119
これは結構便利ですね!


2017年12月10日 @kimipooh

2017年12月8日金曜日

【備忘録】Chrome 63 がリリース

Chrome 63がリリースされましたね!日本語の関連情報をみると、大した変化なしと書かれているところも多いようですが、UI絡みで結構いろいろと変更があるように思います。

そのため備忘録として纏めておきます。

関連情報




ブックマークのUIの変更




左サイドメニューでフォルダの階層表示ができるようになりました。


フラグのUI


chrome://flags 
の試験機能について見た目が随分変わりました。


Chrome Home UI に正式対応?(Android スマホのみ?)


下記のような記事や英語ではちらほらとスクリーンショットの画面が出ていたりしているのですが、残念ながら手持ちにAndroid スマホがないので試すことが出来ません。
ので導入されているかどうかは不明です。
などいくつかのブログをみると、アドレスバーを下部に配置したスマートフォン向けの新しいレイアウトらしいですね。本当のところはどうなんだろう。

2017年12月8日 @kimipooh

2017年11月24日金曜日

【備忘録】PHPMailer 6.0 ライブラリを使って GmailのSMTPからメール送信(PHP編)

PHPMailer 6.0 以降では、その書き方が大きく変わったようで、従来の方法は使えません。
そのためどうしたらよいかを書き出しておきます。
なお Gmail以外でも同様に利用できます(手持ちのさくらインターネットのアカウント(SMTPサーバー)でも試しました)。

参考情報


検証環境



  • macOS High Sierra (10.13.1)
  • PHP 7.1.7 (cli) (built: Jul 15 2017 18:08:09) ( NTS )

※以下、ターミナルアプリ(アプリケーション > ユーティリティ)を起動してからのお話です。

1. 作業場所の確保と PHPMailer ライブラリの取得


composer を利用する方法もありますが、あえて GitHub からソースをダウンロードして利用する方法を書き出しておきます。composer を利用する場合には、https://github.com/PHPMailer/PHPMailer を参考にしてみてください。


ターミナルアプリより、

mkdir php_send_test
cd php_send_test
git clone https://github.com/Synchro/PHPMailer

として PHPMailer ライブラリを、php_send_test (ユーザーフォルダ直下の php_send_test)フォルダ内の PHPMailer フォルダにダウロードします。

これで

php_send_test
┗ PHPMailer

というフォルダが出来ているはず。

2. コーディング「php_send_test.php」


名前はなんでもいいですが、説明の便宜上「php_send_test.php」として保存します。

<?php

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require 'PHPMailer/src/Exception.php';
require 'PHPMailer/src/PHPMailer.php';
require 'PHPMailer/src/SMTP.php';

mb_language("japanese"); 
mb_internal_encoding("UTF-8");

$mail = new PHPMailer();
$mail->isSMTP();
$mail->Encoding = "7bit";
$mail->CharSet = '"UTF-8"';

$mail->Host = 'smtp.gmail.com';
$mail->Port = 587;
$mail->SMTPAuth = true;
$mail->SMTPSecure = "tls";
$mail->Username = 'Gmailアドレス(差出人)';
$mail->Password = 'パスワード';
 // ※1は、2段階認証有効なら「アプリ固有のパスワード」を生成してそれをいれる
 // 無効なら「安全性の低いアプリからのアクセスを許可」しておく
$mail->From     = 'Gmailアドレス(差出人)'; 
$mail->FromName = mb_encode_mimeheader("表示名","ISO-2022-JP","UTF-8"); // "表示名" <メールアドレス>
$mail->Subject  = mb_encode_mimeheader("件名","ISO-2022-JP", "UTF-8");
$mail->Body     = mb_convert_encoding("本文","UTF-8","auto");
$mail->AddAddress('宛先');

if (!$mail->send()) {
    echo "送信エラー " . $mail->ErrorInfo;
} else {
    echo "送信しました" . "\n";
}

のコードがベースになります。
赤文字の部分を修正してください。

※$mail->Body の本文は、php_send_test.php 自体の文字コードが UTF-8 なら文字エンコードは不要です。つまりは
  • $mail->Body     ="本文";
でもいけます。
ただしヘッダ部分(件名や表示名)については、ISO-2022-JP の文字コードでMIMEエンコードしてあげないと文字化けするので注意。そのため上記コードでは明示的に、文字エンコード変換をしてます。

3. 送信テスト


ターミナルより

php  php_send_test.php

とタイプして、
「送信しました」
と出たら送信できています。

Could not open input file: php_send_test.php

と出てきたら、今いる場所が、php_send_test フォルダじゃないのでしょう。

cd $HOME/php_send_test
php  php_send_test.php

として php_send_test.php のあるフォルダに移動してから実行してみてください。

Appendix A. 本文について改行をしたい


$mail->Body     = mb_convert_encoding("本文

改行2
改行3
改行4
","UTF-8","auto");

とすれば
----
本文

改行2
改行3
改行4
-----
がメールの本文になります。

Appendix B. HTMLメールにしたい!


https://github.com/PHPMailer/PHPMailer/blob/master/examples/gmail.phps

を参考に、$mail->Body の代わりに、

  • $mail->msgHTML(file_get_contents('HTML ファイル名(パス含む)'), __DIR__);
      HTML部分を読み込む
  • $mail->AltBody     = mb_convert_encoding("本文","UTF-8","auto");
      テキスト部分を読み込む
     
を利用してみてください。

Appendix C. 添付ファイルをつけたい!


if (!$mail->send()) {

より前に、

$mail->addAttachment('ファイル名(パス含む)');
を追加してみてください。


Appendix D. Google OAuth2 認証を使いたい!


Google OAuth2 認証を使えば、アプリ固有のパスワード(2段階認証有効時)や安全性の低いアプリからのアクセスを許可する(2段階認証無効時)をせずに、Gmailアドレスとパスワードを使うことができ、もっとも安全な方法といえます。

Google Developer Console で キーの発行が必要になります。
詳しくは
に丁寧に説明されているので参照にしてみるとよいです。


2017年11月24日 @kimipooh

2017年11月21日火曜日

【備忘録】メールを受信フォルダの送信者全員に一斉送信する方法

メールを受信フォルダの送信者全員に一斉送信する方法(Gmail ヘルプフォーラム)をみて、なるほどそういう需要もあるのかと思ったので出来るか試してみました。Gmail の機能では出来ないことはわかっていたので、他のツールの力を借りることになります。

Thunderbird + EmailPicky 4 アドオンを使う


とまぁ大体思ったことができたのでメモしておきます。

  1. 電子メール Thunderbird で Gmail を IMAP接続で設定
  2. 「EmailPicky 4」アドオンのインストール
  3. 新規アドレス帳を作成
  4. ラベル(フォルダ)内のメールからメールアドレスを抽出し、作成したアドレス帳に保存
  5. 作成したアドレス帳のメールアドレスを全選択して、メール作成する
という流れです。
以下、macOS High Sierra (10.13.1)と Thunderbird 52.4.0 (64ビット)で検証しましたが、Windows でも参考になるかと思います。

1. 電子メール Thunderbird で Gmail を IMAP接続で設定


Thunderbird をインストールした上で、


あたりを参考に設定してみてください。

2.「EmailPicky 4」アドオンのインストール


  1. https://addons.mozilla.org/ja/thunderbird/addon/emailpicky-4/ にアクセスして「今すぐダウンロード」を選択
      がダウンロードされます。
  2. Thunderbird の「ツール」> 「アドオン」からアドオンを開きます。
  3. 歯車アイコン > 「ファイルからアドオンをインストールします」を選択して、先程ダウンロードしたアドオンを選択します。
  4. インストール画面がでるので「今すぐインストール」をクリックします。
  5. 「今すぐ再起動」をクリックします。
  6. うまくインストールできれば、下図のように表示されます。 

3. 新規アドレス帳を作成


  1. Thunderbirdのアドレス帳を開きます。
  2. 「ファイル」>「新規作成」 > アドレス帳 を選択します。
  3. 新しくアドレス帳(ここでは「テスト」を作成)を作成します。

4. ラベル(フォルダ)内のメールからメールアドレスを抽出し、作成したアドレス帳に保存


  1. 差出人メールアドレスを抽出したフォルダ(ラベル)で「右クリック」して「Pick Email IDs from this folder」を選択します。
  2. 次に下記の設定をします。
    「Search fields」項目で「From」をチェックします。
    「Choose a addressbook as a target for the found addresses」で「テスト」(新規作成したアドレス帳)を選択
  3. うまくいけば下図のように Successfully (成功)というメッセージが出ます。

5. 作成したアドレス帳のメールアドレスを全選択して、メール作成する


  1. Thunderbirdのアドレス帳を開きます。
  2. アドレス帳「テスト」を開きます。
  3. インポートされたアドレス帳を全選択します(Macなら Command + a,  Windowsなら Ctrl + a)
  4. 「メッセージを作成」ボタンをクリックします。

以上で To へ アドレス帳「テスト」に入った全メールアドレスを追加した状態でメールを書くことができます。一括 BCCにしたい場合などは分かりませんが、アドレス帳は「ツール」から「書き出す」こともできますので、それで書き出したメールアドレスデータを元に Gmail にそれをコピー&ペーストして送信することも可能かと思います。

2017年11月21日 @kimipooh

2017年11月19日日曜日

Chrome の初期化方法(Windows / Macintosh 編)

Chrome が起動できなくなった、なにをしてもおかしくなったなどの場合に、Chrome の設定を初期化することで解決することがあります。Chromeは単純に削除しても設定はユーザーのプロフィールに残るためです。

前半は、Windows 編、後半に Macintosh 編を掲載しています。

Windows 編


Windows から Google Chrome を通常アンインストールするときに、「関連データも削除しますか?」のチェックをいれて削除します。基本的にこれで Chrome の設定ごと削除されます。



もし、「関連データも削除しますか?」 のチェックをいれずにアンインストールした場合には、再度 Google Chrome をインストールして、改めてチェックをいれてアンインストールしてみてください。

アンインストール自体できない場合


その場合には手動で設定ファイルを消して下さい。


  1. Google Chrome を終了します。
    下図のように、縦の・・・から「終了」を選択してください。
    右上の☓からウィンドウを閉じても Chromeは終了していません。
  2. フォルダを開く
  3. 上部 フォルダ名の部分をクリックして、そこの文字を全て消す。
  4. %USERPROFILE%¥AppData¥Local¥Google を入力して Enter
  5. Chromeフォルダで「右クリック」して、「名前の変更」を選択
    Chrome2 など別の名前に変更します。


Macintosh 編


  1. Google Chrome を終了してください。
    下図のように、上部の Chromeメニューから「Google Chrome を終了」を選択してください。
    左上の☓からウィンドウを閉じても Chromeは終了していません。
  2. Finder メニューにある、「移動」より「フォルダへ移動」を選択
  3. フォルダ名として「~/Library」を入力してください。自動的に「~/ライブラリ」と修正されます。そのまま「移動」ボタンをクリックしてください。
     ~ は、チルダ(〜の半角)です。
  4. Application Support > Google フォルダへ移動してください。
  5. Chrome フォルダをクリックで選択し、Enter を押して名前変更モードにして、Chrome2 等別の名前に変更してください。
以上で Chrome の初期化が完了したので、改めて Chromeを起動しなおしてみてください。

2017年11月19日 @kimipooh

Google+ Badge