2014/01/31

[jQuery]selectされたindexの取得について

jQueryを使ってselectboxの選択されたindexを取得するにはどうすればいいのだろうか?

jQueryにおけるattr()とprop() - selectedIndexの場合 -によると下の場合だとNGのようだ。

$('select[name="hoge"]').on('change',function(e){
  e.preventDefault();
  console.log($(this).attr('selectedIndex'))
});
正解は下のようにpropメソッドを使って取得するようです。
$('select[name="hoge"]').on('change',function(e){
  e.preventDefault();
  console.log($(this).prop('selectedIndex'))
});
意外と盲点なので、気をつけたいですね。

2014/01/30

[Google App Engine][Python]gqlのlimit、offsetのバインドについて

こんなgqlを書いたらエラーが表示された。

db.GqlQuery("SELECT * FROM hoge LIMIT 1 :1",500)
ちなみに、これもエラーになった。
db.GqlQuery("SELECT * FROM hoge LIMIT 1 OFFSET :1",500)
で、ちょっと調べてみたら、
GQL limit clause will not accept positional or named parameters
を発見して、どうやらfetchメソッドを使って対応するようだ。

なるほどー、今度から気をつけないとなー。

2014/01/28

[iOS][Objective-C]マクロを使ったNSMutableStringについて

昨日、下のようなプログラムを書いた。

#define hoge @"hoge"
//省略
NSMutableString *foo = (NSMutableString *)hoge;
これだと、どうやら警告がでるようだ。

下のようにmutableCopyメソッドを使うとうまくいきました。
#define hoge @"hoge"
//省略
NSMutableString *foo = [hoge mutableCopy];
ちょっと、今度から気をつけたい。

2014/01/27

[jQuery]jquery.smartbanner

mobile safariでは、smartbannerと呼ばれる物を表示させることができるのだが、androidではどうすればいいのだろうか?

検索したらjquery.smartbannerというプラグインを発見したんだけど、ちょい余計なプログラムがあるので、それを省いて、あくまでandroidのブラウザだけでアクセスした場合にだけ働いてほしいプログラムがほしい。

というわけで作っちゃおうかなーっと悩んでいる。

2014/01/26

[Objective-C][iOS7]UISegmentedControlのフォントを変更

以前、UISegmentedControlのtextの色を変更というエントリーを書きました。

あれから調べてみたところ、フォントの変更もできるようなので、その方法について。

UISegmentedControl *segmentedControl;
UIFont *font;
[segmentedControl setTitleTextAttributes:@{UITextAttributeFont:font} forState:UIControlStateNormal];
[segmentedControl setTitleTextAttributes:@{UITextAttributeFont:font} forState:UIControlStateSelected];
こうしてまとめておけば次回から困らないぞと。

2014/01/25

[jQuery]css3のアニメーション終了通知

jQueryからCSS3にアニメーションの終了を受け取るにはどうすればいいのだろうか?

jQueryでCSS3アニメーションの終了のタイミングを取得する方法では以下のように紹介されていた。

$("#ID").bind("oTransitionEnd mozTransitionEnd webkitTransitionEnd transitionend",function(){
console.log('animated!');
});

via:jQueryでCSS3アニメーションの終了のタイミングを取得する方法
確かにこれで動いたんだけど、chromeで実行した場合、2回呼ばれてしまった。

おそらく、
$("#ID").on("oTransitionEnd mozTransitionEnd webkitTransitionEnd",function(){
 console.log('animated!');
});
としたら一回だけ呼ばれました。

2014/01/24

[jQuery]tag名を取得する

jQueryオブジェクトからタグの名前を取得するにはどうすればいいのだろうか?

jQueryで要素名を取得するを参照すると以下のようにすればいいことがわかる。

$('.hoge').get(0).tagName;
$('.hoge')[0].tagName;
ミソは、$($('.hoge')[0]).tagNameではいけないということ。

2014/01/23

[jQuery]右クリックを禁止させる

右クリックを無効にするを読みながらjQueryでの実装方法を考えてみた。

$('body').on('contextmenu',function(){
  return false;
});
実験したところ、確かに右クリックが禁止されていた。

2014/01/22

[ゲーム]ファイナルファンタジー6がandroidで先行リリース

まじか!!

スクウェア・エニックスは約10年前にリリースされたRPG「ファイナルファンタジーVI」Android版の配信を開始しました! ダウンロード価格は1800円です。

via:超名作RPG「ファイナルファンタジーVI」のAndroid版が配信開始! iOS版も近日配信へ(動画あり)
およそ半年前にiOS版もでると聞いていたのですが、ホントにでた。

動画も紹介されている模様

2014/01/21

祝:息子が3歳になりました!!

もうあれから一年たつのかー。
 photo 1525048_10202683512869726_1883881642_n_zps8f3af1af.jpg
