minimum universe
minimum universe
instagram
twitter
behance

サイトをssl化 その2

ファミリーマートさんのホットスナックコーナーに大阪王将の揚げ餃子が売られていて、なんだか美味しそうなので思わず購入。
お昼にラーメンと一緒に食べました。パリパリっとした食感で美味しかったです。

 

そして、不織布マスクがドラッグストアでも見かけるようになりましたね。
50枚入りのものが980円くらいで売られているけれど、もう少し安くなりますかね?
ここらへんが底値なのか悩むところですが、冬の前にストックしておいたほうが良いのかな。

 

というわけで、サイトをssl化 その2。

 

前回、「さくらインターネット」のコントロールパネル上で「http〜」からはじまるURLからアクセスがあった場合、「https〜」へとリダイレクトする設定をオンにしたと書きましたが、その後、ちょこっと問題が判明。

 

WordPressを使用しているこのブログで、個別エントリーのページを「http〜」の状態で見てみたところ、「https〜」からはじまるブログのトップページのURLへリダイレクトされてしまうのですね。

 

このままでも良いような気もしつつ、個別エントリー記事を検索して観に来られた方が、記事を観られないままトップページにリダイレクトされるのも本意ではないので、設定を見直してみました。

 

とりあえず、「さくらインターネット」のコントロールパネル上のリダイレクト設定をオフ。

↓を参考に「常時SSL化したWordPressのドメイン名を統一させたい」の項目を記述した「.htaccess」を設置。

 

■.htaccessによるアクセス制御
https://help.sakura.ad.jp/206054622/

 

確認のため、「http〜」の状態で個別エントリーのページを観てみたところ、「https〜」になった個別エントリーのページにリダイレクトされていますね。

 

想像していたよりも簡単に問題が解決して良かった!

サイトをssl化

東京の1日の感染者数、一向に減りませんね。
それどころか増えてきましたね。
以前に新型コロナウイルスは湿気に弱いので梅雨時期には落ち着いているなんて話も聞きましたが、そんなことはなかったようです…。
早く感染者数が減るようになるといいなぁ。

 

そしてJリーグの試合が無観客という形で再開しましたね。
今年は降格がなかったり色々と制限した形だけれど、久しぶりの試合観戦、とても面白かった!

 

というわけで、少し前に自分のサイトをssl化をしました!

サイトのアドレスは↓

https://www.m-universe.net/

 

見た目の違いはサイトのurlの最初の部分が「http」から「https」に変わっているところです。
あとurlの横に鍵マークも表示されていますね。

 

sslについて僕自身ふんわりとしか理解していませんが、「インターネット上におけるウェブブラウザとウェブサーバ間でのデータの通信を暗号化し、送受信させる仕組みのこと」だそうです。
僕のような小さな個人サイトで必要なのか解らないけれど!
とにかく安全なのは良いことです。

 

ssl化した後、「http」からはじまるurlからアクセスされた場合に自動で「https」からはじまるurlにリダイレクトする必要があるのですね。
以前に調べたところ、「.htaccess」を設置してリダイレクトする方法が一般的なようです。

 

記述した「.htaccess」がちゃんと動作するのかドキドキしましたが、僕の利用してる「さくらインターネット」では、コントロールパネル上で簡単に設定出来ることが判明。
自分で「.htaccess」を設置せずにリダイレクトが出来るようです。

 

早速、コントロールパネル上でリダイレクトするように設定!
無事にリダイレクトするようになりました。

WordPressのブログへお引っ越し

今日はとっても寒いですね。
今年も一度くらいは雪が降ってほしいな。

 

というわけで、WordPressのブログ。

 

レンタルしているサーバー「さくらインターネット」の「さくらのブログ」を長いこと利用していましたが、WordPressを導入してブログをそちらに移行しました。

 

WordPressのブログデザイン変更方法が独特なので(ヘッダーやフッターなどの各パーツに分かれている)理解するのにちょこっと大変だったけれど、「さくらのブログ」のデータを利用しつつ、なんとか完成しましたよ。

なので、ブログのデザインはさくらのブログの時から殆どそのまま!

 

WordPressに移行した理由はSSLのためです。
「さくらインターネット」自体は無料でSSLを導入出来るのですが、「さくらのブログ」のほうは今のところ対応していないのですよ(今後も対応しなさそう)。

 

SSLについて分かったように書いているけれど、あやふやな知識で雑に書くとSSLを導入することでサイトのセキュリティが高くなるとのこと。
見た目の違いはURLが「http」から「https」に変わることですかね。

 

Yahoo!をはじめ、大きめの企業サイトなどは数年前から殆どSSLを導入していますね。
結果、古めの「android」や「Mac OSX」の標準ブラウザだと、SSL化したサイト自体が見られなくなっています。

 

Yahoo!セキュリティセンター セキュリティ強化のお知らせ↓

https://security.yahoo.co.jp/news/tls12.html

 

