ホーム

aguuu

iOSのUILabelで文字列の縦位置を調整する方法

  • 投稿者: tochi
  • 2011/8/8 月曜日 11:54:25
  • iPhone
  • 縺薙�繧ィ繝ウ繝医Μ繝シ繧偵�縺ヲ縺ェ繝悶ャ繧ッ繝槭�繧ッ縺ォ霑ス蜉 

UIButtonなどのtitleLabelに文字列を設定した場合に上にずれることがあります。
UILabelで以前に同様の問題に悩まされてゴリゴリとやっていたのですが、少しだけシンプルな方法を見つけたのでメモしておきます。

IBを使ってUIButtonを配置して「Type=Cutom」として、Fontを「ヒラギノ角ゴ ProN W6」で指定すると下記の通り上にずれます。
ここで真っ先に考えるのがtitleLabelの縦位置(Vertical Alignment)をCenterに!っと考えるんですけど、無いんですよね。。。そんなプロパティ。(確かKeynoteでも縦位置の調整が無いんだよな。。。Apple的には縦位置は上揃えなんでしょうか。。。)

UIButtonの中身の位置を微調整する

そこで中身を下記のように微調整すると縦位置を強制的に変更することができます。
この方法の問題は文字サイズを変更した場合に再度微調整する必要があります。

1
button.contentEdgeInsets = UIEdgeInsetsMake(8.0f, 0.0f, 0.0f, 0.0f);

フォントの種類を変更する

で、もう1つの方法がtitleLabelのフォント種類を「Helvetica-Bold」で指定する方法。
こっちは「Helvetica-Bold」で指定しても表示するときは「ヒラギノ」になっているような気がする。。。

1
button.titleLabel.font = [UIFont fontWithName:@"Helvetica-Bold" size:18.0f];

これらの方法は最もベストでは無い気がしますが現状ではベターではある気がします。
できれば、UIButtonやUILabelにverticalAlignのプロパティを準備してほしいですけどね。。。

01. Ruby on Rails 3 でWebアプリを作ってみる 〜環境構築〜