この一年のあきちゃんの成長をまた勝手に振り返ります。

  • 電車の名前が写真を見て言えるようになった。
  • 動物の名前が写真を見て言えるようになった。
  • カニやエビ、亀などがわかるようになった。
  • ボールを蹴ることができるようになった。かつ、わりとうまい
  • 走るのが以前にもまして好きになった。(かつ早い)
  • 長女の誕生に伴い、若干、赤ちゃん返りしている。
  • パパとママ、意外に、じいじ、ばあばと言えるようになった。
去年も、でかい病気をせずに、過ごすことができたので、今年は、幼稚園とかもあり、かなり本人にとっては波乱な一年となるかもしれないが、頑張ってほしいと思う次第である。

2014/01/20

[JavaScirpt]PCかスマホの判定

ユーザーエージェントで切り替える方法もあるが、下の方法でもいけそうな気がしてきた。

//スマホの場合
if(window.orientation){

//PCの場合
}else{


}
PCだと現状、orientationプロパティーをサポートしていないので、undefinedが返る。

で、これでもいけるかなと。

2014/01/19

[HTML]textareaもplaceholder属性をサポート

タイトル通りなのだが、今日調べたら、textareaもplaceholder属性をサポートしていたようだ。

<textarea rows="3" placeholder="詳細"></textarea>
これは便利。

2014/01/18

[iOS][Objective-C]stringsファイルの作成方法

iOSアプリのローカライズに対応するために、stringsファイルが必要になるのだが、その作成方法は、newのfileを選択して、「Resource」の「Strings File」を選べばいいようだ。
 photo makestringfile_zpsbdf24c35.png
これでローカライズ作業も迷わないぞと。

2014/01/17

[Google].みんなドメインをリリース

あーなるほどー。

「.みんな」ドメインをグーグルが提供開始すると発表しました。

via:使いみちは無限大。グーグルが日本語ドメイン「.みんな」を提供へ(動画あり)
gizmodeと同様に、動画を下に、エンベッド

実際、募集ページを見たんだけど、いくらかわからない。

ちょっとほしいかも。

2014/01/16

[Bootstrap]BootsButton

これ便利。

Bootstrap用のさまざまなスタイルのボタンを確認しながら作成し、コードを生成してくれるオンラインサービスを紹介します。
日本語のボタンももちろん作成できますよ。

via:Bootstrap用のさまざまなスタイルのボタンを確認しながら簡単に作成できる -BootsButton
確かにbootsbuttonサイトで日本語入力したらきちんと生成されていた。

毎回、毎回、マニュアルを確認するのがめんどいので、今後は、これで一発で作ろうかなと。

2014/01/15

[android][iOS]スクリーンサイズの一覧ページ

これも便利だなー。

スマホ・タブレットのスクリーンサイズまとめサイト「Screensiz.es」
端末名と併せて、シェア等に併せてスクリーンサイズを閲覧できます。世界で最も使われている端末のスクリーンサイズは大体どんなものか、ということを調べるのに役立ちます

via:スマホ・タブレットのスクリーンサイズまとめサイト「Screensiz.es」
これ、いいねー、UIを作る時に重宝するかも、特に、androidで。

screensizで公開されている模様。

2014/01/14

[Google]デザインガイドラインを公開

これ、すご。

ChromeやGmailのアイコンはシンプルであり、一度使うと見るだけでそのアイコンが何を示すのかわかりやすくデザインされているのが特徴的です。そんな企業秘密とも言えそうなGoogleのアイコンやロゴのデザインガイドラインをGoogleのグラフィックデザイナーであるロジャー・オドン氏がBehanceで公開しています。

via:GoogleのアイコンなどのデザインガイドラインをGoogleのデザイナーが公開中
これ、かなりレアかもしれない。

デザインの勉強にいいかも。

2014/01/13

[CSS][jQuery][Bootstrap]alertを表示する

Bootstrapではカスタマイズされたalertが標準装備されているようだ。

<div class="alert alert-warning fade in">
  <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
  <strong>Hoge</strong>
</div>
またjQueryを使ってalertが閉じたときに呼ばれるメソッドもある。
//closeメソッドが呼ばれた瞬間に呼び出させるmethod
$('.alert').on('close.bs.alert', function () {

});
//closeメソッドが呼ばれて完全になくなっときに呼ばれるmethod
$('.alert').on('closed.bs.alert', function () {

});
これ、closeはできるんだけど、再表示できないんだよね。

やり方間違っているのかなー。

2014/01/12

[JavaScript]Yahoo Shoping APIを使う

Yahooディペロッパーに掲載されている商品検索APIをJSONPで使ってみる。

