【非プログラマー備忘録】https化で必要そうなこととざっくり対応例

#そもそもなぜhttps化するのか、httpsにしたらなぜ作業が発生するのか
このへんは参考ページにたいへん詳しく書いてあります。

:page_facing_up:参考
[SSL対応でhttpとhttpsが混在したコンテンツが表示できない原因を特定する](https://feel-log.net/seo/ssl-notice-http-https/)
[WordPressサイトのSSL化(通信の暗号化)をする際の手順や注意点](https://www.1-firststep.com/archives/2492)
[SSL化でhttpからhttpsに移行中、混在コンテンツの対応し緑の鍵マークを付ける工程](https://bibabosi-rizumu.com/wordpress-ssl-http-https/#i)
[Googleも推奨！サイト全体を「常時SSL化」するべき理由とメリットについて](https://www.granfairs.com/blog/staff/about-ssl-02)

ほんとにさくっと適当極まりなく触れますと以下のような感じです。

:one: httpsにしておくとhttpよりも安全だからSEO的にも推奨されてるよ
:two: httpsのサイトではhttpのURLで読込するとエラーになったり動かないものがあるよ
:three: クッキーを使ってる場合は「セキュア」属性がオンになってないと安心じゃないよ

ここでいうエラーは「MixedContents」という..
httpsなのにhttpのURLを呼び出してるの危険じゃない？..的なやつが殆どです。
サイト内リンクを絶対パスにしている場合はURL違いによるリンク切れが起こりますし、
cssや画像、jsの読み込みファイルや埋め込み・インクルードなども絶対パスだとエラーが出ます。
ただの外部サイトへのaタグリンクは特に問題ありません。

#対応が必要そうな項目
仕様によって違うと思いますが
大体このへんは共通かな..というものをリストアップしました。
が、まずはサイト全体で「https」の個所を検索・対応可否を検討し、
スケジュールを切って進行していくのが無難かなと...
そのへんの判断のための材料として、参考になればと思います。

##WEBクリップ・OGP設定
ページでエラーは出ないけどツイッターやfacebookにてシェアした際サムネが表示されないため
phpなどでできるだけ共通ファイルに集約し、切替のタイミングでスッと「https」へ変更します。

:pencil2:記述例
```<meta property="og:image" content="https://www.○○○.com/images/img_ogp.jpg">
<meta property="og:url" content="https://www.○○○.com">
```

##SNSボタン
こちらも特にページ上でエラーは出ませんが、
https化されるタイミングで取得しなおしたタグに差し替えておくのが堅実です。

:pencil2:記述例
```<div class="fb-like" data-href="https://www.○○○.com/"　data-width="125" data-layout="button" data-action="like" data-show-faces="false" data-share="false">
```

##画像やcssが絶対パスで読み込まれている場合（ワードプレス等）
普通にリンク切れを起こす上にエラーが出ます。
手動での更新で絶対パスにしている箇所はそうそうないと思いますが、
ワードプレスの記事などは絶対パスで書かれていることが多いので、
もしルートパスにして問題なければ事前に対応しておくと、タイミングを分散できます。

:pencil2:記述例
```<img src="https://www.○○○.com/images/○○○/img_01.jpg" />
<img src="/images/○○○/img_01.jpg" />
```

:bulb:対応例
静的ファイルであれば使い慣れたコーディングツールで置換するとよいかと。
ワードプレスの場合は「[Search Regex](https://webllica.com/wordpress-plug-in-search-regex/)」にて置換するか、「[db-manager](https://www.adminweb.jp/wordpress-plugin/backup/index8.html)」にて
バックアップファイルを手動置換・アップロードし、バージョン管理にて反映する感じが楽です。
FTP上でデータベースにアクセス権が無い場合は前者で対応します。

##ワードプレス自体の設定
wp-conifg.phpと、管理画面にてWPアドレスとサイトアドレスをhttpsに変更

:page_facing_up:参考
[ブログ初心者がhttp→httpsへ常時SSL化させて直面した問題＆解決方法を公開！](https://kotaro-journal.com/wordpress-ssl-http-https)

:pencil2:wp-conifg.phpの記述例
```$_SERVER['HTTPS'] = 'on';
$_ENV['HTTPS'] = 'on';
```

##GoogleMapAPI
httpsになったときに警告が出るため対応が必要。
google自体はhttpsに対応しているので、事前に手動で変更しておくとよいかと。

:pencil2:記述例
```icon: new google.maps.MarkerImage('https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + (counter + 1) + '|○○○|000000')
```

##Youtubeの埋め込みタグ
古いタグではhttpから始まる埋め込みタグになっている可能性があり、
そのままにしておくとエラーが出ます。
youtube公式が既にhttpsに対応しているため、
こちらもhttps化する前に差し替えておくとタイミングを分散できます。

:pencil2:記述例
```<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/○○○" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
```

##cookieのセキュア対応
これはいくらでも参考サイトがあるのですが
とにかく全容が見えていない人間には理解し難かった..
cookieはデフォルトだとhttpでの通信なので、
cookieがhttpsによるセキュリティ保護を適切に受けられるようにするための設定が必要です。
php.ini（サーバへの設定）と、ページ単位で使用している「setcookie()」のパラメータへ
個別に追加する対応があります。
ブラウザのデバッグツールにてセキュアの項目にチェックがあるかどうかで確認できます。

どちらの対応もhttpsのURLでみたときしかセキュアのチェックは入らず、
httpsのサイトでしか動かないようにするためのものなので
https化と同じタイミングで対応する必要があります。

全容に関して、個人的には以下の記事がくわしくてわかりやすかったです。
むしろcookieのセキュア対応に関してはこれを読めば完璧なのでは..

:page_facing_up:参考
[Cookieとセッションをちゃんと理解する](https://qiita.com/hththt/items/07136ad74127999df271)

:pencil2:php.ini記述例
```ini_set("session.cookie_secure", 1);
```
:pencil2:setcookie()を各ページで使っている場合の記述例
```setcookie('cookiename','num','time()','/○○○/','○○.com',1,0);
//※第6引数「secure」を1に設定
```