SSLセキュアなページでこのページには安全でない他のリソースが含まれています。と出た場合の対処法

SSLを設定して、ページをアップしたに、このようなメッセージが表示されることが

「このページには安全でない他のリソースが含まれています。このリソースは送信中に他のユーザーから見られる可能性があります。また、悪意のあるユーザーによって改変されページの見た目が変わる可能性もあります。」

安全でないコンテンツ

SSLのページなのに、http://からはじまるセキュアでない通信を行っているもの(たいてはimgタグやjavascriptなどのリンク)があるとこのように表示されてしまいます。

折角SSLを設置したのにこれではもったいないし、見てくれたユーザーさんにも不安を与えてしまうのでちゃんと対処した方が良いですね。

でもソースを見ただけではすぐに原因がわからない場合も多いです。
そんな時にはGoogle Chromeデベロッパーツールですぐに確認できます♪

デベロッパーツールを開いた後、コンソールを選択すると以下のようにメッセージが表示されるのでhttpsでリクエストしたけどセキュアじゃない画像があるからhttpsで設定しなおした方が良いみたいなメッセージ?
ここを修正すれば解決だと思います。

安全でないコンテンツ確認

この場合はjqueryでスライドしている画像がhttp://~で設定されているのが原因でした。

ここをhttpsに設定しなおせばよいですね

そうすればGoogleさんのように鍵のマークが表示され暗号化されています。と表示されます。

google SSL

Facebook OGP ,Twitter Cards のOGP設定のまとめ

OGP(Open Graph Protocol)とは
シェアしてもらった時にそのページのタイトル、説明文、サムネを指定できるタグ。
Facebook,Twitter,Google+,mixiなどSNSで使えます。

The Open Graph protocol
http://ogp.me/

Facebook OGPの設定

OGPを使うことを宣言する

にprefix属性を付けて記述します。

og:
fb:
article:

のあとは必ず半角スペースが必要

og: OpenGraph のプロパティ
fb: Facebookのプロパティ
article: OGPのオブジェクトタイプ

articleはブログやサイト記事などのページ

必須プロパティの設定

og:title
ページのタイトル

og:type
オブジェクトタイプ

・website 一般的なサイトのトップページ
・article ブログやサイトのページ

og:url

そのページのURLを絶対パスで

og:image

シェアされたときに表示する画像のURL(絶対パス)

オプションプロパティ

og:site_name
サイト名

 

og:description
ページの説明meta descriptionと同様

 

Facebook用の設定

fb:app_id
FacebookのアプリケーションID(15文字の半角数字)

fb:app_idのほかにfb:adminsも使用可能だが推奨されてない

Facebook用OGP設定が正しいかどうか確認できるデバッグページ

Debugger (要ログイン)
https://developers.facebook.com/tools/debug/

Twitter Cards

ツイートにタイトル・概要・サムネを表示させることができます

Twitterカード
https://dev.twitter.com/ja/cards/overview

 

カードの種類(必須)twitter:card

種類がいくつかあるみたいだけど普通のサイトならsummaryでよいみたいです。

Cardの種類

Summary Card summary ブログ記事や製品情報、レストラン情報などWebサイトの情報を表示
Summary Card witd Large Image summary_large_image  summary cardの画像が大きく表示される版
Photo Card photo  写真が表示されるカード
Gallery Card gallery  4枚の写真を表示できるカード
App Card app  アプリの詳細情報を表示できるカード
Player Card player  ストリーミング再生ができるカード、特別な承認作業が必要なよう
Product Card product  製品情報を表示できるカード、写真のほか在庫情報や価格なども表示できる

詳細はTwitterデベロッパーページにあります。サンプルタグもあり。
https://dev.twitter.com/cards/types/summary

アカウント(必須)twitter:site

サイトのTwitterアカウントを指定します。

タイトル(必須)twitter:title

タイトルは70文字まで

概要(必須)twitter:description

 

検証して申請

上記タグを設定したら、下記ページでタグを検証して申請します。

Card validator
https://cards-dev.twitter.com/validator

photoshop cc アップデート後にエラー

先日のESET関連でもうひとつ、AdobeCCを利用中ですが、CreativeCloudのアップデートをしても必ずエラーに。

スクリーンショット 2016-03-27 7.15.34

なんでなのか原因をググってもこちらも解決しませんでした。

でも先日のことがあったのでこれもESETを無効にしたらいけるのかもと思い、ファイヤーウォールを一時的に無効に。

スクリーンショット 2016-03-27 7.22.06

再度アップデートしたら成功しました!

