「これまでの実績」カテゴリーアーカイブ

Pure CSS Cat

2年前にCSSのみで作った猫のアニメーションです。新しくなったWordPress5.0のエディタで書けるのか実験がてら。

このシリーズ作りたかったけど、もう2年も経つのかー。耳にマウスカーソルを当てるとぴこぴこするとか、そういうの作るのも楽しいです。

僕が初めて作った2000年のサイトをみてみる

僕が初めて作ったWEBサイトがハードディスクの中でみつかりました。今から15年前です。

ゲーム会社を辞めて暇になった時にインターネットの仕事をしたいと思って作った僕のホームページです。といっても人見知りな僕は転職活動先でもほとんど人に見せることもなく、メモ帳か何かでHTMLファイルを更新して、FTPでアップロードしてました。

これを今サーバーにおいて見られる状態にしようとしたらけっこう大変で、それがWEBサイトの歴史を感じさせてくれたので半ば黒歴史ではありますが見てみたいと思います。

スクリーンショット 2014-11-13 3.35.10ヤングルWEB

拡張子が.shtml だってSSIが使いたかったんだもん

001
まさかのshtml。拡張子変えずにそのままにしてますがちゃんと見えてますでしょうか。shtmlというのはSSIを使うための拡張子です。SSIって今では多分使う人いないと思います。

このようなコメントをbodyタグの中に記述すればその箇所にinclude.htmlの中身を入れたhtmlをレスポンスします。つまりHTML中にCGI的な処理を入れられるということです。

サーバーにあるプログラムを実行できたり、強力なSSIですが背景枠を1つのファイルにして更新が楽になるように使っていました。その後、DreamWerberにテンプレート機能がついたのでそれを使うようになりました。PHPが使えるならそっちがいいですね。

今でもSSIは使えるのかもしれませんがサーバー設定するのも面倒なのでとりあえず直接HTMLに書くように変えました。

DHTMLによるアニメーション 今は無きLAYERタグ

このサイトの特徴は背景の雲の多重スクロールでした。これを実現するため、DHTMLのLAYERタグを使っています。雲は左ぎりぎりまで流れたらまた元の位置に戻ることで無限ループにしているのですが、そういった動きが見えないよう画面全体をiframeで囲っています。

002

LAYERタグはNetscape6から非対応になりました。今ではDIVにz-indexスタイルシート属性をつければ同じことができます。LAYERタグはやめて、jqueryでleftの位置を操作するように変えました。

iframeはSEO観点から時代遅れと言われる時代もありましたが、とっても便利なので今も全体フレーム以外では良く使われていますね。

大文字小文字の区別なし

サーバーにあげてみると、ローカルでは見えていたものがNotFoundになっているものが多くありました。小文字で指定しているファイルが大文字ファイル名になっていたためです。昔はUnixを知らず大文字小文字を区別しないファイルシステム環境にいたので、気にしなかったのでしょうか。HTMLタグもこの頃は大文字でした。それから属性名は小文字、みたいな意味不明な時期があって、現在では全て小文字でタグを書いています。

InternetExplorerとNetscapeで処理を分ける

このブラウザ判定コードがあちこちで使われていました。MicroSoft Internet ExplorerとNetScape Navigatorで挙動を変えていたのです。

当時は文字コードによる文字化けと、IEとNNが2強ブラウザで互換性がないのが最大の悩みでしたね。

15年の時を経て

まだHTMLの勉強すら始めたばかりでいきなりDHTMLやらJavascriptやら使ってインタラクティブなものを作ろうとしている自分に驚いたりするのですが、それが当時の普通だった気もします。すごいサイト、新しい技術が今に至るまで目まぐるしく生まれましたね。少しでも追いつきたくて、ただ自分を発信したくて、やってたこと、当時やりたくて出来なかったこと、変わらず続けていきたいと思ったのでした。

レスポンシブウェブデザインのコーディングを担当したサイトリリース

tamasyu

おもっさまミカメジャーナルにも協力していただいているデザイナーのサイトがリニューアルされました。今回コーディングを担当しました。

これまでもこのサイトはFlashでかなり動きのあるおもしろいサイトだったのですが、今回はスマートフォンやipadにも対応させるためシンプルにいくということで、どの画面サイズ、比率でも対応できるようレスポンシブウェブデザインにしました。

http://tamasyu.com

【お仕事】みんなの絵文字

携帯用サイト。メール文中に入れる20×20の絵文字を投稿、ダウンロードできるサイト。絵文字180万個以上登録されている巨大サイトです。

これは基本機能ができている状態から引き継ぎました。QRコードメーカーやら顔認識を使った絵文字生成など、いろいろな機能追加を行いました。

みんなの絵文字※携帯でみてください

【お仕事】FlowerFlower


2007年。花の卸売り業者さんのBtoB(小売店向け販売)サイト。

フリーになって最初にやったのが商品管理システムで、次がこの販売サイトです。システム面はサーバーの選定から始まり、データベースの構築、ユーザー画面、管理画面、裏の店舗システムとの繋ぎ込みまで一通りやりました。
その年のWEB年鑑にも私の名前が載っています。

ありがたいことにFlowerFlowerの運営元である株式会社フローラルコレクションさまとは今も取引させていただいており、サイトも継続されています。

FlowerFlower