技術のタマゴTOP
2017年08月28日

だいえったんの体重グラフを復活させました

コトコトねっとのSSL化にあたり、各サイトの動作チェックをしていたら、だいえったんの部屋で30日間の体重グラフが表示されていないことに気づきました。そういえば、だいぶ前に、あれ?白くて表示されてない部分があるから時間のあるときに見直そうと思ってそのまま忘れていたのでした。

diet1.jpg

昔話を少し。



だいえったんは、三年前、2014年にWebデザイナー養成の求職者支援訓練を受けていたときに、最終課題として6人チームで作ったPHPサイトです。DBの登録・更新・検索・削除の機能を含めたシステム作り、設計書、工程表の作成管理も課題。

チームにはデザインが得意な人、プログラムを動かすのが得意な人、いろいろいましたが、グループ制作にあたって各人の引き出しの中からそれぞれ持つ能力の突出した部分をのぞかせていただいて、面白かったなぁ。6人のうち、誰が欠けてもあの形のサイトにはならなかったと思います。

その中でもやっぱり能力が飛び抜けているなぁ、としみじみ感じたのは、リーダーのゴトーさん。訓練後、クラスの就職率は高くWeb系の仕事に就いた人も多かったものの、Web制作会社でWebデザイナーになったのは、ゴトーさんだけだったかなと思います。

各自で書いたソースを結びつけて、出来上がったサイトをせっかくだからサーバに上げて公開しよう!ということで、サブリーダーの私が皆から預かる形で自分が管理するドメインの下に持ってきたんですよね。



設計書は、機能の切り分けや入出力を講師の方含めて皆で相談しながら、リーダーゴトーさんとサブの私で書いたんでした。今の管理者は私だから、自分でソースコード書いていない部分でも、私が直さなきゃねぇ。リーダーいないし。

今回改めてソースを見て、設計を含めて、ほぼ初めてPHPを書いたりDBに触ったりした人達で分担して作ったわりにはなかなかよくできているなぁ、とか考えつつ、それぞれ書かれた記述はあまり見ていなかったなぁ、読めなかったなぁ(今でもだけど)、でもコメントあるからどこで何をしているかは分かりやすいなぁ、とか思いました。

各ページのソースコードをチェックしつつ、グラフを書き出している箇所を探したら、あっさり見つかりました。

経過日数と体重データをCSVに保存。javaScript(jQuery)で配列に直して、グラフに書く。そのうち、CSVデータを配列にするjQuery(jquery.csv-0.71.js)が呼び出し先に無いことに気づきました。

おお、これはもしかしたら、jquery.csv-0.71.jsに相当するライブラリを見つけて、サーバ上に置いて呼び出せば動くのでは?と思って探してみると、最初に見つけたjquery.csv.jsは関数の形が違うもので動かなかったのですが、無事に該当するライブラリを見つけることが出来ました。

jquery-csv/src/

diet2.jpg

で、ソースを保存、サーバに上げてjQueryを呼び出すと、無事にさくっと体重推移グラフが表示されました。

やったよー!ゴトーリーダー!みんなー!

***

ゴトーリーダー、今年亡くなったんだ。半年ほど前に。まだ30代半ばなのに。

私は半年位に一度あるWeb訓練時代の仲間と飲むのが、特にゴトーさんと飲むのをすごく楽しみにしていて。

今度会ったら、マストドンやってみた?とか、ネットショップの方はSSL化が進んできたけど、制作会社に来てる依頼ではどう?とか、聞いてみたかった。

自分のサイトもSSL化してみたよ。久しぶりにだいえったん見直して、グラフ消えてるの復活させたよ!へへーん!って自慢したかった。

いつも連絡取ってるわけじゃないけど、たまに会って飲んでおしゃべりして、今何してる?どんな感じ?ってくだらない話をしてこの先も笑い合えるんだと思ってた。この先、一緒に仕事できる機会があったら面白いなぁって思ってた。

私の心の中のゴトーさんに、えーこんな若さで忙しそうだけど仕事も楽しんでいるようにみえる盛りに死んじゃうって本人的にどうなん?って聞いてみたら、ま、しゃーない、ってニカって笑うから、しゃーないかぁ、じゃー仕方ないかぁとか勝手に思ったりした。勝手に。

私の記憶の中でこれからもゴトーさんは生きてるし、いい時間を過ごさせてもらってきたし、こうすればよかったああすればよかったなんて後悔は私自身の中では無いのだけど。

これからの時間も、まだまだずっと、細々とでも一緒に過ごしていきたかったなぁ、って思うんだよ。

