<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <title>Webシステムのツボ</title>
    <link rel="alternate" type="text/html" href="http://lab.gpol.co.jp/tsubo/" />
    <link rel="self" type="application/atom+xml" href="http://lab.gpol.co.jp/tsubo/atom.xml" />
    <id>tag:lab.gpol.co.jp,2010-06-30:/tsubo//9</id>
    <updated>2012-04-16T01:28:26Z</updated>
    <subtitle>Webエンジニアつれづれ日記</subtitle>
    <generator uri="http://www.sixapart.com/movabletype/">Movable Type 5.11</generator>

<entry>
    <title>iPhoneアプリ開発をはじめよう : Xcodeでアプリを作ってみよう</title>
    <link rel="alternate" type="text/html" href="http://lab.gpol.co.jp/tsubo/2012/04/iphone.php" />
    <id>tag:lab.gpol.co.jp,2012:/tsubo//9.477</id>

    <published>2012-04-19T15:00:00Z</published>
    <updated>2012-04-16T01:28:26Z</updated>

    <summary>前回のエントリでは、開発環境の整備についてご説明しました。 今回は、インストールしたXcode（開発ツール）を使って、簡単にアプリの作成手順について ご紹介して...</summary>
    <author>
        <name>kenta</name>
        
    </author>
    
        <category term="開発日誌" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="ios" label="iOS" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="iphone" label="iPhone" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="xcode" label="Xcode" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="アプリ" label="アプリ" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://lab.gpol.co.jp/tsubo/">
        <![CDATA[<a href="http://lab.gpol.co.jp/tsubo/2012/02/iphone-2.php">前回のエントリ</a>では、開発環境の整備についてご説明しました。<br />
今回は、インストールしたXcode（開発ツール）を使って、簡単にアプリの作成手順について<br />
ご紹介していきたいと思います。<br />

<h4>１．プロジェクトを作成してみよう</h4>
<br />
インストールしたXcodeを起動してみましょう。<br />
はじめに「Welcome to Xcode」という画面が出るかと思います。<br />
<br />
ここで、「Create a new Xcode Project」をクリックすると、新しいプロジェクトを作成することができます。<br />
<br />
<a href="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_1-801.php" onclick="window.open('http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_1-801.php','popup','width=516,height=339,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_1-thumb-500x328-801.jpg" alt="iphone3_1.jpg" class="mt-image-none" style="" height="328" width="500" /></a><br />
<br />
<br />
クリックしたあと、プロジェクトのテンプレートの選択画面、<br />
プロジェクト名・バンドルIDを入力する画面と続きます。<br />
<br />
ここでは、テンプレートは「Single View Application」としてみましょう。<br />
プロジェクト名・バンドルIDは任意の名称でかまいません。<br />
<br />
最後にプロジェクトの保存先を決定すると、プロジェクトが作成されます。<br />
<br />
<a href="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_2-802.php" onclick="window.open('http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_2-802.php','popup','width=882,height=484,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_2-thumb-500x274-802.jpg" alt="iphone3_2.jpg" class="mt-image-none" style="" height="274" width="500" /></a><br />
<br />
上の画像のように、あらかじめ必要なファイルやプログラムが書かれた状態で作成されるので、<br />
これに基づいてすぐにアプリケーションを作成していくことができます。<br />

<h4>２．アプリケーションを作ってみよう</h4> では、ごく簡単なアプリケーションを作成してみましょう。<br />
<br />
要件は、以下のような「ボタンを押したらアラートダイアログが表示される」ものにしてみます。<br />
<a href="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_9-816.php" onclick="window.open('http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_9-816.php','popup','width=367,height=715,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_9-thumb-150x292-816.jpg" alt="iphone3_9.jpg" class="mt-image-none" style="" height="292" width="150" /></a><br />
<br />
<br />
まず、「ViewController.xib」をクリックします。<br />
.xibの拡張子がついたファイルでは通常のソースファイルと異なり、GUIでアプリケーションの見た目を<br />
構成できる専用のツールの画面が表示されます。<br />
（このツールをInterfaceBuilderといいます）<br />
<br />
ここではボタンを配置してみましょう。<br />
右下のエリアにある「Round Rect Button」という項目をドラッグ＆ドロップで画面上に配置します。<br />
<br />
<a href="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_3-803.php" onclick="window.open('http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_3-803.php','popup','width=959,height=611,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_3-thumb-500x318-803.jpg" alt="iphone3_3.jpg" class="mt-image-none" style="" height="318" width="500" /></a><br />
<br />
<br />
次に、「ViewController.h」ファイルを選択し、以下の画像のようにコードを入力します。<br />
<br />
<a href="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_4-805.php" onclick="window.open('http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_4-805.php','popup','width=720,height=278,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_4-thumb-500x193-805.jpg" alt="iphone3_4.jpg" class="mt-image-none" style="" height="193" width="500" /></a><br />
<br />
「IBOutlet」のついた変数は、先ほどご紹介したInterfaceBuilderと連携することができます。<br />
（「IBAction」のついた関数の宣言も同様です）<br />
<br />
実際に連携してみましょう。<br />
もう一度「ViewController.xib」をクリックし、左上のエリアにある「Files Owner」を選択したあと、<br />
右上のエリアを参照します。<br />
すると、先程入力した変数などが表示されていることがわかります。<br />
<br />
<a href="http://lab.gpol.co.jp/tsubo/iphone3_5.jpg"><img alt="iphone3_5.jpg" src="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_5-thumb-600x148-807.jpg" class="mt-image-none" style="" height="148" width="600" /></a><br />
<br />
この変数と、画面上に配置したボタンを紐付けることができます。<br />
「_btn」の右隣にある白丸をクリックし、ボタン上にドラッグ＆ドロップするだけでOKです。<br />
<br />
同様に、「clickBtn:」もボタン上へドラッグ＆ドロップします。<br />
するとこのメソッドを呼ぶタイミングを選択するリストが表示されるので、ここでは「Touch Up Inside」を<br />
選択してみましょう。<br />
<br />
<a href="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_6-809.php" onclick="window.open('http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_6-809.php','popup','width=849,height=628,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_6-thumb-500x369-809.jpg" alt="iphone3_6.jpg" class="mt-image-none" style="" height="369" width="500" /></a><br />
<br />
これで、プログラムとInterface Builderの連携は完了です。<br />
<br />
<br />
最後に、アラートダイアログを表示するプログラムを書きます。<br />
「ViewController.m」を選択し、画像にあるようなプログラムを追記します。<br />
<br />
<a href="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_7-811.php" onclick="window.open('http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_7-811.php','popup','width=1050,height=490,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_7-thumb-500x233-811.jpg" alt="iphone3_7.jpg" class="mt-image-none" style="" height="233" width="500" /></a><br />
<br />
これで、先程Interface Builderで選択したように、ボタンをクリックし終わったタイミングで、<br />
この「clickBtn」メソッドの処理を実行することができます。<br />
<br />
では、実際にシミュレータで実行してみましょう。<br />
ウインドウの左上部分、「iPhone 5.0 Simulator」が選択されていることを確認し、「Run」ボタンをクリックします。<br />
<br />
<a href="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_8-814.php" onclick="window.open('http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_8-814.php','popup','width=553,height=178,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_8-thumb-500x160-814.jpg" alt="iphone3_8.jpg" class="mt-image-none" style="" height="160" width="500" /></a><br />
<br />
<br />
しばらくするとシミュレータが起動し、先ほどInterface Builderで作成したとおりの画面が表示されます。<br />
ここでボタンをクリックすると、アラートダイアログが表示されるはずです。<br />
<br />
<a href="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_9-816.php" onclick="window.open('http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_9-816.php','popup','width=367,height=715,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false"><img src="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/iphone3_9-thumb-150x292-816.jpg" alt="iphone3_9.jpg" class="mt-image-none" style="" height="292" width="150" /></a><br />
<br />
<br />
お疲れさまでした！<br />
少し長くなってしまいましたが、これでプロジェクトの作成と、簡単なアプリケーションの作成について<br />
ご紹介しました。<br />
次回は実機でアプリケーションを動かす方法などについて、ご紹介したいと思います。<br />
<br />
<br />
(kenta)<br />
<br />
<br />
]]>
        
    </content>
</entry>

<entry>
    <title>jQueryのロールオーバー/ロールアウトイベントとバブリング</title>
    <link rel="alternate" type="text/html" href="http://lab.gpol.co.jp/tsubo/2012/04/jquery.php" />
    <id>tag:lab.gpol.co.jp,2012:/tsubo//9.479</id>

    <published>2012-04-05T15:00:00Z</published>
    <updated>2012-03-21T11:50:19Z</updated>

    <summary>引き続きjQueryの勉強をしていきたいと思います。 [今までのjQuery関連記事] jQueryではじめるJavaScript http://lab.gpo...</summary>
    <author>
        <name>teruhisa</name>
        
    </author>
    
        <category term="開発日誌" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="javascript" label="JavaScript" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="jquery" label="JQuery" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="jqueryjavascript" label="jQuery JavaScript" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://lab.gpol.co.jp/tsubo/">
        <![CDATA[引き続きjQueryの勉強をしていきたいと思います。<br />
<br />
<blockquote>
[今までのjQuery関連記事]<br />
<strong>
jQueryではじめるJavaScript</strong><br />
<a href="http://lab.gpol.co.jp/tsubo/2010/01/jqueryjavascript.php">http://lab.gpol.co.jp/tsubo/2010/01/jqueryjavascript.php</a><br />

<strong>jQueryではじめるJavaScript ： セレクター操作</strong><br />
<a href="http://lab.gpol.co.jp/tsubo/2010/08/jqueryjavascript-1.php">http://lab.gpol.co.jp/tsubo/2010/08/jqueryjavascript-1.php</a><br />


<strong>jQueryではじめるJavaScript ： 処理１</strong><br />
<a href="http://lab.gpol.co.jp/tsubo/2010/10/1015jqueryjavascript.php">http://lab.gpol.co.jp/tsubo/2010/10/1015jqueryjavascript.php</a><br />

<strong>jQueryではじめるJavaScript ： ボールを動かしてみる</strong><br />
<a href="http://lab.gpol.co.jp/tsubo/2010/12/124jqueryjavascript.php">http://lab.gpol.co.jp/tsubo/2010/12/124jqueryjavascript.php</a>

</blockquote>
<br />
jQueryにはロールオーバーイベントに、mouseover と mouseenter、ロールアウトイベントに、mouseout と mouseleave の二つがあります。<br />その違いを説明します。<br /><br />下の図のように"色のついたエリア"にロールオーバー/ロールアウトイベントをつけて、マウスを縦断させてみました。<br /><br /><br /><b>・mouseover / mouseout</b><br /><a href="http://lab.gpol.co.jp/tsubo/before.jpg"><img alt="before.jpg" src="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/before-thumb-600x397-798.jpg" class="mt-image-none" style="" height="397" width="600" /></a><br /><br />マウスオーバー/マウスアウトの場合<br />1."赤エリア"に入ったとき[in red]<br />2."緑エリア"に入ったとき[out red][in green][in red]<br />3."青エリア"に入ったとき[out green][out red][in blue][in green][in red]<br />&nbsp; :<br /><br />これは予想外のいっぱいイベントが起きるので注意してください。<br />これはバブリングという仕組みで子供で発生したイベントが親に伝播するようになっています。<br />正直いって使いづらいのでそういう時は下のmouseenter/mouseleaveを使いましょう。<br /><br />ちなみにバブリングはEvent.stopPropagation()でとめる事もできます。<br /><br /><br /><b>・mouseover / mouseout stopPropagation() を使用</b><br /><a href="http://lab.gpol.co.jp/tsubo/out.JPG"><img alt="out.JPG" src="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/out-thumb-600x321-799.jpg" class="mt-image-none" style="" height="321" width="600" /></a><br /><br /><br />1."赤エリア"に入ったとき[in red]<br />2."緑エリア"に入ったとき[out red][in green]<br />3."青エリア"に入ったとき[out green][in blue]<br /><br /><br /><b>・mouseenter / mouseleave</b><br /><a href="http://lab.gpol.co.jp/tsubo/after.jpg"><img alt="after.jpg" src="http://lab.gpol.co.jp/tsubo/assets_c/2012/02/after-thumb-600x239-800.jpg" class="mt-image-none" style="" height="239" width="600" /></a><br /><br />1."赤エリア"に入ったとき[in red]<br />2."緑エリア"に入ったとき[in green]<br />3."青エリア"に入ったとき[in blue]<br /><br />やりたいことにもよりますが、jQueryのmouseenter/mouseleaveイベントが使い勝手意が良いですね。<br /><br />
(teruhisa)<br /><div><br /></div><div><br /></div><div><br /></div><div><br /></div>]]>
        
    </content>
