サイトリニューアルへの道
利用していたサイト作成ソフトの不具合をきっかけとした新たなサイト作成ツールへの乗り換えの検討、新デザインのサイト作成から公開までのトラブル発生と解決までの顛末。
-PR-

サイトリニューアルへの道

1.サイトリニューアルのきっかけ

リニューアルのきっかけは使用していたサイト作成ソフト「ホームページV3(ソースネクスト)」が不具合を生じたことでした。
最終的にはサイトデータを収容しているフォルダ(バックアップの対象となるフォルダ)の全体サイズが8.6GB、ウェブページとして表示されるHTMLファイル数430枚、画像(jpg)22,000枚(2.8GB)まで巨大化したのですが、V3の動作が不安定になって作業に支障を来すようになりました。

 

ソフトの起動だけでも10分以上かかり、各ページのファイル作成作業中もリンクを一つ二つ張って保存をしようとするだけで「メモリが不足しています」という警告が出るようになりました(ちなみに利用しているデスクトップPCはメモリが32GBなのでこの程度の作業で不足することはあり得ない)。そうなると次の作業でソフトが強制終了になりパッと消える。再度立ち上げようとするとバックアップの復帰から始まるのでソフトの起動に30分近くかかる。そうしたところで「メモリ不足」「強制終了」が繰り返されることも多く、とてもではないが作業にならない。

 

もちろんホームページV3は安価で使いやすいソフトです。サイトの規模が小さかった頃は快適に作業できていました。とはいえ、このソフトによるサイトの巨大化には限界があるようです。記憶では各ページのHTMLファイルが250枚前後の頃に突然すべてのデータが消失する事態に陥りました。バックアップによる復帰の分とバックアップを取ってなかった分のウェブサイトからのコピー&ペーストによる再生を合わせた頃からサーバーへの転送のための付属FTP(ファイル転送)ツールのファイル数表示がおかしくなり、更新分のアップロードにも時間が非常にかかるようになっていました。最終段階では3〜4枚の新規作成されたHTMLファイルと画像数百枚のファイルのアップロードに2時間以上かかっていました。

2.サイト作成ツールの乗り換えの検討

新たなウェブサイト作成ツールを導入するにあたり、後継バージョンのホームページV4という選択肢は除外しました。ここまでサイトを育てた以上、廉価なソフトでは不具合を生じるリスクを無視できません。
ホームページビルダーも発売元がIBMだった時代(ver.8)に作成した、現在のサイトとは別目的のサイトで利用したことがあり、こちらも選択肢には上がりませんでした。

 

調べたところ現在のサイト作成ツールは「SIRIUS(シリウス)」と「WordPress(ワードプレス)」が主流のようです。シリウスは従来のソフトと同様、ローカル(自分のPC)で作成作業を行い完成したファイルをFTPツールでウェブサイトのサーバーにアップロード(転送)する方式。これに対してワードプレスはウェブサイトのサーバーにインストールされたサイト作成ツールにアクセスしてそこで作業するタイプ。
サイトが巨大化している場合はワードプレスの方式はかなり魅力的でした。作成するページごとにちょこちょこと画像ファイルをアップしていけばよいのでしょうから膨大なファイルの一括転送の心配もないでしょう。しかもワードプレス自体は無料で利用できます。しかし長年ウェブサイト作成ソフトに慣れ親しんだ身としては、新たにワードプレスの作業過程を一から学ぶのはあまりにも骨が折れるということが想像できました。HTMLのタグをちょこちょこと書き換えるくらいならまだしもCSSはこれまでソフト任せ、ましてPHPは何をするのかイメージが湧かない。シリウスには作業が直感的に行いやすいという従来のソフトの魅力があります。それにワードプレスが無料といってもインストールが可能なサーバーのプランに移行すれば、その使用料も当然変わります(大した増額ではありませんが)。ちなみに私が利用しているレンタルサーバーはロリポップのエコノミープラン(アップデート済み)です。
またソフトウェアの修正点をバージョンアップで対応するシリウスに対して、オープンソースであるワードプレスはプラグインによる拡張性の魅力がある反面、その脆弱性に対するサイバー攻撃に対してユーザーが一々対処していかなければならないという手間も気になりました。シリウスのように最新バージョンで更新したサイトをアップロードしてそのまま放置しておけば足りる、というのはいかにも楽です。
サイトのリニューアルによるファイル丸ごと全てのアップロードの手間がかかるといえども、よもやV3の末期症状のようなことはないだろう、と踏んでサイト作成作業の楽そうなシリウスを導入することにしました。
※令和4年(2022)7月現在では旧バージョンを一新した「シリウス2」がリリースされています。
-PR-
新世代型サイト作成システム「SIRIUS2」

