福岡のホームページ制作[BULANCO(ブランコ)]の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の話で盛り上がる辺り、サト研らしいなっと感じました。

知らなかったので、メモです。

この際、XHTML 1.1では、target="_blank"自体がアウトじゃないの?っという話は置いといて、target="_blank"と、普通blankの前に_(アンダーバー・アンダースコア)を書きます。 これは、文法的には正しいみたいで問題ないのですが、アンダースコアを外すと(target="blank")、一度開いた同じウィンドウで開いてくれます。

リンク集なんかを作って、リンクを全てtarget="_blank"にしたものの、じゃんじゃんウィンドウが開いて忍びないなぁ、なんか言う時に使えます。

一応、_(アンダースコア)を付けなくても、Another HTML-lint gatewayは、問題なく通過しました。

というか、これって常識ですか?

ここの所、連発でセキュリティーバージョンアップがかかります。
本当に面倒ですよね。

Movable Type においてクロスサイトスクリプティングによる脆弱性が確認されました。この問題に対処するため、Movable Type の修正バージョンを公開致します。脆弱性の修正バージョンとなりますので、アップデートを推奨致します。

詳しくはここから。
[重要] セキュリティアップデート Movable Type 4.23 の提供を開始 | MovableType.jp

以前MTを入れたお客様に、案内するのが一番大変で、バージョンアップにある程度コストが掛かるため、どのように案内すれば良いか、いつも悩んでいます。

ある程度、メンテ料金頂いているお客様ならコストをこちら負担で構わないのですが、そうではないお客様の場合が一番困ります。コストを負担して頂ける方もいらっしゃるのですが、ご負担頂いても、こう連発でセキュリティーバージョンアップがかかると忍びなくなります。

皆様どのように案内されていますか?

Flickrに上げているやつをそのまま貼れるか実験。

マクロ機能のぼけ、良い感じです。

空の青は本当に奇麗に撮れます。

シャッタースピードを遅めにして

ぼけているけど、夜でここまで取れれば良いのかな。
次はきちんと固定しよう。

なにより、撮影するのが楽しいカメラです。

前々からMT4純正の、WYGIWYGは嫌いでした。特に1行開けたいときなんかに<br />タグを連発するあたり、大嫌いです。

かといって、プラグインのWYGIWYGも何個か試しましたが、どれもしっくり来るものが無く半ば諦めかけていましたが、ここに来て凄いのを発見しました。

それも純正です。 以前書いたエントリMovableTypeでコメントスパム防止ってやつでも、純正機能を見落としていました。

