2012年5月22日火曜日

UXデザインのプロセス その2


今回はUXデザインとしてストーリーボード作成をします

前回の記事ではデザイン調査とペルソナ作成をしてみました。
このエントリでは、ストーリボードの作成をしていきます。

このエントリの目次

  1. ストーリーボードとは
  2. ストーリーボード作成の目的
  3. ストーリーの作成
  4. ストーリー作成のコツ
  5. ストーリーボードの作成
  6. さいごに

1.ストーリーボードとは

映像作品のプロセスでいう、「絵コンテ」にあたります。

2.ストーリーボード作成の目的

それは、ペルソナがしたいコトを提供する際、どのようなUXを提供するといいのか を追求するコトです。
このプロセスでは、実現可能性はそこまで深く考えず、とにかくペルソナが喜ぶようなシナリオを検討します。
そうするコトで、ペルソナが求めるUXに近づくことができるのです。

3.ストーリーの作成

ストーリーボードを作る前に、まずはそれのもととなるストーリーを考えます。
ペルソナの行動や関心を一区切りとして分割していきます。

このサイトを対象として、以下のように考えてみました。
ペルソナの名前を「太郎」とします。
ストーリー名:エントリの閲覧
  1. 太郎はあるワードで検索、結果に表示された記事の概要を見て当サイトへのリンクをクリックする
  2. 太郎はエントリを「ザッと」見て、目的に合致する内容だと「すぐに」思い、きちんと閲覧するコトにする
  3. 太郎はエントリに書いているサンプルコードや手順を、書いてあるとおりに「簡単に」試す
  4. 太郎は同じ話題を扱っているエントリを発見し、見に行く
  5. 以下、3. → 4. のループ

4.ストーリー作成のコツ

上でも述べましたが、コツは 実現可能性を無視しない程度に、とにかくユーザーにとって最高のシナリオを考えるコトです。

また、秘書型システム(このワードでググる)、道具型システム(このワードでググる)という考え方を知っていると、ストーリー作成の助けになります。

5.ストーリーボードの作成

以下のような絵を作成しました!


作成するときの注意点として、サービスの画面内容は書き込まないようにします。
なぜなら、書きこんでしまうと実際の画面を想定しまい、UXに集中できないからです。

6.さいごに

今回のエントリで、考えてなかった問題点が見えてきました。
エントリの出だしや当サイトの右カラムについて、検討の余地がありそうです。
「右カラムに美人時計が表示してるけど、誰得だよ…!」って思いました。

スケッチ、プロトタイプのプロセス に続く?!

参考書籍

2012年5月20日日曜日

HTTP Status Code を見るUIWebView のサンプルコード

はじめに

iOSの開発に手を出しました。
Objective-C は初でしたが、最初は意味不明でしたね。
特にメソッド呼び出しとデリゲートについて。

まあそれは置いておいて。

UIWebViewは簡単にWebページをブラウザできるのでよいのですが、なんとHTTP Status Codeを見れないようです。
404 Not Foundみたいな表示がそのまま出ちゃうと。
それはよろしくないので、HTTP Status Codeを見て、その後の処理を制御するサンプルコードを書いてみました。

このエントリの目次

  1. GitHubにあげたiOSプロジェクト
  2. ソースの重要な箇所
  3. 閑話休題 「GitHub for Mac」について
  4. さいごに

1.GitHubにあげたiOSプロジェクト

コチラになります。

2.ソースの重要な箇所

以下に貼付けます。
GitHubのソースの47〜77行目にあたります。
コメントを読めば処理の概要は分かると思います。
- (void)kick:(NSString *)url
{
    NSMutableURLRequest *urlRequest = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:url]];
    
    //UserAgentをセットします
    NSString *userAgent = [webView stringByEvaluatingJavaScriptFromString:@"navigator.userAgent"];
    [urlRequest setValue:userAgent forHTTPHeaderField:@"User-Agent"];
    
    //urlにアクセスします
    NSHTTPURLResponse *response;
    NSError *error;
    NSData *responseData = [NSURLConnection sendSynchronousRequest:urlRequest
                                                 returningResponse:&response 
                                                             error:&error];
    //何らかのエラーが出たとき
    if ([response statusCode] >= 400 || error) {
        UIAlertView *alert =
        [[UIAlertView alloc] initWithTitle:@"エラー" 
                                   message:[NSString stringWithFormat:@"HTTP STATUS CODE:%d", [response statusCode]]
                                  delegate:self 
                         cancelButtonTitle:@"確認" otherButtonTitles:nil];
        [alert show];
    }
    //正常なレスポンスのとき
    else {
        [webView loadData:responseData MIMEType:[response MIMEType] 
          textEncodingName:[response textEncodingName] 
                   baseURL:[response URL]];
        [self setView:webView];
    }
}