3.SIRIUS(旧バージョン)によるサイトのリニューアル

とはいえ、V3からシリウスにデータを移し替えるのは膨大な作業でした。なにしろ私のサイトはページ数、画像数が非常に多い。トップページ、テーマ別目次ページ、コンテンツ詳細ページと上の階層から下の階層へ、ひたすらページのコピー・ペースト、ページ内への画像タグのコピペとファイル名入力の繰り返しとなりました。とはいえ、テンプレートの選択から細かい作業内容の方法まで公式マニュアルや私的な解説サイトがいくらでもあるので困ることはありませんでした。
何よりシリウスは起動も瞬時で、ファイルの作成量がかさんできてサイトが巨大化してもメモリ不足の警告もない。もちろん動作不安定によるフリーズ・強制終了もない。リニューアル作業終盤での多少の動作不安定は覚悟していたのですが、拍子抜けするくらい快適でした。やはりソフトの価格差からくる実力差というのは、作業効率という観点からは埋めがたいものがあります。
ところでリニューアルの完了後にサイトの更新として新規のページを追加作成する際に、シリウスの「ホーム」タブのリボンバーから「画像管理」ツールを利用して新規の画像を取り込もうとしたところ、メモリ不足の警告が出て強制終了してしまいました。
そこで既存ページの画像タグをひとつコピーし新規のページに直接貼り付けてファイル名だけを書き換えるという、旧デザインから新デザインへのコピペ作業と同様にマニュアルの(手作業による)作業で画像を取り込んでいくことにしました。その際に新たな画像は元々収容してあるフォルダでWindowsペイントで画像を開いて新たな保存先としてシリウスで作成するサイトのimgフォルダを指定してコピーを保存し直す、という作業が加わります。これは慣れればどうということはない作業なので、特に問題はないと思います。サイトの規模がまだ大きくない段階であれば「画像管理」ツールが問題なく使えるでしょうからこのような手間をかける必要もないでしょう。

4.リニューアルしたサイトのアップロード

リニューアルしたサイトを丸ごとアップロードするという、この段階で新たな壁に当たりました。シリウスに付属するFTP(ファイル転送)ツールを利用してサイトをアップロードしようとしたのですが、当然サイト全体のリニューアルなので「全てのファイル」をアップロードすることになります。ところが私のサイトは初回の全ファイルアップロードとしては巨大すぎたのです。サーバーへの接続まで10分近くかかり、いざ「全てのファイル」をアップロードしようとクリックすると強制的に接続が切断されてしまうのです。何度試みてもその繰り返しでした。
そこでV3やビルダーの時代には利用したことのなかった、汎用のFTPソフトを利用することにしました。調べてみると、無料で利用できるFTPソフトは何種類かありますが、最も著名なのは「FFFTP」というソフトでした。ただ私のサイトの場合、転送でネックになるのはいかにして膨大な量の画像ファイルを無事にアップロードするか、でした。そこで検討を重ねたところ、「FileZilla(ファイルジラ)」というソフトが3GBレベルのデータでも中断・失敗のリスクが低い、ということで「FileZilla」を導入することにしました。
「FileZilla」もサイト作成ソフト付属のFTPツールと同様、直感的な操作がしやすいです。必要なサーバーの情報を入力して接続すると、左側にローカルのPCのフォルダが表示され、右側にウェブサイトのサーバーが表示される。サイトのデータが収容されたPCのフォルダ・ファイルをすべて選択してサーバー側のルートディレクトリ(ロリポップレンタルサーバーの場合。他のレンタルサーバーでは転送先に全データ収容用のフォルダを作っておくケースもある)に直接転送するだけ。
ただ私の場合は画像の収容された「img」フォルダだけを先に転送することにしました。これなら各ページのHTMLファイルを転送するまでは画像の入ったフォルダをサーバーのルートディレクトリに物置のように置いておくことになるだけです。各ページのHTMLファイルなど他のファイルが新デザインに上書きされてしまった状態で画像ファイルの転送途中に万が一不具合が生じて中断するとサイトの表示という点で非常に厄介なことになってしまいます。ネット上で自分のサイトのページがきちんと表示されない状態が長時間続くという事態は避けねばなりません。
いざ作業に取り掛かってみると、やはり3GB弱、22,000の画像ファイルの転送は大仕事でした。午後3時ごろから始めたものの予想を上回り転送が終了したのは午前0時過ぎ。足掛け9時間、PCとFileZillaはひたすらファイルをアップロードし続けたのです。無事にimgフォルダのアップロードを終えたときはとにかくほっとしました。ちなみにシリウスでは旧デザインの時には作らなかったスマホ用サイトも同時生成したのですが、こちらは画像も小さいのでスマホ用サイトのフォルダ全体でも2時間半ほどの転送時間でした。
ともあれ「FileZilla」はサーバーへの接続は一瞬。V3はおろか、シリウスの付属FTPツールも比較になりません。余程のデータ量でもない限り、転送のスピードもとても速いです。問題は二回目以降、更新したファイルの転送はどのようにするのか、でした。ただこれも調べてみると、きちんと方法を説明した私設サイトがあるので助かりました。要するに二回目以降は転送の設定として、新たに作成されたファイルのみを上書きするするようにしておけばよいのです。そうすると更新のないファイルは超高速でスキップしていくので、フォルダ丸ごと転送しても一回目のような膨大な時間はかかりません。ちなみに22,000のjpgファイルを含むスマホ用サイトのフォルダ丸ごとの転送でも二回目以降は高速スキップにより数分程度でアップロードが終了します。サイト全体の新規アップロードでは9時間かかったimgフォルダも更新された画像が200枚程度であれば高速スキップによりフォルダのアップロードが10分程度で終了します。この転送スピードはサイト作成ソフト付属のFTPツールとは比較にならない実力です。
こうなってくると、もはやローカルPCで作業するシリウスのデメリット(ワードプレスと比べてファイルのアップロードの手間と時間が面倒くさい)はないといっても言い過ぎではないと思います。

 

