更新情報

SSL化されていないページは、Google ChromeのアップデートでURL欄に「保護されていない通信」と表示されるようになったのがこの7月、10月のアップデートでは、さらに、この表示が赤く強調されるそうです。

以前のようにお問合せフォームとかユーザーが入力するページだけでなく、サイト全体の常時SSL化が強く求められるようになり、SEO的にも影響があるらしく（検索エンジンが非SSLページよりSSLページの評価を上げるものと思われます）、もうSSLからは逃げられなくなってしまったようです。

VPSでSSLもなかなか大変

SSLの証明書取得はサーバーのIPアドレスとドメインの組み合わせが基本になります。つまり1サイト毎にIPアドレスが取得できる専用サーバーや仮想専用サーバーが必要になり、かなりの手間とコストもかかります。自分の場合、LinuxのVPS（仮想専用サーバー）に、ApacheやらPHPやらMySQLやらウェブサイトを構築するための基本の基本的なソフトウェアのインストールとその設定を行ない、レンタルサーバーだと管理画面のわかりやすいGUIで設定できるバーチャルホストの設定とか、レンタルサーバーだとデフォルトで組み込まれているFTPやphpMyAdminといったユーティリティソフトウェアのインストールや設定とか、未だに慣れないコマンドラインと悪戦苦闘してきました。

1サーバーで複数サイトのSSLを有効化するマルチドメイン対応の証明書もあるものの、企業認証が基本になっているうようでかなりの高額、複数のサーバーを構築した方がずっと安いです。

VPSやクラウドサーバー利用で、他ユーザーの影響を受けにくくなり、ルート権限が無いとインストールできない様々なアプリケーションをインストールしたりできるメリットは大きいものの、サーバーの管理自体を全て自分でする必要が生じます。サーバーの負荷状態を監視したり、外部サーバーに自動バックアップを取ったり、サーバー構築後の管理もかなり大変になりました。

コンテンツ量が多かったり、アクセス数が多かったり、特殊なアプリケーションが必要なサイトの場合はVPSは大きなメリットがあるものの、そうでもないサイトでもSSL化のためだけにVPSを利用しているケースも少なくありませんでした。

Let's encryptでSSL

去年くらいからLet's encryptという無料で証明書を発行してくれるサービスが普及してきました。ただこのLet's encryptのインストールで設定をミスるとApacheが起動しなくなってしまう可能性もあり、運用中のサイトを有償SSL証明書からLet's encryptへ変更することは躊躇せざるを得ませんでした。

ところが、ここにきてLet's encryptを使った無料SSLを提供するホスティングサービスがでてきました。さくらインターネットのさくらのレンタルサーバーも去年末からサービスを提供開始しており、安定してきたものと思われ試してみることにしました。

自分の場合、VPSは一部を除きさくらのVPSを利用しています。トラブルは少なく、サポートもしっかりしています。先頃の北海道の地震で道内全体が停電、利用しているVPSの物理的なサーバーの多くは石狩市にあり、ビビったものの、さくらインターネットのデータセンターではしっかり非常用電源が稼働、その燃料確保とか、国や自治体との連携とか、かなり迅速かつ適切な対応で、全くサーバーが停止することがなかったことは、インフラ事業者として高く評価したいと思います。

ということで、VPSでSSL化していたいくつかのサイトをさくらのレンタルサーバーに移行してみました。

移行の際、サブドメインでも無料でSSL化できるので、仮のドメインでテストサイトを構築し、その仮のドメインでSSL化の検証を行ない、問題がなければ、テストサイトを運用サイトに切り換える、という方法が使えるのは、Let's encryptによるSSL化の大きなメリットだと思います。

Drupalサイトをさくらのレンタルサーバーに移行、無料SSL化

Drupalをさくらのレンタルサーバーに合わせる

さくらのレンタルサーバーでは.htaccessでFollowSymLinksが使えません。Drupalのデフォルトの.htaccessのままだと500エラーになるので、ルートとfilesディレクトリの.htaccessのOptions +FollowSymLinksをコメントアウトします。

.htaccessのリライトルール設定

# Various rewrite rules.
<ifmodule mod_rewrite.c>
  RewriteEngine on

のところに2行追加します。

# Various rewrite rules.
<ifmodule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{HTTPS} off
  RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

これでサイト全体の常時SSL化が有効になり、httpでアクセスするとhttpsに移動するはずです。以前はsecure pagesというDrupalモジュールでSSL化設定をしたりしていたのですが、常時SSL化なので、追加モジュールは無しでOKかと。

DNS設定

ドメインはさくらインターネットじゃないサービスで管理しているのですが、取得したさくらのレンタルサーバーのIPアドレスをDNSのAレコードに設定、さほどタイムラグ無しで反映されました。

ところがさくらのレンタルサーバーに移行してから2ヶ月程して、SSL証明書の自動更新ができませんでした、というメールが来てしまいました。Let's encryptは基本的に3ヶ月毎に更新する必要があるのですが、さくらのレンタルサーバーではこれをcronで処理しているようで、自動更新してくれるはずですが、エラーです。

調べてみたところ「マルチドメインとして使用する」にしておいて、www付の場合のDNS設定をしていなかったことが原因で、www有りにもwww無しと同じAレコードを設定して解決しました。

Let's encryptと有償のSSL証明書で、高額な企業認証とかでない限り、暗号化強度に違いはないようです。VPSで設定していた外部サーバーへの自動バックアップはできなくなったものの、さくらのレンタルサーバーに別サーバーへのバックアップ機能もあります。さくらのレンタルサーバーの無料SSL、シンプルなサイトだと十二分に使えるというのが自分の結論です。

フル画面のスライドショーを自分のブログに実装してみました。これまでのブログ投稿からお気に入りの写真をピックアップしたスライドショーです。

imgのsrcをbackgroundのurlに置き換える

画像をフル画面表示するには、画像を背景にすることでccsのbackground-size:coverが使えるので便利、アスペクト比を維持して親要素の縦横の長い方に合わせてくれて、レスポンシブにも対応できます。

DrupalのViewsのフィルタで選択した画像フィールドの画像を抽出するとだいたいこんな感じのHTMLができあがります。Drupalでなくても応用の効く方法かと思われ、その辺は構造を置き換えてみてください。

<div class="view-slideshow">
  <div class="views-row"><div class="views-field-field-image"><img src="url-1"></div></div>
  <div class="views-row"><div class="views-field-field-image"><img src="url-2"></div></div>
  <div class="views-row"><div class="views-field-field-image"><img src="url-3"></div></div>
</div>

DrupalのViewsのフィールド値のリライトではstyle属性の設定はできないように設計されているので、画像のsrcを親要素.views-rowの背景にする簡単なjQueryのスクリプトを書いてみました。

$(".view-slideshow .views-row").each(function(){
   var bgUrl = $(".views-field-field-image img", this).attr("src");
   $(this).css("background-image", "url(" + bgUrl +")"); 
   $(".views-field-field-image img", this).hide();
});

cycle2に組み込む

今まで実に様々なスライドショーのスクリプトを試してきたのですが、自分はここ2、3年くらいはCycle2一本です。自分の書いたスクリプトや他の配布スクリプトとコンフリクトを起こしたりすることが少なく動作も軽快、サムネイルでの画像の切替、カルーセル式の横回転、スマホでのフリック操作等、必要な機能が揃っていて、実装も簡単です。スライドとなる要素は画像に限らずDOMで指定できます。

$(".view-slideshow").addClass("cycle-slideshow");
$(".view-slideshow.cycle-slideshow").attr("data-cycle-slides",".views-row");

これだけでCycle2の基本が実装できます。スライドを囲む親要素にcycle-slideshowのクラス属性を設定して、Cycle2のスクリプトを呼び出してきます。data-cycle-slidesでスライド要素を指定します。これにattrのチェーンで属性をどんどん追加して、様々なアクションを追加したり、ページャーを追加したり、思うがままです。

.view-slideshow{position:fixed;top:0;width:100%;z-index:-1; }
.view-slideshow .views-row{width:100%;height:100vh;background-size:cover;background-position:center;}

cssです。スライドを囲む親要素はposition:fixedで固定、フル画面なのでスライドショーに重ねてユーザーインターフェースを置くことになるので、z-indexは必須です。

スライド要素のheight:100vhのvhはcssの新しい単位でview-portに対して100vhが画面の高さになります。background-size:coverで背景画像のアスペクト比を維持したままで領域いっぱいに描画、background-position:centerで背景画像を中央寄せにします。

画像の抽出

自分のブログでは個々のコンテンツに30～50くらいの画像を組み込んでいます。コンテンツ単位で抽出するのはタグ付けとかで簡単にできますが、コンテンツに組み込まれたフィールド値である画像だけを抽出するとなると、ここはDrupalの出番です。

