カテゴリー「その他」の一覧

cssのみのロールオーバーをなるべく手抜k…短く書きたい。

2008.11.4 火曜日

個人的メモ

メニューとかをcssのみでロールオーバーさせる処理、
キチンと書くとcssのコードがかなり長くなるので、どこまで削っても平気かなぁと。

メニューバー用画像
とりあえず、こんな画像を用意。
cssのみではプリロードができないんで、ロールオーバー後の画像も全部繋げておいて、cssで位置ずらしながら表示。

  1. <ul id="sample_menu">
  2. <li><a href="#" id="sample_menu01" class="selected">メニュー1</a></li>
  3. <li><a href="#" id="sample_menu02">メニュー2</a></li>
  4. <li><a href="#" id="sample_menu03">メニュー3</a></li>
  5. <li><a href="#" id="sample_menu04">メニュー4</a></li>
  6. </ul>

HTML

  1. #sample_menu {
  2.     width: 320px;
  3.     height: 20px;
  4. }
  5. #sample_menu li {
  6.     width: 80px;
  7.     height: 20px;
  8.     float: left;
  9.     list-style:none;
  10. }

UL LIタグのスタイル。
サンプル用なので結構いい加減。

  1. #sample_menu li a {
  2.     width: 80px;
  3.     height: 0px;
  4.     display: block;
  5.     padding-top:20px;
  6.     overflow:hidden;
  7.     background-image: url(img/bar.png);
  8.     background-repeat: no-repeat;
  9. }

Aタグのスタイル。
どうせ共通になる部分はこっちでまとめて書いて継承させる。
画像置換は、以前は「text-indent: -9999px;」とか使う事が多かったけど、
SEO的にどうよ?ってことで、今はこれ。
heightを0にして、高さ分のmargin-topを指定して文字を押しだし、「overflow: hidden;」で隠してる。

  1. a#sample_menu01 {
  2.     background-position: 0px 0px;
  3. }
  4. /* ロールオーバー時は画像を上に20ピクセルずらす */
  5. a#sample_menu01:hover {
  6.     background-position: 0px -20px;
  7. }
  8. /* class:selected時は画像を上に40ピクセルずらす */
  9. a#sample_menu01.selected, a#sample_menu01.selected:hover {
  10.     background-position: 0px -40px;
  11. }

メニューの個別スタイル。
背景画像の位置を指定するだけ。
これを、background-positionの数値を変えながらメニューの数ぶん記述。

動作サンプル

上のコードでこんな感じに。
今のところ手元のブラウザでは問題なさげ。

蒟蒻畑

2008.10.22 水曜日

現在の我が家の冷凍庫。

とても…マンナンライフです…。

ブログが巻き戻りました…。

2008.8.5 火曜日

えーっと。
このブログを入れているサーバ、ホスティングしてる物を分割して、色々なとこで使ってたりするのですが、
なんと不正侵入された為、急遽再セットアップすることに。

まぁ、かなり前から使ってる物なのでOSも古いし…。
RedHat7.3だったので、色々入れるのに四苦八苦した記憶があります。

そんなわけで、諸々バックアップを取った後、ホスティング業者さんが再セットアップ作業を行うことになり、
それが先ほど完了したので、各サイトを元に戻している段階なのですが…。

……

このサイト用のMySQLのバックアップ忘れた…。

orz

幸い、7/末頃のバックアップがあったので、それを使って戻しましたが、
ここ最近の数件分のデータが巻き戻っちゃいました。

何書いたっけ…。
手元にテキストで残しておけばよかったなぁ…。

この間で記憶に残ってるタイトル(というかそれなりにアクセスがあった物)は、
・よく使うJS ロールオーバー
・jQueryでBlackBox風コンテキストメニュー(右クリックメニュー)

あたりでしょうか。

今見てみたらロールオーバーの記事はGoogleのキャッシュで発見。
BlackBoxの方は修正箇所あるからそれ直したらまた改めて記事にしますかね…。

First Agentを振り返ってみる

2008.6.25 水曜日

デスマーチ状態の途中、
大人の事情でちょっと納期が延びて、若干余裕ができるも、
会社に篭もってたし、特に新しいネタもないので、駄文を書いてみたり。

昔、First Agentというブラウザゲームを運営してて、
思えばそれが、この道(web開発)に進んだ一番のきっかけになったなぁ、とふと思い返してみる。

どんな物か、というと、
パーツや武器を買ってロボットを組み立てて、他の人と対戦させて得た賞金でまたパーツを買い換えて…みたいな流れ。
で、勝つと名声が増えていってランクが上がったり、ランキングに載ったり。
全部PerlのCGIだったので、ゲーム画面は全部HTMLで、戦闘シーンとかもテキストベース。

今からしてみれば非常にお粗末なCGIゲームなんだけど、
やり始めた当時はネットゲームなんて物は全然広まって無くて、
ネットゲームと言えばPBeM(メールのやりとりで進行するゲーム)とか、CGIで行動を入力して、一定期間でサイト上に行動結果が更新されるような物とか、そういった物が多かった。
まだアナログ56kのテレホ全盛の頃だったし、今で言うオンラインゲームのような物はまだ黎明期、UltimaOnlineが出たばっかり、くらいだったかな…?

そんな状態だったので、割と受け入れて貰えたようで、思った以上に多数の人に遊んで貰えて、
一時期、雑誌に載ったり、2chのネットゲーム板にスレが立ったりしてて、ビックリした記憶が。
何度もサーバ落として、レンタルサーバを移転しつづけて、最終的には専用サーバを建ててしまったり…。

