Apple風のテクスチャを GIMP 2.6.12 で作ってみた

簡単にできました

Appleの最近のプロダクトで使用されているかっこいいテクスチャをさくっと作るチュートリアル | コリスを参考にしました。

上記サイトで Adobe Photoshop で作っているのを、GIMP にあてはめてみました。

このエントリの目次

1. こんなテクスチャを作りました
2. 2枚のレイヤーを用意する
3. 1枚目のレイヤー(背面)にフィルタを適用する
4. 2枚目のレイヤー(前面)にフィルタを適用する
5. レイヤーを合わせて完成
6. さいごに

1.こんなテクスチャを作りました

(Flickrのぺージ)

本当は 640x1136 px で作ったのですが、Flickr にアップロードしたら 577x1024 px になってしまいました。

2.2枚のレイヤーを用意する

まず、GIMPを立ち上げて、「新しい画像」を作成していきます。
「ファイル」→「新しい画像」を選択します。


次のようなウインドウが現れるので、作りたい画像の縦と横のサイズを入力して、「OK」を押します。


これで、まっさらな画像が作られました。

続いて、基本となる色を画像につけていきます。
右クリックをして「色」→「単色塗り」を選択します。


下のようなウインドウが出てくるので、「カスタムカラー」のところをクリックします。


色を調整するウインドウが出てきます。
RGB をそれぞれ、0、33、66 と入力して、「OK」を押します。


プレビュー の色も変更されました。
問題ないので、「OK」を押します。


こんな画面になります。


ベースのレイヤーができたので、これを複製します。
右クリックをして、「レイヤー」→「レイヤーを複製」を選択します。


これで基礎となる2枚のレイヤーができました。

3.1枚目のレイヤー(背面)にフィルタを適用する

背面レイヤーに薄い縦縞がかかるようにします。

まずはフィルタのかかり具合を正確に見るため、倍率を 100% にします。


まずは背面のレイヤーから編集します。

下の図の赤丸のところ(目のアイコンのところ)をクリックして、前面のレイヤーを非選択状態にします。


これで背面のレイヤーを編集できるようになりました。

レイヤーにフィルタをかけていきます。
右クリックをして「フィルタ」→「ノイズ」→「HSVノイズ」を選択します。


下のようなウインドウが現れるので、保存度 = 1、色相 = 0、彩度 = 30、明度 = 30 として「OK」を押します。


これでノイズがかかりました。
次にこのノイズを薄い縦縞にします。
右クリックをして、「フィルタ」→「ぼかし」→「ガウシアンぼかし」を選択します。


下のようなウインドウが出てくるので、水平 = 0、垂直 = 50 と入力して「OK」を押します。


これで、1枚目のレイヤーが完成しました。

4.2枚目のレイヤー(前面)にフィルタを適用する

まずは前面のレイヤーを編集可能な状態にします。

「背面 コピー」(前面)の目のアイコンをクリックして表示させ 選択状態に、「背面」の目のアイコンをクリックして非表示にして 非選択状態にします。


前面のレイヤーは薄い横縞を作ります。
先ほどと同じように、まずはノイズを作成、続いてガウシアンぼかしをいれます。
このとき、下のように水平にぼかしをいれます。


これで2枚目のレイヤーも完成しました。

5.レイヤーを合わせて完成

仕上げに、前面のレイヤーの不透明度を 50% にします。


すると、以下のようなApple風の布っぽいテクスチャになりました！


あとは画像を保存して完了です。

6.さいごに

思ったよりも簡単に作れました。

「ノイズ」と「ぼかし」を組み合わせれば、色々な質感の素材が作れそうですね。

iOSでFacebookアプリを作ってみる その1

ちょっと前に iOS SDK 3.1がリリースされましたね

ですので、それを試してみます。

本エントリは、本家FacebookサイトのGetting Started with the Facebook SDK for iOS v3.1 - Facebook開発者を参考にしています。

また、実機確認は 第四世代 iPod touch の iOS6 で実施しています。

このエントリの目次

1. 必要な環境
2. Facebookのデベロッパ登録をする
3. Facebook App IDを作る
4. SDKを手に入れる
5. SDKをアプリに組み込む
6. さいごに

1.必要な環境

1. Mac OS X バージョン 10.8.x Mountain Lion
2. Xcode 4.5.x
3. Git (こちらは必須ではないですが、入れといて損はないです。本エントリでは使います)

2.Facebookのデベロッパ登録をする

まず、Facebook App Dashboardにいきます。 下記の画面の「Register as a Developer」ボタンを押します。


すると、下のような画面になりますので、「アカウントの認証を実行」を押します。

「携帯メールアドレス」を入力して、「承認」を押します。

下の画面になります。
で、すぐにケータイのメールに確認コードが送られてきますので、その画面に入力し、「承認」を押します。


