2012年10月31日水曜日

パララックス効果を使ったページ作成の第一歩

パララックス効果を使ったページが増えてきて、作ってみたくなったのでサンプルを作った。
http://sample.kyosuke25.com/201210/slide.html

でもこのサンプルはただの第一歩であって「視差」を表現できていないので、このサンプルには「パララックス効果」は使ってない。 

これで十分派手なページになるので、このままでもいいように思うけど。

ちなみに、複数の要素を違ったスピードで動かして「視差」を表現しないと「パララックス効果」とは言えない気がするけど、単にページ内でダイナミックにスクロールするだけでもパララックスって言ってるようなケースが少なからずある気がする。
 自分もそう呼んでるけど、違和感ありありなので最近パララックスって言うのが憚れる。 

で、肝心の技術要素について。
このサンプルでやってることは大きく3つ。

1.縦3画面×横3画面
2.画面をブラウザいっぱいに表示
3.上下左右斜めスクロール

HTMLはこんな感じ。
<div id="container">
  <div id="area1-1" class="screen">
    <img src="bg1-1.jpg" class="bgimage" />
  </div>
  <div id="area1-2" class="screen">
    <img src="bg1-2.jpg" class="bgimage" />
  </div>
  <div id="area1-3" class="screen">
    <img src="bg1-3.jpg" class="bgimage" />
  </div>
  <div id="area2-1" class="screen">
    <img src="bg2-1.jpg" class="bgimage" />
  </div>
  <div id="area2-2" class="screen">
    <img src="bg2-2.jpg" class="bgimage" />
  </div>
  <div id="area2-3" class="screen">
    <img src="bg2-3.jpg" class="bgimage" />
  </div>
  <div id="area3-1" class="screen">
    <img src="bg3-1.jpg" class="bgimage" />
  </div>
  <div id="area3-2" class="screen">
    <img src="bg3-2.jpg" class="bgimage" />
  </div>
  <div id="area3-3" class="screen">
    <img src="bg3-3.jpg" class="bgimage" />
  </div>
</div>

では順番に。

1.
div#container {
  width: 300%;
}
div.screen {
  width: 33.33333333%;
  float: left;
}
つまり、全体として3倍の横幅を取っておいて、1画面の領域には3分の1の幅を指定。
なお、小数点が第何位まで有効なのかは不明。

2.
div.screen .bgimage {
  width: 100%;
}
1で指定した領域いっぱいに画像幅を指定。

3.
http://d.hatena.ne.jp/KAZUMiX/20080418/scrollsmoothly
にある「scrollsmoothly.js」っていうスクリプトを使わせていただいた。
作者、天才。

ほな。

【追記】
スクロールのパターンを追加した。
1.横スクロールのみ
http://sample.kyosuke25.com/201210/slide_yoko.html
2.斜めスクロールのみ
http://sample.kyosuke25.com/201210/slide_naname.html

このエントリーをはてなブックマークに追加

2012年3月31日土曜日

FacebookのGraph APIを使った時に付いてくる"#_=_"とjQuery Mobile

FacebookのGraph APIを使って認証をして元のページに戻ってきた時に、URLパラメータに"#_=_"という謎の文字列がくっついてくるときがあります。

常に付いてくるわけではないのが厄介で、getLoginUrlの引数にredirect_uriがないからとか書いてるところもあるけど、ちゃんと書いてても付いてくるときがあり、結局取れないよね、というのが共通認識らしい。

で、大概の場合、それが付いていても影響はないけれど、jQuery Mobileを使ってる時に画面が表示されなくなる(正確には、レンダリング中に処理が止まる)問題が出たので、対策を調査。

下のコードを埋め込めばOK。

<script type="text/javascript">
if (window.location.hash == '#_=_')window.location.hash = '';
</script>

なんかムリヤリでイヤやけど、見る限りこれしか対策見つからず。
このエントリーをはてなブックマークに追加

2012年3月10日土曜日

Facebook SDK for Android を使って、ダイアログを使わずにウォールにポストするコード例

Facebook SDK for Android に同梱されているサンプルには、ウォールにポストする方法としてダイアログを一旦表示させてそこにポスト内容を書かせてから投稿、というパターンしか見つかりませんでした。

でも、「ねちゃったー」みたいに何かしらの動作により裏で自動的にポストがしたい場合には、そのサンプルだと実現できません。

なので調べましたが、どんぴしゃのものが見つかりませんでした。

