会津ラボ

Tag: Bootstrap

  • ElmでBootstrapを使う[elm-bootstrap]

    ElmでBootstrapを使う[elm-bootstrap]

    以前にElmで簡単なTodoリストを作成しました。 【elm】2019年にわざわざ学ばなくてもいい言語でTodoアプリを作る 今回はこのTodoリストの見栄えを良くしたいと思うのですが私はあまりスタイルが得意ではありません。。。ですのでBootstrapを利用してスタイルを整えたいと思います。 Elmにはelm-bootstrapというBootstrapのパッケージがありますのでこちらを使います。 http://elm-bootstrap.info/ インストール パッケージをインストールします。 インストールコマンドはelm installなので以下のようにパッケージ名を指定してインストールします。 インストールが無事完了するとelm.jsonにパッケージ名が追加されているかと思います。 Button まずはボタンから。 View.elmを編集します。 以下を追加してBootstrapパッケージをimportしましょう。 次にview関数のdivタグを修正します。 CDN.stylesheetを追加し、ボタンをBootstrapのButtonに変更しています。 Buttonの記述は少し複雑ですがBootstrapを使ったことがある人であれば意味は通じると思います。 インラインスタイルなどはonClickと同じようにButton.attrsに追加することで反映されます。 ElmReactorを起動して結果を確認しましょう。 http://localhost:3000/src/Main.elm にアクセスし、結果を確認します。 ボタンが見慣れたBootstrapのものに変更されています。 Table 次にTableをBootstrap化します。 先ほどと同じようにまずはimportを行います。 テーブルを表示する関数はviewTableと、tbodyを表示するviewTrに分けていますので、まずはviewTableから変更します。 Buttonの時と同じようにTable.tableとし、BootstrapのTableを使用します。 optionとしてstripedとhoverを設定していますが不要であれば削除しましょう。 ほぼElmの記述と同じですのでここで詰まることはないかと思います。 続いてviewTr関数です。 こちらもほとんどElmの記述のままです。 変更が完了したらElmReactorで確認します。 Bootstrapのテーブルが反映されています。 まとめ ElmでのBootstrap適用についてご紹介致しました。 elm-bootstrapを利用することでElmの記述からかけ離れることなく、Bootstrapを採用することができると思います。 ぜひ試してみてはいかがでしょうか。

  • CSSフレームワークBootstrapのダイアログを秒速で実装する「bootbox.js」が超便利

    CSSフレームワークBootstrapのダイアログを秒速で実装する「bootbox.js」が超便利

    CSSフレームワークといえば、Bootstrapといえるほどのネームバリューを誇ります。使用を検討する場合は筆頭候補といえるでしょう。次の画像は「npm trends 」でトレンド調査した結果です。 圧倒的といえるほどのダウンロード数です。新進気鋭の有望なCSSフレームワークがリリースされても、Bootstrapが依然としてトップに立っていることがわかります。 なぜこれほどまでに人気であり続けられるのでしょうか？それには次のようなことが挙げられます。 効率がいい開発を図れる 洗練されたCSS設計（アーキテクチャ）の採用 HTMLモックをすばやく作成できる ルールに沿った使い方で開発速度アップを見込める HTMLにクラス付与するのみの簡単実装 充実したユーザーインターフェースが魅力 トレンドをおさえたアップデートが実施される 統一感のある構築ができる しかし一方で、特定のインターフェースを実装するにしてもHTMLとjQuery(JavaScript)の記述が必要です。Bootstrap経験があるエンジニアやデザイナーのなかには、 「ダイアログだけ使いたい。」「ダイアログを手軽に実装したい。」「HTMLとJavaScriptの記述が面倒くさい。」 という不満を覚えた人も少なくないのではないでしょうか？そこで本日の「bootbox.js」をお伝えしたいと考えました。 「bootbox.js」は、bootstrapダイアログボックス実装に特化したライブラリです。特筆すべきは実装がものすごく簡単です。JavaScript数行の記述でalertやconfirm、custom dialog、promptを作成できます。 基本的な機能 アラートダイアログ 確認ダイアログ プロンプトダイアログ カスタムダイアログ 導入 導入に際して、次のファイルを読み込んでください。 必要なファイル Bootstrap [CSSファイル] jQuery [JavaScriptファイル] Bootstrap [JavaScriptファイル] Bootbox [JavaScriptファイル] 読み込み例 読み込み例では、オンライン上のCDNから取得しています。適宜ダウンロードやnpmインストールを選択してください。 使い方 アラートダイアログボックス 注意を伝えるダイアログです。 基本的な使い方 簡易なアラートダイアログならば、一行で実装できます。 アラートダイアログの表示例です。alertメソッド引数の文字列がダイアログのラベルに表示されます。「Hello world!」となっていることがわかります。 コールバック設定 アラートダイアログが閉じたタイミングでコールバックが走ります。alertメソッドの第2引数に無名関数を設置することで、任意の処理を行うことができます。 確認ダイアログボックス OK/Cancelボタンを持つダイアログです。 基本的な使い方 確認ダイアログは、コールバックの設定が必須です。confirmメソッドの第2引数に無名関数を設置することで、任意の処理を行うことができます。OK/Cancelボタンのクリックの是非をコールバック値で判定します。 確認ダイアログの表示例です。confirmメソッド引数の文字列がダイアログのラベルに表示されます。確認ダイアログならではのOKとCancelボタンが表示されていることがわかります。 プロンプトダイアログボックス ユーザー入力を受け付けるダイアログです。 基本的な使い方 プロンプトダイアログは、コールバックの設定が必須です。コールバック関数では、ユーザー入力をコールバック値で取得することができます。ダイアログをキャンセル、またはCancelボタンをクリックした場合はnullになります。 ユーザーの入力を受け付けるインプットフィールドが設けられていることがわかります。…