エンジニアのチラシの裏: 7月 2015

2015年7月29日水曜日

[cocos2dx] でローカライズに対応する【LocalizedString】

ローカライズ関数を用意した理由

理由も何もないんですが、cocos2d-xで気軽にObjective-cで利用できるようなローカライズ関数が欲しいなと思い、作成しました。

今回はそんなローカライズ関数です。

実際の関数

はじめに。
この関数は以下の記事の関数を利用しています。
cocos2d-xで文字列を置換する【Replace】
cocos2dでトリミング関数を作る【trim】
cocos2d-xで文字列をデリミタで分解しリスト化する関数を作る【split】

次にこの関数を利用するには、[ja.lproj]や[en.lproj]などのLanguageごとのフォルダを用意し、それぞれにローカライズファイル[Localizable.strings]を用意する必要があります。
【ja.lproj/Localizable.strings】

test=テスト
hogehoge=ほげほげ

【en.lproj/Localizable.strings】

test=Test
hogehoge=HogeHoge

【注意】

ローカライズファイル[Localizable.strings]の[File Type]は、[Localizable Strings]から[Plain Text]に変更して進める必要があります。

これをしておかないと、コンパイル時にファイルが最適化され、getStringFromFile()によるロードがうまくいきません。

使い方

こんな感じで使います。

std::string result = LocalizedString("hogehoge", "ほげほげの取得");
//result は日本語環境では "ほげほげ" となります
//result は英語環境では "Hogehoge" となります

簡単な説明

static map<std::string, std::string> localizable;

ローカライズ文字列のマップデータは、静的変数にセットすることで、無駄なファイル解析を避けます。

