開発日誌の最近のブログ記事

開発日誌

iPhoneアプリ開発をはじめよう : Xcodeでアプリを作ってみよう

前回のエントリでは、開発環境の整備についてご説明しました。
今回は、インストールしたXcode(開発ツール)を使って、簡単にアプリの作成手順について
ご紹介していきたいと思います。

1.プロジェクトを作成してみよう


インストールしたXcodeを起動してみましょう。
はじめに「Welcome to Xcode」という画面が出るかと思います。

ここで、「Create a new Xcode Project」をクリックすると、新しいプロジェクトを作成することができます。

iphone3_1.jpg


クリックしたあと、プロジェクトのテンプレートの選択画面、
プロジェクト名・バンドルIDを入力する画面と続きます。

ここでは、テンプレートは「Single View Application」としてみましょう。
プロジェクト名・バンドルIDは任意の名称でかまいません。

最後にプロジェクトの保存先を決定すると、プロジェクトが作成されます。

iphone3_2.jpg

上の画像のように、あらかじめ必要なファイルやプログラムが書かれた状態で作成されるので、
これに基づいてすぐにアプリケーションを作成していくことができます。

2.アプリケーションを作ってみよう

では、ごく簡単なアプリケーションを作成してみましょう。

要件は、以下のような「ボタンを押したらアラートダイアログが表示される」ものにしてみます。
iphone3_9.jpg


まず、「ViewController.xib」をクリックします。
.xibの拡張子がついたファイルでは通常のソースファイルと異なり、GUIでアプリケーションの見た目を
構成できる専用のツールの画面が表示されます。
(このツールをInterfaceBuilderといいます)

ここではボタンを配置してみましょう。
右下のエリアにある「Round Rect Button」という項目をドラッグ&ドロップで画面上に配置します。

iphone3_3.jpg


次に、「ViewController.h」ファイルを選択し、以下の画像のようにコードを入力します。

iphone3_4.jpg

「IBOutlet」のついた変数は、先ほどご紹介したInterfaceBuilderと連携することができます。
(「IBAction」のついた関数の宣言も同様です)

実際に連携してみましょう。
もう一度「ViewController.xib」をクリックし、左上のエリアにある「Files Owner」を選択したあと、
右上のエリアを参照します。
すると、先程入力した変数などが表示されていることがわかります。

iphone3_5.jpg

この変数と、画面上に配置したボタンを紐付けることができます。
「_btn」の右隣にある白丸をクリックし、ボタン上にドラッグ&ドロップするだけでOKです。

同様に、「clickBtn:」もボタン上へドラッグ&ドロップします。
するとこのメソッドを呼ぶタイミングを選択するリストが表示されるので、ここでは「Touch Up Inside」を
選択してみましょう。

iphone3_6.jpg

これで、プログラムとInterface Builderの連携は完了です。


最後に、アラートダイアログを表示するプログラムを書きます。
「ViewController.m」を選択し、画像にあるようなプログラムを追記します。

iphone3_7.jpg

これで、先程Interface Builderで選択したように、ボタンをクリックし終わったタイミングで、
この「clickBtn」メソッドの処理を実行することができます。

では、実際にシミュレータで実行してみましょう。
ウインドウの左上部分、「iPhone 5.0 Simulator」が選択されていることを確認し、「Run」ボタンをクリックします。

iphone3_8.jpg


しばらくするとシミュレータが起動し、先ほどInterface Builderで作成したとおりの画面が表示されます。
ここでボタンをクリックすると、アラートダイアログが表示されるはずです。

iphone3_9.jpg


お疲れさまでした!
少し長くなってしまいましたが、これでプロジェクトの作成と、簡単なアプリケーションの作成について
ご紹介しました。
次回は実機でアプリケーションを動かす方法などについて、ご紹介したいと思います。


(kenta)


開発日誌

jQueryのロールオーバー/ロールアウトイベントとバブリング

引き続きjQueryの勉強をしていきたいと思います。

