XcodeでUITextFieldを追加する方法【初心者向け】

Xcodeで【UITextField(テキストフィールド)を追加する方法】を初心者向けに解説した記事です。文字を入力できるUITextFieldは、境界線、文字の色、クリアボタンの設定などが可能なので、その方法も紹介します。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

iPhoneアプリ開発の際に便利なUIパーツをXcodeから追加する方法を紹介する記事です。

今回は、XcodeでUITextField（テキストフィールド）がテーマです。

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。

UITextFieldとは

UITextField（テキストフィールド）は、ユーザーからの文字列入力を受け付ける入力エリアです。テキストフィールドをタップして選択すると、iPhone上でキーボードが自動的に表示されます。

UITextFieldの設置

他のUIパーツと同じように、StoryboardのViewの上にTextFieldをドラッグ&ドロップして設置できます。

textfield

XcodeScreenSnapz0018

設置はこれだけです。

[PR] iPhoneアプリ開発コース

UITextFieldの設定

先ほどは単純に設置しただけですが、インスペクタを使うと細かな設定が可能です。

XcodeScreenSnapz006

設定できる主要なものを紹介します。

テキストフィールドの境界線

インスペクタのborderStyleプロパティを変更することによって境界線を変更できます。

罫線のみ

borderStyleプロパティ：UITextBorderStyleLine

XcodeScreenSnapz002

罫線＋影

borderStyleプロパティ：UITextBorderStyleBezel

角丸四角形

borderStyleプロパティ：UITextBorderStyleRoundRect

XcodeScreenSnapz004

境界線なし

borderStyleプロパティ：UITextBorderStyleNone
XcodeScreenSnapz005

文字の色

同じく、インスペクタのColorプロパティを変更することによって文字色を変更できます。

XcodeScreenSnapz007
XcodeScreenSnapz008

プレースホルダ

インスペクタのPlaceholderに文字列を入力すると、テキストフィールドが空の場合に、薄いグレーで入力した文字列が表示されます。

XcodeScreenSnapz009

クリアボタン

テキストフィールドに○の中に×の図形を表示し、それをタップすると入力内容を消去するボタンの設定です。

インスペクタのClear Buttonから設定が可能です。

iOS SimulatorScreenSnapz001

選択項目の意味は下記の通りです。

Never appears：表示されません
Appears while editing：編集時のみ表示されます
Appears unless editing：非編集時に表示されます
Is always visible：常に表示されています

その他の設定項目

その他にも、英大文字の取り扱い、英語のミスタイプの自動修正、英語のスペルチェック、キーボードの種類などが設定できます。

用途に合わせてご利用ください。

今回の記事は以上です。

さらにXcodeを使いこなしたい場合は、XcodeでUISwitchを追加する方法を合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。

XcodeでUISegmentedControlを追加する方法【初心者向け】

iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。今回は、XcodeでUISegmentedControl（セグメン...

iPhoneアプリ開発

iPhone(iOS)アプリを実機でテストする方法【初心者向け】

Xcodeを使ってiPhoneアプリを開発して、シミュレーターでの確認が完了したら、実機でもテストしてみましょう。今回は、初心者向けにiPhoneアプリ...

iPhoneアプリ開発

XcodeでiPhoneアプリにUIパーツを追加する方法【初心者向け】

XcodeではUIKitを使って、iPhoneアプリにUIパーツを追加することができます。UIパーツを使えば、ボタンやラベルなどを表示でき、アプリのUIデザイン...

iPhoneアプリ開発

【ゼロから作る！】初心者から始める！iPhoneアプリの開発手順とは

iPhoneアプリの開発手順をゼロから紹介していきます。今回の記事では、プログラミングをやったことがないという初心者の方にも分かりやすく2人のキャラクタ...

iPhoneアプリ開発

【100 Days of Swift】Swiftチュートリアルの学習！100日間の軌跡

