Nike+ FuelBand を試してみた

FuelBandとは

腕輪型の歩数計みたいなもので、歩いた距離などの履歴がWebに残る、Nikeが提供する便利でクールなガジェットです。
Nikeのサイトがとてもクールです！
かっこいいので紹介します。

ちなみに、Macでセットアップしました。

このエントリの目次

1. 注文する
2. 箱を開封する
3. セットアップする
4. 歩いて記録する
5. さいごに

1.注文する

僕はamazonで買いました。
僕はかなり細身なのでSサイズで注文してぴったりでした。

そして注文してから一ヶ月経ってやっと届きました！

2.箱を開封する

こんな感じの雑な包装で着ました！
これには正直びっくり。
中国からきた模様です。


この灰色の袋、裏返すとなんと「Yahoo!奇摩」の文字が！
ええー！

ちなみにこれ、台湾のYahoo!ですね。
でも僕、amazonで予約したんですけどｗ
どういうことなの…。


気を取り直して、開封作業に戻ります。
中にはこんな感じでかっこいい箱がありました。
さすがNikeです。


裏側はこんな感じです。
やはりかっこいいです。


箱をパカッと開けます。
左側に使うまでの手順が書いてます。


実物はこんな感じです。


なんとも未来的な感じ。
これはワクワクします。

3.セットアップする

Nike+のサイトにアクセスします。
そして、真ん中のリンク「今すぐダウンロード」をクリックします。


デスクトップにNike+ Connectが追加されました。


クリックすると下記の画面になります。


更にクリックします。
Nike+ Connectインストーラが起動します。
「続ける」をクリックします。


下の画面になったので、Fuelband をPCに接続します。


こんな感じで接続しました。


するとこんなウインドウが開きます。
マウスオーバーしても色が変化しないので分かりづらいですが、右下の「アップデート」をクリックします。


こんな画面になります。
こんな画面もかっこいいです。


で、下のような画面になります。


少ししてブラウザで下のようなページが開きます。
自分の身長、体重、Fuelbandをどちらの手首に巻くかを入力します。
デフォルトの単位がフィート、ポンドになっていて分かりづらいので、キロメートル、キロに変えておきます。
画面下の「次へ：目標の設定」をクリックします。


目標の設定をします。
単位がよく分かりませんが、普段そんなに運動しないので「2000」を選択します。
画面下の「次へ：JOIN NIKE+に参加」をクリックします。


こんな画面が出ます。
僕はFacebookでログインしました。


ほぼ完了！
「完了」をクリック。


あと一息です！


自分の名前を入力してセットアップ完了です！


最後に、サイトの設定ページに行って、距離と体重の単位設定をします。

4.歩いて記録する

適当に歩いたあとMacに接続すると、Nike+にデータが送信されます。
例えば一日の記録はこんな風に見えます。
かっこいいですね！


僕は平日は会社までのドアドア通勤退勤で30分、昼食時などに歩くんですが、それだと大体1600〜1700 NikeFuelでした。
単位がよくわかりませんな！

他にも、人気の運動ルートや人気の運動ルートを設定できたり、そのときに一番NikeFuelを獲得した人がランキングで出たりと、色々な機能が使えます。


iPhoneのアプリもあります(iTunes App Storeのリンク)。

5.さいごに

単純にサイトがかっこいいので、見てるだけで楽しめます。
これで運動するモチベーションが上がるといいんですけどねー。

それでは。

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を勉強していこうと思います。