キテレツ荘 » かしこ

【短期連載！Mac初心者がiPhoneアプリをつくってみた！（予定）】【ハウチーXcode】

かしこ — Sat, 02 Jul 2011 18:27:47 +0000

ようこそのお運び、厚く御礼申し上げます。

キテレツ荘で暗部を担当しております、かしこい風なだけのかしこです。

クーラーをつけずに扇風機で我慢しています。

もう、その我慢も限界ですがなにか？

アンドロイド所持者のわたくしですが恩師の壮大な計画に巻き込まれる形で

iPhoneアプリ開発講座なるものに通うことになりました。

※iPhoneプログラミング講座の詳細はコチラ　>>>

前回、お取り寄せで沖縄からMBP、アマゾンの堺倉庫よりMacOS10.6をGETしたワタクシですが、

実のところ、アンドロイドアプリ作ろうと思ってアンドロイドSDKのEclipseもインストールしましたが、

それどころではなく、Xcodeと格闘しております。

こんなことでiPhoneアプリを作れるようになるのか？

現在進行形で送るこの記事群の結末に関してはワタクシ自身も知りません（笑）

それでは本人の備忘録も兼ねた【短期連載！Mac初心者がiPhoneアプリをつくってみた！（予定）】の第二回、【ハウチーXcode編】スタートです。

ここでiPhoneアプリに必要な二つの要素を挙げてみます。

1.開発キットであるXcodeと呼ばれるIDE

2.開発言語であるobjective-C

この二つは切っても切れないものですが、

当分はobjective-Cについては忘れます！

この記事読んでくれている方々も一旦忘れてください！

何故かって？

Xcodeの使い方とobjective-C言語、どっちも覚えられないからです！！！

この時点ではまずXcodeの使い方を覚える方がプライオリティ（優先度）が高いと判断したので言語については忘れます。

これは前回の記事で宣言した「わからないものを無理して覚えない」理論です。

ではXcodeを触っていきます。

1.NewProjectのタイプを選ぶ。赤○のところ選びます。

2.新規ファイルのテンプレートを選びます。

3.ファイル名を決めてあげます。今回のファイル名は「sample」とします。

NewProjectからの一連の流れはそんなものだと思ってください。

さて、ここでアプリのベースを選ぶ画面があります。

このXcodeくん、賢くてですね、最初から何パターンかアプリのベースを用意してくれてます。

このテンプレートの選択によってはいきなりボタン押して画面遷移とかできちゃったりします。

このあたりはそのうち解説します。

とりあえず今回はXcodeをおいしく頂くための基礎ということなので「View-based-application」を選択します。

「View-based-application」というテンプレートは何も配置されていない一番オーソドックスなテンプレートです。

それではXcodeの画面を見ながら確かめていきます。

1.ナビゲーター領域

いろいろ最初からファイルが生成されております。

sampleAppDelegate.h
sampleAppDelegate.m
mainWindow.xib
sampleViewContllore.h
sampleViewContllore.m
sampleViewContllore.xib

このあたりのファイル生成はほとんどどのテンプレートを選択しても生成されます。

そんなものだと思いましょう。

では見慣れない拡張子の解説。

.h　　ヘッダーファイルと呼ばれるファイル。主に宣言文を書きます。

.m　　メソッドファイルと呼ばれるファイル。主に処理文を書きます。

.xib　エクシィブファイルと呼ばれるファイル。主に画面のレイアウトを司ります。

ここでWeb関係の方にはわかりやすい例えをします。

.h　はhtmlでいうところのの中身です。表示にはなんら関係ないですがないとhtmlとして成立しません。

.m　はhtmlでいうところのの中身です。ここにタグがかかれていないと何も表示されませんよね。

.xib　はDreamWeaverでいうところのデザインビューと同じで見た目を現します。htmlと違うのは見た目はxibで設定してやるということです。

ここでFlasherな方にもっとわかりやすい例えをします。

.h　はflashでいうところのタイムラインのasです。

.m　はflashでいうところの外部クラスです。

.xib　はflashでいうところのメインステージです。

上記イメージはあくまでも考え方のイメージであって実際にはXcode上において本来の役割があります。

が、あえて暫くはそういうイメージを持ってハウチーしてます。

2.インスペクター選択バー

アプリのビュー（見た目）の設定変更ボタンです。適当にいじってみましょう。

では次に、ボタンを押したらテキストが出たというアプリを作ってみます。

1,ナビゲーター領域から「sampleViewContllore.xib」を選びます。

2.インスペクター選択バーでユーティリティー領域を表示させライブラリーペインから「Round Rect Button」をドラッグアンドドロップでエディター領域へ。便宜上、紐付けと呼びます。

3.同じく「Text Field 」をドラッグアンドドロップでエディター領域へ。

4.このようになります。

5.2で追加したボタン上で右クリックするとこのようなウインドが表示されます。

このウインドウをOutletteと呼んでおきます。

TouchDownの項目の白○のところをクリックしたまま「sampleViewContllore.h」の@endの直上まで誘導して離します。

「Name」の欄に"button"と入力しましょう。

おなじようにTextFieldも右クリックでOutletteの接続設定をしましょう。

ここではNew Refrance Outlette の白○を「sampleViewContllore.h」の@interface{}の間まで誘導して離します。

「Name」は"text"と入力しましょう。

ただしく設定できていると下のようになります。

はい、おなじようになっていることを確認してください。

えー、ここまで設定した内容はこれからの基本になります。

が、今回は深く考えないでよいです。

で、上図の赤の二重線の項目を追加してください。

［text textSet:@”押したぜよ”］;

では、アプリ左上の再生ボタンをポチっとしてみましょう。

はい、どーん！別名ビルドという行動です。