Astadiaという企業でエンジニアをしているSam Lu氏が「100 Days of Swift」という100日間でSwift開発についてまとめています。 ...

iPhoneアプリ開発

XcodeでUINavigationBarを追加する方法【初心者向け】

iPhoneアプリ開発では、アプリの画面を作るのに便利なUIパーツが多数用意されています。今回は、XcodeでUINavigationBar（ナビゲーシ...

iPhoneアプリ開発

あわせてよく読まれている記事

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。異なる単位で複雑な計算も簡単に指定できます。レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。目次UITextFieldとはUITextFieldの設置UITextFieldの設定そもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？田島悠介いろいろ方法があるけどcalcファンクションを使えば簡単だよ。大石ゆかり calc？CSSで計算ができるんですか？田島悠介その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。大石ゆかりへぇー。わかりやすいですね。田島悠介そうなんだ。まずはどういった記述の仕方をするか見てみよう。大石ゆかりはい！ calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。 calcファンクションを使うメリット異なる単位で計算することができる計算が明白になる calc()は結果の値ではない異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。 [PR] iPhoneアプリ開発コースcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。構文プロパティ（widthなど）: calc(式) 四則演算が使用できる指定する式では四則演算の演算子（+、-、*、/）が使えます。前後に空白が必要加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。入れ子が可能 calcファンクションは入れ子にできます。入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。 calcファンクションの実装例実際にcalcファンクションを使った実装例を見てみましょう。ルートに基づいたサイズ指定要素を3等分の幅にする左右のセンタリング上下の中央配置ヒーローヘッダーの高さ調整ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。ソースコード「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">

CSS

WordPressでカスタムフィールドを設定する方法【初心者向け】