改めて、デベロッパ登録をします。
「Register as a Developer」を押します。 Facebook App Dashboardにいきます。

下記の画面になるので、「続行」を押します。


デベロッパとしての経験や、どんなアプリを作ろうとしてるかなどのアンケートがあります。
「スキップ」 or 「続行」を押します。


これでFacebookデベロッパとして登録されました！
「Done」を押して完了です。

3.Facebook App IDを作る

再度、Facebook App Dashboardにて。
右上の「+新しいアプリを作成」をクリックします。


すると、以下のような画面になります。
App Name と App Namespace を入力して、「続行」を押します。


キャプチャによる認証をすると、下のような画面が表示されます。
赤い丸で囲んだ App ID は後でアプリ実装時に使うのでチェックしておいてください。


これでFacebook App ID の登録が完了しました。

4.SDKを手に入れる

facebook / facebook-ios-sdk からソースを落とします。

git clone git://github.com/facebook/facebook-ios-sdk.git

facebook-ios-sdk ディレクトリ直下を ls コマンドで確認すると、こんな構成になっています。

facebook-ios-sdk Y$ls
CONTRIBUTING.mdown README   samples   src
LICENSE   README.mdown  scripts

5.SDKをアプリに組み込む

Xcode を起動、新規プロジェクトを作成します。


Facebook SDK をソースに組み込みます。
facebook-ios-sdk/build 配下の FacebookSDK.framework を選択、プロジェクトのframeworksディレクトリに追加します。



続いて facebook-ios-sdk/build/FacebookSDK.framework/Resource 配下の FacebookSDKResources.bundle もプロジェクトの framework ディレクトリに追加します。


次に、他のframework を追加します。
AdSupport.framework、Accounts.framework、Social.framework を追加します。



Other Linker Flags に -lsqlite3.0 を追加します。


plist を編集します。


FacebookAppIDというキーを追加し、その値に 先ほどの「3.Facebook App IDを作る」 で作った App ID を設定します。

さらに、URL Schemesに fb<Facebook App ID>を設定します。
Facebook App ID が例えば 「hogehoge」なら、「fbhogehoge」と設定します。


これでSDKが組み込めました！

アプリを実行すると、特にエラーもなく真っ白画面のアプリが起動します。

今回はここまでです。

6.さいごに

とりあえずSDKは組み込めました。
次のエントリでは、Facebookにログインするところを書きたいと思います。

関係ないですが、b2gを Ubuntu、Mac で試したんですが、エラーが出てビルドできませんでした。
面白そうだったのに、悔しい！

それでは。

Android の実機を Ubuntu 12.04 に接続する

簡単でした

Galaxy S2 で接続を確認しました。

このエントリの目次

1. Googleの公式ドキュメント
2. AndroidManifest.xml に「デバッグ可能」だと記述する
3. Android端末の「USBデバッグ」設定をオンにする
4. udevのルールを記述したファイルを作成する
5. さいごに

1.Googleの公式ドキュメント

Using Hardware Devices | Android Developersです。
ここに書いてある通りにすればよいです。

2.AndroidManifest.xml に「デバッグ可能」だと記述する

<application>要素の中に

android:debuggable="true"

と記述します。
リリースのときは false にするのを忘れないように！

3.Android端末の「USBデバッグ」設定をオンにする

Android実機にて

「設定」→「アプリケーション」→「開発」

と進み、「USBデバッグ」にチェックを入れます。

4.udevのルールを記述したファイルを作成する

root ユーザで下記ファイルを作成します。

/etc/udev/rules.d/51-android.rules

作成したファイルに、下記を記述していきます。

SUBSYSTEM=="usb", ATTR{idVendor}=="04e8", MODE="0666", GROUP="plugdev" 

上記ATTR{idVendor}=="04e8"はSamsungのベンダーIDを示しています。

他のベンダーの場合はUsing Hardware Devices | Android Developersの「USB Vendor IDs」のところを参照して下さい。

これで実機接続ができると思います。
ちなみに僕はUbuntuでのAndroid端末のUSB接続方法(開発用) | あべさん日記を参考に、全ベンダーIDを51-android.rulesに記述しました。

5.さいごに

簡単でしたね。

これから本格的にAndroidを勉強していこうと思います。

Ubuntu で文字入力するときに全角アルファベットになってしまうときの対処法

日本語入力できなくなって

超ムカつくんですけど！！

そんなときは

Shift + 無変換(スペースキーの左隣)

を入力すると、日本語入力できるようになりました。

Ubuntu 12.04 にて dotCloud の MySQL を試してみる (PHP編)

二回続けてのdotCloudエントリ

本エントリはUbuntu 12.04 にて dotCloud の MySQL を試してみる (コマンドライン編) の続きです。
前回はコマンドラインで、helloworldサービスを作り、データベースとテーブルを作って、データをINSERTするところまでやりました。