参考にしたサイト
  1. How do I get the last HTTP Status Code from a UIWebView? | Stack Overflow
  2. Changing the userAgent of NSURLConnection | Stack Overflow

3.閑話休題 「GitHub for Mac」について

Mac向けにGitHub for Macというクライアントツールがあります。
GUIでソースのコミットなどがとても簡単にできます。

操作方法はデザイナーのためのGithub for Mac の使い方「リポジトリ作成編」 | KUROIGAMEN(黒い画面)が詳しいです。

さてGitHub for Macですが、このオクトキャットの仕草や表情がめっちゃ可愛い!!


普通のオクトキャットはまぁまぁくらいですが、この絵は衝撃的可愛さ!
アイコンもこの絵なので、Dockに追加すれば いつでも見られます。

あと、いろんな格好をしたオクトキャットがいるサイトを見つけました。
マリオとかロックマンとかゼルダのリンクの格好したやつもいます。

4.さいごに

GitHub for Macのオクトキャット可愛い!

(追記) UXデザインのプロセス その1


追記

このエントリではUXデザインのプロセスのうち、デザイン調査ペルソナ作成まで実施しています。
次のストーリーボードの作成についてはコチラ

UXとは

UXとはユーザーエクスペリエンスのこと。
UIとUXの違いとは?――日本で第一人者の話を聞いてみたい人へ | 自分戦略@IT研究所より引用させて頂くと、
UXとは一言で言うと、ハードやソフトなどのシステムを利用者が使用した時に経験する「使いやすい!」や「便利だ!」「気持ちいいー!」などの感情を、利用者に提供する際の価値として重要視するコンセプトです。

UIはインタラクションやデザイン、それに対しUXはサービスの使い心地(デザインだけじゃなくサービスの内容も含む)、といったところでしょうか。
よいコンテンツと美しいUIは、感動や気持いいといったUXを提供する、というコトです。

このシリーズのエントリはUXデザイン入門―ソフトウェア&サービスのユーザーエクスペリエンスを実現するプロセスと手法という本を参考に書いています。

このエントリの目次

  1. UXデザインのプロセス
  2. デザイン調査
  3. ユーザーモデリング(ペルソナ) 準備
  4. ユーザーモデリング(ペルソナ) 3つのペルソナ作成
  5. ユーザーモデリング(ペルソナ) 3つのペルソナまとめ
  6. 最後に

UXデザインのプロセス

UXデザインをきちんとすることで、ユーザの満足度を高めることができるはずです。

UXデザインのプロセスはこんな感じです↓
  1. デザイン調査
  2. ユーザーモデリング
  3. ストーリーボード
  4. スケッチ
  5. プロトタイプ
  6. 実装

以下に、各プロセスの大まかな内容や目的を示します。

・1.デザイン調査とは。
「ユーザがある状況である目的を達成しようとするときに、どのように振る舞うのか?」といった現状を調査し、そして「ユーザのニーズ」を掘り起こしていきます。

・2.ユーザーモデリングとは。
デザイン調査から得られたデータをもとにユーザーの特徴やニーズのパターンを検討し、デザイナたちが想定するターゲットを共有していきます。
手法としては「ペルソナ・シナリオ手法」や「5つのワークモデル」などがあります。

・3.ストーリーボードとは。
考えたペルソナをもとに、そのペルソナがそのサービスでやりたいコトをできるまでのストーリーを考えます。
これにより、デザインコンセプトを決定します。

・4.スケッチとは。
これまで得たデータをもとに、デザインを考えて色々なパターンを作っていきます。
デザインの「発散」です。

・5.プロトタイプとは。
作ったスケッチたちの中から良かったものを選び出し、より詳細に検証していきます。
デザインの「収束」です。

・6.実装とは。
ガンガンいこうぜのプロセス。