[今までのjQuery関連記事]
jQueryではじめるJavaScript
http://lab.gpol.co.jp/tsubo/2010/01/jqueryjavascript.php
jQueryではじめるJavaScript : セレクター操作
http://lab.gpol.co.jp/tsubo/2010/08/jqueryjavascript-1.php
jQueryではじめるJavaScript : 処理1
http://lab.gpol.co.jp/tsubo/2010/10/1015jqueryjavascript.php
jQueryではじめるJavaScript : ボールを動かしてみる
http://lab.gpol.co.jp/tsubo/2010/12/124jqueryjavascript.php

jQueryにはロールオーバーイベントに、mouseover と mouseenter、ロールアウトイベントに、mouseout と mouseleave の二つがあります。
その違いを説明します。

下の図のように"色のついたエリア"にロールオーバー/ロールアウトイベントをつけて、マウスを縦断させてみました。


・mouseover / mouseout
before.jpg

マウスオーバー/マウスアウトの場合
1."赤エリア"に入ったとき[in red]
2."緑エリア"に入ったとき[out red][in green][in red]
3."青エリア"に入ったとき[out green][out red][in blue][in green][in red]
  :

これは予想外のいっぱいイベントが起きるので注意してください。
これはバブリングという仕組みで子供で発生したイベントが親に伝播するようになっています。
正直いって使いづらいのでそういう時は下のmouseenter/mouseleaveを使いましょう。

ちなみにバブリングはEvent.stopPropagation()でとめる事もできます。


・mouseover / mouseout stopPropagation() を使用
out.JPG


1."赤エリア"に入ったとき[in red]
2."緑エリア"に入ったとき[out red][in green]
3."青エリア"に入ったとき[out green][in blue]


・mouseenter / mouseleave
after.jpg

1."赤エリア"に入ったとき[in red]
2."緑エリア"に入ったとき[in green]
3."青エリア"に入ったとき[in blue]

やりたいことにもよりますが、jQueryのmouseenter/mouseleaveイベントが使い勝手意が良いですね。

(teruhisa)




開発日誌

iPhoneアプリ開発をはじめよう : 開発環境を準備しよう

前回のエントリでは、iPhoneアプリ開発をはじめるにあたって必要な知識についてご紹介しました。

今回は、実際に開発をはじめるにあたって欠かせない、「開発環境の準備」について
ご紹介していきたいと思います。

前回の開発フローの「(1)準備」に沿ってご説明していきます。
 1.Macを用意する
 2.iOS Developer Programに登録する
 3.Xcode(開発ツール)のダウンロード

1.Macを用意する


OS X 10.6(Snow Leopard)以上が搭載されているMacであれば、特に何でも構いません。
開発ツールはOS X 10.7(Lion)に対応したものもあります。

マシン自体は何でもいいのですが、開発を行う場合あまりスペックの低いマシンだと
困るかもしれません。

たとえば、移動があるならMac Book Pro、移動せずオフィスでひたすらコードをガリガリ書くならiMac、
というところでしょうか。
ここは、皆さまの好みで選べばよいかと思います。

2.iOS Developer Programに登録する


こちらのサイトから、iOS Developer Programに登録します。
有効なApple IDが必要なので、既にお持ちの方はそのアカウントをご利用いただけます。

なお、プログラムへの登録には、年額8,400円かかります。
(前回は10,500円と書いていましたが、2011年11月現在では上記の値段になっています。)

また、別のプログラムにiOS Developer Enterprise Programというものがありますが、
こちらは企業内部で使うアプリを開発するときに登録するプログラムになります。
お間違えのないよう、ご注意ください。

手順に関しては、大まかには以下のようになります。
・アップルデベロッパ未登録の場合、登録する
・個人向けプログラムか法人向けプログラムを選択
・個人情報あるいは企業情報の登録(氏名or法人名・住所・電話番号など)
・プログラムの選択(iPhoneアプリの場合は「iOS Developer Program」)
・ライセンスをApple Online Storeのカートで購入
・送信されたメールにある、アクティベーションコードから、デベロッパプログラムを有効にする

3.Xcodeをダウンロードする


プログラムへの登録が完了したら、Xcode(開発ツール)のダウンロードができるようになります。

ちなみに「Xcode」とは...
iOSアプリを開発するときの、統合開発環境になるソフトウェアです。
GUIでUIを組み立てられたり(Interface Builder)、パフォーマンス測定ツール(Instruments)がついていたり、アプリの申請作業が出来たりと、けっこうな優れものです。

