2008年6月30日月曜日

 

VM Ware Player インストール

VMwareの設定ファイルvmxのguestOSについてメモ VMware PlayerにWindows Vista β2 をインストールするまとめ Windows Vista上でVMware Playerを使ってLinuxを動かす QEMU on Windows QEMU on Windows Download VMware Player VMware ServerとVMware Player 2の試用 本当に無償で使える「VMware Player」 200個以上のVMware Player用のOSイメージを無料でダウンロード 「VMware Player」 設定方法 Windows XP バージョン

2008年6月25日水曜日

 

【モバイル】携帯サイトXHTML宣言

前回まとめた時に、各サイトではXML宣言は「XHTML Basic 1.0」を推奨してるところが多かった。
「XHTML Basic 1.0」は本当に基本の必要最低限のみが定義されてるらしい。
これは旧型の機種にも対応していることが、推奨理由と思われる。

XHTML Basicのサンプル

<?xml version="1.0"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"   "http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
   <title>...</title>
  </head>
  <body>
   ...
  </body>
  </html>

ところが、i-modeでは外部CSSファイルを適用できずインライン要素のみ対応している。
そして「XHTML Basic 1.0」ではスタイル要素が定義されてない(本来は排除されるべき物理要素なので)。
シンプルなCSSを使わないテキストで作るか、比較的新めの機種(FOMA以降)で対応している「XHTML Mobile Profile」を使うか。
「XHTML Mobile Profile」は「XHTML Basic 1.0」をモバイル向けに拡張した仕様であり、style要素の他に<b>タグや<small>タグ、<hr>タグが使えるようになっている。

XHTML Mobile Profileのサンプル

<?xml version="1.0"?>
  <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"   "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
   <title>...</title>
  </head>
  <body>
   ...
  </body>
  </html>

CSSファイルに対応しないi-mode・L-mode、Softbank在来機や、「XHTML Mobile Profile」をサポートしてない機種でスタイルを変えるには「XHTML 1.0 Transitional」を使う。
旧世代機種にも対応させてデザインもするならばこれが良いかもしれない。
ただ、PCブラウザ用なので携帯には規格が大きいことと、非推奨のコーディングになるのでSEO的に問題。
「XHTML Mobile Profile」はモバイル用なのでジャストサイズ。

XHTML 1.0 Transitionalのサンプル

<?xml version="1.0" encoding="shift_jis"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
  <head>
    (文書のヘッダ)
   <title>文書の題名</title>
  </head>
  <body>
   (文書の本体)
  </body>
 </html>

文字コードはUTF-8でも大丈夫らしい。<meta>タグでの文字コード指定は必要。
各キャリアごと独自の宣言についても調べたい。

参考

モバイルでのXHTMLとCSS - miniturbo.org
次世代機向け規格・XHTML モバイル・プロファイル 1.0 - しらぎくさいと
モバイル機器向けXHTML仕様 - My First HDML

ラベル:


2008年6月24日火曜日

 

【モバイル】携帯サイト・参考サイト、サンプル

携帯サイトを作るための注意点やXHTMLの特性のまとめ。テンプレートとか。
技術の進歩がすごいので古い情報の可能性も考えて日付参考に。

携帯サイトHTMLに関して

携帯用CSSに関して

携帯サイト開発に役立つ技術

参考サイト

技術的にも各キャリアや世代ごとの違いで錯綜してる上に、デザインテンプレートも優良デザイン集も見当たらない。
無料の全キャリア・シミュレータ欲しい。プラグインであれば良い。
Opera mini シミュレータは日本語入力できなかったし使いづらかった。

追記
3キャリア対応の携帯エミュレータ。
style要素を正確に適応する等エミュレータとしては完璧ではないが便利。
実機による最終的な調整は必須。
画像保存時の設定で携帯ブラウザでだけ表示されないこともある。

携帯サイトビューワ - gooモバイル

ラベル:


2008年6月22日日曜日

 

【symfony】XREAレンタルサーバでsymfonyを使う設定

XREAにはあらかじめsymfonyがインストールされている。
コマンドで確認。ヘルプが返される。

$ symfony

CGI版のPHPに切り替える

XREAレンタルサーバのPHPモジュールはセーフモードの設定になってるので、 キャッシュ、ログ・ファイルの書きだしができない。
そこでCGI版のPHPモジュールを利用するように、.htaccessに記述を追加する。

