FC2ブログ

Pocket WiFi LTE(GL06P)で無線LAN

Pocket WiFi LTE(GL06P)
へ機種変してみました

これによりかなりはやく通信することができるようになりました

ただし、初期設定では
無線LAN内でアクセスすることができません

このため、初期設定から変更する必要があります

Android アプリの fing
もしくは
iPod touch のアプリ Snap
を使い、ルーターのIPを調べ
そこへ
ブラウザでアクセスします

Nexus7 なら chrome
iPod touch なら safari
でOKです

アクセスしたら、初期パスワードを変更していないなら
ユーザ名 admin
パスワード admin
でログインし
プライベートセパレートを無効にします

これで無線LAN内部で情報をやりとりすることが可能になります

同時に10台まで接続可能ということなので
仮想環境にサーバー構築して通信することも可能です

スポンサーサイト



テーマ : ネットワーク関連
ジャンル : コンピュータ

Google Nexus7 を Wifi で adb connect するには

Google Nexus7 を
USBケーブル接続ではなく、wifi で
adb connect するようにしました

これにより、アプリ開発するときに
USBポートに挿さなくてもよくなりそうです

まず、
実験に使った環境ですが
今回は Ubuntu 12.04 LTS 64bit を使っています

すでに、Android 開発環境が整っているのが前提ということで書いておきます

まず、Nexus7 をUSBで Ubuntu につなげて端末を啓き

lsusb コマンドで
ベンダーID
プロダクトID
を調べて、

sudo vim /etc/udev/rules.d/51-android.rules
で設定ファイルを開き
SUBSYSTEM=="usb",ATTRS{idVendor}=="ベンダーID",ATTRS{idProduct}=="プロダクトID",MODE="0666"
を追記します

これにより、実機検証が可能になります

ここまでできたら、次に
adb tcpip ポート番号
とすることで
指定したポート番号で adb コマンドを使うことで接続できるようになります

例えば
adb connect 5555
を実行した場合

Nexus7 のIPアドレスが
192.168.10.250
なら
adb connect 192.168.10.250:5555
というように指定することで
接続できます

もし、接続完了しているなら
adb devices
でデバイスがでてきます

ただ、ポート解放状態になっているため
セキュリティが下がります
この状態ではLAN内部のマシンなら
どれでもアクセス可能になっているためです

このため、wifi環境で行なうにしても
自分の管理している環境でのみ行なうほうがよいと思われます

Nexus 7 のIPを割り出すには
一番簡単な方法としては
Android アプリの
fing
を使えば
My Phone と表示されるので、それがIPとなります

iPod touch などでも調べることができます

この場合 sNap というアプリ
を使います

ポートを閉じるため、元のUSBデバッグに戻すには
USBケーブルと Ubuntu をつないで
adb usb
とするか
Nexus7 を再起動するという方法をとります


テーマ : プログラミング
ジャンル : コンピュータ

アプリ開発実験について思ったこと

先週の日曜日、
第3回Web APIで学ぶPHP・JavaScript勉強会
へ参加してきました

今回のAPIは Amazon Advertisigng API という
Amazon の商品リンクを作成するというAPIです

これを使うことで、いろいろと価格比較が楽になりそうだと思いました

さて、このAPIですが、個人的には
スマートフォン、とくにAndroid のカメラアプリと組み合わせれば
簡単に広告などに掲載されているのが安いか比較できると思います

すでに、iPod touch のアプリで
iTunes カードの カードナンバーを識別するtことができるアプリがでています

ちなみに、そのアプリが
面倒な入力が不要:iTunesカードのコードをiPhoneのカメラで読取るアプリ『Readeem』
で照会されています

これをみて考えたのが
Android はオープンソース
そして、twitter や facebook Yahooなどの
ライブラリを使うことで、いろいろな機能をもつアプリ作成が可能
ならば、
文字認識ライブラリもあるのでは?
ということで検索すれば、結構でてきました

あとは、カメラアプリにこれらを組み込めばできそうです

問題点としては
読み込んだ画像データをサーバーに送信して商品リンクさせるというところ

いまはまだできなくても、いろいろとスキルアップすることでいろいろな便利なものが
できそうです

テーマ : プログラミング
ジャンル : コンピュータ

facebookポイント設定メモ

facebookポイント設定メモ
 
facebookポイントで決済するには
facebookアプリに対して設定が必要

