SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ

【Web Components入門】Ionic Frameworkで使えるカスタム要素を学ぼう

再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ 第6回

  • X ポスト
  • このエントリーをはてなブックマークに追加

データを表示する

 さて、次はデータを表示するためのコンポーネント群にも目を向けてみましょう。この分類になるものは表3に挙げました。

表3:データを表示するためのコンポーネント
UIの種別 概要
Badge 未読件数などを表示するバッジ
Chip 小さい情報カードを表示する
Icons アイコンを表示する
Item リストの行を表現する
List リストを表現する
Media 画像を表示する
Typography テキストを表示する

 こちらも組み合わせで活きるケースが多いので、組み合わせながら簡単な使い方を紹介します。まずは、「Chip」の<ion-chip>と「Icons」の<ion-icon>を組み合わせてみましょう(リスト4)。

[リスト4]ionic-data-display.html
<h2>Chip & Icons</h2>
<!-- (1) -->
<ion-chip color="primary">Primary</ion-chip>
<ion-chip color="success">
  <!-- (2) -->
  <ion-icon name="checkmark-circle-outline"></ion-icon>
  <ion-label>Success</ion-label>
</ion-chip>

 リスト4を実際に表示すると、図7のようになります。

図7:ChipとIconsの例
図7:ChipとIconsの例

 まず、Chipは基本的に、(1)のような小さく簡潔なテキストを表示して、ステータスなどを表すために利用するUIです。color属性に所定の配色を与えて、情報を表現します。そしてさらに、(2)のように<ion-icon>を組み合わせることで、表現力が向上します。

 <ion-icons>は、name属性に表示したいアイコンの名前を指定することで、そのアイコンを表示できるコンポーネントです。ここで利用できるアイコンは「Ionicon(アイオニコン)」と呼ばれており、Ionic Framework以外のプラットフォームでも利用可能なアイコンセットとして、配布されています(図8)。

図8:Ioniconの検索サイト(https://ionic.io/ionicons/)
図8:Ioniconの検索サイト(https://ionic.io/ionicons/)

 (2)ではSuccessという文言に合わせて、丸で囲んだチェックマークを表すcheckmark-circle-outlineというアイコンを選びました。Chip内の文言を表す<ion-label>よりも前に配置すれば左側に、後ろに配置すれば右側にアイコンが現れます。

 次の例として、「List」の<ion-list>と、その要素である「Item」の<ion-item>でリストを作成します。ついでに、「Badge」の<ion-badge>を使って、付加情報の表示も行ってみましょう(リスト5)。

[リスト5]ionic-data-display.html
<h2>List & Item & Badge</h2>
<!-- (1) -->
<ion-list>
  <!-- (2) -->
  <ion-item>
    <!-- (3) -->
    <ion-label>Item</ion-label>
    <!-- (4) -->
    <ion-badge>100</ion-badge>
  </ion-item>
  <ion-item>
    <ion-label>Item</ion-label>
    <ion-badge>50</ion-badge>
  </ion-item>
  <ion-item>
    <ion-label>Item</ion-label>
    <ion-badge>2</ion-badge>
  </ion-item>
</ion-list>

 リスト5を実際に表示すると、図9のようになります。

図9:ListとBadgeの例
図9:ListとBadgeの例

 リスト表示をしたい場合は、(1)のように、まず一番外側に<ion-list>を配置します。各項目にあたるのが(2)の<ion-item>です。シンプルなケースであれば、<ion-item>の直下にタイトルとなる文字列を直接記述しても問題ありませんが、項目内の表現に一工夫を入れたい場合は、(3)のようにテキストを<ion-label>に入れておきます。

 今回はデータの件数のようなUIを表示したかったので、(4)では<ion-badge><ion-label>の後ろに入れています。このように、コンポーネントを組み合わせることでリッチな表示を実現できます。

まとめ

 今回は、Ionic Frameworkの多彩なコンポーネントの一部を解説しました。他にも魅力的なコンポーネントがたくさんあるので、調べてみるとよいでしょう。

 次回は、ReactコンポーネントからWeb Components製のコンポーネントを利用する方法について解説します。お楽しみに。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
再利用性とカプセル化のためのWeb Componentsを基礎から学ぶ連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/18478 2023/10/16 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング