Category

ホームページ制作

Cloudflareを使って共有型レンタルサーバーのSSL対応

By | WEBサーバー

フォームなど個人情報やクレッジトカードなどの重要なデータを扱うところでは、非httpsページでは警告が表示されていましたが、最近ではサイト全体がhttps化されていない全てのサイトに対して警告が表示されるようになりました。

httpsは、具体的には認証局により署名されたSSLサーバー証明書を使ってデータのやり取りが行われます。SSL証明書を使ってSSL通信を行うことで情報が暗号化されるため、盗聴、改ざん、なりすましを防止することができ、パスワードやその他の個人情報を送信しても安全におこなえます。

今までは、年数万円の費用でSSL証明書を取得、設定し対応していたのですが、共有型レンタルサーバーではこの流れに合わせ低価格または無料のSSLが提供されるようにんなってきました。しかし無料のSSLは、制約がある場合があるので用途や運営には注意が必要なことがあります。

ですので、個人のブログなどの場合は費用をかけにくいと思うので、無料のSSLで良いと思うのですが企業などの場合は有料のSSLを利用されることをお勧めします。

使い勝手がいいので、よくCPIの共用型レンタルサーバーACE01を利用するのですが、残念ながらCPIの共用型レンタルサーバーACE01には無料のSSLが用意されていません。先ほども書いたようにテストやサンプルまたは個人的なものでSSLが必要な際に有料のSSLを用意するのは辛いので、何かないかと探して見たところ対応方法がみつかったので試してみました。

CloudFlareを使ってSSL
Cloudflareというインターネットセキュリティサービス、分散型ドメイン名サーバシステムなどユーザーとサーバーの間に入って色々なサービスを提供するサービス。利用するサービスによっていくつかの料金プランが用意されているのですが、この中にSSLがあり無料プランでも利用できるようです。

設定は簡単です。まずCloudFlareでアカウントを作成します。

次にプランを選択、今回は無料のものを選びます。

次にSSLを設定したい、ドメインを入力します。

その後、DNSレコードと通信方式の設定が表示されるので、必要な設定をしていきます。デフォルトで必要な設定はされていると思います。

ネームサーバーの情報が表示されるので、これをメモしてドメインを管理しているサービスのネームサーバーの情報を書き換えます。
お名前だとこんな感じ。

しばらく待つとDNS情報が反映され、設定完了。httpsでサイトが表示できるようになったことが確認できます。

ただこれはあくまで見せかけだけです。CloudFlareにはSSLの設定がいくつか用意されています。本来と同じような使い方をするには有料版にプランを切り替える必要があるようです。また、WordPressなどを使う場合にもいくつか手を加える必要があったりするようです。CPIではGet a Fileというファイル転送サービスが利用できるのですが、CloudFlareの設定をするとうまく機能しなくなりました。解決策はあるかもしれませんが、このようにいつもとは違うことが起きる可能性があります。

癖はありそうですが、CPI以外でもCloudFlareを利用してSSL化することは可能のようなので、テストや個人的な何かでSSLが必要で費用をかけれない場合には良いのではないかと思います。

DJI カメラ付きスタビライザー Osmoでパノラマ撮影

By | お役立ち・知識

DJI カメラ付きスタビライザーはOsmoは、なんの調整もせずに搭載された3軸スタビライズシステムで、三方向の振動を制御し、 滑らかな4K映像を撮影することができます。またそのほかにも一台でモーション・タイムラプス(動きのあるタイムラプス撮影)やスロー撮影などいろいろな機能が備わっています。その一つにパノラマ撮影機能があります。

OSMOでパノラマ撮影後のデータ

OSMOには180度、360度のパノラマ撮影とマトリクスがあり、それぞれ自動でカメラ位置を移動させ複数枚撮影を行い撮影後にそれを結合し1枚の画像を生成され接続しているスマートフォンに保存されます。ただ、これはサムネールなのか画像サイズが小さい。また、SDカードに保存されるデータは結合前の元画像のみ。パノラマ画像は保存されていません。

簡単にパノラマ画像を作る

保存された画像を並べただけではうまくパノラマ画像になりません。何か簡単に作れないかと考えていると・・・ありました!Photoshopの自動処理の中に複数の画像を結合する機能がありました。 Photoshopのメニューからファイル>自動処理>Photomergeを選択します。 開いたPhotomergeウィンドウで参照ボタンをクリックし結合したい写真を選択し開きます。 レイアウトは「自動選択」。ソースファイルの「画像を合成」「周辺光量補正」「歪曲収差の補正」「コンテンツに応じた塗りつぶしを透明領域に適応」全てにチェックを入れOKをクリックするだけ。あとは待ってればPhotoshopが綺麗に合成してくれます。

