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

どうも、今更の様ですが最近、Dreamhostが気になっています。

500GBの容量と、月に5.95ドルという安さ。

更に今なら、新春(?)特価で、2年契約すると64.44ドル!?
激安です。

Get two years of hosting for 70% off!

Sign up now, choose "Host a Domain", and then the 2 year payment option, and use the code "229".

That's a $214.80 value for just $64.44.

マルチドメインOK・サブドメインOK、ドメインも1つ無料で付いてきます。
また、気に入らなかったら97日以内なら全額返金もされるようです。(ただドルでの支払いなので、円相場の関係で目減りする事はある様です)

アメリカのサーバーなのでそれなりに不利な点があるようです。
色々あると思うのですが、私が思う点は以下の通りです。

1. 単純に距離があるので、その点でのレスポンスの遅さ
2. 当たり前ですが、申し込み画面や管理画面が英語という言語の壁
3. 重い

1.は諦めるしかありません、2.はDreaamhostユーザーが多いので参照をすればあまり問題無さそうです。ただ、内容を読まずに、ニュアンスでOKする癖があるので、それはやめるように気をつけようと思います。3.は当たり外れがあるようですが、これもこちら側でどうしようもないので、使ってみて、駄目な場合は考えたいと思います。

ただ、本格的に運用するWebサイトには向いていない気がするので、基本的に、実験サーバー+subversion用+外部ストレージという位置づけで考えています。

問題なければ、当社のWebサイトぐらいは移転しても良いかなって考えています。

年末の案件で、某企業様の年賀状HTMLメールを作る機会があったので、注意点や作り方をまとめておきたいと思います。

HTMLメール自体、賛否両論(【結果発表】HTMLメールをどう思いますか？：ITpro・HTMLメールはやめよう：ITpro )だったりしますが、私個人的にはHTMLメールは、読み易いしありだと思います。セキュリティー的な事と良く言われていますが、こちら側の受け取り方でなんとでも成る気がします。(私は基本的にHTMLメールが来そうなメールはGmailで受け取っています)

制作及び、エントリーを書くに至って、以下の参考にさせていただきました。ありがとうございます。
HTMLメールの制作時に気をつけたい9つのポイント | コリス

HTML 4.01 Transitionalで書く

xhtmlではありません。昔ながらの感じです。

文字コードはiso-2022-jpで制作する

メールの文字コードはiso-2022-jpなのでこれに合わせます。

テーブルレイアウトで行う

色々調べたのですが、テーブルレイアウトで行うのが正解のようです。

800px以下

傾向を見ると700px以下である事が多いです。 これは、メーラーがサイドバーが広い場合が多いので、ビュー部分が狭いからだと思います。

cssはインラインで書く

外部指定はほぼ表示されません。 header内の指定では、メーラーによっては上手く表示されません。

センター寄せは、tableの入れ子で寄せる。

<table align="center">で寄せる。

