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

今回はスケッチとプロトタイプ、そして実装(本ブログのデザインリニューアル)です。

前回までの記事で、ストーリーボードの作成まで行いました。
今回はスケッチとプロトタイピングを行い、最後に本ブログを実際にリニューアルしてこのシリーズを終わりとします。
このエントリがアップされた時点では既にリニューアル後のデザインになっています。

このエントリの目次

1. スケッチとプロトタイプとは
2. まずは提供するべきデータと機能をリストアップ
3. スケッチとプロトタイプの作成
4. で、今のデザインになりました。新旧比較
5. さいごに

1.スケッチとプロトタイプとは

どちらもUXデザインの初期の具現化ステップです。
が、以下のような違いがあります。

• スケッチ
  アイデアの創出・具現化が目的で「探求」のステージ。より多くのアイデアを素早くたくさん具体化することが目的で、より良いものを選択していきます。
• プロトタイプ
  実際の見た目に近いものを作成してフィードバックを得る「検証」のステージ。関係者へのプレゼンやユーザビリティテストなどを目的とします。

2.まずは提供するべきデータと機能をリストアップ

まずは、前回の記事で作成したストーリーボードの各ステップで、ユーザに提供するべきデータと機能をリストアップします。

当ブログでは下のようになりました。

まず第一に提供するべきなのは「分かりやすい本文」で、この点については考えるべき階層構造があまりないので、シンプルなものになりました。

3.スケッチとプロトタイプの作成

本来、スケッチは紙に書きだすなどして大量にアイデアを生み出すのがよいのですが、今回は 目的がシンプルなため、またBloggerのテンプレートデザインなどを使って実現したいUIがすぐに反映できるため、プロトタイプをスケッチと同時に行いました。

そのときに検討した項目を書いていきます。

配置するデータについて

1. デザインの原則に従って、記事の本文を左側に、ナビゲーションを右側に配置する
2. 記事本文のカラムについて
   1. 記事本文の下には、その記事のラベルを配置する。
   2. 各記事の最下部には、それ以外の要素を配置する。
   3. と思ったけど、なぜかその辺りの順番変更できないね…。
3. 他エントリの導線となる要素以外は極力排除する。
   1. 美人時計とか旬が過ぎたし、本ブログで見る必要はないので削除する。
   2. Android関連のニュースのブログパーツは、英語だし見られていないはずなので削除する。
   3. 当ブログの読者一覧は特に知りたくないと思うので削除する。
4. ナビゲーションの要素は使ってほしい機能の順に上から配置していく。
   1. 検索窓は最重要ではないけど、縦幅が狭くシンプルすぎて見落としやすいので一番上に配置する。
   2. 同じような内容の記事は割と近い日付で並び、タグ一覧よりも記事同士の関連性が高いので、月別の記事一覧を上に配置する。
   3. タグ(ラベル)一覧はPV順に並べたいけど方法が分からないので、とりあえずタグクラウドで妥協。
   4. よく検索されているエントリも配置したいが、それぞれ関連のないエントリが並ぶので下の方に配置する。
   5. 自己紹介は所詮おまけなので、ナビゲーションの下に配置する。

ビジュアルデザインについて

1. ブログのメインカラーを青系の色にする。今までは緑だったのだけれど。(ブログのタイトルがWorld Wide Windblueなのに！ 個人的にはこれが一番意味の分からないデザインでした)
2. 記事本文は白背景に黒テキストにする
3. 記事を読むときに目障りにならないように、全体を主張しすぎない色でまとめる
4. 気楽に読んで欲しいので、パステル系の色を使って柔らかい雰囲気を出す
5. 記事本文の構成がぱっと見で分かるように、タイトルと見出しの区切りを大きく分かりやすくする

記事の文章構成について

1. タイトル
   1. 正確にシンプルで端的なものにする。検索にひっかかったときのタイトルの全文表示を目指すよりは、正確さを優先する
2. 本文
   1. 小難しい印象を持たれないために、地の文は丁寧語で分かりやすい言い回しをする。ひらがなを多く使う。
   2. 検索エンジンで表示されたときに記事の内容が分かるように、概要を本文の一番上に書く。でも記事本文にスッと入ってほしいので、できたらアイスブレイク的なことも書く。
   3. アイスブレイクの効果を狙って、各記事の一番上にはイラストや写真を入れる。
   4. サンプルコードとキャプチャ画像をたくさん入れて、ユーザが迷ったり悩む回数を減らす。
   5. 各見出しの内容が一画面を超える長さの場合は、できるだけ分割する

これらのコトを意識し、Bloggerのテンプレートデザインでトライアンドエラーを繰り返しました。

4.で、今のデザインになりました。新旧比較

だいぶすっきりとした印象になりました。
右側のタグクラウドなどはまだ気に食わないですが、できたら随時修正していこうと思います。

旧バージョンのキャプチャを貼ります。







見出しと地の文がパッと見で区別がつきにくくて、ゴチャコチャしている感じです。
ざっとスクロールしたとき、記事の構成がわかりづらいです。
ここが今回なおしたかった最大のポイントです。

素人が中途半端にデザインするもんじゃないですな。

ちなみに本文の横幅は 前のバージョンでは意図的に狭くしてたのですが(視線の横移動がだるい)、それだとサンプルコードが見づらくなるので、今回は仕方なくデフォルトの幅にしています。

ていうかなんでメインカラーを緑に選択したのか…(ブログのタイトルがWorld Wide Windblueなのに！)(二回目)。
まあ単純に緑色が好きだからだったんですが。

5.さいごに

これで、UXデザイン入門―ソフトウェア&サービスのユーザーエクスペリエンスを実現するプロセスと手法を参考にしたシリーズを終わります。

「当ブログが見やすくなった」っていう人がいらっしゃいましたらコメント頂けると嬉しいです！

UXについてはまだまだ初心者レベルですので、これからも勉強していきます。
情報アーキテクチャも勉強していこうと思っています。

また、ソーシャル系やモバイル系も最適化していこうと思っています。

それでは。

参考書籍

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

追記

このエントリではUXデザインのプロセスのうち、ストーリーボード作成まで実施しています。
次のスケッチ、プロトタイプ、実装についてはコチラ！

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

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

このエントリの目次

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

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

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

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

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

3.ストーリーの作成

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

このサイトを対象として、以下のように考えてみました。
ペルソナの名前を「太郎」とします。
ストーリー名：エントリの閲覧

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

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

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

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

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

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


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

6.さいごに

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

スケッチ、プロトタイプのプロセス に続く？！

参考書籍

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」って書いてますが、続くかは未定です！ ストーリーボードの作成に続きます

それでは。

参考書籍

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」の扱いに慣れないので、難しいなあ。
慣れないというか、忘れただけですが…

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