話は前後しますが、それより前にPhotoshop CC2015でアップデート後、Photoshopを起動すると、jpgファイルを開こうとすると「ファイルが見つかりません」というエラーが。

ps-error

これは、CameraRawがなかったから(ぬけおちてた?)からが原因のようです。

【解決事例】Photoshop CC 2015「”要求された操作を完了できません 。ファイルが見つかりません”のエラーでjpgが開けない」

CameraRawはここからダウンロードできます。

Adobe Camera Raw Help / Camera Raw plug-in installer
https://helpx.adobe.com/camera-raw/kb/camera-raw-plug-in-installer.html

インストール後、無事jpgファイルが開けるようになりました。

 

 

OSX : Webページが真っ白になる(Google Chrome ,Safari)

普段は、GoogleChromeを主に使ってるのですが、少し前からWebページが真っ白になってまともに表示されないことがあります。

表示されないサイトは色々なんですが、頻繁なのが
Yahoo!Japan, Naverまとめページ、Locondo、FC2ブログなどです。

見たいページが見れないって結構ストレスですよね。

Chromeに何か原因があるのかと思って、キャッシュを削除したりしても改善されず、検索して同じ現象の人を探してみても、思うような結果は得られていませんでした。

相変わらずWebページを開くと真っ白になるので、Firefoxに切り替えたりしてやり過ごしてました。Safariも試したのですが同じような現象に。それもchromeより調子悪い。

そんな時に発見したのがこのページ

Mac環境で特定のWebページが表示されないなど、通信が遮断される現象が発生する
http://eset-support.canon-its.jp/faq/show/3822?site_domain=private

実は私のmacbookproにはESET Cyber Security Pro  V6がインストールされています。(5ライセンス版を購入したので。。。)

このページをよくよく見ると、まさに同じ現象。
早速、アップデート版を上書きインストール。

ロコンドも一発で表示!

まさか、セキュリティソフトに原因があるとは思ってもいませんでした。ChromeもSafariもWebkit系(でした?)だから同じような現象だったんでしょうか。

少し様子見ですがこれで解決できたようです^^

WordPress 管理画面wp-login.phpほかのアクセス制限 メモ

wordpress への不正アクセスなどへの対策やっていますか?
最近だと、レンタルサーバー会社自体で、海外IPをブロックする対策を導入していたりして安心度は増しましたが、国内IPだけだから絶対安心とは限りません。

WordPressのログインを一定回数以上間違えるとロックするプラグイン
Limit Login Attempts
https://wordpress.org/plugins/limit-login-attempts/

ログイン履歴(エラーもふくめて)を記録してくれるプラグイン
Crazy Bone
https://wordpress.org/plugins/crazy-bone/

などを使わせて頂いてますが、数は多くないですがあります。
ログイン試行している形跡が。

一番有効なのはやはり.htaccessでのIP制限だと思います。
特定のIPだけを許可したい、特定のIPだけを拒否したいという場合があると思うのでその時のためにメモしておきます。

制限をかける対象のファイル・ディレクトリ

  • wp-config.php
  • wp-login.php
  • wp-admin/
  • xmlrpc.php

wp-config.phpのアクセス制限

wp-config.php はデータベース情報など重要情報が記載されているのでアクセスできないようにしておきます。

wp-login.phpのアクセス制限

■特定のIPのみ許可する

※192.168.xx.xxからのアクセスだけ許可する
複数指定する場合は、改行してallow from を記述

■特定のIPを拒否する

アクセスする場所が限定できない場合はこっち

※192.168.xx.xxからのアクセスを拒否する

wp-adminディレクトリのアクセス制限

※wp-adminディレクトリ内にある「admin-ajax.php」は、プラグインで使われている場合があるので対象から外した方がよいらしいです。
Gatespace’s Blogさんの記事から
http://gatespace.jp/2013/05/21/wp-admin-access-restriction-ver3-5-1/

wp-adminディレクトリ内に.htaccess を置く

■特定のIPのみ許可する

xmlrpc.phpの対策

xmlrpc.phpに対しブルートフォースアタックをかけられるのを防ぐため
※Pingback機能を悪用して踏み台にするらしい

もしくは、Disable XML-RPC Pingbackプラグインを利用する
https://ja.wordpress.org/plugins/disable-xml-rpc-pingback/

.htaccessでの制限の記述おさらい

アクセス制限をかける場合、
「すべてを許可してから特定のIPを拒否する」
「すべてを拒否してから特定のIPを許可する」
という設定方法があります。
それを記述するのが「order」です。

すべてを許可する  order deny,allow
すべてを拒否する   order allow,deny

「すべてを許可してから特定のIPを拒否する」
order deny,allow
allow form 許可する対象
deny from 拒否する対象