以前に使用していた「android 2.3」OS搭載のXperiaの標準ブラウザで確認してみたところ、「安全な接続が出来ません」的な表示が出て、ほとんどのサイトが見られないですね。
どうしても「android 2.3」などの端末でSSL化したサイトを見たい場合は、SSL対応しているバージョンの「Firefox」ブラウザアプリのapkをネット上から探してインストールすることで見られます。

 

過去バージョンの「Mac OSX」はもう少し簡単で、「Google」サイトから「Google Chrome」ブラウザをダウンロード&インストールしたら、SSL対応しているサイトが見られますかね(Chromeの最新バージョンには対応していないので、Chromeの過去バージョンになりますが)。

 

Google Chrome↓
https://www.google.co.jp/chrome/

 

僕の高校の時の友人に、↑に書いた機材を今も使用しているのですよ。
以前に色々なサイトが見られなくなった!的なことを言われたので調べてみたところ、そのようなことでした。

 

ちょこっと不思議なのが、「goo」などは古いブラウザでも見られるのですよね。
SSL化しても見られるサイトと見られないサイトの違いはなんなのでしょう?

 

長々と書ききましたが、お分かりのように今はまだ自分のサイトのSSL化はしていません。
正直、僕のようなサイトはSSL化する必要はないんじゃないか…といった思いもありつつ↓のような話があります。

https://support.google.com/chrome/thread/18761336?hl=ja

 

その内、SSL化していないサイトはGoogleからブロックされるかもしれません。恐ろしい…。
SSL化のことも考えてブログもWordPressに移行したし、今年中にサイトをSSL化が出来たらと思っています。

サイトのレスポンシブ化

PCから観るとあんまり変わりがないのですが、サイトのレスポンシブ化が完了しました!

 

お正月にAmazonを観ていたら、ウェブサイト作成ソフト「BiND」の一つ前のバージョン「BiND9」が安めのお値段で売られていたので購入。

 

今までのサイトデザインそのままにしたこともあって、簡単にレスポンシブ対応のサイトが出来ましたヨ。

 

が、いくつか問題が。

 

ギャラリーページのサムネイル画像を開いて大きな画像をふわっと表示させたいのですが、どうも同じ画像を拡大表示しか出来ないようなのですね。

 

あと、メールフォームCGIも設置したいけれど、「BiND」さんで用意された専用フォームしか使えないようです。

 

「BiND」単体ではソースコードを直接編集出来ないので、ためしにアプリ外で直接htmlの編集、その後に「BiND」を開いてみたところ、ちょっとでも「BiND」で編集をはじめると、アプリ外で編集した箇所がすべて消去されてしまいますね。

 

考えた結果、「BiND」でおおよそのレスポンシブ対応サイトデザインを作成、その後は「mi(ミカキエディット)」で直接htmlやcssファイルを編集して完成させるという方法にしました。

 

後戻りの出来ないことに恐怖しつつ、ギャラリーページにモーダルウィンドウの「Colorbox.js」を設置、コンタクトページにメールフォームCGIを設置などしました。

まあ、ほとんどが以前のサイトのデータからのコピーペーストなのですが。

 

制作の途中、スマートフォンからも確認したところ、どうも「BiND」付属の「ハンバーガーメニュー」が重いのですね。
「ハンバーガーメニュー」というのは、「三」みたいなボタンを押すとメニューが表示されるというものです。

 

ここまで来たら、外部で色々と変更してしまえ!ということで、「ハンバーガーメニュー」は「drawer.js」に変更。

 

「ハンバーガーメニュー」はPCやMacのブラウザからもブラウザの画面を狭めれば見えるのですが、ちょこっと昔のブラウザで確認すると、ボタン部分がずれちゃうものもありますね。

PCやMacのブラウザを狭めて観る状況はほとんどなさそうなので、ここは無視しました。

 

最後に一番の難所。

このブログのレスポンシブ化。

 

使用している「さくらのブログ」はレンタルしているサーバーのおまけ機能なのですが、ノーマルの状態でスマートフォンからアクセスすると、スマートフォン専用デザインのブログに振り分けられてしまうのですね。

 

それを無効にしつつレスポンシブ化する方法は下記のブログさまを参考にしました。
http://blog.kantan-tech.net/article/174800796.html

 

想像していたよりも簡単にブログのレスポンシブ化が完了!
スマートフォンから確認してみると、画像の大きさがそのまま表示されて文字が窮屈になってしまうので、cssを追記してスマートフォンからアクセスした場合は画像を70%表示することにしましたヨ。

 

長々と書いてしまったけれど、ご機会などありましたらスマートフォンからもアクセスしてみて下さいね。

Colorbox

天気予報を見ると、今日、明日と東京で雪の降る確立が50%となっていますね。
ここのところ、週末は雪の予報が多いけれど、今回は本当に雪が降るのかな?

 

というわけで「Colorbox」。

 

