28. 10月 2018 · Write a comment · Categories: その他 · Tags:



はじめに

中部地方でWebエンジニアをしています。今回自社運営しているサイトを常時SSL対応しました。
先日、日本時間2018年10月17日にChrome70がリリースされ、HTTPSでないページへの警告がさらにまた1つ進みました。
まだ現状ではHTTPのページも閲覧はできますが、この先常時SSL対応していないサイトはどんどん閉め出されていくことが予想されます。
また、ServiceWorkerなどの技術を導入する際も常時SSL対応がされていないと導入できなかったり(しにくかったり)と常時SSLでないことのデメリットは増えていく一方です。
今回、自社サイトの常時SSL対応をするにあたって行った内容を記述します。
サイト規模はざっくりとしかお伝えできませんが、デイリーPVが200万超えるくらいです。


 

やったこと

  • Mixed Contentの収集
  • ひたすら書き換え
  • 強制SSLリダイレクト

Mixed Contentの収集

常時SSL対応をするにあたってここが一番重要かと思うのですが、実際のユーザーの手元で発生しているMixed Contentを把握する必要があります。
そこで行ったのがContent-Security-Policyの設定です。
どういうことかと言いますと、ヘッダー情報にMixed Contentの発生を通知するような情報を追加します。
これにより、ユーザーの手元で発生したMixed Contentの内容が把握できるようになります。
具体的には.htaccessに以下のような記述を追加しました。


Header set Content-Security-Policy-Report-Only: "block-all-mixed-content; report-uri https://example.com/mixedcontentreport.php"

こうすると、Mixed Contentが発生した際にその内容が https://example.com/mixedcontentreport.php に json で POST されます。
https://example.com/mixedcontentreport.php の部分はご自身の環境にあわせて書き換えてください。
POSTされてくる json は以下のような内容となっています。


{
  "csp-report": {
    "document-uri": "https://example.com/hogehoge/",
    "referrer": "https://example.com/hogehoge/fugafuga/",
    "violated-directive": "block-all-mixed-content",
    "effective-directive": "block-all-mixed-content",
    "original-policy": "block-all-mixed-content; report-uri https://example.com/mixedcontentreport.php",
    "disposition": "report",
    "blocked-uri": "http://example.com/foo.png",
    "line-number": 1,
    "source-file": "https://example.com/hogehoge/",
    "status-code": 0,
    "script-sample": ""
  }
}

上記の例だと https://example.com/hogehoge/ にアクセスした際に http://example.com/foo.png で Mixed Content が発生しています。
この情報を DB に記録してひたすらMixed Contentを潰していかなければなりません。
不毛とも思える対応ですが、他に方法はありません。(あったら教えてください。。。)



ひたすら書き換え

Mixed Content収集の準備が整ったら、続いて HTML、CSS、JavaScript の書き換えを行います。
こちらに関しては要するにリクエストが発生する箇所をすべてHTTPSで読み込むように書き換えます。
使用しているフレームワークによってはある程度システム的に置き換えも可能だと思いますので、こちらに関してはサイトによって対応が変わってきます。


強制SSLリダイレクト

こここまでの対応で常時SSL化の対応準備が整いました。
最後にユーザーからのアクセスを強制的にHTTPSにリダイレクトさせます。
こちらに関しては .htaccess で対応、PHP で対応、ロードバランサで対応などいろいろ考えられますが、まずはアクセスの1%を強制SSLリダイレクトすることをオススメします。
いきなり全アクセスをSSLにしてしまうと影響範囲が大きすぎるため夜中の対応を強いられることになるかもしれません。。。
別に私がそうだったわけではありませんが。。。


まとめ

常時SSL化の対応をしないという選択肢は正直ありえませんので、もしまだ対応をしていないようであれば一刻も早く対応をしたほうが良いかと思います。
やること自体は至ってシンプルですが、ただ面倒くさいのは事実です。
まずは状況把握としてMixedContentの収集をしてみてはいかがでしょうか?


15. 10月 2018 · Write a comment · Categories: PHP · Tags: ,



はじめに