話が前後しますが、新デザインのサイトデータをアップロードするにあたりサーバーにアップロードされていた旧デザインのサイトのファイルデータはとりあえずそのままにしました。ロリポップのサーバーへのアップロードはサーバー側のルートディレクトリにサイト全体を収容するためのフォルダを設けずに、サイトデータ全てのバラバラのファイルおよび小分けされたファイルが収容されたフォルダを直接ルートディレクトリに放り込む方式です。そしてサイト作成ソフト側の仕様としてV3の場合にはシリウスと異なりサイトデータはHTMLファイルやjpgファイルその他もろもろのサイトデータファイルをそのままで(画像などもフォルダで小分けされることなく)サーバーのルートディレクトリなりフォルダなりに放り込む仕様になっています。
何しろ旧サイトの画像の削除に膨大な時間がかかることが予測されました。スムーズに旧サイトから新サイトに切り替えるため、旧サイトのHTMLファイルのページがウェブに表示されるようにそのまま残しておく必要があります。新サイトの画像やスマホ用サイトデータはシリウスの場合は小分けされたimgフォルダ、iphoneフォルダに収容して転送されるため、ルートディレクトリに剥き出しで置かれた旧サイトのファイルと混ざり合う心配はそもそもありませんでした。
最後にシリウスでもバラで転送するHTMLファイルはせいぜい430ページ程度なのでその他(.htaccessとかcssとか)のファイル・フォルダと併せて強制的に上書きするように設定してまとめて転送すれば、FileZillaならあっという間にアップロードは完了します。それらが上書きされた時点で旧デザインが新デザインに切り替わる、と言う訳です(SEO対策の観点からファイル名は新旧サイトとも全く同じにしました)。仕上げとして転送直後にサーバー側のファイル・フォルダの並びを更新日時順に並べ替えて旧サイトの画像以外のその他ファイルで新サイトのものと紛らわしい不要なものを先に消去し、ページの表示に利用されなくなった膨大な画像ファイルは後から少しずつ消去していく、という段取りです。なお画像ファイルの削除はサーバー側の管理ツールとして用意されている「ロリポップ!FTP」を利用して行っていましたが、作業効率があまりよくなかったので途中から「FileZilla」を利用した削除に切り替えました。こちらの方が時間もかからずにある程度まとまった量のファイルを一括して削除していくことが出来ます。

5.PCサイトの表示のトラブル発生とその対処