</entry>

<entry>
    <title>[Facebook API] FQLについて</title>
    <link rel="alternate" type="text/html" href="http://lab.gpol.co.jp/tsubo/2012/03/facebook-api-fql.php" />
    <id>tag:lab.gpol.co.jp,2012:/tsubo//9.478</id>

    <published>2012-03-22T15:00:00Z</published>
    <updated>2012-03-23T12:31:02Z</updated>

    <summary>   Facebook APIには、SQLに似たFQL(Facebook Query Language)という機能が備わっています。   SQLと似たインターフ...</summary>
    <author>
        <name>tsubasa</name>
        
    </author>
    
        <category term="Ｗeb システムのツボ" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="facebook" label="Facebook" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="fql" label="FQL" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://lab.gpol.co.jp/tsubo/">
        <![CDATA[<blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"><img alt="201202032149.jpg" src="http://lab.gpol.co.jp/tsubo/201202032149.jpg" class="mt-image-none" height="138" width="500" /></blockquote>
<br />
<br />

  Facebook APIには、SQLに似たFQL(Facebook Query Language)という機能が備わっています。
  SQLと似たインターフェースで、SQL感覚でデータを扱うことが出来ます。
  
  
  自身の名前や友達リストなど基本的な情報を取得する場合、標準のGraph APIで事足りるのですが、より細かな情報を取得する場合にFQLはとても便利です。
  <br />
  <br />
  
  FQLリファレンスはこちらを参考にしてください。
  <br />
  <a href="https://developers.facebook.com/docs/reference/fql/" target="_blank">https://developers.facebook.com/docs/reference/fql/</a>
  <br />
  <br />
  
  また、FQLは公式のテストコンソールを使用して確認する事が出来ます。<br />
  <a href="https://developers.facebook.com/docs/reference/rest/fql.query/" target="_blank">https://developers.facebook.com/docs/reference/rest/fql.query/</a>
<br />
<br />
試しに、いくつか検索してみた例を紹介します。
<br />
<br />
<h4>1.日本語表記の名前を取得</h4>
　Facebookで名前を取得しようとした時に、日本語表記と英語表記が混ざっていること無いですか？<br />
　日本語表記の人は、出来れば日本語で表示したいですよね。<br />
　Facebookには、名前の設定にその国の言語表記も設定することが出来ます。<br />
　そこに母国語の名前を設定しているユーザは、このFQLで母国語の表記を取得することが出来ます。<br />

　※「user」テーブルではなく「profile」テーブルを指定します。 <br /><blockquote>
　SELECT name FROM profile WHERE id = me()
<br /></blockquote>
<br />
<h4>2.友人の中で、女性のみを抽出</h4>
　特に用途は不明ですが、何かの案件で調べたことがあったので紹介します。<br />
　このように、サブクエリも使用することが出来ます。 <br /><blockquote>
　SELECT name, sex FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = me()) AND sex IN ('female')
<br /></blockquote>
<h4>3.友達の中で、このアプリ(FQLを実行するアプリ)を使っていない人を取得</h4>
　例えば、友達の中でこのアプリを使っていない人に対して招待する場合などに、<br />
　対象ユーザのリストが作成できますね。 <br /><br /><blockquote>

  　SELECT name, sex FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = [YOUR_APP_ID]) AND is_app_user IN ('1')
<br /></blockquote>
<h4>4.自分が「いいね！」を押したFacebookページのURLとファン数を取得</h4>
　過去に「いいね！」を押したページを取得することが出来ます。<br />
　「いいね！」を取り消したい場合に一覧で取得できると便利ですね。 <br /><br /><blockquote>
　SELECT page_id, name, fan_count, page_url FROM page WHERE page_id IN (SELECT uid, page_id FROM page_fan WHERE uid = me()) ORDER BY fan_count
<br /></blockquote>
<h4>5.Facebookにログイン中の友達リストを取得</h4><blockquote>
　
　SELECT uid FROM user WHERE online_presence IN ('active', 'idle') AND uid IN (SELECT uid2 FROM friend WHERE uid1 = me())
<br /></blockquote>
<br />
取得できる情報を知っておく事で、アプリ制作の幅も広がると思います。
Facebookを使っていて、まだまだ情報を整理できていない部分、不便に思うこともあると思います。
そういった機能を補助する形でアプリを作っていくと、面白いものが出来るかもしれませんね。 <br /><br /><br />
(tsubasa)
<br />]]>
        
    </content>
</entry>

<entry>
    <title>iPhoneアプリ開発をはじめよう : 開発環境を準備しよう</title>
    <link rel="alternate" type="text/html" href="http://lab.gpol.co.jp/tsubo/2012/02/iphone-2.php" />
    <id>tag:lab.gpol.co.jp,2012:/tsubo//9.461</id>

    <published>2012-02-02T15:00:00Z</published>
    <updated>2012-02-02T00:59:41Z</updated>

    <summary>      前回のエントリでは、iPhoneアプリ開発をはじめるにあたって必要な知識についてご紹介しました。                  今回は、実際に開...</summary>
    <author>
        <name>kenta</name>
        
    </author>
    
        <category term="開発日誌" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="ios" label="iOS" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="iphone" label="iPhone" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="アプリ" label="アプリ" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://lab.gpol.co.jp/tsubo/">
        <![CDATA[      <a href="http://lab.gpol.co.jp/tsubo/2011/10/iphone-1.php">前回のエントリ</a>では、iPhoneアプリ開発をはじめるにあたって必要な知識についてご紹介しました。<br />
        <br />
        今回は、実際に開発をはじめるにあたって欠かせない、「開発環境の準備」について<br />
        ご紹介していきたいと思います。<br />
        <br />
        前回の開発フローの「（１）準備」に沿ってご説明していきます。<br />
        　１．Macを用意する<br />
        　２．iOS Developer Programに登録する<br />
        　３．Xcode(開発ツール)のダウンロード<br />

        <h4>１．Macを用意する</h4>
        <br />
        OS X 10.6(Snow Leopard)以上が搭載されているMacであれば、特に何でも構いません。<br />
        開発ツールはOS X 10.7(Lion)に対応したものもあります。<br />
        <br />
        マシン自体は何でもいいのですが、開発を行う場合あまりスペックの低いマシンだと<br />
        困るかもしれません。<br />
        <br />
        たとえば、移動があるならMac Book Pro、移動せずオフィスでひたすらコードをガリガリ書くならiMac、<br />
        というところでしょうか。<br />
        ここは、皆さまの好みで選べばよいかと思います。<br />


        <h4>２．iOS Developer Programに登録する</h4>
        <br />
        <a href="http://developer.apple.com/programs/ios/" target="_blank">こちらのサイト</a>から、iOS Developer Programに登録します。<br />
        有効なApple IDが必要なので、既にお持ちの方はそのアカウントをご利用いただけます。<br />
        <br />
        なお、プログラムへの登録には、年額8,400円かかります。<br />
        （前回は10,500円と書いていましたが、2011年11月現在では上記の値段になっています。）<br />
        <br />
        また、別のプログラムにiOS Developer Enterprise Programというものがありますが、<br />
        こちらは企業内部で使うアプリを開発するときに登録するプログラムになります。<br />
        お間違えのないよう、ご注意ください。<br />
        <br />
        手順に関しては、大まかには以下のようになります。<br />
        ・アップルデベロッパ未登録の場合、登録する<br />
        ・個人向けプログラムか法人向けプログラムを選択<br />
        ・個人情報あるいは企業情報の登録（氏名or法人名・住所・電話番号など）<br />
        ・プログラムの選択（iPhoneアプリの場合は「iOS Developer Program」）<br />
        ・ライセンスをApple Online Storeのカートで購入<br />
        ・送信されたメールにある、アクティベーションコードから、デベロッパプログラムを有効にする<br />


        <h4>３．Xcodeをダウンロードする</h4>
        <br />
        プログラムへの登録が完了したら、Xcode(開発ツール)のダウンロードができるようになります。<br />
        <br />
        ちなみに「Xcode」とは...<br />
        iOSアプリを開発するときの、統合開発環境になるソフトウェアです。<br />
        GUIでUIを組み立てられたり(Interface Builder)、パフォーマンス測定ツール(Instruments)がついていたり、アプリの申請作業が出来たりと、けっこうな優れものです。<br />
        <br />
        <a href="https://developer.apple.com/devcenter/ios/index.action" target="_blank">iOS Dev Center</a>にログインし、「Downloads」から、<br />
        <br />
        <a href="http://lab.gpol.co.jp/tsubo/RD_iPhone_iDP1.jpg"><img alt="iPhone_iDP1.jpg" src="http://lab.gpol.co.jp/tsubo/assets_c/2011/11/RD_iPhone_iDP1-thumb-600x264-696.jpg" class="mt-image-none" style="" height="264" width="600" /></a><br />
        <br />
        <br />
        Downloadを選択すると、ダウンロードが開始します。<br />
        （Snow LeopardとLionで分かれていますので、ご注意ください。）<br />
        <br />
        <a href="http://lab.gpol.co.jp/tsubo/RD_iPhone_iDP2.jpg"><img alt="iPhone_iDP2.jpg" src="http://lab.gpol.co.jp/tsubo/assets_c/2011/11/RD_iPhone_iDP2-thumb-600x284-697.jpg" class="mt-image-none" style="" height="284" width="600" /></a><br />
        <br />
        <br />
        ※iOS Dev Centerのレイアウトは変わることがあります。<br />
        　&nbsp;上記のキャプチャは2011年11月時点のものですので、ご了承ください。<br />
        <br />
        <br />
        あとはダウンロードしたdmgファイルを展開し、インストーラの進行にまかせていけば<br />
        インストールが完了します。<br />
        <br />
        <br />
        お疲れさまです！これで開発環境の準備が完了しました。<br />
        次回は、Xcodeを使ったサンプルプロジェクトの作成や、ビルドの作成についてご紹介していければと思います。<br />
        <br />
        <br />
        (kenta)<br />]]>
        
    </content>
</entry>