iOS Dev Centerにログインし、「Downloads」から、

iPhone_iDP1.jpg


Downloadを選択すると、ダウンロードが開始します。
(Snow LeopardとLionで分かれていますので、ご注意ください。)

iPhone_iDP2.jpg


※iOS Dev Centerのレイアウトは変わることがあります。
  上記のキャプチャは2011年11月時点のものですので、ご了承ください。


あとはダウンロードしたdmgファイルを展開し、インストーラの進行にまかせていけば
インストールが完了します。


お疲れさまです!これで開発環境の準備が完了しました。
次回は、Xcodeを使ったサンプルプロジェクトの作成や、ビルドの作成についてご紹介していければと思います。


(kenta)
開発日誌

iPhoneアプリ開発をはじめよう : 前提知識について

弊社でもiPhoneアプリの開発をスタートしましたので、覚書の意味も込めて
iPhoneアプリを開発するのに必要な準備や知識について、まとめていきたいと思います。

今回は、開発を始める前に必要な前提知識について、簡単にまとめます。

まず、開発をスタートするのに、重要なことがあります。

 ・開発はMacでしか行えません。
 ・アプリをAppStoreに公開するには、iOS Developer Program (10,800円/年、2011年8月時点)へ登録する必要があります。

Windowsでは開発自体ができず、最終的にリリースするにはお金がかかる、ということです。
かなり初歩的ですが、Mac環境自体がないこともあるかと思いますので、注意が必要です。

アプリケーションの種類

iPhoneアプリ(iOSアプリ)が動く端末は、iPhone、iPod Touch、iPadと種類がありますが、
制作するアプリケーションとしては以下の3つにわかれます。

(1)iPhoneアプリ
 iPhoneとiPod touchに対応したアプリ。iPadでも動かすことができる。
 AppStoreには42万以上のiPhoneアプリが公開されている。

(2)iPadアプリ
 iPadにのみ対応したアプリ。iPhoneとiPod touchでは動かない。
 10万以上のアプリが公開されている。

(3)ユニバーサルアプリ
 iPhone・iPad両方に対応したアプリ。
 それぞれの端末の画面サイズに適した形で表示される。

iPhoneに対応したアプリを作りたいが、iPadへの対応はどうするのか。
iPadへ対応する場合、iPad用として別のアプリを作るのか、一つのアプリをiPhone / iPad両方に対応させるのかなど
考える必要があります。

開発フロー

開発のフローは、基本的には以下のように進んでいきます。

(1)準備
・Macを用意する
・iOS Developer Programに登録する
・Xcode(開発ツール)のダウンロードなど、開発環境の整備する



(2)開発
・アプリの仕様を決める
・デザイン、プログラミングを行う
・実機でテストする



(3)申請
・Appleにデータを提出し、審査を受ける
・審査に通らなかった場合、修正し再度審査を受ける



(4)公開
・AppStoreに公開される
・必要に応じてバージョンアップする

※アプリ開発と並行して、サポートサイトの制作やプレスリリースの作成なども、場合によって必要になります。


基本的には一般的なアプリケーションの開発と変わりませんが、注意が必要なのは「審査」のプロセスです。
審査には約1〜2週間かかり、審査に落ちてしまうと(「リジェクト」といいます)アプリを修正して再度申請する必要があります。
そのため、リリース日が決まっている場合などはその日までに審査を通過しておく必要があり、通常よりも余裕をもったスケジュールを立てる必要があります。
たとえば、リリース日の1ヶ月前までに開発を終了し、1ヶ月間を審査・修正の期間にあてるなどのスケジューリングが必要です。


今回は開発を始める前に、ごく基本的な前提知識についてご紹介いたしました。
次回以降、実際にどのようにアプリを作っていくのかご紹介していきたいと思います。
※参考までに...
Appleは開発者向けに豊富なドキュメントを提供しています。
以下の3つは「まず読むもの」として位置づけられており、基本的な情報が詰まっていますので
これから開発をはじめる方は一読されることをおすすめいたします。

iOS開発ガイド
http://developer.apple.com/jp/devcenter/ios/library/documentation/iOS_Development_Guide.pdf
アプリ開発作業の一連のプロセスや、アプリ登録手順などが記載されています。
アプリを開発してからリリースするまでの一通りの作業と流れを知ることができます。