Photomerge パノラマ画像完成

パノラマ画像完成

とても自動でパノラマ画像ができました。端の方や足りない部分は「コンテンツに応じた塗りつぶし」自動生成されているのであまりうまくできていない場合があるので、手動で修正するか面倒なら切り抜くといいと思います。OSMOはRAW撮影にも対応しており。PhotomergeはRAWも合成できます。 試した感じでは、RAWを色調整しても合成後は調整前の状態で合成されるようでした。

JPEG画像で作ったパノラマ

RAW画像で作ったパノラマ

残念ながら生産終了するようです。

OSMOの光学ズーム機能がついたOSMO+が生産終了するようで、各ショップで特別セットなど今ならお得に手に入れそうです。 パノラマ撮影以外にも色々な撮影機能がありぶれのない滑らかな4K映像が取れるOSMO+を購入してみてはいかがでしょうか?

2018年7月からHTTPS非対応に警告表示

By | お役立ち・知識, ホームページ制作

googleは以前からサイト全体のSSLサーバー証明書(以下SSL証明書)を導入を推奨してきましたが、
2018年7月リリース予定のChrome 68より、SSL証明書を導入していない全てのウェブサイトで「保護されていません」の警告表示が開始されます。

Chrome 68 では、すべての HTTP ページのオムニボックスに「保護されていません」と表示されます。(出典:Google)

Chrome 68 では、すべての HTTP ページのオムニボックスに「保護されていません」と表示されます。(出典:Google)

httpsの利用状況

Googleの調査よると、現在ウェブサイトのhttps化の状況は以下のようになっています。

    • Android と Windows の Chrome トラフィックの 68% 以上が保護されています。
    • Chrome OS と Mac での Chrome トラフィックの 78% 以上が保護されています。
    • ウェブ上のトップ 100 サイトのうち、81 がデフォルトで HTTPS を使用しています。

googleウェブマスター向け公式ブログより

2017年以降特に増加しているそうです。
これトラフィックなのでSNSやECなどが牽引しているのではないかと思います。
まだ一般的な企業や店舗で対応しているとこは、日本では少ない感じがしますし追加費用をかけてまで行うとこは特に広島など地方ではまだ少ない気がします。

セキュリティ警告表示の経緯

Google Chrome ブラウザは、SSLサーバー証明書(以下SSL証明書)を導入していないウェブサイトに対して、アドレスバーによる警告表示を段階的に以下のような強化してきました。
これに合わせそのほかのブラウザーも同じような警告表示が実施されています。

2017年(Chrome 56) Chrome 56 HTTPサイトで提供されているパスワードやクレジットカード番号の入力フォームで警告表示開始
2017年(Chrome 62) Chrome 62 HTTPサイトで提供されている全てのフォームで警告表示開始

今後について

今回はHTTPS非対応のサイトに対してグレーでの警告表示ですが、10月以降の新しいChromeでは、赤字や赤斜線などさらに警告表示のが目立つように強化していくそうです。
他のブラウザーでも同じように警告表示を行ってくると予想されます。今の所HTTPS非対応であることが検索順位には関係ないようですが、今後はわかりません。

HTTPページのChrome 70の処理(出典:Google)

HTTPページのChrome 70の処理(出典:Google)

ただ、googleが検索結果に反映しなくても、開くと警告が表示されるサイトを見たいユーザーは少ないと思いますので、自然にアクセスが減ることが想像されます。
とはいえ、HTTPSが何かわからなくても自社サイトに警告が出て入れば対応を検討をされるところは増えてくると思います。

SSLサーバー証明書(以下SSL証明書)の導入

昔は高価だったSSLサーバー証明書(以下SSL証明書)も今は、無料や年数千円など安価のものも提供されているので導入の敷居を下がっていると思います。
SSLサーバー証明書(以下SSL証明書)の対応は、意地悪ではなく情報が途中で盗み取られるのを阻止やウェブサイトへのなりすましを防ぐことなど安全を確保なので導入してみてはいかがでしょうか?いろどりでも既存のウェブサイトへのSSLサーバー証明書(以下SSL証明書)対応のご相談や導入のお手伝いを行っていますので、お気軽にお問い合わせください。

さくらのVPSでスケールアップ

By | WEBサーバー, ホームページ制作

さくらのVPSをスケールアップを行った時の気づきをおしらせします。
ところでさくらのVPSって「さくらのVPS」というサービス名なんですね。

まずスケールアップできるサーバーの条件ですが、公式サイトでは次のように明記されていらす。

