[HTML][jQuery]fadein、fadeoutについて

audioタグを使って音量のfadein、fadeoutを実装することができるのだろうか？

HTML5 <audio> playback with fade in and fade outを読むといけそうだ。

var $audio = $('<audio>').attr({'src':soundURL});
$audio.on('canplaythrough',function(e){
  $audio.animate({volume: 1},500,function(){
    $audio[0].play();
  });
});
$('body').append($audio);

上の場合は、fadeinだが、fadeoutの場合は、逆にこうすればいい。

var $audio = $('<audio>').attr({'src':soundURL});
$audio.on('canplaythrough',function(e){
  $audio.animate({volume: 0},500,function(){
    $audio[0].pause();
  });
});
$('body').append($audio);

[HTML][jQuery]audioの読み込み完了について

正確に言うと、読み込み完了ではないかもしれないが、jQueryを使って音声再生できるかどうか判断する手立てはあるのだろうか？

video要素、audio要素をJavaScriptから操作するを読むと以下のように実装さればいけそうだ。

var $audio = $('<audio>').attr({'src':soundURL});
var isPlay = false;
$audio.on('canplaythrough',function(e){
  isPlay = true;
});
$('body').append($audio);

isPlayがtrueによって、確認することができる。

[Python]Dictonaryをキーごとにソート

いくつか調べてみたんだけど、めぼしい答えがなかったので、自作

ディクショナリをキーでソートするにはどうすればいいだろうか？

params = {}
params["Service"] = "AWSECommerceService"
params["AWSAccessKeyId"] = access_key_id
params["AssociateTag"] = associatetag
params["Availability"] = "Available"
params["Operation"] = "ItemSearch"
params["SearchIndex"] = "Blended"
params["Keywords"] = u"ほげ".encode("utf-8")

params["Timestamp"] = datetime.utcnow().strftime("%Y-%m-%dT%H:%M:%SZ")
params["Version"] = "2011-08-01"
keys = sorted(params)

hoge = {}

for k in keys:
  hoge[k] = params[k]

次回以降は、これをコピペできるようにすればいいんだけど、もっと簡単にかけそうな気がしてきた。

[Python]base64エンコード

Pythonでbase64エンコードをするにはどうすればいいだろうか？

公式マニュアルを読むと次のようにすればいけそうだ。

import base64

hoo = base64.b64encode(bar)

[Python]quote_plusとquoteについて

quote_plusとquoteって何が違うんでしょうか？
どうやら公式マニュアルを読むと、スペースの取り扱いが違うようです。

>>> import urllib
>>> urllib.quote("hoge foo")
'hoge%20foo'
>>> urllib.quote_plus("hoge foo")
'hoge+foo'

[Python]hmacによるハッシュ化

Pythonでhmacを使ってハッシュ化するにはどうすればいいだろうか？

以下の参考エントリーを読みながら考える。

PythonでHMAC-SHA256を扱う
メッセージ認証のための鍵付きハッシュ化

import hmac
key = ""
msg = ""
#16進数形式で返却
signature = hmac.new(key, msg, hashlib.sha256).hexdigest()
#非ASCII文字で返却
signature = hmac.new(key, msg, hashlib.sha256).digest()

上の例では、sha256形式でハッシュ化しています。

[Python]urlのパースについて

PythonでURLをパースにするにはどうすればいいのだろうか？

urlparseを読むとPython2.7環境下では以下のようにすればいいようだ。

from urlparse import urlparse
baseurl = "http://games.yahoo.co.jp/dqx"
parsed_url = urlparse(baseurl)
#'/dqx'
parsed_url.path
#'games.yahoo.co.jp'
parsed_url.hostname
#ParseResult(scheme='http', netloc='games.yahoo.co.jp', path='/dqx', params='', query='', fragment='')
parsed_url

これはコピペできるようにしておこっと。

[iOS][Objective-C]UIButtonのimageのアスペクト比を保つ

デフォルトでUIButtonにイメージを設定した場合、UIButtonのサイズよりも大きい画像を設定してしまうと崩れてしまうケースがあります。

縦横比を一定に保ちながらうまく収める方法はあるのでしょうか？

答えは、下のようにすればいけそうです。

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.imageView.contentMode = UIViewContentModeScaleAspectFit;

UIButtonのimageViewを見ると、imageViewプロパティーはreadonlyですが、imageViewのプロパティは読み書き可能とのこと。

これは便利なので、覚えておきたい。

[Facebook][iOS][Objective-C]FBRequestConnectionのクラスメソッドでかえってきた値をnil化する方法について

