2010年3月24日水曜日

iPhone Developer Program登録完了までの紆余曲折

iPhoneアプリでも開発してみるかと思い立って申し込みをしようと思ったら色々つまづいたのでメモしておきます。


スタート:

1. iTunes上でApple IDを登録

iPhoneを購入した日に。
名前とか住所とかを何も考えずに日本語で登録。


2. Apple Developerに登録

数日後おもむろにiPhoneアプリを作ってみたくなったので、Developer登録してみようと思った。

iPhone Developer Programに申込むためにはApple Developerに登録する必要があるようなので、登録してみた (要Apple ID)。

何も考えずにポンポン進んで完了...

あれ、名前のところが文字化けしてる!!
(メンバーページのおそらく名前が表示されるであろう部分が「??」になっている)
しかも名前は編集できない!!


たぶんApple IDで登録してある日本語をそのまま登録したから。
あとで「半角英数字以外は正しく登録されません」という注意を発見したけど後の祭りです。


遊びで開発するぶんにはこのままでもいいけど、
有料だし、後々App Storeに登録することにでもなった時にトラブルになりそうだなと思い登録し直しを決断。


3. ブラウザからApple IDを登録し直し

とりあえず氏名・住所を全部アルファベット表記で登録。


4. Apple Developerに登録し直し

新しいApple IDで再度Apple Developerに登録。
OK 文字化けはしていない。


5. iPhone Developer Programに登録

さっそくiPhone Developer Programにも登録してみることに。
continueを押して行くと日本のApple Online Storeへ誘導されます。

住所欄はApple IDで入力したものが入力済になっていたので(自分の場合はアルファベット表記)
そのまま送信。
(ただ、この辺うろ覚えなのですが、「都道府県」の項目だけ選択式になっていて日本語表記になっていたような気がします。)

数時間後Appleから
Apple Developer Program Activation Code
というメールが届きます。

iPhone Developer Programのactivation codeが記載されているので(リンク付き)クリックして有効化...
しようとするのですができません

こんなメッセージが表示されます。

We are unable to activate your Apple Developer Program membership because we are unable to successfully verify your identity. Please contact us and reference Enrollment ID ****for further assistance.
(原因不明ですが都道府県が日本語になっていたのがクサイ。)

しかたないのでcontact formに上のメッセージを付けて拙い英語で「どうすりゃいい?」とメールしてみました。


寝て起きたらAppleから返信が着ていました。(日本語で)

Apple Storeの購入履歴で ご請求、ご連絡先注文番号 を確認してそれを教えてくれたら手動で認証手続きをしてやる、ということなので、早速返信。

2,3時間後には手続きが完了!(早いね)

以前受け取ったactivation code付きのメールを開いて再度有効化を試みたら、できました

2010年3月13日土曜日

画像もYouTubeもカッコよく表示出来るjQuery prettyPhotoがいい感じ

複数のの画像や動画を分かりやすくかつカッコよく見せるjQueryのプラグインは色々あります。

特にlightbox系のプラグインは人気が高く種類も豊富です。

ところが、先日必要があってYouTubeの表示にも対応しているプラグインを探していて気づいたのですが、YouTube表示可能なlightbox系のプラグインは意外と少ないのですね。


そんな中見つけたprettyPhotoが非常にイイ感じなので紹介したいと思います。

prettyPhoto



使い方はいたって簡単です。


上記のサイトからファイルを一式ダウンロードしてインクルードします。

<link rel="stylesheet" href="prettyPhoto.css" type="text/css" />
<script type="text/javascript" src="jquery.prettyPhoto">




表示したい形式によってHTMLのマークアップの仕方が若干異なります。

単一画像
<a href="image01.png" title="説明" class="prettyPhoto">
<img src="thumbnail01.png" alt="タイトル" />
</a>


複数画像 (前/次のナビゲーション表示)
<a href="image01.png" title="説明" rel="prettyPhoto[pp_gal] class="prettyPhoto">
<img src="thumbnail01.png" alt="タイトル" />
</a>
<a href="image02.png" title="説明" rel="prettyPhoto[pp_gal]" class="prettyPhoto">
<img src="thumbnail02.png" alt="タイトル" />
</a>