本エントリでは、
  1. デザイン調査
  2. ユーザーモデリング(ペルソナ)
を実施します。

2.デザイン調査

当サイトをサンプルに、デザイン調査をやってみます。

サイトに訪れて下さった方に直接お話を聞くのはコストが高いので、Google Analyticsからアクセス解析をしてユーザ層の把握をしていきます。

サイト訪問者の状況。
  1. アクセスが多い時間帯:
    平日の18:00〜26:00。ピークは0:00
  2. OSのシェア:
    Windows 60%(そのうち7が50%、XPが40%)、Mac 25%、Linux 10%
  3. ブラウザのシェア:
    chrome 40%、Firefox 30%、IE 20%、Safari 10%、Opera 2%。
  4. アクセスもと:
    Google 90%、Yahoo 8%、bing 1%
  5. アクセスが多い地域:
    東京 50%、神奈川 10%、大阪 5%、愛知 5%

サイトを訪れた目的。
  1. 検索ワードの話題と割合は「tizen」関連 33%、「Android」関連 30%、「JavaScript」関連 22%

パッとみ、MacやLinuxでChromeやFirefoxを使う、夜型のIT関係の人が仕事終わりに家からこのサイトを見ていると思われます。

これで訪問してくれる人たちの状況を洗い出しました。

3.ユーザーモデリング(ペルソナ) 準備

さて、ここからペルソナを考えていきます。

まず、世間のOSのシェアと比べます。
Windows XPのシェアが再び回復 - 3月デスクトップOSシェア | マイナビニュースによると、
2012年3月 時点で、Windows 92%、Mac 7%、Linux 1%
となっています。
当サイトのシェアは、それと比べると
Windows 約0.7倍、Mac 3.5倍、Linux 10倍
です。

Linuxのシェアが世間よりずば抜けて高いので、訪問してくれるのはギークな人が多いようです。

続いて、世間のブラウザのシェアと比べます。
ブラウザシェア推移グラフ (StatCounter Global Statsより) |Let's HSPによると、
20121年5月1日 時点で IE 53%、Firefox 20%、Chrome 18%、Safari 7%、Opera 2%
となっています。
当サイトのシェアは、それと比べると
IE 0.4倍、Firefox 0.7倍、Chrome 2.2倍、Safari 1.4倍、Opera 1倍
です。

IEのシェアが世間よりとても低く、ちょっと前までイケイケだったFirefoxもなかなか低いです。
Safariが多いのはMacユーザーの訪問者が多いからでしょう。
やはり、ネットに対して感度が高い人が多いようです(当ブログの話題を考えると当たり前か)。

最後に、世間の検索エンジンのシェアを比べます。
GA-Proによると、
2012年5月20日 時点でYahoo 52%、Google 46%
となってます。 あれ、bingは??
当サイトのシェアはそれと比べると
Yahoo 0.2倍、Google 2倍、bing 測定不能だが多い
です。

Googleが圧倒的に多くなっています。
予想通りです。


さて、今回最も重要だと思ったのが、検索ワードの話題と割合です。

もう一度 結果を書くと、
  • 「tizen」関連 33%
  • 「Android」関連 30%
  • 「JavaScript」関連 22%。

この3つの検索ワードをもとにペルソナを作っていこうと思います。

4.ユーザーモデリング(ペルソナ) 3つのペルソナ作成

まず「Tizen」で検索するペルソナについて。
Tizenとは、サムスンやLinux Foundationたちが推進するオープンソースのスマフホ向け新OSで、まだまだマイナーなワードだと思われます。
このワードで検索するのはいわゆるイノベーターでしょう。
CEATECなどのイベントにもよく行くのでは。
かなりの確率で男性でしょう。
年齢は20代後半〜30代でしょうか。

また、PCは複数台持っていて、Linuxをよく使ってそうです。
なぜならこのTizen、前まではUbuntu向けにしかSDKが提供されてなかった(今はWindows 7/XPでも提供されているようです)からです

平日の夜にアクセスが多いことを考えると、仕事だけでなく趣味でもプログラムをやっていると思われます。
このブログの訪問者の中でもトップクラスのスキルを持っていると思います。
Chrome使いが多そうです。
スマホは多分Android派で(Linuxユーザが多いはずなので)、もしかしたら2台持ち3台持ちなんてのもあるかも。