私の職場があるビルはいわゆるランドマークタワーで、地元ではこの中で働いているというだけで何故か信頼を得られるのですが、実際は空調が一元管理されておりあまり融通が効かず快適な職場とは言えません。
そこで導入されたのが NETATMO ウェザーステーションです。
こちらを使って気温や CO2 濃度の計測をして、社内で決められた値を超えたら管理部門に電話をするようになりました。
しかし、この情報は NETATMO 専用の Web サイトにアクセスして確認しなければならず、忙しい業務中に確認するというのは現実的ではありませんでした。
そこで今回、NETATMO API から気温・CO2 を取得し社員が頻繁に見ている社内管理ツール上に表示するようにしてみました。


 

やりたいこと

  • NETATMO API から情報を取得

NETATMO CONNECT に登録

NETATMO API を利用するするにはアプリケーションの登録が必要となります。NETATMO CONNECT に登録をします。
※NETATMO ウェザーステーションをすでに利用している前提の話です。


netatmo connect



必須項目は2018年10月現在、以下3つです。それぞれ入力します。

  • Name
    • 作成するアプリ名です
    • 深く考える必要はありません。私は「officeAtmo」としました。
  • Description
    • アプリの説明です
    • これも深く考える必要はありません。私は「管理ツール用」としました。
  • Data Protection Officer name
    • データ保護責任者の名前
    • 会社組織の場合、該当者がいるはずですのでその方の名前を入れます
    • 事前に確認了承を得てください

登録が完了すると TECHNICAL PARAMETERS の登録となりますが、こちらは特になにも入力しなくて大丈夫です。
ただし、表示されている Client id と Client secret は API で使います。


technical param




これで事前準備は完了です。ここからは実際に API を叩いてみます。


実装

私は PHPer なので PHP での実装となります。
とりあえずコード貼ります。


<?php
// NETATMO CONNECT に登録した内容で認証 API を curl で叩く
$netatmoAuth = array(
    'client_id'     => CLIENT_ID,
    'client_secret' => CLIENT_SECRET,
    'grant_type'    => 'password',
    'username'      => MAIL_ADDRESS,
    'password'      => PASSWORD,
);
$url = 'https://api.netatmo.com/oauth2/token';
// 自作 curl ライブラリ
$requestObj = new CurlHttpRequest($url, $netatmoAuth);
$timeOutSecond = 30;
// POST で
$response = $requestObj->post($timeOutSecond);

// 例外処理は適宜入れてください

// 認証情報が json で返ってくるので decode する
$response = json_decode($response['body'], true);

// 取得した認証情報のアクセストークンを使って現在のウェザーステーション情報を取得
$url = "https://api.netatmo.com/api/getstationsdata?access_token={$response['access_token']}";
$requestObj = new CurlHttpRequest($url);
$timeOutSecond = 30;
// 今度は GET で
$response = $requestObj->get($timeOutSecond);
$response = json_decode($response['body'], true);
// 気温
$netatmo['temperature'] = $response['body']['devices'][0]['dashboard_data']['Temperature'];
// CO2 濃度
$netatmo['co2'] = $response['body']['devices'][0]['dashboard_data']['CO2'];
// 湿度
$netatmo['humidity'] = $response['body']['devices'][0]['dashboard_data']['Humidity'];


Netatmo API へのアクセスは curl で行っていますが上記の例では自作の curl ラッパークラスを使っていますので、適宜ご自身の環境で書き換えてください。
まずは認証を通過する必要があるので、認証 API を叩いています。今回は閉じた環境でサクッと利用するために簡易的な方法をとっています。
grant_type に password を指定して、NETATMO CONNECT に登録した内容と取得した Client id と Client secret で POST リクエストを送ります。
認証結果が json で返却され、中にアクセストークンが含まれています。
続いてアクセストークンを使って現在のウェザーステーション情報を取得します。
こちらも json で結果が返ってくるので、その中から必要な部分を抜き出します。今回は気温・CO2濃度・湿度を社内の管理画面に表示させてみました。


まとめ

実際の管理画面はお見せできませんが、これで気になったときにすぐオフィスの快適度が数値として分かるようになりました。
まあ、そこから管理部門に電話しなきゃいけないんですけどね。。。ハードル高すぎ。。。
では快適な職場ライフを。。。




