Hibiki HTML

Hibiki HTMLは、JavaScriptスタックをスキャフォールディングしたり設定したりすることなく、最新のフロントエンドアプリケーションを作成するための新しいWebフレームワークであり、バックエンドコードによって完全にスクリプト化および制御できます。

Hibiki HTMLは、あらゆるバックエンド言語やフレームワーク、あらゆるCSSフレームワーク、既存のバックエンドテンプレート言語と互換性を持っています。

インタラクティブなウォークスルーについては、 HibikiHTMLインタラクティブチュートリアルをご覧ください。

Hibiki HTMLリソース

Hibikiは、オープンソースプロジェクトについて学ぶための素晴らしいニュースレターであるConsoleに掲載されました。

Getting Started

始めるのは簡単です。JavaScriptスタックのセットアップも、ボイラープレートやスキャフォールディングも、ビルドツールのダウンロードや実行も必要ありません。ページやテンプレートの先頭に script タグを 1 つ追加するだけです。

<script src="https://cdn.hibikihtml.com/hibiki/v0.3.4/hibiki-prod.min.js"></script>

コンテンツの任意の部分を<templatehibiki>タグでラップすると、最初のHibikiHTMLアプリが作成されます。プレーンなHTMLコンテンツはすべてそのままレンダリングされ、Hibiki HTMLはブラウザのHTMLパーサーを使用するため、標準のブラウザHTMLと同じルールに従います。

これらのコード例はすべて、HibikiHTMLPlaygroundで表示および編集できることに注意してください

<template hibiki>
  <h1 class="title">&#x1f338; Hibiki HTML</h1>
  <p>Hibiki HTML <i>is</i> HTML</p>
</template>