見落とし第二弾です(笑

nishiakiさんが提案しているこの方法なんかも非常に良案だと思いますし、私も有り難くまねさせて頂いています。
でも、これはあくまでもhtmlの知識がある前提なので、プロユースだったりします。

このMarkdownは、特にhtmlの知識が無くても、文章を構造化したいという要望に応えられます。

前置きはこれぐらいで、実践へ。

MacUpdateという、Macのユーティリティーソフトを色々出しているところが、期間限定で、89%オフの$49という大安売りをしているという情報を、我流氏のTwitterのつぶやき経由「我流天性 - がらくた屋」で知りました。(我流氏情報によると、日本時間で2008/12/19(月) の14:00ぐらいまでらしいです。)

書いてると、同じようなエントリーを本人が書かれているようなので、エントリー自体疑問に思ったのですが、折角書いたので残しておきます。

気になったソフト

Default Folder X

楽に保存する、楽にファイルを開く事が出来るユーティリティーソフトの様です。 ここらへんを参考にして下さい(Default Folder X Documentation) 私は、使った事無かったので、とりあえず体験版をインストールしました。

$34.95

yuga.jsが結構便利です。でも書いた、yuga.jsですが、ページ内スクロールがどうもうまくいきませんでした。色々と調査すると、どうもid名に-(ハイフン・ハイホン)を使ったものにはページがスクロールしません。

ただ、_(アンダーバー)だとOKです。

そこで、yuga.js中を開いてみていたのですが、206行目あたりぽいんですが、原因の特定には至りませんでした。もしかしたらjQueryそのもののバグか、そういう仕様なのか分かりません。

注意すればOKなんで、忘れないように書いておきます。

以前、Flickrにアカウントを持っていたのですが、どうしてもパスワードを忘れてしまい、再発行先のYahoo!のEmailのパスワードも忘れてしまってて、全く手の打ち用がなかったので、GR DIGITAL IIを買ったのを機会に、新たにアカウントを作り直してみました。

以前は、Yahoo!(japanじゃない方)のページからアカウントを作ってからの登録と、かなり雑多な手続きが多かったのですが、今は、Flickr内で、Yahoo!アカウントが作る事が出来るので、非常にやりやすくなりました。

iPhotoで写真を管理しているので、そこから直接アップロード出来ないか探してみると、意外に色々あるんですね。
iPhotoからFlickr/フォト蔵/mixi/はてなフォトライフにアップロードできちゃう便利ツール - カイ士伝
mixiなんかにもアップロード出来るの便利。
ただ、mixiの場合新しいアルバムを作る事はできないみたいです。
メニューが、日本語なので楽です。

iPhotoからFlickrにアップロードできるアップローダ『FFXporter』 | CREAMU
Flickrに関しては、こっちの方が高機能の様です。
ただ、メニューが英語です。


私のFlickrページです。
Flickr-BLANCO

GR DIGITAL II で撮った写真をアップします。

今後、ブログにFlickrのサムネイルが貼れるやつ導入します。
またそれは、のちほど。

GR DIGITAL IIで色々撮ってみました。

輪郭がしっかり出ていい感じです。

青空撮りたかったけど、今日は荒れ模様なので、無理でした。

つい先程、GR DIGITAL IIが届きました。

質実剛健な感じのデザインで、ホールドする部分があるため、持ち易く非常に良い感じです。
RAWでの撮影と、1:1の撮影を試してみました。




設等研究しないといけません。
さて、今から説明書を熟読します。

GR DIGITAL II勢いに任せて買っちゃっいました。

SDHCの4Gついて 41.900円也。

最後の最後まで、GX200と迷いに迷ったんですが、Flickrで比較してみると(GRIIとGX200)撮った写真を見た感じだと、なんとなくですが、GRIIのほうが好きそうな感じなので、ズーム諦めて、GRIIにしました。

今から、届くのが楽しみです。

グーグルの「Calaboration」、「Google Calendar」とアップルの「iCal」の同期を容易に:ニュース - CNET Japan

ここら辺で紹介されている、calaborationをインストールしてみました。

今まで、スタッフとのスケジュール共有の為に、Entourageを使っていました。
別にGoogle  Calendarだけでも問題なかったのですが、オフラインで使えないとか、Webアプリケーションをイマイチ信用していないとかいう理由で使っていませんでした。

このCalaborationを入れる事によって、iCalメインで、同期だけGoogle Calendarに任せるかたちで、いけそうです。バグが多いEntourageともお別れ出来そうです。

同期のスピードもそれなりに早い感じです。

インストールは、iCalを終了させた状態で、calaboration - Google Code ここから落としてきたものを起動して、Gmailのアドレスと、パスワードを入れて、同期するカレンダーの種類を選択するだけです。

表面上では常駐する感じでは無い(Dockには表示されない)みたいです。


Speed Feed > Google Calaborationで、GoogleカレンダーとiCalを同期 : ITmedia オルタナティブ・ブログ

ここに書かれているように、iPhoneでは、私の環境(MobileMe経由での同期)でも同期出来ませんでした。これが出来れば完璧なのに。

最近、GoogleとYahooのpingへの対応がやたら早い気がします。
Googleは、申請してから割と早めにクロールしてくれますが、Yahooはかなり気長に待たないと駄目だったりします。なのにブログを更新してpingを投げると、かなり早くインデックスされるので、その早さを今から実験してみます。

早いだけなら分かるんですが、いきなり上位表示される事があるので、それも合わせて調べます。

おそらく、マイナーキーワードなら、タイトルタグにキーワードが入っているだけで、いきなりトップを取れる可能性もある気がします。

なので、このエントリーは「bulanco」「インデックス」というキーワードで実験しています。

bulanco インデックス - Google 検索

Yahoo!検索 - bulanco インデックス

このエントリーを書いている2008年12月3日10時23分の段階では、もちろんインデックスされていません。

では、実験開始。
(残念な結果になってもお許し下さい)

2008年12月3日10時33分(10分経過)
変化無し〜

2008年12月3日10時58分(35分経過)
変化無し〜
うーん。やっぱりこんなに早くは無理か。

2008年12月3日12時53分(2時間30分経過)
変化無し〜

2008年12月3日16時40分(4時間7分経過)
Yahoo! Googleともに変化無し〜

2008年12月4日10時25分(1日経過)
キーワードの選択が不味かったかも。
変化無し〜