ビルドすると上の図のようにシュミレーターが立ち上がります。

ボタンを押してらテキストが出ましたね。

では、もう一度、上の図を確認します。

赤で線の引かれているところが、オブジェクトを追加した際に自動で記載された箇所です。

二重線の箇所が追記した箇所です。

結論、プログラムっぽいことをしたのは二重線のところだけです。

ね、一旦Objective-Cを忘れても問題ないでしょ！？

さぁ、いかがですか？

理屈はおいといてまずはボタンをおしたらテキストが出たアプリができました。

理屈はとりあえずほっときましょう。

ということで今回覚えておきたい用語です。

.h
.m
.xib
アウトレット（Outlette）
紐付け
はい、どーん！(ビルド)

とりあえずこれくらいでいいと思います。

これ以上はしんどいので続きは次回の機会にいたします。

ということで長くなりましたが【ハウチーXcode】でした。

次回は【Xcodeと親密になりたい！】です。

SeeYou　byebye！

かしこ

※このシリーズは週一程度で更新されていく予定です。

※一応アプリル株式会社の了解を得て記事にしております。

【短期連載！Mac初心者がiPhoneアプリをつくってみた！（予定）】【Xcode4導入編】

かしこ — Wed, 29 Jun 2011 06:12:38 +0000

ようこそのお運び、厚く御礼申し上げます。

キテレツ荘で暗部を担当しております、かしこい風なだけのかしこです。

この時期、カフェでアイスコーヒーを飲みながらUKロックなぞ聞いてるとフェスりたくなります。

が、そんなことはおいといて、本日のお題はこちら。

【短期連載！Mac初心者がiPhoneアプリをつくってみた！（予定）】

アンドロイド所持者のわたくしですが恩師の壮大な計画に巻き込まれる形で

iPhoneアプリ開発講座なるものに通うことになりました。

※iPhoneプログラミング講座の詳細はコチラ　>>>

えぇ、旧ザクよろしくばりのMacG4を兄より譲り受けて早2年。

ブラウザチェックのために3回程度しか起動させないほどのWindowsユーザーが

果たしてiPhoneアプリを作れるのか！？

現在進行形で送るこの記事群の結末に関してはワタクシ自身も知りません（笑）

それでは本人の備忘録も兼ねた【短期連載！Mac初心者がiPhoneアプリをつくってみた！（予定）】の第一回、【Xcode4導入編】スタートです。

■iPhoneアプリを作るのに必要なもの

・Mac（MacOS10.6以降のCore2プロセッサー以上搭載のマシン）

・iPhone、iPad、iPodTouchのいずれか（iOS4以上推奨）

・気合いと脱力と妄想力

以上になります。たぶん本当に。

えぇ、iPodTouchを持っていたのでMacが手に入れば講座いきますよ！と返答したのでまずはMac探しをして、

結局ヤフオクで1.5世代くらい前のMacBookPro（以下MBP）を購入。

沖縄よりやってきたMBPは思いのほか綺麗でバッテリー以外は問題なしでした。

が、ここで問題！

OSがMacOS10.4だと！

ここでひとつ解説をすると、iPhoneアプリを開発するデベロッパーキット（以下IDE）をXcodeと呼びますが

このXcodeの最新版がMacOS10.6以上でないと動かないのです。

OhOpps!

OS買わなきゃなのか？・・・はい、結局買いました。（ただ、ちょっと安く手に入れる方法があったのでそれで。）

OSが手元に届いた後、早速アップグレード作業をしてBootCampでWindowsXPを入れようと思ったのですが、

どうにもこうにも我が家のXPsp3が入ってくれない。（appleのアナウンスもWin7対応。ただしサポートに連絡すれば解決するかもだそうです）

7はすんなりインストできたのですが、この7のライセンスは別のマシンに使ってるのでとりあえず諦めました。

が、この作業を通じてMacというものを少し理解できたのがよかったです。

TimeMachineという機能があるのですがこれが素晴らしいバックアップツールでした。

定期的にみなさんもTimeMachineを利用してください。

さて、次にXcode導入！ですがその前にMac暦2ヶ月のお役立ち情報。

■ショートカット（基本はWindowsと一緒でCtrlキーがCommandキーになるだけ）

・space+ファイル　　　imgやPDFを専用ビューワーで閲覧できる

・Command+tab　　　winのalt+tabに相当。アプリの切り替えにどうぞ。

・Command+shift+4　winのプリントスクリーン(範囲指定)。

・Command+shift+4+space　winのプリントスクリーン(ウインド単位)。

・Control+トラックパットスクロール　拡大

その他ショートカット集　>>>

■豆知識

・windowsフォントはインストールできます。fontフォルダにコピペでOKです。

・Exposeと呼ばれる機能は作業効率をアップします。（画面4隅にショートカットを割り当てる機能）

これだけで随分とマカーになった気になれます。が、あくまでもその気だけです。

さて、いよいよXcodeの導入です。正確にはXcode4ですね。

このXcode、今年度よりAppStoreで600円で購入するようになったのです。やれやれです。

で、インストールをします。

これで開発環境はできました。

このXcodeにはCocoaというフレームワークや

iPhoneシュミレーターが統合されております。

なんのこっちゃわからなかったですが、そこはスルーします。

大事なのは開発環境が整ったということです。

ただし、iPhoneシュミレーターは完璧ではなく、

加速度センサーやジャイロ機能、Bluetooth機能など一部検証できないということは覚えておきます。

そのあたりまで確認しようとすると実機での検証が必要になります。

しかし、今のままでは開発はできますが実機での検証やAppStoreの登録ができません。

なんと、ここでDeveloper登録（\10,800）が必要に。

AppleIDをもって登録しましょう。

