Bugle Diary: 7月 2012

2012/07/31

[Bootstrap]初めてのBootStrap4:buttons

今日は、ボタンの実装方法について。

いつも通り、黙々と、Buttonsの項目を読む。

単純にコーディングすると下のようになる。

<div class="container">
 <div class="row">
  <div class="span12">
   <form class="well form-inline">
    <button class="btn" href="#">Default</button>
    <button class="btn btn-primary" href="#">Primary</button>
    <button class="btn btn-info" href="#">Info</button>
    <button class="btn btn-success" href="#">Success</button>
    <button class="btn btn-warning" href="#">Warning</button>
    <button class="btn btn-danger" href="#">Danger</button>
    <button class="btn btn-inverse" href="#">inverse</button>
   </form>
  </div>
 </div>
</div>

実行結果は、下のようになりました。
Photobucket

素朴な疑問なのですが、ボタンの色を変更するには、どうすればいいのだろうか？

きっと、CSSを直接修正を加えないとだめなんだろうなー。

2012/07/30

[Bootstrap]初めてのBootStrap3:form

今日は、formについて

formsの部分を読むと、各構成要素を横組で作るか、縦組で作るか選択することができる。

まずは、横組から、試しに、下のようにコーディングしました。

<div class="container">
 <div class="row">
  <div class="span12">
   <form class="well">
    <input type="text">
    <button class="btn">Please click!!</button>
   </form>
  </div>
 </div>
</div>

実行結果は下のようになりました。
Photobucket

あれ、テキストとボタンの位置がずれている。

どうすればいいのかと悩んでいたら、どうやら、formタグに、form-inlineクラスを付与すれば解決するようだ。

というわけで、form-inlineを付与したコーディングを下に記載しました。

<div class="container">
 <div class="row">
  <div class="span12">
   <form class="well form-inline">
    <input type="text">
    <button class="btn">Please click!!</button>
   </form>
  </div>
 </div>
</div>

実行結果は、下のようになりました。
Photobucket

無事に、横並びにすることができました。

wellクラスをつけると薄い灰色をデフォルトでつけてくれるので、少し目立ってかっこいいなと思ったり。

次は、縦並び

下のようにコーディングを行いました。

<form class="form-horizontal">
 <fieldset>
  <div class="control-group">
   <label class="control-label" for="input01">Text input 01</label>
   <div class="controls">
    <input type="text" class="input-xlarge" id="input01">
   </div>
  </div>
  <div class="control-group">
   <label class="control-label" for="input02">Text input 02</label>
   <div class="controls">
    <input type="text" class="input-xlarge" id="input02">
   </div>
  </div>
 </fieldset>
</form>

実行結果は、下のようになりました。
Photobucket

ポイントは、各要素を、control-groupクラスが付与されたdivタグで囲む必要があるということ。

さらに、formタグに、form-horizontalクラスも付与する必要があります。

これで、formの段組みも困らないなと。

2012/07/29

[Bootstrap]初めてのBootStrap2:grid

昨日のエントリーでは、レイアウトについて書きました。

今日は、gridについて。

grid systemを読むと、基本的に、bootstrapでは、divタグにspanNというクラスを付与してコーディングを行うようです。

試しに、下のように組んでみました。

<div class="container">
 <div class="row">
  <div class="span4" style="background-color:gray;">
   This is the left menu.
  </div>
  <div class="span8" style="background-color:orange;">
   This is the right menu.
  </div>
 </div>
</div>

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

2段組なので、span4とspan8を指定しました。

ポイントとしては、各指数の合計が12になるということ。
(この場合、4+8=12)

さらに、今回、ちょっと冒険して、さらに下のようにコーディングしました。

<div class="container">
 <div class="row">
  <div class="span4" style="background-color:gray;">
   This is the left menu.
  </div>
  <div class="span8" style="background-color:orange;">
   This is the right menu.
  </div>
 </div>
 this is the main menu.
</div>

class名のrowの後に、「this is the main menu」というテキストを入れました。

実行結果は、下のようになりました。
Photobucket

これは、すごい。

なにがすごいかって、自動的にfloatが解除されること。

コーディングをしていると毎回、毎回、決まり文句のようにでてくる
「float:left」
「clear:both」
などを書かなくていいので、便利ですねー。

2012/07/28

[Bootstrap]初めてのBootStrap1:基本レイアウト

Bootstrapがリニューアルしたので、使い方を勉強したいと思います。

まず最初は、レイアウトについて。

レイアウトセクションを読むと、

Fixed layout
Fluid layout

の二つに分かれるのですが、今日は、Fixed layoutのコーディング方法について。