「すべてを拒否してから特定のIPを許可する」
order allow,deny
deny from 拒否する対象
allow from 許可する対象

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.

例)ジブリ美術館

Google Chromeをカスタマイズして起動する覚書

Google Chrome(Windows)を設定を変えて起動したいとき

ショートカットのリンクにパラメータみたなものを付加します

SnapCrab_chromeexe - ショートカットのプロパティ_2016-1-26_12-9-55_No-00

 

設定前の状態

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe”

Google Chromeを常にシークレットモードで起動する

–incognito を追記

追記後

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –incognito

GoogleChromeの設定を変えて起動(複数起動)

–user-data-dir=”c:¥任意の名前”

追記後

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –user-data-dir=”c:¥任意の名前”

Google Chromeのキャッシュの場所を変更する

“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” –disk-cache-dir=”D:\Google\Cache”

DドライブのGoogleフォルダ内のCacheフォルダに変更する

–(ハイフン二つ)の前には半角スペースあり

パラメータがいっぱいついてるURLのリダイレクト?

redirect1.php&no=数字

みたいなURLを

redirect2.php&no=数字

へリダイレクトする

 

 

recirect1.php&k=&c=(数字)&no=(数字)&uno=(数字)&nam=(エンコードされた日本語)

recirect2.php&k=&c=(数字)&no=(数字)&uno=(数字)&nam=(エンコードされた日本語)

 

\d+ は1文字以上の数字

[!-~]+ は1文字以上の半角文字

※+をつけると1文字以上の繰り返し

 

こちらのサイトを参考にさせていただきました

正規表現チェッカー ver3.0
http://okumocchi.jp/php/re.php

 

正規表現は難しいです・・・

スマホ・PCを判別してリダイレクトするまとめ

PC用ページとスマホ用ページが別々に存在する場合、
ユーザーエージェントで振り分けるのが一般的です。

方法は.htaccess , javascript , php といくつかあります。

.htaccess で自動的に振り分ける方法
一番よく使います。

こちらがとても参考に

AllAboutPC版とスマートフォン版サイトを自動振り分けする方法
http://allabout.co.jp/gm/gc/386483/3/

4行目のRewriteCond %{QUERY_STRING} !mode=pcは

というパラメーターが付与されていないときだけリダイレクトする
付与されている場合はリダイレクトしない

 

★スマホ用ページからPC用ページにリダイレクトする場合

使う機会はあまりないと思うが、検索結果でスマホ専用ページが、PC用のページより上位に来ちゃったからスマホページにアクセスしたらPCページに飛ばしたいときなど

その場合、3行目

に。

Javascript でスマホとPCを振り分ける

indexOf()メソッドは、指定したキーワードの発見位置を返す。
発見できなければ「-1」を返すので、0より上であればキーワードが発見できたことになります。

navigator.userAgentでユーザーエージェントを取得し値が「iPhone」だった場合

iPhoneだったときの処理

iPhoneじゃなかったときの処理

PHPによるスマホ、PCの振り分け

 

パラメータ付URLの振り分け

これが
パラメータ付きURLを、パラメータ付きURLへリ
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q14108068759

参考にさせてもらったサイト
ユーザーエージェントによってPCとスマートフォン(iPhone / Android)を振り分ける方法いろいろ(PHP / JavaScript / .htaccess等)
http://html5-css3.jp/smartphone/pc-iphone-android-php-javascript-htaccess.html

.htaccessでPCサイトとスマートフォンサイト切り替え
http://www.kaasan.info/archives/1409

JavaScript とかによるブラウザ判定方法のまとめ
http://etc9.hatenablog.com/entry/20110927/1317140891

スマートフォン(iPhone/Android)のページ内振り分け
http://rfs.jp/sb/javascript/js_lab/smartphone_user-agent.html

一定時間おきにボックスを表示させるjQuery

何秒、何分おきにボックス(iframeでもよい)を表示させるjQuery。
動画サイトとかで、動画の中央に表示される広告みたいなのをイメージ。
一定時間でボックスを表示させるjQuery

こちらを参考にさせていただきました。

さくっと簡単!jQueryでコンテンツをオーバーレイ表示させる方法
http://liginc.co.jp/web/js/jquery/39777

【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。
http://on-ze.com/archives/341

HTML

CSS

.boxサイズ W718px、H438px、
#modalwin  W300px H250px
#modalwin,#closeのz-indexは必要かどうかは不明。

jQuery

この場合は、10秒間隔でボックス#modalwinを表示させています。

jQueryの読み込みも忘れずに

こっちでもいい