成長記

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

The following two tabs change content below.

萩原 由紀

産業カウンセラー、第一種衛生管理者。 前夫との離婚をきっかけに、人材派遣業の世界へ飛び込んだインドア女。営業としてキャリアを積み支店管理者まで勤めたが、再婚を機に、自営業の夫を手伝うか自分のキャリアを追求するか迷い、思い切って退職。Webのスキルを学ぶ。現在は、ある組織に勤めシステム管理と衛生管理を兼任する傍ら、フリーランスとしても自宅で仕事をしている。

ブラウザの仕組みと違い


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

 

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

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

 

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

 

「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を持って公開されてるのを見て、

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

 

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

 

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

 


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


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

 

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

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

 

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

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

 

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

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

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

 

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

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

 

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

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

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

 

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

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

-成長記

執筆者:

関連記事

ところで、サンスウって何?

ときにはハードル走のように

The following two tabs change content below.この記事を書いた人最新の記事 萩原 由紀 産業カウンセラー、第一種衛生管理者。 前夫との離婚をきっかけに、人材派 …

ブログはじめました。

自営業のヨメ、HTMLの海へ初ダイブ。

The following two tabs change content below.この記事を書いた人最新の記事 萩原 由紀 産業カウンセラー、第一種衛生管理者。 前夫との離婚をきっかけに、人材派 …

あたくし、意外と色んなこと知っててよ。

いよいよ直面!プログラミングの激流

The following two tabs change content below.この記事を書いた人最新の記事 萩原 由紀 産業カウンセラー、第一種衛生管理者。 前夫との離婚をきっかけに、人材派 …

素知らぬ顔してますけど、ももとはなこ、めっちゃ邪魔。

サイトはどうやら「動く」らしい

The following two tabs change content below.この記事を書いた人最新の記事 萩原 由紀 産業カウンセラー、第一種衛生管理者。 前夫との離婚をきっかけに、人材派 …

はな、焦ってる飼い主がスキでしゅよ♪

初めてのHTML&CSS

The following two tabs change content below.この記事を書いた人最新の記事 萩原 由紀 産業カウンセラー、第一種衛生管理者。 前夫との離婚をきっかけに、人材派 …