岡山Rails潜水部に参加してきました。
RubyもRailsも初めてでしたが、@kazuhisa1976さんが初ダイブの僕に優しく手とり足取り教えてくれたので「Ruby on Railsできるかも」っという根拠の無い自信が湧いてきました。
せっかく、色々と教えてもらったのでこの勢いで簡単なWebアプリを作ってみようかと思います。
そして、それをメモとして残したいのでブログに記載します。(あわよくばRubyに詳しい人達からの助言を期 (ry )

ちなみに今回の環境はこんな感じです。

  • Mac OSX Lion (10.7)
  • Ruby 1.9(1.9.2)
  • Ruby on Rails 3(3.0.9)

では早速初めてみます。
基本的には@LuckOfWiseさんに教えてもらった「Ruby on Rails 3.0 日記」に沿って進めていきます。なので、基本的には「Ruby on Rails 3.0 日記」を参考にしてください。とっても分かりやく解説されています。

ということでまずは「第1回: インストール – Ruby on Rails 3.0 日記 – Ruby on Rails with OIAX」Rubyのインストールからなので、MacPort → Ruby → gem → Rails の順番で進めようとしたのですが、「RVM」にすれば?っと教えてもらいました。

RVMとはRuby Version Managerということらしく、複数のRubyを簡単に切り替えながら開発できる便利ツールということですかね。
RVMにするメリットはこんな感じなのか?

  • 複数のRubyを共存できる
  • これらのRubyを簡単に切り替えられる
  • 「/ユーザー/.rvm」配下に Rubyもgemもその他パッケージもまとめられるのですっきり

rvm: 複数のRubyを共存させる最新のやり方」を参考にしながらRVMをインストールします。

あとは、RVMで使いたいRubyに切り替えたあとに「第1回: インストール – Ruby on Rails 3.0 日記 – Ruby on Rails with OIAX」を見ながらgemでrailsをインストール。
railsのソースもすべての「/ユーザー/.rvm」にまとまるのですね。お〜これはいい。
このpathの構造だと「Ruby1.9+rails2」「Ruby1.9+rails3」みたいな感じで同一Rubyのバージョンで別のRailsバージョンの環境が簡単に切り替えられのかな?
これは「rvm list」で表示される一覧の名前を任意のものに変えられないのかな?「ruby1.9+rails3」みたいな。今度アノ人に聞いてみよう。

ということで環境構築完了。
今回は 「第1回: インストール – Ruby on Rails 3.0 日記 – Ruby on Rails with OIAX」を参考に進めていって補足を自分のブログにメモとして残していく予定です。(なので、いつもの様にスクリーンキャプチャー満載にはしないつもり。)

プレゼント応募でiOSアプリのAppCookerのプロモコードを貰ったから試してみた

  • 投稿者: tochi
  • 2011/7/19 火曜日 14:00:35
  • iPhone
  • 縺薙�繧ィ繝ウ繝医Μ繝シ繧偵�縺ヲ縺ェ繝悶ャ繧ッ繝槭�繧ッ縺ォ霑ス蜉 

先日、Idea x Ideaさんで「iPad上でiOSのモックアップが作れる、AppCookerのプロモコード(2300円相当)を無料プレゼント!」というのを募集していたので応募してみました。そして、ありがたい事に当選したので実際に使ってみた感想を書いてみようと思います。(試用期間6時間)
因みに、以前にもブリーズライトの読者応募で当選したことがあったりと、普段のくじ運が悪い僕としてはIdea x Idea さんでの当選確率が高い気がします。今度、お会いしたらお礼を言おう。全く面識はありませんが。。。

では早速、App Cookerについて。何ができるアプリなのかと言う事ですが、簡単に言うと「iOSアプリのモックアップが作れる」のです。
下記の様な事がAppCookerだけでできちゃいます。

  • アイコン画像の作成(モック)
  • アプリの詳細情報・コンセプトなどを記載するノート作成(概要設計的な書類)
  • アプリ画面の遷移図、デザイン、画面設計(画面遷移、画面設計)
  • AppStore提出時の各種情報を記載するノート作成(リリース用ドキュメント)
  • アプリの売上予測情報

それではもう少し細かく、キャプチャを交えながら説明を。

プロジェクトを作る

起動直後の画面です。
アプリ=プロジェクト という単位で管理しているみたいです。
現時点で日本語にローカライズはされていません。
ただ、日本語を含んだモックアップは作れます。

新しいプロジェクトを作ってみます。
まずは、デバイスを選択します。残念ながら現時点ではiPhoneかiPadのどちらか片方しか選択できません。
ユニバーサルアプリを作る場合にはプロジェクトを2つ作る必要があるみたいです。
ここは今後のアップデートに期待したい所ですね。

そして、次に横向きか縦向きかを選択して、プロジェクト名をきめて、アイコンを選択したら「Create」を押下します。すると基本のプロジェクトテンプレートが作成されます。
アイコンは後から編集可能です。

アイコンをつくる

アイコン画像のモックは複数個つくる事ができます。
まずはラフスケッチを書いてその後にブラッシュアップしたアイコンを作ったり、複数のデザインのアイコンを作ったりできます。

アイコン画像作成や後ほど紹介する画面のモックを作成する時には、DropBoxや標準の画像ライブラリから画像を持ってきて使用することができます。

簡単に画像を作成してみました。四角、丸、角丸、線、テキストなど標準的な図形からアイコン画像のモックを作っていく感じです。
色や、重なり順など大まかな事はできるので「モック」という意味でのアイコン作成は可能だと思います。

色は準備された色しか選ぶ事が出来ないので、細かな色見などは変更できないみたい。
また、自由な図形(基本図形以外)も作れません。
そのため、本格的なアイコン画像をAppCookerだけで作るのには無理があります。(そもそも、モック作成なのですが。)
より具体的なアイコンを作るのならば、事前にpngなどで画像を準備してDropBox経由でAppCookerに取り込んで作っていく感じになると思います。

アプリの概要をきめる

では次にアプリの概要を決めます。
アプリのターゲットや特徴、概要などをテキストで記入していきます。
もう少し自由な内容がかけるといいかな。っと。

アプリ画面のモックをつくる

このアプリの最大の売りがこのアプリ画面のモック作成ではないかと。
先ほどのアイコン作成と同様に、基本的な図形や手書きは勿論のこと、iOS標準のパーツを簡単に配置することができます。(これは素晴らしい)
しかも標準パーツは自動的に良きに計らって配置してくれます。
ただ一つここで非常に残念なのが、最も?よく使われるUITableViewのパーツが現時点ではまだ無いようです。
「Soon」っとなっているので近々実装されることは間違い無いのですが、なるべく早く欲しいパーツですね。
他にもいくつか未実装のパーツがありますが、iOS標準の全てのパーツが揃えばかなり簡単にモックが作れて良いと思います。

そしてToolBarのタイトルや左右のボタンの種類、アイコンなども簡単に変更できます。
他のパーツも同じ様な感じで細かく設定できます。(ここらへんは本当に良く出来ているなっと。このアプリのソースコードを見てみたい。。。)

そしてなんと、作成したモック画面に各種画面へのリンクを設定することができます。
リンクを設定すると下記の様な遷移図もできるのですが、さらに凄いのが。。。

リンク設定した箇所をクリックすると擬似的に画面遷移をしているようなデモができちゃいます。
他の人にアプリのイメージを伝える時にはとっても分かりやすくて良いのではないかと。

ここまで出来るのなら、ついでにAppCookerで作ったプロジェクトからXcodeのテンプレートプロジェクトまで作ってくれたりしたら開発者はとっても喜びます。。。とか無茶な要望を言ってみるテスト。w

AppStore用の情報を作る

後はAppStoreにリリースする時に必要な情報を決めていきます。
いつもリリースの時にiTune Connectを開いたままどうしようかと悩んだりしているので 事前に決めておけるのは良いと思います。
これらの情報はPDFで出力できるので、実際のリリースの際にはここで記載した内容をコピペで使えるので2度手間にはなりません。

勿論、日本語向けのローカライズ情報も記載できます。
しかもAPP Nameは長さのチェックも行なってくれるので、ホーム画面上でアプリ名が切れそうなら、右上のチェックアイコンが赤くなって知らせてくれます。(親切)

アプリの売上予測をたてる

最後にアプリの収益について予測を作成します。
どのデバイス向けなのか?どの金額で販売するのかなどが設定可能です。
無料アプリでも広告を掲載した場合のクリック率などから大体の収益を計算したりします。
またアプリ内課金にも対応しているので、iOSでの収益の方法は全て網羅されている様に思います。

また、iOS Devのライセンス費用(10,500円)を支出として考え、最終的な収益を予測する事ができます。
これは経営層の人たちに説明するときには役に立つのではないかと。
「ダウンロードがこれだけ行けば収益は確保できます。キリッ」みたいな。w
僕が作ったアプリで言うと常に収益はマイナ (ry

そしてここまで作成した各種情報はPDFとして出力することができるので、そのまま紙ベースで提出することもできます。

実際に使ってみて僕が使うシーンとして想定したのは電車や出先でアプリのアイデアが思いついてそれを具現化していく時に役に立つなぁ〜っと。
正直に言うと、現時点でAppCookerだけでモックを作りこんでいくには少し無理があるかな。(モックの範囲じゃナイキがするけど。)

Photoshopなどを使ってデザインが難しいプログラマーがアプリのイメージをデザイナーに伝える時や、上司にアプリの説明をする為に使用するととっても良いと思いますね。
アプリの画面のところは本当に良くできているので、上記の様なシーンがよくある方は購入を検討してみる価値はあると思いますよ。

App Cooker - Design, Mockup & Prototype Apps Interfaces - Hot Apps Factory

ホーム

検索
フィード
メタ情報

ページの上部に戻る