詳しくはこちらの記事などを参考にしてください。親切に書かれてあります。

iOSアプリ開発の準備 >>>

固体識別番号やらプロビジョニングキーとかぶっちゃけ訳わかりませんが、記事通りで問題ナッシングです。

はい、わからないものを無理して理解しようとするより、必要になるまで深く考えないスタンスがここで重要になってきます。

実際にXcodeを触りだして、余計に感じる事でもあります。

これはサボレといっているのではなく、どうしても知る必要が出たときに深く考えようという事です。

何故か？

時間は有限だからです。

もちろん、ポイント、ポイントでは壁にぶつかる必要もあるのですが、

そのときには周辺の理解力も上がっているはずなので効率良く覚えるためのワタクシなりのコツです。

ということで長くなりましたが導入までの序章でした。

次からは実際にXcodeを使ってアプリもどきなどを作成していきます。

次回は【xcodeとはなんぞえ？】です。

SeeYou　byebye！

※このシリーズは週一程度で更新されていく予定です。

※一応アプリル株式会社の了解を得て記事にしております。

たったこれだけで短縮URLサービスが作られていた件

かしこ — Tue, 12 Apr 2011 02:33:53 +0000

ようこそのお運び、厚く御礼申し上げます。

キテレツ荘で暗部を担当しております、かしこい風なだけのかしこです。

新メンバー"けんちき"の入居祝いを兼ねて一本記事を書きやした。その内容とは・・・？

さて、昨今気付いているか気付かぬ内なのかはわかりませんが

URL短縮サービス、もしくはURL短縮システムというのを多く見かけます。

なんじゃいそりゃ？

いえいえ、ご存知のハズです。

例えば、Twitterで写真をtwitpectやInstantgramへアップロードしたときや、URL貼り付けた時。

気付かぬ内に短縮されたURLになっていることが多々あるはずです。

firestrageにも短縮URL発行とかって機能もありましたね。

あと、pixivの[p.tl]とか。

今回はそのあたりの仕組みを作りながらお勉強したいと思います。

まずは…短縮URLサンプル。

そしてたった数ステップだけでこのサービスが作られていたことに思わず真似したくなるでしょう。

まずこのURL短縮の目的と仕組みですが以下のようになっていると思います。（たぶん）

■目的

長いURLだと煩わしい、もしくは文字制限のあるツールに貼り付けるには長すぎる。

こういったものを解消するために考えられたものだと思います。

故にこのサービスを展開するには極力短いドメインが必要になってきます。

上記記載のpixivのドメイン名は[p.tl]ですから。

※今回はドメインは用意していないのでドメイン関連箇所は各自考慮して頂きたい！

■仕組み

webサーバーにおいて現在のページから他のURLに転送できる仕組みがいくつかあります。

この中で「.htaccess」と呼ばれるwebサーバーの設定ファイルのようなものを利用して転送させます。

この.htaccessに短縮前のURLと短縮後のURLを所定の記載ルールにのっとって記載してやると転送します。

短縮URLというぐらいですからドメイン以降のURLも短く、且つランダムに設定してあげましょう。

1．ユーザーが短縮前URLを入力

2．短縮後ランダムURLを生成

3．短縮前URLと短縮後URLを所定の形に成型して.htaccessファイルに追記していく。

以上になります。

論ずるより触るがよろし！

ということでこちらにサンプルをご用意しました。

短縮URLサンプル

さて、お勉強です。

1については割愛しても問題ないでしょうかね。

formメゾットをpostにして書き込みルーチンにデータを送ってます。（getでも構いませんがサービスとしてならpostでしょうか。）

2についてはややこしい部分ではありましたが、幸いランダム生成の記事を書いてくださっていた方がいらっしゃったので利用させていただきました。

function getRandomString($nLengthRequired = 6){
$sCharList = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_";
mt_srand();
$sRes = "";
for($i = 0;$i<$nLengthRequired;$i++)
$sRes .=$sCharList{mt_rand(0,strlen($sCharList)-1)};
return $sRes;
}
$rand = getRandomString();

まぁ、みたまんまです。

3については書き込みとリダイレクトの構文を一気に解説します。

$shorten = $_POST['shorten'];
$file = '.htaccess';
$write = "Redirect permanent /kashiko_work/shorten/$rand $shorten\n";
$text = "http://www.kiteretsu-so.com/kashiko_work/shorten/$rand";
print "発行された短縮URLは【".$text."】です。";
print "

";
file_put_contents($file, $write, FILE_APPEND | LOCK_EX);

Redirect permanent A B　と記載することでAのURLにアクセスがあればBへ転送しなさいという意味になります。

Aというのは2でランダムに生成したサーバーのルートからのURLになります。

Bというのはpostで飛ばされてきたデータそのままです。

若干解説をすると1行目で入力画面からのPOSTデータを変数$shortenに入力

２行目で書き込むファイルを指定

4行目で書き込む形に整形して、５行目は見た目の整形

8行目でファイル書き込み指示です。

この形で.htaccessファイルに追記できればいいので

file_put_contents($file, $write, FILE_APPEND | LOCK_EX);

で追記しましょうね。と指示されています。

file_put_contents関数の第一引数は追記するファイル名、第二引数は追記する内容、第三引数は書き込みモードです。

今回の"FILE_APPEND | LOCK_EX"というのは追記します。そしてファイルにアクセスしているので他のアクセスは禁止しますという記載方法です。

詳しくは別途Google先生に聞いてみてください。

さぁ、いかがでしたでしょうか。簡単でしょｗ

実際のところphp10行くらいでできちゃってるんですから。

これを勉強するメリットは2つあります。

まず、既存のサービスは結構簡単に作られているんだよ。ということを理解できる。要するにアイディアなわけです。

