●XHTMLで記述する
ほとんどの3Gの端末ではHTMLに加え、XHTMLを使うことができます。
XHTMLを使うことによって、文字の背景色を設定できたりするなど、デザイン表現が多彩になっています。
ただdocomoでは、外部CSSを使用することができないため、
3キャリアで共通したhtmlを使用する場合、
style="font-size:middle"など各要素にインラインで組み込むようにします。

●DOCTYPE宣言
・DoCoMo
通常はiモードXHTMLのバージョンによってDOCTYPEが用意されているので、そちらに合わせた方が良いらしいですが
基本はこの共通系で動作します。

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

・au

DOCTYPE html PUBLIC "-//OPENWAVE//DTD XHTML 1.0//EN"  "http://www.openwave.com/DTD/xhtml-basic.dtd"

・SoftBank

DOCTYPE html PUBLIC "-//JPHONE//DTD XHTML Basic 1.0 Plus//EN"  "xhtml-basic10-plus.dtd"

●ドコモ用にContent-Typeをapplication/xhtml+xmlを配信する。
auとSoftBankではPCサイトと同じようにtext/htmlでCSSを読むことができますが、
Docomoの場合はapplication/xhtml+xmlで配信しなければCSSを読み込むことができません。
方法としてはhead内に

meta http-equiv="Content-Type" content="application/xhtml+xml;  charset=UTF-8" 

と記述し、動作しない場合.htaccessに

AddType application/xhtml+xml .html

と一文を追加します。

上記をふまえた上でデザイン＆コーディングを進めていきます

●各キャリアを考慮してデザインするには
・ベタ色のタイトル帯、画像回り込みで2カラム風レイアウトなどモバゲー、mixiモバイルなどを代表とするレイアウト。

・サイトロゴは自動縮小を回避するために横220ピクセル ～ 230ピクセルで作成。

・画像を使うよりは、絵文字に対応して見栄えを派手にするのがスタンダード・・・ですが、これにしてしまうと各種キャリアできちんと全ページの表示確認しないといけないので手軽ではなくなります。
http://www.dspt.net/tools/emoji/
http://dspt.blog59.fc2.com/blog-category-5.html

・画像は3キャリアすべてが対応しているjpg、gifを使用する。

●Docomoの癖を考慮した上でのデザイン／マークアップをする
・i-modeではmargin、padding、border（hrでのborder指定は可）、背景画像等は未対応です。
・liにするとなにかと面倒なので、基本div,pなどの要素でレイアウトしたほうが修正など効率が良い。

【参考サイト】
・モバゲーのような携帯サイトを作るための12のTips 携帯ホームページを作ろう！
http://dspt.blog59.fc2.com/blog-entry-39.html
・3G端末（FOMA・WIN・3GC）のモバイルサイトのコーディング＆デザイン
http://blog.livedoor.jp/ld_directors/archives/51104376.html
・携帯でCCSを用いる場合
http://34567.jpn.org/study1/sakusei/css.html

社内でクラウドサービスをいろいろテストしてみようということでとりあえずAmazon WEB Serviceでできることを調べてみました。
探してもEC2とS3以外はなかなか情報がでてこないため簡単にまとめておきます。

調査対象は

・Amazon Elastic Compute Cloud(Amazon EC2)
・Amazon Simple DB
・Amazon Simple Storage Service(Amazon S3)
・Amazon CloudFront
・Amazon Simple Queue Service(Amazon SQS)
・AWS Premium Support
・Amazon Flexible Payments Service(Amazon FPS)
・Amazon DevPay
・Amazon Mechanical Turk
・Amazon Fulfillment Web Service(Amazon FWS)
・Amazon Associates Web Service
・Alexa Web Information Service
・Alexa Top Sites

詳細は以下から

Vimの思想や理論については、下の勉強会動画をみてください。

それでは、以下よく使うコマンド