Lightbox2」という、リンクをクリックするとウインドウがふわっと浮き出てくるスクリプトを自分のサイトのギャラリーページに使用しているのですね。

 

先日、その「Lightbox2」よりも、もう少し多機能(htmlもウインドウ上で表示出来ます)の「Colorbox」というスクリプトに乗り換えてみました。

 

Colorbox↓
http://www.jacklmoore.com/colorbox/

 

進むボタンと戻るボタンをウインドウの外に表示したりと、いろいろと「Colorbox」のCSSをカスタマイズしていたら、結局は「Lightbox2」の時とあまり変わらないデザインになってしまいましたヨ(進むボタンと戻るボタン、Xボタンが微妙にロールオーバーしていたりと、以前に比べて少しだけ豪華使用になってます!)。

 

「Lightbox2」に比べ、フェードインしない分、次の画像を開くまでの間隔が少しだけ軽く感じますかね。
いや、もしかしたら「Lightbox2」でも次の画像を表示するときに、フェードイン無しで表示出来るようにカスタマイズ出来るのかもしれません。

 

お時間のあるときにでもギャラリーページも見てくださいね!

サイトをリニューアルしました

ここのところ、夜や明け方など寒くなってきましたね。
昨日の夜は眠るときも思った以上に寒くてパーカーを上に着て寝ちゃいましたよ。

 

というわけで、サイトのリニューアル。

 

かなり前から自分のサイトを作り直したいと思いつつも、なかなか作業が進まなかったのですが、ようやく完成しました!

 

半年くらい前から暇な時にちょこちょこと作っていたのだけれど、作業を再開するときに何を作っていたのか忘れてしまうのですよね。

 

なんだか思った以上に時間は掛かったものの、以前のものよりもトップページを派手にしたくらいで、その他は基本的に以前のデザインのものよりも表示面積を広くして文字と画像を大きくしたくらいです。

 

なぜこれほどまでに時間が掛かったのか頭を抱えたくなりつつ、前のデザインよりも見やすくなりましたか?
そうだったのなら嬉しいです。

 

今後ともminimum universeをよろしくお願いいたします!

Lightbox v2.51

自分のサイトの「Gallery」ページに使用している「Lightbox(サムネールをクリックすると、ふわっと画像が表示されるプログラム)」の新しいバージョンがリリースされていたので、ダウンロードして設置してみました。

 

ノーマル状態での見た目の変更点は、表示ウインドウの角がCSSによって丸くなったことと、ウインドウ下部分のタイトルとクロースボタンなどを表示する背景が透明になったところでしょうかね。

 

とりあえず、タイトルとクロースボタンなどを表示する背景を白色に、nextボタンとprevボタンの位置をウインドウの外で常に表示、あと、タイトルのフォントサイズも変更しました(それらの変更は「lightbox.css」を書き換えることによって出来ます)。

 

以前のバージョンでは、iOSやandroidのブラウザで表示させようとすると、ウインドウの表示位置が変なことになっていましたが、確認してみたところ、ちゃんと表示されるようになっていましたヨ。

 

Lightboxのダウンロード↓
http://lokeshdhakar.com/projects/lightbox2/

英語に翻訳

サークルKサンクスさん(家から一番近所のコンビニ)の取り扱う宅急便が、「ゆうパック」から「クロネコヤマト」に替わっちゃうそうですね。

 

「ゆうパック」のお届け通知ハガキが便利だっただけに、ちょこっと残念。

 

といっても、大容量のデータを送信することの出来る「宅ふぁいる便」などの登場によって、最近では宅急便を利用する機会って、ほとんどなくなっているのですが。

 

というわけで、英語に翻訳してくれるサイトの話。

 

極希に、英語でメールをいただき、その返事を英語で出さなければいけないことがあるのですね。

 

僕は英語が出来ないので、そのような時は、言語を翻訳してくれるサイトを利用しています。

 

ちゃんと英語に翻訳してくれているのかも不安なので、再度、翻訳した英語を日本語に翻訳してみるのですが、まあ、大抵はおかしな文章になっていますね。

 

調べてみると、日本語でありがちな、主語を抜くのがいけないみたい。

 

文章を書く時にあんまり気にしていなかったのですが、確かに普段、「嬉しい!」と書くことはあっても、「私は嬉しい!」なんて書くことはないな…。

 

あと、難しい言葉を使わず、短く簡潔な文章にするのも良いようです。

 

当たり前といえば当たり前のことですが、それらに気を付けて翻訳してみたところ、良い感じに翻訳されていますね(たぶん)。

 

先日、英語のメールをいただき、泣きそうになりながら返事を出したところ、相手にちゃんと伝わっているようでしたヨ(たぶん)。

 

そうそう、今までexciteの翻訳を利用していたのですが、Googleにも翻訳サイトがあるのですね。
Googleの翻訳は、打ち込んだ文字がリアルタイムに翻訳されていくので、とっても面白いです。