Objective-Cを使って、facebookの情報を問い合わせるときがあります。

例：写真情報の取得

//albumのid
NSString *albumid;
[FBRequestConnection
    startWithGraphPath:[NSString stringWithFormat:@"/%@/photos",albumid],
    completionHandler:^(FBRequestConnection *connection,id result,NSError *error){
    NSLog(@"%@",result);
}];

例：アルバム情報の取得

[FBRequestConnection
    startWithGraphPath:@"/me/albums"
    completionHandler:^(FBRequestConnection *connection,id result,NSError *error){
    NSLog(@"%@",result);
}];

れ、これらのプログラムですが、問い合わせ中は、再度、上記のプログラムを実行してほしくないときがあります。

そんなときは、下のように、すればいいのかなと。

FBRequestConnection *fBRequestConnection;
if(fBRequestConnection == nil){
  fBRequestConnection = [FBRequestConnection
    startWithGraphPath:@"/me/albums"
    completionHandler:^(FBRequestConnection *connection,id result,NSError *error){
      NSLog(@"%@",result);
      fBRequestConnection = nil;
  }];
}

FBRequestConnectionのclass methodのセクションを読むと、返り値がFBRequestConnectionだったりするので、それを一度、設定して、nilじゃーないときは、問い合わせをしないようにしています。

iOS6のARCではうまくいきましたが、リファレンスカウンタ方式だとうまくいくかわからないっす。

[Objective-C][FacebookAPI]アルバムの中にある写真を取得する方法

前回、自分のアルバム情報を取得する方法を書きましたが、選択したアルバムの中にある写真はどうすれば取れるのか調べた。

/{album-id}/photosを見ると、下のように問い合わせをすればいいようだ。

NSString *albumid;
[FBRequestConnection
    startWithGraphPath:[NSString stringWithFormat:@"/%@/photos",albumid],
    completionHandler:^(FBRequestConnection *connection,id result,NSError *error){
    NSLog(@"%@",result);
}];

実行した結果、確かに、取得できた。

[Python]xmlをパースする

おそらく今までエントリーを設けていなかったと思うのですが、pythonを使ってxmlをパースする方法について。

運がいいことに、Python2.5以降は、ElementTreeというライブラリーがあるようです。
(参考：PythonでElementTreeを使ってXMLを処理する方法)

なので、これを使えば一発。

from xml.etree import ElementTree
hoge = "<hoge data-name='bar'>hello world</hoge>"
xml = ElementTree.fromstring(hoge)
#hoge
xml.tag
#bar
xml.get("data-name")
#hello world
xml.text

タグがネストされている場合や、兄弟要素がある場合の問い合わせはまた今度書こうかなと。

[Python]ISO 8601形式の日付を取得する

昨日のエントリーでは、UTCの日付を取得する方法を書きましたが、今日は、その時刻を使ってISO 8601形式にする場合について考える。

from datetime import *
datetime.utcnow().strftime("%Y-%m-%dT%H:%M:%SZ")

今度からは、これをコピペしよう。

[Python]UTCの日付を取得する

UTCの日付を取得するには、どうすればいいのだろうか？

Pythonのdatetimeの扱いのまとめ: datetimeとタイムスタンプの相互変換。タイムゾーンの変換
によると、utcnow関数メソッドで取得できるようだ。

from datetime import *
datetime.utcnow()

確かに、

from datetime import *
datetime.now()

と結果が違った。(ケースによっては同じ場合もあるんですけどね。)

[Facebook]GraphAPIのErrorについて

昨日は、ページングについて書いたので、今日は、エラーについて。

同じようにリファレンスを読むと下のような構成になるようだ。

{
       "error": {
         "message": "Message describing the error", 
         "type": "OAuthException", 
         "code": 190 ,
         "error_subcode": 460
       }
     }

errorキーがトップにあるので、こいつが存在するかどうか調べればいいというわけだ。

これも毎回、毎回、調べるのがメンドイので、まとめました。

[Facebook]GraphAPIのページングについて

Graph APIを使っていると次のデータを取りにいきたい場合があります。

で、Graph APIを読むと以下のような構成になっています。

{
  "data": [
     ... Endpoint data is here
  ],
  "paging": {
    "cursors": {
      "after": "hoge",
      "before": "bar"
    },
    "previous": "https://graph.facebook.com/me/albums?limit=25&before=hoge"
    "next": "https://graph.facebook.com/me/albums?limit=25&after=bar"
  }
}

なので、pagingキーの中にあるnextキーがあれば、次のデータをアクセスすることができて、存在しない場合は、アクセスすることができません。

