2013-12-02

XCode5でリリースの際に参考になったサイト

iOS

XCode5用リリース手順

よく分かる！iOS アプリのリリース手順のまとめ｜ Developers.IO
4-Inch Retina Display Screenshots ...

XCode4時代にお世話になったページ【まとめ】iPhoneアプリ Xcode4での iTunesConnectへ申請する方法まとめ - 暇人がゼロからiPhoneアプリを作ってみる実証型ブログ
1.0 ...

XCode小ネタ。画面の向きを制限する。

昔は絵があってわかりやすかったが、XCode5からは文字だけに。以下のサイトがとってもわかりやすい。 Xcode5でSupported Interface Orientationsを指定する

2013-12-02

OAuth認証ライブラリを探してみた。

iOS

OAuth1と2ってどっちを使えばいいか？

通信を行うAPI次第。現在の所多くは1を使っている。

ライブラリの導入でわかりやすそうなページへのリンク

OAuth1

[XCODE] iOSアプリでOAuth認証を行う、はてブAPIを利用する - YoheiM .NET

OAuth2

φ(￣ー￣ )ﾒﾓﾒﾓ　iOS：gtm-oauth2でOAuth認証してgoogleのAPIを使う - φ(・・*)ゞｳｰﾝ　カーネルとか弄ったりのメモ
gtm-oauth2 ...

どちらもgoogle製のライブラリを使用。

TwitterのAPIと通信するための準備

TwitterとDev登録する必要があり。 Android再入門 - Twitterクライアントを作ってみよう - Twitter APIを使うアプリを登録 - Qiita [キータ]

わかりやすく、かんたん。

2013-11-30

Webアイコン"Genericons"を並列に並べて色を付ける

CSS

こんな事ができる

f:id:jtaka1012:20131130160245j:plain

やり方

HTML

<div id="followmeblock">
      <a href="https://twitter.com/jtaka1012" target="_blank">
        <span class="twitter"></span>
       </a>
       <a href="https://plus.google.com/b/102861128808523144525/102861128808523144525/posts" target="_blank">
        <span class="googleplus"></span>
      </a>
      <a href="http://simple-gadget-life.com/feed">
        <span class="feed"></span>
      </a>
</div>

CSS

div#followmeblock a:link { color: #aaaaaa; }
div#followmeblock a:visited { color: #aaaaaa; }

div#followmeblock .twitter:before{
    content: '\f202';
    font: normal 40px Genericons;
    top:3px;
    margin-right: 5px;
    position: relative;
}

div#followmeblock a:hover .twitter:before {color: #00acee;}
div#followmeblock a:active .twitter:before {color: #00acee;}


div#followmeblock .googleplus:before {
    content: '\f206';
    font: normal 40px Genericons;
    top:3px;
    margin-right: 5px;
    position: relative;
}

div#followmeblock a:hover .googleplus:before {color: #dd4b39;}
div#followmeblock a:active .googleplus:before {color: #dd4b39;}

div#followmeblock .feed:before {
    content: '\f413';
    font: normal 40px Genericons;
    top:3px;
    margin-right: 5px;
    position: relative;
}

div#followmeblock a:hover .feed:before {color: #fcd20b;}
div#followmeblock a:active .feed:before {color: #fcd20b;}

HTMLでウェブアイコンのクラスを指定する際、divではなくspanを使う事。改行を防げる。

CSSの定義ではdivとクラス名、aタグ定義の部分にスペースを入れ忘れないようにすること。 divの入れ子構造になっていても、上記の定義で問題ない。この場合、div="followmeblock"の命令が優先される。上位のdivの名前は書く必要はない。

ちなみに、SNSサイトなどの基調色は以下のサイトで調べられる。

BrandColors: a collection of major brand color codes
#fcd20b ...

2013-11-30

ウェブアイコン"Genericons"の使い方 (Wordpress)

CSS

Genericons - a free, GPL, flexible icon font for blogs!

Genericonsからダウンロードしたフォルダをサーバ上へ配置する。

その際アクセス権限変更漏れに注意

スタイルシートにGenericonsのCSSを定義する。

<link href="CSSファイルのパス" rel="stylesheet" media="screen">

Wordpressだとこんな感じ

<link href="<?php echo get_template_directory_uri(); ?>/font/genericons/genericons.css" rel="stylesheet" media="screen">

普段使っているスタイルシート(GenericonsのCSS以外のもの)に使いたいフォントのクラスを定義する。

.twitter:before{
    content: "\f202";
    font: normal 16px Genericons;
    top:3px;
    margin-right: 5px;
    position: relative;
}

必須なのはcontentとfont。font は"Genericons"まで書いておく事

htmlファイルにアイコンを定義する。

<div class="twitter"><a href="https://twitter.com/jtaka1012">@jtaka</a></div>

これで完成。

2013-11-29

Xcode(iPhoneアプリ)のプロジェクト名の変更メモ

iOS

こののサイトがとても参考になりました。

万が一のために必ず今あるプロジェクトをコピーした上で変更作業を行いましょう。

2013-11-27

Bootstrapでレスポンシブに対応した画像の貼付けはResponsive imagesを使う。

CSS

マニュアル通り、Responsive imagesというクラスをしてして表示すればよい

<img src="..." class="img-responsive" alt="Responsive image">

レスポンシブがイヤなのであればクラス指定は外す。画像の中にさらに画像を入れるといった使い方をしたいのであれば、cssでbackground-imageで背景として登録した上で、さらにhtml側で画像を重ねればよい。

#mockup{
    background-image:url("../image/test.png");
    background-size: contain;
    background-repeat: no-repeat;
    margin-left: 30px;
    overflow: hidden;
    width: auto;
    height: 600px;
}