イメージはすべて絶対アドレス(http://~)で指定する。

イメージファイルはまとめて公開サーバーに配置してうで、絶対アドレスで指定します。

<base>の指定を行う

<base href="http://www.bulanco.net/mail.html" target="_self">のようにベースURLを指定指定すると良い様です。 baseを指定すると、上記のイメージファイルは絶対アドレスをしていなくても、読みに行ってくれる様です。私は一応両方行うようにしました。

javascriptは使わない方向で

ブラウザベースのメーラーであれば(Gmail)は使えるかもしれません(試していません)が、一般のメーラーはjavascriptは使えないと思われます。そのため、マウスオーバーは諦めるのが一般的かも。

アニメーションgifは使いどこを考えれば良い感じ

Appleから届いた正月セールメールのアニメーションgifは良い感じでした。 ただ、あまり使いすぎるのは下品に成りがちなので、使い場所は考えた方がよいと思います。

送信はsafariから送信出来る。(Mac)

Macで作ったHTMLメールを送るには、safariからmail.appを使って送る事が出来ます。
作ったhtmlファイルを一旦サーバーに上げた後、safariで閲覧後、[ファイル]>[このページの内容をメールで送信]で送信することが出来る。
ただ、標準のメーラーをMail.app以外にしていると送れないので、標準のメーラーを一時的にMail.appを指定する。

Windowsでの送信方法は、こちらで。
HTMLメールの送信方法：その１ | コリス

BULANCOでは、HMTLメール制作も承っております。是非メールフォームから!

先日22日、私のクライアントさんでもあるBINGOBONGOさんのイベント、BINGOBONGOSOUNDS([mixi] BINGO BONGO SOUNDS)に、Kieth Flack.netまで行ってきました。

久々のクラブイベントで、かなり楽しめました。
特に、お目当てはsmall circle of friends(スモール・サークル・オブ・フレンズ)でした。期待通り素晴らしいライブで、予想以上に刺激を受けました。

BINGOBONGOが絡んでいるイベントザンジバルナイト(出演/リリーフランキー・スチャダラパー・TOKYO NO1 SOUL SET・SLY MONGOOSE・ゾノネム )も超期待です。

ことの発端

Webデザインを生業としていると、どうしても色んなサイトを見る事が必要になってきます。

これは、Webだけに限った事では、無いのですが、絵画や、建築、道ばたのポスター、車など、様々な要素を見る事で記憶を蓄積して、作る時に、その記憶の断片を追い、様々な情報を足し(お客様の要望やエンドユーザーの試行)自分のフィルターを通して出力する。それがモノ作りだったり、デザインだったりするんじゃないかと思っています。

先に述べた通り、Webサイトを見る事で、多いに刺激を受けている訳ですが、一回見ただけで覚えている訳でもないので、脳みそだけでは無く、物理的にもストックしていく必要があるわけですよ。

やったこと・辞めた理由

そこで、今まで試してきたのが

1. 単純にスクリーンショットを撮って、ローカルに保存。
   (作業が結構面倒)

2. FirefoxのアドオンのScrapBook :: Firefox Add-ons
   (プレビューが見れない)

3. Only2Clicks - speed dial to favorite web site and make it your start page
   (サイトが重くて、プレビューを見るのに時間がかかったり、見れなかったりしたので止めた)

4. スクリーンショットを撮って、Evernoteにアップロード
   (アップロードの上限があるので、あっという間に、一杯になる)

上記の通り色々試してきましたが、どれもイマイチしっくり来ませんでした。

今回の作業

そこで、最近発見したのが、FirefoxとTumblrを使ってTumblrをギャラリーサイト化しちゃおうという作戦。

出来上がりはこんな感じ

参考に成ったのがこちら。

Tumblr＋capture.tumblr.jsの組み合わせでFavorite WEBデザインGalleryを作ってみる - WEBデザイン　BLOG

Mac用のメモ

Macの場合は『JSActionスクリプトの設置・設定』の[3]:が
ユーザー>(ユーザー名)>ライブラリ>Application Support>Firefox>Profiles>(変数).Fifefox3 User←このフォルダー内に設置します。
まぁ、別にどこでも構わないみたいですが、一応私もここに設置しました。

覚え書き

一つつまずいたのが、[5]:の『capture.tumblr.conf』の設置場所ですが
ユーザー>(ユーザー名)>ライブラリ>Application Support>Firefox>Profiles>(変数).Fifefox3 User>script_set←このフォルダー内に置きます。

恐らく今までやった中で一番手間がかからず、しかも表示もサクサクと表示されて良い感じだと思います。

結局テンプレートまで含めて、M-1 2008を見ながら作ったので、約2時間ぐらいで出来たと思います。Tumblrのカスタマイズはした事が無かったので、変数関係のリファレンスを見つけきれず、少々手こずりました。

今回は、初めからあるテンプレートに少々手を加えて作りました。 変数関係を理解して、また改めて、1からオリジナルでテーマを作ろうと思います。

フルFlashサイトの対応

フルFlashのサイトは、右クリックからスクリーンショットが撮れないので、kwout | A brilliant way to quoteというFirefoxアドオンを使っています。Tumblrの管理画面を使うので、画面変遷的に3つぐらい行わないといけないので、上のやりかたより面倒ですが、フルFlashサイトは、今のところ、これくらいしか無さそうです。

出来上がったサイトはこちらです。 BULANCO's Fivorite WebDesignClip

Movable Type をソーシャルアプリケーションに『Motion』のベータを開始 | MovableType.jp

Motion。
まず、なんて書けばいいのだろうか?

『Movable Type Motion』?
そとれも、単独で『Movion』?

色んなWebサービスを取り込み、プロフィールを作れると行った形でしょうか?
MTコミュニティーブログ+iddy | ブロガー向けプロフィールページASPって感じでしょうか?

使ってみないと分からなそうなので、また後日インストールしてみて試してみようと思います。

参考リンク
今日のMovable Type：Movable Type: Motionにシックス・アパート社の開発魂を感じた: 世界中の１％の人々へ

警固公園のイルミネーション。 去年まではこの池を渡れたのに、今年からは無くなりましたね。

ISO400で露出などいじらずに、そのまま撮っています。

平日なのに人が本当に多かったです。
みんな光り物好きですねぇ。

ソラリアプラザのクリスマスツリー。 恐らく、天神で一番、フツーのツリーじゃないかな。

これは、岩田屋のツリー。
ケーキにツリーが刺さっています。。。なんで?

天神ではないですが、キャナルシティーのツリーです。
ここまで来ると、ツリーではない気もしますが、個人的にはこれが一番好きですねぇ。

イルミじゃないけれど、TUTAYA天神店。18時頃の夜空。GR II は本当に空の青が綺麗!
最近のTUTAYAのデザインワークは、佐藤可士和氏のものだろうから、恐らくここもそうかな。

続きは、私のFlickrに他にも色々あるので、是非!

お仕事で、Movable Type 4.23のコミュニティーブログを入れたんですが、今まで見慣れなかった文字が画面にありました。

この画面の

ここ!!

前からありました?
付いたとしたら、コミュニティー機能が搭載されたあとぐらいからですかね?

管理画面を変遷しなくても、そのまま、サクッと投稿出来ちゃいます。

ただ、カテゴリやら、タグ等は付けられないようなので(もしかしたら、出来るのかも、要研究)簡単に投稿したい時には便利だし、逆に、無駄な入力箇所が一切ないため(日付すら)ユーザーは使い易いかもしれませんね。

追記
カテゴリは、すでにあるものであれば選択出来る事が判明しました。
ただ、この画面で新たに作る事は出来ません。 
失礼しました。

書きたくなったら、サクっとすぐ書けるっという意味では、かなり使える機能のように思います。

コミュニティーブログ、リリースした時に試しにインストールしましたが、細かく使った事無かったので、他にも色々と便利な機能がありそうなので、この機会に研究してみます。

MacOSXでhostを変更するときの方法のメモです。

finderで直接変更出来そう(隠しファイルを表示する設定にする必要があります。文末参考)ですが、管理者権限じゃないと変更出来なかったりするので、ターミナル経由が一番簡単。

ターミナルで

sudo vi /private/etc/hosts

以上入力。 sudo viとまで書いて、該当ファイルをターミナルの画面にドラックアンドドロップでもOKです。

パスワードを聞かれるので、素直に入力。(入力している間は画面に表示ありません)

Swap file "/private/etc/.hosts.swp" already exists!
[O]pen Read-Only, (E)dit anyway, (R)ecover, (D)elete it

こんな感じで聞かれるので、R(大文字)と入力
末尾まで行って入力

192.168.0.100 bulanco.net
(IPアドレス) (ドメイン名)

こんな感じで入力すればOKです。
ESCを押して、入力モード終了
ZZで保存。

以上で、再起動無しでホスト名を書き換える事が出来ます。

参考リンク

管理者権限でのファイル編集 (うむらうす)

Santa Software | MainMenu
(隠しファイルの不可視ファイルの表示を簡単に設定出来ます。その他便利なものも色々入っていて使い易いソフト)

追記(08.12．18)

別の環境(OS)用メモ

Windows XP %SystemRoot%¥System32¥drivers¥etc¥hosts

Linux+Unix系OS /etc/hosts

先週末、 サト研(サイト運営・研究会)の忘年会に行って参りました。

その前々日に、39度の熱を出し、土曜日のOSCは結局行けなかったので、サト研忘年会も、参加自体考えたのですが、当日熱が下がったので、なんとか参加出来ました。

一次会は、割と普通な、自己紹介から始まって、ビール瓶を持ってついで周るという、どこの忘年会でもあるような光景が繰り広げられていました。

3000円の予算なのに、料理も立派で驚きました。 幹事をやってくれた、たかださんには大変感謝しております!ありがとうございました。

2次会は、ふとっぱら大名店、私たちの中の通称FTPに移動して、ぐだぐだ話。 近くに、西嶋さん、田村さんが座っていまして、いつからか、コーディング話に。。。途中から、我流氏も参戦しますます熱を帯びた感じに

• inquiryはおかしいらしいよ。ネイティブではcontactらしいよ。
• _(アンダーバー)or-(ハイフン)どっち使う?(_のほうが総合的には軍配が)
• idやclass名に大文字使う?(使ってOKだけど、私は使わないかな)
• cssの構成方法。(後日別エントリーで上げます)
• hackはやる?(私は、状況により。極力やらないが、単価的に厳しい場合はやる方向)
• 結局のところ、CSSスプライトってどうよ?(使いよう。ケースバイケース)

まぁ、こんな、ディープな話が夜中のFTPで繰り広げられました。 忘年会なのに、CSSの話で盛り上がる辺り、サト研らしいなっと感じました。