デザインよりも機能面を重視するタイプか。
基本的にツールやガジェット類は「便利に使えればメーカーなどにはこだわらない」というスタンス。。かな?
そして、「最初に結論を言え」というようなせっかちな性格。。か?


次に、「Android」で検索するペルソナについて。
当ブログでAndroidにきちんと触れたのは、MacでAndroid開発環境を構築する方法を書いたときだけです。
なので、Androidに興味を持ち始めた感じ。

Android開発をするのにMacを使うというのは、個人的にはけっこう珍しい選択肢だと思います。
ということはMacをメイン機で使用しているのではないでしょうか。
iOSの開発は既にしたコトがありそうです。

業務で「MacでAndroid開発」というのはあまりないと思いますので、こちらも趣味でプログラミングをやっているギークのはずです。
いわゆるアーリーアダプターで、かなりの可能性で男性だと思います。
使っているブラウザはChromeもしくはSafariでしょうか。

Apple製品が好きで、機能性はもちろんデザインにも重きをおくのでは。
ミニマルなアクア風デザインが大好き。
年齢は20代後半が多い気がします。
割とリア充(「Mac好き」の個人的なイメージ)。


最後に、「JavaScript」で検索するペルソナについて。
検索ワードを詳しく見ると「JavaScript 再描画」や「JavaScript 性能」などがあるので、AjaxバリバリのRIAを開発している中級者くらいのWebデベロッパでしょうか。
RIA開発にかかせないHTMLとCSSの知識も持ってるでしょう。
また中級者というコトで、Windowsユーザが多そうです。


また、超便利なWeb開発ツールであるFirebugがあるのでFirefoxユーザが多そうです。
年齢層は「Tizen」や「Android」のセグメンテーション(←「クラスタ」的な意味です)と比べて若そうです。
20代前半〜20代半ばが多いですかね。

プログラミングの話題なので、こちらも男性でしょう。


という訳で、「Tizen」「Android」「JavaScript」で分類したペルソナを作ってみました。

5.ユーザーモデリング(ペルソナ) 3つのペルソナまとめ

こんなんなりました。

ペルソナ1 (「Tizen」のセグメンテーション)
20代後半〜30代の男性でイノベータなギーク。Android使いで、メインPCはLinuxとWindows。メインブラウザはChrome。サービスは機能面を重視する。割とせっかち。

ペルソナ2 (「Android」のセグメンテーション)
20代後半の男性でアーリーアダプターなギーク。iPhoneを持っているけどAndroidに興味がある もしくは 最近Androidを買った。メインPCはMac。メインブラウザはWebkitベースのやつ。サービスはデザイン・機能面ともにこだわる。KISSなUIが好き。リア充。

ペルソナ3 (「JavaScript」のセグメンテーション)
20代前半〜20代半ばの男性。メインPCはWindowsでメインブラウザはFirefox。HTMLやCSSのコーディングもできるけど一番得意なのはJavaScript。性格や考え方は…検討できませんでした!(涙)

6.最後に

たかが個人Blog一つの調査&まとめに2時間くらいかかってしまった…(HTMLの整形は除く)
でもなかなか楽しかったです。

ペルソナってみんなやってるんでしょうかね、工数の都合で省略されているイメージです…。

今回検討した3つのペルソナ、皆さんには当てはまっているでしょうか!
当てはまってる、当てはまってない関わらずコメント残してくれたら嬉しいです!
また、こんな感じでいいのか自信はないので「こんな風にしたらいい」などの意見がありましたら、そちらのアドバイスも頂けると幸いです。

ちなみに本エントリのタイトルに「その1」って書いてますが、続くかは未定です! ストーリーボードの作成に続きます

それでは。

参考書籍

2012年3月24日土曜日

C++ の std系の関数たちまとめ その1

C++を勉強してるけど、std系の関数が多い

全部暗記できるわけないけど、どういう関数があるかは覚えておきたいので、まとめておこうというエントリです。
その2 があるかどうかは分かりません。

コンパイラはFree Software Foundation の g++です。

※C++歴数時間なので、サンプルは動きますが、いけてないところもあるかもです。
オライリーのC++実践プログラミングを参考にしています。

このエントリの目次