WordPressには便利な機能としてカスタムフィールドがあります。そのカスタムフィールドについて初心者向けに設定方法を紹介します。カスタムフィールドの設定は、初心者にとっては難しいところもあるので、プラグインを使った方法もあわせて解説していきます。目次UITextFieldとはUITextFieldの設置UITextFieldの設定大石ゆかり田島メンター！！WordPressのカスタムフィールドってなんですか？田島悠介カスタムフィールドっていうのはね、記事を書くときのフォーマットを自分用にカスタマイズできる機能なんだ。カスタムフィールドとは WordPressの投稿フォームには、デフォルトで「タイトル」と「本文」の2つがあります。ここに入力する情報を追加できるのがカスタムフィールドです。例えば、不動産サイトのようにたくさんの情報を扱うサイト飲食店紹介など、決まったフォームで記事を書きたいブログなどを構築する時に、デフォルトの機能ではお店の情報などを定型的に表示することができず不十分です。そこで便利なのが、「カスタムフィールド」です。カスタムフィールドを使うと「タイトル」と「本文」だけでなく、自分好みの任意フォームを追加できます。カスタムフィールドを使えば、あとで「評価が高い順番に並べ替える」といったことも柔軟に行えるようになります。カスタムフィールドを使うメリットカスタムフィールドを使う主なメリットは、主に以下の４つがあります。決まった項目の入力データが扱いやすいスタイル（CSS）を管理しやすい入力データを値として扱うことでデータの表現性が上がる入力忘れを防げるこれら４つのメリットと利用例を記載します。決まった項目の入力データが扱いやすい例えばワインを毎日紹介しているサイトがあった場合、その定価は文章中に入れてしまうよりも、カスタムフィールドで入れておくと、あとで価格順に並べてみたり、年間の合計金額を算出するようなことが簡単にできます。スタイル（CSS）を管理しやすいフィールドには特定のクラスを付加することで、一括してスタイルの管理ができます。入力データを値として扱うことでデータの表現性が上がる文章の中に書くと、たとえば価格などは文字列と扱われてしまいますが、フィールドで入力したデータは数値として扱うことができます。そのため後処理などで様々に加工してから出力することが可能になります。入力忘れを防げる入力フィールドが決められていることで、必須項目などの記載漏れを減らすことができます。 [PR] iPhoneアプリ開発コースカスタムフィールドを表示させる方法それでは早速カスタムフィールドを表示させる方法を紹介します。デフォルトままでは表示されていないので、まずページ右上の３点リーダー「⋮」をクリックします。右下の最下段に「設定」がありますので、そちらをクリックします。設定画面の左側で「パネル」をクリックし、さらに最下段の「カスタムフィールド」のスイッチをオンにします。そして表示された「有効化してリロード」をクリックします。すると、投稿本文の下に、カスタムフィールドが表示されます。カスタムフィールドの編集はここで行うことになります。任意の項目を追加すると、次回以降はプルダウンから選択することができます。この表示までは簡単にできました。ただし、カスタムフィールドはとても便利な入力補助ですが、実はこのフィールドに入力、記事を更新しただけでは記事に出力されません。出力するためには、テーマを直接編集する必要があります。大石ゆかりカスタムフィールドについてはわかったんですけど、もう少し手軽に扱うことってできないですか〜？田島悠介プラグインを使うと手軽に使えるよ。そこで今回は初心者の方でも負担・ミスなくカスタムフィールドを活用するためのプラグインを紹介します。カスタムフィールドが使えるプラグインカスタムフィールドが使えるプラグインはいくつかありますが、今回は「Custom Field Template」を紹介します。プラグインのインストールまずは、Custom Field Templateをインストールしましょう。やり方がわからない場合は、WordPressプラグインのインストール方法の記事をご覧ください。インストールが完了すると、管理画面＞設定＞カスタムフィールドテンプレートにプラグインが表示されます。カスタムフィールドテンプレートの設定プラグインからカスタムフィールドの設定を行います。たくさん入力項目があるように見えますが、最低限設定すべきなのは2つです。まずは2つを登録しておきましょう。 1.カスタムフィールドテンプレートオプション（1番目） ※入力フォームの登録 2.[cft] and [cftsearch] ShortCode Format（4番目） ※表示テンプレートの登録今回はカフェブログを作るという想定で、1つずつ紹介していきます。入力フォームの登録「テンプレートタイトル」と「テンプレートコンテンツ」に入力します。記述ルールはシンプルで、 [ID]　：カスタムフィールドのID type　：カスタムフィールドの種類（＋サイズ） label　：投稿画面で表示されるテキスト（※全角などの注意事項）という３行で記述されています。また、typeで使えるものとしては、 text：一行のテキストフィールド textarea：複数行のフィールド file：画像のアップロードなどがあります。チェックボックスやラジオボタンも利用できます。なお今回、テストで記入したコンテンツは下記のとおりです。＝＝＝＝＝＝＝＝＝＝＝＝ [お店名前] type = text size = 35 [感想] type =textarea [評価] type = checkbox value = ★★★★★ # ★★★★☆# ★★★☆☆# ★★☆☆☆# ★☆☆☆☆ label = ※５段階評価 [住所] type = text size = 35 ＝＝＝＝＝＝＝＝＝＝＝表示テンプレートの登録 [cft] and [cftsearch] ShortCode Formatに、タグなどを使って表示させたいテンプレートを作成します。この時に「PHPを使用する」にチェックを入れるとPHPが使用できます。ここで[お店名前]のように、テンプレートのコードを書くと引用されます。カスタムフィールドテンプレートを使った記事投稿投稿画面を開くと、「本文」の下にカスタムフィールドの項目が表示されています。ここに、表示項目にそってコンテンツを入力します。そして、本文中のカスタムフィールドを挿入したい場所にショートコード[cft format=0]を入力します。（※=の後の数字が、テンプレートの番号と対応しています）入力が完了すると、このように表示されました。カスタムフィールドの設定は以上です。他のカスタマイズ方法として、WordPressのウィジェット編集方法の記事もあります。ぜひ活用してみてください。大石ゆかり同じフォーマットの記事をたくさん書くときには、カスタムフィールドは欠かせないですね！田島悠介そうだね。記事を書くスピードも早くなるし、何人かで書くときなんかにも同じように書けるのがいいね！大石ゆかりそうですね♪ まとめ今回はカスタムフィールドについて次の４つの内容でご紹介しました。カスタムフィールドとはカスタムフィールドを使うメリットカスタムフィールドを表示させる方法カスタムフィールドが使えるプラグイン最初は難しく感じるかもしれませんが、慣れてくると応用範囲が広い機能ですので、是非使いこなしてみてください。 WordPressを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい WordPressでのサイト制作を学習していて、このように思ったことはありませんか？テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。

