2013/07/27

スマホサイトの検証 ( iPhone 3GS のアクティベートはソフトバンクへ! )

昨今、スマートフォン向けのWEBサイト構築を仕事でよくご依頼頂く様になったのだが、
昔、ガラケーでもあったのだが、機種依存というか、ブラウザのバージョン(iOSのバージョン?)で、WEB画面の表示が異なる。(というか機種によりデザインが崩れる。)



クライアントから「iPhone 3GS」機種で表示が崩れるんですよーとご連絡を頂きました。
ということで、Wi-Fi接続し、WEBの確認をしようと思い、
SIMカード無しの「iPhone 3GS」の機種をアマゾンで購入した。価格は1万円前後

早速、手元に届いたので、検証しようとしたら
「iPhone 3GS」はアクティベートしてないとWi-Fi接続ができないらしい。。。


仕方ないので、再度、アマゾンで「iPhone 3GS」のアクティベート用のSIMカードを購入して
試したがアクティベート不可。


うーん。困った。
WEBで探してもアクティベーションの方法が見つからないし、
こんな検証目的で3G回線の契約をするのはアフォらしいし。


最終手段で、
ソフトバンクへ行きWi-Fi接続するには、どんな手段があるか聞いてみよう!と思い
ソフトバンクへ赴いた。

すると、


わたし: この機種なんですが、Wi-Fi接続をしたいんです。

担当者: ちょっと待ってくださいね。

担当者: SIMカードが大量に入った袋をもってきて、機種をゴニョゴニョ

担当者: はい。出来ましたよ~。

わたし: おおぉ!



上記の作業は、5分程度。
iPhone 3GS のアクティベートはソフトバンクへ行きましょ!

2013/05/08

「Ruby On Rails」のWindows7 での開発環境の構築

Windows 7 professonal SP1 (64bit)環境で「Ruby On Rails」の開発環境を構築したのでメモ


■やったこと
1. 「Ruby 1.9.3」のインストール
2. 「SQLite」のインストール
3. 「DevKit 4.5.2」のインストール
4. 「Ruby On Rails 3.2.13」のインストール
5. アプリケーションの作成
6. とりあえずブラウザで表示

■前提条件
Windows 7 professonal SP1 (64bit)環境があるのみ。
特にApacheなどのWEBサーバーがインストールされている必要は無い。


■1. 「Ruby」のインストール
下記のURLからインストーラーをダウンロード、及びインストールします。

ダウンロードしたファイルは「rubyinstaller-1.9.3-p392.exe」

インストールするフォルダを指定できますが、デフォルトのインストール先のままで、
「C:¥Ruby193」にします。

※インストールの確認
DOS窓(ファイルを指定して実行で「cmd」を入力)を開き、下記コマンドを入力

> ruby -v

正常にインストールされると

> ruby 1.9.3p392 (2013-02-22) [i386-mingw32]

などの様に表示されます。




■2. 「SQLite」のインストール
下記のURLからパッケージをダウンロードしインストールします。

ダウンロードしたパッケージは下記の2ファイル
sqlite-shell-win32-x86-3071602.zip (SQLiteクライアント)
sqlite-dll-win32-x86-3071602.zip (SQLite本体)


上記のZIPファイルをそれぞれ解凍すると
「sqlite3.dll」「sqlite3.exe」「sqlite3.def」の3ファイルが見つかります。
この3ファイルを「C:¥Ruby193¥bin」にコピーします。

※インストールの確認
DOS窓(ファイルを指定して実行で「cmd」を入力)を開き、下記コマンドを入力

> sqlite3 -version

正常にインストールされると

3.7.16.2 2013-04-12 11:52:43 cbea02d93865ce0e06789db95fd9168ebac970c7

などの様に表示されます。




■3. 「DevKit 4.5.2」のインストール
DevKit は、Windows環境でネイティブなC/C++拡張をビルドする為のツールキットで、
アプリケーションを作成する際に必要になります。

下記のURLからインストーラーをダウンロード、及びインストールします。


ダウンロードしたファイルは「DevKit-tdm-32-4.5.2-20111229-1559-sfx.exe

ダウンロードしたファイルをダブルクリックすると展開先を指定するダイアログが表示されるので「c:\devkit\」と指定し、「Extract」ボタンをクリックし解凍します。