最初、運営し始めたときは、まだwebとは全然関係ない仕事をしてて(車のディーラーの営業)
完全に素人でした…。

CGI(Perl)も覚え立て、というか、それを作るために覚えた、といった感じ。

最初、webの事とか全然分からない状態で、PBeMのようなサイトをやり始めて、
もうちょっとリアルタイム性が欲しいなぁ、とか思い始めて、
そういえば、掲示板とかあるけど、どういう仕組みになってるんだろう、と思って調べてみたら、CGIの存在を知って、
「CGIなんてあるんだ、面白そう!」とか思って、
あちこちで配布してる掲示板スクリプトとかを落としてきて改造してみたりしつつ、徐々に覚えながら組み立ててみたのが上記のFirst Agent。

当時は(美大に行ってた影響で)Macしか持ってなかったので、
MacのSimple TextでCGIもHTMLも全部やってた…今思うと根性あったなぁ(笑
営業の仕事って拘束時間長いので(今はもっと長いかも!)夜な夜な寝る時間削ってコツコツやってました。

一通り完成後、テストプレイ公開して、いくつか宣伝してみたら、口コミなのか徐々に人が増えてきて、
そこで思ったのが「webって面白い!」
自分の作った物に不特定多数の人が集まってくる、という事にもの凄く感動したのを今でも覚えてる。

その後暫くして、営業の仕事を退職。
元々学生時代は車にはまっていて、その影響で進んだ仕事で、
営業という仕事は社会的な事も沢山学べるし、得る物も沢山あったんだけど、
自分がやりたいこととは違う、と強く思うようになっていて、
恐らく、この頃にはもう、webの世界に行こうと思い始めていたんだと思う。

退職して暫く時間が出来たので、仕事を探しつつ、新たにCGIの事を勉強して、
First Agentの方もアップデートしたりしながら数ヶ月。
ネットの求人により、今の会社と出会い、入社。

当時はまだ、開発に進みたい、とかまでは考えていなくて、
漠然と「何かを創る仕事をしたい」と思ってたので、特に部署の希望とかは無かったんだけど、
面接の際、作品持参とあったので、FirstAgentの画面見せて、
「こんなサイトを運営しています」
といくつか動くところを見せてみたら、どうやらシステム部に決まったらしく(笑

CGIを囓った程度の、限りなく素人に近いシステム部員となり、
分からないことだらけだったのでとにかく必死に勉強。

勉強して覚えたことはFirstAgentに反映されて、
逆に、FirstAgentで新しいこと試してみて、それが仕事に反映されたり。
しばらくはFirstAgentと仕事の二人三脚状態。

最初のスタート時
So-net(当時のプロバイダ)のレンタルサーバでCGI+データはテキストファイル(掲示板の延長)
ここのサーバはSolarisで(当時は分からなかったけど)、何故か排他処理しててもファイルがよく飛んだ…

自己ドメイン取得(今も使ってるmaro-z.com)
自己ドメインとCGIが使えるレンタルサーバを借りてCGI+テキストファイル
月\5000、当時の相場かな…?

ここで転職

ネットゲーム制作者メーリングリストみたいなのに参加するようになって、
そこの人が借りた専用サーバを間借りさせて貰えることになり、移転
DBの扱い覚えたので、リニューアルがてら、CGI+PostgreSQLに。
頻繁にサーバ落としてしまい、申し訳なさ過ぎたので早々に移転を考えてた…。

Linuxサーバの構築を覚えたので、専用サーバを借りることを決意
CGI+PostgreSQL
AT-LINKで月\30450
少々痛かったけど、車いじりをしなくなったので、パーツ代とかに使ってた分を回した感じ。

んで、新たにPHP+MySQLで組み直してたんだけど、
色々とあって一旦更新を停止。
サイト自体は残ってたけどそのまま廃墟と化してしまい…。

何度か再開を計画するも、頓挫してしまってます。
数年前に一度TOPをリニューアルして、開発も進めてたら、
当時、(休止から数年経ってたのに)まだ覚えてくれてたユーザーさんが次々と訪問してくれて、それもまた感動でした。

それも暗礁に乗り上げて、ずっと止まってしまっていて、
変に期待させてしまって申し訳なかったなぁ…と…。

でも未だに、色々考えてみたり作ってみたりはしてはいます。
折角だからまたwebを使って何か面白いことやりたいし!

ちと長くなったので、また次回にでも。

取り急ぎ。

2008.6.3 火曜日

まだカスタマイズ途中な感じだったけど、
なかなか時間が取れず作業が進まない間にドンドンネタが流れて行くので、取り急ぎ開設。

仕事で、Movable TypeのカスタマイズでのblogやCMSなんかの話もまだまだ多いので、
備忘録がてら自分のサイトもMTのblogにしちゃうか、色々変わったことも試せるし、みたいな事を考えてインストールしてみたけど、

とりあえず、このサーバじゃすんごく重い…。
管理画面表示するのに10秒くらい待たないといけないほど。
これじゃ使い物にならない、ってことで、mod_perlで高速化したりして、かろうじて使用に耐えるかな…というレベルにはなったんだけど、なんだかしっくりいかず、
カスタマイズも色々と手間がかかるし、一旦保留。
「そういや、まだWordPressってまだ手を出してないなぁ」
と言うことで急遽WordPressに変更。
こちらは、PHPベースで、シンプルな分カスタマイズもしやすい感じ。
PHPソースを直接触ってカスタマイズするので、開発者な人には凄くいいかもしれない。

まだ作業途中でソースとか汚いけど、一応必要最低限な機能は揃ったので、後は追々。
あとは、三日坊主病の発病に気をつけないと。