if(localizable.empty()){

ローカライズ文字列のマップデータがない場合に、１度だけローカライズファイルを解析します。

FileUtils* fileUtil = FileUtils::getInstance();
LanguageType language = Application::getInstance()->getCurrentLanguage();
if (language == LanguageType::JAPANESE) {
fileUtil->addSearchPath("ja.lproj");
if (language == LanguageType::★★★★) { //ローカライズしたいLanguageTypeを指定
fileUtil->addSearchPath("★★★★"); //LanguageTypeごとのフォルダを指定
} else {
fileUtil->addSearchPath("en.lproj");
}

ローカライズファイルのあるディレクトリを検索対象パスに追加します。

std::string fullpath = fileUtil->fullPathForFilename("Localizable.strings");
std::string strings = fileUtil->getStringFromFile(fullpath);
if (strings == "") return ret;

ローカライズファイル（Localizable.strings）を読み込みます。

list<std::string> stringLines = split(strings, "\n");

行ごとに分解して、以降の処理を実施します。

for(list<std::string>::iterator begin = stringLines.begin(), end = stringLines.end(); begin != end; ++begin){
list<std::string> stringKeyValue = split(*begin, "=");
if(stringKeyValue.size() >= 2){
list<std::string>::iterator keyv = stringKeyValue.begin();
localizable.insert(pair<std::string, std::string>(*keyv, *(++keyv)));
}
}

１行ごととり出し、"="でkeyとvalueに切り出し、ローカライズ文字列のマップデータに設定します。

map<std::string, std::string>::iterator iterator = localizable.find(searchKey);
if(iterator != localizable.end()){
ret = iterator->second.c_str();
}

ローカライズ文字列のマップデータから、対象のデータを取り出し返却します。

std::string result = stringReplace(ret, "\\n", "\n");

最後に対象データの改行をケアしています。

このプログラムが皆様のお役に立てば幸いです。

ではまた。

2015年7月28日火曜日

[cocos2dx] で文字列をデリミタで分解しリスト化する関数を作る【split】

文字列のデリミタ分解する関数を用意した理由

文字列を分解して作業したい場合があります。
分解した文字列はリスト化して便利に取り出して利用することができます。

私の場合、設定値を文字列にしたものをロードしたり、csv分解したりするのに利用しました。

今回はそんな文字列をデリミタで分解しリスト化する関数です。

実際の関数

はじめに。
この関数は以下の記事の関数を利用しています。
cocos2dでトリミング関数を作る【trim】

使い方

こんな感じで使います。

std::string result = split("I;My;Me;Mine", ";");
//result は "I","My","Me","Mine" のリストが返却されます。

簡単な説明

while( (cutAt = str.find_first_of(delim)) != str.npos ) {

デリミタ文字を検索し、ループします。

if(cutAt > 0) {
result.push_back(trim(str.substr(0, cutAt)));
}

デリミタ文字までの文字列を結果リストに追加します。

str = str.substr(cutAt + 1);

次の準備のために、追加した文字列分は切り落とします。

if(str.length() > 0) {
result.push_back(trim(str));
}

上記ループでは最後が追加されないので、残りの文字列を結果リストに追加します。

このプログラムが皆様のお役に立てば幸いです。

ではまた。

2015年7月27日月曜日

[cocos2dx] でトリミング関数を作る【trim】

文字列のトリミング関数を用意した理由

スペースだけのトリミングはよくあるんですが、スペースはもちろんのこと改行やデリミタも含めてトリミングできたらなーと思って作りました。

今回はそんな文字列のトリミング関数です。

実際の関数

使い方

こんな感じで使います。

std::string result = trim("I am Tom; ");
//result は "I am Tom" となります

簡単な説明

std::string::size_type left = str.find_first_not_of(trimCharacterList);

対象文字(デリミタ文字)の含まれない左端を取得します。

if (left != std::string::npos) {

左端の取得に成功した場合は以下の処理を続行します。

std::string::size_type right = str.find_last_not_of(trimCharacterList);

対象文字(デリミタ文字)の含まれない右端を検索します。

result = str.substr(left, right - left + 1);

最後に左端から右端までをtrim内容として取得し、返却します。

このプログラムが皆様のお役に立てば幸いです。

ではまた。

2015年7月26日日曜日

[cocos2dx] で文字列を置換する【Replace】

文字列の置換関数を用意した理由

画面に見える文字列を整形する場合なんかは「StringUtils::format」でほとんどがなんとかなるんだけれど、内部データを整形する場合（例えばデリミタを置換したり、改行を入れてみたり）なんかは、文字列をまるっと置換できる仕組みがあったほうが嬉しかったりします。

今回はそんな文字列の置換関数です。

実際の関数

使い方

こんな感じで使います。

std::string result = stringReplace("I am Tom", "Tom", "Hogehoge");
//result は "I am Hogehoge" となります

簡単な説明

while(pos = result.find(from, pos), pos != std::string::npos) {

まずターゲットとなる文字列の開始位置を検索しながらループします。

result.replace(pos, from.length(), to);

次にターゲットとなる文字列を、置換する文字列に変換します。

pos += to.length();

ループの最後で次の文字列検索の準備をしています。

このプログラムが皆様のお役に立てば幸いです。

ではまた。

2015年7月24日金曜日

[Objective-C] iOSアプリにソーシャル機能を組み込む【実践編】

はじめに

以前に投稿した下の記事でソーシャル機能の分析と目的、効果について少し書きました。
人気アプリから学ぼう「ねこあつめ」その５：ソーシャル機能を分析しよう！編

今回はそれの実践編です。

基本的にはコードを見てもらえば、理解していただけると思うのですが、それぞれ少しづつ注意点があるので、確認してください。

Facebookへの投稿

利用するには、Social.frameworkの追加が必要です。

【簡単な説明】

SLComposeViewController *facebookPostVC = [SLComposeViewController composeViewControllerForServiceType:SLServiceTypeFacebook];
[facebookPostVC setInitialText:text];
[facebookPostVC addURL:[NSURL URLWithString:url]];
[facebookPostVC addImage:[UIImage imageNamed:image]];
[facebookPostVC setCompletionHandler:^(SLComposeViewControllerResult result) {
if (result == SLComposeViewControllerResultDone) {
//投稿完了の処理
}
}];
[ViewController presentViewController:facebookPostVC animated:YES completion:nil];

SLComposeViewControllerを利用して、Facebookに対し、投稿テキスト、URL、イメージを投稿しています。
投稿完了時にはイベントを受け取り、投稿のお礼メッセージや、プレゼントなど処理をします。

Twitterへの投稿

利用するには、iOSバージョンごとに適切なframeworkの追加が必要です。
iOS6.0以上の場合、Social.frameworkの追加が必要
iOS5.0以下の場合、Twitter.frameworkの取り込みが必要

【簡単な説明】

NSString *iosVersion = [[[UIDevice currentDevice] systemVersion] stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]];
if ([iosVersion floatValue] >= 6.0) {
}
else if ([iosVersion floatValue] >= 5.0) {
}

iOSのバージョンで、Social.frameworkを使うか、Twitter.frameworkを利用するかを決定しています。

SLComposeViewController *twitterPostVC = [SLComposeViewController composeViewControllerForServiceType:SLServiceTypeTwitter];
[twitterPostVC setInitialText:text];
[twitterPostVC addURL:appURL];
[twitterPostVC addImage:[UIImage imageNamed:image]];
[twitterPostVC setCompletionHandler:^(SLComposeViewControllerResult result) {
if (result == SLComposeViewControllerResultDone) {
//投稿完了の処理
}
}];
[ViewController presentViewController:twitterPostVC animated:YES completion:nil];

SLComposeViewControllerを利用して、Twitterに対し、投稿テキスト、URL、イメージを投稿しています。
投稿完了時にはイベントを受け取り、投稿のお礼メッセージや、プレゼントなど処理をします。

Lineへの投稿

frameworkは必要ないですが、テキストとイメージが別々にしか投稿できません。
また、投稿完了を受取ることができないので、利用には注意が必要です。

【簡単な説明】

text = [text stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
NSString *LINEUrlString = [NSString stringWithFormat:@"line://msg/text/%@", text];

LINEに文字列を投稿するためのURLを作成します。
LINEへは「line://msg/text/(投稿したい文字列)」というURLスキーマを利用して投稿することになります。

//iOS7.0以降では共有のクリップボードを使う必要がある
UIPasteboard *pasteboard;
if ([[UIDevice currentDevice].systemVersion floatValue] >= 7.0) {
pasteboard = [UIPasteboard generalPasteboard];
} else {
pasteboard = [UIPasteboard pasteboardWithUniqueName];
}
[pasteboard setData:UIImagePNGRepresentation(image) forPasteboardType:@"public.png"];
NSString *LINEUrlString = [NSString stringWithFormat:@"line://msg/image/%@", pasteboard.name];

LINEにイメージを投稿するためのURLを作成します。
投稿にはUIPasteboardを利用します。
LINEへは「line://msg/text/(投稿イメージ名)」というURLスキーマを利用して投稿することになります。

if ([[UIApplication sharedApplication] canOpenURL:[NSURL URLWithString:LINEUrlString]]) {

LINEアプリがインストールされているか確認します。
インストールされていない場合は、LINEアプリのストアへ遷移などしてもよいかもしれません。

[[UIApplication sharedApplication] openURL:[NSURL URLWithString:LINEUrlString]];

LINEへ投稿します。
LINEは投稿完了を受け取れないため、メソッドコールと投稿完了がイコールとなります。

2015年7月21日火曜日

見出しをカスタマイズして、Bloggerの見栄えを良くする！

<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXpFed1myu1sdFM3s-_ZEpFBbqnYUbvZURyf50kJ-h3mpJ4MlM00WwZ_-pVpBSovxvTa_fDCA_C-GemS6DLZ9coGNaqiRHw5crsdSv24WKR12zO2SB8tyDqPxSfDvxTwEToaGLX0UIMY/s1600/256px-Blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiXpFed1myu1sdFM3s-_ZEpFBbqnYUbvZURyf50kJ-h3mpJ4MlM00WwZ_-pVpBSovxvTa_fDCA_C-GemS6DLZ9coGNaqiRHw5crsdSv24WKR12zO2SB8tyDqPxSfDvxTwEToaGLX0UIMY/s640/256px-Blogger.png" width="640" /></a></div>
 
 
ユーザに読みやすい記事を提供するには、コンテンツ（内容）を充実させるのはもちろんですが、ブログ自体の見易さも欠かせません。 
個人的に手軽で効果的だと思っているのは見出しを見やすくして、文章の区切りを分かりやすくすることだと思います。 
 
では初めていきましょう。 
 
<div style="text-align: center;">
<script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 
<ins class="adsbygoogle" data-ad-client="ca-pub-6222309276407323" data-ad-slot="4455118447" style="display: inline-block; height: 280px; width: 336px;"></ins><script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
 
<h4>
まずは自分のブログを分析</h4>
テンプレートによって変わってきますが、まずは自分が書いている記事の見出しのタグが何になっているかを分析しましょう。 
まずは自分のブログ上で右クリックしてコンテキストメニューを開き、[ページのソースを表示]を選びます。 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTMRpeBfkgVIXyU4jlDiEvlpWZo5hZHzschxyQBTPAYeCZZCRqk9acLKNYs0zKrzlspe4_b0O_DZ3Poo8DsxSMMuxbJAtq0j2pJemta5TEs1OK6EzklKEksjzJeXyT4olMuY2Jg0fTvIo/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-07-19+10.29.13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTMRpeBfkgVIXyU4jlDiEvlpWZo5hZHzschxyQBTPAYeCZZCRqk9acLKNYs0zKrzlspe4_b0O_DZ3Poo8DsxSMMuxbJAtq0j2pJemta5TEs1OK6EzklKEksjzJeXyT4olMuY2Jg0fTvIo/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-07-19+10.29.13.png" width="320" /></a></div>
 
すると、HTMLが表示されるとおもいますので、カスタマイズしたい見出しがどうなっているか確認します。 
当ブログの場合は、以下のようになってました。 
 
<blockquote class="tr_bq" style="background: #EFEFEF; padding: 5px;">
<table><tbody>
<tr></tr>
<tr><td class="line-content"><h1 class='title'> アプリ作りの現場から＠ときどきイラスト </h1> <h3 class='post-title entry-title' itemprop='name'></td></tr>
</tbody></table>
 投稿タイトル </h3> <div class='post-header'> <div class='post-header-line-1'></div> </div> <div class='post-body entry-content' id='post-body-6160233257508059390' itemprop='description articleBody'> <h2>見出し</h2> <h3>小見出し</h3> <h4>準見出し</h4> <div> 本文</div></blockquote>
 
以下のようになっていることが分かります。 
<blockquote class="tr_bq">
h1=ブログタイトル、h2=見出し、h3=小見出し、h4=準見出し</blockquote>
h1やh2はブログタイトルなどでも利用されているので、今回は準見出しh4をカスタマイズして見栄えをよくします。 
 
<h4>
CSSCSSの設定を開く</h4>
Bloggerではスタールシート（CSS）を利用してカスタマイズができるようになっていますので、調整していきます。 
Bloggerの管理画面から[テンプレート]-[カスタマイズ]とすすみ、[上級者向け]-[CSSの追加]とさらに進みます。 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzc2GCjVpE7Y5K8e1OcGOldjDk-3SN4ZjCVYeEqtobvb9Vhm6Gse22r6xN4-Wq53b1j7KTk_0EzOPtN6j2xzuvSP5aGSVO3KKtUz0zTlQWxxPJpJ-_5HsR0p2ohuBLj6az4DM1A-HudeE/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-07-19+10.46.31.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="313" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzc2GCjVpE7Y5K8e1OcGOldjDk-3SN4ZjCVYeEqtobvb9Vhm6Gse22r6xN4-Wq53b1j7KTk_0EzOPtN6j2xzuvSP5aGSVO3KKtUz0zTlQWxxPJpJ-_5HsR0p2ohuBLj6az4DM1A-HudeE/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-07-19+10.46.31.png" width="320" /></a></div>
 
 
するとCSSが追加できるようになりますので、以下のように入力して、ブログに適用ボタンを押します。 
<blockquote class="tr_bq" style="background: rgb(239, 239, 239); padding: 5px;">
h4{ 
border-left: 8px #777 solid; 
border-top: 1px #777 solid; 
border-bottom: 1px #777 solid; 
border-right: 1px #777 solid; 
font-size: 18px; 
font-weight: bold; 
margin: 5px 0; 
padding: 5px 0 5px 10px; 
 
}</blockquote>
まあ、はじめはおまじないだと思っておけば良いと思いますが、これで枠線(border)やフォント（font）、余白を変更しています。 
 
一つ一つの意味は、割愛しますが、詳しく知りたい方や、もっと自由にカスタマイズしたい方は、調べて利用してみることをお勧めします。 
ちなみに、私は良く下のサイトを利用させていただいてます。 
<a href="http://www.htmq.com/csskihon/301.shtml" target="_blank">HTMLクイックリファレンス - CSSの基本 - ボックス</a> 
 
上記を設定すると、このブログの見出しのようなボックスにして、見出しを見やすくし、区切りをはっきりとさせることができます。 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYu5AN45EiWKO3LrN7zpMVHAHJp_Q-CHn8t0t76lN6vEzYuyULWFQgg1cHAyXgFlR36HWKWEOPGY0F1qdJH9S-wukJNQ3Jmw7EKcVtuy1K9VXVzTynLiIdkdYtoa6Inh_-JrylPuOHIo/s1600/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-07-19+11.01.43.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="74" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYu5AN45EiWKO3LrN7zpMVHAHJp_Q-CHn8t0t76lN6vEzYuyULWFQgg1cHAyXgFlR36HWKWEOPGY0F1qdJH9S-wukJNQ3Jmw7EKcVtuy1K9VXVzTynLiIdkdYtoa6Inh_-JrylPuOHIo/s320/%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588+2015-07-19+11.01.43.png" width="320" /></a></div>
 
 
実はクラスという技術を使えば、他にももっと自由なカスタマイズができるのですが、それはまた機会があれば書いていこうと思います。

登録: 投稿 (Atom)