はじめてのiOSアプリ開発

色の名前を表示してみよう(その1)

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
大きめのラベルを用意して、色の名前を和名で表示するようにしてみましょう。
講師:
09:10

字幕

これまでのレッスンで日本の色を使いながら その色を使って背景色をどんどんと アニメーションでスムーズに 変更するというところまで実装できましたので 今度はこれに和色の名前を表示する という部分を追加してみたいと思います ではXcodeで作業していきましょう 和色のためのラベルをまず用意します 見た目を変更する部分は主に Main.storyboard という部分で作業しますので storyboard を開きます そしてこのstoryboardの画面に対して ラベルを追加するために 先程まで消していたんですけれども Hide or Show the utilities と書いてある 画面右上の 一番右側のボタンがありますので このボタンを押して このユーティリティ領域で使える 部品を表示しておきます 今回はこの中の ラベルというのを 使いますので この Label これを選択して これを iPhone の画面の上の ちょうど真ん中のところですね 真ん中に持っていきます ここですね ちょうど横の方にも縦の方にも 点線のラインが出てくるところがありますので これがちょうど真ん中です こうやって指を離すとラベルが追加されます この色の名前は日本の名前ということで 現在のゴシック体で表示されているものよりも おそらく もうちょっと 情緒のある感じにするために 明朝体にした方がいいかなと思いますので 明朝体に変えてみたいと思います まずはこのラベルの大きさを 少し大きくしておきましょう まず左端と右端を 左端につけて 右端につけて このように白い端のボタンをこうやって 動かすことで大きさを調整できます 次に右端のところを見ていただきますと 今ここにアトリビュートインスペクター というのが表示されています ラベルが選択されている時に 右上のインスペクター領域というのを見ると このラベルに対してどういう 設定ができるのかということが ここに対して一覧で 表示されるようになっています 左側から数えて4つ目の アトリビューツインスペクターという名前の ここのインスペクターを使うことで このラベルに対して色んな設定を 行うことができます 例えば今このラベルは文字列が 左側に寄って表示されていますけれども これを Alinement の真ん中 中央寄せ を選択することによって 真ん中や右端に寄せたりということを 切り替えられるようになっています Alinement はセンターにしておきましょう 中央に表示されるようにします そして次にすぐ上のところに Font がありますけど ここの項目を使って このフォントを明朝体にします 明朝体にする方法は ここのフォントの選択パネルを開くボタン― T と書かれたボタンがありますので これを押してやります そして現在のフォントはiPhone全体で 使われている Systemフォントというものが 使われるようになっているんですけど 要するにゴシック体ですね これが使われているんですけど これをCustom という項目にすることで 色んなフォントがここで 選択できるようになります 次に Family をポップアップして その下にある 下の下ですね 2つ下にある ‟ヒラギノ明朝”というのを選択してやります これは皆さんご存知の通りの MacのOS10に用意されている ものすごくきれいな明朝体ですから すごく和の色が引き立ちます さらにその下のStyle と書かれたところに ヒラギノ明朝のW3 なのかW6 なのか 文字の太さを選択できる項目がありますから ここの太さをW6 にして もう少し太い感じにしておきます そしてSize のところを変更して どれぐらいがいいのかというのは試しながら 見ていただくといいんですけど 60 ぐらいがいいかなと思います これでサイズを60に変更しました そして一番下にあるDone ボタンを押すと これでフォントの設定が完了します 今ラベルの設定を色々動かしましたので 変更しましたので このラベルがちょうど真ん中に 今は来ていないと思いますので このラベルをドラッグアンドドロップで ちょっと動かして ラベルが画面中央に来るようにガイドが 表示されるところまで動かしてみましょう 今これでちょうど縦の方にも横の方にも 青い点線が表示されて このラベルが真ん中に来るように 設定されていることが分かります そしてこのラベルはこのままではなくて このまま使うのではなくて このラベルが右端と左端がどういう風に iPhone にくっついているのか― 指定してやる必要がありますので この下にある… ちょっと小さいので 見にくいかもしれませんけど 今マウスの位置にあります ここのピンボタンというのをクリックしまして これでこのラベルが まずこの Constrained to margins という 青いチェックボックスが表示されていますけど このチェックを一回外しておいてください このConstrained to margins というのは 大体外すんですけども そしてこの左側の16 と書いてある所ですね この伸びている赤い点線の所を 一度クリックして 左側に左端がくっつきますよということと それから右側に右端がくっつきますよ ということを示すために 2つこうやってチェックを追加しておきます このラベルの高さはこのまま いきますよということで その下にWidth ラベルのサイズ 横幅を指定するところと それから縦幅としてHeight を 指定するところがあるんですけど この中のHeight 高さは123 ピクセル そのまま使いますよということに チェックをしておいて そして最後一番下にある Add three constrains このボタンを押して ‟制約”と呼ばれる画面のレイアウト条件を 追加してやります これでまず この中の青くなっているところが 成功しているところなんですけれども 画面の左側ですね この画面の左側に ラベルがつきますよということと そして画面の右側のところにも 画面の右端がくっつきますよということ それから画面の高さ ラベルの高さが 123ピクセルということで固定されていますよ ということがここに表示されています 最後 ピンではなくて その左側にある アラインボタンというのを押してやります アラインボタンを押して 今度は縦の方向に真ん中に表示されるように するという制約を追加してやります そのための制約はこの一番下のやつですね vertical center in container という この制約が縦の真ん中を 指定するための制約ですね このボタンを選択してチェックして 一番下にあるAdd one constrain の ボタンを押してやると そうするとこのラベルを選択した時に 縦方向の位置 そして高さ そして左端の処理と右端の処理ということで すべてがしっかりとレイアウト できるようになりましたよということが 青い線で表示されるようになりました ではまずこの状態で このアプリケーションを起動して ラベルが画面に表示されるようになったことを 確認しておきたいと思います では実行ボタンを押しましょう ということでアプリケーションが起動して ラベルが画面の中央に表示されるように なっていることが確認できると思います 現在はこのラベルがまだ日本の和名を 表示するようになっていませんけれど この次のレッスンで和名を表示するように 作り変えていきたいと思います

はじめてのiOSアプリ開発

このコースではXcodeを使ったiOS用アプリの開発に必要な基礎知識を学びます。Xcodeの基本的な使い方から本格的なゲーム制作のためのSprite Kitを用いた制作方法まで、カウントダウンタイマーやスピード暗算ゲームなど3つの簡単なiOS用アプリを作りながら説明します。このコースを見れば、本当に必要なアプリ開発の知識を着実に身に付けられるでしょう!

5時間55分 (52 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月04日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。