iOSアプリケーションプログラミングガイド
http://developer.apple.com/jp/devcenter/ios/library/documentation/iPhoneAppProgrammingGuide.pdf
プログラマ向けに、実行環境や設計について、詳しく書かれています。
どのようにプログラミングするか、ではなく、どのようにアプリが動くかをより詳しく説明しています。
内部的な動きを知っていればより良い実装が出来ると思うので、開発作業をする方は一読をお勧めします。

iOSヒューマンインターフェースガイドライン
http://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf
UIやユーザインタフェースについて説明しています。
アプリの見た目のデザインや、使い勝手を追及するのに役立つかと思います。


(kenta)
開発日誌 Web システムのツボ

【Android】FacebookAPIをアプリに組み込む

FacebookボタンがあるAndroidアプリをよく見かけると思いますが、その組込み方の紹介をしたいと思います。
今回は、Facebook認証からウォール投稿できるまでの処理を組み込んでいきます。
設置の流れとしては、以下の流れとなります。


(1)Facebook-sdk-androidのダウンロード(ライブラリのダウンロード)
(2)Eclipseでライブラリプロジェクトの作成
(3)Androidアプリプロジェクトの生成
(4)FacebookにAndroidアプリを登録
(5)ソースの組込


(1)Facebook-sdk-androidのダウンロード(ライブラリのダウンロード)

ライブラリをダウンロードページからダウンロードします。(保存先は任意の場所でいいです。)

(2)Eclipseでライブラリプロジェクトの作成

(1)のライブラリプロジェクトの作成をします。

[ファイル] > [新規] > [Androidプロジェクト]を実行

facebook2.png facebook3.png facebook4.png

(3)Androidアプリプロジェクトの生成

EclipseでFacebookのAPIを使うAndroidアプリを作成してください。
[ファイル] > [新規] > [Androidプロジェクト] を実行します。


作成出来たら(2)で作成したライブラリを読み込ませます。
[プロジェクト右クリック] > [プロパティ] > [Android] を実行。
ライブラリーの追加ボタンを押して、(2)のライブラリを選択してください。
facebook5.png facebook6.png facebook7.png

(4)FacebookにAndroidアプリを登録

Facebookにアプリを登録します。 アプリ登録ページからアプリを登録します。
1 Create New App選択
2 App名登録
facebook8.png
3 必要情報を登録(特にデフォルトで何も変更しなくてもよいです。APPIDを控えておく)
facebook9.png

(5)ソースの組込

1 AndroidManifest.xmlに次のソースを組みこむ
の前に下記ソースを組みこむ
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
2 FacebookのアプリにKey Hashを記入する

●デバッグキーハッシュを確認する

[ウィンドウ(W)] > [設定] > [Android(ビルド) ]を実行。
「デフォルト・デバッグ・キーストア」の箇所を確認。控えておきます。facebook10.png ●コマンドプロンプトを立ち上げて、以下のキーを起動

        keytool -exportcert -alias androiddebugkey -keystore "上記のデバッグキーハッシュパス" | openssl sha1 -binary | openssl base64
        
・パスワードを聞かれるので「android」と入力
→Key Hashが返されます。 facebook12.png ●(4)で登録したアプリのキーハッシュを登録 facebook11.png

Activityファイルのサンプルコード