1.std::cout - 標準出力
2.std::cin - 標準入力
3.std::string - シングルバイト文字列を扱う
4.std::wstring - ワイド文字列を扱う
5.std::strcpy - Cの文字列をコピーする
6.std::strncpy - 文字数を指定してCの文字列をコピーする
7.std::strcat - Cの文字列を連結する
8.std::strncat - 文字数を指定してCの文字列を連結する
9.std::strlen - Cの文字列長を取得する
10.std::strcmp - Cの文字列を比較する
11.最後に

1.std::cout - 標準出力

標準出力で表示する。
#include <iostream>

int main() {
    //出力。文字列は二重引用符(")で囲む。
    std::cout << "Hello " << "World" << '\n';
    return 0;
}
実行例。
$ ./hoge 
Hello World
std::cout を使用するにはとりあえず、iostream をインクルードすればよい(そうすれば下記の std::cin も使用できるようになる)。
<<」を使います。
<< を繋げて使うこともできます。
空白も出力に含められる。
標準出力で改行を表示するには「'\n'」か、「"\n"」。

2.std::cin - 標準入力

標準ストリームからデータを入力する。
#include <iostream>

int main() {
    int in; 
    std::cout << "Enter any integer: ";

    //データ取得
    std::cin >> in;
    std::cout << "You entered " << in << "\n";
    return 0;
}
実行例。
$ ./hoge 
Enter any integer: 1
You entered 1

上述の通り、std::cin を使用するには、iostream をインクルードすればよいです。
>>」で、標準入力からのデータを取得します。

下記のように、std::cin 一行で複数のデータを代入することができます。
#include <iostream>

int main() {
    int in1;
    int in2;
    int in3;
    std::cout << "Enter some integers : ";
    std::cin >> in1 >> in2 >> in3;
    std::cout << "You entered " << in1 << " and " << in2 << " and " << in3 << "\n";
    return 0;
}
半角スペース区切りで複数データを入力できます。
実行例。
$ ./hoge 
Enter some integers : 10 20 30
You entered 10 and 20 and 30

3.std::string - シングルバイト文字列を扱う

シングルバイト文字列を扱う型。
#include <iostream>

//下の行はなくても僕の環境では動作しました
#include 

int main() {
    std::string str = "This is a pen.";
    std::cout << str << '\n';    //文字列出力

    std::cout << str[0] << '\n'; //1文字目出力。よくない方法。
    std::cout << str.at(0) << '\n'; //1文字目出力。よい方法。

    std::cout << "length is " << str.length() << '\n'; //文字列長出力
    
    std::string twice = str + " " + str;  //文字列の連結
    std::cout << twice << '\n';    
    return 0;
}
実行例。
$ ./hoge 
This is a pen.
T
T
length is 14
This is a pen. This is a pen.
オライリーのC++実践プログラミングでは「#include <string>」が必要と書いてますが、僕の実行環境では不要でした。

文字列の例えば1文字目を取得するには、配列の形で「[0]」とアクセスします(ゼロベース)。
が、これはよろしくない方法で、配列の範囲外を指定するとどこかのアドレスの値を読みに行くので、どうなるか分かりません。
その代わりにメンバ関数「at」を使用すると、そういう場合に例外を投げてプログラムを終了します。

文字列の連結は「+」でできます。

4.std::wstring - ワイド文字列を扱う

ワイド文字列(いわゆるマルチバイト文字列)を扱う型。

下記のサンプルはコンパイルできませんでした…。
「エラー: ‘operator<<’ で ‘std::cout << str’ 内にあるものが適合しません」というエラーが出てしまいます。
標準出力の箇所でエラーが出てしまうんですが、どうやったら出力できるんだろう…。
#include <iostream>
#include <string>

int main() {
    std::wstring str = L"ワイド文字列";
    std::cout << str << '\n';    
    return 0;
}

5.std::strcpy - Cの文字列をコピーする

std::stringクラスではない、Cの文字列をコピーする。
#include <iostream>
//cstringにstrcpyの定義がされている
#include <cstring>

int main() {
    char name[10];

    //name = "windblue";    //この記述は不可
    std::strcpy(name, "windblue");

    std::cout << name << '\n';
    return 0;
}
実行例。
$ ./hoge 
windblue

