2011-06-07

WEBデザインパターンのリンク

Yahoo!
http://developer.yahoo.com/ypatterns/

５年前ぐらいの資料ですが、GREEキャリアの事例
http://labs.gree.jp/Top/Study/20060615/Report.html
http://labs.gree.jp/Top/Study/20060731/Report.html

2011-06-07

Seleniumのメモ

技術-WEB全般

■Selenium概要
次のコンポーネントから構成されている。
　Selenium Core - Selenium本体
　Selenium IDE - Webブラウザから編集を可能にするFirefox 拡張機能
　 Selenium Server - リモートサーバ経由で試験を実施するためのコンポーネント

Selenium CoreはテストするWebアプリケーションと同じサーバで実行
Selenium Serverは、JavaScriptを使って画面遷移をテストすることができる
Selenium IDEでは手軽にテストをすることができる

■PHPUnitとSeleniumでテスト

PHPUnitでSeleniumのテストパターンを書く事ができ、
Seleniumサーバーを通して実際にブラウザでのテストを実行、
その結果をPHPUnitで確認できる
[テストケース]→[PHPUnit]→[Selenium Server]→[ブラウザ]→[テストサーバ]

●準備
XAMPPがインストールされていること．
PHPUnitとSelenium Serverをローカルマシンにインストールします。
　PHPUnitはPEARを通してインストール．
チャネル

$ pear channel-discover pear.phpunit.de
　$ pear channel-discover pear.symfony-project.com
　$ pear install phpunit/PHPUnit

Selenium Serverの起動

　java -jar /[展開したディレクトリへのパス]/selenium-server-2.0b3/selenium-server.jar　

[Win+XAMPP]-----
参考：http://d.hatena.ne.jp/sakana_eie/20110403/1301778000

1. php.ini

[php.ini] を開き、下記の行のコメントアウトを外す。

extension=php_curl.dll

2. PHPUnit

コマンドプロンプトを管理者権限で起動し、下記を実行する。

cd C:\xampp\php
pear channel-update pear.php.net
pear upgrade pear
pear channel-discover components.ez.no
pear channel-discover pear.phpunit.de
pear channel-discover pear.symfony-project.com
pear install -a phpunit/PHPUnit
pear install -a Testing_Selenium-beta
phpunit --version

3. Selenium Server

http://seleniumhq.org/download/
にアクセスし、[Selenium Server] をダウンロードする。
ここでは [selenium-server-standalone-2.0b3.jar] を
[D:\xampp\selenium] に配置したものとする。

コマンドプロンプトを管理者権限で起動し、下記を実行する。

java -jar D:\hoge\selenium-server-standalone-2.0b3.jar

4. テストケース

[D:\selenium\selenium-test\]

テストケースを書く
参考：http://www.phpunit.de/manual/3.4/ja/selenium.html
　ポイントは以下の３点．
　１．PHPUnit/Extensions/SeleniumTestCase.phpをrequireしておく。
　２．テストケースの基底クラスにPHPUnit_Extensions_SeleniumTestCaseを指定する。
　３．テストを実行するブラザを指定する

./case/function/SampleTest.php

setBrowser('*safari');
$this->setBrowserUrl('http://www.google.co.jp/');
// $this->setSleep(3); //=> waitでの待ち時間を変更する。標準は1秒。
}

public function testTitle()
{
$this->open('http://localhost/');
$this->clickAndWait('link=テストリンク');
$this->assertTitle('テストサイト');
}
}

※要素を指定するElement Locatorは、次の方法がある
・リンクに含まれる文字列で指定（例：link=新規登録）
・JavaScriptでDOMをたどって指定（例：document.forms[0].elements[0]）
・XPathで指定（例：//input[@name='foo']）
　（例

テキスト

の場合、//div[@class='caution']）

※例：
//ドロップダウン　string addSelection (string $locator, $optionLocator)
$this->select("searchDropdownBox", "label=本");

//インプット　string type (string $locator, string $value)
$this->type("twotabsearchtextbox", "selenium");

//クリック　string click (string $locator)
$this->click("//input[@type='image']");
//これはをクリック

//ページロードを待つ string waitForPageToLoad ([integer $timeout = NULL])
$this->waitForPageToLoad("30000");

//クリックして待つ string clickAndWait (string $locator)
$this->clickAndWait('link=Blog');

//タイトルが $title と異なる場合にエラーを報告します。
$this->assertTitle($title);

//$textが含まれていない場合にエラーを報告
$this->assertTextPresent($text);

- - - - -

6. テストしてみる

