1. Zumba天国 / ながらcast
  2. ながらcast139 Webサイト制作..
2020-12-26 23:12

ながらcast139 Webサイト制作の昔話(後編)

昨日の続きです。Adobe GoLive時代に、XHTMLへの移行や、テーブルレイアウトからCSSを使ったレイアウトへの移行を始めました。ただ1ページづつ手作業で行うことの大変さ、また新商品登録の際、インデックスページまで作ることの大変さから、当時「ブログ管理ソフト」として認知されてきたCMSを使うことにしました。いくつか検討する中で、テンプレートのカスタマイズかでき、データベースを使うしっかりしたソフト「MovableType」を選択しました。テンプレートの作成はひと仕事でしたし、コンテンツの移行も大仕事でしたが、なんとかやり遂げました。その後、スマホ対応として、Bootstrapを使って、レスポンシブデザイン対応しました。今も問題は山積していますが、それはまたべつのお話。
00:04
はい、ながらcastです。この番組は、静岡市に住む50代後半の私、sasayukiが、日常や仕事か、日常や仕事に関して台本なしで、通勤途中に歩きながら発信している番組です。
今日もよろしくお願いします。
安倍さんねー、なんかあれで通っちゃうっていうのが怖いですよねー。
あんなけ国会で、
白だ白だと言っておきながら、 結局黒だったわけですよねー。
で、自分は、 まあ確認したから、
っていうことで、自分は、 白だと。
なんだろうねー。 こういうのが通っちゃうのが、
嫌ですよねー。本当に。 法的には白かもしれないんだけど、
国のトップですからねー。本当にねー。 こういうのが例えば、
どうでしょう。 市の、
市会議員とか市長、 もしくはまあ、
会社で、そういうことがあったら、
どうなんだろうって、 ちょっと想像してみるとねー。
いやー、うちの事務所は不正はしてない、不正はしてないって言い続けておいて、
実際はねー、 事務方が不正してましたと。
だった時に、 うーん。
いや、それもコントロールできないのって、 僕なんか思うし、
その事務方の管理も含めて、 やっぱりトップの責任は、
ありますよねー。
ただまあ、 一番国会でやんややんややってる時に、
白だ白だと言って、 言い逃れができちゃったっていうあたりが、
こう、なんか。 で、後からね、後出しじゃんけんみたいに、
やっぱり黒でした、ごめんなさーい、 っていう図式にしか見えない。
一番肝心な時にね、 うまく逃げを押せたんで、
まあご本人としては良かったんじゃないかと。 まあ皮肉も言いたくなりますけどね。
こういうのが通っちゃうのは本当なんか、 嫌な気持ちですね。
これが、 一国の首相のやってることで、
まあ前も言いましたけど、 盛り掛けでしたっけ?掛け盛りでしたっけ?
ああいうのも自分のお友達に便宜を図ったように、
03:05
まあ見られてというか、まあ便宜を図ったか まだわかりませんけどね。
そういうことをしないようにする。
そうやって、 要は、
そうやって、 疑われるようなことをそもそもしないっていう、
なんか、
矜持がないと、 本当に政治家ってやってほしくないんですよ。
俺って、 求めすぎですかね。
もっとちゃんとした人に政治をやってほしいし、 一国の首相であればなおさら、
そういったものに敏感でなきゃいけない。
そんなのをね、適当な。
本当に子供の、 子供の弁解ですよね、これって。
僕知らないもんみたいな。 あいつが勝手にやってたんだから、僕知らないもんって。
うーん、本当に小学生みたいな論理なんですけどね。
いかにか、語りすぎちゃったっけ?
今日はですね、昨日の続き、
ウェブサイトを作ってきました、 昔話の後編です。
昨日はですね、
調べたら、1996年から、 一応サイト的なものを運用してました。
多分ドメインも取ったんじゃないかなと思うんですけどね。
ゴーライブを結構長い間使って、
サイトの管理をしてきました。
ただ、ページを作るのは結構力技だったので、
大変、一個商品出せばリンクを貼って、
みたいな作業も発生するし、買い物カゴもね、
一つの買い物カゴが、ページにそのまま JavaScript が書いてあるので、
各ページを直しに行かなきゃいけないっていうのも大変だった。
で、あと、昨日ちょっと説明間違ってたんですけども、
テーブルレイアウトから、ウェブ標準って呼ばれる、
HTML プラス CSS で、ページのレイアウトをコントロールしようっていう流れもあった中で、
さらに、XHTML っていう流れもあって、
そういったものに、ゴーライブを使って、何度かやってくらいついていったっていう状況ですね。
06:01
SSI、サーバーサイドインクルードの技術を使って、
ヘッダやフッタをパーツ化したり、っていうこともしたり。
その延長線で、買い物籠の JavaScript の部分を、
小さい、10行くらいのスクリプトの部分を切り出して、
それをヘッダ、フッタ、同様、パーツ化するっていうことを始めました。
これをやると、1個の JavaScript だけ切り出した、
HTML ファイルを上書きすると、それをインクルードしている場所が全部同時に変わるわけですね。
この手法を編み出したことで、買い物籠そのものの管理はずいぶん楽になりました。
これで、今もう運用できる形の基礎ができたんですね。
それで思い出したのは、最初は大変喜んで使っていた、
GoLive のパーツで管理するっていう、ヘッダーとかフッターを、っていう機能を使わなくなった理由っていうのを思い出しました。
つまりですね、その場合、ヘッダーを、例えばデザインを変えると、それを読み込んでいる、
一つ一つの HTML ファイルは確か、修正がかかるんですよね。
修正を反映させるには、それらのファイルを全部アップロードしなきゃいけない。
ということで、ちょっとした修正を反映させるために結構大変になってきたんですね、作業が。
ちょっとごめんなさい、うろろ覚えなんだけど、結局何やってるかっていうと、ローカルのファイルを書き直してるんですよね、GoLive が一生懸命。
で、それをサーバーに上げないと反映できないので、それをアップロードするということで、
そうするとね、極端な話、全部のページを上げなきゃいけないんですよね。
ヘッダーのデザインを変えるたびに、それが嫌になっちゃったんだと、確かそんなことだったと思います。
サーバーサイドインクルードであれば、その肝心のヘッダーのファイルを修正かけて、
サーバーに上げちゃえば、もうその時点で、あと何もしなくていいんですね。
09:00
個々の html のファイルは、そのヘッダーのファイルを読み込んでくるだけなので、
ローカルのファイルも触らないし、サーバーに上げたファイルも触らない。
触るのはその肝心のヘッダーのファイルだけで済むっていうところで、すごく楽になったわけです。
そんなことで、サーバーサイドインクルード、SSIを使い始めたんです。
それはそれでやってきたわけですが、やっぱり一番の課題になってきたのが、
そのページを作って、そのページへの導線を作るために、インデックスページを作る。
それを手作業でやっているというところで、ある意味、ある種の限界が生じていたわけですね。
考え方を変えれば、要は検索みたいな仕組みにしちゃって、
何らかのタグを持たせて、検索結果としての一覧ページというのをカテゴリごとにできるようにしてしまえば、
個別のインデックスページ、僕はインデックスって言うんですけども、商品が並んでいるようなページを、
1個1個作らなくてもいいんですけど、その技術もないし、というところで、おはようございます。
結構、更新をどうするかという課題が大きくなってきたわけですね。
そんなわけで、とにかくもっと更新を楽にしたいということで、いろんなことを模索しまして、
たどり着いたのが、いわゆるブログを管理するシステム。
コンテンツマネジメントシステムというCMSが当時、だんだんと流行り始めていって、
自社サーバーにそういうプログラムを置いて、それを使ってブログを書きましょう、みたいなものが、
その頃、わりと出始めていて、それを使って商品ページを管理できないか、というふうに検討したんですね。
12:07
結局のところ、商品の詳細ページっていうのが、記事に相当するわけですね、ブログの。
そういった記事に対して、記事を作成すると、例えば、ブログって、例えばカテゴリーを作れば、そのカテゴリーの一覧の中に、その記事のタイトルがバーって並んだり、
あるいは日付で何月っていう記事を、何月っていうのをクリックすると、例えば5月っていうのを触れば、5月の記事がバーっとリストアップされますよね。
なので、この仕組みを利用すれば、商品を紹介するページにたどり着くための、いろんなインデックスのページが作れるというふうに考えて、
CMSを使ってサイトを作ろうということになりました。
これどうしてこういうふうに思ったのか、僕もちょっと覚えてないです。そういった記事があったのか、多分何かでそういうアイデアを見て、それを利用しようと思ったんじゃないかなと思うんですね。
CMSを使って、結局のところ、ECサイトを作るっていうことをやることにしたわけです。
この時期に選んだCMSが、ムーバブルタイプっていう、当時一番有名だったCMSですね。
無料のものもあったんですが、有償のプランにして、割とね、それできちっと使える感じになったので、
ベラボーに高いってわけでもなかったので、それを購入して、実装しました。
これはそれなりに時間がかかりましたけど、テンプレートを作って、詳細ページのテンプレートとかね、インデックスページのテンプレートとか、
レイアウトも、すでにその時点では、テーブルレイアウトはゴーライブ上でやめて、
CSSを使ったレイアウトに移行していたので、それを全面的に今度は採用しようと思ったわけですね。
15:10
CMSへ移行した理由、もう一つ思い出したんですけども、要はテーブルレイアウトで作ったページを、
そちらのHTMLとCSSで組み直してたんですよね。ウェブ標準で。それがまた手作業なんですよ。
もちろんね、テンプレートみたいなものは作った上で、中身のコンテンツの部分を然るべき場所にコピペしていくっていう、
この地味な作業を当時やってたわけですね。
ただこれをやってた時に、また何か変わった時に、
要は入れ物というか、そのレイアウトの書式を変えた時に、また似たようなことをやらなきゃいけないっていうことに気がついてですね、
この無意味なコピペの作業を今後もやるのかっていう問題に行き着いたわけですね。
それもCMSを採用した大きな理由になります。
なので、テーブルレイアウトからCSSを使ったレイアウトへ移行している途中で、
その作業に言い訳が差して、またその後のことも考えて、やっぱりCMSの方がいいと。
もう一個は、新しいコンテンツを追加した時に、そこへの導線、インデックスページがちゃんと自動で作られるっていう、
本当に神のような進歩だったわけですけどね。
そのために、Movable TypeっていうCMSのテンプレートの書き方を勉強して、
ほぼ狙った通りのページが作れるようになりました。
本当、当時結構頑張って作ったので、逆にですね、
今見るとちょっと、これはなんでこうなっているんだろうって、テンプレートに謎は残っているんですが、
おかげでね、一応ブログを書くようなイメージで商品紹介ページが作れるという形をなんとか作って、
18:02
実はそれで今日に至っています。
こうやって自力で、本当に素朴にやってきたわけなんですけど、
Webの進化のスピードはめちゃくちゃ速くて、本当に取り残されたままコツコツやってるだけなんですけども、
それでも一応、会社、店のサイトとしては機能しているので、なんとかはなっています。
そうやってCMSで運用を続けているんですけども、もう一つ特別なことがあったとすると、
やはりスマホですね。
本当に、前はね、これからスマホで見られる時代だなんて言われてたのがもう懐かしいんですけども、
どんどんとスマホの閲覧の人が増えてきて、やっぱ半分を超えてからは結構早かった気がします。
そんな僕もGoogleアナリティクスをチェックするわけでもないので、そんな実感を持っては言えないんですけども、
ある時、もうこんなにスマホで見られてるんだっていう驚きはありましたね。
結局スマホ用のサイトをどうするか問題っていうのがね、その当時からありまして、
スマホ用に別のレイアウトで
ページを作る、つまり、一つのコンテンツに対して2つページを用意するっていうやり方、
それはね、ある意味、王道かなぁとも思います。
ただその前にね、携帯サイトっていうのがありましたね。柄形向けの、その柄形で表示されるのを前提とした。
ただもうここはね、僕はスルーしちゃったんですよ。
まあちょっとそれはやめて、スマホになった時にいよいよ対応しなきゃいけなくなったっていうことなんですけども、
今言ったように、2種類のページを用意するっていう方法と、もう一つはね、一つのページをPC、タブレット、スマホの場合分けをして表示するっていうね。
21:07
これが当時レスポンシブデザインっていうふうに言われて、持ち上げられてたわけですね。
これだとファイルは一つで済むということになりますので、まあ僕はやっぱりそれを採用したかった。
で、まあいろんな方法があったんですが、これも当時流行ってたブートストラップっていうね、フレームワークっていうのかな。
その一式のセットを導入して、それをムーバブルタイプ上で動かすというか、適用して、なんとかね、
レスポンシブなサイトに化けさせて、なんとかごまかした次第です。
それまではね、もうスマホで見るとPC用のサイトがすごい縮小されて文字読めないみたいな感じで表示してたんですけども、
まあブートストラップを当てることで、スマホでもちゃんと読めるページにできました。
でまあそこでね、なんていうか、ほぼほぼ今の状況に追いついたかな。
まあ今は今でいろんな問題があって、まあ本当長みはいつまで経っても続きますね。
まあその話はまた別の話としてしたいと思います。 今日はここまでで終わりにしたいと思います。
最後までお聞きいただきましてありがとうございました。 ではまた。ちゅーす。
23:12

コメント

スクロール