ただし、コピー先の文字列の配列(上記の例だと「name」)のより、コピー元のデータ(上記の例だと「"windblue"」)の方が大きい場合、ランダムメモリを破壊してしまいます。
使わないほうが良さそうです。

安全にコピーするには下のstrncpyを使用します。

6.std::strncpy - 文字数を指定してCの文字列をコピーする

#include <iostream>
//cstringにstrncpyの定義がされている
#include <cstring>

int main() {
    char name[5];

    std::strncpy(name, "windblue", sizeof(name) - 1); 
    std::cout << name << '\n';
    return 0;
}
実行例。
$ ./hoge 
wind

Cの文字列の終端には「\0」という特殊な文字(NULという)が必要な仕様なので、 sizeof(name) - 1 と記述しています。
なので、上の例だと、nameの中身は最終的には{'w', 'i', 'n', 'd', '\0'}という風になっています。
(\0は自動で格納される)

7.std::strcat - Cの文字列を連結する

#include <iostream>
//cstringにstrcatの定義がされている
#include <cstring>

int main() {
    char name[10];

    std::strcpy(name, "wind");
    std::strcat(name, "blue");

    std::cout << name << '\n';
    return 0;
}
実行例。
$ ./hoge 
windblue

8.std::strncat - 文字数を指定してCの文字列を連結する
#include <iostream>
//cstringにstrncatの定義がされている
#include <cstring>

int main() {
    char name[7];

    std::strcpy(name, "wind");
    std::strncat(name, "blue", sizeof(name) - std::strlen(name) - 1); 
    name[sizeof(name) - 1] = '\0';

    std::cout << name << '\n';
    return 0;
}
実行例。
$ ./hoge 
windbl

strncat関数を使用した場合はNULを自動的に追加してくれないようなので、予めNUL文字の文字数分(1文字分)の余裕を持たせてコピーし、最後に手動でNULを追加しています。

9.std::strlen - Cの文字列長を取得する
#include <iostream>
//cstringにstrlenの定義がされている
#include <cstring>

int main() {
    char name[10];
    std::cout << std::strlen(name) << '\n';
    return 0;
}
実行例。
$ ./hoge 
10


10.std::strcmp - Cの文字列を比較する
#include <iostream>
//cstringにstrcmpの定義がされている
#include <cstring>

int main() {
    char str1[10];
    char str2[10];

    std::strcpy(str1, "hoge");
    std::strcpy(str2, "hoge");

    if (std::strcmp(str1, str2) == 0) {
        std::cout << "str1 == str2" << '\n';
    } else {
        std::cout << "str1 != str2" << '\n';
    }   

    return 0;
}
実行例。
$ ./hoge 
str1 == str2

strcmp(a, b); で、aがbよりも小さい場合は 負数、aがbよりも大きい場合は 正数 を返却する。

11.最後に

「\0」の扱いに慣れないので、難しいなあ。
慣れないというか、忘れただけですが…

間違いがあったらコメント頂けると助かります。

2012年2月29日水曜日

PHP でプライベート変数やメソッドをクラスの外から操作する

何のために操作するのか

※本エントリはPHP 5.3.2以上で正常に動きます。

何のためかというと、例えばテストのときに使います。

プログラムの構造を変更するコトを、リフレクションといいます。
リフレクションとは、

プログラムの実行過程でプログラム自身の構造を読み取ったり書き換えたりする技術のことである。
リフレクション (情報工学) | Wikipediaより。

PHPのリフレクションまわりのManualはコチラです。

このエントリの目次

1.このエントリで使うサンプルクラス
2.プライベート変数をクラスの外から操作する
3.プライベートメソッドをクラスの外から操作する
4.最後に

1.このエントリで使うサンプルクラス

<php

class HideyoshiToyotomi {
    //建前
    //(書いてるだけで本エントリでは特に触れません)
    public $statedReason = '信長さまー!';
    //本音
    private $_realIntention = '信長うぜー!';

    //表向きは信長に心酔して仕えているように見えます
    //(書いてるだけで本エントリでは特に触れません)
    public function serveNobunaga() {
        echo '信長様のためなら命も惜しくありませぬ!';
    }   

    //外からは見えませんが、
    //内には天下取りの夢を秘めています
    private function _getTenka(){
        echo 'よっしゃ俺が天下取ったるで!';
    }   
}
HideyoshiToyotomi.php