<entry>
    <title>SSI(Server Side Include)で外部ファイルを読み込んでみよう</title>
    <link rel="alternate" type="text/html" href="http://lab.gpol.co.jp/tsubo/2011/12/ssiserver-side-include.php" />
    <id>tag:lab.gpol.co.jp,2011:/tsubo//9.465</id>

    <published>2011-12-22T15:00:00Z</published>
    <updated>2011-12-27T10:55:57Z</updated>

    <summary>「htmlファイルで外部ファイルやPHPファイルを読み込みたい！」 という時はSSIを利用すれば簡単に実現できます。 今回はその方法を紹介したいと思います。 た...</summary>
    <author>
        <name>hirohito</name>
        
    </author>
    
        <category term="Ｗeb システムのツボ" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="htaccess" label="htaccess" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ssi" label="SSI" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://lab.gpol.co.jp/tsubo/">
        <![CDATA[<strong>「htmlファイルで外部ファイルやPHPファイルを読み込みたい！」</strong><br />
<br />
という時はSSIを利用すれば簡単に実現できます。<br />
今回はその方法を紹介したいと思います。<br />
<br />
ただし、セキュリティの問題がありますので、 <br />
実案件で使用する際には、リスクを説明した上で<b>お客様に確認をとってください。</b>
<br />
 更に、<b>サーバーで<b>SSIが</b>使用できるかのチェックも忘れずに！</b>
<br />
<br />
以上の事を注意してSSIを行ってみましょう。
<br />

<h4>ApacheでSSIを使えるようにする</h4>
まずSSIを行うには、Apacheの設定でSSIが許可されている必要がありますが、<br />
最初から許可設定になっているサーバは少ないと思います。 <br />
そこで、SSIを有効にする為に.htaccessファイルに下記を記入します。<br />
(残念ながらhtaccessが許可されていないサーバの場合は潔く諦めましょう)
<blockquote>
Options +Includes<br />

AddHandler server-parsed html
</blockquote>
1行目がSSIを使えるようにする記述、<br />
2行目は拡張子がhtmlのファイルにSSIを有効にする記述です。 <br />
<br />
上記の記述を行い、SSIを有効にしたい一番上の階層のディレクトリに<br />
「.htaccess」ファイルをアップロードします。 <br />

<h5>execを有効にしない場合</h5>
 上記の設定ですと、<b>「exec」のプログラム実行も有効</b>となります。<br />


SSIを利用する目的が、
<b>「execを使用してCGIプログラムを呼び出さない」</b><br />

<b>「ヘッダやフッタのhtmlを読み込むだけでOK！」</b>
というような場合は、1行目を下記に書き換えます。
<blockquote>
Options +IncludesNOEXEC
</blockquote>
<b>NOEXEC</b>をつける事によって、<b>「exec」の機能を省くことができます。</b>

<h5>拡張子がshtmlのファイルのみSSIを有効にしたい場合</h5>
2行目を下記の記述に変更して下さい。
<blockquote>
AddHandler server-parsed shtml
</blockquote>
これで、shtmlの拡張子ファイルのみSSIが有効になり、
htmlの拡張子ファイルではSSIが無効となります。<br />
<br />
<br />

<h4>htmlファイルにコードを記述</h4>
次に外部ファイルを読み込むコードを記述します。<br />
Googleなどで検索してみると、だいたい下記の方法がヒットすると思います。
<blockquote>
&lt;!--#include file="Include.html" --&gt;<br />

&lt;!--#include virtual="../include/Include.html" --&gt;
</blockquote>
この<b>「file=""」</b>と<b>「virtual=""」</b>の違いは、<br />
読み込むファイルのディレクトリ場所によって記述方法が変わります。<br />

<b><br />
「file」</b>は、 <b>上層のディレクトリにあるファイルは読み込めません。</b>
<blockquote>
&lt;!--#include file="../file/oooo.html" --&gt;
</blockquote>
これだとエラーになります。
下記のように、同ディレクトリやサブフォルダにある場合はOKです。
<blockquote>
&lt;!--#include file="oooo.html" --&gt;<br />

&lt;!--#include file="file/oooo.html" --&gt;
</blockquote>
反対に、<b>「virtual=""」</b>の場合は、<br />

<b>別のディレクトリ指定でも、サーバの絶対パスでも指定が可能です。</b>
下記の様な記述でもOKです。
<blockquote>
&lt;!--#include virtual="../file/oooo.html" --&gt;<br />

&lt;!--#include virtual="/file/oooo.html" --&gt;
</blockquote>
上記の記述を外部ファイルを読み込みたい箇所に書いておくと、<br />
外部ファイルの中身と置き換わります。<br />
後はブラウザで確認し、上手く動作していればSSIの実装完了です！

<br />
<br />
他にもSSIでできることはたくさんあるのですが、
<br />
今回は外部ファイルの読み込みをご紹介させていただきました。<br />
こんなに便利なSSIですが、冒頭でも書きました通りセキュリティの問題があるので、<br />
十分ご注意下さい。<br />
<br />
<br />
(hirohito)]]>
        
    </content>
</entry>

<entry>
    <title>htaccessでPC,モバイル,スマートフォンサイトの振り分け</title>
    <link rel="alternate" type="text/html" href="http://lab.gpol.co.jp/tsubo/2011/11/htaccesspc.php" />
    <id>tag:lab.gpol.co.jp,2011:/tsubo//9.463</id>

    <published>2011-11-23T15:00:00Z</published>
    <updated>2011-11-25T11:22:34Z</updated>

    <summary>スマートフォンの普及により、PC、モバイル、スマートフォンと3種類のサイトを作成する案件が増えてきました。 そこで、htaccessを使用して各サイトへ振り分け...</summary>
    <author>
        <name>tsubasa</name>
        
    </author>
    
        <category term="Ｗeb システムのツボ" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="htaccess" label="htaccess" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="スマートフォン" label="スマートフォン" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="モバイル" label="モバイル" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://lab.gpol.co.jp/tsubo/">
        <![CDATA[スマートフォンの普及により、PC、モバイル、スマートフォンと3種類のサイトを作成する案件が増えてきました。<br />
そこで、htaccessを使用して各サイトへ振り分けする方法をご紹介します。<br />
<br />例では、<br />/&nbsp;&nbsp;&nbsp; 　・・・ドキュメントルートをPCサイト<br />
/mb/  ・・・モバイルサイト<br />
/sm/  ・・・スマートフォンサイト<br />
とします。<br /><br />振り分けの流れは、このようになります。<br /><br /><b>&lt;モバイルサイトにアクセスがあった場合&gt;</b><br />
1.スマートフォンでアクセスがあると、「mb」フォルダパスを「sm」に置き換える<br />
2.モバイル以外からアクセスがある（PCからアクセスがある）と、「mb」フォルダパスを削除<br /><br />
<b>&lt;スマートフォンサイトにアクセスがあった場合&gt;</b><br />
3.モバイルからアクセスがあると、「sm」フォルダパスを「mb」に置き換える<br />
4.スマホとモバイル以外からアクセスがある（PCからアクセスがある）と、「mb」フォルダパスを削除<br />
<br />
<b>&lt;PCサイトにアクセスがあった場合&gt;</b><br />
5.モバイルからアクセスがあると、「mb」フォルダパスを付与する<br />
6.スマートフォンからアクセスがあると、「sm」フォルダパスを付与する<br />
<br />
<br /><b>&lt;htaccessの記述&gt;</b><br /><blockquote>RewriteEngine On<br />
RewriteBase /
<strong># 1.No enter except MOBILE(SMART)</strong><br />
RewriteCond %{REQUEST_URI} ^/mb/<br />
RewriteCond %{HTTP_USER_AGENT} ^.*(iPhone|iPod|Android).*$<br />
RewriteRule ^mb(.*)$ sm$1 [R]<br />
<strong># 2.No enter except MOBILE(PC)</strong><br />
RewriteCond %{REQUEST_URI} ^/mb/<br />
RewriteCond %{HTTP_USER_AGENT} !^(DoCoMo|J-PHONE|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank).*$<br />
RewriteRule ^mb(.*)$ $1 [R]
<strong><br /></strong><strong># 3.No enter except SMART(MOBILE)</strong><br />
RewriteCond %{REQUEST_URI} ^/sm/<br />
RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|J-PHONE|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank).*$<br />
RewriteRule ^sm(.*)$ mb$1 [R]<br />
<strong># 4.No enter except SMART(PC)</strong><br />
RewriteCond %{REQUEST_URI} ^/sm/<br />
RewriteCond %{HTTP_USER_AGENT} !^(DoCoMo|J-PHONE|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank|.*iPhone|.*iPod|.*Android).*$<br />
RewriteRule ^sm(.*)$ $1 [R]
<strong><br /></strong><strong># 5.No enter except PC(MOBILE)</strong><br />
RewriteCond %{REQUEST_URI} !^/mb/<br />
RewriteCond %{REQUEST_URI} !^/sm/<br />
RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|J-PHONE|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank).*$<br />
RewriteRule ^(.*)$ mb/$1 [R]<br />
<strong># 6.No enter except PC(SMART)</strong><br />
RewriteCond %{REQUEST_URI} !^/mb/<br />
RewriteCond %{REQUEST_URI} !^/sm/<br />
RewriteCond %{HTTP_USER_AGENT} ^.*(iPhone|iPod|Android).*$<br />
RewriteRule ^(.*)$ sm/$1 [R] <br /></blockquote><br />
一度振り分け方法を知っておけば後は使い回しが出来ますね。<br />
ちなみに、過去の案件で会員登録をPC、モバイル、スマートフォンの３種類で出来るページを作成しましたが、<br />
頻繁に使用されているのは、PC &gt; スマートフォン &gt; モバイル だったそうです。<br />
やはり、モバイルサイトでの登録はかなり根気が要りますね。<br /><br /><br />(tsubasa)<br />]]>
        
    </content>
</entry>

<entry>
    <title>Zend PHP 5.3 Certification 資格取得のポイント</title>
    <link rel="alternate" type="text/html" href="http://lab.gpol.co.jp/tsubo/2011/11/zend-php-53-certification.php" />
    <id>tag:lab.gpol.co.jp,2011:/tsubo//9.460</id>

    <published>2011-11-10T15:00:00Z</published>
    <updated>2011-11-17T11:34:14Z</updated>

    <summary>最近はスマートフォン開発なども盛んですが、まだまだPHPを使うことも多いのでしっかりした知識を身につけようと「Zend PHP 5.3 Certificatio...</summary>
    <author>
        <name>teruhisa</name>
        
    </author>
    
        <category term="システムニュース" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="php" label="PHP" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://lab.gpol.co.jp/tsubo/">
        <![CDATA[最近はスマートフォン開発なども盛んですが、まだまだPHPを使うことも多いのでしっかりした知識を身につけようと「Zend PHP 5.3 Certification」を受験してきました。<br /><br />詳細は<a href="http://www.zend.co.jp/tech/index.php?%A4%BD%A4%CE%C2%BE%2FZend%20PHP%20Certification%2F%BC%F5%B8%B3%C2%CE%B8%B3%B5%AD" target="_blank">Zend PHP Certification 受験体験記</a>に詳しくのってますが、5.3にバージョンが上がってるので、それを中心に資格取得のポイントをまとめます。<br />
※試験は2011年9月に受けました。現在、内容が変わっているかもしれませんがご了承ください。

<h4>試験について</h4>

<b>・問題は英語</b><br />
このバージョンでは日本語版がまだ無いため、テストの説明から問題、解答にいたるまですべて英語です。<div>ここが一番の"問題"だったりします。<br />
<br />
<b>・90分70問</b><br />
「3〜5択問題」「5文から2つ選択問題」（5問ぐらい）「記述問題」（5問ぐらい）の70問です 。<br />

<h4>出題範囲</h4>

<b>・マルチバイト文字列はでない</b><br />
たまたまかもしれませんが、英語圏向けテストなのでマルチバイト文字列系（mb_xxxx）はでませんでした。<br /><br />

<b>・PHP 5.3 の新機能</b><br />
でてました。バージョンを改訂したのは伊達じゃないようです。<br /><br />

<b>・間違いやすい系</b><br />
参照渡し、前置・後置インクリメント、変数のスコープ、スーパーグローバルなど数問でてました。<br /><br />

<b>・DB</b><br />
mysql_xxxxとかpg_xxxxはなかったですが、PDOが数問でてました<br /><br />

<b>・XML</b><br />
数問でてました<br /><br />

<b>・クラス定義</b><br />
数問でてました<br /><br />

<b>・ファイル変数</b><br />
$_FILE関連。数問でてました<br /><br />



<h4>参考書</h4>

以下の参考書で勉強しました<br /><br />

<b>・ZEND PHP 5 Certification STUDY GUIDE</b><br />
体験記でもオススメの参考書です。英語に慣れるために読みました。ただし、PHP 5.3の新機能はカバーして無いので、これだけでは足りません<br /><br />

<b>・プログラミングPHP 第2版</b><br />
試験対策だけでなくPHPを使うなら一度は読んでおいた方が良い本です<br />

<br />
<br />
<br />
<br />
<br />

ちなみに結果は合格でした！<br /><br /><img alt="DSC.JPG" src="http://lab.gpol.co.jp/tsubo/DSC.JPG" class="mt-image-none" style="" width="320" height="218" /><br />

<br />(teruhisa)</div>]]>
        
    </content>