Field collectionモジュールでフィールドを構造化して、チェックボックスを付ける方法とかも考えてみたのですが、既存コンテンツの既存フィールドをそのまま利用したいので、シンプルに画像のタイトル属性を使うことにしました。

お気に入り画像のタイトル属性に★を入力して抽出しています。機種依存文字じゃない記号なら何でも構わないのですが、文字にするとタイトル要素の意味のある内容にならないように記号にしています。DrupalのViewsのContextual filterで画像のタイトル属性を呼び出し、画像のタイトル要素に★が含まれるフィールドを抽出するようにフィルタを設定します。この辺りの設計のしやすさはDrupalならではじゃないかと思います。

レスポンシブ対応なので、このままスマホでも画像はフル画面で表示されますが、例えば写真の左右の端にメインとなる部分が写っている写真とかはスマホではかなりブサイクになってしまいます。ネイティブアプリじゃなく横向きを強制することはできないので、パソコン用とスマホ用でスライドショー自体を切り替えることにしました。パソコンとスマホで共用できる画像はタイトル属性に★、パソコンだけに出力する画像は★★、スマホだけに出力する画像（例えば縦長の画像）は★★★に分け、パソコン用とスマホ用の2種類のスライドショーを出力し、user agentで切り替えています。

このため厳密にはレスポンシブデザインとは言えなくなりましたが、自宅では23.5インチの大画面、電車の中やカフェとかでiPhone6 plusの小さな画面、どっちでもバッチリ楽しめるようになり、一人悦に入っています。ちなみにスマホでは自動的スライドさせないで、フリック操作で切り替えるようにしています。

この自分の営業用サイト（ueroku.net）の何度目かのリニューアルを行いました。基本的なサイト構成は前回のリニューアルとと変えていないのですが、細部をひとつひとつ見直し、今後もっと積極的に更新していけるような仕組みを組み込みました。

主なリニューアルポイントです：

ウェブ制作四方山話

上町のおっさんの鳥鉄日記（旧：上町のおっさんのブログ）で書いていた、Drupal関連等やウェブ制作関連のコンテンツをこの営業用サイトに移転を図ってきたのですが、何度かトライしたものの、なかなか続かず、SEO的にもかなり拙い状態で放置されていることに気づきました。

sitemap.xmlを再構築して、インデックスを送信し直したりしたものの、やはりコンテンツの発信が一番重要で、気を引き締め直して、やっていこうと考えています。

改めて過去のコンテンツと一緒にしたら、何度も長期間の空白があります。クライアントサイトじゃなくて自分サイトなので、どうしても後回しになってしまう訳ですが、自戒の念も込めて「この間長期間更新できていません」と明記してみました。

フルSSL化

格安証明書でサイト全体をSSL化しました。

ユーザーインターフェースの見直し

前回のリニューアルではもうあまり更新しなくても済むようにトップページに必要なことを全て押し込んで簡易なUIにしてしまったのですが、積極的に更新していくことを前提にUIを作り替えました。具体的には、メニューボタン（ページ右上の3本線のボタン、これハンバーガーメニューというそうです）でリンクメニューをサイドからスライドして開閉する方法を、モバイルだけじゃなくてデスクトップでも使うことにしました。トップページだけじゃなくて、個別コンテンツや一覧ページへ誘導しやしくしています。

デザイン

トップページ以外はできる限りシンプルに、シングルカラムレイアウトで、できるだけ色数を限定すすという方法にチャレンジしてみました。ページ自体は6色に分け、濃いグレーのブロックを挟んで背景とテキストは同じ色、リンクテキストだけ白で落ち着きました。クライアントサイトでは使えない手法かもしれません。

トップページ

前回のリニューアルで組み込んだfullpage.jsを使ったフルスクリーンレイアウトはそのままに、文章やデザインの細部も見直しました。シンボルマーク的に組み込んでいる蝶のアニメーションは、アサギマダラっぽくしてみました。最初のセクションの背景は淀川で撮影した実写のアサギマダラの写真や、左右に移動して切り替える「大阪散歩」の写真は、テキストを読みやすくするために、ドットパターンで網掛けしています。

これでも文字が読みにくいという声もでてきそうですが、boldとかtext-shadowは使いたくないし、背景に馴染んでいるようにも見えるのでとりあえず、このままで行ってみます。

jqplotを使ったグラフもデータを更新、X軸の値を傾けたりスマホの画面でも読みやすくしています。jqplotはかなりクセのあって、触り甲斐があるプラグインです。

組み込んだ個々の手法の詳細については、更新ネタとして書いていくつもりです。