はじめに

ググるとたくさん出てくるのでご存知かとは思いますが、Instagram には API があります。また、こちらもご存知かとは思いますが Instagram API の利用申請許可が降りる可能性は極めて低いです。昨今のインスタブームに乗っかって Instagram を利用したい経営者は多数いるかと思いますが、正規の方法での利用は諦めたほうがいいでしょう。また、Instagram のスクレイピングは規約で禁止されていますのでスクレイピングで実装を支持されたエンジニアの方はその旨を伝えて拒否しましょう。

不正な方法を用いて、アカウントの作成、情報へのアクセス、または情報の取得を試みることは禁止されています。
これには、弊社から明示的な許可を得ることなく、自動化された手段を用いてアカウントを作成したり、情報を取得したりする行為が含まれます。

とはいえ、Instagram のスクレイピング自体はお勉強の題材としては良いかと思いますので、少しだけ実装をしてみました。以下の内容は自己責任の範囲でご確認ください。

 

やりたいこと

  • Instagram のハッシュタグ検索をスクレイピング
    • 最新投稿の本文を取得
    • ハッシュタグ検索結果件数を取得

実装

私は PHPer なので PHP での実装となります。
とりあえずコード貼ります。


<?php
// 検索対象ハッシュタグ
$tagList = array(
    'インスタ映え',
    'インスタ萎え',
);
foreach ($tagList as $tag) {

    // Instagram へアクセス
    $encodedTag = urlencode($tag);
    $url = "https://www.instagram.com/explore/tags/{$encodedTag}/";
    // 自作の curl ライブラリ
    $requestObj = new CurlHttpRequest($url);
    $timeOutSecond = 30;
    $instagramContentsResponse = $requestObj->get($timeOutSecond);
    
    // タイムアウト処理等は適宜いれてください

    // レスポンスから必要な json 部分を抜き出す
    $instagramContentsResponse = $instagramContentsResponse['body'];
    $positionStart = mb_strpos($instagramContentsResponse, 'window._sharedData = ');
    $positionEnd = mb_strpos($instagramContentsResponse, ';</script>');
    $length = $positionEnd - $positionStart;
    $json = mb_substr($instagramContentsResponse, $positionStart, $length);
    $json = str_replace('window._sharedData = ', '', $json);
    $jsonObj = json_decode($json);
    $infoListObj = $jsonObj->entry_data->TagPage[0]->graphql->hashtag->edge_hashtag_to_media->edges;
    foreach ($infoListObj as $index => $infoObj) {
        // Instagram 投稿 ID ?
        $infoObj->node->shortcode;
        // 投稿日時
        $stamp = date('Y-m-d H:i:s', $infoObj->node->taken_at_timestamp);
        // 投稿本文
        $text = $infoObj->node->edge_media_to_caption->edges[0]->node->text;
    }
    // ハッシュタグ検索結果件数
    $instagramPostCount = $jsonObj->entry_data->TagPage[0]->graphql->hashtag->edge_hashtag_to_media->count;
}


Instagram へのアクセスは curl で行っていますが上記の例では自作の curl ラッパークラスを使っていますので、適宜ご自身の環境で書き換えてください。
GET でアクセスできれば、file_get_contents でもなんでも構いません。
取得したレスポンスから JavaScript の部分に必要な情報が入っていますので、その部分を抜き出します。
また、データは JSON 形式になっていたため json_decode しています。
あとは必要な情報へアクセスして DB に保存するなど煮るなり焼くなり。。。
もし、文字化けする場合はサーバーの設定か PHP の文字コード設定を見直してみてください。

まとめ

今回は Instagram ハッシュタグ検索のスクレイピングを試しましたが、同じ要領で個別の投稿のスクレイピングもできるかと思います(未検証)。
このデータを収集して機械学習用のデータにすると面白いかもしれないと思いました。
ただし、冒頭にも記載しましたが Instagram の利用規約に抵触する可能性が高いので自己責任の範囲で行ってください。
上記内容の利用に関して筆者は一切の責任を負いません。
では、楽しいインスタライフを。