BULANCO log: Web制作実務: January 2008アーカイブ

Web制作実務: January 2008アーカイブ

ピクチャ 1.png
先日、2008年1月26日(土)に開催されたイベントWeb Barbarians Conference 2008に参加して来ました。実にすばらしい内容で、13:00ごろ家を出て、帰ってきたのが、日付が変わって夜中1:00だったので、約12時間のイベントでしたが、飽きること無く楽しむことが出来ました。

本当に、企画運営された方々には感謝感謝です。

「Web Barbarians Conference 2008」はとにかく終わった

【ビッグなイベント】みなさんの優しさでなんとか無事に終了しました。

【WBC2008】福岡で働くWebの人々(FWW)



当日は、セッションA(有料2000円)とセッションB(無料)に分かれて2会場でセミナーが行われていました。セッションAは東京からのビックゲスト(AdobeやAppleなど)がメインでお話しされていたようです。

私は、セッションBではじめに行われた「グローバル戦略-地方から世界へ-Ruby ビジネス・コモンズ」が聞きたくて、まずはセッションBと思い参加しましたが、結局そのままずっとセッションBにいました。

別にお金が払いたく無かった訳ではないですよ!(笑)


では、ざっくりと、参加したセミナーの感想などを、忘れないうちにメモっておきます。

lightview.jpg

MovableTypeにLightviewを導入したので、記録しておきます。

20070228136.jpg20070321334.jpgP2201068.jpg

Lightviewは、Lightbox系の画像表示のライブラリですが、先日導入記録を書いたThickboxよりも、随分重くなると思います。内訳は、prototype.js(120k)使うライブラリの為、jquiry.jsに比べると、随分にヘビーになります。

ただ、thickbox.jsとは、違いかなりリッチに出来ています。

エフェクトがスムーズで美しく、角丸やスライドーショーなど、機能が盛りだくさんです。
オプションも多数用意させれていますので、エフェクトが好きで、色々といじりたい人向けのライブラリと思います。

では、インストールmemoです。

手順

ここから、Lightviewをダウンロードする。
zipファイルを展開し各ファイルを自分の環境に合わせてアップロード。
その時に、lightview.jsの40行目あたりの、imageへのパスを書き換える必要がある場合があります。

ここから、prototype.js(ver1.6)をダウンロードし、アップロード

ここから、scriptaculous.jsをダウンロードし
展開し、srcフォルダに入っている、scriptaculous.jsとeffects.jsをアップロード


MTのテンプレートファイルに以下コードを記入。
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>css/lightview.css" />
<script type='text/javascript' src='<$MTBlogURL$>js/prototype.js'></script>
<script type='text/javascript' src='<$MTBlogURL$>js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='<$MTBlogURL$>js/lightview.js'></script>


再構築

Lightviewで表示させたい画像のaタグにrel="lightview"と記入する。表示時にタイトルを表示させたい時は、title="ここにタイトル"を挿入する。


導入momeは以上です。

ここからはMovableTypleのコアをいじっているので注意が必要です。




20080106544.jpg
ThicBoxを導入してみました。(画像は内容とは関係ありません)

参考にしたサイトは

同等機能の元祖ライブラリに、LightBoxというものもあります。
ThickBoxとの違いは、
  • LightBoxは開くときにちょっとしたアニメーション付き。(ThickBoxはない)
  • ThickBoxはhtmlなんかも開ける。


(1/23追記:現在は、このThickBoxを使用しておりません。)
XREAの上位サービス、CORESERVERへサーバーを移転しました。
サーバー側に用意された、「サーバー間コピー」機能を使って割とあっさりと移転できました。サーバー容量が15Gもあるので、色々と無駄使い出来そうで楽しみです。

おかげでメールも、IMAPに切り替えることが出来ました。

IMAPとは(ウィキペディア)
POP はユーザが利用中のサーバからクライアントにメールをダウンロードし、ダウンロードがすんだメールはサーバから削除することを標準的な利用形態とするのに対し、IMAP はメールをメールサーバ上に保存したまま管理する(RFC 1733 参照)。この特性により、複数のコンピュータからメールを読む場合にメールの未読状態等の属性やメールフォルダの構成等が一元的に管理できる利点がある。
つまり、複数のPCでメールをチェックするときに便利ってことです。ただ、メールを受けた後もサーバーにメールが残ったままなので、サーバーの容量は食います。今回15G になったお陰で、全然問題なく使えそうです。


ついでに、ブログもWordPressからMovableTypeに。テンプレートは、そのうちいじります。しばらくは、デフォルトのままで勘弁して下さい。


WordPressからMovableTypeにデータを移しています。

WordPressの[管理]>[エクスポート]から、xml形式で書き出して、MovableTypeの[システムメニュー]>[ツール]>[インポート]で移行しました。

ただ、改行がされずに、だらだら長いエントリーになってしまいました。
ネットで色々と調べてみましたが、有効な手だてが見つからなかったので、とりあえず、最近の記事は、改行を入れ直しました。過去の記事は・・・その内やりますとも、、、

