GeoIPを使用して、退屈なデータをより優れたユーザーエクスペリエンスに変換します

人は視覚的な生き物です。 彼らは（猫のビデオを超えた）かわいいものを見るのが好きです。 私はこれをそう言っているのではなく、楽しんでいるからでもありません！ それは難しい、冷たい事実です。 ますます減少する注意スパンと組み合わせて、アプリケーションが機能や品質ではなく外観（最初の3秒）によって判断されるので安心してください。 アプリのカスタムGUIデザインにお金を払う余裕がない開発者の場合、これは特に壊滅的です。 アプリが「開発者によって設計された」ように見えても、アプリがどれほど優れていても、高速で革新的であっても、人々はそのチャンスを与えることすらできません。 ありがたいことに、この問題を回避する方法があります。

実証済みのオープンソース管理テンプレートを使用することは、間違いなく良いスタートです。 信頼性の高いデータ注釈サービスを使用するのと同じくらい優れています。 もう1つのあまり知られていないトリックは、IPアドレスやブラウザのユーザーエージェント識別子などの鈍いデータを、ユーザーにより多くの情報を提供するだけでなく、楽しく見栄えのする、はるかに興味深いデータに変えることです。 最高のことは–それはどんなアプリにも追加できる無料で簡単な機能です。

標準的で退屈で醜い方法

理論や構成された状況に時間を浪費する代わりに、ほぼすべてのWebアプリに馴染みのあるシナリオに飛び込みます。つまり、ユーザーアクションログデータをテーブルに表示します。 実際のデータはシステムごとに異なりますが、いくつかのフィールドは一般的であり、それらにはIPアドレス、タイムスタンプ、およびユーザーエージェント文字列が含まれます。 その生データをテーブルに表示するだけでは、誰も見たくない醜い破局が発生し、毎日使用することは言うまでもありません。 下の表のようになります。 自分自身を脇に設計します。 データは人間向けに調整およびフォーマットされていないため、使用できません。 たとえば、IPアドレスは人々がよく覚えているものではありません。 これが、ドメイン名を使用する主な理由の1つです。 このようにエンドユーザーテーブルにIPを表示することは、境界線上では役に立ちません。

待ちきれない人のために–新しく改良された表をご覧ください。

いくつかの調整は大いに役立ちます

まず、ID列を失います。 なぜ誰かがあなたの内部データベースレコードIDを必要とするのでしょうか？ これは、ユーザーにとってまったく役に立たないデータです。 それは貴重な画面の不動産を取り上げ、重要な情報から注意をそらします。

MySQLタイムスタンプ形式のタイムスタンプは人間が読める形式ですが、ユーザーフレンドリーにはほど遠いです。 UNIXタイムスタンプとして保持および表示すると、事態はさらに悪化します。 その後、100％判読できなくなります。 ユーザーが異なれば（通常は場所に基づいて）、時刻、日付、通貨、数値データのフォーマットが異なります。 これらの違いは微妙ですが、尊重する必要があります。 ユーザーはそれを高く評価しています。 イベントの年齢も重要です。 新鮮なものの場合は、「10分前」などの説明を表示すると便利です。これは、最近のイベントであることを示します。完全なタイムスタンプを表示する必要はありません。 古いものについては、ローカルでフォーマットされた完全な日時を表示します。

ありがたいことに、WordPressにはすべてを処理するための組み込み関数があります。 WP admin – Settings – Generalで設定された日付と時刻の形式を使用して、サイトの他の部分の形式に合うようにタイムスタンプを調整し、 human_time_diff()関数を使用してユーザーフレンドリーにします。 次のコードは、MySQL形式のタイムスタンプがあることを前提としていますが、UNIXタイムスタンプの場合は、最初の行を削除します。