■　zfa{   カーソル位置のブロック{ }を折りたたむ。

　　CやPHPで見たくない関数を隠すことができます

■　zo     折りたたみを開く

折りたたみの例

■　Ctrl + v  短形選択

　　選択してからｄでコメントアウトなんかを美しく削除できます。

 短形選択の例

■　:sp  画面を横に分割

■　:vsp 画面を縦に分割

■　Ctrl + w  分割したウィンドウを移動します。

　　h,j,k,l と組み合わせればもっと美しく移動できます。

ウィンドウ分割

■　q?  (?はアルファベットならなんでもよい)　コマンドの記録を開始する。

　　行単位で同じ処理をする場合にかなり便利。

■　q   コマンドの記録を終了する

■　@?  記録したコマンドを再生する。

■　daw    カーソル位置の単語を削除

　　長い変数を削除できます。

[勉強会動画]
 vim勉強会　初級編          (http://blog.kndb.jp/labo/2008/07/vim.php)
 vim勉強会　中級編（前半）(http://blog.kndb.jp/labo/2008/07/vim-1.php)

 [おすすめ書籍]
・入門vi 第6版

[パワーポイント資料]
またここにリンクをはっときます。

今では、安い端末で簡単にVPNを構築できるので、勉強会では自宅と実家をとりあえずVPNでつないでみます。

IT関係者なら必須の知識、そうでないひとも教養レベルでその仕組みを知っていても損はしないテーマだと思います。

[目次]

1 VPNのいろいろ

2 プロトコルの詳細

3 今後の動向、IPv6の導入

とりあえずVPNについてまとめ。VPNはいろいろありますが、その中でも有名な7つです。

それぞれ簡単に説明します。

1 広域Ethernet

　　タグVLANを利用する。IP-VPNよりは安価でかつ高速な仕組み。

　　ルーティングプロトコルにRIPやOSPFを使用することができる。

　　（面倒なBGP4使用しなくてよい）

2 IPsec

　　現在最も利用されている。

　　暗号化や認証の方法が複数あり、セキュリティレベルを場合に応じで設定できる。

　　（AHやESPヘッダ、トランスやトンネルモード）

3 SSL-VPN

　　アプリケーションレベルで暗号化できる。

　　httpsなので使う側は簡単だが、サーバへの負荷が高いので対応が必要。

4 マネージドVPN

　　業者にすべて任せるやつ。

5 IP-VPN

　　MPLSを使うのが特徴。通信事業者が提供しているため値段が高い。

6 フレッツグループアクセス

　　NTTが提供しているサービス。（http://flets.com/groupaccess/index.html）

　　結構安いが東西をまたぐことができない。

7 PPTP

　　Windowsに搭載されているあれ（http://e-words.jp/w/PPTP.html）

　　そのままでは、暗号化されていないので

    IPsecと組み合わせて使うこともある。（L2TP over IPsec）

以上、VPNについての簡単な説明。大事なのは、

コストを抑えてセキュリティを高める技術。

専用線はまあ安全だけどコストがかかる。インターネットを使えば、コストは抑えられるが安全に

通信できるのか?  ん～　可能な限りセキュリティを高めましょうという話。

次回はそのセキュリティをどうやって高めるのかについての説明と

実際に安い端末でVPN構築、あとIPv6でどうなるかについて。

ディストリはfedora7を選択しました。

まずはcolinuxからインストーラをダウンロードする。

今回はすべてデフォルトの設定でインストールしました。（ディストリビューションはFedoraを選択）

インストール後、フォルダの中にFedora-7-xxxxxx.exe がダウンロードされているので

ダブルクリックして実行する。（このときStart-Fedora-7.bat が作成される。）

Start-Fedora-7.bat に"eth1=tuntap"を下記のように追加する。

eth0=slirp,,tcp:5901:5900 eth1=tuntap ro

これでeth0は外へeth1はローカルとなる。

FedoraとWindowsのネットワークの設定を行う。

3.1　fedoraのネットワーク

# vi /etc/sysconfig/network-scripts/ifcfg-eth1

DEVICE=eth1
TYPE=Ethernet
ONBOOT=yes
IPADDR=192.168.1.2
BROADCAST=192.168.1.255
NETWORK=192.168.1.0
NETMASK=255.255.255.0
GATWEAY=192.168.1.1

# service network restart

3.2 Windowsのネットワーク設定

Windows側ではeth1=tuntapの設定を追加したので、「ネットワーク接続」のウィンドウには

「ローカルエリア接続２」のアイコンが作成されている。

このプロパティからIPを以下のように編集する。

IPアドレス 192.168.1.1

サブネットマスク　255.255.255.0

設定をしたら再起動して、Windowsのコマンドプロンプトからネットワークが通っているか確認する。

ping 192.168.1.2

で応答があればOK

Start-Fedora-7.bat を毎回ダブルクリックするのは面倒なうえに、ウィンドウが２つも立ち上がって

しまうので、Winowsのサービスとして電源ON時にバックエンドで自動的にFedoraが起動するように設定する。

まずはインストールしたディレクトリにfedora.conf をつくり、Start-Fedora-7.bat のオプションの部分（"colinux-daemon.exe" 以外）をコピーする。コマンドプロンプトでインストールディレクトリに入り、下記コマンドを実行する。

colinux-daemon.exe @fedora.conf --install-service

コントロールパネルの「管理ツール」から「サービス」を選択しスタートアップの種類を自動にする。

1~4によりパソコンを起動すると、Fedoraが自動で起動する。

理由は以下。

１.カスタマイズなしに早い
firefoxユーザーがよくそれ「firefoxでもできるよ」というケースはほとんどがアドオンを追加したりabout:configを変更したりするものです。
そのような作業をすることで得られる効率と、なにもいじらなくても得られる効率では後者のほうが削減時間の絶対値が多いことがほとんどです。
なので多くのケースではoperaを使うほうが合理的です。

２.高セキュリティ
IE向けの攻撃とは無縁です。
ユーザーが少ないためセキュリティホールをつかれることも少ないですし。セキュリティ関係のアップデートも比較的早いです。

３.FireBug相当の機能がデフォルトで入っている
Firefox のアドオンのなかでも、人気の高いFireBugに類する機能のDragonFlyが、Operaにはデフォルトで実装されています（9.5以降）

（関連）OperaでFireBug相当の機能を使う方法

４．開発者向けツールがデフォルトで充実している
Drafonfly以外にも、開発者向けのツールがデフォルトで実装されています。

（関連）Operaに実装されている開発者向けツール一覧

５.使える履歴検索
アドレスバーをGoogleツールバーと同様に使うと、履歴検索が可能になります。
文字をアドレスバーに入力するだけで履歴のページ全体から拾ってくれるので、「こないだみたサイトＵＲＬなんだっけな」って時に非常に使えます。

６.充実したショートカットキー
opera 9.5以降は設定を行うことでそれ以前まで利用できたキーボードショートカットを利用することができます。（参考）Operaを使いこなすために最低限必要な2つの設定

タブを作成：Ctrl+T
右のタブへ移動：（フォーカスがブラウザ画面で）「２」打鍵
左のタブへ移動：（フォーカスがブラウザ画面で）「１」打鍵
戻る：（フォーカスがブラウザ画面で）「ｚ」打鍵
進む：（フォーカスがブラウザ画面で）「ｘ」打鍵
任意の<a>タグにフォーカスをあてる：「a」打鍵
クリックできるものなら、どこでも移動：shift+方向キー
Ctrl+Shift+クリック：リンク先をバックグラウンドで新しいタブに開く
（アイコンを画像の上にもっ来て）Ctrl+クリック：画像をダウンロードして保存

戻る進むがzxキーで操作できるのは、左利きユーザにはうれしいです。

（関連）Opera マウス操作無しでブラウザ画面にフォーカスする方法、Opera マウス操作無しで「新しいタブを作成する」方法、Opera マウス操作無しで「右のタブに行く」方法 、Opera マウス操作無しで「左のタブに行く」方法、Opera マウス操作無しで「戻る」方法 、Opera マウス操作無しで「進む」方法、右クリック操作なしで画像を保存する方法 、Opera マウス操作無しでリンクをバックグラウンドの新規タブで開く方法、Opera マウス操作無しでブラウザ画面にフォーカスする方法

７.携帯＆Wiiブラウザの表示確認
PCブラウザとしてのシェアは少ないOperaですが、Wiiのデフォルトブラウザに使われていたり、ケータイブラウザのシェアは高いです。直接PC版operaで表示するわけではありませんがwiiやモバイルコンテンツを開発する際にOperaの特徴を知っておいたほうが役に立ちます。

８.スピードダイヤル
新規タブを立ち上げたときに出てくる最初のページです。所定の位置にURLを書き込むだけで、サムネイル付きリンクが自動生成されます。軽いので、快適に使えます。
この機能だけでoperaを使う価値があると思います。
 

９.高機能RSSリーダー
Operaに実装されているRSSリーダーが、非常によくできています。

特徴としては
１．購読記事のなかから、検索をかける事ができる。
２．動作が軽い
３．UIがいい

などがあります。

（関連）OperaのRSSリーダを使ってみた

１０.デフォルトでUser.jsが利用できる
Greasemonkeyなんかをインストールしなくてもそのまま同様のUser.jsを利用することができます。
 

１１.gmailが1.7倍速で使える
Operaのメーラー：M2をGmailのメーラーとして使うと、Gmailをそのまま使うより、1.7倍は速くなります。
UIなどのユーザビリティを考えると、体感速度は10倍以上違います。

（関連）OperaでGmailを1.7倍速くする方法

番外編.javascriptで不具合が起こりやすい
javascriptでブラウザ互換の問題が発生した場合はたいがいoperaでその異常は発生しますw
そのためoperaを使っていればそうしたケースに非常に気付きやすいです。

追記：2008.07.20.15：30
一部作成中の段階の間違った記事の内容がそのまま出ていた部分を修正しました。