設定の中には
支払いをうけ取るための情報が含まれるため
受け取り口座をあらかじめ用意しておく

設定 > 支払い

会社の所在地を日本へ設定

支払い情報を追加をクリックすると
会社名の選択プルダウンが表示される

すでに登録済みなら
この中から選び

初めてなら
Register it now
をクリック

これで、会社登録の画面が開くため
あとは、入力していくだけ

会社連絡先の
TIN/SIN

取得済みのものがないなら
日本の個人事業主でも
雇用者識別番号(米国)が取得可能

雇用者識別番号、EIN
は、アメリカの内国歳入庁 IRS が発行する
識別番号のこと

IRSは海外からの申請を、受け付けているので
日本からでも
FAXで申請書を送付し
EIN取得が可能

EIN取得については
ネットで情報収集できる

EIN 取得
で検索するとでてくる

詳しくみるなら
IRSのwebページ参照
http://www.irs.gov
英語だけど


あと、facebookポイントは
テストユーザー似よるテストが可能

ポイントコールバックURL
http://公開用URL/?action=callback

facebookポイントテスター
テストユーザーのID
という設定になる

今回のfacebook ポイントについて参考にした書籍が
Facebookアプリ プログラミング入門

こ書籍を選んだのは
ほとんどの参考書籍が XAMPP でローカルで作成で終わっているけど
この書籍の場合は
AmazonEC2 にサーバーを構築して
そこにバージョン管理ソフト subversion を導入することで
実際に公開サーバーで実証するところまで載っていたのが理由

ただ、私の環境が Ubuntu のため、残念ながら
subversion のクライアントの使い方がわからなかったため
まだ実働実験が保留状態

今回、購入したことで初めて知った EINだけど
どうやら、AppStore とか kindle とかで電子書籍だすときにも
使うことがあるらしい
というより、ないと余計に課税されるようだ

今後、このあたりも調べて掲載していこうと思います

サーバーの構築に関しては
ドメイン取得と設定について掲載されていなかったので
現在、Vmware Player で CentOS をインストールし
ここに subversion をいれて実験できるようにしてみようと思います


テーマ : プログラミング
ジャンル : コンピュータ

facebook ポイントについて

facebook ポイントは
facebook アプリで利用可能な仮想通貨のこと

GREE のコインみたいなかんじ

ユーザはfacebook ポイントを自国通貨
もしくは
指定した通貨で
10ポイント=1$
で使う

facebookポイントに関する設定は
facebook の画面右上
アカウント設定
をクリック

アカウント設定画面で
支払い
をクリックすれば現在の状態をみることができます

ちなみに、日本語だとfacebook ポイントだけど
英語になると
facebook credits になる

ポイントを使う流れとしては
ユーザがアイテム購入しようとすると
facebook サーバーがアプリにアイテム価格を問い合わせ

ダイアログとして表示
このとき、faceookはアプリのサーバーに
商品名、価格などの商品情報を問い合わせる
ここまではOGPと同じで
facebookサーバーからアプリサーバーへの
HTTPアクセスが発生する

そして、ユーザが購入すると
facebook サーバーはポイントの残高引き落としをして
アプリに購入完了を通知する

ことのき通知される情報に
アイテムID
ユーザIDが含まれるので
サーバーはこれを受けて購入情報を保存する

購入が完了すると
購入完了ダイアログが表示され
購入処理完了

このときに、必要な条件がいくつか存在する

アプリはキャンバス型をサポートし
java Script SDK を使うこと

このため、アプリをキャンバス型で構成して
JavaScript SDK と PHP SDK を併用する

テーマ : プログラミング
ジャンル : コンピュータ

facebook でゲームの達成状況共有

アプリの利用状況の友達への共有手段としては
ウォール書き込みのほかに
アプリのカテゴリがゲームの場合のみになるけど
Achievements が使える

日本語にすると
Achievements は実績

最近はゲーム機とかiOS とかでもよく使われている

Facebook でAchievement を使うには。事前に
Facebook に
Achievement を登録する

登録した1つのAchievement ごとに1つのURLを用意する

Achievement を登録するときには
OGPタグが読み込まれるので
動作確認するには
公開しているwebサーバーが必要

これはAWSとかGMOクラウド
ロリポップなどのレンタルサーバーとかでもOK

テーマ : プログラミング
ジャンル : コンピュータ

友達へfacebookアプリを招待するには

友達へfacebookアプリを招待するには

