All Posts By

Takeshi

2018年5月27日
0

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証明書）対応のご相談や導入のお手伝いを行っていますので、お気軽にお問い合わせください。

2018年1月10日
0

RICOH THETAでも簡単自由編集「 Free Capture」（フリー・ キャプチャー）を行う

By | 仮想現実（VR）

4KVRカメラInsta360Oneの特徴の一つに自由編集「 Free Capture」ですが、RICOHの60度 全天球カメラ THETAでも行うことができます。
前回、Insta360Oneの記事でも書きましたが、Insta360Oneのパソコンでの編集ソフト「Insta360OStudio」ではmp4形式のファイルが読み込むことができます。とゆうことは、THETAで撮影したのでもできるんじゃないかな？と思って試したところ問題なく読み込み編集できました。

持っているのがTHETA Sなのでとりあえず撮影し、パソコンにデータを読み込みます。

次にパソコンのTHETA編集アプリでこれをパノラマに変換。（スマホアプリで変換し読み込んでも良いと思います。）

それをInsta360OStudioに読み込みます。あとは編集して書き出せば完了です。

今回は、THETA SなのでFull HD画質ですがInsta360Oneが4KなのでTHETA Vで撮影したデータも編集できると思います。残念ながらスマートフォンアプリの「Insta360One」にはカメラーロールなど外部データを読み込むことができないので、編集することができませんが、凝った編集をしたい方はスマホよりパソコンの方がやりやすいと思うので良いのではないのでしょうか？

「Insta360OStudio」は無料で利用することができます。THETAで360度動画を面白く編集したい方は試してみてはいかがでしょうか？

2018年1月9日
0

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

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

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

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

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

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

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

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

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

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

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

2018年1月6日
0

お問い合わせフォームに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でそれぞれ対象を指定するだけです。完璧に自動入力まではいきませんが、これで入力はかなり楽になると思います。

2018年1月4日
0

360VRカメラ Insta360 ONE ステッチについて

By | 仮想現実（VR）

Insta360ONEの大きな特量に「FreeCapture（自由編集）」があります。撮影した360°映像から自由にカメラ視点を動かしたりリトルプラネットなどの表示方法を変えたりができる編集機能で、スマホアプリとパソコン用のソフト「insta360 studio」どちらでも行うことができるようになっているのですが、実際に使ってみると「insta360 studio」でどうもうまく編集できずいろいろ試した結果うまくできたので覚書です。

Insta360oneで撮影したデータは、静止画は「insp」「dng」、動画は「insv」という形式で保存されるのでこれをカメラ本体から取り込み「insta360 studio」で開くと次のように次のよう表示されます。

「capture」に切り替えると自由編集を行うことができます。
ただ、前後は問題ないのですが、横を表示しようとすると90度傾いたような状況になってしまいます。
横に展開された状態の表示が出ているのですが、水平が出てません。このせいでこのような状況になってしまいます。

スマートフォンアプリでは、こんなことはなくうまく横を表示することができます。
試しにスマートフォンアプリからスマートフォンに保存しこれを、パソコン取り込んで見ます。

スマートフォンアプリからスマートフォンに保存する際にデーターはMP4形式で保存されます。
これをパソコンに取り込んで見てみると水平がちゃんと出ているようです。

「insta360 studio」では、MP4ファイルも読み込めるので、読みこんで「capture」にして横に動かすと問題なく横を表示することができました。

2017年11月8日
0

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

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などで対応する方法もあります。今後は、この設定が主流になりそうですがもうしばらくは一番上の方法が良いように思います。