開発日誌

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)




Web システムのツボ

[Facebook API] FQLについて

201202032149.jpg


Facebook APIには、SQLに似たFQL(Facebook Query Language)という機能が備わっています。 SQLと似たインターフェースで、SQL感覚でデータを扱うことが出来ます。 自身の名前や友達リストなど基本的な情報を取得する場合、標準のGraph APIで事足りるのですが、より細かな情報を取得する場合にFQLはとても便利です。

FQLリファレンスはこちらを参考にしてください。
https://developers.facebook.com/docs/reference/fql/

また、FQLは公式のテストコンソールを使用して確認する事が出来ます。
https://developers.facebook.com/docs/reference/rest/fql.query/

試しに、いくつか検索してみた例を紹介します。

1.日本語表記の名前を取得

 Facebookで名前を取得しようとした時に、日本語表記と英語表記が混ざっていること無いですか?
 日本語表記の人は、出来れば日本語で表示したいですよね。
 Facebookには、名前の設定にその国の言語表記も設定することが出来ます。
 そこに母国語の名前を設定しているユーザは、このFQLで母国語の表記を取得することが出来ます。
 ※「user」テーブルではなく「profile」テーブルを指定します。
 SELECT name FROM profile WHERE id = me()

2.友人の中で、女性のみを抽出

 特に用途は不明ですが、何かの案件で調べたことがあったので紹介します。
 このように、サブクエリも使用することが出来ます。
 SELECT name, sex FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = me()) AND sex IN ('female')

3.友達の中で、このアプリ(FQLを実行するアプリ)を使っていない人を取得

 例えば、友達の中でこのアプリを使っていない人に対して招待する場合などに、
 対象ユーザのリストが作成できますね。

 SELECT name, sex FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1 = [YOUR_APP_ID]) AND is_app_user IN ('1')

4.自分が「いいね!」を押したFacebookページのURLとファン数を取得

 過去に「いいね!」を押したページを取得することが出来ます。
 「いいね!」を取り消したい場合に一覧で取得できると便利ですね。

 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

5.Facebookにログイン中の友達リストを取得

   SELECT uid FROM user WHERE online_presence IN ('active', 'idle') AND uid IN (SELECT uid2 FROM friend WHERE uid1 = me())

取得できる情報を知っておく事で、アプリ制作の幅も広がると思います。 Facebookを使っていて、まだまだ情報を整理できていない部分、不便に思うこともあると思います。 そういった機能を補助する形でアプリを作っていくと、面白いものが出来るかもしれませんね。


(tsubasa)
開発日誌

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)
Web システムのツボ

SSI(Server Side Include)で外部ファイルを読み込んでみよう

「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)
Web システムのツボ

htaccessでPC,モバイル,スマートフォンサイトの振り分け

スマートフォンの普及により、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、モバイル、スマートフォンの3種類で出来るページを作成しましたが、
頻繁に使用されているのは、PC > スマートフォン > モバイル だったそうです。
やはり、モバイルサイトでの登録はかなり根気が要りますね。


(tsubasa)
システムニュース

Zend PHP 5.3 Certification 資格取得のポイント

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

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

試験について

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

・90分70問
「3〜5択問題」「5文から2つ選択問題」(5問ぐらい)「記述問題」(5問ぐらい)の70問です 。

出題範囲

・マルチバイト文字列はでない
たまたまかもしれませんが、英語圏向けテストなのでマルチバイト文字列系(mb_xxxx)はでませんでした。

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

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

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

・XML
数問でてました

・クラス定義
数問でてました

・ファイル変数
$_FILE関連。数問でてました

参考書

以下の参考書で勉強しました

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

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





ちなみに結果は合格でした!

DSC.JPG

(teruhisa)
開発日誌

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)
オープンソース紹介

wkhtmltoimagを使ってコマンドラインからWebサイトのスクリーンショットを取ってみる

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.jpg

こんな感じになります。

実際にやってみた

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


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


wkhtmltoimageexec

 

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

 

wkhtmltoimage_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」です。

wkhtmltopdf

 

wkhtmltopdf_exec


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

 

gpol_pdf.jpg

 

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


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

 

 (hirohito)

1  2  3  4  5

Webシステムのツボとは

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

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

RSSを購読する

Monthly Archive