</entry>

<entry>
    <title>iPhoneアプリ開発をはじめよう : 前提知識について</title>
    <link rel="alternate" type="text/html" href="http://lab.gpol.co.jp/tsubo/2011/10/iphone-1.php" />
    <id>tag:lab.gpol.co.jp,2011:/tsubo//9.446</id>

    <published>2011-10-27T15:00:00Z</published>
    <updated>2011-10-25T07:05:50Z</updated>

    <summary>弊社でもiPhoneアプリの開発をスタートしましたので、覚書の意味も込めて iPhoneアプリを開発するのに必要な準備や知識について、まとめていきたいと思います...</summary>
    <author>
        <name>kenta</name>
        
    </author>
    
        <category term="開発日誌" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="ios" label="iOS" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="iphone" label="iPhone" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="アプリ" label="アプリ" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://lab.gpol.co.jp/tsubo/">
        <![CDATA[弊社でもiPhoneアプリの開発をスタートしましたので、覚書の意味も込めて<br />
iPhoneアプリを開発するのに必要な準備や知識について、まとめていきたいと思います。<br />
<br />
今回は、開発を始める前に必要な前提知識について、簡単にまとめます。<br />
<br />
 まず、開発をスタートするのに、重要なことがあります。<br /><br />
　・開発は<b>Mac</b>でしか行えません。<br />
　・アプリをAppStoreに公開するには、<b>iOS Developer Program</b> (10,800円/年、2011年8月時点)へ登録する必要があります。<br /><br />
Windowsでは開発自体ができず、最終的にリリースするにはお金がかかる、ということです。<br />
かなり初歩的ですが、Mac環境自体がないこともあるかと思いますので、注意が必要です。<br /><h4>アプリケーションの種類</h4>
iPhoneアプリ（iOSアプリ）が動く端末は、iPhone、iPod Touch、iPadと種類がありますが、<br />
制作するアプリケーションとしては以下の３つにわかれます。<br />
<br />
（１）<b>iPhoneアプリ</b><br />

　iPhoneとiPod touchに対応したアプリ。iPadでも動かすことができる。<br />

　AppStoreには42万以上のiPhoneアプリが公開されている。<br />

<br />
（２）<b>iPadアプリ</b><br />

　iPadにのみ対応したアプリ。iPhoneとiPod touchでは動かない。<br />

　10万以上のアプリが公開されている。<br />

<br />
（３）<b>ユニバーサルアプリ</b><br />

　iPhone・iPad両方に対応したアプリ。<br />
　それぞれの端末の画面サイズに適した形で表示される。<br />
<br />
iPhoneに対応したアプリを作りたいが、iPadへの対応はどうするのか。<br />
iPadへ対応する場合、iPad用として別のアプリを作るのか、一つのアプリをiPhone / iPad両方に対応させるのかなど<br />
考える必要があります。
<h4>開発フロー</h4>
開発のフローは、基本的には以下のように進んでいきます。<br />
<br />
（１）<b>準備</b><br />
・Macを用意する<br />
・iOS Developer Programに登録する<br />
・Xcode(開発ツール)のダウンロードなど、開発環境の整備する<br />
<br />
↓<br />
<br />
（２）<b>開発</b><br />
・アプリの仕様を決める<br />
・デザイン、プログラミングを行う<br />
・実機でテストする<br />
<br />
↓<br />
<br />
（３）<b>申請</b><br />
・Appleにデータを提出し、審査を受ける<br />
・審査に通らなかった場合、修正し再度審査を受ける<br />
<br />
↓<br />
<br />
（４）<b>公開</b><br />
・AppStoreに公開される<br />
・必要に応じてバージョンアップする<br />
<br />
※アプリ開発と並行して、サポートサイトの制作やプレスリリースの作成なども、場合によって必要になります。<br />
<br />
<br />
基本的には一般的なアプリケーションの開発と変わりませんが、注意が必要なのは「審査」のプロセスです。<br />
審査には約１〜２週間かかり、審査に落ちてしまうと（「リジェクト」といいます）アプリを修正して再度申請する必要があります。<br />
そのため、リリース日が決まっている場合などはその日までに審査を通過しておく必要があり、通常よりも余裕をもったスケジュールを立てる必要があります。<br />
たとえば、リリース日の１ヶ月前までに開発を終了し、１ヶ月間を審査・修正の期間にあてるなどのスケジューリングが必要です。<br />
<br />
<br />
今回は開発を始める前に、ごく基本的な前提知識についてご紹介いたしました。<br />
次回以降、実際にどのようにアプリを作っていくのかご紹介していきたいと思います。<br />
<blockquote>
  <b>※参考までに...</b><br />
Appleは開発者向けに豊富なドキュメントを提供しています。<br />
以下の３つは「まず読むもの」として位置づけられており、基本的な情報が詰まっていますので<br />
これから開発をはじめる方は一読されることをおすすめいたします。<br />
<br />
<b>iOS開発ガイド</b><br />
<a href="http://developer.apple.com/jp/devcenter/ios/library/documentation/iOS_Development_Guide.pdf" target="_blank">http://developer.apple.com/jp/devcenter/ios/library/documentation/iOS_Development_Guide.pdf</a><br />
アプリ開発作業の一連のプロセスや、アプリ登録手順などが記載されています。<br />
アプリを開発してからリリースするまでの一通りの作業と流れを知ることができます。<br />
<br />
<b>iOSアプリケーションプログラミングガイド</b><br />
<a href="http://developer.apple.com/jp/devcenter/ios/library/documentation/iPhoneAppProgrammingGuide.pdf" target="_blank">http://developer.apple.com/jp/devcenter/ios/library/documentation/iPhoneAppProgrammingGuide.pdf</a><br />
プログラマ向けに、実行環境や設計について、詳しく書かれています。<br />
どのようにプログラミングするか、ではなく、どのようにアプリが動くかをより詳しく説明しています。<br />
内部的な動きを知っていればより良い実装が出来ると思うので、開発作業をする方は一読をお勧めします。<br />
<br />
<b>iOSヒューマンインターフェースガイドライン</b><br />
<a href="http://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf" target="_blank">http://developer.apple.com/jp/devcenter/ios/library/documentation/MobileHIG.pdf</a><br />
UIやユーザインタフェースについて説明しています。<br />
アプリの見た目のデザインや、使い勝手を追及するのに役立つかと思います。<br />
</blockquote>
<br />
<br />
(kenta) 
]]>
        
    </content>
</entry>