秀吉の枷という小説を読んでいるので、秀吉クラスを例にしてみました。
(信長に仕えていた頃は「豊臣」ではないですが…豊臣の方が分かりやすいと思ったので。)

以下、秀吉クラスの概要です。

外から見えるのは、
    public $statedReason = '信長さまー!';
という建前と、
    public function serveNobunaga() {
        echo '信長様のためなら命も惜しくありませぬ!';
    } 
という信長への尽力です。

でも外から見えないところには
    private $_realIntention = '信長うぜー!';
という本音と
    private function _getTenka(){
        echo 'よっしゃ俺が天下取ったるで!';
    }
という天下取りの行動が隠されています!

こんなサンプルでよいのか。

2.プライベート変数をクラスの外から操作する

<どうでもいい>
本能寺の変が起こり、秀吉は弔い合戦として光秀を討つことを決めます。
秀吉の本音はいかに…?
</どうでもいい>

private変数である $_realIntention にアクセスできるようにして、秀吉の本音を暴いてみます。

サンプルコードです。
<?php
include './HideyoshiToyotomi.php';

$hideyoshiToyotomi = new HideyoshiToyotomi();
$reflectionClass = new ReflectionClass($hideyoshiToyotomi);

//変数名を文字列で指定します
$realIntention = $reflectionClass
    ->getProperty('_realIntention');
//private変数にアクセスできるようにします。
$realIntention->setAccessible(true);

//getValueメソッドで
//$_realIntention の値を外から取得します
echo $realIntention
    ->getValue($hideyoshiToyotomi) . "\n";

15行目の echo で、$_realIntention = 秀吉の本音 の「信長うぜー!」が外から見えました。

<どうでもいい>
さて、ここで秀吉は黒田官兵衛の言葉で、考えが変わります。
</どうでもいい>

では次に、private変数である $_realIntention = 秀吉の本音について、外から値をセットして変えてみます。

以下がそのコードです。
上記サンプルコードの最後に追加します。
//setValueメソッドで外から値をセットする
$realIntention->setValue(
    $hideyoshiToyotomi,
    '俺が天下人じゃー!'
);
echo $realIntention
    ->getValue($hideyoshiToyotomi) . "\n";

private変数である$_realIntention の値を外から変更し、「俺が天下人じゃー!」という本音になりました!

3.プライベートメソッドをクラスの外から操作する

<どうでもいい>
秀吉は光秀を討つこときっかけに、天下取りの行動をとり始めます。
</どうでもいい>

privateメソッドである_getTenka を外から見えるようにしてみます。

以下がサンプルコードです。
<?php
include './HideyoshiToyotomi.php';

$hideyoshiToyotomi = new HideyoshiToyotomi();

$reflectionClass = new ReflectionClass($hideyoshiToyotomi);

//メソッド名を文字列で指定します
$getTenka = $reflectionClass
    ->getMethod('_getTenka');
//privateメソッドにアクセスできるようにします。
$getTenka->setAccessible(true);
//invokeメソッドにて、_getTenkaメソッドを実行します
$getTenka->invoke($hideyoshiToyotomi);

privateで隠蔽されていた_getTenka メソッドが実行され「よっしゃ俺が天下取ったるで!」と表示されました。

4.最後に

テストで重宝するので書きました。
他にもPHPUnit の モックオブジェクトという便利なものがあるのですが、それはまたの機会に…。

無駄な情報が多くて例が分かりにくかったかもしれません。
ドラゴンボールとかの方がまだ分かりやすかったかしら、と思ってます。

でもCarクラスなどの味気ないサンプルもあれかなあ…と思ったので、秀吉クラスを例としました。

以上です。

2012年2月28日火曜日

GitHub に登録してコミットしてアイコンを設定する手順

今更かよ!

て感じですが。
ものすごい簡単にコミットまでいけて感動したのでメモ。
15分くらいでいけるんじゃないかなあ…


このエントリの目次

1.フリーアカウントを作成する
2.git環境を構築する
3.アイコンを設定する
4.最後に

1.フリーアカウントを作成する

まずはhttps://github.com/plansにいきます。
すると、以下のようなページにいきます。


で、赤丸で囲っている「create a free account」ボタンを押します。
すると、


このようなアカウント作成画面に飛びます。
Username、Email Address、Password、Confirm Passwordの4項目を入力して、