追記
詳しくは以下のXREA公式サポートを参照。特定ファイルのみCGI版にしたり、独自の「php.ini」を設置して文字コードやSQLiteやファイルの制限を設定できる。

PHPをCGIとして動かす方法について - XREA&CORE SUPPORT BOARD

PHPの拡張子を変更する

.phpがApacheのモジュールで占有されているから・・・と推測されますが原因は不明とのことでPHPスクリプトファイルの拡張子をデフォルトの「.php」から変更する。ここでは「.phtml」にする。 以下の文を.htaccessに追記。

RewriteRule ^(.*)$ index.phtml [QSA,L]
.phtmlファイルをCGI版PHPモジュールで処理する設定も記述する。
AddHandler application/x-httpd-phpcgi .phtml

symfonyプロジェクトを作成した際、外部からアクセスされる「web/」ディレクトリ下に存在する.htaccessを編集することにした。
RewriteRule ^(.*)$ index.php [QSA,L]をコメントアウトして上記2行コードを挿入。

デフォルトのファイルパスを変更

symfonyは多くのディレクトリで構成されており、mod_rewrite機能を使ったリダイレクトで外部からは意識されないようになっている。
よってファイルパスなどの生成はシステムが補うことになるが、SCRIPT_NAMEを利用して行っている。
もし「index.phtml」から「css/style.css」と指定した場合、パスは「/index.phtml/css/style.css」となりエラーになる。
そこでSCRIPT_NAMEを変更する。プロジェクトの基本設定ファイル「/apps/myapp/config/config.php」を編集。$_SERVER["SCRIPT_NAME"] を確認してwebルートディレクトリを設定。

$_SERVER["SCRIPT_NAME"] = "";

参考

xreaレンタルサーバでsymfonyを使う - dozo dokuwiki.php

ラベル:


 

【Symfony】PEARによるインストール

svnによるインストール方法もあります。以下参照。
symfony のインストール - ymfony book 日本語ドキュメント
SVNリポジトリからsymfonyをチェックアウトする - The Definitive Guide to symfonyの下翻訳
symfonyのインストール - symfonyの奏でかた

PEARを最新に更新する

ルートディレクトリあたりで以下のコマンド実行。

$ pear upgrade PEAR

SymfonyチャネルをPEARに追加

続けて以下のコマンドでSymfonyチャネルを追加。

$ pear channel-discover pear.symfony-project.com

このチャンネル内で利用可能なライブラリを確認。Symfonyが追加されてることを確認。

$ pear remote-list -c symfony

Symfonyインストール

$ pear install symfony/symfony

成功すればインストール完了。 以下のコマンドで確認。

// Symfonyのバージョンを調べるコマンド
$ symfony -V
// コマンドラインから呼び出せるタスク取得
$ symfony -T

以降、システムの構築にはsymfonyコマンドを使って行う。
Symfonyがインストールされたディレクトリは以下のコマンドで取得。

$ pear config-show

インストールディレクトリのカスタマイズ設定

以下の3つはインストール先を好きな場所に設定可能。

$ pear config-set doc_dir [ドキュメントディレクトリ]
$ pear config-set data_dir [スケルトン・モジュール等ディレクトリ]
$ pear config-set test_dir [テストディレクトリ]

以上はSSHでログインしてコマンド実行したが、用意したサーバがXREAなのでデフォルトでSymfonyがインストールされている。XREAでのSymfony設定は別記する。
準備が整ったので、Symfonyを使ったシステムを構築していきます。

ラベル:


2008年6月21日土曜日

 

【PHP】Symfony参考サイト【Framework】

CakePHPも浅くしか触ってないのに、Symfonyに手を出す。国際的には主力らしいので。
別のプログラムに無理やり導入することにした。
Ethnaも興味あるけどデフォルト文字コードがEUC-JPということで後回し。

The Definitive Guide to symfonyの下翻訳
マニュアルの日本語訳サイト。直訳ぽさもあり。
symfonyブック 日本語ドキュメント(暫定版)
上サイトと同内容。ちょっとした補足もあり。
symfony - dozo dokuwiki.php
インストールから基本的な開発・フォーム入力からのメール処理、他Ajaxを使う方法など。
レンタルサーバXREAでのSymfonyの使い方もあり。
サーバのことと、一番分かりやすいのでここをなぞって覚える。
PHPのフレームワークSymfonyでWebアプリ作成(1)- minfish.jp/blog:
Symfonyで作るソーシャルブックマーク。
symfonyのインストール - symfonyの奏でかた
サイト名が素敵。「おいしいCakeの食べ方」みたいな。
symfony インストール - nfoLinux
もっともシンプルなインストールガイド。
[php][symfony] symfonyは専用サーバーでないとインストールできない? - ぷぎがぽぎ
本番用システムの実装方法。
ローカル等でテスト開発した後、Sandboxでパッケージ化してサーバにアップする。