というわけで、いろんなサンプルを見ながら試行錯誤しているうちに動いたので、備忘録および共有のために書きました。

要は、SDKのAsyncFacebookRunner#requestというメソッドを叩けばいいのですが、ちゃんとした説明がない!
検索して見つけたサンプルも前のバージョンでパラメーターの数が違ったりとか。

お好きなようにお使いください。

なお、SDKのバージョンナンバーが見当たらないのですが、2012/3/10 時点で最新のバージョンを使ってます。


public class ReturnActivity extends Activity {

    Facebook facebook = new Facebook(Constants.FACEBOOK_APP_ID);

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.thanks);

        FacebookSessionStore.restore(facebook, this); 

        AsyncFacebookRunner runner = new AsyncFacebookRunner(facebook);
        Bundle params = new Bundle();
        params.putString("message", "Activityからポストするテスト");
        params.putString("access_token", facebook.getAccessToken());
        runner.request("me/feed", params, "POST", new RequestListener() {

          @Override
            public void onMalformedURLException(MalformedURLException e, Object state) {
                e.printStackTrace();
            }

            @Override
            public void onIOException(IOException e, Object state) {
                e.printStackTrace();
            }

            @Override
            public void onFileNotFoundException(FileNotFoundException e, Object state) {
                e.printStackTrace();
            }

            @Override
            public void onFacebookError(FacebookError e, Object state) {
                e.printStackTrace();
            }

            @Override
            public void onComplete(String response, Object state) {
                // do nothing.
            }
        }, null);
    }
このエントリーをはてなブックマークに追加

2012年2月24日金曜日

Android標準ブラウザ+Ajax Upload(fileuploader.js)でファイルアップロード

Androidの標準ブラウザは <input type="file" .... ファイルアップロードができるとかできないとか、色々情報があったのでとりあえず残しておくことにしました。

結論としては、できます。
(Androidのバージョンによるっぽく、エミュレーターでは2.2以上でOKでした。)

で、それじゃしょーもないので、Ajax Uploadを使ってみようと。
Ajax Uploadは <input type="file" .... を使ったファイルアップロードをajaxを使って非同期で実行できるライブラリです。

結論としては、そのままじゃ無理。

どうも、fileSizeとかsizeでファイルのサイズが取れないらしく(サイズが0とみなされる)、ファイルサイズチェックの部分でエラー判定されます。

なので、多分そのエラーチェックが呼ばれる場合に本当にサイズが0のファイルを扱うことになるのはレアケースでしょうから、無理やりサイズを入れる変数に適当な数字を入れました。
そしたら動きました。

以上です。

追記(2012/3/10)
2.2の方でもできない場合があり、ブラウザを変える(標準ブラウザ→Dolphin)とOKという報告もありました。
このエントリーをはてなブックマークに追加

2012年2月14日火曜日

手島優からもらったチョコレートについて

手島優のおっぱいを間近で見た「ねちゃったー」がR22特別賞を受賞した興奮もようやく収まりつつあり、手島優からいただいたチョコについて感想を残しておこうと思います。

もらったのはこれ(盗用出典:サーチナ)





チョコは手島優のおっぱいのように超大きくて、手書きの字がいっぱい。



で、切ってみた。


チョコケーキでした。
手島優のおっぱいのようにとても厚みのあるものでした。

もういっちょ。今度は名前部分。
書かれた文字は手島優のおっぱいのように白かったです。



下のビスケット部分がサクサクしている一方、チョコレート部分が程よく溶けて手島優のおっぱいのように柔らかくなって、見た目がちょっとアレですが意外に全然美味しかったです。

ちなみに、この2かけ以外はまだ食べてません。
ひとりでは食べきれません。
ごめんなさいする見込みです。
(食べかけでも良い方、おっしゃってください。売りますw)

最後に関係者談。

知り合い「色がヤバい。」
妻「誰が作ったか分からんモノは食べられへん。」
妻の友だち「手島優?誰それ。」
妹「微妙な手作り感がイヤ。むしろそれを食べる人に嫌悪感。」

総スカンでしたwww

手島優さん、僕はあなたの味方です。
美味しかったですよ。
良い思い出になりました。
ごちそうさまでした。

ちなみに、こっちではR25 Androidアプリ大賞のまとめをしています。
→ http://kotoo.in/r25_android_20120209
このエントリーをはてなブックマークに追加

2012年2月9日木曜日