WordPress

strstr関数の使い方！PHPで文字列を検索する方法【初心者向け】

PHPで文字列の中から特定の文字列を探す場面というのは比較的多いかと思います。文字列を検索する方法はいろいろありますが、今回は「strstr関数」「strpos関数」「preg_match関数」について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 strstr・・・区切り文字の前後の文字列を取得します。 strpos・・・文字列が最初に見つかる位置を取得します。 preg_match・・・正規表現で文字列を検索します。すべての関数の使い方を覚える必要はありませんが、1つでも書き方を覚えておくといざという時に便利でしょう。目次UITextFieldとはUITextFieldの設置UITextFieldの設定そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。大石ゆかり PHPで文字を探すプログラムを作りたいんですけど、どうすればいいんでしょうか。田島悠介どうして文字を探したいのかな？何かの文字で区切っているから？それとも文字の位置を探したい？大石ゆかりええと、文字を探す方法がそんなにいろいろあるんですか？田島悠介そうなんだ。PHPではいろんな文字列の検索方法があるよ。まずは、区切り文字で検索する方法から見てみよう！区切り文字で分けて検索 – strstr関数 strstr関数は対象の文字列から検索文字列を探し、見つかったら検索文字列から対象の文字列の最後までを返します。区切る文字列を境にして文字列を取得したいときに使えます。構文検索対象の一部分の文字列 = strstr(検索対象の文字列, 検索文字列, [検索文字列より前の部分を取得するか]) 第1引数は検索文字を探し出す対象の文字列です。第2引数は検索する文字列です。検索文字列が半角のアルファベットの場合は、大文字小文字を区別して検索されます。第3引数は省略でき、検索文字より前の部分を返したい場合にtrueを指定しますが、標準ではfalseつまり検索文字より後の部分を取得します。戻り値は検索文字列が検索対象の文字列から見つかったときに、検索文字列を含む文字から検索対象の文字列の最後までの文字列を返します。たとえば、「dog&cat」の文字列から「&」を検索した場合、「&cat」が戻り値として返ります。ただし第3引数にtrueが指定されている場合は、検索文字を含まない前の部分を返します。もし検索文字が見つからなかったときはfalseを返します。 ※ある文字列中に別の文字列が存在するかどうかを確認したいだけならstrpos関数またはstr_contains関数（PHPの新しいバージョン8で使用可能)を使います。 ※大文字小文字を区別しないで検索したい場合は「stristr関数」を使うことで実現できます。 strstr関数の使い方 strstr関数を使ってある文字列で区切った文字列の分割をしてみましょう。ソースコードフルネーム「山田太郎」を半角スペースで姓と名に分けて出力するプログラムです。 <?php //検索文字列（半角スペース） $search = ' '; //対象文字列（空白で区切られたフルネーム） $target = '山田太郎'; echo "対象文字列：$target<br>"; //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); //空白を削除（「太郎」->「太郎」） $firstName = trim($firstName); //姓の取得（空白より前） $lastName = strstr($target, $search, true); //検索結果はあるか if($firstName != false || $lastName != false){ //姓名の出力 echo "姓：$lastName<br>"; echo "名：$firstName"; } else { echo "文字が見つかりませんでした。"; } ?> ※ダブルクォーテーションで変数を囲うと、“$変数名”で変数の値を展開して出力できます。変数の展開について詳しくは公式ドキュメント「変数のパース」をご覧ください。 ※本来なら出力したいWebページ内で<html>タグなどを含める必要がありますが、今回はPHPのプログラムの解説が目的なので省略しています。基本的なPHPの書き方について詳しくは解説記事「基本的なPHPの書き方」をご覧ください。表示結果解説 //名の取得（検索文字列の空白を含む後ろの文字） $firstName = strstr($target, $search); 検索対象の文字列（$target）から検索文字（$search）が見つかったところより後ろの文字列を取得します。検索対象の文字列

