Webサイトを作らせて頂きました。

高校の先輩の個人サイトを作らせて頂きました。

http://edgar-tokyo.com/

デザイン原案：先輩　コーディング：私　という感じでしょうか。

今回はjQueryをふんだんに？使用しました。使わせて頂いたプラグインは以下。


１、横からにゅーって出てくるメールフォーム
Contactable
つい最近まで「使えねーよ！」って作者のフォーラムに多数意見が来てたのですが、どうにか使えるようになった模様。
ただ、フォーラムを眺めているとセキュリティ的にはちょと心配な様です。たぶんコーポレートサイトには使えないな〜
※もし作動しない人がいたら、jquery.contactable.js内のmail.phpへのリンクをhttpからフルパスで指定するとちゃんとメールが送れると思います。僕はここで躓いて何時まで経ってもメール送信エラーが出ました。

２、ウィンドウサイズに合わせてサイズが変わる背景スライドショー

maximage

最初先輩と打ち合わせをしたときに「背景画像が変わるといいよね〜」とのご要望があったので調べてみたらヒットしたプラグイン。どうも記述の順番に気を付けないとContactableや次のタブメニューが消えたり、ウィンドウサイズに適合してくれなかったりとエラーがあったのですが、どうにか解決。

３、タブメニュー
タブメニューボックス
背景がスライドショーってことなので、ページ遷移があったら意味ないなあ→タブメニューでいくか、で探したプラグイン。
これをサイトの内容に合わせるのが一番苦労した。サイトの中身によってローディングが引っ張られるのが少々不安だけど、今のところは大丈夫そう。

４，Youtubeの表示
lightpop
よくあるLightbox系のプラグイン。
更新は僕ではなくて先輩自身が行うので、なるべく簡単に済むように組んであります。
lightpopはYoutubeへのリンクタグを記述すれば自動的に効果を付けてくれるので、とても便利です。


ちなみにiPhoneからアクセスするとiPhone版に飛びます。たぶんAndroid端末でアクセスしても大丈夫なハズです。
ダイレクトリンクは http://edgar-tokyo.com/i/ PCで見てもあまり意味はないですが。。
初めてiPhone対応サイト作ったので、ちょっと遊んでみました。PCのブラウザみたいにHTML5とCSS3対応が〜とか心配しなくていいのがラクですね。
text-shadow重ねがけが個人的にHitでした。これは面白いことができる予感がします。
地味な工夫としては、トップページ下にあるメールのアイコンに気付いてもらいたかったので、ちょうどギリギリ見える位置にハートマークを配置しました。ちょっとしたアクセントとして機能してくれたんじゃないかと思います。メールアイコンの上にくると可愛いしね笑
あと些細なことですが、ロゴ下のミニ更新履歴はタッチすることでNewsに飛びます。

逆に未解決な部分は、公開されているGoogleカレンダーのスマートフォン版ってアクセスできるのかな？ということ。今のままだとPC版に飛んじゃうんだけど、自分のアカウントからアクセスするみたいに公開カレンダーに飛ばすことってできないのですかね〜。それが不満です。

なお、iPhone版サイトの作成はこの本を参考にさせて頂きました。

この本はとっても読みやすく、且つとても参考になりました。初歩的なことから実践的なテクニックまでと勉強になります。ちなみにiPad版もあって、そっちはなんと書籍版の半額です（泣き笑い）

いやしかし、久しぶりのWebサイト作りでした。高校生以来？
大学ではCSSとか知らねーよで通してたので、とても勉強になりました。ソース的にはまだまだ未熟な内容なので、もっと効率化は図れると思われ。
一気にHTML5&CSS3も勉強できたのは大きかったなあ。いやあ面白い面白い。そのままの勢いで自分のサイトも作れたし笑
なにより、先輩との打ち合わせは本当に楽しかったです。先輩自身デザインの知識がある方なので（まさか高校の先輩とディーター・ラムスの展覧会に一緒に行くとは思ってもみなかった笑）要望も的確だし、こちらの意図も理解してくださるしで、スムーズに事が運べました。
また何かの縁でご一緒できると嬉しいです〜