YouTube
<a href="http://www.youtube.com/watch?v=qqXi8WmQ_WM" class="prettyPhoto">YouTube</a>



あとはプラグインをセットすれば完了です。

<script type="text/javascript">
$(document).reach(function () {
$('a.prettyPhoto').prettyPhoto();
});
</script>

指定できるオプションはこちら (一部)

animationSpeed
アニメーションのスピード fast/slow/normal
デフォルト: normal

opacity
透明度 0から1を指定
デフォルト: 0.80

showTitle
タイトルを表示するか boolean
デフォルト: true

allowresize
リサイズ可能か boolean
デフォルト: true

default_width
デフォルトの幅
デフォルト: 500

default_height
デフォルトの高さ
デフォルト: 344

theme
テーマ light_rounded / dark_rounded / light_square / dark_square / facebookから指定
デフォルト: light_rounded

hideflash
flashオブジェクトを隠すか boolean
デフォルト: false

autoplay
ビデオを自動再生するか boolean
デフォルト: true

modal
closeボタンだけがprettyPhotoを閉じることが可能か boolean
デフォルト false

changepicturecallback
アイテムが表示/変化した時に実行されるコールバック関数

callback
prettyPhotoを閉じた時に実行されるコールバック関数




lightbox系のプラグインはこちらに色々紹介されているので、合わせてどうぞ

Most Useful Modal Window Plugins for jQuery

2010年3月7日日曜日

Gimpで画像にぼかしを入れる方法

Gimpを使って画像にぼかしを入れるメモです。

Webサイトのキャプチャをアップロードする時、画像の一部にぼかしを入れたくなることがありますが、Gimpを使うとものすごく簡単に実現できます。






1. Gimpアイコンに画像ファイルをドロップして画像を開く
(もしくはGimpの「ファイル」-> 「開く」で画像を選択する)


2. 選択ツールでぼかしを入れたい箇所を選択する




3. 「フィルタ」->「ガウシアンぼかし」

TwitterボットをOAuthに対応させてみた - Google App Engine(Python)

Twitter APIのBASIC認証は2010年6月に「廃止予定」ということなので、対応していないアプリは今のうちにOAuthに対応させておいたほうが無難です。

自分の手持ちのTwitter botはBASIC認証を利用していたので、それをOAuth対応させてみました。
こいつ => @jquerybuzz

実際やってみた感想は、わりと簡単、でもハマりどころはある、という感じです。



以下、実際にやったことをメモ的にまとめておきます。
環境はGoogle App Engine (Python)です。




0. 準備

Twitterアプリの認証にOAuthを使う場合は、アプリケーションをTwitterに登録する必要があります。

自分の登録済のアプリ一覧

このページの下のほうにRegister a new application »というリンクがあるのでそこから新しいアプリを登録できます。

アプリ名やURLは適当に。
Twitterボットの場合は下のようにチェックを入れます。



登録が完了すると Consumer keyConsumer Secret が発行されます。
このキーを後で利用します。





1. アクセストークンを取得する

アプリケーションの登録が完了した後は、そのアプリを利用するユーザーの認証用のアクセス・トークンを取得します。
(厳密にはアクセス・トークンとアクセス・トークン・シークレット)

Twitterボットの場合、ユーザーはボットのアカウントをさします (自分の場合は@jquerybuzz)。

このあたり個人的にはややこしくて分かりにくかったのですが、ようするに下のように利用します。

・アクセストークンを最初に1度だけ取得
・取得したアクセストークンをボットのスクリプトに仕込んで認証に使う


さて、アクセストークンの取得の仕方ですが、自分でスクリプトを用意してTwitterに問い合せる必要があるようです。


以下Rubyになってしまいますが、便利なコードを提供してくれている方がいるのでそれを利用します。


a. ブラウザ無しでアクセストークンを取得する(いわゆるxAuth)

http://gist.github.com/304123

上のコードをxauth-twitter.rbという名前で保存して

ruby xauth-twitter.rb [1] [2] [3] [4] ([5])
# [1]: Your Twitter Name
# [2]: Your Twitter Password
# [3]: The Consumer Key of Your OAuth Apprication
# [4]: The Consumer Secret of Your OAuth Apprication
# [5]: The Server of the Service (optional: default is 'https://api.twitter.com')