コマンドプロンプトを起動し、下記を実行する。

cd C:\xampp\php
phpunit D:\xampp\selenium\selenium-test\test.php

ディレクトリを指定した場合はディレクトリにある全てのテストが実行されます。

========================
参考：

これはすごい! Web案件必須 Selenium - 人気急上昇中自動テストツール
http://journal.mycom.co.jp/articles/2006/09/29/selenium/index.html
PHPUnit と Selenium RCで機能テストをやってみる
http://www.exgear.jp/blog/2010/10/phpunit-seleniumrc/
　PHPUnitインストール
　http://www.phpunit.de/manual/3.4/ja/installation.html
http://www.phpunit.de/manual/3.4/ja/selenium.html
http://colo-ri.jp/develop/2008/03/selenium_rc_phpunit3.html
ブラウザを選ばずWebテストを自動化するSelenium
http://www.atmarkit.co.jp/fjava/rensai4/devtool07/devtool07_1.html
SeleniumでWebアプリケーションテストを自動化
http://thinkit.co.jp/free/article/0705/2/1/
Selenium徹底入門
D:\usr\document\WEB+DB PRESS総集編［Vol.1〜36］\wdp_pdf\vol36\vol36_041-072.pdf

WEBアプリ開発に便利な機能＆負荷テストツール集
http://phpspot.org/blog/archives/2009/05/web_45.html

2011-06-07

WEBチーム開発のツールに関するメモ

技術-WEB全般

コミュニケーションツール
　PukiWiki
　　各タスクの状態、担当者、期限をWikiで管理
　Skype
　Google Apps
Zoho
http://www.zoho.jp/docs/
http://www.zoho.jp/wiki/
http://www.zoho.jp/projects/

