自営業のヨメ、HTMLの海を泳ぎ切る

---

ブラウザの仕組みと違い

---

さて、これから「ブラウザハック」を行っていきます。

 

それに先立って、前回の記事の終わりでも少し触れましたが、

ブラウザハックとはなにか、もう一回ご説明しますね。

 

インターネットを見るには通常、「ブラウザ」と呼ばれるソフトを使います。

 

「InternetExplorer」や「GoogleChrome」、「FireFox」、「safari」などです。

 

ご自分のパソコンに何が入っているか、ご存知ですか？

 

多くの場合、インターネットを見るためのアイコンにソフトの名前が出ていますので、

見てみてください。

また、インターネットを開いた画面の上のバーに、こんな感じでソフト名が出ていたりもします。

 

 

これら各ブラウザは、開発している会社が違う、別々のソフト。

そのため、同じプログラムを読み込んでも、表示される時に違いが発生します。

 

また、同じソフトでもバージョンが違えば、

やはり表示のされかたが変わってきたりします。

 

「ブラウザハック」とは、この表示上の違いをなくすことです。

 

サイトをみる人が、どのソフトのどのバージョンを使っているかなんて、

制作側からは分かりませんし、どれを使えなどという指定もできませんよね。

 

そのためブラウザハックは、サイトを作るうえでとても・・・。

 

 

ムギ「ねえ、そのつっまんない話、まだ長い？」

 

 

・・・とても大切なことなのです。

 

---

さあ、ブラウザハックをやっていこう！

---

で、今回ワタシも、そのブラウザハックまでやらせてもらいました。

各ブラウザを合計して、12個程度のバグがあったように覚えています。

 

おおかたは、解決する技がネットに出てますので、地道に一つずつ潰すことができました。

 

だが、一つだけやっかいなブラウザがあります。

先ほどブラウザの例として上げた、InternetExplorer（以下、IE）。

 

画像に設定した表示上の効果が使えなかったり、表示される位置がずれたりなど、

かなり致命的なバグが生じます。

 

今回もっとも難関だったのが、Windows XPでIE8を使うというケース。

 

画像のフェードインやフェードアウト （何もないところからぼんやり現れたり、ぼんやり消えて行ったり） の際に、

画像に黒い「ふちどり」ができてしまのです。

 

きなこ「・・・」

 

専門用語がいっぱいで、きなこが固まっていますが、先を続けます。

 

 

このバグについて調べても、「これはお手上げだ」という先輩プログラマのお言葉ばかり見つかる。

これは諦めるしかないのでしょうか？

 

が、途中でふと気づいたのです。

 

画像のフェードイン・フェードアウトでは「ふちどり」ができてしまうが、

背景画像のフェードイン・フェードアウトでは、そんなことは発生していない。

（見た目では分かりませんが、プログラム上では、背景画像と通常の画像は扱いが違います。）

 

背景画像のフェードイン・フェードアウトは通常できないため、

前回の記事で触れた「プラグイン」を使用して行っていました。

 

これは・・・画像をぜんぶ背景画像として扱って、

プラグインでフェードインやフェードアウトをかければいいんじゃね？！

 

というわけで、急きょ画像部分のプログラムを全部書き直し。

やり方の良しあしはともかく、結果オーライの力技で切り抜けてしまいました。

 

他にもっとスマートな解決法がありましたら、どなたかどうぞ、ご教示ください・・・。

 

---

ついに解決！筋斗雲

---

そして、ブラウザハックをしている最中、いいことが一つ起こりました。

 

以前から解決できていなかったバグ、名付けて「筋斗雲現象」が解消されたのです！

 

解決してみれば、ごく簡単なことでした。

 

筋斗雲になってしまっている吹き出しのCSSの、

「position：fixed」を、「position：absolute」にすればよかった、

ただそれだけでした。

 

もも「あ・・・直っちゃったみたいだぞ」

 

はなこ「つまんないでしゅね～」

 

 

キミタチ、聞こえてますからね！

 

まぁいい。

これでようやく、人前に出せるサイトになったわけです！

 

---

そして完成へ。

---

7月12日。

 

私が任された部分のプログラムを完了し、ディレクターの奥村さんへ提出させていただきました。

 

この後は、デザイナーの石丸さんが、スマートフォンに対応したページを作成してくださいます。

 

2月にお話をいただき、3月からプログラムを開始。

そこから、一回石丸さんへバトンタッチした期間を除いて正味3か月、あっという間でした。

 

無我夢中でしたが、なんとかメンバーの待つ対岸まで泳ぎ切った！！！という感覚。

 

うまくレールを敷いてくださった奥村さんをはじめ、メンバーのみんながいなくては、

急流に流され、どこだか分からない岸に打ち上げられて終わりだったでしょう。

 

石丸さんの作業はさすがに早くて、サイトの公開は4日後の7月16日となりました。

 

 

晴れて公開されたLinableのサイト、こちらです！

 

【女性の家庭と仕事の両立をサポート：Linable】　http://linable.jp/linable/

 

改めてみると、ワタシ、よくやった・・・。みなさん、是非見て下さいね！

 

毎日自分のPCで見てきたサイトが、きちんとしたURLを持って公開されてるのを見て、

あらまあ、ウチのコこんなところにいるわ、という感じです。

 

みこみこ「なんとか形になって、吾輩もひと安心だ」

 

うん、みこみこ、ありがとう！

 

---

戦い終わって、ちょっと寸感

---

今回、本当に初心者の段階から、サイト作成に携わらせていただきました。

 

振り返ってみれば、あんなに右も左も分からなかったワタシが、

一つの仕事を完成させたわけです。

 

ブログには書きませんでしたが、途中、

はなこが病気で数日吐き続けたりするアクシデントもありました。

 

そんな時、この在宅ワークという形には本当に助けられました。

仕事をしながらも様子を見てあげられるわけですから、

こんなに安心なことはありません。

 

スキル面では、まだまだ初心者に毛が生えた程度、

覚えることはたくさんあります。

 

ですが、こうやって家族を大切にしながら、

少しずつ前進していくことができる環境は、

本当に恵まれていると思います。

 

これからも、どたばたしながら仕事をしていくと思いますが、

メンバーやみこみこたちに見守られながら、頑張ります！