Chromeアドレスバーに「保護されていません」と警告表示が出る

Google Chromeを利用していると、赤文字で「保護されていません」という警告表示が出ることがあります。
この「保護されていません」という表示は、Webサイトから送られる通信が暗号化されていない(Webサイトから送られる情報が第三者から読み取られてしまう可能性がある)ということを示しています。
いちばん分かりやすい違いは、Webサイトのアドレスが「http://」で始まるか「https://」で始まるかです。
それに対して、「https://」の「s」は、セキュリティの「s」です。httpの後に「s」が付いている場合は、Webサイトから送られる通信が暗号化されていて、第三者から情報が読み取れない状態です。ですので、Googleはhttpsを用いたセキュリティー強化を推奨しています。

Googleはhttpsを推奨しているところです。

制作フローについて

制作フローについては、各企業や案件毎にことなりますが、概略は以下の通りです。

制作フロー概略

①ワイヤーフレーム・デザインカンプ作成

クライアント確認作業

②コーディング・テストサイトUP

クライアント確認作業

③テストサイト内でのデバッグ・各種調整・マニュアル作成

クライアント確認作業・クライアント本サイトUP

端的に言ってしまえば、デザイン>コーディング>デバッグの3つです。経営理論としては、最初のコンピュータシステム基礎で学習した、フォーターフォール、プロトタイプ、スパイラル等名前が付いているものもあります。

コーディングで気を付ける点は、今回は最終的にWordPressで作成するという仕様ですので、ここを念頭に置く必要があります。とはいえ、カンプからいきなりWP化は大変かと思いますので、HTML&CSSコーディングしてある程度まで細部を詰めたあと、WPに起こす作業という段取りでも良いでしょう。

個人でのコーディングでもそうですが、手順の戻りや先取りも頻繁に起こります。例えば、コーディング結果を受けての画像サイズの調整や、ブラウザチェックを先んじて行いコーディングへの反映などです。これら行きつ戻りつを繰り返して、サイトは完成へ向かいます。グループでの作業ですので、作業待ちが発生してしまうケースも多くあります。そのときは自分の知識のストックを増やし、グループに還元できるよう学習サイト巡りをしてみましょう。

FileZilla経由で表示されるファイルをエディタで編集

注意!疑似的に編集する方法ですので、最終的にはFileZillaのウィンドウをアクティブにしてアップロードする必要があります。

設定方法

FileZillaのメニューバー編集>設定左カラムのファイルの編集をクリックし、右カラムの「既定のエディタ:」で「カスタムエディタを使用:」ラジオボタンにチェック。参照ボタンをクリックしてエディタのプログラムを選択します。

今回は教室のPC環境をベースにエディタのプログラム(Brackets)を指定していますので、ご自分のPCではプログラムファイルがどこにあるかを確認して設定してください。

Macでの設定はこちら

.htaccessの活用

BASIC認証

.htaccess(ドットエイチティーアクセス)とは、WebサーバーのApache(アパッチ)における、サーバーのディレクトリごとの設定情報を記しておくためのファイルのことです。.htaccessファイルを利用することで、Webページへのアクセス制限などが可能となります。※ご自身のサーバーで使用可能かどうかは、 .htaccessの使用許可を含め、サーバーの管理者にご確認ください。

稼働中のWebサービスに対して.htaccessを用いた認証は通常行われませんが、サービス公開前のデバッグ作業のため簡易的な認証を施すために.htaccessを編集してBasic認証を行うケースは多くあります。

.htaccessは.htpasswdと共に用いられますが、.htpasswdの場所を示すためにサーバー上でのフルパスが必要となります。ここでは、簡易的にphpを記述してフルパスを取得することにします。

<?php echo __FILE__ ?>

ブラウザ上でphpファイルにアクセスすると、サーバー上でのフルパスが表示されますのでコピーし、AuthUserFileの箇所にペーストして活用します。

必要ファイルは次の2つで、例の3桁番号が各自で異なります。認証したいサイトのindex.htmlと同階層に置くことでBasic認証が機能します。

AuthType     Basic
AuthName     "Authentication Sample"
AuthUserFile /virtual/htdocs/179/site/.htpasswd
require valid-user

Basic認証用のパスワード生成サイトを利用して、.htpasswdに情報を入力します。※ ユーザー名:パスワード の形式

暗号化された文字列をコピーして.htpasswdに貼り付けます。最終的に認証画面で入力する際は、暗号化前のご自身で設定したパスワード文字列になるので、注意が必要です。

WebD:qvVf3eeIwT7HQ

エラーページのカスタマイズ

ただ単に「Not Found」と書かれただけのページが出てくれば、「このページは消えちゃったのかな」と思って、ブラウザバックしてしまうのは当然のことと言えます。そうならない為にも、しっかりとした案内を記載した404エラーページを用意することで、サイトからの離脱を防ぐことに繋がるのです。


リダイレクト

htaccessのリダイレクト機能を使用すれば、サーバーの移転やページ構成の変更などを行った後に、元のページへのアクセスを新しいページに自動転送することができます。

要点を記入すれば.htaccessの記述内容を作成してくれるサービスがありますので、ご紹介です。


デバイス判別

レスポンシブデザインとしてhtml/cssを記述するのではなく、デバイス毎にWebページを用意するケースもあります。SEO対策や運用面では管理ページが多くなるので煩雑ですが、デバイス判別してそれぞれに最適化したページへ振り分ける手法は複数あります。phpやjsではなく、.htaccessで判別する方法を次にご紹介します(これも先ほどと同様にcman様のページ)。

ホームページへのアクセスには、アクセスしたパソコンのブラウザやOSの情報が含まれています。この情報をユーザーエージェント(User-Agent)と言います。htaccessでユーザーエージェントの判定することで、特定のブラウザやOS、モバイル(スマートフォンや携帯電話、タブレットなど)からのみアクセスをリダイレクトすることができます。

サイトのコピー禁止

ときには、コピー禁止の手法を用いてコンテンツ保護しているサイトを見かけますが、手法としてはJavaScriptを使用しているケースが多いようです。次のリンクで良いコードがありましたので紹介します。ページの最後部で紹介されているものがお勧めです。JSに加えてCSSでも制限をしています。

実際に試してみました。

…とはいえ、検証ツールを使用すれば、表示されているものは取得可能です。

ループしている個別投稿の一覧ページのCSS制御

ループしている個別投稿の一覧ページの最初の投稿にだけCSSをきかせる方法について紹介します。

ループの回数を取得する関数をfunctions.phpへ定義し、ループ内に埋め込みます。次の紹介記事が参考になります。