細かな修正を各ページや各ページ共通のテンプレートに加えながら何度もアップロードしてはサイト表示を確認する作業を繰り返していくうち、突然トップページが「リダイレクトが多すぎます」の警告文と共に表示されなくなりました。下層ページのURLを直接打ち込んでも、そちらも表示されません。「いったい何が起こったのか」訳が分からず途方にくれました。警告文の下にヒントとしてCookieの削除などがでていたので、とりあえずブラウザの設定から自分のサイトのクッキーだけを削除してみましたが状況は変わりません。時間が経てば変わるかとしばらく放置しましたが、数時間後も状況は同じまま。もう一台のノートPCからアクセスしても全く同じ表示でした。ただ、スマホ用のページは普通に表示されていました。なぜPCサイトのページだけが表示されないのか。
検索して調べてみると閲覧者側の問題としてのほか、サイト管理者側の問題として「.htaccess(エイチティーアクセス)」ファイルの改変が原因の可能性があることが判明します。.htaccessとはサイトデータが置かれているサーバーのディレクトリの動作を制御するファイルとのこと。「そんなものはいじっていないし、いじる知識もない」のですが、ここでハタと気付きます。
スマホ用サイトのフォルダを開いて一部のファイルだけを転送する作業をしていたのですが、誤って転送先をスマホ用サイトのフォルダではなくルートディレクトリにしてしまっていたのです。つまりPCサイト用の.htaccessファイルがスマホサイト用の.htaccessファイルに書き換えられてしまったのです。当然PCサイトを表示することはできなくなります。だとすればそれぞれのファイルを転送し直すことで、ことは無事に解決しました。そもそもの問題として先に触れたようにスマホ用サイトのフォルダはその中身をバラで転送するまでもなくスマホ用サイトのフォルダを丸ごと転送しても時間はさしてかかりませんので、余計なことをしない方が良かったということでした。
教訓として得られたものは、これまでサイトデータのFTPはソフト付属のFTPツールを使っていたためすべてが指示に従ってボタンをクリックするだけで足りるフルオート状態だったのに対し、FileZillaは転送元のファイル・フォルダと転送先のフォルダ・ディレクトリを「これを、ここへ」と自分のクリックで指定するマニュアル状態のため、不注意による転送ミスが起こってしまうリスクがある、ということでした。これは今後も慎重でなければならない、と思っています。

6.終わりに (追記 シリウス2によるリニューアル)

サイトリニューアルへの道は以上のような感じでした。このページがシリウスの導入、シリウスへの乗り換えを検討している方々への参考になったら幸いです。
なおこのサイトは先代の(旧バージョンの)SIRIUSで作成しました(2022・令和4年6月)。その後、2022年(令和4年)7月に新バージョンの「SIRIUS2」がリリースされています。旧バージョンの利用者にも新規利用者に先行してシリウス2がリリースされておりましたが、このサイトは旧バージョンのシリウスでリニューアルした直後ということもあって当面は旧バージョンによるデザインのサイトを引き続き表示することといたしました。

シリウス2によるリニューアル  2024(令和6)年8月

 

シリウス2によるリニューアルはシリウス(初代)からインポートしたデータをもとに、テンプレートを新たなものに変更することから始まりました。
イメージカラーをデフォルトから変更したり、ヘッダー画像に重ねるロゴ画像を新たに作成したり、サイトタイトル・ヘッダー下の紹介文の見え方の細かな調整、あるいは画像スライダーといった新たな機能を利用してサイトの見た目をアップデートしたりといった作業の大半はソフトの上部に並ぶアイコンのバー(リボンバー)から操作できます。作業の手順を解説した公式マニュアル(「オンラインマニュアル」、「よくあるご質問」)は以前のバージョンと同様にソフトを購入してライセンスを取得したら公式サイトから参照できるようになります。

 

ただ以前のバージョンと同様に、デフォルトの表示からカスタマイズする際に「HTMLテンプレート」を編集しなければならない項目もいくつかあります。
例えばトップページの更新履歴を表示する位置をページ下から別の場所(ページ中ほどなど)に変更する、目次ページ(カテゴリーページ)の下部に表示される個別ページ(エントリーページ)の記事一覧を表示させないようにする、などはリボンバーのアイコンからは操作できず、PC用、スマホ用それぞれのHTMLテンプレートを開いたうえで該当するHTMLタグを丸ごと移動(コピペ)したり丸ごと削除したりする作業が必要になります。
また当サイトでPCの目次ページに用いたテーブル(表)は、旧バージョンのレイアウトがシリウス2では崩れてしまいました。これはページ記事編集画面のHTMLタグを手作業で書き換えながら対応しました(なお修正作業の後で見つけたのですが、公式マニュアルには旧バージョンの「スタイルシート」をコピーしてシリウス2の「スタイルシート」に貼り付ければ解決する、とありました。なんだ、そんなに簡単だったのか)。

 

