キテレツ荘 » Lab

【短期連載！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！

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

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

ハッタリ企画解体新書【ハッタリくん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に抑えました！

Bing～MSNの新検索エンジン

もーりー — Mon, 08 Jun 2009 13:17:24 +0000

めっきり仕事が落ち着いております、どうも、韋駄天でおま。

さてさて今注目されている検索エンジンといえば6月某日から日本でもβ版が公開になったMSNの新検索エンジンBingですよね。

TechCrunchの記事によるとすでに正式版がスタートしているアメリカを含む地域でYahooのトラフィックを超えたそうです。

ただ、珍しがっていろんな人が使っているため一時的にトラフィックが上昇したというのが大体の見解らしいですが、日本でも同じようなことが起きるかもしれませんね。

BingのUIを見て思ったのですが、Googleを含めやはり検索エンジンはシンプルなほうが良さそう。（個人的意見ですいません。）

とまぁそのあたりも含め、β版とはいえ、早めにサイト登録しておくにこしたことはありません。

現状Live Searchの検索結果が引き継がれているようですが、すでにBing用の登録ページが公開されているのでこの記事を機に登録しておいてください。

Bingサイト登録はこちらから>>

QRコードからアドレス帳に登録【忘備録】

もーりー — Thu, 04 Jun 2009 14:09:58 +0000

おばんです、韋駄天です。

モバイルサイトマーケティングにおけるQRコードの役割はいろいろありますが、ひとえにQRコードと言ってもURLへ誘導するだけのものではありません。

QRコードで可能なことは
・サイトのURLを表示
・テキストで文字情報の表示
・アドレス帳に登録
・メールアドレスの登録
・メロディ・画像の再生／保存
・Bookmark登録
・アプリ
など。

今回はQRコードからアドレス帳に登録する際のやり方を忘備録としてメモ。

各キャリアによって微妙に書き方が違う

【au】【SoftBank】
MEMORY:メモ領域にセットする文字列（必須） NAME1: 韋駄天　（改行） NAME2: 太郎　（改行） MAIL1:kiteretsuso@gmail.com　（改行） TEL1:08012345678（改行） ADD: 大阪市北区東天満
など

【docomo】
MEMORY:MECARD:N:韋駄天,太郎;SOUND:ｲﾀﾞﾃﾝｴ,ﾀﾛｳ;TEL:08012345678;EMAIL:kiteretsuso@gmail.com;ADR:大阪市北区東天満;URL:http://www.kiteretsu-so.com/;;
など
MEMORY～は一行で書くようにしましょう。

【3キャリア対応】
MEMORY:MECARD:N:韋駄天,太郎;SOUND:ｲﾀﾞﾃﾝｴ,ﾀﾛｳ;TEL:08012345678;EMAIL:kiteretsuso@gmail.com;; NAME1:韋駄天太郎 NAME2:ｲﾀﾞﾃﾝﾀﾛｳ MAIL1:kiteretsuso@gmail.com TEL1:08012345678

上記、docomoの部分は改行しないでそのまま使用してください。

3キャリア対応サンプル

Webトレンドマップ

もーりー — Tue, 02 Jun 2009 15:08:40 +0000

人生の甘い蜜だけを吸って生きていきたい、どうも、韋駄天でごわす。

キテレツの皆さんが頑張って更新してるのでネタがないながらもご紹介。

あっしのはてブしてる人からのネタです。

なんでも調査会社iAがWebトレンドマップをFlickrでアップしていたようです。

調査会社iA Webトレンドマップ >>

東京メトロに見立てた昨年度のWebトレンドマップですが、かなり綿密に作られています。
話題になったサイトや人までいるので、こんなものもあったのかぁといろいろ楽しめます。

まずはこのトレンドマップの見方を解説。

■駅の高さ
そのドメインのアクセス数、収入、メディアの関心などを参照しており、そのドメインの成功を表しています。

■幅
ドメインを所有する会社の安定性を表しています。
しかし大企業だからといって大きな建物になっているわけではありません。
ドメインが重要なオンライン構成要素として優れていないと、駅は薄いままとなります。

■位置
駅の位置はそれが属すグループを示しています。
駅が本線の中になる場合は老舗のサイト、本線にあれば中心的なサイト、本線の外にあれば主要ではないサイトとなっています。
※

注）かなりざっくりした訳です。 excite翻訳のバカヤロー。

マップが大きすぎてちょっと見にくかったので愛用のissuuにかけてみました。

Webトレンドマップ for issuu >>

キテレツ荘、公式コンテンツ「まさかのディクショナリー」

かしこ — Sun, 10 May 2009 15:39:06 +0000

本日の大阪の最高気温は28℃だそうです。

こんばんわ、かしこです。

世の中はキテレツ荘キテレツ巡業春場所で盛り上がっている最中ですが、公式コンテンツ公開のお知らせです。

公式モノとしては以前、韋駄天さんがブログパーツ「キテレツ化」をリリースしていましたがコンテンツという形で「まさかのディクショナリー」なるものを第二弾としてリリースしました。

「まさかのディクショナリー」

このコンテンツはキテレツ荘からのお題に対して、皆様が回答していくというシンプルなものです。

詳しいアナライズはコンテンツにてご確認ください。

公式ページにはブログパーツのソースも公開されています。

楽しみ方はアナタ次第の「まさかのディクショナリー」、お楽しみください！

【第1回キテレツ巡業キテレツ春場所】　コンテンツ公開！！

寺子屋タラコ — Sat, 02 May 2009 14:36:03 +0000

こんにちは。寺子屋タラコです。
公開が遅くなりましてすみません！