次にphpという言語の見せ場のひとつ、ファイルにデータを書き込むということを理解できる。

実際にこれをサービス化するのであればセキュリティー対策とランダム発行のURLに重複がないかどうかをチェックする仕組みを入れてやらなければいけませんが・・・

それでもここまでできれば余裕じゃないでしょうか。

今回は既存サービスの仕組みを分解・理解・再構築のステップを踏まえたphpのお勉強でした。

ちなみにタイトルは以前のもーりーの記事「本当に読んでほしいならタイトルにこだわるべき」から参考にしました。

かしこ。

【Tips】JSを使ったGETの書き方

かしこ — Wed, 09 Mar 2011 16:06:19 +0000

ようこそのお運び、厚く御礼申し上げます。
キテレツ荘で暗部を担当しております、かしこい風なだけのかしこです。

昨今Ajax隆盛の中、じゃ、普通のJavaScript（以下JS）ってどうなのよ？ってところですが
ふとした時に便利な子です。

ん？前回の記事の前フリまんまコピペじゃないですかー！？

ということで製作現場で役立つJavaScriptの簡単なTipsをお送りします。

今回はJSを使ってgetでデータを受け取ってみたいと思います。

さて、getでデータを受け取ってみたい。。。とはなんぞえ？

「http://hogehoge.jp/index.html?hoge=1&abeshi=5」みたいなURLがあったとしたら・・・

?hoge=1&abeshi=5の部分がgetという方式でデータを送っている部分です。

本来、こういった処理はPearとかphpとかでやるんですがね・・・

phpだと「$_GET['hoge']」と書けば簡単に取得できるんですが敢えてJSでやります。

まずは論ずるよりサンプル確認。

■クリックしてサンプル確認■

ではそのソースとちょびっと解説。

1行目で関数つくります。

8行目、「location.search」でgetパラメータを取得します。

10行目、「&」があればデータを分割します。

12行目、「=」でデータを分割します。この時にpairという変数に「=」の前後の値が格納されます。

14行目で変数SSに所得したデータまんま入れてます。これは22行目のalertに渡してます。要は確認用なので不要な場合は削除可能です。

15行目から19行目に関しては取得した変数をこの後使い勝手がいいようにvl、ｖｌ2という変数にいれてあります。getパラメーターの数が増えればここの処理は増やします。（うまく書けば処理短縮できそう）

23行目はページがロードされた時に実行と指令です。

さてさて、これでJS内でのif文が構成しやすくなり、使い勝手の幅は広がります。

あとは「document.○○○.src」やら「document.getElementById('□□□')」とかと絡めていけばJSだけでphpと同じ様な事がある程度実現できます。

その辺りの実際の書き方なんぞはサンプルで確認してください。

phpが走らない環境とかではある程度これで代替はできるようになります。が、それってどんなシーンなのかはあまり想像できませんが（苦笑）。

が、こういうこともできるんだよーっというJSのTipsでした。

かしこ。

【Tips】JSを使ったマルチドメイン対策記述

かしこ — Tue, 14 Dec 2010 14:05:35 +0000

ようこそのお運び、厚く御礼申し上げます。
キテレツ荘で暗部を担当しております、かしこい風なだけのかしこです。

Twitterにてパワハラを受けてので記事を大急ぎで書き上げました！！！

昨今Ajax隆盛の中、じゃ、普通のJavaScript（以下JS）ってどうなのよ？ってところですが
ふとした時に便利な子です。

製作現場で役立つJavaScriptの簡単なTipsをお送りします。

クライアントに納品するまでは基本的には自サイトで製作、確認することになるかと思います。
普段はそれで問題ないのですがGoogleMapのAPI Keyはドメイン毎に発行されているので自サイトとクライアントサイトで正常に動作しない状態になります。
そんな時にJSです。

【一般的なAPI Keyの記述】

【JSを使ったマルチドメイン対策記述】

※Aサイト：www.kiteretsu-so.com Bサイト:www.kiteretsu-so.jp　とする。

===========================================

さてさて、如何でしょうか？
JS自体はシンプルなif文です。吐き出しに際してシングルクォーテーションで囲ってやらないと正しいhtmlにならないのでそこだけは注意です。

応用としてはアナリティクスをドメインごとにチェックするとか、まぁ、いろいろ考えれます。

それにこれはJSの基本であるif文でもあるのでこれを気にJSも触ってみてよ。

しかし、これだけで公開時のチェック項目がひとつ減らせるので是非参考にしてください。

かしこ。

まったりプレビュー　SoftBank Desire X06HT

かしこ — Sat, 08 May 2010 09:17:15 +0000

ようこそのお運び、厚く御礼申し上げます。
キテレツ荘で暗部を担当しております、かしこい風なだけのかしこです。

さて、私的に旬なネタがいくつかあった中で今を逃すと意味がなさそうなこのネタで参ります。

「まったりプレビュー　SoftBank Desire X06HT」

3月28日に孫さんが発表し4月27日に強硬発売されたアンドロイド2.1携帯です。
みなさん、興味はなんとなくあるけどまぁ、いいかぁーってなりがちなスマフォですｗ

前段階でのウリは下記のような感じです。

・3.7インチ有機ELディスプレイ
・HTC Senseと呼ばれるHOME画面のインターフェイス
・マルチタッチ
・Google 音声検索
・マルチタスク
・Flashlite搭載
・MMS非対応(これはデメリットですが)

ということで上記を抑えつつプレビューと参ります。

■Desireを使う前に。

使う前にやらなければならないことがいくつかあります。