function wpr_format_timestamp( $timestamp ) {
  // convert MySQL timestamp to UNIX timestamp
  $timestamp = strtotime( $timestamp );
  
  if ( current_time( 'timestamp' ) - $timestamp > DAY_IN_SECONDS * 1) {
    // our event is older than a day
    // we'll show full timestamp formatted as per WP settings
    $out  = date( get_option( 'date_format', $timestamp );
    $out .= ' @ ' . get_option( 'time_format' ), $timestamp );
  } else {
    // timestamp is not older than a day
    // we'll show a message like "2 hours ago"
    $out  = human_time_diff( $timestamp, current_time( 'timestamp' ) );
    $out .=  ' ago';
  }
  
  return $out;
}

1日より古い日付の「人の違い」の形式を表示する場合は、 DAY_IN_SECOND定数に目的の日数を掛けます。

退屈なIPデータを使用してGeoIPで「すごい」効果を実現

多数のサービスがIPを人間が読める地理データ（探索したい場合は20のgeoIPサービスと比較）に変換します。これには、国、州、都市、タイムゾーン、通貨情報、ISPの詳細が含まれます。 これらはすべて、リモートAPIとダウンロード可能なデータベースの2つのカテゴリに分類されます。 geoIPデータは毎日変更されるため、ほとんどのプロジェクトでは、APIの方がはるかに適しています。 サービスは、価格、使いやすさ、返されるデータの精度が異なります。 何年にもわたってさまざまなサービスを使用した後、最後の2年間、私はIPGeolocationを使用してきました。 1か月あたり最大50,000のAPIリクエストがある小規模なプロジェクトの場合、サービスは完全に無料です。 あらゆるプロジェクト、特にテストのための、リスクのない優れたオファー。

APIの使用は簡単です。 アカウントに登録し（クレジットカードや同様のナンセンスは必要ありません）、アカウントページからAPIキーを取得し、IPとAPIキーを使用してAPIURLを呼び出すだけで結果を取得できます。 コード（WordPress固有）では、次のコードのようになります。 PHPを使用していない場合は、IPジオロケーションに使用できるSDKが6つあるため、プロジェクトに適したものを見つけることができます。 また、大規模なプロジェクト用にダウンロード可能なデータベースも提供しています。 詳しくはお問い合わせください。

function wpr_get_ip_info( $ip ) {
  $endpoint = 'https://api.ipgeolocation.io/ipgeo';
  
  // grab the API key from https://app.ipgeolocation.io/
  // if needed register for a free account, no credit card info needed
  $api_key = 'PUT-YOUR-API-KEY-HERE';
  
  $params = array('apiKey' => $api_key, 'ip' => $ip, 'fields' => 'city,country_name,country_flag');
  $url = $endpoint . '?' . http_build_query($params, '', '&');

  $response = wp_remote_request( $url );
  
  if (is_wp_error($response)) {
    return $response;
  }
  
  if (wp_remote_retrieve_response_code($response) != 200) {
    return new WP_Error('geoip_bad_response', 'Response code ' . wp_remote_retrieve_response_code($response));
  }
  
  $body = wp_remote_retrieve_body($response);
  
  if (empty($body)) {
    return new WP_Error('geoip_bad_response', 'Empty body.');
  }
  
  $body = json_decode($body, true);
  
  // returned variable is an array with following fields: ip, country_name, country_flag, city
  return $body;
}

APIは、IPに基づいてなんと26個の情報を返します–IPでテストしてください。 そのすべてを表示するのは多すぎるので、私は通常、国名、国の旗、および都市を選択します。 それは十分なデータであり、フラグは素晴らしい視覚的タッチを追加します。 要求は、帯域幅を節約するために、これら3つの変数のみを返します。 すべてのフィールドが必要な場合は、 $paramsのfields配列キーを空のままにします。 国の旗の画像は、IPジオロケーションから直接ホットリンクできます。これは非常に便利です。 ローカルIPの場合、あまり表示できないため、そのシナリオを考慮に入れてください。 ローカルIPの場合、応答コード423のWP_Errorが発生します。