jQuery(function($){
  var yahooShopingApi = 'http://shopping.yahooapis.jp/ShoppingWebService/V1/json/itemSearch';
  var yahooAffiliateData = {
    appid:'アプリケーションID',
    affiliate_type:'yid',
    affiliate_id:'Yahoo! JAPANアフィリエイトIDもしくは、バリューコマースアフィリエイトID',
    image_size:'600',
    callback:'yahooRequestCallback'
  };

  yahooAffiliateData['jan'] = 'JANコード';

  var script = document.createElement('script');
  script.setAttribute("type", 'text/javascript');
  script.setAttribute("src", yahooShopingApi+'?' + $.param(yahooAffiliateData));
  document.getElementsByTagName("head")[0].appendChild(script);
});


function yahooRequestCallback(o){

}
こうしてまとめておけば次回以降コピペで使えるなかなと。

2014/01/11

[jQuery]radioボタンのcheckされているかどうかの確認

むかーし、書いたような気もするのですが、検索して見つからなかったので、1エントリー

radioボタンがcheckされているかどうかを確認する方法を下のような感じでいけます。

var $radio = $('input[type="radio"]:checked');
//選択されていない場合
if($radio.length == 0){
  alert('選択されていません');
  return;
//選択されている場合
}else{
  alert('選択されています');
  return;
}
これで今後も悩まないぞと。

2014/01/10

[iOS][Objective-C]deallocの挙動について

iOS5からARCがサポートされて、deallocメソッドを明示的に呼び出す必要性がなくなりました。

しかし、UINavigationController内部のUIViewControllerがpopされた時に、どうやらdeallocが呼び出されるようだ。