<entry>
    <title>【Android】FacebookAPIをアプリに組み込む</title>
    <link rel="alternate" type="text/html" href="http://lab.gpol.co.jp/tsubo/2011/10/androidfacebookapi.php" />
    <id>tag:lab.gpol.co.jp,2011:/tsubo//9.448</id>

    <published>2011-10-13T15:00:00Z</published>
    <updated>2011-10-07T08:04:02Z</updated>

    <summary>FacebookボタンがあるAndroidアプリをよく見かけると思いますが、その組込み方の紹介をしたいと思います。 今回は、Facebook認証からウォール投稿...</summary>
    <author>
        <name>kozo</name>
        
    </author>
    
        <category term="開発日誌" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Ｗeb システムのツボ" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="android" label="Android" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="facebook" label="Facebook" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://lab.gpol.co.jp/tsubo/">
        <![CDATA[<p>FacebookボタンがあるAndroidアプリをよく見かけると思いますが、その組込み方の紹介をしたいと思います。<br />
今回は、Facebook認証からウォール投稿できるまでの処理を組み込んでいきます。<br />
設置の流れとしては、以下の流れとなります。</p>
<p><br />
  
  (1)Facebook-sdk-androidのダウンロード（ライブラリのダウンロード）<br />
  (2)Eclipseでライブラリプロジェクトの作成<br />
  (3)Androidアプリプロジェクトの生成<br />
  (4)FacebookにAndroidアプリを登録<br />
  (5)ソースの組込</p>
<p><br />
  
</p>
<h4>(1)Facebook-sdk-androidのダウンロード（ライブラリのダウンロード）</h4>
  <p>ライブラリを<a href="https://github.com/facebook/facebook-android-sdk">ダウンロードページ</a>からダウンロードします。（保存先は任意の場所でいいです。） </p>

<h4>(2)Eclipseでライブラリプロジェクトの作成</h4>
  <p>(1)のライブラリプロジェクトの作成をします。</p>
  </p>
  [ファイル] &gt; [新規] &gt; [Ａｎｄｒｏｉｄプロジェクト]を実行
  <p><img alt="facebook2.png" src="http://lab.gpol.co.jp/tsubo/facebook2.png" width="430" height="277" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" />
    
    <img alt="facebook3.png" src="http://lab.gpol.co.jp/tsubo/facebook3.png" width="363" height="315" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;">
    
    <img alt="facebook4.png" src="http://lab.gpol.co.jp/tsubo/facebook4.png" width="198" height="169" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;">
    
<h4>(3)Androidアプリプロジェクトの生成</h4>
    <p>EclipseでFacebookのAPIを使うAndroidアプリを作成してください。 <br />
      [ファイル] &gt; [新規] &gt; [Ａｎｄｒｏｉｄプロジェクト] を実行します。</p>
    <p><br />
      作成出来たら(2)で作成したライブラリを読み込ませます。
      <br />
      [プロジェクト右クリック] &gt; [プロパティ] &gt; [Android] を実行。<br />
      ライブラリーの追加ボタンを押して、(2)のライブラリを選択してください。
      
      <br />
      <img alt="facebook5.png" src="http://lab.gpol.co.jp/tsubo/facebook5.png" width="500" height="505" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;">
      <img alt="facebook6.png" src="http://lab.gpol.co.jp/tsubo/facebook6.png" width="322" height="355" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;">
      <img alt="facebook7.png" src="http://lab.gpol.co.jp/tsubo/facebook7.png" width="520" height="264" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;">
      
<h4>(4)FacebookにAndroidアプリを登録</h4>
      Facebookにアプリを登録します。
      <a href="https://developers.facebook.com/apps" target="_blank">アプリ登録</a>ページからアプリを登録します。
      <br />
<h5>1 Create New App選択</h5>
<h5>2 App名登録</h5>
      <img alt="facebook8.png" src="http://lab.gpol.co.jp/tsubo/facebook8.png" width="598" height="220" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;">
<h5>3 必要情報を登録(特にデフォルトで何も変更しなくてもよいです。APPIDを控えておく）</h5>
      <img alt="facebook9.png" src="http://lab.gpol.co.jp/tsubo/facebook9.png" width="557" height="446" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" />
      
<h4>(5)ソースの組込</h4>
      
<h5>1 AndroidManifest.xmlに次のソースを組みこむ</h5>
      </manifest>の前に下記ソースを組みこむ
      
      <pre class='brush: php'>＜uses-permission android:name=&quot;android.permission.INTERNET&quot;＞＜/uses-permission＞</pre>
      
<h5>2  FacebookのアプリにKey Hashを記入する</h5>
      
      <p><strong>●デバッグキーハッシュを確認する</strong></p>
      <p>        [ウィンドウ（W）] > [設定] > [Android(ビルド)
        
        ]を実行。<br />
「デフォルト・デバッグ・キーストア」の箇所を確認。控えておきます。<img alt="facebook10.png" src="http://lab.gpol.co.jp/tsubo/facebook10.png" width="500" height="378" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;">
        
        <strong>●コマンドプロンプトを立ち上げて、以下のキーを起動</strong><br />
        <pre class='brush: php'>
        keytool -exportcert -alias androiddebugkey -keystore &quot;上記のデバッグキーハッシュパス&quot; | openssl sha1 -binary | openssl base64
        </pre>
        
        ・パスワードを聞かれるので「android」と入力<br />
        →Key Hashが返されます。
        
        <img alt="facebook12.png" src="http://lab.gpol.co.jp/tsubo/facebook12.png" width="641" height="94" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" />
        
        <strong>●（4）で登録したアプリのキーハッシュを登録 </strong><img alt="facebook11.png" src="http://lab.gpol.co.jp/tsubo/facebook11.png" width="517" height="289" class="mt-image-center" style="text-align: center; display: block; margin: 0 auto 20px;" />      </p>
<h4>Activityファイルのサンプルコード</h4>
Activityファイルのサンプルは以下の通りです。
      <pre class='brush: php'>
      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(&quot;アプリID&quot;); // 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(&quot;FacebookToken&quot;, token).commit();
      }
      
      
      /*
      * 認証部分
      */
      private void fbAuthAndPost(){
      if(mFacebookToken.equals(&quot;&quot;)){
      facebook.authorize(this, new String[]{&quot;publish_stream&quot;}, new DialogListener() {
      
      @Override
      public void onComplete(Bundle values) {
      Log.d(this.getClass().getName(),&quot;Facebook.authorize Complete: &quot;);
      saveFBToken(facebook.getAccessToken(), facebook.getAccessExpires());
      updateStatus(values.getString(Facebook.TOKEN));
      }
      
      @Override
      public void onFacebookError(FacebookError error) {
      Log.d(this.getClass().getName(),&quot;Facebook.authorize Error: &quot;+error.toString());
      }
      
      @Override
      public void onError(DialogError e) {
      Log.d(this.getClass().getName(),&quot;Facebook.authorize DialogError: &quot;+e.toString());
      }
      
      @Override
      public void onCancel() {
      Log.d(this.getClass().getName(),&quot;Facebook authorization canceled&quot;);
      }
      });
      }
      }
      
      @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(&quot;FacebookToken&quot;, &quot;&quot;);
      
      if(mFacebookToken.equals(&quot;&quot;)){
      fbAuthAndPost();
      }else{
      updateStatus(mFacebookToken);
      }
      
      }
      
      /*
      * ウォール投稿を表示する処理
      * 
      */
      public void updateStatus(String accessToken){  
      
      /************
      * ウォールに投稿
      ************/
      Bundle bundle = new Bundle();
      
      bundle.putString(&quot;message&quot;, &quot;&quot;);
      bundle.putString(&quot;link&quot;, &quot;URL&quot;);
      bundle.putString(&quot;name&quot;, &quot;テスト&quot;);
      bundle.putString(&quot;caption&quot;, &quot;キャプション&quot;);
      bundle.putString(&quot;picture&quot;, &quot;&lt;img URL&gt;&quot;);	
      bundle.putString(&quot;description&quot;, &quot;アプリ説明&quot;);
      
      /*　Facebookダイアログ表示 */
      facebook.dialog(Facetest2Activity.this, &quot;feed&quot;, bundle, new DialogListener() {
      
      public void onComplete(Bundle values) {   
      
      }
      
      public void onFacebookError(FacebookError e) {
      }
      
      public void onError(DialogError e) {
      }
      
      public void onCancel() {
      }
      });    	
      } 
      }
      
      </pre>
      
<h5>各関数の説明</h5>

<strong>saveFBToken関数</strong><br />
セッションを保存する関数。Facebookにログインした時からセッションを保存する関数<br />

<strong>fbAuthAndPost関数</strong><br />
認証部分。ここでFacebookのOAuth認証を行う。<br />

<strong>onActivityResult関数</strong><br />
Facebook処理が終わった後に動く関数。<br />

<strong>auth関数</strong><br />
FacebookのAccess Tokenを調べてなかったらfbAuthAndPost関数呼び出しFacebook認証画面へ。<br />

<strong>updateStatus関数</strong><br />
認証後にウォール投稿のデフォルト設定する関数。デフォルト設定に使うメソッド。


<h5>ウォール投稿部分のソースの説明</h5>
 <pre class='brush: php'>
bundle.putString(&quot;link&quot;, &quot;リンクURL&quot;);
bundle.putString(&quot;name&quot;, &quot;題名&quot;);
bundle.putString(&quot;caption&quot;, &quot;キャプション名&quot;);
bundle.putString(&quot;picture&quot;, img URL);	
bundle.putString(&quot;description&quot;, &quot;説明&quot;);
</pre>

<table border="0">
<tr><td><strong>link</strong></td><td>・・・</td><td>リンク付け</td></tr>
<tr><td><strong>name</strong></td><td>・・・</td><td>アプリ名前</td></tr>
<tr><td><strong>caption</strong></td><td>・・・</td><td>アプリ名前の直下に出る部分</td></tr>
<tr><td><strong>picture</strong></td><td>・・・</td><td>アプリのアイコン画像（ファイルパスはURLで設定）</td></tr>
<tr><td><strong>descriptio</strong>n</td><td>・・・</td><td>アイコンの説明</td></tr>
</table>

<h5>サンプルコード</h5>
上記のコードをダウンロードできます。<br />
<strong>ダウンロード：</strong><a href="http://lab.gpol.co.jp/tsubo/facetest2.zip">facetest2.zip</a><br /><br />

(kozo)]]>
        
    </content>
</entry>

<entry>
    <title>wkhtmltoimagを使ってコマンドラインからWebサイトのスクリーンショットを取ってみる</title>
    <link rel="alternate" type="text/html" href="http://lab.gpol.co.jp/tsubo/2011/10/post-5.php" />
    <id>tag:lab.gpol.co.jp,2011:/tsubo//9.450</id>

    <published>2011-10-06T15:00:00Z</published>
    <updated>2011-10-07T08:06:47Z</updated>

    <summary>PHPでもサイトのスクリーンショットを取れるオープンソースがありましたので、試しにやってみました。   「wkhtmltoimage」というソフトです。 ダウン...</summary>
    <author>
        <name>hirohito</name>
        
    </author>
    
        <category term="オープンソース紹介" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="php" label="PHP" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="キャプチャ" label="キャプチャ" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="スクリーンショット" label="スクリーンショット" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://lab.gpol.co.jp/tsubo/">
        <![CDATA[<p>PHPでもサイトのスクリーンショットを取れるオープンソースがありましたので、試しにやってみました。<br />
  「<strong>wkhtmltoimage</strong>」というソフトです。</p>
<h4>ダウンロード</h4>
<p>こちらからダウンロードできます。（ライセンス：GNU GPL）<br />
  <a href="http://code.google.com/p/wkhtmltopdf/downloads/list" target="_blank">http://code.google.com/p/wkhtmltopdf/downloads/list</a></p>
<h4>動作環境</h4>
<p>一覧を見てみますと、「<strong>Mac OS X</strong>」 「<strong>Windows</strong>」 「<strong>Linux</strong>」で動作するようです。<br />
  今回は、「<strong>Linux</strong>」で試してみます。</p>
<h4>インストール</h4>
<p>「<strong>wkhtmltoimage-0.10.0_rc2-static-i386.tar.bz2</strong>」(執筆時の最新バージョン)をダウンロードし解凍すると、<br />
</p>
<p>  「<strong>wkhtmltoimage-i386</strong>」というファイルが作成されます。</p>
<p><br />
  このファイルを、「<strong>/usr/local/bin/</strong>」に移動、または複製します。<br />
  複製先のファイル名は「<strong>wkhtmltoimage</strong>」に設定します。</p>
<p><br /><img class="mt-image-none" alt="wkhtmltoimage.jpg" src="http://lab.gpol.co.jp/tsubo/%E7%94%BB%E5%83%8F1.jpg" height="104" width="610" /></p>
<p>こんな感じになります。</p>
<h4>実際にやってみた</h4>
<p>では、実際に実行してみましょう！<br />
  実行するコマンドはこちら！<br /></p>
<p><br />
  「<strong>wkhtmltoimage http://www.gpol.co.jp gpol.jpg</strong>」</p>
<p><br /><img class="mt-image-none" alt="wkhtmltoimageexec" src="http://lab.gpol.co.jp/tsubo/%E7%94%BB%E5%83%8F2.jpg" height="142" width="552" /></p>
<p>&nbsp;</p>
<p>成功するとこうなります。<br />
  こんな画像が作られました。</p>
<p>&nbsp;</p>
<p><img class="mt-image-none" alt="wkhtmltoimage_gpol.jpg" src="http://lab.gpol.co.jp/tsubo/gpol.jpg" height="596" width="400" /></p>
<p><br />その他、下記のようにすると画質も設定できます！</p>
<p>「<strong>wkhtmltoimage --quality 50 http://www.gpol.co.jp gpol.jpg</strong>」</p>
<p><br />オープンソースなので、バグが潜んでる可能性もあり、<br />
  <strong>ライセンスはGNU GPL</strong>なので使用する機会は制限されそうですが、こういう技術を知っていると知識の幅が拡がりますね！</p>
<p>&nbsp;</p>
<p>ちなみに、PHPで処理する場合は下記のようにすればOKです！</p>
<p><strong>exec('/usr/local/bin/wkhtmltoimage http://www.gpol.co.jp gpol.jpg');</strong></p>
<p>パスをルートパスで指定するのがミソですね。</p>
<h4>PDFで書きだす</h4>
<p>PDF作成バージョンもありましたので、こちらも同様に試してみました。</p>
<p><br />「<strong>wkhtmltopdf-0.10.0_rc2-static-i386.tar.bz2</strong>」(執筆時の最新バージョン)をダウンロードし解凍。<br />
</p>
<p>「<strong>wkhtmltopdf-i386</strong>」というファイルが作成されます。</p>
<p>&nbsp;</p>
<p>このファイルも同様に、「<strong>/usr/local/bin/</strong>」に移動、または複製します。</p>
<p>複製先のファイル名は「<strong>wkhtmltopdf</strong>」に設定します。</p>
<p>あとは、imageの時と同じようになります。</p>
<p><br />
今度は、実行コマンドが「<strong>wkhtmltoimage</strong>」から「<strong>wkhtmltopdf</strong>」です。</p>
<p><img class="mt-image-none" alt="wkhtmltopdf" src="http://lab.gpol.co.jp/tsubo/%E7%94%BB%E5%83%8F3.jpg" height="110" width="597" /></p>
<p>&nbsp;</p>
<p><img class="mt-image-none" alt="wkhtmltopdf_exec" src="http://lab.gpol.co.jp/tsubo/%E7%94%BB%E5%83%8F4.jpg" height="189" width="568" /></p>
<p><br />
上手く成功できました。<br />
こんな感じのPDFができました。</p>
<p>&nbsp;</p>
<p><img class="mt-image-none" alt="gpol_pdf.jpg" src="http://lab.gpol.co.jp/tsubo/gpol_PDF.jpg" height="842" width="617" /></p>
<p>&nbsp;</p>
<p>PHPで実行する場合も、imageの時と同じです。<br />
  <strong>exec('/usr/local/bin/wkhtmltopdf http://www.gpol.co.jp gpol.pdf');</strong>&nbsp;</p>
<p><br />
普段、こういったオープンソースにはあまり触れる機会はないのですが、<br />たまに触れると楽しいものがありました。&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;(hirohito)</p>
]]>
        
    </content>
