Firefoxのスクリーンショットで新機能追加

October 19,2017 12:03 AM
Category:[Firefox]
Tag:[Firefox]
Permalink

すでにご存じの方も多いと思いますが、Firefoxのスクリーンショットで新機能が追加されてましたので紹介します。

いつものようにコンテキストメニューの「要素を調査」で開発者用ウィンドウからスクリーンショットを取得しようとしたところ、「スクリーンショットを撮る」というメニューが表示されるようになっていました。

スクリーンショットを撮る

メニューを選択すると、ベータ版でスクリーンショットを撮る機能が新たに提供されましたというイントロダクション。

(クリックで拡大、以下同様)
イントロダクション

必要な部分だけをFirefox上で選択できるようです。

必要な部分だけをFirefox上で選択

スクリーンショットはPCへのダウンロードはもちろんですが、ウェブ上への保存も可能なようです。

ウェブ上への保存も可能

ということで試してみました。

「スクリーンショットを撮る」というメニューを選択すると、全体がオーバーレイされ、「ページをドラッグまたはクリックして範囲を選択してください。ESCキーを押すとキャンセルできます」という文字が表示されます。

スクリーンショットを撮る

マウスでポイントすれば特定範囲の矩形選択ができます。

矩形選択

この状態でクリックすると白抜き表示に変わり、この部分がスクリーンショット対象になります。右下のボタンはあとで説明します。

白抜き表示

任意の範囲をドラッグすれば上と同じように白抜きでキャプチャ範囲が表示されます。

任意の範囲をドラッグ

ドラッグをやめると右下にボタンが3つ表示されます。×はキャンセル、↓はダウンロード、「保存」はウェブ上への保存です。再ドラッグで範囲の変更や、選択範囲全体の移動も可能です。

右下にボタンが3つ

「保存」をクリックするとウェブ上への保存が開始します。ウェブ上には14日間保存されるようです。

ウェブ上への保存開始

保存が完了すると次の画面が表示されます。ここからダウンロードすることも可能です。

保存が完了

ファイル名は「Screenshot-YYYY-MM-DD サイト名.png」となります。

ファイル名

保存が完了画面左上の「自分のショット」のリンクをブックマークしておけば、そこから他のスクリーンショットの一覧にアクセスできます。

スクリーンショットの一覧

今までどおり、開発者ツールからの全体スクリーンショットも可能です。

開発者ツールからの全体スクリーンショット

Comments [0] | Trackbacks [0]

iPhoneをPCに接続して「このデバイス上に新しい画像とビデオが見つかりませんでした。」と表示された場合の対処

October 17,2017 12:03 AM
Category:[iPhone]
Tag:[]
Permalink

iPhoneをPCに接続して「このデバイス上に新しい画像とビデオが見つかりませんでした。」と表示された場合の対処方法について紹介します。

1.問題点

iPhoneで撮った画像をWindowsのPCに取り込むとき、該当デバイスの「Internal Storage」→「DCIM」とフォルダのツリーを開くのですが、ある日、いつものように接続すると「このデバイス上に新しい画像とビデオが見つかりませんでした。」というダイアログが表示されました。

このデバイス上に新しい画像とビデオが見つかりませんでした。

また、エクスプローラーを開いても、「Internal Storage」までしかツリーが開きません。

エクスプローラー

ということで、「このデバイス上に新しい画像とビデオが見つかりませんでした。」と表示された場合の対処方法について紹介します。

2.対処方法

わかればなんてことはないのですが、iPhoneを再起動したあと、再接続することで解決しました。

またiPhoneを接続したときに「このコンピュータを信頼しますか」といったメッセージが出るので、「信頼する」をタップしましょう。

Comments [0] | Trackbacks [0]

reCAPTCHAでコメントスパムや検索スパムを撃退する

October 12,2017 12:03 AM
Category:[Google]
Tag:[reCAPTCHA]
Permalink

reCAPTCHAでコメントスパムや検索スパムを撃退する方法を紹介します。

eCAPTCHAのサイト

1.はじめに

以前reCAPTCHAに関する記事をエントリーしました。

当時は表示された画像や音声の文字を入力する方式でしたが、最近Googleでも利用されているreCAPTCHAはチェックボックスにチェックするだけの簡易なUIになり、各段に使いやすくなっています。

で、以前から当ブログに対する検索スパムがひどいため、これを使って実装してみることにしました。

ちなみに2017年10月現在、このブログの右サイドバーにある検索フィールドに適用しています。

2.reCAPTCHAへのウェブサイト登録

GoogleのreCAPTCHAのサイトへアクセス。

reCAPTCHAのサイト
reCAPTCHAのサイト

右上の「Get reCAPTCHA」をクリック。

eCAPTCHAのサイト

reCAPTCHAの設定画面が表示されます。

(クリックで拡大、以下同様)
reCAPTCHAの設定画面

Labelに任意の文字列(ここでは『小粋空間」)を入力し、「Choose the type of reCAPTCHA」から利用するreCAPTCHA(ここでは「I'm not a robot(私はロボットではありません)」)を選択します。

reCAPTCHAの設定画面

タイプを選択すると、ドメイン設定フィールドが表示されます。

ドメイン設定フィールド

「Domains」に該当のドメインを入力し(複数ドメイン設定する場合は1行につき1ドメイン)、「Accept the reCAPTCHA Terms of Service.(利用規約)」にチェックして「Register」をクリック。

ドメイン設定フィールド

これで登録されました。運用で利用するのは一番上に表示されている「Site key」と「Secret key」です。「Secret key」は外部に知られないよう注意してください。

登録

3.ウェブサイトの実装

head終了タグの前に下記のタグを追加します。

<script src="https://www.google.com/recaptcha/api.js"></script>

reCAPTCHAウィジェットを表示するformタグの最後に、下記のスニペットを追加します。

<div class="g-recaptcha" data-sitekey="[Site key]"></div>

4.サーバサイドの実装

サーバサイドの実装ですが、ウェブサイトにreCAPTCHAのフィールドを追加することで、フォーム送信時に"g-recaptcha-response"というPOSTフィールドが追加されます。

そのフィールドの値と「Secret key」の値および、リモートIPアドレスを下記のURLに追加し、後述するスクリプトなどを使ってリクエストを送信します。

https://www.google.com/recaptcha/api/siteverify

追加例:

https://www.google.com/recaptcha/api/siteverify?secret=[Secret key]&response=[g-recaptcha-responseの内容]&remoteip=[リモートIPアドレス]

このリクエストに対し、下記のレスポンスが返ってくるので、これを判定すればOKです。

{
  "success": true|false,
  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
  "error-codes": [...]        // optional
}

以下、Perlでの実装例で、"success"フィールドのみ判定しています。

#!/usr/bin/perl
 
use strict;
use CGI;
use LWP::UserAgent;
use JSON::Parse;
 
my $secret_key = '[シークレットキー]';
my $url = 'https://www.google.com/recaptcha/api/siteverify';
 
my $cgi = CGI->new();
my $ua = LWP::UserAgent->new();
my $recaptcha_response = $cgi->param('g-recaptcha-response');
my $remote_ip = $ENV{REMOTE_ADDR};
my $response = $ua->post(
    $url,
    {
        remoteip => $remote_ip,
        response => $recaptcha_response,
        secret => $secret_key,
    },
);
if ( $response->is_success() ) {
    my $json = $response->decoded_content();
    my $out = parse_json($json);
    if ( $out->{success} ) {
        # 正常処理
    }
}

5.参考サイト

参考サイトは下記です。ありがとうございました。

Comments [0] | Trackbacks [0]
 1  |  2  |  3  |  4  |  5  | All pages