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

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

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

１．Macを用意する

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

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

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

２．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のカートで購入
・送信されたメールにある、アクティベーションコードから、デベロッパプログラムを有効にする

３．Xcodeをダウンロードする

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

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

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




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




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


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


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


(kenta)

「htmlファイルで外部ファイルやPHPファイルを読み込みたい！」

という時はSSIを利用すれば簡単に実現できます。
今回はその方法を紹介したいと思います。

ただし、セキュリティの問題がありますので、
実案件で使用する際には、リスクを説明した上でお客様に確認をとってください。
更に、サーバーでSSIが使用できるかのチェックも忘れずに！

以上の事を注意してSSIを行ってみましょう。

ApacheでSSIを使えるようにする

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

Options +Includes
AddHandler server-parsed html

1行目がSSIを使えるようにする記述、
2行目は拡張子がhtmlのファイルにSSIを有効にする記述です。

上記の記述を行い、SSIを有効にしたい一番上の階層のディレクトリに
「.htaccess」ファイルをアップロードします。

execを有効にしない場合

上記の設定ですと、「exec」のプログラム実行も有効となります。
SSIを利用する目的が、 「execを使用してCGIプログラムを呼び出さない」
「ヘッダやフッタのhtmlを読み込むだけでOK！」 というような場合は、1行目を下記に書き換えます。

Options +IncludesNOEXEC

NOEXECをつける事によって、「exec」の機能を省くことができます。

拡張子がshtmlのファイルのみSSIを有効にしたい場合

2行目を下記の記述に変更して下さい。

AddHandler server-parsed shtml

これで、shtmlの拡張子ファイルのみSSIが有効になり、 htmlの拡張子ファイルではSSIが無効となります。

htmlファイルにコードを記述

次に外部ファイルを読み込むコードを記述します。
Googleなどで検索してみると、だいたい下記の方法がヒットすると思います。

<!--#include file="Include.html" -->
<!--#include virtual="../include/Include.html" -->

この「file=""」と「virtual=""」の違いは、
読み込むファイルのディレクトリ場所によって記述方法が変わります。

「file」は、 上層のディレクトリにあるファイルは読み込めません。

<!--#include file="../file/oooo.html" -->

これだとエラーになります。 下記のように、同ディレクトリやサブフォルダにある場合はOKです。

<!--#include file="oooo.html" -->
<!--#include file="file/oooo.html" -->

反対に、「virtual=""」の場合は、
別のディレクトリ指定でも、サーバの絶対パスでも指定が可能です。 下記の様な記述でもOKです。

<!--#include virtual="../file/oooo.html" -->
<!--#include virtual="/file/oooo.html" -->

上記の記述を外部ファイルを読み込みたい箇所に書いておくと、
外部ファイルの中身と置き換わります。
後はブラウザで確認し、上手く動作していればSSIの実装完了です！

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


(hirohito)

スマートフォンの普及により、PC、モバイル、スマートフォンと3種類のサイトを作成する案件が増えてきました。
そこで、htaccessを使用して各サイトへ振り分けする方法をご紹介します。

例では、
/    　・・・ドキュメントルートをPCサイト
/mb/ ・・・モバイルサイト
/sm/ ・・・スマートフォンサイト
とします。

振り分けの流れは、このようになります。

<モバイルサイトにアクセスがあった場合>
1.スマートフォンでアクセスがあると、「mb」フォルダパスを「sm」に置き換える
2.モバイル以外からアクセスがある（PCからアクセスがある）と、「mb」フォルダパスを削除

<スマートフォンサイトにアクセスがあった場合>
3.モバイルからアクセスがあると、「sm」フォルダパスを「mb」に置き換える
4.スマホとモバイル以外からアクセスがある（PCからアクセスがある）と、「mb」フォルダパスを削除

<PCサイトにアクセスがあった場合>
5.モバイルからアクセスがあると、「mb」フォルダパスを付与する
6.スマートフォンからアクセスがあると、「sm」フォルダパスを付与する


<htaccessの記述>

RewriteEngine On
RewriteBase / # 1.No enter except MOBILE(SMART)
RewriteCond %{REQUEST_URI} ^/mb/
RewriteCond %{HTTP_USER_AGENT} ^.*(iPhone|iPod|Android).*$
RewriteRule ^mb(.*)$ sm$1 [R]
# 2.No enter except MOBILE(PC)
RewriteCond %{REQUEST_URI} ^/mb/
RewriteCond %{HTTP_USER_AGENT} !^(DoCoMo|J-PHONE|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank).*$
RewriteRule ^mb(.*)$ $1 [R]
# 3.No enter except SMART(MOBILE)
RewriteCond %{REQUEST_URI} ^/sm/
RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|J-PHONE|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank).*$
RewriteRule ^sm(.*)$ mb$1 [R]
# 4.No enter except SMART(PC)
RewriteCond %{REQUEST_URI} ^/sm/
RewriteCond %{HTTP_USER_AGENT} !^(DoCoMo|J-PHONE|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank|.*iPhone|.*iPod|.*Android).*$
RewriteRule ^sm(.*)$ $1 [R]
# 5.No enter except PC(MOBILE)
RewriteCond %{REQUEST_URI} !^/mb/
RewriteCond %{REQUEST_URI} !^/sm/
RewriteCond %{HTTP_USER_AGENT} ^(DoCoMo|J-PHONE|KDDI|DDIPOKET|UP\.Browser|J-PHONE|Vodafone|SoftBank).*$
RewriteRule ^(.*)$ mb/$1 [R]
# 6.No enter except PC(SMART)
RewriteCond %{REQUEST_URI} !^/mb/
RewriteCond %{REQUEST_URI} !^/sm/
RewriteCond %{HTTP_USER_AGENT} ^.*(iPhone|iPod|Android).*$
RewriteRule ^(.*)$ sm/$1 [R]

