福岡のホームページ制作[BULANCO(ブランコ)]のWeb制作のこぼれ話

先日、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にいました。

別にお金が払いたく無かった訳ではないですよ！（笑）


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

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



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のコアをいじっているので注意が必要です。

MWSF 2008で、とうとう発表がありました。MacBookAir!
予想の通りの名前でしたね。厚みは0.16〜0.76インチということなので、2cm切ってますね。
異常に薄い！記憶装置は、フラッシュメモリーかと思っていたら、1.8インチのHDD搭載のようですね。（追記：オプションでSDD64Gを選択出来るようですね。ただ＋12万1800円と、もう一台Macが買えそうな価格ですが...）

CDドライブはオプションのようですね。99ドルで外付けドライブが付けられるそうです。
スペックも悪く無い。

これは、1799ドルということなので、そのまま日本円に換算すると、197800円。うんあり得そうな金額。MacBookとMacBookProのちょうど中間にあたる金額ですね。

うーん。欲しいですね。

ノートはたまにしか使わないけど、プレゼンなんかで持って行くと絵になりそうですね。
デザイナーは見かけ倒しも大事ですから（笑）
（Gizmodから引用させて頂きます）

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

参考にしたサイトは

• ThickBox（オフィシャル）

• Hybrid Style Design. BLOG :: Movable Type 4とThickBox

• 画像を挿入したときにformタグがつく理由

同等機能の元祖ライブラリに、LightBoxというものもあります。
ThickBoxとの違いは、

• LightBoxは開くときにちょっとしたアニメーション付き。（ThickBoxはない）
• ThickBoxはhtmlなんかも開ける。

（1/23追記：現在は、このThickBoxを使用しておりません。）

XREAの上位サービス、CORESERVERへサーバーを移転しました。
サーバー側に用意された、「サーバー間コピー」機能を使って割とあっさりと移転できました。サーバー容量が１５Gもあるので、色々と無駄使い出来そうで楽しみです。

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

IMAPとは（ウィキペディア）

POP はユーザが利用中のサーバからクライアントにメールをダウンロードし、ダウンロードがすんだメールはサーバから削除することを標準的な利用形態とするのに対し、IMAP はメールをメールサーバ上に保存したまま管理する（RFC 1733 参照）。この特性により、複数のコンピュータからメールを読む場合にメールの未読状態等の属性やメールフォルダの構成等が一元的に管理できる利点がある。

つまり、複数のPCでメールをチェックするときに便利ってことです。ただ、メールを受けた後もサーバーにメールが残ったままなので、サーバーの容量は食います。今回１５G になったお陰で、全然問題なく使えそうです。


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

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

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

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

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

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

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

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

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

北を上に描く。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

無駄なものを描かない。

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

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

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

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

まとめ

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

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

さて、本年2本目のエントリーです。 昨年は、エントリーの間隔がかなり開いていたので、反省して、今年はコンスタントに更新しようと思っております。 ブログの更新もそうなんですが、他にも元旦に今年の抱負をたてたので、ここで公開しておこうと思います。

 最低週一でブログを書く！
先にも書きましたが、昨年はかなりサボったので、今年は頑張ります。

 1週間につき少なくとも新しい1人と知り合うようにする！
 仕事柄、引きこもりになってしまうことが多いので、機会があれば外に出て、新しいお知り合いと作りたいと思います。

Ajax・ActionScript・Perlの取得 ！
 取得と言うより、技術の向上といったほうが正確なんですが、あえて「取得」としておきます。あやふやになっているところが多いので、それを解消していきます。また、最近MovableTypeの案件が多いため、Perlの取得し、オリジナルのプラグインが作れるぐらいにはなりたいと思います。

 具体的の方法は、Web雑誌や、Web上にあるサンプルを一つ一つ、実際に作ってみようと思っています。今まで、流し読みして取得した気になっていましたが、実際に作ってみると、あやふやになっている所が見え、解消できるのではないかと思っています。

英語の勉強をする！
ずっと思っていたことなんですが、今年こそは頑張りたいと思います。 具体的に、I Knowという、英語のレッスンSNSという面白いサイトを見つけたので、ここで１日最低１レッスン行おうと思います。

プライベートワークを行う！
 仕事とは別に、プライベートでも何かを作りたいと思います。プライベートワークをすることによって、技術の向上を図り、結果的に仕事にもフィードバックさせられればと思っています。 具体的に、１日最低１アイディアもしくは、３０分以上考えるか、作る。2ヶ月に1サイトor1成果物を作り出す。

営業活動を行う！
昨年は、制作に精一杯で、あまり営業活動を行ってないので、今年はまじめに営業活動を行います。といっても、飛び込み営業とか、テレアポのようなものではなく、自社サイトの充実することがメインになると思います。また、現在お付き合いさせていただいている、お客様のフォローも今まで以上に行っていきたいと思っています。

身の回りを片付ける！
気がつくと、いつもデスクが散らかってしまうので、デスクの片付けを行います。

毎日３０分以上運動する！
 運動不足になりがちなので、毎日30分以上運動したいと思います。最近Wii Fitを買ったので、頑張ってみたいと思います。

記録する！
 毎日日記を付ける・写真を撮る。日記は、Googleノートブックで毎日付けています。写真も出来る限り撮っていこうと思っています。

 以上、今年の抱負です。 目標を立てるのは簡単ですが、実行するのはなかなか至難の業だと思います。 今年は、毎日日記で、振り返ろうと思っています。

あけましておめでとうございます。
昨年は、BULANCOとして軌道に乗った一年でした。多くの仕事をさせていただき、仕事に育てていただきました。 年が明けたばかりなのに、来年のことを言うと笑われそうですが、来年私の36歳になる年に、法人化することを目標にしております。

今年はその目標へむけた、よい助走期間になるよう一年頑張って参ろうと思っております。

日々、デザインおよびシステム開発、CMSなど、勉強して参ろう思っております。インターネットという、優れた学習ツールを使ってどんどんと吸収（インプット）していこうと思っています。

また、昨年はインプット作業にばかりに追われため、今年こそアウトプット作業にも力を入れていこうと思っています。 では、今年もヤマダヤスヒロ並びにBULANCOをどうぞよろしくお願いいたします！