毎回、毎回、リファレンスを探すのがメンドイので、ちょっとまとめました。

[本]フラット化する世界 増補改訂版 上

読了

フラット化する世界 [増補改訂版] (上)
トーマス フリードマン

序文
第一部　世界はいかにフラット化したか
第１章　われわれが眠っているあいだに
第２章　世界をフラット化した10の力
フラット化の要因１　ベルリンの壁の崩壊と、創造性の新時代
フラット化の要因２　インターネットの普及と、接続の新時代
フラット化の要因３　共同作業を可能にした新しいソフトウェア
フラット化の要因４　アップローディング：コミュニティの力を利用する
フラット化の要因５　アウトソーシング：Ｙ２Ｋとインドの目覚め
フラット化の要因６　オフショアリング：中国のＷＴＯ加盟
フラット化の要因７　サプライチェーン：ウォルマートはなぜ強いのか
フラット化の要因８　インソーシング：ＵＰＳの新しいビジネス
フラット化の要因９　インフォーミング：知りたいことはグーグルに聞け
フラット化の要因10　ステロイド：新テクノロジーがさらに加速する
第３章　三重の集束
第４章　大規模な整理
第二部　アメリカとフラット化する世界
第５章　アメリカと自由貿易──リカードはいまも正しいか？
第６章　無敵の民──新しいミドルクラスの仕事
索引

via:目次

2008年に出版されたものなので、今更目新しい感じは受けなかったが、当時、読んでいたらどう受け止めていただろうか？

著者は、新しいミドルクラスの仕事をゲットするために知的好奇心を保ち続けることを書いていたが、
HIKAKINさん
や
アイスマン福留さん
のように新しい仕事を作る能力が、今後、ますます重要になってくるような気がするのだが、どうだろうか？

本では、PCとネットにより、グローバル化が進んでいると説いていたが、今は、スマホとクラウドの組み合わせで、よりいっそうその動きが進んでいると思われる。

おちおちしていられないぞと。

[iOS][Objective-C]UIImageの重ね合わせ

UIImageが二つある状態で重ね合わせを行いたい場合、どうすればいいのだろうか？

複数のUIImageオブジェクトから１つのUIImageオブジェクトを作る
を引用すると次のようになります。(以下、引用)

UIImage *image1 = [UIImage imageNamed:@"image1.png"];
UIImage *image2 = [UIImage imageNamed:@"image2.png"];

UIGraphicsBeginImageContext(CGSizeMake(width, height));

[image1 drawAtPoint:CGPointMake(0, h1)];
[image2 drawAtPoint:CGPointMake(0, h2)];

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

上のプログラムだと、それぞれ違う高さに書き出しているが、下のように同じ位置にすれば、image1の上に、image2が重なるようになります。

UIImage *image1 = [UIImage imageNamed:@"image1.png"];
UIImage *image2 = [UIImage imageNamed:@"image2.png"];

UIGraphicsBeginImageContext(CGSizeMake(width, height));

[image1 drawAtPoint:CGPointMake(0, 0)];
[image2 drawAtPoint:CGPointMake(0, 0)];

UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

これ、すごく便利なので、使い回したいですね。

[iOS][Objective-C]UIBarButtonItemに画像を設定する際に気をつけること

iOS7からどうやらUIBarButtonItemに画像を設定する時に、挙動が変わってしまったようだ。

デフォルトでは、iOS7から登場した下のメソッドにUIImageRenderingModeAutomaticが設定されているようです。

- (UIImage *)imageWithRenderingMode:(UIImageRenderingMode)renderingMode

で、これを画像そのものにするには、