感想

分かりやすい説明サイトが少ない。 CakePHPでは豊富にある開発サンプルなどが少ない。
インストール等にコマンドラインが必要なのがネックなのか、 PHP4にも対応するCakePHPと比べ、PHP5のみなのが原因か。
何となく構造・モジュール化が細分化されてて細かい。
テストフレームがあるのは良い気がする。

ラベル: ,


2008年6月19日木曜日

 

【Flash】SWFObjectを使ったswfファイルの埋め込み

お手軽にSWFObjectでswfを埋め込む方法 - trick7.com blog

  • ダウンロード

    SWFObject: Javascript Flash Player detection and embed script - deconcept
    > Download(Download SWFObject 1.5 )
    マニュアル等もあり。最新ヴァージョンは以下。

    swfobject - Google Code
    から「swfobject_2_0.zip」をダウンロード。最新は「Download > SWFObject 2.1 beta7(update:Jun 06)」。

  • 使い方

    
    <script type="text/javascript" src="/js/swfobject.js"></script>
    <div id="flashcontent"> swfの代価テキスト。サムネイル画像やSEO的な何か。 </div> <script type="text/javascript"> var so = new SWFObject("hoge.swf", "hogemovie", "200", "100", "7", "#336699");
    //"swfへのパス", "ムービーの名前", "swfの幅", "swfの高さ", "FlashPlayerのバージョン", "背景色" so.write("flashcontent"); </script>

    id="flashcontent"」の部分はそれぞれ任意のユニークなもの。swfファイル名が妥当。
    詳細な説明や他のパラメータについては以下から。

    SWFObjectのドキュメントを日本語に翻訳してみたよ - trick7.com blog

  • 関数化

    以下の様にすれば、idを指定する手間がない。「<script></script>」内に埋め込まれる。

    
    var so = new SWFObject("hoge.swf", "320", "260", "8", "#FFFFFF"); document.write(so.getSWFHTML());
    

    関数化してjsファイル等に記述しておけばHTMLソースがシンプル。

    // 関数化したJavascriptソース
    
    function setFlash(hoge, width, height) {
     var so = new SWFObject("絶対パスで指定", "flash", width, height, "8", "#FFFFFF");
     so.addVariable("hoge", hoge);
     document.write(so.getSWFHTML()); }
    
    // HTMLソースでの埋め込み
    
    <script type="text/javascript">setFlash("test", 640, 500);</script>
    

ラベル:


2008年6月16日月曜日

 

【CSS】IEでのフォントサイズ

フォントサイズを絶対単位(pxも含む)で指定すると、IEでフォントサイズの変更ができなくなるので、可能にするフォントサイズに関するCSSハック。
“%”指定が無難。

“px”指定してもフォントサイズ変更可能にするハック

フォントサイズに関するCSSハック - Go my way


body {
    font-size: small !important; /* IE 7向け */ 
    font-size: x-small; /* IE 6以下 */ 
}
html>/**/body {
    font-size: 13px; /* モダンブラウザ向け */
}

“em”指定をIEで可能にするハック

相対指定を行う場合、“em”より“%”で指定を行う方が上手くいく。
“em”指定したい時もあるので、そういう場合は最初に“%”指定を行う。

[CSS]気をつけたいIE 7のバグ -CSS-Discuss - コリス
IEのフォントサイズのバグ


body{
    font-size: 100.01%;
}

※Operaでの継承バグの回避のため、100%の代わりに100.01%を使用

キーワード指定のサイズを揃えるハック

フォントサイズに「small, middle」などのキーワード指定を行った場合、IEの描画モードによってサイズが異なる。


body{
    font-size:small;
    voice-family:"\"}\"";
    voice-family:inherit;
    font-size:medium;
}

※voice-family hackを使用

関連

モダンブラウザ向けCSSハック

ラベル: ,


This page is powered by Blogger. Isn't yours?

登録 投稿 [Atom]

Google