・Gmail.comへのアドレス変更通知。
MMSが利用できないための措置です。
SB同志だった場合はSBのロングメールアドレスのレス依頼とドメイン許可設定の依頼も併せて行う必要あり。
ちなみに旧アドレスは存続されるのでSIMを差替えれば旧携帯で受信できます。
また冬くらいにはMMS対応予定だそうです。

・3G携帯からアドレス帳をエクスポート。
microSDにて該当ファイルをPCへ。その後、GmailにインポートすればOKです。

・付属のmicroSDが2Gなので交換したい場合は先に行うが吉。
microSDにアプリを退避させたり音楽や画像を置いておくので2Gでは心もとないかも。

・PCにHTCサイトよりHTCSyncをダウンロード・設定しておく。
HTCSncyとはPCとDesireを同期するツールです。

■Desireを使えるように。

まずオンラインショップから配送されてきた本機の梱包を解いた一枚。

次にバッテリカバーを外した一枚。

バッテリはパージされているので最低一度はカバーを外す必要があります。
背面上部に凹部があるのでさっくりあけて、SIMとmicroSDを差しましょう。
microSDは押し込むと外れますので無理に抜かないように。
その後、バッテリを装着して同梱されていたケーブルを差してまずは充電。

バッテリについては諸説ありますが”慣らし”をすると持ちがいいとのことです。
慣らしとはフル充電、フル放電を3回ほど行うことだそうです。
要するに最初2・3日は寝る前に音楽をエンドレスで再生させて寝ればいいのです。

通電しますと本体設定を適当に行って起動。
たしかネットワークの設定等々あった気がしますがあとから変更できる項目です。

このままだとメール設定が行われていないのでGmailの設定を行います。
全てのプログラムからGmailを選択して同期を行います。たしか同じくGmailの連絡帳の同期を行えたハズです。

以上で初期設定終了です。

■Desireを弄ぶ。

アンドロイドマーケットよりアプリをDLして便利していきます。

オススメアプリ

・TaskControl…（マルチタスク対策）
・MemoryForLemmings…（マルチタスク対策）
・QRコードスキャナー…（そのまま）
・乗換案内…（そのまま）

・shimeji（あいぽんのフリックに慣れた人はこれを）

・EverNote（月40Mまで無料なPCとの同期ツール）
・Foursquear（現在位置をTweeterに…あいぽんユーザーが使ってるのを見て密かに羨ましかった）
・UstreamBroadcast（Ustクライアント…アンドロイド2.1では動きませんでした。動作報告はあるようなのですが…）
・S2TweetNP…（今聞いている曲をTweeterに…これも動きませんでした。アプデに期待）

・GoogleEarth（おもちゃですが素晴らしい）
・Andjong（マージャン）
・Solitaire（ソリティア）
・Fishin’2Go（釣りゲー）

プログラムとして使うのはもちろん、ウジェットとして使えるツールもあります
。

Desire標準のカメラで夜景を撮影。

オートフォーカス・ズーム・露出の補正など携帯カメラにしてはよいかと思います。
ただ、手ぶれだけは…デジカメじゃないので仕方ない。

Desire標準のイヤマイク。

音はクセがない普通なカンジ。音楽聴いてる状態で着信が入るとちゃんとわかる仕様になっていました。
地味だけどピンがありがたい。

■Desireを評価する。

・3.7インチ有機ELディスプレイ
綺麗。ただし液晶に比べて日光に弱い。

・HTC Senseと呼ばれるHOME画面のインターフェイス
7シーン用意されててカスタマイズ可能。デフォルトでも中々に使いやすい。
【天気・Tweeter・メール・HOME・お気に入り・RSS・フリーエリア】（私はフリーエリアにウジェットを置いてます）

・マルチタッチ
あいぽんに引けを取らない感度です。
使用感はヌルヌル。拡大縮小はあいぽんと同じ。

・Google 音声検索
まったく期待してなかったですが、これは素晴らしい。
かなりの精度で音声を拾いブラウザの検索結果を開いてくれます。

・マルチタスク
正直、あまり実感はないですね。
逆に油断するとバックグランドでアプリが起動しっぱになるのでタスク管理アプは必須かな。
でも、いろんなアプリが立ち上がってるという事実はマルチタスク様々といったとこです。

・Flashlite搭載
標準ブラウザでパッチリ見れました。
が、重いのとかは辛いです。10.4へのアプデに期待します。

・MMS非対応(これはデメリットですが)
はっきり言ってこいつが最大のネックですね。

===================================================

・バッテリ…普通に使ってれば2日程度は持ちそう。microUSBあればPCで充電できます。
・発熱　　…ほんのり温かい。熱いまではいかないので低温やけどはしないかと。
・Gmail　 …きちんと設定すればプッシュ式で普通のメールとかわりはない。
・音声　　…マナーモードや個別の設定はきちんと切り分けができている。ただ、外国製の使い勝手に慣れるまでは…
・目ざまし…標準で搭載。まぁ、期待してなかったのでそこそこ使えるかな。
・wifi …すんません、基本使ってないので評価の仕様がないです。

その他気になる点はアプリが1.6用のものが多くアプデ待ちってのがあります。

あと使用していて不便だったのはGmail。送信されてきたときに名前がでずにアドレスが表示される。
なにかの条件で名前が表示されているのもあるんですが…
これはなんとかしたい。全力をもってアプリなり設定なりを捜索中です。

■統括

エンタメを求めるならあいぽん。
スマフォにしたいだけならエクスペリ。
もの好きはDesire。

といってもどれも帯に短し襷に長しで、
あいぽんは林檎さんの戦略次第で浮沈がきまりますし、
エクスペリアは安定ですがならわざわざスマフォにする必要ある？ってとこで、
Desireは環境とマーケットが未熟なのとSBの見切り発車なのが不安要素でもあります。