Activityファイルのサンプルは以下の通りです。
      package face.gp;
      
      import com.facebook.android.AsyncFacebookRunner;
      import com.facebook.android.DialogError;
      import com.facebook.android.Facebook;
      import com.facebook.android.FacebookError;
      import com.facebook.android.Facebook.DialogListener;
      
      import android.app.Activity;
      import android.content.Intent;
      import android.content.SharedPreferences;
      import android.os.Bundle;
      import android.preference.PreferenceManager;
      import android.util.Log;
      import android.widget.Toast;
      
      public class Facetest2Activity extends Activity {
      
      Facebook facebook = new Facebook("アプリID"); // Facebookアプリの登録されたIDを入れる
      AsyncFacebookRunner masync = new AsyncFacebookRunner(facebook);
      
      private int mAuthAttempts = 0;
      private String mFacebookToken;
      
      /** Called when the activity is first created. */
      @Override
      public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);
      auth();	// 認証
      }
      
      /*
      * セッションの保存
      */
      private void saveFBToken(String token, long tokenExpires){
      SharedPreferences prefs = PreferenceManager.getDefaultSharedPreferences(this);
      prefs.edit().putString("FacebookToken", token).commit();
      }
      
      
      /*
      * 認証部分
      */
      private void fbAuthAndPost(){
      if(mFacebookToken.equals("")){
      facebook.authorize(this, new String[]{"publish_stream"}, new DialogListener() {
      
      @Override
      public void onComplete(Bundle values) {
      Log.d(this.getClass().getName(),"Facebook.authorize Complete: ");
      saveFBToken(facebook.getAccessToken(), facebook.getAccessExpires());
      updateStatus(values.getString(Facebook.TOKEN));
      }
      
      @Override
      public void onFacebookError(FacebookError error) {
      Log.d(this.getClass().getName(),"Facebook.authorize Error: "+error.toString());
      }
      
      @Override
      public void onError(DialogError e) {
      Log.d(this.getClass().getName(),"Facebook.authorize DialogError: "+e.toString());
      }
      
      @Override
      public void onCancel() {
      Log.d(this.getClass().getName(),"Facebook authorization canceled");
      }
      });
      }
      }
      
      @Override
      protected void onActivityResult(int requestCode, int resultCode,Intent data) {
      super.onActivityResult(requestCode, resultCode, data);
      switch (requestCode){
      case Facebook.DEFAULT_AUTH_ACTIVITY_CODE:
      facebook.authorizeCallback(requestCode, resultCode, data);
      }
      }
      
      /*
      * 最初に動く処理
      */
      private void auth(){
      
      mAuthAttempts = 0;
      
      SharedPreferences prefs = PreferenceManager.getDefaultSharedPreferences(this);
      mFacebookToken = prefs.getString("FacebookToken", "");
      
      if(mFacebookToken.equals("")){
      fbAuthAndPost();
      }else{
      updateStatus(mFacebookToken);
      }
      
      }
      
      /*
      * ウォール投稿を表示する処理
      * 
      */
      public void updateStatus(String accessToken){  
      
      /************
      * ウォールに投稿
      ************/
      Bundle bundle = new Bundle();
      
      bundle.putString("message", "");
      bundle.putString("link", "URL");
      bundle.putString("name", "テスト");
      bundle.putString("caption", "キャプション");
      bundle.putString("picture", "<img URL>");	
      bundle.putString("description", "アプリ説明");
      
      /* Facebookダイアログ表示 */
      facebook.dialog(Facetest2Activity.this, "feed", bundle, new DialogListener() {
      
      public void onComplete(Bundle values) {   
      
      }
      
      public void onFacebookError(FacebookError e) {
      }
      
      public void onError(DialogError e) {
      }
      
      public void onCancel() {
      }
      });    	
      } 
      }
      
      
各関数の説明
saveFBToken関数
セッションを保存する関数。Facebookにログインした時からセッションを保存する関数
fbAuthAndPost関数
認証部分。ここでFacebookのOAuth認証を行う。
onActivityResult関数
Facebook処理が終わった後に動く関数。
auth関数
FacebookのAccess Tokenを調べてなかったらfbAuthAndPost関数呼び出しFacebook認証画面へ。
updateStatus関数
認証後にウォール投稿のデフォルト設定する関数。デフォルト設定に使うメソッド。
ウォール投稿部分のソースの説明
bundle.putString("link", "リンクURL");
bundle.putString("name", "題名");
bundle.putString("caption", "キャプション名");
bundle.putString("picture", img URL);	
bundle.putString("description", "説明");
link・・・リンク付け
name・・・アプリ名前
caption・・・アプリ名前の直下に出る部分
picture・・・アプリのアイコン画像(ファイルパスはURLで設定)
description・・・アイコンの説明
サンプルコード
上記のコードをダウンロードできます。
ダウンロード:facetest2.zip

(kozo)
開発日誌

【AS3】物理エンジン「APE」と「Box2D」の比較

ActionScript3で使える2D物理エンジンについて紹介します。
物理エンジンとは、物体の動きをシミュレーションするためのソフトウェアで、ASでは主にライブラリとして提供されています。

