title_parttitle_parttitle_part
静岡県浜松市であれこれソフトを開発している A.K.I Software のブログです。日々の開発日記やサーバー・セキュリティ関連の話題なども掲載。
<< 2024/03 >>12345678910111213141516171819202122232425262728293031
《《《 ネットワーク機器の購入は Amazon で! 》》》
Powered by BLOM Webmail に iPhone用モードを追加しています
小さくも大きくも閉じたりもしません
10/04/15 06:58 / PMailServer2

blomが対応したならば必然的な流れとして、Webmail も対応したくなります。

とは言っても主に閲覧のみのblomと違って、iPhone からの閲覧は IMAP4 でアクセスした方が断然楽です。
ただ、PMail Server の Webmail は閲覧のみでは無く色々と出来ることが多いので、敢えて iPhone での標準的なインターフェースは使わず iPhone でも見やすいようにという方向性です。(表示はシンプルモード+αになります)

photo


まず色々と残念だったメールボックス一覧です。

iPhone の Safari はフォームの submit ボタン(Webmail は URL にオプションや処理内容等を一切含まないようにしていますので全ての処理をフォームで処理しています)の形状等を変更出来なかったのですが、CSS3 を使えば出来ました。

デザイン的に悩む人も居そうなので参考までに iPhone safari でボタンの枠を消す CSS です。

.flatbutton {
border:none;
-webkit-border-radius:0px;
background-image:-webkit-gradient(
linear,
0% 0%,
0% 100%,
from(rgba(255,255,255,1.0)),
to(rgba(255,255,255,1.0))
);
}

1)border:none で外枠を消します。
2)-webkit-border-radius で角丸なボタンの R を 0 にします。(背景に色があるとそこに色が出るので)
3)ここがミソです。backgrund-image に gradient(グラデーション)を掛けるのですが「白から白」でグラデーションを掛けてやります。to の所で色を変えれば影付けたりもできるでしょう。

あとはフォントをヘリベチカとかにしてサイズ等を変更すると iPhone っぽくなりますが、アイコンのサイズと合わないのでここでは指定していません。

話が逸れましたが、これでツリーや下の方のオプション用のボタンとかも綺麗に揃うようになりました。

photo


設定の方も iPhone 用にサイズ調整を行って横にスクロールしないようにしました。(一部設定量の問題でスクロールする所も若干ありますが・・・)

メールの一覧ですが、以前のバージョンで追加したシンプルモード用のカラム幅の設定が反映されます。
こちらもサイズを合わせて使わないボタンを非表示にすれば横スクロールしなくなります。

ただし横での利用専用に合わせています。縦にした場合はどうしても横スクロールします。

iPhone 専用ではありませんのである程度は妥協する形になるのですが、それでも以前よりは使いやすくなっていると思います。

あ、一応念の為記載しておきますが、iPhone と書いていますが iPhone OS という意味で書いています。
私が利用しているのは iPod Touch なので、iPhone 3GS 等でテストしている訳ではありませんのでご注意下さい。

[更新日付:2010/04/15 06:58:57]
トラックバックを見る(0)
Log Link [https://akisoftware.com/cgi-bin/blom.exe?akisoft+sl+4a2a28219722d455664456dbbdae0c0d52fefe53]
TB Link [https://akisoftware.com/cgi-bin/blom.exe?akisoft+tb+4a2a28219722d455664456dbbdae0c0d52fefe53]

記事へのコメント

コメントはありません

名前
コメントキー
 
コメントする時はキーを正確に入力して下さい
コメント
アドレスを含んだコメントはできません
© 2008-10 A.K.I Software all rights reserved.