UIImage *image;
[image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

とするしかないようです。

で、iOS7よりも小さいバージョンを考慮したプログラムは下のようになります。

UIImage *image;
CGFloat osVersion = [[UIDevice currentDevice].systemVersion floatValue];
if(osVersion >= 7){
    [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}

これをベースに、組んでいけばいいのかなと。

[Facebook][iOS][Objective-C]自分のアルバム情報を取得する

Facebook上のアルバム情報を取得する方法を調べました。

GraphAPIのalbumsを使えばいけそうです。

[FBRequestConnection
    startWithGraphPath:@"/me/albums"
    completionHandler:^(FBRequestConnection *connection,id result,NSError *error){
    NSLog(@"%@",result);
}];

実行した結果、取得することができました。

meの部分を任意のidに変更すれば、お友達のアルバムも取得することができます。
(別途パーミッションの設定も設定ですが。)

ものすごく簡単に取れました。

[android]Nexus 4でスクリーンショットって撮れるの？

Nexus 4でスクショを撮りたいのだが、その方法は果たしてあるのだろうか？

Nexus 4でスクリーンショットを撮る方法によると、電源ボタンとボリュームボタンの小を同時に押せばいいと書いてあって、下の動画にもそんな感じに操作していたんだけど、実際に試したらまったく撮影できないwww


で、迷いに迷って結局、ちょっと長めに両方のボタンを押し続けないと撮れないようだ。

う～ん、難しい。

[Game]Yahoo!ゲームでドラゴンクエストX

え、まじで。

スクウェア・エニックスとヤフーは3月27日、Yahoo! JAPANが運営するオンラインゲームサービス「Yahoo!ゲーム」向けに、「ドラゴンクエストX Yahoo!ゲーム版」のサービスを開始した。

via:「ドラゴンクエストX Yahoo!ゲーム版」がサービスを開始

ということで、さっそく公式サイトに訪問して、遊ぼうと思ったんだけど、windowsじゃーないとダメなんだね。乙
かつ、クライアントDLって、もうflashとか、unityとかにしません？

[android]イオンのnexus4をゲット

先日、イオンでスマホの予約をしたことを書きましたが、やっとゲットできました。







長年iPod touchをメインに使っていたので、すんごい違和感。

まず、何をするにしても、ウィーン、ウィーンとバイブがうざい。(デフォ、offでいいんじゃない。)

カメラアプリ立ち上げたのはいいけど、どうやって終了すればいいのかわからないし。

フッターのボタンが減ったり増えたりする挙動がイミフだし。
(かつ、backボタンいる？)

OS自体がたまーにクラッシュするし。

widgetの存在って何、これ必要？？って疑問もあるし。

アプリのショートカットも複数個作れそうだし(この仕様いる？)

唯一よかったのは、プロセスの殺し方と、通知だね。
通知は件数がでないのがいい。
この変の仕様は、iOSもパクっただけあって、素敵。

ちょっと今、思ったのだが、こうしてイオンという小売店がスマホを独自に売り始めたということは、他の小売店、例えば、イトーヨーカ堂とかも販売してもおかしくはないと思った。
かつ、もっと突き詰めて考えると、セブンイレブンや、ファミマ、ローソンでの販売も現実味を帯びている気がしてきた。
現に、イオンはミニストップを配下に持っているので、余計ありそうだ。

そんでもって、将来的には、ちょっと前にコンビニであったような気がするプリペイド式のスマホとかでるのかなー。
それはそれで興味があったり。

[JavaScript]hammer.jsのgestureプロパティーについて

前回、hammer.jsについて書きましたが、directionなどのプロパティーは、どうやらevent.gestureで取得できるようです。

<style>
html,body{
  height:1000px;
  margin:0;
  padding:0;
}
</style>
<script src="//cdnjs.cloudflare.com/ajax/libs/hammer.js/1.0.6/hammer.min.js"></script>
<script>
Zepto(function($){
 
  Hammer(document.getElementById('container')).on("dragstart", function(e) {
    console.log(e.gesture.direction);
  });

});
</script>
<body id="container"></body>

これ向きとか取得できるので便利なんですな。

[本]JavaScriptデザインパターン

読了

JavaScriptデザインパターン
Addy Osmani

まえがき

1章 デザインパターンとは?
1.1 はじめに
1.2 パターンとは?
1.3 「パターン」性検査、プロトパターン、3の法則
1.4 デザインパターンの構造
1.5 デザインパターンを作成する
1.6 アンチパターン
1.7 デザインパターンのカテゴリー
1.8 デザインパターンの分類

2章 JavaScriptデザインパターン
2.1 コンストラクタパターン
2.2 モジュールパターン
2.3 リビーリングモジュールパターン
2.4 シングルトンパターン
2.5 オブザーバパターン
2.6 メディエータパターン
2.7 プロトタイプパターン
2.8 コマンドパターン
2.9 ファサードパターン
2.10 ファクトリパターン
2.11 ミックスインパターン
2.12 サブクラス化
2.13 ミックスイン
2.14 デコレータパターン
2.15 擬古典的デコレータ
2.16 jQueryを使ったデコレータ
2.17 デコレータパターンの利点と欠点
2.18 フライウェイトパターン

3章 JavaScriptのMV*パターン
3.1 MVC
3.2 JavaScript開発者のための MVC
3.3 MVCは何の役に立つのか
3.4 JavaScriptにおける Smalltalk-80のMVC
3.5 MVP
3.6 MVVM
3.7 MVVMの利点と欠点
3.8 MVVMによる緩やかなデータバインド
3.9 MVCとMVPと MVVMの比較
3.10 Backbone.jsとKnockoutJSの比較

4章 モダンなモジュラー JavaScriptデザインパターン
4.1 スクリプトローダに関するいくつかの注記
4.2 AMD
4.3 CommonJS
4.4 競合しているが有効性で並ぶ 2つのフォーマット: AMDとCommonJS
4.5 ES Harmony
4.6 まとめ

5章 jQueryのデザインパターン
5.1 コンポジットパターン
5.2 アダプタパターン
5.3 ファサードパターン
5.4 オブザーバパターン
5.5 イテレータパターン
5.6 遅延初期化
5.7 プロキシパターン
5.8 ビルダーパターン

6章 jQueryプラグインのデザインパターン
6.1 パターン
6.2 軽量スタートパターン
6.3 完全なウィジェットファクトリパターン
6.4 入れ子の名前空間プラグインパターン
6.5 カスタムイベントプラグインパターン(ウィジェットファクトリと併用)
6.6 DOMからオブジェクトへのブリッジパターンを使ったプロトタイプ継承
6.7 jQuery UIウィジェットファクトリのブリッジパターン
6.8 jQuery Mobileウィジェットのウィジェットファクトリ
6.9 RequireJSとjQuery UIウィジェットファクトリ
6.10 グローバルと呼び出し単位のどちらかでオーバーライドできるオプション(最適なオプションパターン)
6.11 高度な設定と変更が可能なプラグインのパターン
6.12 パターン以外にプラグインに必要なものとは?
6.13 jQueryプラグインのまとめ
6.14 名前空間作成のパターン
6.15 名前空間作成の基礎
6.16 高度な名前空間パターン

7章 おわりに

付録 参考資料
索引

via:目次

デザインパターンに即してJavaScriptの場合、どうやって実装すればいいのか？という視点で書かれている本だが、はっきり言って初心者向けではない。

しかも、Objective-Cで、MVCや通知、delegateなどを知っていたので、理解しやすかったのだが、単純にJavaScriptだけ書いていたら理解できなくて、投げ出していたと思う。
というわけで、他の言語も触ったことがある人向けだといえる。

かつ、undersocre.jsや、Backbone.js、RequireJSもなんたるかを知らないとキツイ。こちらもたまたま業務で触ったことがあったので、理解する上で助かった。


最近、JavaScript開発していると確かに、「Objective-Cの通知みたいなことをしたい」という欲求が発生したりして、どうやって実装すればいいか悩んでいたので、大変助かった。

大規模開発したいJavaScript向けですな。

[iOS][HTML]input type="file"のサポート

最近、知ったのですが、どうやら、iOS6から、inputタグのtype="file"がサポートされたようなので、早速試してみることに。

と言っても、簡単な一行なのですが。

<input type="file">

実行結果は、下のようになります。

これ、写真と動画おそらく両方選べると思うんだけど、片方だけってできるのだろうか？

[jQuery]Lightbox_meプラグイン

ライトボックス系のプラグインを探していたところ、Lightbox_meというプラグインを発見。

導入は、めちゃくちゃ簡単

<!-- script -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="/js/jquery.lightbox_me.js"></script>
<script>
//open lightbox
$('#hoge').lightbox_me();
</script>

<!-- html -->
<div id="hoge"></div>

ここでは、id="hoge"だったが、自由に記述することができる。

また、デフォルトでは、マスク部分をクリックすると自動的にクローズするんだけど、しないことも設定できます。

とても便利なプラグインなので、一度お試しあれ。

[iOS][Objective-C]facebookSDKのエラー

先日、facebookSDKを入れたアプリの提出を行ったところ、

The app references non-public selectors in Payload/XXXXX.app/XXXXX: id, setId:

みたいな警告が発生した。

それまでコンパイルエラーも発生せず、validateチェックも通っていたのですが、なぜか、提出時に警告。

理由を調査したところ、どうやら、warning : The app references non-public selectors in Payload/XXXXX.app/XXXXX: id, setId:によると、SDKが悪さをしているらしく、最新版に差し替えたところ取れました。

常日頃、最新版を入れておかないとダメということなのでしょうか。

[CSS]影をつける

CSS3ではどうやらshadowをつけることができそうだ。

box-shadow …… ボックスに影をつける
と
Bootstrapのmodalsを参考にしながら組んでみた。

<div style="
  height:100px;
  width:100px;
  background-color:gray;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
">
</div>

実行結果は下の通り。