PHP

独自のカスタムフィールドを作成できる！Advanced Custom Fieldsの使い方ーWordPressプラグイン【初心者向け】

今回は、WordPressで「Advanced Custom Fields」プラグインを使用する方法を解説します。 WordPressでは、記事投稿の際に「カスタムフィールド」と呼ばれる追加のデータを設定することができるようになっています。プラグイン「Advanced Custom Fields」を使うと、さらに細かい設定が可能なカスタムフィールドを独自に作成することができます。目次UITextFieldとはUITextFieldの設置UITextFieldの設定大石ゆかり田島メンター！！記事を見栄え良くみせたいんですけど、何かいい方法がないですか？田島悠介それならカスタムフィールドを使ってみたら？「Advanced Custom Fields」っていうプラグインを使うと、自分なりにカスタムフィールドを作れるよ。大石ゆかりあ、それやってみたいです！！教えてください〜！！！ Advanced Custom Fieldsとは Advanced Custom FieldsとはWordPressに任意の情報を紐付ける機能です。もともとWordPressはブログシステムとして構築されました。非常に便利なシステムだったのでブログ以外にも利用されるようになりました。利用される中でタイトルや本文といったブログフィールド以外のフィールドが、ユーザーごとに必要になりました。 Advanced Custom Fieldsを利用することで、これらの任意情報を新たなフィールドとして構築し、WordPressのデータと紐付けて使うことが可能になります。 Advanced Custom Fieldsプラグインのインストール方法ここでは、Advanced Custom Fieldsプラグインのインストール方法を解説します。 WordPressの管理画面にあるメニューから「プラグイン」をクリックして、「新規追加」をクリックします。右上の検索フォームで「Advanced Custom Fields」を検索して、「インストール」をクリックして「有効化」をクリックするとインストールが完了します。インストールがわからない場合はWordPressのプラグインをインストールする方法をご覧ください。 [PR] iPhoneアプリ開発コースフィールドグループを作成・設定する WordPress管理画面の左メニューから「カスタムフィールド」→「カスタムフィールド」を選択します。「新規追加」をクリックします。「フィールドグループを新規追加」の画面が表示されます。フィールドグループに名前を入力し、「フィールドを追加」をクリックします。「フィールドラベル」に入力された項目は記事作成画面で投稿者に表示されます。この項目に関する分かりやすい名前を入力します。「フィールド名」でこのカスタムフィールドのフィールド名を設定します。 ※「フィールド名」は「テーマの編集」でコードを追加する際に値として使用するため、半角英数字で入力します。 (「フィールドラベル」で日本語を入力した場合同じものがここに自動でコピーされますが、それも消しておきます) 今回は画像のフィールドとテキストのフィールドをひとつずつ作成してみます。まずここでは「フィールドタイプ」から「画像」を選択します。「フィールド記入のヒント」は「フィールドラベル」同様記事作成時に投稿者に表示される項目です。管理者以外の人が利用する場合などに向けて分かりやすい説明を入力しておきます。 (特に必要がない場合は空欄のままでOKです) 返り値の値は今回は「画像ID」を選択しています。ここで選択した項目によって後で挿入するコードの内容が変わります。「フィールドを閉じる」をクリックするとそのフィールドの設定画面が閉じられます。複数のフィールドを編集する時に便利です。さらにフィールドを追加したい場合はここでまた「フィールドを追加」をクリックします。先ほどと同様に「フィールドラベル」と「フィールド名」を設定します。今回はテキストのフィールドを作成するので「フィールドタイプ」から「テキスト」を選択しました。すべての設定が完了したら右上の「公開」をクリックします。記事作成画面を見ると本文とは別に、先ほど作成した「画像」と「テキスト」を入力する項目が追加されていることが確認できます。「テーマの編集」からコードを追加する次に、この新規フィールドで入力した項目がサイトに反映されるように「外観」→「テーマの編集」から指定されたコードを挿入します。単一記事の投稿 (single.php)を編集します。コードを挿入する箇所はテーマによって異なります。今回は「SoSimple」テーマの以下の場所にコードを追加しています。 ※各フィールドを使用する際のテンプレートはAdvanced Custom Fields公式サイトの「Documentation」→「Field Types」で表記されています。 https://www.advancedcustomfields.com/resources/ また、ここで先ほど設定した「フィールド名」を使用します。例えば、テキストの場合は <h2><?php the_field('text'); ?></h2> のtextの部分が「フィールド名」になります。実際にカスタムフィールドがサイトで表示されるかを確認します。投稿画面から画像とテキストを追加し、記事を公開します。入力した項目がサイトに反映されました。カスタムフィールドの表示場所は、「テーマの編集」でコードを挿入した場所によって変わります。このようにカスタマイズすることができました。まとめ Advanced Custom Fieldsを利用することで、WordPressでブログ以外のフィールドをカスタマイズすることができました。同じ表現いろんなページで使いたい場合などにも、Advanced Custom Fieldsで登録しておくと、使い回しができて便利でした。初心者でも簡単に設定できるので、ぜひ試してみてください。ぜひ、WordPressの使い方を覚えましょう！大石ゆかり見栄えいいですね〜。同じ記事でも工夫次第で印象が違いますね〜。田島悠介そうだね。カスタムフィールドは色々工夫できるから、場面によって色々工夫してみるといいよ。大石ゆかりはい！ありがとうございました！！！ WordPressを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたい WordPressでのサイト制作を学習していて、このように思ったことはありませんか？テックアカデミーのWordPressコースでは、第一線で活躍する「プロのエンジニア/Webデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、WordPressを使ったオリジナルサイト構築を学べます。まずは一度、一週間の無料体験で学習の悩みや今後のキャリアについて話してみて、「現役のプロから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします。