スケールアップできるサーバーの条件は、v4のサーバプラン(2014年11月27日以降に契約されているサーバー)お客様に限られます。また、以下の条件ではスケールアップはできません。

  • 下位プランへの変更
  • 別ストレージプランへの変更
  • Windowsプランやベアメタルプランのスケールアップ
  • 別リージョン、別ゾーンへのスケールアップ
  • お試し期間のサーバーや、料金が未納状態になっているサーバープラン
  • VPSを申し込まれた当日のスケールアップ

スケールは管理画面のサーバー一覧からスケールアップしたいサーバーを選択し、右上にある「各種設定」から「スケールアップ」を選択します。
ここで、あとは、スケールアップを行うプランを選択し、必要な情報を入力し申し込むだけです。

ただこの際、サーバーを一旦停止する必要があります。
そして、スケールアップが完了するまでそのまま止めておく必要があります。スケールアップ にかかる時間ですが、さくらのサポートに電話で確認したところ、30分〜1時間かかるとのことでした。早くできませんか?と聞いたところ作業は自動で行われるため手動で対応することはできないとのことでした。

今回のスケールアップでは約1時間かかりました。
その後、完了するとスケールアップ作業中の表示が気えるので、それを確認してサーバーを起動して作業終了です。

スケールアップ後サーバーの内容には変更ないので、起動すればもとどおえりサイトなどを見ることができます。

ということで、サーバーをスケールアップする時には、「1時間ほどサーバーを停止する必要があり、完了を確認したあとサーバーを起動する必要がある。」ということへの何らかの対応が必要になります。

お問い合わせフォームにJavaScriptを使って自動カタカナ入力の機能をつける

By | jQuery

ホームページのお問い合わせフォームには、お問い合わせいただいた方に連絡を取るさい、漢字の読み方を間違えないために、かなの入力欄がある場合がありますが、入力する方からすると2度名前を入力しなくてはならず面倒です。そこで、少しでも負担なく入力してもらうために自動入力の機能を実装したいと思います。

今回、JQueryプラグインであるjquery.autoKana.jsを利用します。jquery.autoKana.jsは下記からダウンロードできます。
harisenbon/autokana · GitHub

<head>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" data-semver="2.2.0" data-require="jquery@*"></script>
	<script src="jquery.autoKana.js" language="javascript" type="text/javascript"></script>
	<script type="text/javascript">
    	$(document).ready(
        	 $.fn.autoKana('#your-name-sei', '#your-namekana-sei', {
        		katakana : false  //true:カタカナ、false:ひらがな(デフォルト)
    		});
    		$.fn.autoKana('#your-name-mei', '#your-namekana-mei', {
        		katakana : false  //true:カタカナ、false:ひらがな(デフォルト)
    		});
    	});
	</script>
</head>
<body>
	<div>
    	<label class="">氏名</label>
    	<input type="text" id="your-name-sei">
		<input type="text" id="your-name-mei">
	</div>
	<div>
    	<label class="">カナ</label>
    	<input type="text" id="your-namekana-sei">
		<input type="text" id="your-namekana-mei">
	</div>
</body>

このように必要なファイルを読み込んでjavascriptでそれぞれ対象を指定するだけです。完璧に自動入力まではいきませんが、これで入力はかなり楽になると思います。

記事一覧などで使える画像の中央表示あれこれ

By | HTML・CSS

画像付きの記事一覧などを表示する際、画像のサイズが統一されていればそのサイズで調整しておけないいのですが、記事などはお客様が更新されることが多いので、サイズが同じになるとも限りません。画像の統一をお願いするにも画像加工ができない方もいますし、度々画像を加工するのは面倒です。

そこでCSSを使ってどのサイズの画像でもうまく表示できるように調整します。今回は画像の縦横の比率を保ちつつ画像を中央に表示する方法をいくつかご紹介します。

一番よくやるのがこれです。

See the Pen 画像中央表示 by irodory (@irodory) on CodePen.

もっと簡単にやる場合は、背景画像として設定する方法もあります。
See the Pen 画像中央表示(背景) by irodory (@irodory) on CodePen.

WordPressなどで、画像ファイルをそれぞれ設定したい時には、div要素にstyleで画像設定しこの画像部分をCMSの関数で挿入するようにします。

<div class="col-img" style="background-image: url(https://picsum.photos/640/320) ;">
</div>

ただ、背景画像は印刷するにはプリントの設定が必要の場合があるので、注意が必要です。
最後に「object-fit」プロパティーを使う方法。

See the Pen 画像中央表示(object-fit) by irodory (@irodory) on CodePen.

簡単ですね。「object-position: 横の位置 縦の位置;」で位置の調整も可能です。ただこれIE、Edgeの少し前のものには対応していません・・・。
ただjavascriptなどで対応する方法もあります。今後は、この設定が主流になりそうですがもうしばらくは一番上の方法が良いように思います。