SHOEISHA iD

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

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

ComponentZine(InputMan)(AD)

JavaScript入力コントロール「InputManJS」にBootstrapを組み合わせてより便利な入力フォームを作ろう

軽量で多機能なJavaScript入力コントロール「InputManJS」の紹介

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

InputManJSとBootstrapを組み合わせて利用する際の注意点

 Bootstrapはそれ自身で入力コントロールを提供しているため、単純にInputManJSと組み合わせると問題になる場合があります。例えばリスト4(3)で示したform-controlクラスを指定した<input>要素にInputManJSのコントロールを設定すると、InputManJSとBootstrapのスタイルが両方適用されて、図5の通り意図しない表示となります。

図5:InputManJSとBootstrapのスタイルが両方適用された表示(p003-mixed)
図5:InputManJSとBootstrapのスタイルが両方適用された表示(p003-mixed)

 BootstrapとInputManJSを併用する場合の注意点が、グレープシティのナレッジベースに記述されており、Bootstrapのスタイルを打ち消すCSSを利用する方法が案内されています。本記事ではこの内容をもとに、リスト5のCSSを利用します。

[リスト5]InputManJSとBootstrapを共存させるCSS(p004-mixed-fixed/index.css)
.form-control.gcim-layout,   /* テキストコントロールなどの外枠 */
.form-select.gcim__combobox, /* コンボコントロールの外枠 */
.form-select.gcim-layout     /* リストコントロールの外枠 */
{
  /* サイズ設定 ...(1)*/
  width: 100%;
  /* BootstrapのCSS指定をリセット ...(2)*/
  display: block;
  padding: unset;
  font-size: unset;
  line-height: unset;
  border: unset;
  border-radius: unset;
  -webkit-box-shadow: unset;
  box-shadow: unset;
  -webkit-transition: unset;
  -o-transition:unset;
  transition:unset;
  background-image: none;
}
/* コンボコントロール */
.form-select.gcim__combobox .gcim-layout {
  /* サイズ設定 ...(3)*/
  width: 100%;
}

 テキストコントロールなどの外枠に対して、サイズ設定(1)と、BootstrapのCSS指定をリセットする記述(2)を行います。またコンボコントロールにサイズ設定(3)を行い、Bootstrapのセレクトボックスと同じように、横幅いっぱいにコントロールが表示されるようにします。

 リスト5のCSSを設定すると図6の通り表示され、Bootstrapを利用したWebページでInputManJSを違和感なく利用できます。

図6:InputManJSとBootstrapを共存させたサンプル(p004-mixed-fixed)
図6:InputManJSとBootstrapを共存させたサンプル(p004-mixed-fixed)

[補足]InputManJSとBootstrap、どちらのコントロールを使う?

 InputManJSとBootstrapを併用する場合、両方で提供されているテキストボックスやリストなどの基本的なコントロールは、求める機能や動作に応じてどちらを利用するか選択することになります。

 InputManJSには、後述するテキスト入力のフリガナ機能など、入力に特化した機能を多く持っているため、これらの機能を活用して入力フォームの使い勝手を高めることができます。

 また、日付を入力するカレンダーの機能は、Bootstrapではプラグインで利用できますが、日本語表示や六曜・元号といった細かい使い勝手で、InputManJSの日付時刻コントロール・カレンダーコントロールが有利です。

 さらに、電卓コントロールやソフトウェアキーボードといったInputManJSの独自機能も、Bootstrapを補完するのに有効に活用できます。

 逆に、後述のRange(スライダー)のように、InputManJSで提供されないBootstrapのコントロールもあるので、双方の強みを補完して使い分けることができます。

BootstrapでInputManJSにレスポンシブ機能を付加

 InputManJSは入力部品に特化したライブラリーなので、レイアウト調整の機能は提供しません。一方でBootstrapは、レスポンシブ機能を実現するレイアウト調整の機能を多く提供します。ここではInputManJSを利用したフォームに、Bootstrapによりレスポンシブ機能を追加する例を説明します。このサンプルは、Webブラウザの横幅が変わると、InputManJSの入力コントロールを配置したレイアウトが動的に変化します。

図7:InputManJSとBootstrapで実現するレスポンシブなフォーム(p005-responsive)
図7:InputManJSとBootstrapで実現するレスポンシブなフォーム(p005-responsive)

 このサンプルのHTML記述を、リスト6に示します。

[リスト6]レスポンシブ機能を実現するHTML記述(p005-responsive/index.html)
<div class="row"><!--(1)-->
  <div class="form-group mb-2 col-md-12 col-lg"><!--(2)-->
    <label for="gcComboBox">ドロップダウン(コンボ)</label>
    <select class="form-select" id="gcComboBox"></select>
  </div>
  <div class="form-group mb-2 col-12 col-md"><!--(3)-->
    <label for="gcListBox">ドロップダウン(リスト)</label>
    <select class="form-select" id="gcListBox"></select>
  </div>
  <div class="form-group mb-2 col-6 col-md"><!--(4)-->
    <label>カレンダー</label>
    <div style="width:100%;" id="gcCalendar"></div>
  </div>
  <div class="form-group mb-2 col-6 col-md"><!--(5)-->
    <label>電卓</label>
    <div id="gcCalculator"></div>
  </div>