ただ、私がDesireを選んだ理由としては開発環境の自由度とFlashが決めてでした。

■最後に

スマフォ初体験の私としてはスマフォってすごいって思いました。
とにかく携帯ではなく携帯型PCですね。PCとの同期を前提に設計されてる点や同期アプリ、アップデートアプリなどすごいです。

みなさんもスマフォ乗り換えるなら決め手を見極めてください。（SBのスマフォは秋以降MMS対応してからでもいいかもね…）
そして乗り換える必要性を感じないなら無理に乗り換えはしないように。
はっきり言って優しくはないですから。（特にDesireは）

そして、キテ荘にこんな記事書いてよかったのかしらと今更思ってますーｗ

ハッタリ企画解体新書【ハッタリくんFlash】

かしこ — Wed, 07 Apr 2010 15:07:09 +0000

ようこそのお運び、厚く御礼申し上げます。
キテレツ荘で暗部を担当しております、かしこい風なだけのかしこです。

何か記事を書かねばと思いはや数日。
ここはやっぱりこれですかね。

ハッタリ企画解体新書。

リニューアルに併せてハッタリなコンテンツを作ろうとなったのが2月末。
3月末までにハッタリコンテンツと称して「キテレツWEB2.015」なる群れを用意しました。

・虚勢を張ってみよう。
・キテレツ忍者ハッタリくん
・おまけのキテレツボット
・さらにおまけのキテレツ時計

その中でも@tonka氏より解体依頼がありました”キテレツ忍者ハッタリくん”を解体してみようかしら。。。

まず、この記事はFlashの基本は抑えているものとしております旨、ご了承ください。
基本から抑えたい場合は下記のサイトをご参照ください。

Flashゲーム講座 & アクションスクリプトサンプル集（いろんな方もリスペクトしている神サイトです）
http://hakuhin.jp/as.html

ざっとしたパート構成案を考察

■タイトル
■名前等入力画面
■ゲーム部分
■結果
■ランキング

【前提】
ほぼすべての動きをAS化させて軽量にする。
シームレス感を持たす。

相撲鳥人間の際も軽量化はしていましたがどうしてもランキングやデータ登録周りでシームレス感がなかったことへの反省です。
ということで今回は登録まわりも含めた全編Flashでいくことにしました。

スクリプトバージョンはFlashプレーヤーバージョン9を鑑みてAS2を利用。
（AS3わからないのは内緒⇒この後、キテレツ時計のためにAS3に踏み込んだのも内緒）

大まかな流れを決めればパーツの作成へ移行

■タイトル
この時点でハイスコアとプレイNOを取得します。
プレイNOはデータ管理のために利用しているのと後述のランキング更新判定にも利用しています。
loadVariables()

■名前入力
名前・目標ちくわの設定画面で特に解説の必要はないかと。
名前の漢字NG設定とちくわ入力は最大999までに設定しているくらいです。
restrict

■ゲーム部分
ちくわを発生させてキャラクターとの当たり判定、ちくわ数等を取得する重要パートです。

①ちくわオブジェクトの動き
http://hakuhin.jp/as/move.html#MOVE_05
放物線を描く自由落下の動きにランダム要素を追加

②ちくわオブジェクトをランダムで鉄アレイ化

③キャラオブジェクトとの当たり判定
http://hakuhin.jp/as/hittest.html#HITTEST_04
当たり判定を取得して、ちくわ数と裏で実行している鉄アレイ指数を計算。
hitTest()
Key.○○○()

④ちくわオブジェクトの複製
http://hakuhin.jp/as/movieclip.html#MOVIECLIP_07
①で作ったちくわを複製します。複製回数の指定も含みます。
複製したちくわに個別のプロパティを持たす必要が発生するところで激しくツマリましたが・・・
attachMovie()関数内にてonEnterFrameで個別処理！他にもやり方はあるでしょうが・・・（eval関数が使えるなら他のやり方もありますが）
attachMovie()

■結果
ハッタリ指数という訳のわからない指数の計算と結果を登録する重要パートです。
ハッタリ指数とは目標ちくわ数に設定された基礎倍率と目標に対する取得ちくわの達成率を掛けたモノです。

①ハッタリ指数の計算式を導入

②ハッタリ指数に対するコメントとコメンテーターを決められた値に準じてランダムに表示。

③phpに取得ちくわ、ハッタリ指数、名前をシームレスに引き渡す。
sendAndLoad()

■ランキング
ゲーム後、すぐにランキングに反映しないといけないのでどのタイミングでデータを取得するのかがキモのパートでした。
結局、ランキングフェイズに行くたびにランクデータを取得するので都度ローディングしています。

①ハイハッタリ順にソートしておいた上位10件のデータをロード

②ハイスコア時のカラー変更のために現在のプレイNOとロードしたデータに記録しているNOのつき合せ処理。合致した場合、カラーが変更される。

■バックグランド
http://hakuhin.jp/as/sound.html#SOUND_00
全セクションでサウンドの外部読み込みとI/Oの切り替え実装。
sound_obj.setVolume();

細かいパート解説とかいるようならflaファイル公開してもいいか、質問あればブロック単位で回答してもいいかとか、
とも考えてますが、みなさんの要望次第でどうするかまた考えます。

ということで、ハッタリくんFlashパート解体新書でした。（phpパートはまったく別ものなので要望あれば解体します。）

感想としては・・・やってる処理に対してできあがりの印象が本当にしょぼいのがステキ。クソゲー作ろうの趣旨にはバッチリだと思います！

以上、長々となりましたが解体新書でした。

P.S　Flashは161KBに抑えました！

【夏休み企画】検索システムつくってみようぜ！⑤

かしこ — Mon, 07 Sep 2009 14:00:59 +0000