(プレイグラウンドリンク-https://playground.hibikihtml.com/?codeid =readme-gs )

v0.3.3以降では、Hibikiコードを<script type = "text / hibiki-html">タグでラップし、オプションでHibikisrcコードと初期データをリモートURLとして参照することもできます。

<!-テンプレートタグを使用した標準的な方法->
<template hibiki> ... Hibiki HTML code here </template>

<!-インラインコード、スクリプトタグでラップ(クローラーのインデックス作成から保護)->
<script type="text/hibiki-html"> ... Hibiki HTML code here ... </script>

<!-リモートURLからコードをロード->
<script type="text/hibiki-html" src="/url/to/hibiki/src.html"></script>

<!-リモートURLからコードとデータをロードします(データは「application / json」タイプである必要があります)->
<script type="text/hibiki-html" src="/url/to/hibiki/src.html" datasrc="/url/to/data.json"></script>

データ/ダイナミックコンテンツのレンダリング

Hibiki HTMLアプリケーションには、フロントエンドデータモデルが組み込まれています。 <hibiki-data> タグを使用して、任意のJSONオブジェクトで初期化できます。テキストをレンダリングするには、 <h-text> タグまたはインライン {{ ... }} 構文を使用します。 * で始まる場合に動的に評価されます。

<template hibiki>
  <hibiki-data>
    {"color": "blue", "name": "Mike"}
  </hibiki-data>
  <p>
    {{ $.name }}'s favorite color is 
    <span style="font-weight: bold; color: *$.color">{{ $.color }}</span>
  </p>
</template>

(プレイグラウンドリンク-https://playground.hibikihtml.com/?codeid =readme-data-1 )

Hibiki HTMLは、すべての標準の条件演算子と算術演算子を含む完全な式言語をサポートしています。 class.[class-name]="true/false expression" を使用してオン/オフにできます。

<template hibiki>
  <hibiki-data>
    {"numlights": 4, "selected": true, "index": 5, "isprimary": true}
  </hibiki-data>
  <div class="box" style="font-weight: *($.selected ? 'bold' : 'normal')">
    Bold Text (if selected)
  </div>
  <div class="box">Index: <h-text bind="$.index + 1"></h-text></div>
  <div class="box">
    There are {{$.numlights}} light{{$.numlights > 1 ? 's' : ''}}
  </div>
  <div class="box">
    <button class="button" class.is-primary="*$.isprimary">Primary Button</button>
  </div>
</template>

(プレイグラウンドリンク-https://playground.hibikihtml.com/?codeid =readme-data-2 )

if 属性を使用して、条件付きで要素を含めることができます。ループは foreach 属性によって処理されます。配列またはオブジェクトをループできます。foreach属性は、 @item in $.array の特別な構文を使用します。ここで、すべての反復 @item は、配列またはオブジェクトの要素に割り当てられます。2番目の変数を指定すると、配列インデックスまたは要素キーがキャプチャされます: $ .objectの(@ item、@ key)または (@item, @key) in $.object (@item, @idx) in $.array

<template hibiki>
  <hibiki-data>
    {"fruits": [{"name": "apple", "emoji": "&#127822;"},
                {"name": "banana", "emoji": "&#127820;"}, 
                {"name": "blueberry", "emoji": "&#129744;"}], 
     "selected": "banana"}
  </hibiki-data>
  <div class="content box">
    <ul>
      <li foreach="@fruit in $.fruits">
        {{ @fruit.name }} {{ @fruit.emoji }}
        <span if="@fruit.name == $.selected">(selected)</span>
      </li>
    </ul>
  </div>
</template>

(プレイグラウンドリンク-https://playground.hibikihtml.com/?codeid =readme-data-3 )

Handlers

データを更新する(そしてコンテンツを動的に変更する)ために、HibikiHTMLはハンドラーをサポートしています。基本的なハンドラーは、クリックマウント送信変更などのイベントに応答します。

<template hibiki>
  <hibiki-data>{"color": "blue"}</hibiki-data>
  <div class="box" style="background-color: *$.color; color: white">
    The color is {{$.color}}
  </div>
  <button class="button" click.handler="$.color = 'green'">Change Color</button>
</template>

(プレイグラウンドリンク-https://playground.hibikihtml.com/?codeid =readme-handlers-1 )

リモートハンドラーを使用して、JSONデータに対してリモートAJAX呼び出しを行うことができます。この例では、https://testapi.hibikihtml.com/api/get-color-1を呼び出すと、JSON応答 {"color": "purple"} が返されます。これをコンテキスト変数 @resp に割り当ててから、 $.color = @resp.color を割り当てます。

<template hibiki>
  <hibiki-data>{"color": "blue"}</hibiki-data>
  <div class="box" style="background-color: *$.color; color: white">
    The color is {{$.color}}
  </div>
  <button class="button" click.handler="$.color = 'green'">Change Color</button>
  <button class="button"
    click.handler="@resp = GET https://testapi.hibikihtml.com/api/get-color-1; $.color = @resp.color;">
    GET /api/get-color-1
  </button>
</template>

(プレイグラウンドリンク-https://playground.hibikihtml.com/?codeid =readme-handlers-2 )

URLの前の動詞を変更することで、GET、POST、PUT、PATCH、またはDELETEリクエストを行うことができます。 (arg1=val1, arg2=val2...) を使用してハンドラーに引数を渡すことでクエリ引数(またはJSONデータ本体)を渡すことができ(複雑な引数はJSONでエンコードされます)、 define-handler タグ。

<template hibiki>
  <hibiki-data>{"color": "blue"}</hibiki-data>
  <define-handler name="//@local/get-color">
    @resp = GET https://testapi.hibikihtml.com/api/get-color-1(name="Michelle");
    $.color = @resp.color;
  </define-handler>
  <div class="box" style="background-color: *$.color; color: white">
    The color is {{$.color}}
  </div>
  <button class="button" click.handler="$.color = 'green'">Change Color</button>
  <button class="button" click.handler="//@local/get-color">
    Get Michelle's Color
  </button>
</template>

(プレイグラウンドリンク-https://playground.hibikihtml.com/?codeid =readme-handlers-3 )

既存のAPIに接続する場合 HibikiのHTMLハンドラは、CORS、CSRF、パラメータエンコーディング、BLOB結果、マルチパートファイルアップロードなどの高度なオプションをサポートしていますので、ご心配なく。

Hibiki Actions

Hibiki HTMLの魔法は、すべてのハンドラーが実際には一連のアクションにすぎないことです。Hibikiアクションは、setdata、if、callhandler、fireevent、invalidate、htmlなどのプリミティブですハンドラー記述できるすべてアクション、JSON表現もあります。

これは、フロントエンドをスクリプト化して更新するJSON応答を返すバックエンドハンドラーを記述できることを意味します。フロントエンドで $.color = 'DeepSkyBlue' を実行するのと同等のJSON応答の例を次に示します。

{"hibikiactions": [
    {"actiontype": "setdata", "setpath": "$.color", "data": "DeepSkyBlue"}
]}

それだけを返すようにhttps://testapi.hibikihtml.com/api/set-color-actionを設定しました。クリックハンドラーにそのURLを呼び出させると、色が自動的に変更されます。

<template hibiki>
  <hibiki-data>{"color": "red"}</hibiki-data>
  <div class="box" style="background-color: *$.color; color: white">
    The color is {{$.color}}
  </div>
  <button class="button" click.handler="$.color = 'green'">Change Color</button>
  <button class="button" click.handler="GET https://testapi.hibikihtml.com/api/set-color-action;">
    Backend Set Color Action
  </button>
</template>

(プレイグラウンドリンク-https://playground.hibikihtml.com/?codeid =readme-actions-1 )

バックエンドハンドラーは非常に強力です。1つのリクエストで戻り値を設定したり、データとBLOB(画像など)を返したり、フロントエンドとバックエンドのデータを式と組み合わせたり、条件付きでアクションを実行したりできます。バックエンドハンドラーを使用して、レンダリングする新しいHTMLテンプレートを返すことにより、複数ページのHibikiHTMLアプリケーションを作成することもできます。

コンポーネントとライブラリ

Hibiki HTMLは、コンポーネントを簡単に使用、共有、バンドルして、簡単に再利用できるようにします。エコシステムはまだ始まったばかりですが、Hibiki HTMLのネイティブコンポーネントを書いたり、サードパーティのJavaScript(D3、CodeMirrorなど)にリンクしたり、ReactJSのコンポーネントをインポートしたりすることができます。

<template hibiki>
  <define-component name="colorbox">
    <div class="box" style="background-color: *$args.color; color: white">
      The color is {{$args.color}}
    </div>
  </define-component>
  
  <local-colorbox color="green"></local-colorbox>
  <local-colorbox color="blue"></local-colorbox>
  <local-colorbox color="purple"></local-colorbox>
</template>

(プレイグラウンドリンク-https://playground.hibikihtml.com/?codeid=readme- comps -1 )

Bulma UI コンポーネントライブラリ

優れたBulmaUIライブラリのHibikiラッパーをリリースしました。以下を追加することで、Hibikiテンプレートに簡単に含めることができます。

<import-library lib="hibiki/bulma@v0.1.0" prefix="b"></import-library>

Hibiki + Bulmaライブラリのドキュメントは、https://libs.hibikihtml.com/test-bulma.htmlにあります。これには、タブ、メニュー、カード、ドロップダウン、フォームコントロール、および並べ替えとページ付けをサポートするデータテーブルを含む多くのインタラクティブなコントロールが含まれています。

Interactive Tutorial

もっと知りたいですか?インタラクティブチュートリアルをご覧ください。


Open Source

Hibiki HTMLのソースコードは、GitHubのhttps://github.com/dashborg/hibikiで入手できます。これは、Mozilla PublicLicensev2.0の下でライセンスされています-https ://mozilla.org/MPL/2.0/

Mozillaには優れたFAQがありますが、基本的にこのライセンスでは、あらゆるプロジェクト(個人、商用、またはオープンソース)でHibikiHTMLを使用できます。唯一の制限は、Hibiki HTMLソースファイルのいずれかを変更する場合、それらの変更のソースコードを利用可能にする必要があることです。

Credits

Hibiki HTMLは、元々 Dashborg内部ツールフレームワーク用に構築および設計されたフロントエンド言語のオープンソースバージョンです。Hibiki HTMLコアは、 ReactMobXNearleyを使用してTypeScriptに組み込まれています。Hibiki HTMLプレイグラウンドは、CodeMirrorBulmaを使用して、HibikiHTMLに組み込まれています。

サポート&ヘルプ

Hibiki HTMLは現在活発に開発中です。質問がある場合、バグを報告する場合、助けが必要な場合、貢献したい場合は、メール [mike (at)hibikihtml.com]または Discord で私に連絡してください。

Hibiki HTMLが実世界で活躍するのを見るのが楽しみです。もし、あなたがHibiki HTMLを使おうと考えているアプリケーションがあれば、ぜひご連絡ください。私は喜んでお手伝いしますし、追加の機能やコンポーネントを構築したり、チームトレーニングを行います。

Hibiki HTML Discordサーバーに参加する