また、タグの移行されませんでした。これは、良い機会なのでタグの整理がてら手作業で移行していこうと思っています。

でも、イメージとかはMTが自動でダウンロードして指定フォルダーにアップロードしてくれるので、この点は◎でした。
これは間違っていました。イメージは元の場所からの引用でした。

こういうツールって大抵万能ではないので、どの程度で妥協するかによるんですよね。改行が消えるのは、結構痛手ですが、私はギリギリで妥協出来そうです。


cafe7map_s.gif

今日は、お仕事で地図を描きました。ちょっと変わった感じに仕上げたので、結構時間が掛かってしまいました。もっと修行せねば・・・。

Web制作という仕事がら、よく地図を描かせて頂くのですが、地図を描くのって意外に難しいですよね。そこで今日は、Web用の地図を描くときに、私なりに注意していることを、自分自身の再確認の意味も込めて記しておきます。また手書きの地図を描いて人に渡すときなんかにも応用できると思うので、是非試してみて下さい。

北を上に描く。

これは基本ですが、多くの地図は、北が上に描かれています。真上にはならないことがありますが、出来るだけ北を上にして描きます。 建築図面なんかも、かなり多くの場合北が上に描かれます。意図的にやる場合はありかもしれませんが、特に大きな理由が無い限り、北を上の方に向けた描く方が無難でしょう。

まず、最寄りの駅(大きな目印)を描く。

道から描き出すと、最寄りの駅が入らなくなる可能性があるので、まず駅を配置します。また駅がない場合は、バス停を。また車で来られることを想定している場合は、国道や高速道路の降り口などを描きましょう。

目的地は地図の真ん中の必要はない。

一番目立たせたい目的地は、地図の真ん中に描きたくなるものですが、必ずしも真ん中におく必要はありません。真ん中ではなくても、目立たせる工夫を行えば、端の方に持ってきても、そう問題ではありません。

緩やかなカーブなどは、直線道路として描く。

地図上で見て、緩やかにカーブしている道を、その通りカーブして描くと、分かりにくくなることがあります。緩やかなカーブは、実際に通ってみるとまっすぐとしか、認識していることが多いので、思い切って直線道路として描きましょう。

ただ、明らかに曲がっている道は、 カーブとして描くべきです。

最寄りの駅(大きな目印)からの分かりやすい経路を想定する。

オリジナルの地図の大きな目的は、分かりやすい道のプレゼンです。分かりにくい近道よりも、少々遠回りでも分かりやすい道を想定しましょう。

想定した経路の曲がり角に目印を描く。

想定した経路の曲がり角に目印を見つけ、それを描きましょう。必要以上に目印を描いてしまうと、混乱を招き、かえって分かりにくい地図になってしまいます。極力少なく、かつ分かりやすい目印で目的地まで導きましょう。

大きな建物やコンビニやファーストフード店を描く。

曲がり角の目印のみ描いてしまうと、目立つ大きな建物や、コンビニや、ファーストフード店の近くを通ったときに、地図上に無く、道を間違ったのではないかと不安になるものです。その為、明らかに目立つ目印は、曲がり角になくても描くようにしましょう。

また、遠方から来ている人へ、その土地にしかない、お店やビルの名前を書くよりも、コンビニやファーストフード店などの知名度が高いものを描く方が、大きな目印になります。

無駄なものを描かない。

オリジナルの地図は、地図自体のポテンシャルから言えばGoogleMapに適いません。最近では、GoogleMapAPIなどを利用すれば、お手軽に自分のWebサイト上に、非常に高性能な地図を表示することは可能です。では、わざわざオリジナルで制作した地図を載せるの目的はというと、より分かりやすい経路の提案・提供だと思っております。

少々遠回りしても、確実に到着する経路の提供が、もっとも大事です。その為、描く際に経路を想定することが非常に重要になってきます。分かりにくい近道は、スッパリ切り捨ててしまって、分かりやすい道・目印のみ描きましょう。

オリジナルの地図に出来て、GoogleMapに出来ないことは、ズバリ切り捨て(フィルタリング)です。

無駄なものを描かないことで、かえって分かりやすくなり、ユーザーに優しい地図になることでしょう。

まとめ

作る地図が、どのような使われ方、車なのか?徒歩なのか?車の場合は、大きな道路が必要でしょうし、最寄りの駐車場を描くことの親切だと思われます。また、徒歩の場合は最寄りの駅やバス停からのおおよその到着時間を書くことも良いかもしれません。重要なことは、ユーザーの立場に立って、分かりやすい・目的地まで到着しやすい地図描くことに尽きると思います。

今後も地図を描く機会には恵まれると思うので、研究していきたいと思います。

このアーカイブについて

このページには、January 2008以降に書かれたブログ記事のうちWeb制作実務カテゴリに属しているものが含まれています。

前のアーカイブはWeb制作実務: December 2007です。

次のアーカイブはWeb制作実務: February 2008です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。