※インストール
DOS窓(ファイルを指定して実行で「cmd」を入力)を開き、
DevKitが格納されている「c:\devkit\」ディレクトリへ移動します。

移動するコマンドは下記
> cd c:\devkit\

下記コマンドを入力し、初期化します。
> ruby dk.rb init

続いてインストールします。下記コマンドを実行します。
> ruby dk.rb install





■4. 「Ruby On Rails」のインストール
Rails のインストールは「gem」というコマンドから行います。
ここではバージョン「3.2.13」を指定してインストールします。

DOS窓を開き、下記コマンドを実行します。

> gem install rails -v 3.2.13



※インストールの確認
DOS窓を開き、下記コマンドを実行します。


> rails -v

正常にインストールされると

Rails 3.2.13

と表示されます。



とりあえず、これで開発環境はできました。




■5. アプリケーションの作成
新規にアプリケーションを作成します。
アプリケーションは「c:\data\」フォルダの中の、「sample」というフォルダに構築します。

・Cドライブの直下に「data」というフォルダを作成します。(sampleフォルダは作成しません。)

DOS窓を開き、「c:\data\」フォルダへ移動します。(下記コマンドを実行)

移動するコマンドは下記
> cd c:\data\

アプリケーションを作成します。(下記コマンドを実行します。
> rails new sample

※これにより「sample」フォルダが作成されます。



■6. とりあえずブラウザで表示
Railsでは、WEBrickというHTTPサーバーが標準で提供されており、
開発したアプリケーションを特別な設定など不要で、すぐに起動できます。

とりあえず、このHTTPサーバーを起動し、ブラウザからアクセスできるように
下記のコマンドをDOS窓から実行します。

c:\data\sample>rails server


すると、下記の様に表示されます。

=> Booting WEBrick
=> Rails 3.2.13 application starting in development on http://0.0.0.0:3000
=> Call with -d to detach
=> Ctrl-C to shutdown server
[2013-05-08 15:13:50] INFO  WEBrick 1.3.1
[2013-05-08 15:13:50] INFO  ruby 1.9.3 (2013-02-22) [i386-mingw32]
[2013-05-08 15:13:50] INFO  WEBrick::HTTPServer#start: pid=5828 port=3000


この状態で、ブラウザから下記URLにアクセスすると、画面が表示されます。






2013/01/28

リサイズ完了後のイベント取得


リサイズ完了後のイベント取得

var timer = false;

$(window).resize(function()
{

if (timer !== false)
{
clearTimeout(timer);
}

timer = setTimeout(function()
{
               何かしらの処理
}, 200);
});

2013/01/27

Google Map (v3) アニメーションGIF

アニジフが何やらGoogle Map で動かないので調べてみた。

optimized:false

上記オプションで回避できるぽいのでメモ



var markerOptions = {
position: latlng,
map: map,
icon: icon,
draggable: false,
title: name,
optimized:false
};



via. http://code.google.com/p/gmaps-api-issues/issues/detail?id=3095

2013/01/22

Google Map (v3) カスタムオーバーレイ

オーバーレイで表示したアイコンや、テキストがクリックできない。という
記事をたくさん見たので、その解決策を記載します。




https://developers.google.com/maps/documentation/javascript/overlays?hl=ja#Initializing

何やら、zIndexを変更する。との記事をよく見かけましたが、
上記のURL(api document )を確認すると、レイヤーの順番が記載されていました。



ここから(api document)引用-----------------------------------
MapPanes タイプのペインのセットで地図上の各種レイヤの積み上げ順序を指定します。次のペインが使用可能で、最下部から最上部へと積み上げられる順にリスト表示されています。
  • MapPanes.mapPane
  • MapPanes.overlayLayer
  • MapPanes.overlayShadow
  • MapPanes.overlayImage
  • MapPanes.floatShadow
  • MapPanes.overlayMouseTarget
  • MapPanes.floatPane
ここまで(api document)引用-----------------------------------



つまり、書き出しの際に、下記のように設定しているものを、

panes.overlayLayer.appendChild(div);

もっと上位のレイヤー「MapPanes.overlayMouseTarget」を使用するように変更。

panes.MapPanes.overlayMouseTarget.appendChild(div);



これでクリックイベントが取れました。