</entry>

<entry>
    <title>Adobe Edge のプレビュー版 を使ってみました</title>
    <link rel="alternate" type="text/html" href="http://lab.gpol.co.jp/tsubo/2011/09/adobe-edge.php" />
    <id>tag:lab.gpol.co.jp,2011:/tsubo//9.447</id>

    <published>2011-09-29T15:00:00Z</published>
    <updated>2011-10-06T03:14:49Z</updated>

    <summary> FlashからJavaScriptへ移行する動きが盛んになってきています。 そんな中2011年08月01日、AdobeからHTML5 デザインツール Adob...</summary>
    <author>
        <name>tsubasa</name>
        
    </author>
    
        <category term="Ｗeb システムのツボ" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="adobeedge" label="adobe edge" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="使ってみた" label="使ってみた" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://lab.gpol.co.jp/tsubo/">
        <![CDATA[<img alt="edge_title.jpg" src="http://lab.gpol.co.jp/tsubo/edge_title.jpg" class="mt-image-center" style="text-align: center; display: block; margin: 0pt auto 20px;" width="550" height="199" />
FlashからJavaScriptへ移行する動きが盛んになってきています。<br />
そんな中2011年08月01日、AdobeからHTML5 デザインツール Adobe Edge の<br />
プレビュー版が公開されました。<br />
<br />
今回インストールする環境はWindowsです。<br />
インストールするには、Windows Vista以上が最低限必要になります。<br />
僕自身Flash案件を担当することが多かったのですが、<br />
Adobe Edgeを使用してどのようなものが作れるのかを試してみました。<br />
<br />
<h4>ダウンロード</h4>
<a href="http://labs.adobe.com/downloads/">Adobe Edge Preview版</a><br />
※Adobe Edge Preview版をダウンロードするには、アカウント登録をする必要があります。<br />
<br />
<h4>サンプル</h4>
まず始めに、「Adobe Labs」にサンプルがありますので、どのようなものが出来るかご覧ください。<br /><br />
<h5><strong><a href="http://labs.adobe.com/technologies/edge/resources/gettingjumpy2/Edge_sample_gettingjumpy2.html" target="_blank">1.Getting Jumpy</a></strong></h5>
<a href="http://labs.adobe.com/technologies/edge/resources/gettingjumpy2/Edge_sample_gettingjumpy2.html" target="_blank"><img alt="20110821_sample1.jpg" src="http://lab.gpol.co.jp/tsubo/20110821_sample1.jpg" class="mt-image-none" style="" width="500" height="250" /></a><br />
<br />
<h5><strong><a href="http://labs.adobe.com/technologies/edge/resources/sunshinesailing/Edge_sample_sunshinesailing.html" target="_blank">2.Sunshine and Sailing</a></strong></h5>
<a href="http://labs.adobe.com/technologies/edge/resources/sunshinesailing/Edge_sample_sunshinesailing.html" target="_blank"><img alt="20110821_sample2.jpg" src="http://lab.gpol.co.jp/tsubo/20110821_sample2.jpg" class="mt-image-none" style="" width="496" height="250" /></a><br />
<br />
<h5><strong><a href="http://labs.adobe.com/technologies/edge/resources/ferriswheel/Wheel.html" target="_blank">3.Ferris Wheel and Roller Coaster</a></strong></h5>
<a href="http://labs.adobe.com/technologies/edge/resources/ferriswheel/Wheel.html" target="_blank"><img alt="20110821_sample3.jpg" src="http://lab.gpol.co.jp/tsubo/20110821_sample3.jpg" class="mt-image-none" style="" width="500" height="223" /></a><br />
<br />
<h5><a href="http://labs.adobe.com/technologies/edge/resources/solarsystem/Edge_sample_solarsystem.html" target="_blank">4.Solar System</a></h5>
<a href="http://labs.adobe.com/technologies/edge/resources/solarsystem/Edge_sample_solarsystem.html" target="_blank"><img alt="20110821_sample4.jpg" src="http://lab.gpol.co.jp/tsubo/20110821_sample4.jpg" class="mt-image-none" style="" width="500" height="250" /></a><br />
<br />
<h5><strong><a href="hhttp://labs.adobe.com/technologies/edge/resources/planetearth/Edge_sample_planetEarth.html" target="_blank">5.Planet Earth</a></strong></h5>
<a href="http://labs.adobe.com/technologies/edge/resources/planetearth/Edge_sample_planetEarth.html" target="_blank"><img alt="20110821_sample5.jpg" src="http://lab.gpol.co.jp/tsubo/20110821_sample5.jpg" class="mt-image-none" style="" width="500" height="100" /></a><br />
<br />
<h5><strong><a href="http://labs.adobe.com/technologies/edge/resources/timeclock/Edge_sample_timeclock.html" target="_blank">6.Time Clock</a></strong></h5>
<a href="http://labs.adobe.com/technologies/edge/resources/timeclock/Edge_sample_timeclock.html" target="_blank"><img alt="20110821_sample6.jpg" src="http://lab.gpol.co.jp/tsubo/20110821_sample6.jpg" class="mt-image-none" style="" width="500" height="103" /></a><br />
<br />
どれもパッと見た限りではFlashかJavascriptか見分けがつかない程の出来栄えです。<br />
サンプル版とソースは下記からダウンロードできます。<br />
<a href="http://labs.adobe.com/technologies/edge/resources/">Adobe Edge Preview Sample Files</a><br />
<br />
<br />
<h4>Adobe Edge を使ってみた</h4>
<p>早速プレビュー版をダウンロードして簡単なものを作ってみました。<br />
  今回作るものは、よくあるサイトトップの画像が切り替わるフラッシュと同じものです。<br />
  <br />
<h5>1.起動画面</h5>
  起動するとこのような画面が立ち上がります。<br />
  <img alt="edge_sample1.jpg" src="http://lab.gpol.co.jp/tsubo/edge_sample1.jpg" class="mt-image-none" style="" width="600" height="325" /><br />
  <br />
<h5>2.新しくプロジェクトを作成します</h5>
  普段FlashはFlash CS4で制作を行っていますが、各操作方法は違和感なく使うことが出来ました。<br />
  現在はプレビュー版なので触れるプロパティに限りがありますが、それでも十分いいものが作れそうです。<br />
  <br />
  ・プロパティ<br />
  <img alt="edge_sample3.jpg" src="http://lab.gpol.co.jp/tsubo/edge_sample3.jpg" class="mt-image-none" style="" width="224" height="423" /><br />
  <br />
  ・エレメント<br />
  <img alt="edge_sample4.jpg" src="http://lab.gpol.co.jp/tsubo/edge_sample4.jpg" class="mt-image-none" style="" width="400" height="155" /><br />
  <br />
  ・タイムライン<br />
  <img alt="edge_sample5.jpg" src="http://lab.gpol.co.jp/tsubo/edge_sample5.jpg" class="mt-image-none" style="" width="400" height="238" /><br />
  <br />
  <br />
<h5>3.画像追加</h5>
  今回は画像を切り替えるものを作るので、 [File]=&gt;[Import]から画像をステージに追加します。<br />
  <img alt="edge_sample6.jpg" src="http://lab.gpol.co.jp/tsubo/edge_sample6.jpg" class="mt-image-none" style="" width="382" height="307" /><br />
  <br />
<h5>4.イベント追加</h5>
  一通り画像を配置し終わると、プロパティとタイムラインを操作してイベントを追加していきます。<br />
  イージングも一通り用意されており、細かく設定することが出来ます。<br />
  <img alt="edge_sample7.jpg" src="http://lab.gpol.co.jp/tsubo/edge_sample7.jpg" class="mt-image-none" style="" width="248" height="455" /><br />
  <br />
  <br />
<h5>5.完成</h5>
<p><a href="http://lab.gpol.co.jp/tsubo/edge/sample001/sample01_20110822.html">デモを見てみる</a><br />
  <a href="http://lab.gpol.co.jp/tsubo/edge/sample001/sample01_20110822.html"><img alt="edge_201108221427.jpg" src="http://lab.gpol.co.jp/tsubo/edge_201108221427.jpg" class="mt-image-none" style="" width="500" height="143" /></a><br />
  <br />
  Flashを作るような感覚で、すごく楽に作ることが出来ました。<br />
  書き出したJSファイルも割りと整理されている印象を受けました。<br />
  これらのファイルを直接編集することも十分出来そうです。<br />
  Adobe Edgeの今後の動向に注目です。<br />
  <br />
  ちなみに、HTML5なのでIEをどうするかは悩みどころですね。<br />
  <br />
  (tsubasa)<br />
</p>]]>
        
    </content>
</entry>

<entry>
    <title>Androidの指リストの強度を調べてみた</title>
    <link rel="alternate" type="text/html" href="http://lab.gpol.co.jp/tsubo/2011/09/android.php" />
    <id>tag:lab.gpol.co.jp,2011:/tsubo//9.444</id>

    <published>2011-09-15T15:00:00Z</published>
    <updated>2011-08-31T10:37:23Z</updated>

    <summary>日本でもAndroidがiPhoneのシェアを抜いたらしいですが、確かに最近、Androidのスマートフォンをもってる人が増えてきましたね。僕もケータイをAnd...</summary>
    <author>
        <name>teruhisa</name>
        
    </author>
    
        <category term="システムニュース" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="android" label="Android" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="パスワード" label="パスワード" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://lab.gpol.co.jp/tsubo/">
        <![CDATA[日本でもAndroidがiPhoneのシェアを抜いたらしいですが、確かに最近、Androidのスマートフォンをもってる人が増えてきましたね。<br />僕もケータイをAndroidに変更したのですが、「指リスト」というフリックで入力するタイプのパスワード方式が気になったので、すこし調べてみました。<br /><br /><img alt="chart.jpg" src="http://lab.gpol.co.jp/tsubo/chart.jpg" class="mt-image-none" style="" height="213" width="415" /><br /><br />左がよくある従来の暗証番号方式で「ロックNo」といいます。右がフリックで入力する「指リスト」です。<br />◎の部分のポイントをつなげてできる一筆書きのような軌跡パターンがパスワードになります。<br /><br />「お、かっこいい」と思って、使っているのですが、よく考えるとちょっと気になる点がでてきました。<br /><br />まず、重複したポイントが選べません。<br />最初に選べる選択肢は９種ですが、次に選べる選択肢は８種、その次は７種というふうにどんどん減ります。<br /><br />さらに、場所によっては次に選択できないポイントがあります。<br />例えば中心ポイントから始めた場合は、次に全ポイントを選ぶことができますが、左上ポイントから始めた場合は、次に右上・左下・右下のポイントは途中のポイントが邪魔になり選べません。<br />※途中のポイントがすでに選択されている場合は選べます。<br /><br />「これって結構、選択肢がすくないんじゃないの？」と思って調べてみました。<br />とり合えず、書き出すとこんな感じです。（２手目まで）<br /><br /><img alt="pass.png" src="http://lab.gpol.co.jp/tsubo/pass.png" class="mt-image-none" style="" height="460" width="257" /><br /><br /><br />予想以上に数があったので、自力計算は断念してあとはプログラムに任せようと思います。<br />プログラムはPHPで書いてみました。→ <a href="http://lab.gpol.co.jp/tsubo/html.zip">パスワード数をカウントするプログラム</a><br /><br />うまく動けば、389,112 という数字が表示されると思います。<br />これが指リストで使えるパスワードの総数です（４桁未満のものはパスワードとして使えないため省いています）。<br /><br />これをグラフにしたものが下です。<br />比較のために従来の暗証番号方式を並べてみました。<br />※横軸はパスワードの桁数、縦軸は対数になっています<br /><br /><img alt="WS000062.JPG" src="http://lab.gpol.co.jp/tsubo/WS000062.JPG" class="mt-image-none" style="" height="273" width="585" /><br /><br />グラフから指リスト５桁と番号方式４桁はほぼ同じレベル、ここからどんどん差が広がって、指リスト９桁にしても番号方式６桁より弱いことが分かります。<br />パスワードの強度を気にするのなら暗証番号方式が安心です。<br /><br />（teruhisa） <br /><div><br /></div><div><br /></div><div><br /></div><div><br /></div><div><br /></div>]]>
        <![CDATA[<br />]]>
    </content>