今回はPHPからMySQLを操作してみます。

このエントリの目次

1. PHP + MySQLのサービスにする
2. environment.json
3. PHPでMySQLに接続する
4. PHPでMySQLを操作する
5. 参考にさせて頂いたサイト
6. さいごに

1.PHP + MySQLのサービスにする

dotcloud.ymlを下のように書きます。

my_www:
    type: php 
my_database:
    type: mysql

my_www や my_database は好きな文字列を指定できます。
あとは、下のコマンドを打てばOKです。

dotcloud push helloworld
# upload ~/work/dotcloud/helloworld ssh://dotcloud@uploader.dotcloud.com:443/helloworld
# rsync
building file list ... done
./
(中略)
Deployment finished. Your application is available at the following URLs
my_www: http://helloworld1-windblue.dotcloud.com/
www: http://helloworld-windblue.dotcloud.com/

2.environment.json

dotCloudにはenvironment.jsonという設定ファイルがあり、そこに色々な情報が入っています。
ホスト名やポート番号などのMySQLに関する情報も入っていて、それらはDOTCLOUD_MY_DATABASE_MYSQL_XXXというキーに格納されています。

PHPからMySQLに接続するにあたって、その設定ファイルを確認します。

詳しくはdotCloudのドキュメントにも載っているのでそちらも参照して下さい。

PHPからenvironment.jsonを確認

ローカルにてdotcloud.ymlと同じディレクトリにindex.phpを作り、下のようなソースを書いて dotcloud push します。

<?php

// environment.json ファイルから接続に必要な情報を取得
$filepath = $_SERVER['HOME'].'/environment.json';

$env = json_decode(file_get_contents($filepath), true);
foreach ($env as $key => $value) {
    print_r($key . "=" . $value . "<br />");
}

作ったページにアクセスすると、設定値一覧が見れます。

SSH接続して直接environment.jsonを確認

PHPからじゃなくても、直接dotCloudのサーバに入って確認することもできます。
下のコマンドでサーバに入ります。

dotcloud ssh helloworld.my_www

helloworld.my_wwwは <作ったサービス名>.<dotcloud.ymlに書いたキー です。

サーバに入ると、カレントディレクトリは

/home/dotcloud/

になります。
ls コマンドで見ると、environment.json がありました。

$ ls
code  current  environment.json  environment.yml  php-env  revisions  rsync-1345870675271

environment.yml というファイルもありましたが、内容は大体同じのようです。

3.PHPでMySQLに接続する

index.php を下のように書けばOKです。

<?php

// environment.json ファイルから接続に必要な情報を取得
$filepath = $_SERVER['HOME'].'/environment.json';

// 'DOTCLOUD_MY_DATABASE_MYSQL_MYSQL_XXX' というキーでMySQL関連のデータが入っている
$host = $env['DOTCLOUD_MY_DATABASE_MYSQL_HOST'];
$user = $env['DOTCLOUD_MY_DATABASE_MYSQL_LOGIN'];
$pass = $env['DOTCLOUD_MY_DATABASE_MYSQL_PASSWORD'];
$port = $env['DOTCLOUD_MY_DATABASE_MYSQL_PORT'];

//前回のエントリで作成したデータベース「nujabes」
$dbName = 'nujabes';

//mysqliオブジェクト作成
$mysqli = new mysqli($host, $user, $pass, $dbName, $port);

PDOで接続したい場合はDotCloudでのMySQL,Redis,MongoDBの使い方 | Rest Termが非常に参考になります(ただしenvironment.jsonの、MySQLに関するキーが古いようですので そこだけご注意を)。

4.PHPでMySQLを操作する

もうあとは通常のMySQL操作と同様です。

//前回のエントリで作成した「songs」というテーブルから全行取得するSQLを発行
$result = $mysqli->query('SELECT * FROM songs;');

//結果を取得していく
$rows = array();
while ($row = mysqli_fetch_assoc($result)) {
    $rows[] = $row;
}

//実行結果を表示
print_r($rows);

これで作ったページにアクセスすると、

Array ( [0] => Array ( [id] => 0 [title] => Luv (Sic) Pt. 2 ) )

と表示されます。

やったね！

5.参考にさせて頂いたサイト

1. DotCloud で PHP アプリを設置してみたときの色々 | 肉とご飯は甘いもの @ sotarok
2. DotCloudでのMySQL,Redis,MongoDBの使い方 | Rest Term

5.さいごに

あとはnginx、cronの使い方を覚えれば、超基本的なバックエンドサービスは実現できそうです。
PHP のフレームワークはどうするかと悩んでいるところですが…。

あと、少し日付が古いですが、dotcloudのpostgres(たぶんmysqlも)はデフォルトで全接続を許可するので気をつけよう | uuu という不穏な記事も見つけたので、こちらも確認していきます。

それでは。