サイトのリニューアルが一通り完成したら、シリウス2に新たに加わった機能「画像最適化機能」を利用して画像ファイルの容量を圧縮することにしました。この作業の結果、従来のデータ量(3.04GB)が1.22GB(−60%)まで最適化(圧縮)されました。これにより、契約しているサーバーの使用量を大幅に軽減することができます。なお公式マニュアルによれば最適化は大体50〜80%程度が見込める、となっています。
最適化は新規の画像を追加した場合、その都度最適化の作業を行うことが必要となります。「サイト生成」を行う前に、新たに追加した画像の「画像最適化」を忘れずに(二度手間にならないように)行っておく手間がかかります。

 

リニューアルにより、全てのファイルをアップロードすることになりますが、今回はファイルジラではなくシリウス2に付属するFTPツールを利用することにしました。これが、先代シリウスのFTPツールに比べると大幅に改良されていると感じます。
合計48,300件程のファイル数となりましたが、PCサイト用ファイルのアップロード、スマホサイト用ファイルのアップロード共に2時間10分ほどで完了しました。スマホサイト用画像ファイルのアップロードは先代シリウスのアップロードでかかった時間とほぼ同じでしたが、やはりPCサイト用画像ファイルのアップロードは画像最適化(圧縮)がなされているため、かなり短時間で完了したことになります。
但しインターネット接続環境が先代シリウスによるリニューアル時とは異なっています。いずれもJ:COMの回線ですが、プラン変更により先代シリウスでの接続環境はカタログ値10Mbだったのがシリウス2での接続環境はカタログ値320Mbとなっています(実際にはそこまでの差はないのですが)。
画像を含む新規ページを更新した場合は「更新ファイル」のアップロードを利用します。これはファイルジラで更新のない画像ファイルが超高速でスキップされていくのと同様の動作となります。現状ではおよそ20分でアップロードが完了します。
記事の書き換えのみ(新規画像なし)の場合はシリウス2附属の「FTPクライアント」のアイコンからの「超速アップロード」(HTML、PHP、CSSのみ)を利用します。これはファイルジラで最新の更新日時のファイルのみを指定してアップロードするのと同様の動作となります。こちらは十数秒でアップロードが完了します。

 

アップロードされたサイトをPC、スマホそれぞれで確認すると、PCサイトはプレビュー通りに表示されるのですが、スマホサイトは目次ページ(カテゴリーページ)の表(テーブル)の枠が表示されず、ヘッダー画像もリニューアル前のまま更新されない状態であることが判明しました。リロード(再読み込み)しても変化はありませんでした。
公式マニュアルを調べると、ヘッダー画像についてはスマホ用のキャッシュが強く残っているためキャッシュをクリアするという解決策が提示されていました。ただキャッシュについてはユーザーさん毎に様々に利用されているサイトのキャッシュをクリアしたくない事情から操作に慎重になることもあるでしょう。また、テーブル枠の非表示については全く手掛かりがありませんでした。
ここで、たまたまスマホ用サイトの表示がプレビュー通りの表示に正常化した方法をお知らせしておきます(なおスマホ、ブラウザはAndroid、chromeです)。スマホのメニュー(右上の縦三つの点)から、サイトの表示を「PC版サイト」に切り替えます。当然表示は窮屈な感じになりますし、ヘッダー画像表示は乱れます。ここで、サイトの表示を再びスマホ用サイトに戻す(再度メニューを表示して、PC版サイトのチェックマークを外す)のです。するとスマホ用サイトの表示がプレビュー通りの表示に正常化するのです。
以上の方法は私がたまたまうまくいっただけなのかもしれませんが、参考にしてみてください。

 

 

それでは、サイトのリニューアルに合わせて改めて「シリウス2」のご案内を提供してまいります。
-PR-
新世代型サイト作成システム「SIRIUS2」の案内サイトはこちら。

-PR-

このサイトは(株)ACES WEB 「シリウス2」により作成しております。

新世代型サイト作成システム「SIRIUS2」

-PR-