さて、ノリと勢いで始まった
「第1回　キテレツ巡業　キテレツ春場所」！！

紅組、白組の両コンテンツが無事アップしました！！パチパチパチ！！！
みなさま大変お疲れ様でした！
わたしは対決に関しては何もしてません。すみません・・・。

キテレツ荘の住人が紅白に分かれ、1ヶ月もがきこだわりぬいた血と汗と涙の結晶！
ぜひぜひご覧いただき、「これぞキテレツ！」と思った組に投票をお願いします！！

～～第1回　キテレツ巡業　キテレツ春場所～～
■内容：
「キテレツっぽいコンテンツ」をテーマに赤・白に分かれ、内容を競い合うというもの。
■チーム
紅組・・・棟居真一郎、韋駄天太郎、とんか
白組・・・風の谷のかしこ、出町柳しんご、ふーぐー
（告知サイト制作・・・寺子屋タラコ、風の谷のかしこ）
■審査委員長
デジハリ大阪木村氏（？）
キテレツ荘をご覧の皆さま

⇒春場所投票サイトはこちら！

なお、5月10日（日）10時よりデジハリ大阪校セミナールームで
身内向けの発表会が行われる模様です。
発表者の皆様よろしくお願いします！！

勉三会の資料にストリートビューの資料

かしこ — Sun, 29 Mar 2009 16:30:51 +0000

どうも、忙しいと言い訳を連発するかしこです。

勉三会のムービーやら画像をあげれてません。

時間を見つけて必ずアップしますので今しばらくお待ちください。

また先週のサイト紹介ができてません。どうもすいません！

さてさて、本題です。

勉三会で使用したPHPファイルと要望の高かったストリートビュー（以下SB）のネタです。

PHPファイル

まず、ダイレクト認証がかかっているので以下のID,Passでアクセスしてください。（フリーで納品したりする際に使うフォルダなので・・・）

ID:35c

Pass:download

解説する必要もないかと思いますがポイントだけ。

===PHP=======================

１．indexファイルのformで（inputタグのvalueの値を）regist.phpへ値を渡しています。【post】

２．regist.phpは受け取った値（$data = $_POST['other'];）をdata.datへ書き込んでいます。【file関数】

３．kakunin.phpでは書き込まれた値を判断してステータスをレンダリングします。具体的にはdata.datファイルに書き込まれた内容を読みにいき、それをvalueという変数に格納します。その変数の値をif文でレンダリングするというわけです。【for(foreach),if,file関数】

シンプルですがPHPの基本が詰まったサンプルです。【】の中身は何をしているのかを記述しているのでググってみてください。

===SB========================

２４行目からのスタイル宣言はSBに必要な要素ですので深く考えずに。

３１行目はGoogleAPIKeyを宣言しているので利用ドメインに対応したAPIKeyを入力してください。

４５行目からはGoogleMapに虫眼鏡アイコンを追加しているのでその設定。

６２行目からはフキダシの設定。

６９行目からはSBのメイン設定。

８７行目からはSBのSB対応エリアをGoogleMap上でブルーに表示させている設定。

あとは３９、７６行目でGoogleMapとSBのレンダリングエリアを指定しているので９４、９５行目で対応するdivを用意しています。

この二つを連動させればgooglemapの緯度経度をPHPで管理するなんてこともできるので次回の勉三会のネタにしてもいいかなぁーと考えたり考えなかったりしてますが・・・

惜しむらくはgooglemapとSBの連動がIEサポートされていない（２００８年冬の時点で）のが残念ですね。いろいろ調べたんですがAPI側で修正パッチをあててくれないことにはどうしようもないそうなので今しばらくお待ちくださいといったところでしょうか。

以上、ネタ資料＆解説でした。

業務連絡。春場所用の基本システム完成してます。

ウェブサービスを作ってみる！チラシの裏掲示板（１）

とんか — Sun, 08 Mar 2009 14:06:14 +0000

どうも、私が、とんかです。

とりあえずそろそろ重い腰をあげてなんか作ってみよう！ということで
ウェブサービス（というにはあまりに拙いサムシング）を作ることにしました。

が、完成品をアップだと思ったより時間がかかりそうなので
制作過程をこれから順次公開していくことにします。

制作物のタイトルは「チラシの裏」

某掲示板では、くだらない書き込みの後にこのような発言が付くことがあります。
「チラシの裏にでも書いてろ！」

そこで、本当にチラシの裏に書けないものかと思い、作ってみることにしました。
では具体的にどのようなサービスにするつもりかと言いますと

チラシが表示される
過去の書き込みが表示される
チラシの裏に自由に書き込みができる
書き込みが終わると、丸められてゴミのようにアーカイブされる
丸められたアーカイブは広げて見ることができる

といった感じの画像掲示板ライクなものにしようと考えました。
このサービスのポイントは以下の感じ。

画像として書き込むので文字でも絵でもwebカメラでも何でも書き込める
書き込んだ結果がシワシワに丸められるのでスッキリする
チラシに「Amazonアフィリエイト」を配置して俺ウマウマ

では実際にできているところまでを公開します。
チラシの裏

まだまだですね。
今後追加したいポイントです。

Amazon APIから画像を読み込んでチラシを自動生成する（現状はスーパー玉○の広告…）
書き込み方法が現在は文字だけなので「フリーハンド」「Webカメラ」での書き込みができるようにする
早くデザイン作業に移りたい
エラー処理やらローディング処理やらバグまみれをなんとかする
音とかモーションつけて爽快感を出す

とりあえず細かい解説はまた今度。
とりあえず重い腰を上げるための第一弾告知でした。

/////////
追記ソース
ChirashinoUra.zip