« March 2006 June 2006 »

06-05-16 Tue

03:55:38

gmail_domain.jpg

Googleが独自ドメイン用Gmailホスティングを提供開始という engadget の記事を見たときに早速応募していた Gmail for your domain のベータテストサービスですが、ようやく招待メールが送られてきたので、早速設定してみました。

gmail_domain_create_administrator.jpg

まず、送られてきたメールに書いてあるアドレスを開くと、管理者アカウントの作成ページになります。フォームに必要事項を入力して I accept. ボタンを押すと、管理ページが開きます。

それでは、各種設定の簡単な紹介などしていきたいと思います。

DNS の設定

gmail_domain_dashboard1.jpg

管理ページにログインして最初に目に飛び込んでくるのが、Change your MX records の文字です。要は、お前のドメインを俺に向けな!という事です。

gmail_domain_dashboard2.jpg

ヘルプに代表的な ISP の DNS レコードの設定の仕方や、それ以外の場合の設定も書いてあるので、それらを参考にして DNS を Google 側に向けると Dashboard の Change your MX records の文字が消えました。送信テストを行ってみても無事使えているようです。

ユーザーの追加と管理

gmail_domain_create_user.jpg

次はユーザーを追加していきます。ユーザーの追加のページでは、一人一人のユーザーを追加できますが、人数が多い場合は面倒です。

そこで、Advanced tools なるもので、CSV ファイルでユーザーを一気に追加出来る様になっています。

gmail_domain_advanced_tools.jpg

Excel などでユーザー全員の「ユーザー名、性、名、パスワード」を入力して、CSV で保存したものをアップロードします。すると確認画面が表示されますが、どうやら日本語は化ける様なので、現在ではアルファベットのみになります。

gmail_domain_users.jpg

ユーザーの追加が無事完了すると、Users のページでユーザー一覧が確認できます。Quota なども確認できて便利です。

ユーザー管理ページからは、他にも nick name アドレスなども追加でき、同じアカウントで複数のアドレスを使い分ける事もできます。すべてのメールアドレスは、All email address で誰のアドレスか確認出来る様になっています。

その他設定

その他に設定出来る事として、email list というものが作れます。これは、メーリングリストの様なもので、作ったアドレスは受信専用で、どのアドレスで受信するか管理できます。

gmail_domain_settings.jpg

それ以外に、左上の Gmail のロゴイメージを任意の画像に変えたり、登録外のアドレスのメールを受信するかどうかなどが Domain settings で可能です。

終わりに

設定さえすんでしまえば、後は馴染みある Gmail なので、操作には何も困ることはありません。容量も気にしなくてよく、運営は容易です。

今はまだ使えませんが、後に2006-05-18 より Google Calendar も独自ドメインで利用出来るようです。これも楽しみですね。独自ドメインで Gmail や Google Calendar を利用するというのはとても便利なので、ちょっといいなと思う人はとりあえず申し込んでみてはどうでしょうか?

申し込みは、Gmail for your domain からです。

06-05-11 Thu

16:18:47

JavaScript で画像をポップアップ表示するのは「うっとうしい」だの「ださい」などのイメージが付きまとうが、そんな JavaScript による画像表示を一躍クールにしてくれたのが、Lightbox JS ですよね。

登場以来、みんな急速に自分のブログに組み込んで、デファクトスタンダードになりつつあるみんな大好き Lightbox JS ですが、こういう新しいものが好きな人で、みんなが使い出すとどうも個性が無くなってしまって面白くないと思う方も多くいらっしゃるのではないかと思います。

Lightbox JS は、Prototype フレームワークと script.aculo.us のエフェクトを利用しているので、内部を軽く弄るのは楽かもしれませんが、僕も JavaScript の知識がほとんど無いので、エフェクトを少し変えるくらいは出来るかもしれませんが、面倒と言えば面倒です。

そこで、個人的に最も簡単に見た目を変えるには、同封されている lightbox.css を弄ることと、画像を差し替える事です。今日はそんなどうでもいい事についての記事を書きました。

まず、リンク先の画像が表示された時の HTML の構造ですが、lightbox.js の中身を見ると、丁寧にコメントで構造を書いてくれています。


<div id="overlay"></div>
<div id="lightbox">
  <div id="outerImageContainer">
    <div id="imageContainer">
      <img id="lightboxImage">
	<div style="" id="hoverNav">
	  <a href="#" id="prevLink"></a>
	  <a href="#" id="nextLink"></a>
	</div>
	<div id="loading">
	  <a href="#" id="loadingLink">
	    <img src="images/loading.gif">
	    </a>
	</div>
      </div>
  </div>
  <div id="imageDataContainer">
    <div id="imageData">
      <div id="imageDetails">
	<span id="caption"></span>
	<span id="numberDisplay"></span>
      </div>
      <div id="bottomNav">
	<a href="#" id="bottomNavClose">
	  <img src="images/close.gif">
	  </a>
      </div>
    </div>
  </div>
</div>

これを見れば、CSS が分かる人にとっては、lightbox.css を弄るのは簡単なものです。色を白基調から自分のサイトに合わせるのもいいでしょう。

lightbox_remix.jpg

と言うわけで、僕はこんな感じにしてみました(ソース)。このサイトの配色であるピースネイビーを背景色にして、Close 画像を差し替えました。

それ以外にも、複数の画像をセットにした場合の特徴的なナビゲーションを分かりやすくするために、初めから半透明で表示しておいたのと、:before および :after疑似要素content プロパティによる説明を付属しておきました。content プロパティは非常に便利で強力なんですが、IE が対応しておらず(多分 IE7 でも対応しないっぽいです。)、無くても問題ない内容のレベルでとどめて置かなければならないのが勿体ないです(とはいえ、大事な情報を content で生成するのは間違っていますが)。

ちなみに、content を用いた部分のソースはこんな感じです。


#imageData #caption:before {
    content: "Title: ";
    background-color: transparent;
    color: #eee;
}
#imageData #numberDisplay:after {
    content: "\A Press \"N\" key to next, and \"P\" key to previous";
    background-color: transparent;
    color: #eee;
}

\A による改行コード挿入は、現行の Opera 8.54 では大丈夫でしたが、Firefox 1.5.0.3 では解釈してくれませんでした。しかし、そこまで気にしだしたら正直スクリプト自体を弄った方が賢いと思うので、気にしないのが吉です。それでなくとも、content プロパティは十分優秀です。Safari はどうなのかな?iCapture という便利なサイトはあるけど、Lightbox JS の動作は分からないですしね。まぁ、Mac 持ってるんですけどね。

他に、Lightbox JS をこう弄ったら楽しいという話があれば教えて欲しいです。