posted by かこ at 02:06 | Comment(0) | TrackBack(0) | WordPress

XSERVER上のサイトをSSL化(https)したときの覚え書きとか雑感とか〜後半・SSL化作業

Xサーバー上のサイトをSSL化したときの作業の覚え書きです。

SSLを導入しようと決めたときに考えたことは前半で。

Xサーバー上(コトコトねっと)には、
・HTML+CSSのサイト
・HTML+CSS+javaScript(jQuery)のサイト
・PHPのサイト
・WordPressブログ
があり、サイトもページ数も少なく、大部分のリンクは相対パスで記載してあり、アフィリエイトリンクもほぼないので、そんなに書き替えと確認作業は多くないだろうと思いつつ、SSL化作業を開始!



1 サーバパネルでSSL設定を追加

2 サーバパネルでWebサイトの常時SSL化
(.htaccess編集しhttp://〜からhttps://〜のURLへ転送する)

3 WordPressのURLをhttpsに変更設定する

4 WordPressブログをFirefoxでチェックしつつエラーが出る箇所を修正
 4-1 サイドバーのウィジェットのアフィリエイトリンクを差し替え
 4-2 ファビコン画像のURLを修正(テーマの編集 header.php)
 4-3 WordPress内でWEBフォントが効かなくなっている部分を修正(style.css)
 4-4 各記事をチェックしてアフィリエイトリンクを差し替え

5 javaScriptが動かなくなっている部分を修正

6 Google Analytics の変更(http→httpsの変更)
7 Google Search Console の追加登録

こんなかんじの順番で進めていきました。
後日、この変更も必要だったーって抜けに気づくかもしれないので、作業済チェックリスト的に置いておきます。



1 サーバパネルでSSL設定を追加

XサーバーでのSSL設定は、手順を見ながらサーバパネルで簡単にできました。

無料独自SSL設定


2 サーバパネルでWebサイトの常時SSL化
(.htaccess編集しhttp://〜からhttps://〜のURLへ転送する)

今まで通りhttpのURLでアクセスして来た場合も、httpsのサイトに跳ばすように設定。
ソースをコピーして.htaccessに追加するだけ。

Webサイトの常時SSL化


3 WordPressのURLをhttpsに変更設定する

管理画面から設定>一般で、WordPress アドレス(URL)、「サイトアドレス(URL)」をhttp://からhttps://に変更するだけ。


ここまで一気にやってしまったのですが、サーバ設定が反映されるまで、安全な接続ではありませんと出てサイトが表示されなかったり、404エラーやら403エラーやら出ました。30分ほど待っていたら、無事にhttps始まりでのサイトが表示されるようになりました。


4 WordPressブログをFirefoxチェックしつつエラーが出る箇所を修正

Search Regex というプラグインで、http://aaa.net → https://aaa.netと一括置換する方が多いようなのですが、今回はどんなところに混在エラーが出ているのか知りたかったので、一括置換はひとまずしないことにしました。

Firefoxで見ると、SSL化して保護された通信ができているページはアドレスバーで緑の鍵マークが付くのですが、

anzen1.jpg

httpとhttpsの混在などで安全な通信ができていない場合には、鍵に!が付きます。

anzen2.jpg


4-1 サイドバーのウィジェットのアフィリエイトリンクを新しく作って差し替え
4-2 ファビコン画像のURLを修正 テーマの編集から(header.php内)

全ページ共通で表示されるウィジェットのアフィリエイトリンクを張り替えて、ファビコンのURLをプロトコルを指定しないパス(//で始まる絶対パス)に書き替えたところ、だいたいのページで緑の鍵マークが付くようになりました。現時点では、画像の内部リンクはhttpのままでもエラーにならないし、記事中の他のhttpサイトへのリンクも、httpのはてなブックマークボタンでも混在エラーは出ないようです。


4-3 WordPress内でWEBフォントが効かなくなっている部分を修正 テーマの編集から(style.css内)

Webフォントが表示されなくなっていたので、style.css内のWebフォントを呼び出している箇所のURLをプロトコルを指定しないパス(//で始まる絶対パス)に書き替えて反映。SafariとFirefoxではOK。Chromeでは効いたり効かなかったりするけど、別のフォントで表示されて読めるので、キニシナイ。


4-4 各記事をチェックしてアフィリエイトリンクを差し替え

ばっちり鍵に!マークが出たのが、画像つきのアフィリエイトリンク。全部探して新しく作ったリンクに差し替えました。このブログ内にはそんなに数は無かったけど、それでもめんどくさい。


WordPressブログのチェックと修正が終わったら、次はHTMLやPHPで書いたサイトの方のチェックと修正。内部リンクはもとから相対リンクで書いているものがほとんどなので、修正はほぼなし。ですが、javaScriptが動作していない箇所がちょこちょこありました。

5 javaScriptが動かなくなっている部分を修正

jQueryのライブラリを外部から呼び出している箇所のURLをhttp://〜から//〜に書き換えると動くようになりました。

https(SSL)通信の環境下でjavascriptが動かなくなる場合の原因と解決方法


後は、アナリティクスとサーチコンソールの設定をして終了。疲れたので省略。

6 Google Analytics の変更(http→httpsの変更)
7 Google Search Console のhttpsサイトの追加登録


ふー、お疲れさま。久々にjQueryやらPHPやら、勉強になりました。Xサーバー上のサイトのSSL化はこれで一旦終了。後日、通信で警告が出るようになったらやり残しを潰していくことにします。



さくらサーバ上のサイトの方は、レンタルサーバに付属しているさくらのブログが大部分を占めるため、ブログサービスの方で全体をSSL化してくれないと手が出せないんですよね。2017年3月のブログ管理画面のSSL化に続いて、記事表示の方でも進めてくれるといいなぁと期待して待っているところです。yahooブログとアメブロはもうhttpsになってるんですよね。

いざSSL化をするとなると、各記事内にあるアフィリエイトリンクの張り替え(一つ一つ手作業)が多量で気が重くはあります。内部リンクの差し替えも元から相対パスで書いておけば修正しなくて済んだけど、若かりしころの自分がしたことだから、仕方ないですよねぇ。

その時が来たら、やらなきゃね。

posted by かこ at 01:21 | Comment(0) | TrackBack(0) | WordPress

XSERVER上のサイトをSSL化(https)したときの覚え書きとか雑感とか〜前半・導入を決めるときに考えたこと

私が自分でレンタルサーバ上で管理している主なWebサイトには、さくらのレンタルサーバ上のココロデザイン総合サイト、Xサーバー上のコトコトねっとの二つがあります。そのうち、簡単にできそうなXサーバー上のサイトを勉強がてらSSL化してみることにしました。

SSL化するってどういうことねん、とか、URLをhttpからhttpsに変えると何がよくなるねん、などというところは、詳しく分かっている方々が説明をされている記事が他にあるので、そちらをご覧下さい。

それから、この記事は、私が後日さくらのサーバ上のサイトをSSL化するときや、今後不具合が出たときに振り返るための作業と雑感の記録です。SSL導入の簡潔な手順を知りたい方も、別の記事を探していただいた方がよいかと思います。



私自身は、まだ自分で管理している個人サイトはSSL化しなくてもいいと思ってたんですよね。読者さんの個人情報を入力していただくようなフォームも無いし(コメント欄はあるけど)。お金がかかったり、SSL証明書の発行手続きが難しいうちは、やらなくていいやと。

でも、仕事(ネットショップ運営)で使っているyahooショッピングも楽天市場もSSLに移行し、そのさい店舗側でやることはCSVデータ上のhttpをhttpsに置換して、ヘッダやサイドバーやフッタのテンプレートにあるhttpをhttpsに書き換えるだけの作業だったので、サイト内でやることは手間や面倒があっても特に難しいことはないんだと気づいたのですよ。

しかも最終的には、書き替え作業が難しくて出来ない店舗の場合、サービス運営側で強制的に書き換えて移行していました。Amazonにいたっては出店者は何もすることなくAmazon側で全部やってたし。

レンタルサーバ側がSSL化に本気になれば、レンタルユーザー側がやる気もお金もなくても、簡単にできる仕組みを出してくるか、強制的に移行する時がそのうち来るんだろうなーと思ってました。



で、Xserverでは、一年以上前、2016年6月30日に簡単で無料でできる仕組みを既に出しているんですよね。

全サーバープランで独自SSLが無料・無制限に利用可能に!「独自SSL」機能の強化のお知らせ | レンタルサーバー【エックスサーバー】

サーバパネルからの簡単操作で、ドメイン認証型SSL証明書「Let's Encrypt」を無料・無制限に設定でき、導入後は自動更新されます。

ってことは、外側の仕組みには触らなくても、サーバパネルでぽちぽち設定したら、後はソース内のhttpをhttpsに書き換えるだけでできちゃうんじゃないかな?

ってなかんじで、その通り、だいたいできました。

SSL化にあたって私がしたことは次の記事で。

後半・SSL化作業

posted by かこ at 00:48 | Comment(0) | TrackBack(0) | WordPress