中でも有名な2つの物理エンジンライブラリ、「APE」と「Box2D」について同様のサンプルを作成し、
簡単に比較をしてみたいと思います。

サンプルの仕様は、四角の図形と円をジョイントでつなぎ、円の部分でドラッグができる
というものにします。

サンプルflaファイルはこちら
■APE

■Box2D



ライブラリはそれぞれ以下のリンク先からダウンロードできます。
<APE>
http://www.cove.org/ape/

<Box2D>
http://sourceforge.net/projects/box2dflash/
※AS3用のライブラリは、正しくは「Box2DFlashAS3」なので、注意してください。


では、いくつかの項目に基づいて、比較をしていきます。
ぜひサンプルコードと照らし合わせながら、読んでいただければと思います。

続きを読む: 【AS3】物理エンジン「APE」と「Box2D」の比較
開発日誌

PHPでmt_randを使用して乱数を作ってみる

PHPで乱数を生成するときに、mt_rand()関数で乱数を作る場面があると思いますが、

連続で同じ数字が出てきて何か嫌だ!

でも綺麗に乱数が生成されてるから、まっいっか!

って事はないでしょうか?

筆者はたまに思ったりします!

しかし、乱数生成時に同じ数字の重複は避けたい!っていう場面が出てくると思います。

そこで、かんたんに同じ数字が重複しない乱数の生成方法を紹介したいと思います。


まず単純に0から9の数字で10桁の乱数を作るスクリプトです。

for($i = 0; $i < 10; ++$i){
	$num = mt_rand(0,9);
	$ransu .= $num;	
}

結果:9838260512

 

8と2が重複してしまいました。


下記の様にすると、同じ数字が重複しない乱数の生成ができます。


$suji = '0123456789';
for ($i = 0; $i < 10; ++$i) {
	$len = mb_strlen($suji);
	$j = mt_rand(0,$len-1);
	$num = $suji[$j];
	$ransu .= $num;
	//1度で出た数字は対象外にする
	$suji = str_replace($num,"",$suji);
}

結果:5673108942

 

 1つも同じ重複する数字がでてこないですね(b^-゜)


ポイントは1度出た数字は次のループでは使わない。
という所です。

この考えを元に上手く利用すれば、精度の高いランダム処理が実現できると思います。


例えば複数のバナー画像をランダム表示させる仕組みで、
偏りなく全ての画像を平均的になるように表示したい場合、


1度表示した画像は、他の画像が表示されるまで表示させない!

という方法をとれば実現できると思います。


ちなみに、同じ数字を使用しない乱数を生成したい場合は、 「shuffle」関数でも実現が可能です。
$array = range(0,9);
shuffle($array);

結果:4093752186

こちらの方がお手軽ですね。

この記事がみなさんの制作するプログラミングのヒントにでもなれば幸いです。



(hirohito)
開発日誌

JavaScriptを使ってサイトにQRコードを貼ってみる

PCサイトからモバイル向けサイトへ誘導したい事がよくありますが、そんな時はやはりQRコードが利便性が高いですね。
(※QRコードは(株)デンソーウェーブの登録商標です)


今回はQRコードのAPIをJavaScriptを使って使用する方法を紹介します。
今回作ったものはこちらからダウンロードできます。

サンプルダウンロード:sample5.zip


普通QRコードをサイトに貼りたい時、「QRコード作成サイト」などでQRコード画像を作成してサイトに貼りますが、ページ数が多いととても面倒です。
そんな面倒なことはJavaScriptにやらせてしまいましょう!!


