ブートストラップと4D変換タグ

ウェブページから4Dデータにアクセスする必要があるけれど、チームにデザイナーがいない？自分でページをデザインするのは、複雑で書かれていないルールに満ちていると心の底で思っているから、気が進まないのでしょうか？Bootstrapについて考えたことはありますか？
このブログでは、Bootstrapのフレームワークを利用して、すぐにWebページをデザインする方法を紹介します。また、データベースを例に、4D変換タグとどのように組み合わせられるかをご紹介します。

HDI：Bootstrapと4D変換タグ

4D変換タグ

注意：もし、あなたがすでに変形タグの使い方を知っていて、それをより良く見せる方法を学びたいだけなら、この章は読み飛ばしてください。または、記憶を呼び覚ますために読んでください…

複数の4D 専用タグが用意されており、Web サーバから送信される静的な HTML ページに、4D 変数、式、または異なるタイプの処理への参照を挿入することができま す。これらのページはセミダイナミックページと呼ばれます。

タグは、4Dによって処理されるために、HTMLタイプのコメント：<!–#4D…–>として挿入されます。

タグを使用する際には、以下の原則に留意してください。

• HTMLページを強制的にパースするには、“.shtm”または“.shtml”というサフィックスを追加する必要があります。
• 4DTEXT、4DHTML、4DEVAL、4DSCRIPT、4DIF、4DELSEIF、または4DLOOPを持つ4DメソッドをWebリクエストから実行するには、メソッドのプロパティで定義された“Available via tags and 4D URLs (4DACTION …)”属性値に従います。以下の例では、sendEmployeesData メソッドは、Web 経由でアクセスするように設定されています。

4Dタグについて詳しく知りたい方は、4D Summit 2016のビデオをご覧ください。

この例では、SHTMLページに従業員のリストを送信します。そして、<!–#4DLOOP…–> タグのおかげで、従業員の配列を繰り返し表示することができます。そして、<!–#4dtext ...–>タグで表示させることができます。最終的には、次のようなコードになります。

<!--#4dscript/sendEmployeesData-->//Execute the 4D method
<table>
<tr><th>First Name</th>
...
<th>Email</th></tr>
<!--#4dloop empID-->//Loop through the array of employees
<tr> <td><!--#4dtext empFname{empID}--></td>//Display the employee first name
...
<td><!--#4dtext empEmail{empID}--></td> </tr>
<!--#4dendloop-->
</table> <td><!--#4dendloop empFname{empID}--> </td> </tr> <td><!–#4dtext empFname{empID}–> <td><!

Webサーバを起動してコードを実行し、結果を確認してください。

悪くはないが、良くもない。悪くもないが、良くもない。特にテーブルは、ほとんどのプログラムに存在し、エンドユーザーにデータを表示するために不可欠な要素だからです。

ブートストラップテーブル

Bootstrapを4Dで使うのは簡単です。コンパイルされたバージョンをダウンロードして、データベースのwebフォルダにコピーし、JSとCSSファイルをSHTML ファイルにインクルードします。

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>

Bootstrapには多くのバージョンがあることを覚えておいてください（バージョン4が最新です）。このブログの記事では、バージョン4を使っています。

Bootstrapのパワーを確認するために、テーブルを視覚的に改良してみましょう。

テーブルを魅力的にするのはとても簡単です。<table>タグに.table クラスを追加するだけで、視覚的な書式を適用することができます。さらに、ダークモードがお好きな方には、Bootstrapには.table-dark クラスが用意されています。さらに、ゼブラ模様のスタイルを追加するための.table-striped クラスもあります。これらのクラスはすべて、実現したいことに応じて組み合わせることができます。SHTMLファイルを開き、これらのクラスを追加し、4DからRun/Test Web Serverを 選択してください。

<table class="table-darktable-striped"> （テーブル・ダーク・テーブルストライプ


お見事です。

Bootstrapには、興味深いテーブルスタイルのリストがあります。ドキュメントをチェックして、自分に合うものを見つけてください。

Bootstrapの定義済みデザインテンプレートとクラスを使用すれば、時間を大幅に節約できます。この記事では、フレームワークでできることのほんの一端を紹介しました。Bootstrapと強力な4Dタグ機能を組み合わせることで、4Dウェブベースのアプリケーションのデザインにどのようなスパイスを加えられるか、ドキュメントをご覧ください。