labs blog

3キャリアに対応したウェブサイトを手軽に作るにあたり
最低限、抑えておかなければいけない手順とポイントを記述します。

●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

詳細は以下から

 

Xenを導入することで得られるメリットとして

複数マシンを一台に集約することにより
-省スペース
-省電力
-管理コストの削減
を可能にし、かつ

低利用率CPUを統合したり、大容量メモリを複数システムで分割共有することで
リソースの最適化を図ることができる。

ということが挙げられます。


というわけで、上記のメリットを得るために実際にXenを導入してみました。


導入サーバ環境CentOS5.2


①まずXenをインストール

yum install xen


②ドメインUをインストールする

[root@localhost ~]# virt-install --nographics
↑インストールを開始する。
今回はCUIで利用するので --nographicsのオプションをつけました。

What is the name of your virtual machine? vcentos
↑任意の仮想マシン名を決定する。

Would you like a fully virtualized guest (yes or no)? This will allow you to run unmodified operating systems
↑完全仮想か準仮想かを選ぶことが出来る。準仮想にする場合は no を選択(今回はnoを選択しました)。

How much RAM should be allocated (in megabytes)?
↑仮想マシンへ割当てるメモリ量を決定する(単位:MB) 128で構築可能みたいですが今回は余裕をみて256と入力。

What would you like to use as the disk (path)? /var/lib/xen/images/vcentos.img
↑仮想ディスクイメージのファイル名を決める。

How large would you like the disk (/var/lib/xen/images/vcentos) to be (in gigabytes)?
50

↑最低2GBくらいでシステム構築可能らしいです。

What is the install location?
http://ftp.riken.jp/Linux/centos/5.2/os/i386/
↑仮想マシンインストールパッケージの取得先を入力する。

ここまで入力するとインストールが始まります。

OSのインストール画面がCUIで表示されるので、そこで自分の環境にあった環境設定を行ってください。

ちなみに
カーソル移動はカーソルキーとTabで行い、選択はSPACEキー、決定はENTERキーです。
はじめは選択方法がわからず、少し嵌りました。。。

インストールが終わると、rebootを要求してくるので、Rebootを選択してENTER


③ドメインUにログインする

起動時に

'仮想マシン名' login:
というプロンプトが立ち上がるので、
rootユーザー、パスワードはinstall時に決めたものでログインできます。


④必要最低限の使い方

ドメイン一覧を見る
xm list

ドメインOに戻る方法
Ctrl+]

ドメインUへ接続
xm console <仮想マシン名>

接続時に
xenconsole: Could not open tty `/dev/pts/1'

とエラー表示され仮想マシンにつながらない場合はxenconsoledが落ちている可能性があります。
xenconsoledとコマンド入力した後
再度コンソール接続を行ってみると良いかもしれません。


⑤DomainUを削除する方法

-仮想マシン設定ファイルを削除する
/etc/xen/"仮想マシン名"

-仮想マシンインストール先のディスクイメージファイルを削除する
仮想マシン作成時に作成したimgファイルのこと
ex. /var/lib/xen/images/vcentos.img

-上記のことを行いrebootする。

xm listで先ほど削除したドメインUが一覧にないか確認してください。


Let's enjoy Xen!!


参考 http://centossrv.com/xen-domu-centos5.shtml

ソートは勿論のこと、列ごとの追加・削除、ドラッグアンドドロップでの並び替え、ページ分割
など様々な機能を備えたjqueryのプラグイン

flexgrid

Fedora Core 10 を試してみようと思い、いつもやっているようにbootファイルをsyslinuxを使ってusbに入れようと思っていると　Fedora LiveUSB Creater　を発見した。起動してワンクリックでブートusbを作れるのでかなり便利です。

「Django( pythonで作られたフレームワーク)はきれいにスマートにかけますよ」

という話を最近よく聞く。Google App EngineでもDjangoをサポートしているし、pythonやってみたという人もよく聞くので、もしかして流行っているかも。

個人的な感想としてDjangoのいいところは

「Pythonで書かれているというのもあって、モデルとデータベースAPIの部分が簡単に記述できてわかりやすい」

他にも良いところはありますが、それは日本語公式で（http://djangoproject.jp/doc/ja/1.0/）。ただ、レンタルサーバなどでDjangoを使うための設定は少し面倒な気がします。（今度一度やってみますが）

以下はDjangoの設定でつまりそうなところ
今回使用したサーバの環境はCentOS 5.2　Python2.5　Django-1.0.2

■Djangoインストール編
Djangoについて
Djangoのインストール手順
DjangoでのMySQLの設定
Djangoでsqliteの設定


■Django開発編
Djangoの開発サーバを数人で共有したい
render_to_responseにRequestContextを指定するのが面倒くさい
nohupを使ってDjangoのテストサーバをバックグラウンドで稼働させる方法


■Djangoデプロイ編
Apacheにmod_pythonをインストールして80番ポートでDjangoを動かす手順
mod_python上のDjangoで管理画面のcssが読み込まれないときのメモ


■その他
Djangoカテゴリ

用途別にフリーで素材がダウンロードできるサイトをまとめてみました。


■ベクター素材

Vecteezy

http://www.vecteezy.com/
カテゴリ別、ファイル別に絞って探すことができます。各ベクター素材のライセンスは、それぞれ異なるため個別に確認が必要です。（ライセンス別に絞って探すこともできます。）

Vector 4 free.com

先日のVim勉強会の中で、中級者として知っておいた方がよいコマンドをリストにしました。

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版

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