コオロギの唄が聞こえる季節になってきました。

やたらと忙しく最終回の5回目をなかなか更新できなかった、かしこです。

【５、条件による検索結果の表示（完成）】

・検索結果の表示。

というルーチンの概要説明となります。

指定した条件に対してdata.phpの中身を表示。前回の検索数で作った変数$banbanを利用してチャラット完成させましょう。

実際の完成形はこちら⇒「キテ荘的検索ってみよ」

スターターキットはこちら。

さて、前述の通り$banbanを利用します。

？・・・$banbanってなにって？

ふむ、$banbanは前回の検索数表示ルーチンの中に、仕組んだ変数ですが、この変数の中には表示されるべき内容のみが値のみが配列として格納されています。

これはですね、data.phpの全データを$listとして読み出して、これを元に条件に該当するものを絞って、結果その件数＝検索数というルーチンを用意しました。

その際に、該当する時点の変数だけを$banbanに格納するということなのです。

わかりにくれば検索数のfor文の手前で「print_r($list)」とすると全件表示されますが、for文後に「print_r($banban)」とすると該当するデータのみの表示となります。

これこそが本日、表示すべきデータそのものということなのです。

ではデータを書き出してみましょう。

for($i= ０;$i<検索数;$i++){

print $banban[i]["id"];

print $banban[i]["price"];

print $banban[i]["comment"];

}

こうすると該当i番目の連想配列のkeyを呼び出しめでたく表示されます。

あとは表示させたい形にphpを書き出すようにしてあげればOKです。

htmlの形成は完成ファイルを参照してください。

ポイントは前回の検索数を表示するルーチンに$banban（変数はなんでもいい）を仕組んでおく。あとはそれを表示するという”よい意味での手抜き”です。

今日のデータはこちらからダウンロードできます。

さてさて、検索シリーズは今回で完成ということで、終了です。

ただし、ページングの解説は飛ばしてますし、実際は並べ替えも必要になるでしょうが・・・今回のシリーズはあくまでも検索ルーチンの構築なのでまた違う機会にでも紹介・解説できればなーっと。

というわけで無駄に記事の更新を続けた検索システムをつくってみようぜ！はいかがでしたでしょうか。

難易度は☆☆★★★・・・こんなもんでしょうか。

初見でわかるアナタはステキです。わかないアナタも完成形のソースからきっかけをつかんでもらえばOKです。

ということでバイババーイ！

【夏休み企画】検索システムつくってみようぜ！④

かしこ — Thu, 20 Aug 2009 15:35:21 +0000

今年は冷夏だそうですが皆様いかがお過ごしでしょうか。

韓国の友人に荷物を送ったら韓国の税関で検疫をうけたと連絡を受けたかしこです。

【４、条件による検索結果数の表示】

・検索条件に何件ヒットとしたか。

というルーチンの概要説明となります。

指定した条件に対してdata.phpの中身を精査して何件該当するのか。ここをクリアすれば検索は余裕です。

実際の完成形はこちら⇒「キテ荘的検索ってみよ」

スターターキットはこちら。

では、ルーチンを考えてみます。

Getで受信した変数とdata.phpに連想配列として格納されている商品データをif文で選別する。

？なのことだ・・・とお思いのアナタ。

このシリーズの一回目にやった”print_r($list);”でデータを確認してみてください。

[cat]=>”1″ とかという表記があったはず。それとGetで受信した変数（$cat）を付きあわせて該当するファイルをカウントする。

それを条件の数だけチェックしていけば残った配列数が該当件数、しいては該当ファイルということになります。

あとはそのルーチンをプログラムしてやればOK！

ということで下をご覧ください。
=========================================

include ‘data.php’;

if($_GET["cat"]){
$cat = $_GET["cat"];
}else{
$cat = “” ;
}
if($_GET["catd"]){
$catd = $_GET["catd"];
}else{
$catd = “” ;
}
if($_GET["new"]){
$new = $_GET["new"];
}else{
$new = “” ;
}
$snum = $cat.”-”.$catd.”-”.$new;
?>

$num = count($list);
$searchnum = 0;
if($list){
for($i= 0;$i<$num;$i++){
if($cat){
$a = $list[$i]["cat"];
}
if($catd){
$b = $list[$i]["cat_detail"];
}
if($new){
$c = $list[$i]["new"];
}
$dnum = $a.”-”.$b.”-”.$c;
if($snum == $dnum){
$searchnum++;
$banban[] = $list[$i];
}
}
}

=========================================

前半ブロックでGetで受信した変数を付きあわせしやすくするために”$snum”という変数にまとめています。

さてさて、本日のメイン解説となる後半ブロックです。

まずdata.phpから読み込んだデータをcount関数で何件（何個の配列数が）あるかどうかを調べて$numに格納します。

これはその下のfor文を何回まわすのかという数を調べているわけです。そう、$numの数だけまわします。

$searchnumは検索該当数をカウントするために用意。forでまわる度にカウントが１つずつ増えていきます。これが「○○ヒット」の数になるわけです。

ただし、このままですと$listが全部表示されてしまいますのでfor文の中で精査していきます。

$a=$list[$i]["cat"]・・・＄listの中のforのi番目の連想配列キーcat　を変数$aに格納

$b = $list[$i]["cat_detail"]・・・＄listの中のforのi番目の連想配列キーcat_detail　を変数$bに格納

$ｃ = $list[$i]["new"]・・・＄listの中のforのi番目の連想配列キーnew　を変数$cに格納

これを変数$dnumにまとめて格納・・・そう、これが所謂、精査の条件になります。

あとはGetした$snumとforの中の$dnumのイコールのときだけ$searchnumにプラス１してやります。