ページ下部の、赤丸で囲っている「create an account」という緑のボタンを押します。

これで、フリーアカウントが作成されました。
早い!

2.git環境を構築する

http://help.github.com/linux-set-up-git/に行きます。
すると、以下のような「Set Up Git」というページが表示されます。


あとは書かれている通りにして下さい(丸投げ!!)
gitのヘルプはとても親切なので、あとは書かれている通りコマンドを打てば、コミットまですぐ行けます!

3.アイコンを設定する

自分のアイコンを設定しましょう。
これも2, 3分で設定できます。

Gravatarで手順に沿って設定するだけです(GitHubのプロフィール設定ページからもGarvatarに飛べます)。

一点 注意事項として、Gravatarで登録するメールアドレスはGitHubで使用するメールアドレスと同じものにします。

Gravatarでアイコンを登録したら、僕の場合はすぐにGitHubに反映されました。

4.最後に

上記の流れで作った僕のアカウントが、コチラになります。
まさかこんなに簡単に使えるようになるとは思っていませんでした。

始めたばかりでまだ色々な使い方を知りませんが、とりあえず、有名なリポジトリをwatchしてみます。

有名なリポジトリは例えば、GitHub人気レポジトリランキング Best50 全解説 | yayuguのにっきで紹介されていますので、参考にしてみてはいかがでしょうか。

Sincerely,

2012年2月27日月曜日

Firefox の Selenium IDE で XML(HTML)のテストを少しだけ簡単にするユーザー拡張スクリプトを書いてみた

Seleniumとは

Webアプリケーション用のテストツール。
テストケースはhtmlで記述され、<table>タグ内の<tr>タグ1つが、テストの1手順を示すので見た目にも分かりやすい。

と、本ブログのSeleniumの導入に関するリンク集01という記事に書いています。

FirefoxにはSelenium IDEというとても便利なアドオンがあるので、本エントリはそれを使う前提で書きます。

このエントリの目次

1.テストを書くのが面倒くさいと思いました
2.作成したユーザー拡張スクリプト
3.使い方
4.最後に

テストを書くのが面倒くさいと思いました

XMLやHTMLの検証などで、getElementByIdとかgetElementsByTagName を書くとき、コードが長くなるのが面倒くさかったのです。
なので簡単なユーザー拡張スクリプトを書いてテストコードを書く量を減らします。

ちなみに、Selenium のユーザー拡張スクリプト集の中に、XMLの値を検証するスクリプトがあるのですが、どうやら要素と要素名を一緒くたにして検証する仕様のようで、しっくりきませんでした。

作成したユーザー拡張スクリプト

GitHubにあげました。

4つの関数を作成しました。

__getElementsByTagName : getElementsByTagName のラッパ関数(テストコードの文字数を減らす用)
__getElementById : getElementById のラッパ関数(テストコードの文字数を減らす用)
__getXmlValue : XMLやHTMLの要素の値を取得する関数
__getXmlAttribute : XMLやHTMLの要素の属性値を取得する関数

3.使い方

まず、ユーザー拡張スクリプトの使い方から。

先ほどのGitHubのコードをコピペして、user-extensions.jsというファイル名でどこかに保存します。
で、Selenium IDEにて
「オプション」→「設定」→「Selenium Core 拡張スクリプト(user-extensions.js) のパス」
で、ファイルのパスを指定します。
Selenium IDE を再起動したら、指定したユーザー拡張スクリプトが使用できます。

次に、各関数の使い方です。

Selenium IDE での記述で説明します。
※(「コマンド」と「値」は省略します。コマンドは全てgetEvalを使用し、値は何も指定しません。)

__getElementsByTagName
対象 : __getElementsByTagName('要素名')
HTMLCollectionが取得できます。

__getElementById
対象 : __getElementById('要素のid')
HTMLElementが取得できます。

__getXmlValue (名前がいけてないですが、HTMLでも使えます orz)
対象 : __getXmlValue(何らかのHTMLElement)
要素の値が取得できます。

__getXmlAttribute (名前がいけてないですが、HTMLでも使えますorz)
対象 : __getXmlAttribute('属性名', 何らかのHTMLElement)
要素の属性値が取得できます。

以上です。

4.最後に

色々といけてない所があるかもですが、好きに改変して使用して下さい。