さっそく下記のように組みました。

<body>
<div class="container">
 <h1>Bootstrap starter template</h1>
 <p>Use this document as a way to quick start any new project.
 <br>
 All you get is this message and a barebones HTML document.</p>
</div>
</body>

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

まずbodyタグの直下に、divタグを追加します。
追加したdivタグのclassにcontainerを付与することにより完成です。

次回は、gridの組み方について書きたいと思います。

2012/07/27

[twitter]BootStrapバージョンアップ

BootStrapがどうやらバージョンアップしたようだ。

最近、勉強をはじめて便利だなと思っていた矢先に。

バージョンアップしたところを確認しないとな。

2012/07/26

[jQuery]oneメソッド

一回だけbindさせたイベントを起動させたい場合は、oneメソッドが大変便利。
使い方は、こんな感じ

<div>
 <input
   type="button"
   id="hoge"
   value="foo"
 >
</div>
<script>
jQuery(function($){
 $('#hoge').one('click',function(){
  console.log('only one')
 });
});
</script>

当初、このメソッドを知ったとき、つかわねーだろうなーっと思っていたが、結構頻繁に使います。

上の場合だと、ボタンがクリックされたときに、only oneと表示され、以降は、何回クリックしても表示されません。

2012/07/25

[jQuery]version2.0からIE6、IE7、IE8サポート中止へ

これはすごい決断だー。

jQuery 2.0 (early 2013, not long after 1.9)
jQuery 1.9とAPIは同一にするが、IE 6/7/8はサポートしない。
via:2013年予定のjQuery 2.0、IE8以下はサポート廃止の方針

実際に、プレゼン資料があったので、以下に添付

jQuery Conference 2012 keynote from dmethvin

IE6、IE7はわかるけど、まさか、IE8まで中止にするとは。。。

日本の場合、IE9以外のユーザーも結構、多そうなので、当面、1.9を使うことになりそうです。

2012/07/24

[iOS][Xcode]プロジェクト名とは別のアプリ名に変更する

iOSのアプリ名は、デフォルトでプロジェクト名になっていますが、変更したい場合、どうすればいいのだろうか？

iOSアプリ名の変更方法

を参考にすると、

「TARGET」ー「Info」タブを選択し、「Bundle display name」パラメータを変更します。

via:iOSアプリ名の変更方法

上の通りに変更したら、確かに、反映されました。

言語ごとに変更したい場合は、以前、アプリの名前を国ごとに変更するに対応方法を書きました。

2012/07/23

[chrome]jQuery API Browserをインストール

PHPSPOTのjQueyを使う場合に覚えておくと便利なChrome拡張で紹介されていた、jQuery API Browserをインストールしてみたのですが、重い。

バグっているのか、正常に動作しているのかわかりにくいので、ちょっと実用には厳しいかもしれないなー。

2012/07/22

TechCrunchのCBS、「60 Minutes」のChromeウェブアプリを公開、ジョブズ伝著者のインタビューもを読んで、実際にインストールしました。

同エントリーによると、no FlashでHTML5とCSS3中心に作られているそうなのだが、すごいクオリティーだ。

やっぱ、モダンブラウザ向けに作るとflash顔負けのものを作ることができるからいいね。
インストールは、chrome web storeから。

2012/07/21

[Google]Chat for Googleをインストール

lifehackerのGoogleのページを開いていなくてもGoogleトークの使える拡張機能「Chat for Google」を読んで、インストールしてみました。

確かに、毎回、毎回、google+1やクライアントアプリを持たずに、chatできるから便利かもしれないが、アプリが常駐するっぽいので、それだとメモリもくってしまい、結果的に、PCの速度が遅くなってしまうかもしれないので、エクステンションを終了させました。

Googleのチャットよりも、Facebookメッセンジャーがほしいと思うのは、一人だけだろうか？

ダウンロードは、chrome web storeから。

2012/07/20

[google]AdSense Publisher Toolbarをインストール

iGoogleが終了してしまうので、ブクマ機能として大変諜報していたGoogle Bookmarksも使えなくなってしまい、登録しておいたブクマを、素早く参照するには、どうすればいいのかと考えながらいろいろなwebサービスに移行しているのだが、Google adSenseについては、ネタフルさんで、紹介されていたGoogle AdSenseの収益が見られるGoogle Chrome機能拡張「AdSense Publisher Toolbar」を使うことにしまいました。(無料だしね！！)

ダウンロードは、拡張ページから

2012/07/19

[google]adSenseの広告一覧

