iPhoneアプリ開発をはじめよう : Xcodeでアプリを作ってみよう
今回は、インストールしたXcode(開発ツール)を使って、簡単にアプリの作成手順について
ご紹介していきたいと思います。
1.プロジェクトを作成してみよう
インストールしたXcodeを起動してみましょう。
はじめに「Welcome to Xcode」という画面が出るかと思います。
ここで、「Create a new Xcode Project」をクリックすると、新しいプロジェクトを作成することができます。
クリックしたあと、プロジェクトのテンプレートの選択画面、
プロジェクト名・バンドルIDを入力する画面と続きます。
ここでは、テンプレートは「Single View Application」としてみましょう。
プロジェクト名・バンドルIDは任意の名称でかまいません。
最後にプロジェクトの保存先を決定すると、プロジェクトが作成されます。
上の画像のように、あらかじめ必要なファイルやプログラムが書かれた状態で作成されるので、
これに基づいてすぐにアプリケーションを作成していくことができます。
2.アプリケーションを作ってみよう
では、ごく簡単なアプリケーションを作成してみましょう。要件は、以下のような「ボタンを押したらアラートダイアログが表示される」ものにしてみます。
まず、「ViewController.xib」をクリックします。
.xibの拡張子がついたファイルでは通常のソースファイルと異なり、GUIでアプリケーションの見た目を
構成できる専用のツールの画面が表示されます。
(このツールをInterfaceBuilderといいます)
ここではボタンを配置してみましょう。
右下のエリアにある「Round Rect Button」という項目をドラッグ&ドロップで画面上に配置します。
次に、「ViewController.h」ファイルを選択し、以下の画像のようにコードを入力します。
「IBOutlet」のついた変数は、先ほどご紹介したInterfaceBuilderと連携することができます。
(「IBAction」のついた関数の宣言も同様です)
実際に連携してみましょう。
もう一度「ViewController.xib」をクリックし、左上のエリアにある「Files Owner」を選択したあと、
右上のエリアを参照します。
すると、先程入力した変数などが表示されていることがわかります。
この変数と、画面上に配置したボタンを紐付けることができます。
「_btn」の右隣にある白丸をクリックし、ボタン上にドラッグ&ドロップするだけでOKです。
同様に、「clickBtn:」もボタン上へドラッグ&ドロップします。
するとこのメソッドを呼ぶタイミングを選択するリストが表示されるので、ここでは「Touch Up Inside」を
選択してみましょう。
これで、プログラムとInterface Builderの連携は完了です。
最後に、アラートダイアログを表示するプログラムを書きます。
「ViewController.m」を選択し、画像にあるようなプログラムを追記します。
これで、先程Interface Builderで選択したように、ボタンをクリックし終わったタイミングで、
この「clickBtn」メソッドの処理を実行することができます。
では、実際にシミュレータで実行してみましょう。
ウインドウの左上部分、「iPhone 5.0 Simulator」が選択されていることを確認し、「Run」ボタンをクリックします。
しばらくするとシミュレータが起動し、先ほどInterface Builderで作成したとおりの画面が表示されます。
ここでボタンをクリックすると、アラートダイアログが表示されるはずです。
お疲れさまでした!
少し長くなってしまいましたが、これでプロジェクトの作成と、簡単なアプリケーションの作成について
ご紹介しました。
次回は実機でアプリケーションを動かす方法などについて、ご紹介したいと思います。
(kenta)
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
マウスオーバー/マウスアウトの場合
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() を使用
1."赤エリア"に入ったとき[in red]
2."緑エリア"に入ったとき[out red][in green]
3."青エリア"に入ったとき[out green][in blue]
・mouseenter / mouseleave
1."赤エリア"に入ったとき[in red]
2."緑エリア"に入ったとき[in green]
3."青エリア"に入ったとき[in blue]
やりたいことにもよりますが、jQueryのmouseenter/mouseleaveイベントが使い勝手意が良いですね。
(teruhisa)
[Facebook API] FQLについて
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アプリ開発をはじめよう : 開発環境を準備しよう
今回は、実際に開発をはじめるにあたって欠かせない、「開発環境の準備」について
ご紹介していきたいと思います。
前回の開発フローの「(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」から、
Downloadを選択すると、ダウンロードが開始します。
(Snow LeopardとLionで分かれていますので、ご注意ください。)
※iOS Dev Centerのレイアウトは変わることがあります。
上記のキャプチャは2011年11月時点のものですので、ご了承ください。
あとはダウンロードしたdmgファイルを展開し、インストーラの進行にまかせていけば
インストールが完了します。
お疲れさまです!これで開発環境の準備が完了しました。
次回は、Xcodeを使ったサンプルプロジェクトの作成や、ビルドの作成についてご紹介していければと思います。
(kenta)
SSI(Server Side Include)で外部ファイルを読み込んでみよう
という時はSSIを利用すれば簡単に実現できます。
今回はその方法を紹介したいと思います。
ただし、セキュリティの問題がありますので、
実案件で使用する際には、リスクを説明した上でお客様に確認をとってください。
更に、サーバーでSSIが使用できるかのチェックも忘れずに!
以上の事を注意してSSIを行ってみましょう。
ApacheでSSIを使えるようにする
まずSSIを行うには、Apacheの設定でSSIが許可されている必要がありますが、最初から許可設定になっているサーバは少ないと思います。
そこで、SSIを有効にする為に.htaccessファイルに下記を記入します。
(残念ながらhtaccessが許可されていないサーバの場合は潔く諦めましょう)
Options +Includes1行目がSSIを使えるようにする記述、
AddHandler server-parsed html
2行目は拡張子がhtmlのファイルにSSIを有効にする記述です。
上記の記述を行い、SSIを有効にしたい一番上の階層のディレクトリに
「.htaccess」ファイルをアップロードします。
execを有効にしない場合
上記の設定ですと、「exec」のプログラム実行も有効となります。SSIを利用する目的が、 「execを使用してCGIプログラムを呼び出さない」
「ヘッダやフッタのhtmlを読み込むだけでOK!」 というような場合は、1行目を下記に書き換えます。
Options +IncludesNOEXECNOEXECをつける事によって、「exec」の機能を省くことができます。
拡張子がshtmlのファイルのみSSIを有効にしたい場合
2行目を下記の記述に変更して下さい。AddHandler server-parsed shtmlこれで、shtmlの拡張子ファイルのみSSIが有効になり、 htmlの拡張子ファイルではSSIが無効となります。
htmlファイルにコードを記述
次に外部ファイルを読み込むコードを記述します。Googleなどで検索してみると、だいたい下記の方法がヒットすると思います。
<!--#include file="Include.html" -->この「file=""」と「virtual=""」の違いは、
<!--#include virtual="../include/Include.html" -->
読み込むファイルのディレクトリ場所によって記述方法が変わります。
「file」は、 上層のディレクトリにあるファイルは読み込めません。
<!--#include file="../file/oooo.html" -->これだとエラーになります。 下記のように、同ディレクトリやサブフォルダにある場合はOKです。
<!--#include file="oooo.html" -->反対に、「virtual=""」の場合は、
<!--#include file="file/oooo.html" -->
別のディレクトリ指定でも、サーバの絶対パスでも指定が可能です。 下記の様な記述でもOKです。
<!--#include virtual="../file/oooo.html" -->上記の記述を外部ファイルを読み込みたい箇所に書いておくと、
<!--#include virtual="/file/oooo.html" -->
外部ファイルの中身と置き換わります。
後はブラウザで確認し、上手く動作していればSSIの実装完了です!
他にもSSIでできることはたくさんあるのですが、
今回は外部ファイルの読み込みをご紹介させていただきました。
こんなに便利なSSIですが、冒頭でも書きました通りセキュリティの問題があるので、
十分ご注意下さい。
(hirohito)
htaccessでPC,モバイル,スマートフォンサイトの振り分け
そこで、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 資格取得のポイント
詳細は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を使うなら一度は読んでおいた方が良い本です
ちなみに結果は合格でした!
(teruhisa)
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)
【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プロジェクト]を実行
(3)Androidアプリプロジェクトの生成
EclipseでFacebookのAPIを使うAndroidアプリを作成してください。
[ファイル] > [新規] > [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)
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 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)