これで検索数がはじき出されます。

ここからは補足ですが・・・

$banban[] = $list[$i];は次回、実際のデータを吐き出す際に使用する項目です。これは該当したi番目の配列を$banbanに配列として格納してゆけよ！という命令です。

ここは次回に使うのでまた改めて解説しますが、要はヒットした配列だけを$banbanに入れるということなのです。

ということで本日はここまでです。（どんどん複雑になっていくなぁ・・・）

今日のデータはこちらからダウンロードできます。

さてさて、次回は最終回です。実際にデータを吐き出すルーチンをやりますが、ポイントは$banbanですｗ

【予定】

・５、条件による検索結果の表示（完成）

【夏休み企画】検索システムつくってみようぜ！③

かしこ — Wed, 19 Aug 2009 15:11:41 +0000

キテレツ荘のデザインがリュニューアルされた様ですが皆様いかがお過ごしでしょうか。

さてさて、そろそろ脱力し始めそうな気配がプンプンしているかしこです。

【３、Getによるform内のphp化】

・Getで受信するルーチン

・Getで受信した内容をフォームに反映させる

この2つで参ります。が、えー、恐らくこのシリーズのキーポイント１です。

そのため、ボリュームもヤバイかも。

実際の完成形はこちら⇒「キテ荘的検索ってみよ」

スターターキットはこちら。

まずはGet、Postや書き方などをこちらで予習することをオススメします。

■Getで受信するルーチン

フォームのメゾットをGetとして送信するとURLが「index.php?cat=1」のような形になります。

これを受信するには「$_GET["cat"];」と書いてあげれば受信できます。

ではでは、今回のシステムもcatを受信するので次のようにします。

=========================================

if($_GET["cat"]){
$cat = $_GET["cat"];
}else{
$cat = “” ;
}

=========================================

なにをしているのかといえば『$_GET["cat"]』があれば変数$catに代入。

なければNull（空に）という処理をしています。

今回のシステムではcat、catd、price、new、typeの5つを受信しますが、type以外は上のルーチンで対応可能です。

typeについてはﾁｪｯｸボックスを利用しているので扱いが少し異なります。

=========================================

if($_GET["type"]){
$type = $_GET['type'];
}else{
$type = array(1,2,3,4,5,6);
}

=========================================

$_GETがあれば変数$typeへ、なければ$typeに配列として1,2,3,4,5,6を代入しています。

何故、ここだけ処理が違うのか・・・といいますと、

受信した際のURLが「index.php?type[]=1&type[]=2&type[]=3」というように受信して変数typeに配列として格納しています。

で、チェックボックスが全て空で検索するという矛盾対策のために空で受信した場合は全てにチェックを入れて受信するという処理を行っています。

ま、このあたりの処理はあまり深く追求しなくてもよいと思います。配列の受信はこんなものだ！的でよいでしょう。

■Getで受信した内容をフォームに反映させる

なんのことかといいますと、form内のselectbox等で検索をしますわね。

結果が呼びだされた時にこの処理をしないとイチイチselectbox達が初期状態に戻ります。

そうなると自分が何を検索したのかがわからなくなるという事態が発生します。またその状態で再度検索をすると先の条件がどこかにいってしまいます。これはユーザービリティ云々の前に検索システムとしては致命的な欠陥といってもいいでしょう。

ここからはそうならない処理を行ってみたいと思います。

では、具体的にどうするのか？

要はselectの中身に”checked”をつけてやれればよいのです。

下は新着か否かという項目をいじってみた例です。

=========================================

=========================================
この例でいくとGetで$newを取得していれば０か１の値が入っているのでselectの間にphpをねじ込んでいます。で、もし０（null）なら「こだわらない」に”checked”が、１なら「新着で探す」に”checked”が入るので、めでたく選択項目がキープされるわけです。

他の項目もこれと同じルーチンでOKですがやはりチェックボックスの項目だけは別になります。
=========================================

if($type[0]==1){
print “checked”;
}
?>
/>

if($type[0]==2||$type[1]==2){
print “checked”;
}
?>
/>

if($type[0]==3||$type[1]==3||$type[2]==3){
print “checked”;
}
?>
/>

=========================================
これも理屈は同じで”checked”をつけるかつけないかっていう処理なのですがif文の条件が少し複雑で$typeの配列の何番目に格納されているかが送信時のチェックボックスのチェック数によってことなるので想定される配列の順番だけ条件を用意しておるわけです。

このあたりは少し複雑で、基礎的な知識がないと苦しいです。勉強会があるようなので、解説してもいいかと思っています。

詳しくは今日の完成データを参照してくだることを期待しています。

ということで本日はここまでです。（だいぶ長くなりましたよ・・・）

今日のデータはこちらからダウンロードできます。

さてさて、次回は実際の検索ルーチンが絡んでくる検索結果数の表示にチャンレンジしましょう。

【予定】

・４、条件による検索結果数の表示

・５、条件による検索結果の表示（完成）

キテレツ荘 » かしこ

【短期連載！Mac初心者がiPhoneアプリをつくってみた！（予定）】【ハウチーXcode】

【短期連載！Mac初心者がiPhoneアプリをつくってみた！（予定）】【Xcode4導入編】

たったこれだけで短縮URLサービスが作られていた件

【Tips】JSを使ったGETの書き方

【Tips】JSを使ったマルチドメイン対策記述

まったりプレビュー SoftBank Desire X06HT

ハッタリ企画解体新書【ハッタリくんFlash】

【夏休み企画】検索システムつくってみようぜ！⑤

【夏休み企画】検索システムつくってみようぜ！④

【夏休み企画】検索システムつくってみようぜ！③

まったりプレビュー　SoftBank Desire X06HT