QRコードのAPIは Google Chart Tools を使用します。(Google Chart Toolsの詳しい使い方
このAPIはgoogleのAPIサーバーにリクエストをおこなうとQRコード画像を作成してくれる仕組みになっています。
動的にQRコードを生成するには タグのsrcにAPIリクエストをを設置して使います。


それでは試しに「WebシステムのツボURL」のQRコードを生成してみましょう。
APIリクエストの変数chl に"Webシステムのツボ"のURL(http://lab.gpol.co.jp/tsubo/)を設定してみます。

<img src="https://chart.googleapis.com/chart?cht=qr&chs=150x150&chl=http://lab.gpol.co.jp/tsubo/" width="150" height="150" />

 ↓ このHTMLは下のように表示されます



ケータイのQRリーダー機能で確認してみましょう。

うまく表示されました!


それではこのchl の部分をJavaScriptを使って、自動で現在のURL になるように変更します。

<script type="text/javascript">
//<![CDATA[
(function(text, width, height)
	{
		document.write('<img src="https://chart.googleapis.com/chart?cht=qr&amp;chs=' + width + 'x' + height + '&amp;chl=' + text.split('&').join('%26') + '" width="' + width + '" height="' + height + '" alt="QR" />');
	})(document.URL, 150, 150);
//]]>
</script>


実際にこのコードを使用してみました。 ↓

これでモバイル向けサイトへのリンクが簡単におこなえますね。

(teruhisa)

開発日誌

AS3 ランダムに配置したSpriteオブジェクトを整列させる

ActionScript3.0で、ステージ上にランダムに矩形を生成し、その後均一に整列させるコードを紹介したいと思います。
なお、Tweenライブラリの「Tweener」を利用しているため、Tweenerについても簡単に紹介します。
今回使用するソースコード(flaファイル)はこちらからダウンロードできます。→sample_sprite.zip

【サンプル】

【ソースコード】
import caurina.transitions.Tweener;

//画面に表示する矩形の数
var N:int = 300;

//矩形にTween処理を割当て
for (var i = 0 ; i < N ; i++ ){
 Tweener.addTween(
  createSprite(),
   {
    x: (i + 1) * 25 - (500 * int(i/20)),
    y: ( int(i/20) + 1 ) * 25,
    rotation: 180,
    time: 5,
    transition: 'easeInOutQuint'
   }
 );
}

//矩形を生成して画面に配置 
function createSprite():Sprite{
 var size:int = 25; //矩形の1辺の長さ
 var mySprite:Sprite = new Sprite();
 mySprite.graphics.beginFill( Math.floor( Math.random() * 0xFFFFFF ) + 1 );
 mySprite.graphics.drawRect(-size/2, -size/2, size, size);
 addChild(mySprite);

 //ステージサイズ 550x400
 mySprite.x = Math.floor( Math.random() * 1100 ) + 1 -275;
 mySprite.y = Math.floor( Math.random() * 800 ) + 1 -200;
 return mySprite;
}

【解説】
1.Tweenerについて
Tweenerとは、ムービークリップなどに簡単にトゥイーン処理を割り当てられる、
オープンソースのライブラリです。

以下のサイトでライブラリが配布されていますので、そちらからダウンロードします。
http://code.google.com/p/tweener/
※「Downloads」から、使用するASのバージョンに合ったものをダウンロードして下さい。
 AS2版とAS3版があります。

ダウンロードしたzipフォルダを解凍して出てきたcaurinaフォルダを
そのままflaファイルと同じディレクトリに配置します。

これで、Tweenerを使用する準備は完了です。
スクリプトに、
import caurina.transitions.Tweener;
を記載すれば使うことが出来ます。

なお、TweenerはMITライセンスなので、無償で使用できます。
MITライセンスについては、以下をご参照ください。
http://code.google.com/p/tweener/wiki/License(Tweenerのライセンスについての記述)
http://www.opensource.org/licenses/mit-license.php(MITライセンスの原文)
http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license(日本語参考訳)

2.ソースコードの解説
矩形を生成する関数を作り、Spriteを返すようにしています。
この関数をTweener.addTweenの第一引数で呼び出すことで、 生成した矩形にTween処理を割り当てることができます。
addTweenメソッドで、トゥイーン後の座標を指定することで、 ランダムに配置した矩形を、指定の位置に整列させています。

※通常、Spriteオブジェクトを動的に生成する場合、以下のようなコードになると思います。
//オブジェクトを生成
var mySprite:Sprite = new Sprite();
//矩形の色
mySprite.graphics.beginFill( Math.floor( Math.random() * 0xFFFFFF ) + 1 );	
//矩形の範囲
mySprite.graphics.drawRect(-25/2, -25/2, 25, 25);	
//矩形の座標(ランダムに配置)
mySprite.x = Math.floor( Math.random() * 1100 ) + 1 -275;	
mySprite.y = Math.floor( Math.random() * 800 ) + 1 -200;
//ステージに配置
addChild(mySprite);

ただし大量にSpriteを生成したい場合、上記のコードをSpriteの数だけ書いてしまうと
とても長いスクリプトになってしまいます。
そのため、関数としてまとめて記述しています。

関数内でaddChildしただけでは、インスタンス名が無い状態なので、
Tweener.addTweenメソッドで指定することができません。
そのため、インスタンス名をつけなくてもSpriteオブジェクトを指定できるよう、
関数の戻り値をSpriteオブジェクトにしています。

(kenta)
開発日誌

jQueryではじめるJavaScript : ボールを動かしてみる

今回はjQueryの第4回目、今までのプログラムを使って"ボールを動かしてみる"サンプルプログラムを作ってみます。

今までのものはわりと地味なサンプルでしたが、今回のサンプルは「おぉ!プログラムだ」と実感できると思います。
今回作ったものはこちらからダウンロードできます。sample4.zip

  <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
  <title>ボールバウンド</title>
  <style type="text/css">
	div#box {
		width:400px;
		height:300px;
		border:1px #999 solid;
		position:relative;
	}
	div.ball {
		left:0px;
		top:0px;
		position:absolute;
	}
  </style>
  <script type="text/javascript" src="jquery.min.js"></script>
  <script type="text/javascript">
	var velocity = {x:4, y:7};

	$(function(){
		redraw();
	});
	function redraw()
	{
		// 外枠のサイズを取得
		var boxWidth = parseFloat($('#box').css('width'));
		var boxHeight = parseFloat($('#box').css('height'));

		// ボールの位置を取得
		var posLeft = parseFloat($('#ball').css('left'));
		var posTop = parseFloat($('#ball').css('top'));

		// ボールを移動
		posLeft += velocity.x;
		posTop += velocity.y;

		// 外枠から出ないように調整
		if(posLeft < 0 || posLeft > boxWidth){
			velocity.x *= -1;
		}
		if(posTop < 0 || posTop > boxHeight){
			velocity.y *= -1;
		}

		// 移動したボールの位置のCSSをセット
		$('#ball').css({left:posLeft, top:posTop});

		setTimeout(redraw, 50);
	}
  </script>

  <div id="box">
    <div id="ball" class="ball">●</div>
  </div>


[ブラウザ表示]
※ ブラウザおよびJavaScriptの設定によっては動かないことがあります。

こんな感じに動きます。
それではプログラムの解説していきます

[プログラム序盤部分]
	var velocity = {x:4, y:7};

	$(function(){
		redraw();
	});

velocity はボールの初期速度です。
この数値を変更すればボールを速くしたり遅くしたりできます。

$(function(){ の箇所がちょっと混乱するかと思います。第1回で $(...) は「セレクター」だといっていましたが、中に関数が入っている場合はまったく違った動作になり、"HTMLがすべて読み込まれて準備ができたら関数を実行"します。
「まあ、そういうもんだ」と覚えておいてください。

[プログラム中盤部分]
		// 外枠のサイズを取得
		var boxWidth = parseFloat($('#box').css('width'));
		var boxHeight = parseFloat($('#box').css('height'));

		// ボールの位置を取得
		var posLeft = parseFloat($('#ball').css('left'));
		var posTop = parseFloat($('#ball').css('top'));
前回勉強したCSSの値を取ってきています。ただし、width や left の値は"○○px"のように余計な"px"という文字が入ってしまうので、parseFloat() をつかって数値だけにしています。

[プログラム終盤部分]
		setTimeout(redraw, 50);
setTimeout() は一定時間後に関数を実行してくれる処理です。ここでは0.05秒後に関数redraw() を実行します。そこで実行される redraw() もまた0.05秒後に redraw() を実行するので、結局、0.05秒間隔で redraw() が実行されます。


"ボールを移動"の箇所を変更すれば、万有引力のリンゴのようにボールが自由落下する動作もつくれるので余裕があれば作ってみてください。

(teruhisa)
1  2

Webシステムのツボとは

オープンソースの紹介や、プログラミング講座、フリーソフトのレビューなど、Webエンジニアが送る、つれづれ日記。
【隔週金曜日更新】

運営会社:株式会社ジーピーオンライン

RSSを購読する

Monthly Archive