ホームページの作り方変遷
Nov. 25 '18
 私のホームページは1999年9月頃に、一枚の写真にコメントを付けてアップロードしたのが始まりで、約20年後の現在ではページサイトマップ数2175の膨大な数に達しています。1990~2000年頃の日本のホームページと言えば、通信関係や大企業の一部のホームページがあった程度で、ホームページの揺籃期でした。別のページにも書きましたが、ホームページと言う言葉には今でも多少の抵抗感があり、正式にはウエッブベージ(Web Page)だと思っています。日本ではホームページの名が定着してしまったので、これも仕方ないことですが・・・。20年前から始めた私のホームページは全てが白紙から作り上げた自己流、思考錯誤のページです。その当時はHTMが主流でフレームを使ったトップページの編集から出発しました。が、10年後くらいになってGoogle Chromeなどのブラウザで見たとき、画面崩れなどが発生していました。そこで、トップページのフレーム形式を止めて、インラインフレーム(iframe)を用いたトップページに作り変えたのです。その後、文字化けなども発生したため、文字コードをUTF-8に変更さらに、今までは文字のデザインもすべてHTMLで行っていたものを最新の言語形態であるHTML5+CSS3で再編集もしてきました。これで、私のホームページもパソコン用からスマホでもほぼ問題なく見られるようになり、長年の苦労の甲斐がありました。このように、ホームページの作成、編集形態は常に進化し、動画の再生技術なども大きく変わろうとしています。当然、スマホなどとの技術統合、連携もますます進んで行くのでしょう。当方のホームページの題名は「還暦おじさんの写真館」ですが、今月でとうとう喜寿おじさんになってしまいました。これから先、私の自調自考(独学)がどこまで通用するか、体力的には大丈夫なので、もう少し頑張ってみようと思っています。
 ここでは、Yahoo!ジオシティーズが来年('19年3月末)をもってサービス終了となり、サーバーの移転を余儀なくされました。そのことで、レンタルサーバーの選定、契約から始まって、サーバー移転に伴うもろもろのノウハウ(サイトのSSL化やサイトマップ、SEO対策など)も蓄積でき、その概要を備忘録としてまとめてみました。

ホームページサーバーのこと
 代表的なホームページ作成のレンタルサーバーには
・さくらレンタルサーバー
・エックスサーバー
・ロリポップ
 などがあり、それぞれ特徴があります。当方は今回、さくらレンタルサーバーとエックスサーバーを検討し、やや使いやすく費用も安めのさくらレンタルサーバーのスタンダードプランを選定しました。そして、独自ドメイン(takakuri1125.com)も契約し、トップレベルドメインは.comを選んでいます。当方の独自ドメイン(www.takakuri1125.com)で開設し、無料SSLをさくらインターネットのホームページから設定しました。従来のYahoo!ジオシティーズではこのSSL化がなされておらず、最近のGoogle Chromeなどではサイトを開いたときに、警告らしい記述も見られるようになり気にしていました。このSSL化の編集では、全てのリンクページをhttp→httpsに書き換える必要があり、当方の2000ページ以上あるページ全体で1万か所以上のリンク記述をhttpsに書き換える作業が必要でした。約1か月ばかりの日数とかなりの苦労があって、ようやく完了したのです。なお、さくらレンタルサーバーではHTMLを使ったページの開設やWordPressを使ったサイトの運営も可能です。

FTP転送ソフトのこと
 従来のYahoo!ジオシティーズへの動画ファイルのFTP送信ではホームページビルダーのFTP送信(ファイル転送ツール)を利用し、概ね20MB程度までの動画が送信可能でした。が、今回のサーバー移転でこの動画がどうしてなのか全然アップロードできなくなってしまったのです。動画送信はせいぜい5MB前後までで、それ以上大きい容量の動画は全く送れません。よって、ホームページビルダーのファイル転送ツールの代わりに、いくつかのフリーのFTP転送ソフトの利用を検討し、それを用いて動画のアップロードに対応してきました。その中で、有名なFFFTPによるファイル転送が最も使いやすくしかも、5MB前後の動画でも何回かは失敗しますが何とかアップロードすることができ、今は全ての動画をWeb上で再生することが可能となりました。もちろん、従来技術のフラッシュプレーヤーとはお別れでき、HTML5のvideoタグの素晴らしさを実感しているところです。

 [追記]
 友人のイーサーネット光回線が繋がらなくなったことから、色々と設定などを調べているうちに設定の問題ではなく、使っている無線LANルーターが不具合を起こしてパソコンまで信号が届いていないことを突きとめました。そのことから、当方のFTP転送が極端に遅くなった原因ももしかしてこの無線LANルーターが影響しているのではないかと考え、Wild Speedというサイトで回線速度を計測してみました。その結果が以下です。すると、NURO 光の高速無線LANからLANケーブルを通したイーサーネット回線では通常の回線速度が出ていたのです。これを中継的に使っていたもう一台の無線LANルーターを通したときに、上り回線で極端な速度低下をきたしていたという事です。それで、この中継器として使用していた無線LANルーターの不具合(劣化)が原因で上りの速度低下が発生したと、判断したのですがそれがまた、最初の状態に戻した配線で確認してみると今はこの速度低下がなくなっているので驚いているところです。これが、たまたまなのか、または何時かは不具合が発生するのかは分かりません。なお、下り回線の速度は全然問題ないのになぜ上りだけおかしくなったのかも、分からないところです。無線LANの繋がりの問題は過去にいやというほど経験していますが、LANケーブルを使うイーサーネット回線でこのような事が起こるとは夢にも思いませんでした。通信というものは難しいものです。ホームページサーバー変更後、ホームページファイルの転送が極端に遅く、その原因がレンタルサーバーに起因するのか、FTP転送ソフトの影響なのかそればかりを調べ悩んでいました。が、その原因が自分のイーサーネット回線にあったことが分かり、今にして少々情けなさがこみあげてきました。

実測例・・・Wild Speedにて
 中継無線LANルーターを通した時              無線LANルーターを通さない時    
 

中継無線LANルーターを通した時(現状)

HTML5のvideoタグのこと
 ホームページの作成、編集はまさに日進月歩の速さであり、動画の再生なども以前のMicrosoft メディアプレイヤーや最近のフラッシュプレーヤーもその利用価値が薄れ、今後の動画埋め込み方法はHTML5のvideoタグを利用したものに移っていきます。当方のホームページに掲載している滝などの動画はここ1か月ですべて、HTML5のvideoタグを利用した埋め込み方法に変更しています。その時の動画のファイル形式も以前のWMVやFLVなどからすべて、MP4規格にCorel VideoStudio Ultimate X10を用いてレンダリングし直しアップロードしました。

滝の動画ファイルをHTML5のvideoタグを用いたHTMLソース例


サイトマップやSEO対策のこと
 ホームページの検索エンジンはGoogle検索、Yahoo!検索、Bing検索などが代表的なものですが、ホームページの移転に伴ってこの検索エンジンに引っかかりにくくなってきます。例えば、当方のホームページ(還暦おじさんの写真館)で還暦おじさんの写真館で検索すると今までは最上位でヒットしていたものが、ホームページ移転で全くヒットしなくなる心配もありました。まあ個人の趣味サイトなので、検索エンジンに引っかからなくても・・と、思ったりもしますがやはり、それが無くなると寂しいものです。そこで、サイトマップやSEO対策などの事も少し勉強してみました。先ず、Google検索エンジンに無料でサイトを登録します。方法はGoogle Search ConsoleのFetch as Googleからサイト登録(認識)ができます。マイアカウントでログインすると簡単に登録できました。その後、サイトマップの作成に進み、これもいくつかのフリーのソフトで行いましたが、フリーソフトの場合はページ数に制限があり、当方の2000ページ以上のサイトではわずかの範囲しか登録されません。そこで、Sitemap Creator という有料のソフト(ダウンロード品)を購入し、当方のsitemap.xmlをサーバーにアップロードし、Google のGoogle Search Consoleからそのsitemap.xmlファイルを登録しました。このサイトマップとは、サイト上のページや動画などのファイル情報などを伝えるもので、Google などの検索エンジンはこのファイルを読み込むことで、より高度なクロールが実行されます。なお、SEO対策とはSearch Engine Optimization の頭文字をとったもので、今日SEO対策と言えばGoogle エンジン対策のことといっても過言ではないでしょう。特に現在、Web上での企業活動や仮想商店においては、このSEO対策が極めて重要であり、検索結果がいかに上位に表示されるかで、その企業の業績や信用度にも大きくかかわり死活問題にもなります。ただ、当方のような個人的趣味のWebサイトでは、上位に来るかどうかはあまり関係ないかも知れませんが・・・。

Sitemap Creatorで収集した結果の画像です。

   このソフト(有料版)ではスケジュール設定による自動サイトマップ更新やメール通知
設定が可能で、プロジェクト数やサイトマップページ数なども無制限になります。
Google のGoogle Search Consoleからそのsitemap.xmlファイルを登録

   このsitemap.xmlはサイトにアップロードしておきます。

ブラウザのこと
 ブラウザとはホームページ(Webページ)を閲覧するためのソフトで、古くから知られているマイクロソフトのInterenet ExplorerやWindows 10になってからのMicrosoft edgeがあります。そして今や、世界の検索エンジンの主流となっているGoogle Chromeは私も常用している一人です。なお、Yahoo!Japanの検索エンジンはこのGoogle のシステムで実行されていると思われます。さらに、FireFox(ファイアーフォックス)やOPERA(オペラ)もブラウザとして有名です。動画をブラウザ上で閲覧するときなどにはどのブラウザが最適か、確認してから利用することがあります。例えば、ニコニコ動画で将棋番組(ライブ棋戦)を良く見ますが、このサイトの動画はMicrosoft edgeで見ると途切れ途切れの動きでイライラすることもあります。それを他のブラウザ(Google ChromeやFireFox、OPERA)で確認すると、比較的スムースな再生で見られるという違いもありました。さらに最近、当方のホームページに新たにHTML5のvideoタグで埋め込んだ動画を各ブラウザで確認すると、自動再生(autoplay)の設定にもかかわらず、Microsoft edgeではその機能が生きていません。これに対して、Google Chrome、Fire Fox、OPERAのブラウザではちゃんと自動再生が機能していました。ここにもブラウザの特徴、違いというものがあることを認識したわけです。ようするに、Microsoft edgeではまだ、HTML5でのvideoタグに十分対応できていないという事でしょうか。なお、AmebaTVでも良く将棋棋戦のライブサイトを見ますが、こちらのサイトはどのブラウザで見てもスムースな動きで見やすい。

私のホームページ開設の簡単な歴史はこちら
私のインターネット通信の変遷はこちら
インターネットの基本用語はこちら