//AppDelegate.m
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    ViewController *viewController = [[ViewController alloc] initWithNibName:nil bundle:nil];
    
    UINavigationController *navigationController = [[UINavigationController alloc] initWithRootViewController:viewController];
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    self.window.backgroundColor = [UIColor whiteColor];
    self.window.rootViewController = navigationController;
    [self.window makeKeyAndVisible];
}
//ViewController.m
- (void)viewDidLoad
{
    [super viewDidLoad];

    UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    button.frame = CGRectMake(100, 100, 200, 50);
    [button setTitle:@"next" forState:UIControlStateNormal];
    [button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    [button addTarget:self action:@selector(pushed) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:button];
}

-(void)dealloc{
    NSLog(@"呼ばれました");
}

-(void)pushed{
    ViewController *viewController = [[ViewController alloc] initWithNibName:nil bundle:nil];
    [self.navigationController pushViewController:viewController animated:YES];    
}
上のプログラムの場合、ナビゲーションバーに表示される「Back」ボタンによって、deallocメソッドがコールされました。

NSNotificationCenterのremoveObserverをかました時に便利かも。

2014/01/08

[Chrome]東芝がChromebookを発売

どうして日本ででないのー??

ここCES 2014で、Toshibaが、GoogleのChrome OSをOSとする13.3インチのChromebookラップトップを披露した。そのお値段は、300ドルを切っている。

via:東芝もChromebookを発売; 画面13インチ, SSD内蔵で279ドル
意外と売れると思うんだけどな。

2014/01/07

[Google]ホンダ、ゼネラルモーターズ、Audiらと自動車開発に向けて提携

これ、すご

2009年から自動運転カーの開発に乗り出すなど、自動車産業をターゲットとした動きの目立つGoogleが、自動車メーカーのゼネラルモーターズ(GM)・アウディ・本田技研工業(ホンダ)・ヒュンダイ、そして半導体メーカーのNVIDIAと提携し「Open Automotive Alliance」という新しい団体を設立しました。Open Automotive Allianceは、GoogleのAndroidと自動車を統合し、より安全な自動車ライフを提供することを目的としています。

via:GoogleがAndroid搭載自動車開発に向けてホンダ・アウディ・GMなどと提携し新団体を設立
APIを公開して3rdパーティのアプリを受け付けるようにしてほしいですね。

そうすれば、車を買う人も増える可能性があるし、地図と連動したアプリを作ることで地域活性化にもつながると思うし、いいことづくめな気がするのだが。

そこからあがった利益を車会社とシェアすれば、お互いwin・winな気がするのだが、どうだろう??

実際、openautoallianceというサイトもできており、今後の動きに期待。

2014/01/06

[iOS7][Objective-C]UINavigationControllerとUIViewController時のstatusbarの挙動

なんと、今更ながら知ったのですが、UIViewControllerの場合、ステータスバーの下にviewが潜り込むのに対して、UINavigationControllerは、ステータスバーの下に、navigationbarを作ってさらにその下からご丁寧にViewを表示するようだ。

ただし、例外もあって、UINavigationControllerでも下のようにnavigationbarをhiddenにした場合、UIViewControllerと同じようにステータスバーの下に潜りこむようだ。

self.navigationController.navigationBarHidden = YES;
これ覚えておくといいかも。

2014/01/05

[jQuery]マウスホイール操作プラグインを使ってGoogle Glassのようなサイトを作る

Google Glassのサイトを見てスクロールの処理を昨日紹介したプラグインでつくれないかなーっとチャレンジしてみました。

CSS

body {
  overflow: hidden;
  margin:0;
  pading:0;
}

div{
  height:1000px;
  width:1000px;
  overflow:hidden;
  position:relative;
  padding:0;
}

ol{
  list-style-type:none;
  margin:0;
  padding:0;
  overflow:hidden;
  height:10000px;
  width:1000px;
  position:absolute;
}

li{
  width:1000px;height:1000px;
  padding:0;
  margin:0;
}
HTML
<div>
  <ol>
    <li style="background-color:red;">No1</li>
    <li style="background-color:yellow;">No2</li>
    <li style="background-color:blue;">No3</li>
  </ol>
</div>
JS
jQuery(function($){
  var bAnimating = false;
  var nIdx = 0;
  $('ol').on('mousewheel',function(e){

    if(bAnimating) return;
    bAnimating = true;

    var $t = $(this);
    var nTop;
    if(e.deltaY > 0){
      if(nIdx == 0){
        bAnimating = false;
        return;
      }
      nIdx = nIdx - 1;

    }else{
      if(nIdx == 2){
        bAnimating = false;
        return;
      }
      nIdx = parseInt(nIdx,10) + 1;
    }

    nTop = (-1000*nIdx) + 'px';

    $t.animate({
      top:nTop
    },1000,'easeInOutExpo',function(){
      bAnimating = false;
    });
  });
});
上のコードをベースに動くには動くんだけどGoogle Glassのようにフルサイズで表示させたい場合は、上の処理に加えて$(window).resizeの処理も必要になってくる。

2014/01/04

[jQuery]マウスホイール操作を取得できるプラグイン アップデート

だいぶ前にマウスホイール操作を取得できるプラグインという記事を書きました。

で、振り返ってプラグインを改めてダウンロードしたり、導入方法を確認しようと思ったらリンクきれとかあって、全然わからなかったので、アップデート記事として新規に1エントリー。

まず、jquery-mousewheelからjquery.mousewheel.jsをダウンロード。

そんでもって、マウスホイールの動きを知りたい要素の対して以下のようにメソッドをバインド。

$('#hoge').on('mousewheel',function(e){
  console.log(e.deltaX, e.deltaY, e.deltaFactor);
});
で、上下のスクロール判断は下のようにして判断
$('#hoge').on('mousewheel',function(e){
  //上へスクロール
  if(e.deltaY > 0){

  //下へスクロール
  }else{

  }
});
上のプログラムをベースにコピペすれば困らないぞと。

2014/01/03

[jQuery]ajaxのcontextキーについて

ajaxメソッドのパラメータにcontextというキーを設定できるのだが、これがまた便利。

具体的に2つのパターンを書いて比較してみる。

<script>
jQuery(function($){
  $('#hoge').on('click',function(e){
    e.preventDefault();
    $.ajax({
      type:'GET',
      url:'test.json',
      success:function(){
        console.log(this)
      }
    });
  });
});
</script>
<input type="button" value="Run" id="hoge">
まずは、contextキーがないパターン。

この場合は、ajaxメソッドの中に設定されているパラメータが返される。
<script>
jQuery(function($){
  $('#hoge').on('click',function(e){
    e.preventDefault();
    $.ajax({
      type:'GET',
      url:'test.json',
      context:this,
      success:function(){
        console.log(this)
      }
    });
  });
});
</script>
<input type="button" value="Run" id="hoge">
次は、contextキーが設定されているパターン。

この場合は、$('#hoge')オブジェクトが返される。

contextがあると何がいいかというと、ajaxの結果をもとに、呼び出し元を使いたい場合などに変数を設定しなくてもアクセスできたりすので便利なんですね。

2014/01/02

[JavaScript]PayPalがサーバーサイドにJavaScriptを導入

これはすごい決断

PayPal社はJSPとJavaで書かれたレガシーコードを捨て、ブラウザからWebアプリケーションのバックエンドサーバまで、幅広くJavaScriptを採用することに決めた。

via:PayPal社がバックエンドをJavaからJavaScriptへ移行
大手のしかも金融関連のIT企業が導入することによって、一気に、他の企業にも導入が進むかもしれない。

ただ、node.js自体は、まだ、versionが0.10と正式版になっていないんだよね?

この状態でよく現場は上長を説得できたなーっと思ったが。

もしかしたら、上司が率先して導入をしようとしたのかもしれない。

色々な意味で導入後の結果がすごく知りたい技術的なニュースだった。

2014/01/01

あけましておめでとうございます!!

あけましておめでとうございます!!

昨年は、Love Nailリリースや、長女、真優花の誕生など色々ありましたが、今年もまた一年頑張るぞと。