画面の作成
　Webデザインパターン(http://www.welie.com/patterns)
　　画面スケッチを眺めて、適用可能なパターンを見つける
　　　パターンを利用するメリットはプログラマとデザイナの共通認識
　　パターン決定後、
　　　デザイナは、パターンをHTML+CSSで実装
　　　プログラマは、デザイナが実装したデータを利用して、Smartyテンプレートに組み込んでいく
　画面テンプレート
　　ヘッダ部分
　　コンテンツ部分
　　　レフトカラム
　　　メインカラム
　　　ライトカラム
　　フッター部分

スケジューリング
　1週間単位
　　毎週XX曜日にレビューミーティング
　　　進捗確認、実装する機能やデザインについて検討
　　　

2011-05-17

WEBサイトの制作についてのヒント

技術-WEB全般

ホームページを作ったことがない方から、
「ホームページ制作はどうやればできるのですか？」
と、よく質問があることなので、簡単にメモを残しておきます．

HP制作とひとえに言えど、複数の方法があります．
１．一般的なHP制作（WEBサイト制作）
２．手軽にHTML知識なしで作れるHP制作
３．CMS(WordPress)を自分で導入するHP制作
などがあります．

========================================
１．一般的なHP（WEBサイト）制作
========================================

■作る前にすること

・HPのデザインを見る

http://web-selection.com/
http://www.goodeza.net

・HPで作成したいテーマについてのアイデアを考える
　
　ブログ、ニュース、コーポレートサイト、キャンペーン、etc

・HPのデザインラフ(ワイヤーフレーム）を作る
作成するHPの手書きのラフスケッチを作ります．

こんなツールあります．
http://e0166.blog89.fc2.com/blog-entry-872.html
http://cacoo.com/
https://gomockingbird.com/
http://mff2.blog109.fc2.com/blog-entry-229.html

・HPのデザイン（カンプ）を作成する

一般的に、Adobe PhotoshopやFireworksというソフトを使うことが多いです．
Photoshopなどのソフトウェアは高いが、
学生の場合、アカデミック割引がある．
http://kakaku.com/item/K0000105458/?lid=ksearch_kakakuitem_title
http://www.adobe.com/jp/joc/store/education/

ソフトはセットになったPremium版と単体があるが、
WEBやるなら、WEB PremiumがあればOK.

もし、お金をかけたくないのであれば、
無料ツールもある．
これは、Googleで探してみてください．
例えば、PhotoshopみたいなものはGimpというソフトがある．

・スライスする：HPのデザイン（カンプ）から素材を切り出す

作成したデザインから、ロゴやボタンなどの画像を切り出す「スライス」という工程に入る．
これは、PhotoshopやFireworksがあれば、サクサクっとやりやすい．
例えば、このスライス工程と、その後の工程は、下記サイトを見るとイメージしやすい
http://ascii.jp/elem/000/000/555/555233/index-2.html

・動的サイトか静的サイトが必要かを見分ける

　動的サイトと静的サイトの説明はこちら
　http://bushi18.weblike.jp/webdelivery/?p=130

　動的サイトが必要な場合は、WEBエンジニアが必要です．
　WEBエンジニアの主な役割としては、WEBプログラミング、WEB+DBサーバーの構築です．

　自身で動的サイトを作りたい場合は、PHPやRubyといったWEBプログラミング言語と、データベースとしてMySQLの使い方を学ぶとよい．

　ですので、以下、静的サイトをつくる人のための話になります．

■WEBサイトを作る

・HTMLを覚える

一番手始めに、
自分のパソコン上に、index.htmlというファイルを作って、
ファイルには、からまでを記述して保存します．
作成したファイルをダブルクリックと

- - - - -

タイトル

本文

- - - - -

基本がわかれば、応用．
HTMLの基本がわかるようになれば、CSSも学習しなければならない．
どんなコードを書けば、どんな仕組みなるかを動かして覚える．
自分で課題設定することが大事．

HTMLだけで完結するホームページ作成は、こちらを参考に．
http://www.dspt.net/

お手本や見本も探してみよう．例えば、こんなの．
http://www.coolwebwindow.com/

できれば、ここらへんの基本が理解できれば、
HTML制作ツールである、Dreamweaver(有料)やAptana（無料）
の使い方を覚えるようにすれば、かなり作成が楽になる．

内容は膨大なので、書籍やブロガーの情報を参考にすればよい．
例えば、こんなサイトをさがすと良い
http://e0166.blog89.fc2.com/blog-entry-797.html
他にも、nanapiなんかのサイトで、初心者向けのトピックスは見つけやすいと思う．
http://nanapi.jp/21022/
http://nanapi.jp/20735/

■HPを公開する

http://www.xrea.com/
を使えば無料でWEBサーバーを手に入れることができる．
これを利用してホームページを公開することができる．
制約はあるが、勉強するには十分なはずだ．

基本的な仕組みを理解しよう

[PC]--[Internet]--[XREA(WEBサーバー)]--[Internet]--[閲覧者]

[PC]-->[XREA(WEBサーバー)]
に向けて、PCで制作したHTML+CSS+画像などをアップロードする必要がある．

アップロードするためのソフトウェアとして、FTPソフトが必要だ．
有名なものに、FFFTPやFilezillaなどのソフトウェアがある．
このために、FTPという用語と、その仕組みを簡単に理解する必要がある．
本がよくまとめられてるので、何か一冊読んでみるといいが、
WEBサイトにも解説したサイトはいくつかある．
例えば、
http://first-web.jp/nyumon/
http://html.seo-search.com/html05.html

さて、XREAに話を戻すと、基本的な知識が手に入ったら、
下記サイトを参考に、どうすればできるか、試行錯誤してやってみるのがよい．
http://www.xreab.com/

以上、十分に理解できる話ではないかもしれないが、
ひと通り、WEB制作過程について、全くの初心者が覚える常識的な話である．
これを手とり足取り教えてもらいたければ、専門学校に通うとよい．
30万円あれば、ある程度教えてくれる．
http://school.dhw.co.jp/senka/
しかし、学校では実践的な内容は教えてくれない．
現に、僕の隣にいるWEBデザイナーは、
「ツールの操作方法は学校で教えてくれた．しかし、まだ知らないことが多すぎる」
と言っている．彼は課題にぶちあたる度に僕から学んでいることが多いようである．

========================================
２．手軽にHTML知識なしで作れるHP
========================================

めんどくさいことはいい、HPさえ作れればいいんだ！って人には・・・
http://jp.jimdo.com/

参考：
http://nanapi.jp/18270/

こういうのは、誰でもできるように作られたサービスなので、
柔軟性にかけるが、ニーズによっては、これで十分だ．

他にも、お店のホームページを作りたければ、
http://omisenomikata.jp/
というサービスもある．

========================================
３．CMS(WordPress)を自分で導入してカスタマイズするアプローチ
========================================

こういったサイトを見て、やってみるのが早道．
http://mage8.com/wordpress.html

とにかく、自分でやることが大事．
手順と違った現象が発生すれば、パソコンやサーバーやソフトウェアの前提（バージョンや対象）
もしくは、操作に違いがあるはずなので、その違いを調べて、なぜおかしいのかを追求することで力がつく．
最初から、マニュアルに頼り切らないのが大事だ．

あとは、わからないことがあれば、知っていそうな人に聞いてみる．