Web

httpアクセスをhttpsにリダイレクトする .htaccess

SSLを導入したらサイト全体をSSLにしちゃった方が何かと楽ですよね。
GoogleでもSSLサイトは評価の対象です。

HTTPS をランキング シグナルに使用します
https://webmaster-ja.googleblog.com/2014/08/https-as-ranking-signal.html

でもすでにインデックスされているページからのアクセスや名刺にURLが書いてあったりするとhttp://~からアクセスされます。

http://~でアクセスされたのを強制的にhttps://にリダイレクトするには。
.htaccessの設定で簡単にできます。

特定のページだけをSSLにしたい場合
hoge.html,hoge2.htmlだけをSSLリダイレクトしたい場合の例

逆に特定のページだけを非SSLにしたい場合

こちらのページを参考にさせていただきました。
.htaccessだけでSSL対応するには
http://www.meibinlab.jp/nishijima/archives/54

GMOクラウド iClusta+ で.ftpaccessが有効にならないときの対処法

GMOクラウドのレンタルサーバー iClusta+は高い安定率を誇るレンタルサーバーです。

安定性(稼働率)が重視されているため、自由度があまりないという欠点もありますが安定しているというのはレンタルサーバーとしては嬉しいところです。

このGMOクラウドのiClusta+でFTPのアクセスを制限する「.ftpaccess」を設置することができます。
が、なぜか.ftpaccessを設置してもFTPアクセス制限されていない・・・

わたしの場合はちょっとしたことが原因でした。

まずはテキストエディタで以下のように作成

名前をftpaccess.txtで保存し、サーバー内の制限したいディレクトリへアップロード。
その後、ファイル名を.ftpaccessに変更します。

制限が効いてなかったのは、.ftpaccessの文字コードが問題だったようです。
サポートページにも書いてありますが、

文字コード:EUC
改行コード:LF

に保存しなおしたところ、無事アクセス制限されるようになりました。

.ftpaccessの設置方法はこちらに詳しく載っています。

GMOクラウド .ftpaccessを使用する場合
https://support.gmocloud.com/shared/ic/guide/planmanager_app/ftp/ftpaccess_setting.html

 

 

WordPress + Welcart ショッピングサイト全体をSSL化

WordPress でECサイトが作れる無料のプラグイン Welcart 。

何度か使わせていただいています。
国産のプラグインなので日本語によるマニュアル等も充実しているのもありがたいです。
ちょっと古いけど本も出版されています。(私も購入済み)

WordPressでオリジナルテーマを作る要領でショッピングサイトも構築できる感じでしょうか?

このWelcartで最近ECサイトを制作したのですが、サイト全体をSSL化したくてちょっと手間取ったので覚書として。

まずはレンタルサーバ。
ショッピングサイトですが、はじめは小規模スタートなので、レンタルサーバも格安レンタルサーバーに。

ロリポップも検討しましたが、ネットオウルの月額250円の格安レンタルサーバー「ミニバード」に決定。

ミニバードは、以前から利用していて特に障害もなく、レスポンスも悪くないので気に入っています。
さらに、同じグループのSSLBOXを利用すれば、最安年間5990円で独自SSL証明書が取得できるのに惹かれました。
レンタルサーバー代と合わせても、
ミニバード12ヶ月契約で3000円(年間・税抜)
SSL証明書(CoreSSL) 1500円(年間・税抜)
プラスミニバードで独自SSLを利用するのに、固定IPオプションが必要なので
ミニバード固定IPオプション 5000円

合計9500円(税抜き)程度で独自SSL+レンタルサーバーが使えます。
カラーミーショップをレンタルするのもいいけれど、いろいろ自由にできるWordPress+Welcartを使うならこれで満足かと。

SSL導入は1日程度で完了。

WordPressインストールしてWelcartも設定しました。

ここで昨今、Googleさんも常時SSLを推奨していたり、SSL化しているかしていなかも検索順位に影響しているとか。

そんなこともあるのでこのサイトも全体的にSSLにしよう!ということに。

WordPressでの設定は、設定>一般で「WordPress アドレス (URL)」「サイトアドレス (URL)」を両方ともhttpsから始まるURLに変更。
FireShot Capture 45 - 一般設定

Welcartでも、システム設定ページで、「WordPress のアドレス (SSL)」「ブログのアドレス(SSL)」を同じようにhttpsで入力。

FireShot Capture 46 - システム設定

ここで私は最初「SSLを使用する」にチェックを入れていました。

で、トップページを表示してみると無事SSL化されたページになっているのですが、カテゴリーや商品ページはなぜか、httpのまま・・・。

なぜなのかわからず、.htaccessを設定して強制的にSSL化するように設定しても変わらず。。。https化するプラグインが必要なのかとも思っていましたが、

いろいろ調べたところ、この「SSLを使用する」にチェックを入れてたことが原因でした。
Welcartのコミュニティに詳細が。

「SSLを使用する」というオプションは「SSLの切り替えを行う」と言う意味のものです。常時SSLではもう切り替えは行いませんので、チェックを外すという事になります。

SSL とスマホでの購入について
http://www.welcart.com/community/archives/76773

そういうことだったのですね!

FireShot Capture 46 - システム設定2

SSLを使用するのチェックをはずし、httpでアクセスしてきた場合にhttpsにリダイレクトしてくれる.htaccessを設置。

無事、サイト全体をSSL化することができました!

これに伴い、Google Search consoleやGoogle analyticsもhttpsから始まるURLに変更しました。

 

今回契約したサービス。

「ミニバード」月額250円(税抜)からの個人向けレンタルサーバー
もっとディスク容量が欲しい人には上位プランのサービスもあります。


年額990円(税抜)からの格安SSL証明書サービス【SSLボックス】

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

パラメータがいっぱいついてる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