WordPress

今年のトレンド！2016年最も売れたフォント、トップ50を集めてみた

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。また、本記事は、Doru Ciobanu氏によって投稿されました。タイポグラフィは、独自の世界観、テクニック、統一感を組み合わせたアートです。素晴らしいデザインには、素晴らしいタイポグラフィがあります。 Webデザインまたは出版物のデザインでも、パンフレットやユーザーインターフェースのデザインでも、ロゴのデザインでも、プロジェクトを成功させるために重要な鍵となるものの1つはフォントです。フォント、色、その他デザインをどのように組み合わせるかという選択が、成功と失敗の分岐点となります。こうした細部に十分な注意を払わないがために、優れた製品を生み出すために費やした全ての努力が無駄になることもあります。しかし幸いなことに、優れたタイポグラフィのためのガイドとなるリソースは、豊富に存在しています。そして、これから紹介するのは、2016年に最も売れた50のフォントです。 1. FF DIN デザイナー：Albert-Jan Pool デザインされた年：1995 発行者：FontFont FF Dinは、1995年から2009年にかけて、オランダのデザイナーAlbert-Jan Poolｚ氏によって制作されたフォントです。FF Dinには、20のウェイト（フォントの太さ）があります。編集、出版物、広告、パッケージ、ブランディング、クリエイティブ産業（creative industries：知的財産権に関わるデザイン）、ポスター、看板、Webや画面の設計に適しています。なお、キリル文字とギリシャ語の書記体系については、サポートが限られています。 2. Brandon Grotesque デザイナー：Hannes vonDöhren デザインされた年：2010 発行者：HVD Fonts Brandon Grotesqueは、6つのウェイトとそれに対応する6つのイタリック体から成る、有名なサンセリフのフォントです。このフォントは、可読性を高めるために光学的な修正を加えた幾何学的形状から、インスピレーションを受けています。 Brandon Grotesqueは機能的かつエレガントなフォントです。ウェイトの太さをthinで色をブラックにすると、展示デザインに適しています。 Brandon Grotesqueは、洗練されたプロフェッショナルな印象を与えるデザインを生み出すには良い選択です。また、西ヨーロッパ言語だけでなく、中欧および東ヨーロッパ言語をサポートする拡張文字のセットもあります。 [PR] iPhoneアプリ開発コース3. Century Gothic デザイナー：Monotype Design Studio　Sol Hess　Morris Fuller Benton デザインされた年：1990-1995-2007 発行者：Monotype Century Gothicは、Futuraフォントの競合他社の2つの書体から派生したフォントですが、Futuraフォントの影響も強く受けています。軽くて広々とした印象の書体であり、クリーンな縁取りを備えた、細部まで完璧なフォントです。見出しや大きな看板のデザインには理想的です。 4. Proxima Nova デザイナー：Mark Simonson デザインされた年：2005 発行者：Mark Simonson Proxima Novaのフォントファミリーは、有名なProxima Sansフォントの完全な復古版です。OpenTypeフォント機能は48個に拡張されました。 3つの幅には、それぞれ16のフォントが対応しています。人間的な比率と幾何学的なデザインを組み合わせた、スタイリッシュなフォントです。ほとんどのラテン語系言語の文字をサポートしています。 5. Avenir デザイナー：Adrian Frutiger デザインされた年：1988 発行者：Linotype Avenirも、Futuraフォントの影響を受けたフォントですが、幾何学的なデザインを取り入れたフォントではありません。垂直方向の文字が、水平方向の文字とアセンダ（アルファベット文字において、標準的な高さのx文字よりも背の高いb、fなどの文字の、上に突き出た部分）よりも太い幅になっているデザインです。可読性が重視されるテキストに最適です。 6. Helvetica Neue デザイナー：Edouard Hoffmann デザインの日付：1983 発行者：Linotype Helveticaは世界で最も人気のある書体の1つであり、マーケティングが成功した例です。このフォントファミリーは51種類のウェイトから構成されています。古典的なサンセリフのフォントであり、時代を超えたニュートラルなデザインです。あらゆるコミュニケーションや情報媒体に適したデザインです。 7. Avenir Next Pro デザイナー：Adrian Frutiger　Akira Kobayashi デザインされた年：2004～2007 発行者：Linotype Avenirファミリーは、これまでに作成されたフォントファミリーの中で最も優れたものの1つですが、画面上での表示の問題があったため、これを解決するために代替フォントのAvenir Nextが開発されました。 32種類のフォントから構成されています。：それぞれに8種類のウェイトがあり、ローマ字とイタリックに対応しています。また2種類の幅を選択できます。グリフは、小文字と同じ高さの大文字、下付き文字、上付き文字、合字を含むように拡張されました。 8. Isidora デザイナー：Enrique Hernandez デザインされた年：2016 発行者：Latinotype Isidoraは、機能性に重点を置いて開発された、現代的な幾何学的フォントです。表現力豊かでフレンドリーな印象ですが、合理性を兼ね備えたフォントでもあります。 Isidoraは28種類のフォントから構成されていて、サブファミリーフォントとして、7ウェイトの2つのフォントがあります。ロゴ、ブランディング、見出し、パッケージ、Web上での利用、出版物に最適です。複数の言語をサポートしているユニバーサルデザインフォントです。 9. Sagona デザイナー：Rene Bieder デザインされた年：2016 発行者：Rene Bieder 力強いセリフ体を特徴とするフォントです。小さな文字サイズのテキストと見出しの両方に使用できる汎用の書体です。このフォントファミリーはイタリック体に対応していて、9つのウェイトがあります。 OpenTypeフォントの機能として、代替グリフ、合字、オールドスタイル数字などが幅広くサポートされています。 10. Trade Gothic デザイナー：Jackson Burke デザインされた年：1948 発行者：Linotype Trade Gothicは曲線的デザインのサンセリフ体のフォントです。サンセリフ体のフォント特有の厳密さを破っています。 Trade