プライベートな話になってしまうが、Google adSenseで、広告を選ぶところがあるのだが、正直、毎回、毎回、どのサイズが、どれだか悩んでしまうので、備忘録として、広告の名前を大きさと例が掲載されているページのリンクを残しておこうかなと。

広告サンプル一覧: リンクユニット
 ディスプレイ広告
 広告サンプル一覧: テキスト広告
 広告サンプル一覧: 動画広告
 モバイル広告
こうやって、いざ、のせてみると、種類いっぱいあるなー。

2012/07/18

[facebook][iOS]sdkがアップデート

なんとまー、いいタイミングで。

iOS SDKが新しくアップデートしたようだ。

しかも、特設ページまでできている。
後々、こっちに変更しておこぉーっと。

2012/07/17

[iOS][Objective-c]Grand Central Dispatchブロック内で使える変数

表現が正しくないかもしれないが、Grand Central Dispatchのブロック内で使いたい変数を宣言したい。

そんな場合は、どうすればいいのか？

Grand Central Dispatch その１ Block

によると、blockの外側に、

__block NSUInteger i =0;

と、「__block」を宣言すればいいようだ。

上で書いたようにObjective-Cの型でも使うことができてとても便利。

2012/07/16

[iOS]アプリの名前を国ごとに変更する

まーよくある話なのですが、アプリを言語ないし国ごとに変更したい場合は、どうすればいいのか調査しました。
結果的に、[Unity] iOSアプリ名のローカライズ
に書かれている通りに実装することで実現できました。

著者によると、どうやらUnityを使ってアプリを作っていたようですが、Unityを使っていない純粋なアプリでも変更することは可能です。

Localizationsで、言語名を設定して、作成された各InfoPlist.stringsに

CFBundleDisplayName = 'test';

と設定すれば、いけます。

CFBundleDisplayNameは、Information Property List Key ReferenceのCore Foundation Keysに記載されています。

ただ、どうしても納得がいかなかったのは、この元となるリソースはどこだったのだろうか？

さらに調べた結果、Localizing Your Application Nameにありました。

これで一見落着、落着。

【追記】
Info.plistでLSHasLocalizedDisplayNameをtrueに設定する必要があるそうです。
ちょっと注意ですね。

2012/07/15

[iOS][Objective-C]admobの追加方法

Google AdMob Ads iOS Fundamentals
を読みながらadmobを追加する方法について調査してみた。

表示にするには、あらかじめ下記のlibraryをインクルードしておく必要がある。

AudioToolbox
MessageUI
SystemConfiguration
CoreGraphics

後、ダウンロードしたファイル群をプロジェクトの中にコピーしておく必要もあります。

で、表示させるためのプログラムは、下のような形になりました。

まずは、ヘッダーファイル

#import "GADBannerView.h"
@interface TestViewController : UIViewController{
GADBannerView *bannerView_;
}
@property (retain,nonatomic) GADBannerView *bannerView_;

次は、実装部

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
/*------------------------------------------------------------------------
AdMob関連
--------------------------------------------------------------------------*/
self.bannerView_ = [[GADBannerView alloc] initWithAdSize:kGADAdSizeBanner];
self.bannerView_.delegate = self;
self.bannerView_.frame = CGRectMake(0.0,317.0 , self.bannerView_.frame.size.width, self.bannerView_.frame.size.height);
self.bannerView_.adUnitID = kBannerCode;
self.bannerView_.rootViewController = self;
}

return self;
}

-(void)loadView{
[super loadView];
[self.view addSubview:self.bannerView_];
GADRequest *request = [GADRequest request];
//Test Modeにする
request.testing = YES;
[self.bannerView_ loadRequest:request];
}

上のプログラムで表示することができたのですが、問題は、GrandCentralDispatchだとうまく表示されないときがあるので、どうにかしたいなー。

2012/07/13

[ios]UITableViewのborderを非表示

UITableViewのborderがうぜなーっと思っていて、これ非表示にすることができないのか調査

How do I remove the borders of a UITableView?を読んだ限り、下記のプログラムで落ち着きました。

tableView.separatorColor = [UIColor whiteColor];
tableView.separatorStyle = UITableViewCellSeparatorStyleNone;

ただ、これ、背景が白だっからよかったのですが、他の色が背景だった場合は、UIColorもそれにあわせる必要がありそう。

2012/07/12

[chromewebstore]Extensionsに広告を掲載することができるようになりました

タイトル通りなのだが、どうやら、Chrome Web Storeのポリシーが変更になり、extensionにも広告を掲載してもいいことになったようだ。

Ads Monetization for Extensions: We are updating our ad policies to allow extensions to monetize through ads. Please ensure your extensions are in compliance by reviewing our extension ads policy guidelines.