友達をfacebookアプリへ招待するには
いくつか方法があるけど
まずは
RequestDialogを使う場合

この場合は、
招待するアプリが
Canvas型facebookアプリの表示をサポート
している必要がある

Achievementに対応するなら
カテゴリーをゲームにする

アプリをfacebookへ結合する方法は
Website with Facebook Login

サイトURLは
http://公開用のURL

Facebookアプリの形式は
キャンバス

URLへは
http://公開用のURL/?action=canvas

セキュリティーで保護されたキャンバスのURLには
https://公開用のURL/?action=canvas
というようになる

RoundCube のインストールと設定

RoundCube のインストールと設定
を参考に、レポジトリから
yum コマンドでインストールしました

ただし、ソースからではないので、バージョン違いにより微妙に変更点があったので
メモです

vi /etc/roundcubemail/db.inc.php
で変更するのは
21行から24行になっています

$rcmail_config['db_dsnw'] = 'mysql://roundcube:pass@localhost/roundcubemail';
これを
$rcmail_config['db_dsnw'] = 'mysql://roundcube:roundcubeユーザのパスワード@localhost/roundcubeユーザ名';
とします

また
32行目
$rcmail_config['log_date_format'] = 'Y-M-d H:i:s O';

75行名にIMAPサーバーを指定 (SSL経由)
$rcmail_config['default_host'] = 'ssl://mail.ドメイン名';
もしくはドメインではなくサーバーIP


288行目にドメイン設定

$rcmail_config['default_host'] = 'ドメイン名';

このように、番号から探すのは大変なので
vim の検索機能を使います
/の後に検索ワードをつけて探すことで、効率的に探せます

例えば
# 109行目:変更 ( SMTP認証にIMAP認証と同じユーザー名を使う )

$rcmail_config['smtp_user'] = '%u';
となっている場合、

vim で
/smtp_user
として Enter をおすことで、その行までいくことができます

この方法を使えば、記述されている行が変更されても見つけることが簡単になりあmす

テーマ : Linux
ジャンル : コンピュータ

OGP設定について

OGP設定について

facebookでは、ウォールにURLを入力したり
いいねボタンを押したら
そのURLやWebページに関する情報がでる

これがOGP
Open Graph Protocol
の略

facebookが対象のWebページから取得している

このため
ページがネットに公開されていないと
facebookが取得できない

つまり、XAMPPなど、ローカル環境だと
いいねボタンを押してもOGPの内容は反映されない

phpMyAdmin 導入と設定

http://www.server-world.info/query?os=CentOS_6&p=mysql&f=2
を参考にちょっと今までとは違ったレポジトリから
インストールしてみました

Allow from 127.0.0.1 10.0.0.0/24
となっているけど、おそらくこのサイトの方の
ルータの設定になっているため
自分の環境に合わせて変更

また、14行目ではなく
自分の環境は Apache2.2 系なので

23行目を
Allow from 127.0.0.1 192.168.10.0/24
と変更しました

ちなみにFon ルータの場合、デフォルトゲートウェイが
192.168.10.1
となっています

あとは、サーバーIPアドレス/phpMyAdmin
もしくは
Ubuntu なら/etc/hosts を設定しているなら
ドメイン/phpMyAdmin
でアクセスすれば、認証を求められるので
Mysql のユーザ名、パスワードを入れればログインできます

テーマ : Linux
ジャンル : コンピュータ

facebook 独立型アプリ作成

Canvas型アプリのときには
Facebook上のアプリを選択して作成

独立型アプリをつくるときには「
Website with Facebook Login を選ぶ

サイトURLには、自分の公開サーバーのURLを指定

独立型アプリの場合、Facebook API を使うけど
サイトの動作そのものはfacebook を必要としなくてもOK

あと、Canvas型と違って動作するときにユーザのログイン状態を確認する必要がある

これにはOAuth によるログインを使う

テーマ : プログラミング
ジャンル : コンピュータ

facebook アプリのスマートフォン用設定

Canvas型アプリの場合
設定画面にスマートフォン用の設定が用意されている

Facebook アプリの設定画面を開いて
モバイルWebアプリの欄にURLを設定する

設定するのはキャンパスURLと一緒でOK

このように、facebookアプリにスマートフォンからの
アクセスを想定するなら
モバイルWebアプリのURLを設定することで
表示コントロールができるようになる

テーマ : プログラミング
ジャンル : コンピュータ

subversion 基礎知識

