YoungYoung

オリジナル&芸能人(主にラルク)のイラストと、レビュー、日記などのごった煮サイト

diary larc

ハイド時計作りました


2013年ハイ誕企画サイトハイド時計[hyde-tokei]を作りました。(※現在PC版のみ(IE8以下未対応)、スマホだと多分表示が崩れます)
6/1追記:スマホ対応完了しました
ハイド時計
総勢114名の圧倒的なボリュームでお届けいたします。
ラルクサイト界隈で今までこれだけ規模感のある企画サイトは無かったんじゃないかと自負しております。
というか私もこれだけ参加していただけるとは思いもよらず嬉しい悲鳴でした。
中にはいつもTwitterでお見かけしてて「えっイラスト描けるなんて初めて聞いたわwwwちょwうめえwww」みたいな方がいらっしゃったりとかw(みなさんもっと描こうよ…)
hydeさんへの愛がつまっててすごい!
とはいえ、自分の力不足には本当に何度も頭を抱えましたが…(現在も継続中)
美人時計のhyde版っぽいものを作ろうというネタが頭の中に降ってきたのはHYDE48総選挙やってた時なのですが、タイミング的に誕生日合わせにした方がいいだろうと思い、10月に募集開始して3ヶ月半もあればサイト作れるだろ…って思ってたら甘かったです;
私の至らない部分は皆様の素晴らしいイラストで誤魔化されてるはず!多分!
ご参加くださった皆様、宣伝してくださった方々、見てくださった方々、本当にありがとうございました!
誕生日は終わっちゃいましたけど、サイトは継続してるんで気が向いたら見ていただければ幸いでございます。
あと追記にちょっとWEB制作的な話とか。


ハイド時計は仕事じゃあまり出来ないIE8以下を切り捨てるサイトの作りをやってみたいなぁというのもあって、時計の数字の大きさと角度はCSS3やWEBフォントバリバリ使ってます。
この動作をIE8対応したら、多分10倍ぐらい制作時間かかります。
それぐらいIEという存在はWEB制作者にとっては迷惑な存在でして、ぜひこの機会にブラウザはChromeかSafariかFirefoxに乗り換えていただければ幸いですw
で、今回何がハードルだったかというとJavaScript(jQuery)なんですが、一応WEBはプロとしてやってるものの、ほぼデザイン&コーディングのみなもんで、それまでに案件でJavaScriptいじることはあっても、自分で0から書くことはしてなかったんですね。
jQueryだったら、大体はどっかでプラグイン拾ってきて、セレクタとパラメータ書き換えられるぐらいの知識で組み込めちゃうんで。
時計数字はCSSでどうにかなったものの、今回参加人数が多いし全部のデータをページごとに用意したらとんでもない手間になるなぁじゃあ簡易データベース的なものから引っ張って表示するようにしよう、と思いついたのはいいんですが、JSONからデータを引っ張ってきて画像を1分で切り替えて次に行くという動作ができなくて、あっちこっちプラグインやサンプルコード拾っては試してはダメで、ぐぐっても見つからず、本を読んだら書いてあったーーー!みたいな遠回りを何度も繰り返しw
使えるプラグインは使ったんですが、JSON周りの処理に関してはほぼ自力で書いてます。
とりあえずこれが2ヶ月の勉強の成果です(´д`;)まだ未完成ですが
いろいろ手を加えてるうちに「うーんなんか表示が崩れる」「あれー動作がうまくいかない…」っていう部分が多く、プログラマの方だとそういう細かいノウハウの蓄積があるんでしょうが、ほぼ0からはじめたもんでえらい大変でした。
周りにJavaScriptについて聞ける人が誰ひとりいなくて、しょうがなく大学時代にプログラムをかじってた元同僚(就職してからはCGデザイナー)に聞いたりとか。WEB制作したこと無いのに巻き込んでえらいすみません。
大人の家庭教師のト○イに「JavaScript講座」ってのが欲しいw
多分プロから見たらありえないようなコード書いてるんだろうなーとおもいます(私も他人が書いたHTML見て思うことあるし)。
でもこれ以上どうしたらいいかわからん(;´Д`)
もし「もっとこうしたほうが処理が早くなるよ」「ここはこういう書き方のほうがコードが綺麗になるよ」というアドバイスがありましたら教えていただけると嬉しいです。

-diary, larc