Webデザイン

Javaで文字列の空白を削除する方法を現役エンジニアが解説【初心者向け】

Javaで文字列の空白を削除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。入力された名前や電話番号に含まれる不要な空白文字を削除する方法が分かります。目次UITextFieldとはUITextFieldの設置UITextFieldの設定そもそもJavaについてよく分からないという方は、Javaとは何なのか解説した記事を読むとさらに理解が深まります。大石ゆかり名前を入力させるプログラムを作っているんですが、余分なスペースが入っていてデータがそろわないんです・・・山田　太郎　　, 　　　山田　花子, 　山田　三郎田島悠介それは大変だね。文字列を扱うString型からstripメソッドやreplaceAllメソッドで余分な空白文字を削除した文字列を取得できるよ。大石ゆかりそんな便利な機能がString型にあるんですね。田島悠介そうなんだ。文字列の前後の空白を削除するならstripメソッド、文字列中のすべての空白を削除するならreplaceAllメソッドが使えるよ。どちらのメソッドも全角と半角スペースの両方に対応できるんだ。大石ゆかりそうなんですね！さっそく使い方を教えてください！前後の空白を削除する（stripメソッド）文字列を扱うStringクラスにあるstripメソッドで、文字列の前後にある半角スペースと全角スペースの空白文字を削除した文字列を取得します。 ※stripメソッドは2017年から使えるようになったJava 11に含まれるメソッドです。stripメソッドが使えない場合、replaceAllメソッドかtrimメソッドを使います。replaceAllメソッドについては後半の解説記事「文字の間の空白を削除する（replaceAllメソッド）」、trimメソッドとstripメソッドの違いについては「stripメソッドとtrimメソッドの違い」の解説記事をご覧ください。 ※文字の間にある空白文字を削除する場合は、後半の解説記事にあるreplaceAllメソッドを使います。書式結果を代入する変数 = String型.strip(); stripメソッドに引数はありません。 String型で宣言した変数などからstripメソッドを呼び出します。 stripメソッドを呼び出された文字列から文字列の前後の空白文字（半角スペースと全角スペース）を削除した文字列が返されます。また、改行コードやタブコードなども同様に削除できます。 stripメソッドを呼び出した文字列そのものが変化するわけではなく、戻り値として結果が返ります。【参考】Javaの特殊な文字 Javaでは改行やタブなどの特殊な文字を表現する方法があります。特殊な文字の前に、エスケープシーケンス（\または¥）をつけます。改行は「\n」（または¥n）、タブは「\t」（または¥t）と表記します。 ※Windowsでは使用しているアプリやフォント（書体）により、バックスラッシュ（\）が円記号（¥）で表示される場合があります。サンプルコード前後に空白文字がある文字列から、前後の空白文字をstripメソッドで削除したものを取得します。ソースコード public class StripSample { public static void main(String[] args) { //前後に空白文字が入った文字列 String str_han_sp = " 前後に半角スペース "; String str_zen_sp = "　　前後に全角スペース　　　"; //加工前の文字列を表示

Java

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

XcodeでUITextFieldを追加する方法【初心者向け】

UITextFieldとは

UITextFieldの設置