subversionでファイルを管理するには
最初にSubversion の管理下にファイルを取り込む

この操作がインポート

インポートしたファイルをsubversionサーバーから
手元のPCに取り出すこと、つまりダウンロードするのが
チェックアウトという

チェックアウトしたファイル一式をワーキングコピーという


チェックアウトしたファイル、
つまり subversion サーバーから
ダウンロードしたファイルは、修正したら再び
サーバーに保存する必要がある

この再度サーバーに修正してから保存するのが
コミット

ただ、コミット、つまり、修正後のアップロードは
複数環境からできるので
手元のPCやサーバーのファイルが常に最新とは
限らない
とくに、多人数でやると、実感できる

このため、他の環境で亜子ミットされたファイルの
変更を手元のPCとかサーバーにも反映しないと管理できなくなる

この作業がアップデートとか更新という
そのままの意味だけど

つまり、subversion を導入することで
subversion サーバーにインポートされたソースコードを
チェックアウトして、修正が完了したらそれをコミット
もし、ほかの環境で更新されたら
アップデートして、手元のファイルにも反映される
というようにできるようにするのが
subversion を入れるメリット

web プロジェクトなどをやるときに
作成したプログラム一式を
subversionの管理下にインポートして
開発環境と公開環境にチェックアウトする
修正完了したら、それをコミット
他の環境で更新されたファイルがあるなら
アップデートして手元のファイルにも反映させる
というような管理方法がとれるようになる

subversion は使ったことがないので、
ubuntu クライアントについて調べてみます

サーバーに関しては、CentOS でインストールは完了しました

MacOS の場合、コマンドでできるようです
ubuntu でもコマンドでできると思うので調べてみます
おそらく、Mac と同じで svn コマンドでいけそうです

テーマ : Linux
ジャンル : コンピュータ

ターミナルマルチプレクサのインストール

SSH接続して、作業中に一度ログアウトすると
最初からやり直しになり、かなり面倒です

そこで、ターミナルマルチプレクサを導入することで
セッションの保持が可能になります

ubuntu でこれをいれるには
sudo apt-get install byobu

でインストールします

テーマ : Linux
ジャンル : コンピュータ

facebookアプリメモ

プログラミングメモ

sprintfは
書き換えて出力

sprintf('http://apps.facebook.com/%s',FACEBOOK_APP_ID);
これなら
URLの最後にFacebookのアプリIDを代入できるし
変更したときのメンテナンスも楽


require_once('../libs/facebook.php');
$facebook = new Facebook(array(
'appId'=>FACEBOOK_APP_ID,
'secret'=>FACEBOOK_APP_SECRET,
));

これで
appId
secret
をつかって、Facebookオブジェクト作成

$user = $facebook->getUser();

Facebookオブジェクトから
ログイン中のユーザー取得

if($user){
try{
$profile = $facebook->api('/me');
}catch(FacebookApiException $e){
$user= null;
$profile=array();
}
}

で、ユーザーIDが取得できているなら
GraphAPIを使い、
プロフィール情報取得


