個展告知サイトの制作で、やってみたこと
DMに先駆けて、個展の告知Webサイトを作りました。
展示のことについては、告知サイトをご覧いただくとして、この記事ではサイトを作るにあたって、やってみたかったことを、タラタラと書いてみようと思います。
「いかにもTwitter Bootstrapをつかいましたっ！」という急造感漂うデザインからお察しのとおり、手を抜くところは手を抜いております、便利に頼りまくった私のWeb制作の実態をご紹介できればと思います。
おしながき
Twitter Bootstrapでレスポンシブデザイン
そもそも、Twitter Bootstrapとは、Twitterの人が作った、簡単にTwitter風のかっちょいいサイトを作ることができるテンプレートです。デバイス（画面）によって見せ方が変わる、レスポンシブデザインもつくれます。
どうしてTwitter Bootstrapを使いたかったのかいうと、綺麗なカラム分割が簡単にできるだけでなく、レスポンシブデザインにして、スマートフォンでも見やすいようにしたかったのです。DM、または、スマホでサイトを見ながら来てもらえたらいいな〜と。
レスポンシブデザインは、簡単に言うと画面の幅に合わせた設計が必要なゆえ、イチから作ると時間がかかりすぎるので、これ活用して感覚をつかもうと。
Firefoxの「レスポンシブデザインビュー」便利
デザインに、それなりに自分の味も入れたいので、CSSもすこしさわりました。Firefoxの開発ツールにある、「レスポンシブデザインビュー」機能のなんという便利なこと！ブラウザ上でいろんな画面サイズの見え方が検証できます。
おかげで、スマートフォンでみたときに、こんな実験的な見せ方も試せました。
ヘッダーが横向きのままスマホサイズにすると貧弱になるんですもの。
Facebookアルバムの写真入れたかった
私はサボってないアピール「制作日記」と称して、自分のFacebookの公開アルバムに制作の様子を写真付きで公開しています。私のフレンドにとってはいささか暴力的な宣伝方法です。なぜFacebookページをつくらなかったのかというと「いいね！」を誰も押してくれないと思って……。
公開アルバムはFBのアカウントなくても見られるし、うまいことすればサイトに一覧表示とかできるんじゃね？と思って調べると、大変だということが発覚。
FBユーザーの、誕生日はいつで、友達は誰々とか写真はどこで撮った、いいね押してるのは誰々……などの情報を取得することができる、グラフAPIというのがありまして、ユーザー個人の情報を取得するには、認証(有効なアクセストークンを取得する)が必要なのだそうで……。
いうても自分のデータなので、Graph APIエクスプローラでごそごそしてみたら、制作日記のアルバムのことがJSONで吐き出される！おおおっ！…というところまでたどり着いたのは良いですが、これをどうやってサイトに使うよ、というところで頭が爆発。
ネタバレ嫌いな人もいるしね☆と、勝手に言い訳して諦めました。
いくら公開情報とはいえ、知らないサイトに勝手に個人データを使われるのも気持ち悪いですもんね。FBページ作ればよかった。
Google先生さまさま…Webフォントと地図
欧文は、Google Web Fontsを使ってみました。欧文テキストをドラッグしてみてください。画像じゃなくてテキストだから。
タダで使える500種類以上の書体をホスティングしてくださるGoogleさまのサービスです。今はなくなっているのですが、DESIGN EASTのサイトがこれを使って、テキストの書体が、Google Web Fontsすべての書体の中からランダムで変わるという、の面白い見せ方をされていました。
Googleつながりでついでに。
地図も入れてみたのですが、下記のサイトを読むといろんなことができるみたいです。色も変えたりできるんやな…。Google MAP APIとは奥が深すぎる世界でございます。
Lopan.jp「Googleマップをイラストマップみたいにしたい。」
忍者おまとめボタン
サイトを公開する間際に「そういえば、いいねボタンとか置かなあかんな…めんど…」と思っていたら、なんとSNSのいいね系ボタンを一気に置けてしまうサービスをツイッターで見つけました。
「忍者おまとめボタン」というサービス。
置きたいボタンを選んで、取得したコードをはりつけると、ボタンがじゃじゃんと一列に並びます！ページロード時のアドレスバーのURLのいいね数が出るようになってるようです。
忍者ツールズの広告表示（手裏剣のボタン）が出てしまうので、お仕事では難しいかもしれませんが、急造サイトにはぴったりかもしれません。
っていうか、忍者ツールズにおせわになるの、まだGoogle Analyticsもなく無料アクセス解析ツールがすくなかった、学生のとき以来やわ…