ユーザーエージェント文字列は豊富なデータを隠します

ユーザーエージェント文字列は巨大であり、人間が直接消費するためのものではありません。 正気の人間は、その混乱に示されているすべてのデータを必要とせず、望んでもいません。 使用するデバイスの種類（デスクトップコンピューター、電話など）が必要です。 次に、OS – Windows、Mac、またはその他すべて。 使用しているブラウザは、Chrome、Safari、Internet Explorer、Firefoxです。 これにより、データはより構造化され、フィルタリングとセグメント化に役立つ3つの追加情報に分割されます。

私は他の人（私より賢い）が作ったものを使うことを大いに支持しています。 したがって、ユーザーエージェント文字列を解析するために、すぐに使用でき、戦闘でテストされ、よく管理されたライブラリを使用します。 GitHubのWhichBrowserにアクセスして、PHPバージョンを入手してください。 PHP環境の設定に応じて、Composerパッケージとしてインストールできます。手順は上記のリンクにあります。または、スタンドアロンのPHPとしてインストールできます。 2番目のグループにいる場合は、bootstrap.phpファイルを含めると、準備が整います。

タイムスタンプとIPの改善により、必要なコードの量は最小限に抑えられ、WhichBrowserは手間のかかる作業を処理します。

function wpr_get_browser_info( $user_agent ) {
  // assuming you don't use Composer, manually include WhichBrowser
  require_once 'whichBrowser-lib/bootstrap.php';
  
  // parse the user agent string
  $browser = new WhichBrowser\Parser( $user_agent );
  
  // grab the type and then the subtype
  // see WhichBrowser for more info
  $tmp = $browser->getType();
  $tmp = explode( ':', $tmp );
  $result['type'] = $tmp[0];
  
  // and the OS and browser name
  $result['os'] = $browser->os->name;
  $result['browser'] = $browser->browser->name;
  
  return $result;
}

保存したユーザーエージェント文字列をwpr_get_browser_info()関数に渡すと、OS名、ブラウザ名、デバイスタイプが返されます。 生のユーザーエージェント文字列の代わりにテーブルに配置します。

新しく改良されたテーブル

私たちの新しいテーブルを見よ。 同じデータを使用しましたが、人間のために適切にフォーマットおよび処理しました。

タイムスタンプ	国	街	ブラウザ	OS	端末	アクション
20分前	ドイツ	ベルリン	Firefox	Ubuntu	デスクトップ	ログインする
14時間前	アメリカ合衆国	フィラデルフィア	インターネットエクスプローラ	ウィンドウズ	デスクトップ	ログインする
2018年9月7日午後10時3分	ラトビア	リガ	サファリ	iOS	モバイル	パスワードのリセット
2018年9月2日午後2時12分	アメリカ合衆国	ノースバーゲン	Firefox	OS X	デスクトップ	ログアウト
2018年9月2日12:33pm	該当なし	該当なし	クロム	ウィンドウズ	デスクトップ	ログインに失敗しました

古いテーブルをもう一度見て、それがどれほどひどかったかを確認してください。 覚えておいてください–デザインは同じままでした！ フォントや色などの視覚的なものは調整せず、データのみを調整しました。 さらに、ほんの数行のコードで。

私たちは何を学びましたか？

私たちの「開発者によって設計された」GUIは、見たり使用したりするのが面白くないことが多いことを学びました。 私たちが行った他のすべての素晴らしくて大変な仕事は、一見、私たちのアプリががらくたのように見える場合は無駄です。 私はデザイナーから遠く離れており、GUIの設計についての指針を示すことはできませんが、何年にもわたって、退屈なデータを面白く、よりユーザーフレンドリーに見せるための方法を学びました。 IP Geolocation、WhichBrowser、および同様のツールは、わずか数行のコードで群衆から目立つのに役立ちます。 だから、それらを使用してください！