アクセス・トークンが返ってくる...はずなのですが、自分の環境では certificate verify failed (OpenSSL::SSL::SSLError) というエラーが発生してうまくいきませんでした。

[2010/3/18 追記]
xAuthの利用はメールで承認を得る必要があるようです。
http://apiwiki.twitter.com/Twitter-REST-API-Method:-oauth-access_token-for-xAuth



b. ブラウザをはさんでアクセス・トークンを取得する


TwitterのbotをOAuthに対応させる

こちらの記事のtwitter-oauth.rbというスクリプトを使わせてもらいました。

(非常に丁寧な記事で、アクセス・トークンの取得だけでなくTwitterボットをOAuthに対応させるやり方がとっても参考になります。Rubyでボットを作っている方はそのままマネッコできそうです!)


途中ブラウザをはさむので誰のアカウントでログインしているのかややこしくなりますが、無事アクセス・トークン(とアクセス・トークン・シークレット)を取得。



2. Twitterにつぶやく

PythonのTwitterライブラリはいろいろあるのですが、今回はGAE向けということで下のライブラリを使うことに。

AppEngine-OAuth-Library

oauth.pyを下のapp.yaml、main.pyと同じディレクトリに置きます。

app.yaml
application: app
version: 1
runtime: python
api_version: 1

handlers:
- url: /.*
  script: main.py

main.py
#!/usr/bin/env python
# -*- coding: utf-8 -*-

import os

from google.appengine.ext import webapp
from google.appengine.ext.webapp import template, util

ROOT_PATH = os.path.dirname(__file__)
DEBUG = ROOT_PATH.find('/base') != 0

# さきほど取得した各情報をここで指定する
TWITTER_CONSUMER_KEY = 'アプリのconsumer key'
TWITTER_CONSUMER_SECRET = 'アプリのconsumer secret'
TWITTER_ACCESS_TOKEN = 'ボットのアカウントのアクセス・トークン'
TWITTER_ACCESS_TOKEN_SECRET =  'ボットのアカウントのアクセス・トークン・シークレット'


class TweetHandler(webapp.RequestHandler):
  def get(self):
    import oauth
    client = oauth.TwitterClient(TWITTER_CONSUMER_KEY,
                                 TWITTER_CONSUMER_SECRET, None)
    param = {'status': u"ボットにつぶやかせたい内容"}
    client.make_request('http://twitter.com/statuses/update.json',
                        token=TWITTER_ACCESS_TOKEN,
                        secret=TWITTER_ACCESS_TOKEN_SECRET,
                        additional_params=param,
                        protected=True,
                        method='POST')
    self.response.out.write('')


def main():
  application = webapp.WSGIApplication([('/tweet', TweetHandler)], debug=DEBUG)
  util.run_wsgi_app(application)

if __name__ == '__main__':
  main()

記述を簡略化するためにエラー処理などは省いてあります。
また、ボットにつぶやかせる内容を取得する処理などは各自で書く必要があるでしょう。

cron.yaml
cron:
- description: Post to Twitter
  url: /tweet
  schedule: every 1 hour
  #schedule: every 1 day     1日おき
  #schedule: every 15 minutes 15分おき

どれくらいの間隔でつぶやかせるかを設定。



あとは、上記のファイルを置いたディレクトリに移動して
appcfg.py update .

とコマンドを叩けばボットが動きはじめます。

2010年3月5日金曜日

Flickr TwitPic TweetPhoto Picasaの画像をダラ見できるページを作ってみた

だら見できるサービスってあんまり役にはたたないけどけっこう好きです。

この間Flickrの画像をだら見するjavascriptを書いてみましたが
Flickr をだら見できるFlickr Photo Streamをつくってみた
それを改良して、複数の画像サービスの画像をダラ見できるページを作ってみました。

PicStream





Flickr
TweetPhoto
TwitPic
Picasa

以上4サービスにアップロードされた画像が上から下にダラダラ流れます。


キーボードの「S」を押すと流れがストップ/スタートします。