一度振り分け方法を知っておけば後は使い回しが出来ますね。
ちなみに、過去の案件で会員登録をPC、モバイル、スマートフォンの３種類で出来るページを作成しましたが、
頻繁に使用されているのは、PC > スマートフォン > モバイル だったそうです。
やはり、モバイルサイトでの登録はかなり根気が要りますね。


(tsubasa)

最近はスマートフォン開発なども盛んですが、まだまだPHPを使うことも多いのでしっかりした知識を身につけようと「Zend PHP 5.3 Certification」を受験してきました。

詳細はZend PHP Certification 受験体験記に詳しくのってますが、5.3にバージョンが上がってるので、それを中心に資格取得のポイントをまとめます。
※試験は2011年9月に受けました。現在、内容が変わっているかもしれませんがご了承ください。

試験について

・問題は英語
このバージョンでは日本語版がまだ無いため、テストの説明から問題、解答にいたるまですべて英語です。

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

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

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

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

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

アプリケーションの種類

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

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

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

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

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

開発フロー

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

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

↓

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

↓

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

↓

（４）公開
・AppStoreに公開される
・必要に応じてバージョンアップする

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


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


今回は開発を始める前に、ごく基本的な前提知識についてご紹介いたしました。
次回以降、実際にどのようにアプリを作っていくのかご紹介していきたいと思います。

※参考までに...
Appleは開発者向けに豊富なドキュメントを提供しています。
以下の３つは「まず読むもの」として位置づけられており、基本的な情報が詰まっていますので
これから開発をはじめる方は一読されることをおすすめいたします。

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)

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

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

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

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

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

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

[ファイル] > [新規] > [Ａｎｄｒｏｉｄプロジェクト]を実行

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

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

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

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

Facebookにアプリを登録します。 アプリ登録ページからアプリを登録します。

1 Create New App選択

2 App名登録

3 必要情報を登録(特にデフォルトで何も変更しなくてもよいです。APPIDを控えておく）

(5)ソースの組込

1 AndroidManifest.xmlに次のソースを組みこむ

の前に下記ソースを組みこむ

＜uses-permission android:name="android.permission.INTERNET"＞＜/uses-permission＞

2 FacebookのアプリにKey Hashを記入する

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

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

        keytool -exportcert -alias androiddebugkey -keystore "上記のデバッグキーハッシュパス" | openssl sha1 -binary | openssl base64
        

・パスワードを聞かれるので「android」と入力
→Key Hashが返されます。 ●（4）で登録したアプリのキーハッシュを登録

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)

PHPでもサイトのスクリーンショットを取れるオープンソースがありましたので、試しにやってみました。
「wkhtmltoimage」というソフトです。

ダウンロード

こちらからダウンロードできます。（ライセンス：GNU GPL）
http://code.google.com/p/wkhtmltopdf/downloads/list

動作環境

一覧を見てみますと、「Mac OS X」 「Windows」 「Linux」で動作するようです。
今回は、「Linux」で試してみます。

インストール

「wkhtmltoimage-0.10.0_rc2-static-i386.tar.bz2」(執筆時の最新バージョン)をダウンロードし解凍すると、

「wkhtmltoimage-i386」というファイルが作成されます。

このファイルを、「/usr/local/bin/」に移動、または複製します。
複製先のファイル名は「wkhtmltoimage」に設定します。

こんな感じになります。

実際にやってみた

では、実際に実行してみましょう！
実行するコマンドはこちら！

「wkhtmltoimage http://www.gpol.co.jp gpol.jpg」

 

成功するとこうなります。
こんな画像が作られました。

 

その他、下記のようにすると画質も設定できます！

「wkhtmltoimage --quality 50 http://www.gpol.co.jp gpol.jpg」

オープンソースなので、バグが潜んでる可能性もあり、
ライセンスはGNU GPLなので使用する機会は制限されそうですが、こういう技術を知っていると知識の幅が拡がりますね！

 

ちなみに、PHPで処理する場合は下記のようにすればOKです！

exec('/usr/local/bin/wkhtmltoimage http://www.gpol.co.jp gpol.jpg');

パスをルートパスで指定するのがミソですね。

PDFで書きだす

PDF作成バージョンもありましたので、こちらも同様に試してみました。