</div>

 Bootstrapでレスポンシブを実現するポイントは、(1)のrowクラスと、(2)~(4)に指定されているcol-***クラスです。Bootstrapでは、rowクラスを指定した要素の配下に、「col-<ウインドウ横幅>-<要素の幅>」クラスを指定すると、そのウインドウ横幅のときの要素の幅を指定します。ウインドウ横幅は以下から選択できます。

  • Extra small(xs):~575px
  • Small(sm):576~767px
  • Medium(md):768~991px
  • Large(lg):992~1199px
  • Extra large(xl):1200~1399px
  • Extra extra large(xxl):1400px~
図8:Bootstrapのグリッドシステム(公式ページ(https://getbootstrap.com/docs/5.1/layout/grid/#grid-options)より)
図8:Bootstrapのグリッドシステム(公式ページより)

 また、要素の幅はウインドウ幅を12分割して1から12まで指定できます。要素の幅を指定しないときは、幅が均等になるように割り付けられます。

 例えば(2)の「col-md-12 col-lg」は、ウインドウ横幅md(768px~991px)では12(つまり横幅いっぱい)で表示し、lg(992px以上)では他のコントロールと均等に割り付けます。(3)~(5)も同様に、ウインドウ横幅に対するウインドウ幅を「col」から始まるクラスで設定することで、図7の動的なレイアウトを実現します。

InputManJSとBootstrapを組み合わせた入力フォームの例

 上で紹介したBootstrapのレスポンシブ機能などをInputManJSコントロールと組み合わせて、双方の機能を生かして実装したアンケートフォームの例(図9)を紹介します。

図9:InputManJSとBootstrapで作ったアンケートフォーム(p006-questionnaire)
図9:InputManJSとBootstrapで作ったアンケートフォーム(p006-questionnaire)

 このフォームでは、図10の通り、InputManJSのテキスト、複数行テキスト、コンボ、日付時刻の各コントロールを利用しています。

図10:フォームで利用されているInputManJSのコントロール(p006-questionnaire)
図10:フォームで利用されているInputManJSのコントロール(p006-questionnaire)

 以下では実装のポイントを説明します。詳細はサンプルコードを参照してください。

レスポンシブ機能による動的なレイアウト

 前述したBootstrapのレスポンシブ機能を利用して、項目名ラベルと入力フォームの位置が、縦並びと横並びで切り替わるようになっています(図11)。

図11:ウインドウ幅が小さいときのアンケートフォーム(p006-questionnaire)
図11:ウインドウ幅が小さいときのアンケートフォーム(p006-questionnaire)

フリガナの自動入力

 InputManJSのテキストコントロールが備えるフリガナ機能を利用して、名前の入力時にフリガナが自動入力されます(図12)。

図12:フリガナの自動入力(p006-questionnaire)
図12:フリガナの自動入力(p006-questionnaire)

 この機能は、リスト7の実装で実現できます。

[リスト7]フリガナの自動入力を実現する実装(p006-questionnaire/main.js)
// フリガナモードを全角カタカナに設定 ...(1)
gcFamilyName.setIMEReadingStringKanaMode(GC.InputMan.KanaMode.Katakana);
// 名前の入力時にフリガナを反映 ...(2)
gcFamilyName.onIMEReadingStringOutput((sender, eArgs) => {
  gcFamilyKana.text = eArgs.readingString;
});

 (1)では、苗字のテキストコントロールgcFamilyNameのsetIMEReadingStringKanaModeメソッドで、フリガナを全角カタカナに設定しています。(2)では、gcFamilyNameで文字が入力された場合、そのカナを苗字フリガナのテキストコントロールgcFamilyKanaに設定します。

Bootstrapのコントロールでフォームを装飾

 このフォームでは、画面上部のAlert(アラート表示)やCollapse(折り畳み表示)、フォーム内のRange(スライダー)など、Bootstrapのコントロールを利用して、フォームの完成度を高めています(図13)。

図13:フォームで利用されているBootstrapのコントロール(p006-questionnaire)
図13:フォームで利用されているBootstrapのコントロール(p006-questionnaire)

 また、画面下部「登録」ボタンをクリックした際に、Bootstrapの機能で確認ダイアログを表示するようにしています(図14)。

図14:Bootstrapで表示した確認ダイアログ(p006-questionnaire)
図14:Bootstrapで表示した確認ダイアログ(p006-questionnaire)

 これらのBootstrapコンポーネントについては、公式ページに利用法がまとめられているので、必要に応じて参照してください。

まとめ

 本記事では、Webフォーム用部品「InputManJS」を、CSSフレームワーク「Bootstrap」と組み合わせて利用する方法を説明しました。双方の機能を相互補完して、より便利で実用的なWebフォームを実現できます。

参考資料

関連リンク

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

  • X ポスト
  • このエントリーをはてなブックマークに追加
ComponentZine(InputMan)連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

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

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

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

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

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15359 2022/01/17 12:00

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング