読者です 読者をやめる 読者になる 読者になる

さかがみのブログ

HTMLコーダーが文句ばっかりぐちぐちぐちぐち言う日記です。

個展告知サイトの制作で、やってみたこと

 DMに先駆けて、個展の告知Webサイトを作りました。

「透明な心」坂上 綾 絵と言葉の展覧会

展示のことについては、告知サイトをご覧いただくとして、この記事ではサイトを作るにあたって、やってみたかったことを、タラタラと書いてみようと思います。
「いかにもTwitter Bootstrapをつかいましたっ!」という急造感漂うデザインからお察しのとおり、手を抜くところは手を抜いております、便利に頼りまくった私のWeb制作の実態をご紹介できればと思います。

おしながき

  • Twitter Bootstrapでレスポンシブデザイン
  • Facebookアルバムの写真入れたかった
  • Google先生さまさま…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もなく無料アクセス解析ツールがすくなかった、学生のとき以来やわ…