そりゃーそうだ。
今は、スマホやfacebookアプリで稼ぐことができるので、extensionやchrome web storeにアプリを出す動機付けが弱くなっているので、当然といえば、当然の処置かもしれない。

2012/07/11

【TechBuzz】第5回yoyogi.py - python経験のないwebエンジニア向け（Djangoチュートリアルその２）でお話します

募集の開始が始まったので。

【TechBuzz】第5回yoyogi.py - python経験のないwebエンジニア向け（Djangoチュートリアルその２）-
でお話させていただくことになりました。

前回、第四回の時に、全部、お話をする予定だったのですが、できなかったので、続きからできたらと思っております。

資料は、一昨日のエントリーにslideshareを貼り付けたのでそちらで確認できます。

もっとペース配分考えて話さないとなーｗｗｗ

2012/07/10

[google app engine]パフォーマンスその1

何回かエントリーを書きそうな内容だったので。

そのものずばり、google app engineのパフォーマンスを改善したいのですが、簡単にアップさせる方法はないのかなーっとぐぐっていたら、ありました。

webapp.WSGIApplicationのdebugフラグはFalseにすべし
・・・省略・・・
時間の掛かる既知な処理はキャッシュする
・・・省略・・・
Templateにはクラスオブジェクトは渡さない
via:Google App Engineでアプリを高速化する3つのtips

上記のうち、webapp.WSGIApplicationのdebugフラグはFalseにすべしは、簡単にできるので、今度、試してみよう。

2012/07/09

[Python]【第4回】 yoyogi.py - python経験のないwebエンジニア向けの資料公開

無事に終了しましたので、スライドを公開します。

ご参加いただいた方、お疲れ様でした！！

Before developing django first django

View more presentations from maitokuwahara

2012/07/08

[iOS][objective-c]adMobをテストモードにする

今、開発中のアプリに、adMobを使おうかなと思っており、そのまま、導入してしまうと、タッチした場合に、広告クリックにカウントされてしまいます。

そこで、これを避けるために、テストモードにする必要があるのですが、その方法は、Requesting test adsによると、

GADRequest *request = [GADRequest request];

request.testing = YES;

とtestingプロパティーにYESを設定すればいいそうです。

実際に、設定して、タッチしても、カウントされません。
これで、誤検知される必要もなくていいですね。

2012/07/07

[iOS][Objective-C]UITabBarを選択させない方法

UITabBarControllerを使ってUIを実装しており、かつ、その中で、HTTPリクエストを飛ばすときに、TabBarItemを選択させたくない場合があります。

そんな場合、どうすればいいでしょうか？

InterfaceBuilderで作ったUITabBarItemをEnabledにする
によると、

UITabBarItemのenabledプロパティーをNOに設定すればいけるようです。

実際に、検証したら、確かに、動作しました。

2012/07/06

[iOS][Objective-C]UIVIewを角丸にする

レイヤーViewでよく見かける角丸。

デフォルトは丸まっていないので、どうすればいいのだろうか？

答えは簡単でした。

ということで、imageViewが角を丸めたいViewとすると
・・・省略・・・
imageView.layer.cornerRadius = 5;
・・・省略・・・
#import <QuartzCore/QuartzCore.h>
via:UIViewの角を丸める方法

また、エントリーでは、imageView.clipsToBounds = true;があったのですが、これがなくても正常動作します。

ってか、QuartzCoreをインポートしなくても、UIViewで処理できるようにバージョンアップしてほしいのだが。。。

これ、結構、使われると思うんだよねー。

2012/07/05

[facebook]graph api経由でfan pageへのlike

まさにタイトル通りになってしまうのですが、facebookのgraph apiを使って、ある特定のファンページへ、自動的に、「like」(いいね)をさせることはできないのかなーっと思っていたら、どうやら、
FacebookのAPIを通してページにいいねすることは出来ない
と
Is it possible to “Like” a “fan page” using the Facebook SDK?
で確認したら、現状できないようになっているそうです。

なーんだ、残念＞＜

2012/07/31

2012/07/30

2012/07/29

2012/07/28

2012/07/27

2012/07/26

2012/07/25

2012/07/24

2012/07/23

2012/07/22

2012/07/21

2012/07/20

2012/07/19

2012/07/18

2012/07/17

2012/07/16

2012/07/15

2012/07/13

2012/07/12

2012/07/11

2012/07/10

2012/07/09

2012/07/08

2012/07/07

2012/07/06

2012/07/05

Blog内検索

ラベル

アーカイブ