00:05
はい、ながらcastです。 この番組は、静岡市に住む50代後半の私、
sasayukiが、仕事や日常について、 台本なしで通勤途中に歩きながら発信しています。
今日もよろしくお願いします。 今日はちょっと
寒さゆるく見ました。
クリスマスイブの日ですね。 24日。
コロナはずっと、
感染者数も多くて、 年末年始が
心配になってきましたね。 本当にどうなるのか、
4月の時のように気を引き締めてっていう話も、 医師会の方かな、言ってたそうですけども、
まあ本当そうですね。 なかなかあの時ぐらいの緊張感、
にはちょっと慣れないっていうのがね、 正直なとこなんですけども、
とはいえ、 そうしていかなきゃいけないなとは、
思います。
さて今日は、 ちょっと
自分がずっと店のホームページを作ってきたんですけど、 その経緯を
ちょっと振り返ってみようと思います。 つまり、昔話ですね。
ホームページを作り始めたのが、 いつだったのか、ちょっと曖昧なんですけど、
たぶん1997年前後でしょうか。
Windows 95が出て、 インターネット接続が
当たり前になってきた 時代ですね。
実際はその前に、 パソコン通信の時代が
ありまして、 本当に古い話ですよね。
まあ電話回線を使って、 モデムという機械を使ってね、
なんていうか、 デジタルを1回音声に変えて
通信するっていうのがあって、 例えばニフティサーブとかね、
03:01
そういう、なんだろう、
そういったコミュニティが
ありまして、 当時、僕もそんな熱心ではなかったけども、
ニフティサーブの、 自分が関連する
会議室なのか、 フォーラムなのか、
懐かしいなフォーラムって。 そういったものに参加して、
そちらに、 今のこっちの仕事に関連するような
トピックに対して、
質問に答えたりとか、 場合によってはね、そこで
注文をもらったりもしてました。 当時僕は別の
会社で仕事をしてたんで、 そういった
何だろう、注文が入ったら、 今の店の方に
連絡をして、 発送してもらうみたいな
通販の
方法をやってたんですね。 ある
ところからインターネットっていうのが 普及し始めて、
本当それまでは、 黎明期というか、本当の黎明期は
もっと前ですけども、 一般市民にとってインターネットって
まだまだ 使いづらいし、接続そのものも
難しくて。 僕はマックだったので、マックFTPとか
TCPIPか、とにかく
3つぐらい難関を越えて、ようやく接続できる っていうような代物で、
今みたいに、 繋げば
すぐインターネットつながるみたいな感じでは なかったですね。
そんな時代で、 とりあえずね、
今のこのお店のホームページを立ち上げよう と
いう前に、まずとにかく、 ホームページってどうやって作るんだろう
っていうところから勉強して、 いわゆるHTMLを
覚えたわけです。
HTMLタグで始まって、 ヘッドタグ、ボディタグみたいなので囲んで、
そこにね、文字が表示できる っていうところから
始まりましたね。 とにかく呪文みたいなもんですよ、当時は。
よくわからないけれども、 とにかくテキストエディターで
06:02
HTMLの構文を作って、 そしてそれが表示されるっていうのを
結構楽しんでやってました。 そんな感じで、
テキストエディターとかで作れることは 分かったんですが、
それだとやっぱりなかなか大変で、 だってね、1枚1枚ページを作って、
リンクを貼って、 ページからページへ飛べるようにして、
なんていうのを、 手作業でやるのも大変なので、
最初に買ったソフトが、 Adobeのページ見るっていうね、
ソフトでした。 これはね、ワープロ感覚かな。
で、 ソースコードを書いて、
それが実際にプレビューで見れるみたいな 機能があったかなぁ。
なんか最初の頃はそういうのもなかった気も するんですよね。
確か画像の配置とかもドラッグ&ドロップで できたり、
まあね、本当にテキストの装飾なんかも できたりということで、
ほんと素朴な HTML ファイルの
製造機という感じで、
多分ページからページへのリンクなんかも 割と簡単に設定できたので、
そこが一つ楽になりましたね。
で、ページ見るをしばらく使ってて、 本当ワープロっぽいやつなんで、
その一方で世の中的には、
えーっとね、ゴーライブサイバースタジオ っていうのが結構あの
Mac 界隈では話題になっていて、 なんか
ページ見るに比べると本格的で、 なんかかっこいいなぁ。
いいなぁなんて思ってたんですよ。
で、それとは別にマクロメディアの
Dreamweaver っていうね、 まあ今も連綿とこう続く
ソフトですけども、 そっちはね、
僕にとってはちょっとハードルが高すぎて、 もう使えそうもないんで、
Dreamweaver は最初から除外でした。
そんな中でね、ゴーライブのサイバースタジオは 気になってたんですね。
で、しばらくしたら Adobe がそれを買収して、
おはようございます。 Adobe からゴーライブ、 Adobe ゴーライブとして登場しました。
09:12
ページ見るからゴーライブになった時は、 かなりこう
やったーっていう喜びがありましたね。 まあね、さっき言ったようにどっちかって言うと、
本当ワープロみたいなソフトだったんでね。
ゴーライブはあれでしたね、サイトっていう概念ができて、
ローカルのファイル、フォルダ構造と、
サーバー上のフォルダ構造を同期させるというか、
そういう考え方だったんで、
画像ファイルのしまう場所とか、
そういったところを管理できたので、
だいぶそれで楽になりました。
あと、例えばヘッダーとかフッダーとか、
共通のパーツっていうのを一応管理できたんですね。
なんかちょっと特殊なコードだったんですけども、
そういうパーツはパーツで管理して、
ちょっとね、1箇所変更するだけなのに、
全部のページをね、同じ場所を延々修正して回るみたいなのが、
やっぱ大変じゃないですか。
なので、そういうのをパーツ化しておいて、
元のファイルを触ればね、全体に反映されるっていうことを、
ゴーライブが一応管理してくれていたので、
そこもね、ずいぶん楽になりました。
このゴーライブとのお付き合いは結構長かったような気がします。
ただ、これが静的なファイル、静ってその静か、
静的なhtmlを手作業で作っていくっていう作業になるので、
これがね、実は地味に大変でしたね。
いや本当、今考えるとよくやってたなって思うんですけども、
例えばね、商品を紹介するっていう時に、
まず一覧があって、その一覧から特定の商品をクリックすると、
詳細ページが出てくるっていう、少なくとも2段階あるわけですね。
12:06
これがですね、その当時は手作業でやってたわけですよ。
一つ商品を追加するとして、詳細ページを作りますよね。
細かく説明した、画像も複数用意したりして、
一番詳しいページを作りました。
その商品のページを、
カテゴリー、属するカテゴリーに分けるわけですね。
あるカテゴリーに属するとして、その一覧の中にその新商品を並べるわけですね。
そこには他のカテゴリーに属する商品が並んでいて、
新しく1個、新商品を入れると。
その画像をクリックすると、詳細ページに飛ぶっていうのを、当時は手作業でやってたんですね。
カテゴリー分けってやっぱり難しくて、
一つの分け方だけではないんですよね。
その商品が持っている属性がいろいろあるわけで、
例えば、大きさ別だとか色別だとか、
あるいはそのジャンルとか、あるいは作者だとか、メーカーだとか、
いろんな分け方が存在するわけで、
一つの商品がいろんな入り口を持ってた方がいいわけですね。
なので、一つの商品を登録すると、
いくつかのカテゴリーに、それを一覧に付け加えなきゃいけない、
ということを本当によくやってたなぁって思いますけども、
それをコツコツとやってました。
もちろんね、慣れてもいるので、流れ作業的に
やってはいたんですけどね。
でも、とにかくそれをかなり長いことやってましたね。
で、
15:03
時代の流れがだんだん変わってきて、
最初はページのレイアウトを、
テーブルを組んで、そのテーブルの中に物を置いていくっていう、
HTMLの書き方を、これは本当にほとんどのサイトがそうしてたと思います。
位置を揃えるために、
透明の1ピクセルのドットジフみたいなものを作って、
それで、何ていうか、位置の調整をしたりとかね。
みんなそんなことをやって、結構苦労して、
ページのレイアウトをしてたんですね。
テーブルを使ったレイアウトの時代です。
で、まあそれが落ち着いたところで、これじゃまずいということになったんです。
簡単に言えば、表は表のために使うべきで、
ページレイアウトのために使うのは、ちょっとおかしいんじゃないかという話で、
まあ本当に当たり前の話なんですけどね、今。
だってテーブルだと横にどんどんと動いていって、
次の行へ行ってみたいな読み方をするわけなんですけども、
レイアウト上のテーブルだとね、そういうふうじゃないんですよね。
だから、例えば視覚に障害のある方が読み上げソフトを使った場合、
全然おかしなことになっちゃうっていうことが問題視され始めたんですね。
本来のHTMLの使い方とは違う使い方をしている。
それが今にずっと繋がってくるセマンティック、意味のあるレイアウト、デザインっていうことだと思うんですけど、
文章の構造そのものが、HTMLタグを使いながら、それだけで意味を持っているっていうようなHTMLの書き方ですよね。
その流れが具体的になったのが、XHTMLっていう仕様で、
XMLっていうね、記法、何だろう、文法にのっとって、HTMLをちょっとリファインというか、ちょっとブラッシュアップするようなものだったと思います。
18:07
僕自身も次はこれが来ると確信しましたね。
当時それは徐々にそっちにシフトしているところもありましたし、
ウェブ標準っていう言葉が一般的になり始めて、
僕もそこへ向けて、それまで書いていたHTMLを書き直したりしてました。
それもGoLiveの中でやっていました。
その一方で、GoLiveでの、さっき言ったヘッダーとかフッターのパーツを処理するっていうのに、
ソースコードがごちゃごちゃってなっちゃったり、
実用的に問題が生じたのかな、理由は定かじゃないんですけども、
そういったパーツを読み込むだけなら、
むしろサーバーサイドインクルード、SSIと呼ばれる方式なんですけども、
それを使ったほうがいいっていうことを知りまして、
ある時期からそちらに移行しました。
やっぱりさっきのヘッダーとかフッター、ホームページ上のですね、
例えば上のメニューの部分とか、下の会社名とかの部分っていうのはもう外部パーツにしてしまって、
それをウェブサーバーが読み込むっていう方式なんですけども、
僕にとってはこれが非常に使いやすい、便利な考え方で、
かなりこれは使い倒しましたね。
実際今でも使っている手法です。
ただ当時もそのやり方っていうのはサーバーに負荷をかけるから良くないと言われてました。
言われてましたが背に腹はかえられないというか、
もっとも自分にとっては使い勝手の良いやり方だったので、
積極的に使うことになりましたね。
そういう感じでXHTMLっていう流れを意識しながら、
21:09
既存のホームページ、サイトを修正をかけたり、
さっき言ったサーバーサイドインクルード、SSIを使って、
ページをよりシンプルに構成していく、パーツに分けていくっていう考え方ですね。
やっていましたが、さらに問題がありまして、
うちのホームページっていうのはECサイト的な部分も兼ねていて、
さっき言ったように商品を載せて、それが注文できる形になってたんですね。
今もなってるんですけどね、そのやり方今も使ってるんですけども、
そのためにホームページの初期の段階で、
地元のソフト屋さんにお願いして、買い物カゴのプログラムを作ってもらったんですね。
今は使ってない、本当にCGIって呼ばれる技術ですね。
買い物カゴ自体はJavaScriptで壁組んであって、
それをCGIプログラムに手渡して、それをメールでお客さんに自動返信メールを送ったり、
こちらの我々側に注文メールを送ったり、
いろんな入力したデータはサーバー上にCSVファイルとして保管したりといった、
一連のプログラムを作ってもらいました。
その買い物カゴが必要なんですけども、
その買い物カゴ、JavaScriptで書いてあるんですけども、
そのカゴがいろんな場所にあるんですね。
さっき言ったように、カテゴリーのトップページに商品がずらっと並んでいるところにも買い物カゴが表示されていますし、
その一段奥というか、商品詳細ページにも買い物カゴがついている。
一つの商品がいろんなカテゴリーに存在するとなると、それぞれに買い物カゴが必要なんですね。
そうすると、一つの商品の買い物カゴがいろんな場所に点在しているということになります。
24:01
それはそれで問題はないんですけども、
例えば品切れになりましたとか、あるいは値段が変わりましたといったときに、
一つの商品のあちこちに点在している買い物カゴを全部直して回らなきゃいけなくなるということになって、
3箇所は直したけど、1箇所直し忘れて値段が古いままだった、
みたいなことが発生するようになってきたんですね。
この話、まだ続きますね。
明日に続きたいと思います。
とりあえず、今日のところはここまでです。
最後までお聞きいただきましてありがとうございました。
ではまた。チュース。