</entry>

<entry>
    <title>【AS3】物理エンジン「APE」と「Box2D」の比較</title>
    <link rel="alternate" type="text/html" href="http://lab.gpol.co.jp/tsubo/2011/09/as3apebox2d.php" />
    <id>tag:lab.gpol.co.jp,2011:/tsubo//9.418</id>

    <published>2011-09-01T15:00:00Z</published>
    <updated>2011-11-15T04:05:16Z</updated>

    <summary>ActionScript3で使える2D物理エンジンについて紹介します。物理エンジンとは、物体の動きをシミュレーションするためのソフトウェアで、ASでは主にライブ...</summary>
    <author>
        <name>kenta</name>
        
    </author>
    
        <category term="開発日誌" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="actionscript3" label="ActionScript3" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ape" label="APE" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="box2d" label="Box2D" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="flash" label="Flash" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="物理エンジン" label="物理エンジン" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://lab.gpol.co.jp/tsubo/">
        <![CDATA[ActionScript3で使える2D物理エンジンについて紹介します。<br />物理エンジンとは、物体の動きをシミュレーションするためのソフトウェアで、ASでは主にライブラリとして提供されています。<br /><br />中でも有名な2つの物理エンジンライブラリ、「APE」と「Box2D」について同様のサンプルを作成し、<br />簡単に比較をしてみたいと思います。<br /><br />サンプルの仕様は、四角の図形と円をジョイントでつなぎ、円の部分でドラッグができる<br />というものにします。<br /><br /><a href="http://lab.gpol.co.jp/tsubo/PhysicsEngine_sample.zip">サンプルflaファイルはこちら</a><br />


<div class="swf_object">■APE<br /><script type="text/javascript">var inject_swf_object='<object data="http://lab.gpol.co.jp/tsubo/201104_APE.swf" width="400" height="300" type="application/x-shockwave-flash"><param name="movie" value="http://lab.gpol.co.jp/tsubo/201104_APE.swf"><param name="wmode" value="opaque"></object>';document.write(inject_swf_object);</script></div>
<br />
<div class="swf_object">■Box2D<br /><script type="text/javascript">var inject_swf_object='<object data="http://lab.gpol.co.jp/tsubo/201104_BOX2D.swf" width="400" height="300" type="application/x-shockwave-flash"><param name="movie" value="http://lab.gpol.co.jp/tsubo/201104_BOX2D.swf"><param name="wmode" value="opaque"></object>';document.write(inject_swf_object);</script></div> 

<br /><br /><br />ライブラリはそれぞれ以下のリンク先からダウンロードできます。<br />＜APE＞<br /><a href="http://www.cove.org/ape/">http://www.cove.org/ape/</a><br /><br />＜Box2D＞<br /><a href="http://sourceforge.net/projects/box2dflash/">http://sourceforge.net/projects/box2dflash/</a><br />※AS3用のライブラリは、正しくは「Box2DFlashAS3」なので、注意してください。<br /><br /><br />では、いくつかの項目に基づいて、比較をしていきます。<br />ぜひサンプルコードと照らし合わせながら、読んでいただければと思います。<br /><br />]]>
        <![CDATA[<br />
<h4>物理エンジンのセットアップ</h4><br />
&nbsp;&nbsp;&nbsp; 物理エンジンは、Flash内に空間を定義し、その中で物理演算をするようにしています。<br />
&nbsp;&nbsp;&nbsp; APEは「コンテナ」、Box2Dは「ワールド」という名前で定義しているようです。<br />
<br />
&nbsp;&nbsp;&nbsp; APEは物体の位置などをピクセルで計測しますが、Box2Dは「メートル」で計測します。<br />
<br />
&nbsp;&nbsp;&nbsp; その他、重力などの項目を設定します。<br />
&nbsp;&nbsp;&nbsp; (APEでは、APEngine.addForceメソッド、 Box2Dでは、b2Worldコンストラクタで設定します)<br />
<br />
&nbsp;&nbsp;&nbsp; 設定する項目自体に大きな違いはありませんが、<br />
&nbsp;&nbsp;&nbsp; Box2Dは単位がピクセルではなくメートルで計測する点が特徴的です。<br />
<br />
<h4>オブジェクトの配置</h4><br />
&nbsp;&nbsp;&nbsp; 矩形や円、多角形などの図形オブジェクトを生成します。<br />
<br />
&nbsp; <b>●APE</b><br />
&nbsp;&nbsp;&nbsp; 図形の形に応じたクラスのコンストラクタで設定、コンテナに配置します。<br />
<br />
&nbsp;&nbsp;&nbsp; 例えば、<br />
&nbsp;&nbsp;&nbsp; 　四角＝RectangleParticleコンストラクタ&nbsp;&nbsp;&nbsp; <br />
&nbsp;&nbsp;&nbsp; 　　設定する項目：X, Y, 幅, 高さ, 回転, 位置の固定(物体が動くか動かないか), 質量, 弾力, 摩擦<br />
&nbsp;&nbsp;&nbsp; 　円＝CircleParticleコンストラクタ<br />
&nbsp;&nbsp;&nbsp; 　　設定する項目：X, Y, 半径, 位置の固定, 質量, 弾力, 摩擦<br />
&nbsp;&nbsp;&nbsp; GroupクラスのaddParticleメソッドに生成した図形をセットし、<br />
&nbsp;&nbsp;&nbsp; APEngineクラスのaddGroupメソッドにそのGroupをセットすることで、ステージ上に生成します。<br />
&nbsp;&nbsp;&nbsp; ※APEでは、「グループ」という概念があり、グループ内のオブジェクト同士が、衝突するかしないかを設定します。<br />
<br />
&nbsp; <b>○Box2D</b><br />
&nbsp;&nbsp;&nbsp; いくつかのクラスを使い、位置・図形のサイズ等・描画の手順で生成します。<br />
&nbsp;&nbsp;&nbsp; ・位置を設定＝b2BodyDefクラス<br />
&nbsp;&nbsp;&nbsp; 　例）b2BodyDefクラス.position.Set(x,y)&nbsp;&nbsp;&nbsp; ※単位はｍ<br />
&nbsp;&nbsp;&nbsp; ・図形の形・サイズなど設定＝b2PolygonDefクラス(四角), b2CircleDefクラス(円)<br />
&nbsp;&nbsp;&nbsp; 　例）b2PolygonDefクラス.SetAsBox(w, h)<br />
&nbsp;&nbsp;&nbsp; 　　　 b2CircleDefクラス.radius = radius<br />
&nbsp;&nbsp;&nbsp; 　　　 また、密度や反発係数なども設定できます。<br />
&nbsp;&nbsp;&nbsp; ・図形を描画＝b2Bodyクラス<br />
&nbsp;&nbsp;&nbsp; 例）b2Worldクラス.CreateDynamicBody(b2BodyDefクラス)&nbsp;&nbsp;&nbsp; //動く<br />
&nbsp;&nbsp;&nbsp; 　　 b2Worldクラス.CreateStaticBody(b2BodyDefクラス)&nbsp;&nbsp;&nbsp; //動かない　　&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 　<br />
&nbsp;&nbsp;&nbsp; ・最後に、b2Body.CreateShapeメソッドで、ワールドに配置します。<br />
<br />
&nbsp;&nbsp;&nbsp; オブジェクトの生成方法だけでも、かなりの違いがあることがわかります。<br />
&nbsp;&nbsp;&nbsp; APEはクラス1つで図形を定義しますが、Box2Dは複数のクラスを使って図形を定義しています。<br />
<br />
<h4>ジョイント</h4><br />
&nbsp;&nbsp;&nbsp; 物体と物体をつなぐ、ジョイントを生成できます。<br />
&nbsp;&nbsp;&nbsp; (上記のサンプルで、円と四角をつないでいる線をさします)<br />
<br />
&nbsp; <b>●APE</b><br />
&nbsp;&nbsp;&nbsp; SpringConstraintクラスを使います。<br />
&nbsp;&nbsp;&nbsp; 　　SpringConstraintクラスのコンストラクタで、つなぐ物体Aと物体B、ジョイントの強さ(低いとバネのように跳ね返り、高いと跳ねません)を設定。<br />
&nbsp;&nbsp;&nbsp; 　　それをGroup.addConstraintメソッドで生成します。<br />
&nbsp;&nbsp;&nbsp; 　　全てのジョイントを、このクラスで生成します。<br />
　<br />
&nbsp; <b>○Box2D</b><br />
&nbsp;&nbsp;&nbsp; 　多彩な種類のジョイントが用意されています。<br />
&nbsp;&nbsp;&nbsp; 　物体の距離を一定に保つジョイント、ピストンのような動きをするジョイント、<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 関節のような働きをするジョイントなどがあります。<br />
<br />
<br />
<h4>マウス</h4><br />
&nbsp;&nbsp;&nbsp; たとえば、物体をドラッグする処理を例に比較します。<br />
　<br />
&nbsp; <b>●APE</b><br />
&nbsp;&nbsp;&nbsp; 　APEにはマウス操作の機能が用意されていないため、ある程度自作する必要があります。<br />
&nbsp;&nbsp;&nbsp; 　パーティクルにspriteプロパティがあり、それを介してイベントリスナの設定、<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 移動後の座標など設定する必要があります。<br />
&nbsp;&nbsp;&nbsp; 　※サンプルは動作が少しおかしいです...すみません。<br />
　<br />
&nbsp; <b>○Box2D</b><br />
&nbsp;&nbsp;&nbsp; 　b2MouseJointDefクラスを使うことで、簡単に実現できます。<br />
&nbsp;&nbsp;&nbsp; 　先ほど説明したジョイントの、マウスと物体をつなぐものと考えてください。<br />
<br />
&nbsp;&nbsp;&nbsp; 　マウス操作を作りたい場合、Box2Dの方がずっと楽に作ることができます。<br />
<br />
<h4>ライセンス</h4><br />
&nbsp; <b>●APE</b><br />
&nbsp;&nbsp;&nbsp; 　<a href="http://sourceforge.jp/projects/opensource/wiki/licenses%2FMIT_license">MITライセンス</a>です。<br />
　<br />
&nbsp; <b>○Box2D</b><br />
&nbsp;&nbsp;&nbsp; 　<a href="http://sourceforge.jp/projects/opensource/wiki/licenses%2Fzlib_libpng_license">zlib/libpngライセンス</a>です。<br />
&nbsp;&nbsp;&nbsp; 　商用を含め、任意の目的で利用、改変・再頒布できるライセンスです。<br />
&nbsp;&nbsp;&nbsp; 　改変した場合、明示が必要です。<br />
<br />
<br />
まとめると...<br />
機能としては、Box2Dの方が使いやすいところはありますが、<br />
C言語から移植されているためか、書式がやや特殊でわかりづらい方も多いかもしれません。<br />
APEの方がややすっきり収まる感じもしますので、そのあたりは個々人のお好み、ということになりそうです。<br />
<br />
（ただ、Box2Dにはより表記を簡略化したQuickBox2Dというライブラリが存在します。<br />
　こちらも機会があれば、紹介してみたいと思います。）<br />
<br />
(kenta)<br />
<br />
 <div><br />
</div>]]>
    </content>
</entry>

<entry>
    <title>郵便番号APIを使った住所自動入力フォーム</title>
    <link rel="alternate" type="text/html" href="http://lab.gpol.co.jp/tsubo/2011/08/api2.php" />
    <id>tag:lab.gpol.co.jp,2011:/tsubo//9.421</id>

    <published>2011-08-18T15:00:00Z</published>
    <updated>2011-11-15T04:30:34Z</updated>

    <summary>今回は実際に郵便番号検索APIを使ったサンプルソースをご紹介します。使用する言語はPHPです。 メールフォーム等でよく使う、郵便番号から住所を自動入力してくれる...</summary>
    <author>
        <name>kozo</name>
        
    </author>
    
        <category term="オープンソース紹介" scheme="http://www.sixapart.com/ns/types#category" />
    
        <category term="Ｗeb システムのツボ" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="api" label="API" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="php" label="php" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="郵便番号" label="郵便番号" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://lab.gpol.co.jp/tsubo/">
        <![CDATA[今回は実際に郵便番号検索APIを使ったサンプルソースをご紹介します。使用する言語はPHPです。<br />
メールフォーム等でよく使う、郵便番号から住所を自動入力してくれるように組んでいきます。<br />

今回作成したソースはダウンロードできます。<br /><br />

<strong>ダウンロード：</strong><a href="http://lab.gpol.co.jp/tsubo/sample.zip">sample.zip</a><br /><br />

下記に、メイン関数の処理を記述します。

<pre class='brush: js'>
function main(){

	// 初期処理
	$inputData = getData();

	// 検索ボタン押された場合
	if(isset($inputData['search'])){

		//入力情報GET
		$inputData = getData();

		//入力内容チェック
		$error = check ($inputData);

		if ($error['flg']){
			//エラー表示
			disp($inputData,$error);
			return;
		}

		//郵便番号APIのURLを設定
	  	$url = 'http://zip.cgis.biz/xml/zip.php?zn='.$inputData['zipnum1'].$inputData['zipnum2'];

	    //郵便番号APIから入力された郵便番号の情報を取得
	    $xmlData  =file_get_contents($url);
	    $xmlParser = xml_parser_create();
	    xml_parse_into_struct($xmlParser,$xmlData,$addressData);
	    xml_parser_free($xmlParser);

	    //取得データをセット
	    $setData = setData($addressData,$inputData);

	    //セットされたデータをチェック
	    $error = check($setData);

		if ($error['flg']){
			//エラー表示
			disp($setData,$error);
			return;
		}

		disp($setData);
	}else{
		disp($inputData);
	}

}
</pre>

<strong>【ブラウザ表示】</strong><br />
<img alt="API2.jpg" src="http://lab.gpol.co.jp/tsubo/API2.jpg" width="483" height="322" class="mt-image-none"  />
<br />
<br />

使用方法を説明させて頂きます。<br />
入力項目の住所検索ボタンを押すと郵便番号APIを呼び出し、<br />
取得したxmlファイルのデータを各入力項目に代入させています。<br />
ブラウザ表示の処理はdisp関数で行っております。<br />
disp関数の引数は郵便番号APIから取得したデータの配列で、htmlを生成させて表示しています。<br />
また、郵便番号APIを使用する際の規約について、<br />
画面のどこかにリンクを貼り付けることになっていますので、<br />
今回は画面の下方に「利用しているAPI　郵便番号API」と表示させています。<br /><br />

郵便番号APIを呼び出す時は以下のようにしています。<br />

<pre class='brush: js'>

//郵便番号APIのURLを設定
$url = &quot;http://zip.cgis.biz/xml/zip.php?zn=&quot;.$inputData[&quot;zipnum1&quot;].$inputData[&quot;zipnum2&quot;];
//郵便番号APIから入力された郵便番号の情報を取得
$xmlData  =file_get_contents($url);

</pre>

変数の「$inputData[&quot;zipnum1&quot;]」や「$inputData[&quot;zipnum2&quot;]」においては、getData関数で指定していります。<br />

getData関数ではサーバーにpostで送信した郵便番号と各入力項目を配列で設定しています。<br />
getData関数の配列のキーは以下の通りです。
<br />
<br />
設定フラグ：flg<br />
郵便番号1：zipnum1<br />
郵便番号2：zipnum2<br />
都道府県：state<br />
都道府県カナ：state_kana<br />
市区町村：city<br />
市区町村カナ：city_kana<br />
住所：address<br />
住所カナ：address_kana<br />
番地：company<br />
番地カナ：company_kana<br />
<br />
取得したxmlファイルのデータを配列に置き換えている処理は以下のソースで処理しています。
<br />
<pre class='brush: js'>
	    $xmlParser = xml_parser_create();
	    xml_parse_into_struct($xmlParser,$xmlData,$addressData);
	    xml_parser_free($xmlParser);
	    //取得データをセット
	    $setData = setData($addressData);
</pre>
上記のsetData関数で取得したxmlファイルを各データに配列でセットしています。<br />
入力された郵便番号のデータがない場合、setData関数で設定フラグを「false」にし、check関数でエラーを表示するように設定しています。<br />

郵便番号setData関数の内訳は以下の通りになります。
<br />
<br />
設定フラグ：flg<br />
郵便番号1：zipnum1<br />
郵便番号2：zipnum2<br />
都道府県：state<br />
都道府県カナ：state_kana<br />
市区町村：city<br />
市区町村カナ：city_kana<br />
住所：address<br />
住所カナ：address_kana<br />
番地：company<br />
番地カナ：company_kana<br />
<br />

check関数では、以下のチェック処理をしております。
<br />
<br />
データの有無：入力された郵便番号のデータチェック<br />
郵便番号1：郵便番号桁数チェック(3桁)+数字チェック<br />
郵便番号2：郵便番号桁数チェック(4桁)+数字チェック<br />
<br />
上記チェック処理に当てはまった場合はエラーメッセージを表示するようにしております。<br />
ダウンロードして頂いて、試しに使っていただいたら非常に嬉しい限りです。<br /><br />


<strong>参照URL</strong><br />
郵便番号API：<a href="http://zip.cgis.biz/">郵便番号APIのページへ</a><br />
XML処理：<a href="http://www.axiatech.jp/item/83/catid/2">WEBシステム開発の情報サイト</a><br />

<br /><br />
(kozo)

]]>
        
    </content>
</entry>

<entry>
    <title>PHPでmt_randを使用して乱数を作ってみる</title>
    <link rel="alternate" type="text/html" href="http://lab.gpol.co.jp/tsubo/2011/08/phpmt-rand.php" />
    <id>tag:lab.gpol.co.jp,2011:/tsubo//9.422</id>

    <published>2011-08-04T15:00:00Z</published>
    <updated>2011-08-05T11:10:07Z</updated>

    <summary>PHPで乱数を生成するときに、mt_rand()関数で乱数を作る場面があると思いますが、 連続で同じ数字が出てきて何か嫌だ！ でも綺麗に乱数が生成されてるから、...</summary>
    <author>
        <name>hirohito</name>
        
    </author>
    
        <category term="開発日誌" scheme="http://www.sixapart.com/ns/types#category" />
    
    <category term="php" label="PHP" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="ランダム" label="ランダム" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="重複" label="重複" scheme="http://www.sixapart.com/ns/types#tag" />
    <category term="乱数" label="乱数" scheme="http://www.sixapart.com/ns/types#tag" />
    
    <content type="html" xml:lang="ja" xml:base="http://lab.gpol.co.jp/tsubo/">
        <![CDATA[<p>PHPで乱数を生成するときに、mt_rand()関数で乱数を作る場面があると思いますが、</p>
<p>連続で同じ数字が出てきて何か嫌だ！</p>
<p>でも綺麗に乱数が生成されてるから、まっいっか！</p>
<p>って事はないでしょうか？</p>
<p>筆者はたまに思ったりします！<br /><br />しかし、乱数生成時に同じ数字の重複は避けたい！っていう場面が出てくると思います。</p>
<p>そこで、かんたんに同じ数字が重複しない乱数の生成方法を紹介したいと思います。</p>
<br />
まず単純に0から9の数字で10桁の乱数を作るスクリプトです。 
<br /><br />
<div style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; PADDING-LEFT: 10px; BORDER-LEFT: gray 1px solid; WIDTH: 600px; BORDER-BOTTOM: gray 1px solid"><pre>for($i = 0; $i &lt; 10; ++$i){
	$num = mt_rand(0,9);
	$ransu .= $num;	
}

<strong>結果：9838260512</strong>
</pre></div>
<p>&nbsp;</p>
<p>8と2が重複してしまいました。</p>
<br />
<p>下記の様にすると、同じ数字が重複しない乱数の生成ができます。</p>
<br>
<div style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; PADDING-LEFT: 10px; BORDER-LEFT: gray 1px solid; WIDTH: 600px; BORDER-BOTTOM: gray 1px solid"><pre>$suji = '0123456789';
for ($i = 0; $i &lt; 10; ++$i) {
	$len = mb_strlen($suji);
	$j = mt_rand(0,$len-1);
	$num = $suji[$j];
	$ransu .= $num;
	<span style="COLOR: rgb(0,128,0)">//1度で出た数字は対象外にする</span>
	<span style="COLOR: rgb(245,0,0)">$suji = str_replace($num,"",$suji);</span>
}

<strong>結果：5673108942</strong>
</pre></div>
<p>&nbsp;</p>
<p>&nbsp;1つも同じ重複する数字がでてこないですね(b^-゜)</p>
<br />
<p>ポイントは1度出た数字は次のループでは使わない。<br />という所です。</p>
<p>この考えを元に上手く利用すれば、精度の高いランダム処理が実現できると思います。</p>
<br />
<p>例えば複数のバナー画像をランダム表示させる仕組みで、
<br />
偏りなく全ての画像を平均的になるように表示したい場合、</p>
<br />
<p>1度表示した画像は、他の画像が表示されるまで表示させない！</p>
<p>という方法をとれば実現できると思います。</p>
<br />

ちなみに、同じ数字を使用しない乱数を生成したい場合は、
「shuffle」関数でも実現が可能です。

<div style="BORDER-RIGHT: gray 1px solid; BORDER-TOP: gray 1px solid; PADDING-LEFT: 10px; BORDER-LEFT: gray 1px solid; WIDTH: 600px; BORDER-BOTTOM: gray 1px solid"><pre>
$array = range(0,9);
shuffle($array);

<strong>結果：4093752186</strong>

</pre>
</div>
こちらの方がお手軽ですね。
<br />
<p>この記事がみなさんの制作するプログラミングのヒントにでもなれば幸いです。</p><br /><br />

(hirohito)]]>
        
    </content>
</entry>

</feed>