「ねちゃったー」がR22特別賞をいただきました。

今日、R25 Androidアプリ大賞の授賞式がありまして、ビジネス部門にノミネートされていた「ねちゃったー」が大賞を逃すもR22特別賞をいただきました。

ほかの賞はプレゼンターがおじさんでしたが、R22特別賞のプレゼンターは手島優さん。
てじーはIカップだそうです。9番目です。
間近で見るそれはもうこれまでに見たことがないすごいモノでした。

そんなことが言いたいんじゃない。

今回のAndroidアプリ大賞で
本当の大賞は間違いなくR22特別賞
であった。

その場にいた方も全面的に賛同していただけるに違いない。

こうやって評価されるのって気持ちが良いものですね。

副賞でもらった自称手作りチョコがでかすぎて、食べきれるか不安。



ちなみにテレビの取材も受けました。
日テレのiConっていう番組です。
でもインタビュアーの藤井アナウンサーとトークが全くかみ合わなかったので、ほぼカットでしょう。

関連リンクを上げておきます。
てじーのブログ記事 → http://ameblo.jp/tejimayou/entry-11160055771.html
サーチナの記事(Yahoo版) → http://headlines.yahoo.co.jp/hl?a=20120209-00000054-scn-ent
てじーのブログ記事2 → http://ameblo.jp/tejimayou/entry-11161663207.html

このエントリーをはてなブックマークに追加

2012年2月7日火曜日

「ねちゃったー」がR25 Androidアプリ大賞にノミネートされました!

R25の第2回Androidアプリ大賞ビジネス部門にノミネートされました。
http://r25.jp/awd/2012/nominate/

応募してみるもんですね。


メディアの取材もあるとかないとか。
これまで取材を受けても顔写真が出たことがないという苦い歴史を覆すことができるでしょうか。

とはいえ、他のノミネート作品があまりに真っ当なアプリなので、こんなふざけたアプリは受賞しないでしょう。

「このアプリに頼らないといけないようなビジネスマンにはなってほしくない」

万が一、取材を受けることになったらこれやな。

このエントリーをはてなブックマークに追加

2012年1月11日水曜日

アプリから管理者名でFacebookページに投稿するための超簡単なaccess token取得方法

アプリからFacebookページに投稿する方法は、個人名での投稿でも管理者名での投稿でも方法は同じですし、調べたらそれなりの適解がいっぱい出ているので省略。

ここで書くのは、FacebookページにそのFacebookページの管理者名で投稿するための準備としての、access tokenを取得する超簡単な方法です。


検索して出てくる多くの記事では、

  • これをするためだけのコードを書く。
  • サーバーにアップする。
  • 動かす。
  • 表示されたページのURLのパラメータにあるaccess_tokenの部分をコピー

ってやるけど、めんどくさくないですかね。


一度、やっとこさ見つけたどこかのページを参考にしてやったものの、久々にその作業が必要になったときにその方法が思い出せず、さらにそのとき参考にしたページが見つからず、長時間ハマりまくったので備忘録として残すことにしました。

以下、その手順です。
(注)先にアプリを作っておいてください。(このやり方も省略)

  1. Facebookの「Graph API Explorer」にアクセスします。
  2. 画面右上のプルダウンから予め作っておいたアプリを選択します。
  3. 2のプルダウンのちょっと下にある「アクセストークンを取得する」ボタンを押します。
  4. ダイアログが開くので、そこの「Extended Permissions」を押して、「manage_pages」と「offline_access」と「publish_stream」のチェックを入れて、「Get Access Token」ボタンを押します。
  5. ダイアログが閉じて別のウインドウが開くので、そこの「許可する」ボタンを押します。 (※1)
  6. ウインドウが閉じたら、元のウインドウに戻って、3のボタンのちょっと下にある「accounts」というリンクを押します。(※2)
  7. 入力欄の下にAPIからの返り値として、自分が管理しているすべてのFacebookページのページ名とかページIDとかがズラズラっと表示されるので、そこの中からアプリを使って管理者名で投稿したいFacebookページを探して、そのaccess_tokenの値をコピーします。

※1 ブラウザの設定で、ポップアップウィンドウを許可してないとダメかも。
※2 「送信」ボタンの左にある入力欄に最初から表示されているURLの末尾に、「/accounts」を追記して「送信」ボタンを押してもOK。

おしまい。

このエントリーをはてなブックマークに追加