「wkhtmltopdf-0.10.0_rc2-static-i386.tar.bz2」(執筆時の最新バージョン)をダウンロードし解凍。

「wkhtmltopdf-i386」というファイルが作成されます。

 

このファイルも同様に、「/usr/local/bin/」に移動、または複製します。

複製先のファイル名は「wkhtmltopdf」に設定します。

あとは、imageの時と同じようになります。

今度は、実行コマンドが「wkhtmltoimage」から「wkhtmltopdf」です。

 

上手く成功できました。
こんな感じのPDFができました。

 

 

PHPで実行する場合も、imageの時と同じです。
exec('/usr/local/bin/wkhtmltopdf http://www.gpol.co.jp gpol.pdf'); 

普段、こういったオープンソースにはあまり触れる機会はないのですが、
たまに触れると楽しいものがありました。 

 

 (hirohito)

FlashからJavaScriptへ移行する動きが盛んになってきています。
そんな中2011年08月01日、AdobeからHTML5 デザインツール Adobe Edge の
プレビュー版が公開されました。

今回インストールする環境はWindowsです。
インストールするには、Windows Vista以上が最低限必要になります。
僕自身Flash案件を担当することが多かったのですが、
Adobe Edgeを使用してどのようなものが作れるのかを試してみました。

ダウンロード

Adobe Edge Preview版
※Adobe Edge Preview版をダウンロードするには、アカウント登録をする必要があります。

サンプル

まず始めに、「Adobe Labs」にサンプルがありますので、どのようなものが出来るかご覧ください。

1.Getting Jumpy

2.Sunshine and Sailing

3.Ferris Wheel and Roller Coaster

4.Solar System

5.Planet Earth

6.Time Clock

どれもパッと見た限りではFlashかJavascriptか見分けがつかない程の出来栄えです。
サンプル版とソースは下記からダウンロードできます。
Adobe Edge Preview Sample Files

Adobe Edge を使ってみた

早速プレビュー版をダウンロードして簡単なものを作ってみました。
今回作るものは、よくあるサイトトップの画像が切り替わるフラッシュと同じものです。

1.起動画面

起動するとこのような画面が立ち上がります。

2.新しくプロジェクトを作成します

普段FlashはFlash CS4で制作を行っていますが、各操作方法は違和感なく使うことが出来ました。
現在はプレビュー版なので触れるプロパティに限りがありますが、それでも十分いいものが作れそうです。

・プロパティ


・エレメント


・タイムライン

3.画像追加

今回は画像を切り替えるものを作るので、 [File]=>[Import]から画像をステージに追加します。

4.イベント追加

一通り画像を配置し終わると、プロパティとタイムラインを操作してイベントを追加していきます。
イージングも一通り用意されており、細かく設定することが出来ます。

5.完成

デモを見てみる


Flashを作るような感覚で、すごく楽に作ることが出来ました。
書き出したJSファイルも割りと整理されている印象を受けました。
これらのファイルを直接編集することも十分出来そうです。
Adobe Edgeの今後の動向に注目です。

ちなみに、HTML5なのでIEをどうするかは悩みどころですね。

(tsubasa)

日本でもAndroidがiPhoneのシェアを抜いたらしいですが、確かに最近、Androidのスマートフォンをもってる人が増えてきましたね。
僕もケータイをAndroidに変更したのですが、「指リスト」というフリックで入力するタイプのパスワード方式が気になったので、すこし調べてみました。



左がよくある従来の暗証番号方式で「ロックNo」といいます。右がフリックで入力する「指リスト」です。
◎の部分のポイントをつなげてできる一筆書きのような軌跡パターンがパスワードになります。

「お、かっこいい」と思って、使っているのですが、よく考えるとちょっと気になる点がでてきました。

まず、重複したポイントが選べません。
最初に選べる選択肢は９種ですが、次に選べる選択肢は８種、その次は７種というふうにどんどん減ります。

さらに、場所によっては次に選択できないポイントがあります。
例えば中心ポイントから始めた場合は、次に全ポイントを選ぶことができますが、左上ポイントから始めた場合は、次に右上・左下・右下のポイントは途中のポイントが邪魔になり選べません。
※途中のポイントがすでに選択されている場合は選べます。

「これって結構、選択肢がすくないんじゃないの？」と思って調べてみました。
とり合えず、書き出すとこんな感じです。（２手目まで）




予想以上に数があったので、自力計算は断念してあとはプログラムに任せようと思います。
プログラムはPHPで書いてみました。→ パスワード数をカウントするプログラム

うまく動けば、389,112 という数字が表示されると思います。
これが指リストで使えるパスワードの総数です（４桁未満のものはパスワードとして使えないため省いています）。

これをグラフにしたものが下です。
比較のために従来の暗証番号方式を並べてみました。
※横軸はパスワードの桁数、縦軸は対数になっています



グラフから指リスト５桁と番号方式４桁はほぼ同じレベル、ここからどんどん差が広がって、指リスト９桁にしても番号方式６桁より弱いことが分かります。
パスワードの強度を気にするのなら暗証番号方式が安心です。

（teruhisa）

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

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

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

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




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

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


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