if(! $user){
$url = $facebook->getLoginUrl(array(
'canvas'=>1,
'fbconnect'=>0,
'redirect_uri'=>HTTP_ROOT.'?action=fbcallback',
));

ubuntu が立ち上がらないときの対処

ubuntu12.10 復旧メモです

カーネルをアップデートしたら、
起動後の画面で
checking battery ...
で止まってしまうため
ノートパソコンから ssh ログインして作業しました

Linux は ssh でリモートログインできるようにしておけば
いざマシンが立ち上がらなくても、リモート操作で復旧させることができます

ssh 接続は、Linux マシンの他に
windows なら tera term
iPod touch なら Prompt
Android なら Connect bot
というように、いろいろとアプリがあるので
端末操作になれておくと、いざというときに役立ちます

sudo vim /etc/default/gru
で設定ファイルを変更

参考サイトは
http://ktakeda47.blogspot.jp/2012/11/screen-freezed-at-checking-battery.html

11行目の
GRUB_CMDLINE_LINUX_DEFAULT

GRUB_CMDLINE_LINUX_DEFAULT="quiet splash console=tty1"
へ変更

変更後、ファイルを保存し
sudo update-grub

これで、grub アップデートができたので
sudo shutdown -r now
で再起動することで無事に起動しました

テーマ : Linux
ジャンル : コンピュータ

ubuntu文字化け解消

なんとか復旧したものの、文字化けを解消する必要があるため
追加設定しました

wget -q https://www.ubuntulinux.jp/ubuntu-ja-archive-keyring.gpg -O- | sudo apt-key add -
wget -q https://www.ubuntulinux.jp/ubuntu-jp-ppa-keyring.gpg -O- | sudo apt-key add -
sudo wget https://www.ubuntulinux.jp/sources.list.d/quantal.list -O /etc/apt/sources.list.d/ubuntu-ja.list
sudo apt-get update
sudo apt-get install ubuntu-defaults-ja

sudo add-apt-repository ppa:ikoinoba/ppa
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install lha-sjis

これで文字化けが解消されます

これが行わないと、windows で作成したファイルを解凍すると
ほぼ文字化けします

テーマ : Linux
ジャンル : コンピュータ

Facebookテストユーザー作成

Facebookテストユーザー作成

開発中のFacebookアプリや
練習用のアプリだと
自分のアカウントてはテストが難しいこともある

そんなときには
テストユーザーを作成する
これは、P83を参考にできた

アプリの設定画面で
役割 > Test Users > 追加

でテストユーザーができるので
あとは切り替えるをすればテストユーザーで動作確認ができる

また、テストユーザー同士で友達にして実験も可能

アップグレード失敗した Ubuntu 12.10 を再インストールしました

Ubuntu 11.10 をアップグレードしたものの
紫色の画面となり、画面が表示されなくなったため
バックアップをとり、再インストールすることになりました

幸い、前回 Windows のときに失敗したときの敬虔をいかして
Ubuntu では ssh ログインできるようにしておいたため

手持ちのノートパソコンから ssh でログインし
必要なファイルをコピーしておきました

必要なものは
Android 開発関連のSDK
そして
PDFファイル
開発のソース関連や必要な圧縮ファイル
仮想環境構築のためのISOファイル
VMイメージなどです

これらは、拡張子で調べることができるため
find コマンドで場所を調べ
あとは scp コマンドで、ノートパソコンにコピーすることでバックアップはできました

find コマンドの使い方は
【 find 】 ファイルやディレクトリを検索する
を参考にさせていただきました

今回は、ssh コマンドで
ssh ユーザ名@IPアドレスで
ログインして

あとは
find ~/ -name "*.bundle"
find ~/ -name "*.iso"
find ~/ダウンロード -name "*.lha"
find ~/ダウンロード -name "*.tar.gz"
find ~/ダウンロード -name "*.zip"
で探し
あとは
scp でコピーすればOKでした

問題点としては、
さらに都合の悪いことに、以前作成した
インストールDVDが壊れていたことでした

このため、
sudo apt-get install k3b
でISOファイルを書き込めるようにして

再度作成したインストールDVDを使い、
ubuntu 12.10 64 bit をインストールしました

問題は、このときに以前せっかく作成したセットアップを簡単にするファイルを
コピーしておくのを忘れたということです

setup.sh を作成し
この中に
apt-get で取得するものや
.bashrc に書き込むものを記述しておき
一回で終わるようにしたかったのですが、消去してしまったため
再度やり直しです

また、カーネルをバージョンアップしたのですが
今度はこれが原因なのか、VMware Player のインストールでとまりました

なんとか、ある程度は復旧したので、メモしておきます

今回、行ったのは
sudo apt-get update
sudo apt-get upgrade
sudo apt-get install ssh
sudo apt-get install keepassX
sudo apt-get install tomboy
sudo apt-get install vim
sudo apt-get install build-essential geany libgtk-3-dev
sudo apt-get install ia32-libs
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-jdk7-installer

mkdir bin
tar zxvf eclipse-jee-juno-linux-gtk-x86_64.tar.gz -C $HOME/bin/
mv android-sdk-linux/ bin/
echo -e 'PATH=$PATH:$HOME/bin/eclipse' >> $HOME/.bashrc
echo -e 'PATH=$PATH:$HOME/bin/android-sdk-linux/tools' >> $HOME/.bashrc
source .bashrc
ここまでとりあえず必要そうなものを再度いれてみました

以下は、今回VMware Player のインストールに手間取ったのでメモです
sudo ./VMware-Player-5.0.0-812388.x86_64.bundle

起動するとカーネルが見つからないと言われるため
カーネルのバージョンなどのシステム情報を調べるには
を参考に
uname -r
でカーネルヴァージョンを調べ
sudo apt-get install linux-headers-3.5.0-25-generic

必要なものを入れたら
再度
vmplayer &
で機動

もし、これでもダメならパッチを当てます

[Ubuntu][VMware] Ubuntu 12.10環境でVMware Player を動作させる方法。
を参考にさせていただきました

tar xfj vmware9_kernel35_patch.tar.bz2
cd vmware9_kernel3.5_patch
sudo ./patch-modules_3.5.0.sh
これでOKです

まだしばらくは復旧作業となりそうです

仮想環境構築後は、CentOS ubuntu にてサーバー環境を再度構築していきます

テーマ : Linux
ジャンル : コンピュータ

OGP情報のデバッガー 

OGP情報のデバッガー 

Facebookでは、
OGP情報が正しく設定されているかを調べるデバッガーがある

これは、
http://developers.facebook.com/tools/debug

で行える 

入力項目へ
WebサイトのURLを入力し
デハッグをクリックすれば
そのサイトのOGP情報が確認できる

もし、OGP情報に間違いがあるなら
エラー内容とエラー場所が確認できる

Social Plugins

Social Plugins

Social Pluginsは、Amazonのアフィリエイトみたいに
タグをコピペするだけて
ブログとかに配置できるもの

Facebookなら
http://developers.facebook.com/docs/plugins
で作成可能

ここで作成できるのは
いいねボタンとか
コメントを書き込むことができるコメント欄など

Graph APIでオブジェクトへアクセス

Graph APIでオブジェクトへアクセス

ユーザー情報を取得するURLは
http://graph.facebook.com/ユーザーID

さらに、友達一覧を表示するなら
http://graph.facebook.com/ユーザーID/friends

また、FQLというSQLのようなモノも使える

自分の友達のID一覧を出すなら
select uid2 from friend where uid1 = me()

Facebookアプリおさらい

Facebookアプリおさらい

まず、canvas型のアプリ
これは、Webアプリで、Facebookのインラインフレーム
iframeの中に表示される

このインラインフレームの中がcanvas
HTML5のCanvasと同じ感覚


アプリ開発は
HTMLを返すWebシステムを作って
そのURLをFacebookへ設定

アプリのURLもFacebookに依存するので

http://apps.facebook.com/アプリのURL
となる
ちなみに、公開していないサーバー
つまり自宅サーバーやXAMPPとかでやると
フレームがでない

次に、独立型アプリ
これは、Facebookアカウントを使い
ログイン、ウォールへの書き出しなどができる
このタイプは、Twitterなどとも連携可能
なので、マッシュアップするなら
このタイプ


そして、ネイティブアプリ
これは、SDKを使って、スマートフォン専用アプリにする
AndroidとかiPhoneのアプリが作れる人向け


タブ型アプリ
これほ、Facebookページに組み込むタイプ
canvas型と同様に、インラインフレームの中に作る

半透明のメッセージボックス作成

半透明のメッセージボックス作成

RPGとかでは、看板をみたり
街の人と話したとき
メッセージボックスに表示される

これは、画面にオーバーラップさせれば実現できる

メインのダンジョンや街のマップは
canvasで作成しておいて

メッセージの描画はdivタグを使う
そして、メッセージは
CSSを使い、絶対座標で描画する

絶対座標にするなら
position:absolute
を指定するのを忘れずに

吹き出しを半透明にするなら
opacity:0.9
にすればいい

opacityは透明度の設定になる

divで設定したのは
メッセージをinnerHTMLで表示したり
imgで画像にしたりできるから

いろいろできるようになれば
videoで動画再生とか
audioで歌うとかできるようになるかもしれない

Canvasの重ね合わせ

Canvasの重ね合わせ

よくある、ダンジョンで
キャラクターが歩いていて
背景画像もその周りにあるというもの

これは、2つのCanvasの重ね合わせで実現てきる

これには、ダンジョンマップ描画のCanvasと
キャラクター画像描画のCanvas
の2つを作成

1つのCanvasに対して
drawImage()で
複数の画像を重ねて描画できるけど
ダンジョンマップの場合
キャラクター画像と
ダンジョンマップの描画の
タイミングが違うので
Canvasを分けている

Canvasの重ね合わせには
CSSを使う

ポイントとしては
各Canvasに対して

position: absolute
を指定すること

これを指定することで
上から順の要素の配置ではなく
leftとtopを使った絶対座標で表示する
ようになる

通常のHTMLでは
要素を順に配置するけと
Canvasの重ね合わせをするには
絶対座標で自由に配置することもある

マップチップを、まとめるメリット

マップチップを、まとめるメリット

ダンジョンマップを作るとき
各画像を用意すると
読みこみに、時間がかかるため
合成して一つの画像にする

これなら
通信に時間がかからない
マップだけじゃなく
キャラクター画像もまとめることができる

トップビューの迷路ゲーム

トップビューの迷路ゲーム

RPGを作るには
数字を利用して迷路やダンジョンマップを作成

マップの行数 MAP_ROWS
マップの列数 MAP_COLS
を作成し、その大きさに従い作成する

マップ画面は、チップを並べるようにつくる

このチップは番号で管理
0 通路
1 壁
2 扉
3 扉
4 草原
5 ゴール
というように指定し

配列変数にダンジョンマップを格納


mapData=[
1,1,1,1,1,1,
0,0,0,0,0,0,
];
というように作成する

数値はあとで画像データとリンクさせる

また、ダンジョンマップのすべてを画面に描画せず
スクロールして、普段は一部だけ出るようになっている
キャラクターが1マス移動したら
移動方向へ、そのぶんだけスクロールする
という仕組み

Google Maps API V3 メモ

Google Maps API V3 メモ

Google Maps APIを使うには

javascript のライブラリの取り込みを行う

<script type="text/javascript"
sec="http://maps.google.com/maps/api/js?sensor=true">
<<l/script>

次に、マップを表示する領域を div で指定する

<div id="map"></div>

あとは、表示するマップの大きさ
width と height で決めることもできるけど
スマートフォンやタブレット画面いっぱいに表示するなら

$("map").style.width=document.width+"px";
$("map").style.height=document.height+"px";

現在位置を取得したら、そこを中心にマップを表示するけど
このときに必要なのが
google.map.Maps オブジェクトの作成

このオブジェクトの引数は

マップを表示するdiv要素
マップの種類を設定したオブジェクト

というようになる

ソースにすると
var gmap =new google.maps.Map($("map"), option);

つまり、map が div 要素
option がマップの種類のオブジェクト
ということ

option のソースは

var option ={
zoom:16,
center:mypos,
mapTypeId:google.maps.MapTypeId.ROADMAP
};

となっている

zoom はズームレベル
center は中心地点
mapTypeId はマップの種類

mypos のソースは
mypos = new google.maps.LatLng(lat,lng);
として現在地を geolocation API で取得した変数をセットしている


また、現在地にまーかーを表示するなら
google.maps.Marker オブジェクトを作成する

この引数には
Mapオブジェクト
マーカーを表示する位置を指定する

現在地にマーカーを配置するなら
var gmarker = new google.maps.Marker({
position: mypos,
map: gmap
});

となる

Javascriptでaudioコントロール

Javascriptでaudioコントロール

audioタグは、Javascriptでの制御が可能

document.getElementById()
でDOM要素を取得し
コントロールに対して
play()を使い再生することができる

Javascriptで使えるメソッドは

play()
再生開始

pause()
再生停止

ソースにすると

<audio id="effect">
<source src="effect.mp3">
<source src="effect.wav">
</audio>

なら

var obj = document.getElementById("effect");

obj.play();

というようになる

HTML5 audioて音楽再生

HTML5 audioて音楽再生

HTML5 では、audioタグで
音楽再生ができる

ただし、動画再生と同じく音楽再生も
対応フォーマットの問題があるので注意

これも、動画と同じ対処で
sourceタグで複数のフォーマットを用意することになる

書式にすると
<audio controls>
<source src="音声.mp3"/>
<source src="音声.ogg" />
</audio>

ちなみに、Android 2.2以下は
audio非対応なので注意

audioタグの属性は、videoタグと似ている
以下はその属性のメモ

src
音楽ファイルのURL

loop
ループ再生の指定

controls
再生のためのインターフェースを表示

autoplay
自動で音楽再生

preload
auto指定で、ファイルの先読みこみをする

これも、スマートフォンでは
autoplayとpreloadは非対応


スマートフォン対応フォーマットについては
iOSなら
Mp3
AAC
WAV

Androidなら
MP3
OGG
Vorbis

となる

あと、注意すべきところは
動画再生と同じく
WebサーバーでのMIME Typeの指定

これも、.htaccessで
指定を追加するようにすればok

AddType audio/mp3 .mp3
というようにする
最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック