目次


Mavo を使用した迅速な Web アプリケーション開発の紹介, 第 1 回

オープンソースの Web アプリケーション・フレームワーク、Mavo を導入する

Mavo のプロパティーと式を理解する

Comments

コンテンツシリーズ

このコンテンツは全#シリーズのパート#です: Mavo を使用した迅速な Web アプリケーション開発の紹介, 第 1 回

このシリーズの続きに乞うご期待。

このコンテンツはシリーズの一部分です:Mavo を使用した迅速な Web アプリケーション開発の紹介, 第 1 回

このシリーズの続きに乞うご期待。

HTML は使い慣れていても、JavaScript はまだマスターしていませんか?Web アプリケーションのデータベース・バックエンドをプログラミングするためのスキルは、まだ身に着けていませんか?そうだとしたら、このチュートリアルで Mavo の仕組みについて学んでください。このオープンソースの Web アプリケーション・フレームワークを使用すれば、プログラミング・コードを作成したりサーバーのバックエンドを構成したりすることなく、Web アプリケーションを作成できます。

Mavo はデータ駆動型 Web アプリケーションの開発を、さらに幅広い作成者層と、特により多くの HTML ユーザーに利用できるようにする Web アプリケーション・フレームワークです。このフレームワークはデータの定義と操作を直感的な構造体によってサポートするよう HTML を拡張しています。Mavo の使いやすいユーザー・インターフェースにより、数値、日付、画像、シンプル・テキストとリッチ・テキスト、リストをはじめ、あらゆる類のデータ型を編集することができます。Mavo の式言語である MavoScript は、JavaScript の知識がないユーザーでも Web アプリケーションにおいて一般的なデータ操作を行えるよう、調査結果およびユーザー・テストを基に慎重に作成されています。

ほとんどの Mava アプリケーションは最終的に HTML ファイルだけで構成されるため、必須となる 2 行の Mavo 宣言といくつかのスタイルシートがある限り、任意の設定テンプレートをベースとして使用することができます。このことから、Mavo アプリケーションはデプロイするのも、徐々に変更を加えるのも極めて簡単です。つまり、少数のファイルを Web ホストにコピーするだけで、Mavo アプリケーションを使用できるようになります。

ただし、Mavo はすべてのアプリケーション開発を置き換えられるわけではありません。それどころか、このプロジェクトはまだ歴史が浅いため、対処できる範囲には限りがあります。そうは言っても、迅速にプロトタイプを作成したり、シンプルなアプリケーションを構築したりするには、快適で便利な方法になります。Mavo は簡単に習得して試すことができます。したがって、特定のニーズに Mavo が適切であるかどうかを判断するのに最良の方法は、いくつかのサンプルを調べてみることです。

Mavo の概要

手短にまとめた Mavo の概要

初めての Mavo アプリケーションを作成する

Mavo をよく理解するために、単純なページ上に単一のアプリケーションを作成する手順を追っていきましょう。それにはまず、アプリケーションの開発をどのようにセットアップするかについて、いくつか決定しなければならない点があります。

  • Mavo ファイルをサイトにダウンロードするのか、それとも Mavo サイトから直接インクルードするのか
  • アプリケーション内でのデータの変更を保管するために使用するバックエンド・システムは何にするか
  • アプリケーションにはどの識別子を選ぶか

Mavo ファイルをインクルードする場所を決定する

Mavo アプリケーションのページごとに、2 つの Mavo 固有のファイル、1 つの CSS ファイル、1 つの JavaScript ファイルを使用する必要があります。以下のスニペットに示されているように、最新のバージョンを Mavo プロジェクトから直接使用することができます。

<link rel="stylesheet" href="https://get.mavo.io/mavo.css"/>
          <script src="https://get.mavo.io/mavo.js"></script>

あるいは、これらのファイルを独自のサイトからインクルードすることもできます。

<link rel="stylesheet" href="assets/style/mavo.css"/>
          <script src="assets/script/mavo.js"></script>

Mavo から直接ファイルをロードすると、アプリケーションが常に最新のバージョン (セキュリティー・ホットフィックスを含む) を使用するようになります。ただし、この方法にはマイナス面もあります。それは、Mavo プロジェクトが非互換性やバグを発生させた場合、アプリケーションが突然機能しなくなる可能性があることです。2 つの Mavo 固有のファイルをホストすることがままならない環境では、Mavo から直接ファイルをロードするという方法を選ぶことになるでしょう。

どちらの方法を選ぶべきかわからない場合は、このリンク先の mavo.io の Mavo ファイルへの直接リンクを張って、先へ進んでください。

データ・ストレージについて決定する

データの保管先について計画を立てる必要があります。ブラウザー上でローカルに保管するか、Dropbox や GitHub などのデータ・リポジトリーまたはコード・リポジトリーに保管するか、データベース内に保管するかを決定してください。

最良の方法は、おそらく GitHub または Dropbox ストレージなどの外部ストレージを使用することでしょう。アカウントを作成する際は、アカウントのタイプに応じたストレージの制約事項に注意してください。GitHub は一般的には技術に詳しいユーザー向けのツールですが、Mavo はストレージの詳細を抽象化するので、GitHub も簡単に保管先として使えます。

データをブラウザー上でローカルに保管する場合は、変更を加えても他のユーザーはそれを認識できないこと、ブラウザーを閉じるとすべての変更が失われることに注意してください。通常、ブラウザーのローカル・ストレージ内にデータを保管するのが適しているのは、自分が行った変更を他のユーザーが認識する必要のないサンドボックス・アプリケーションの場合、そしてセッションが終了してデータがリセットされても問題にはならない場合です。

ブラウザーのストレージには制限はあるものの、今回の記事ではブラウザーのストレージを使用して Mavo の基本を説明します。次回の記事で、GitHub ストレージについて説明します。

JavaScript のスキルを持つ上級開発者は、例えばデータベースのストレージ・プラグインを独自に作成することもできます。

アプリケーション識別子を作成する

アプリケーションに識別子を割り当てる必要があります。識別子は、アプリケーションの自動メカニズムのさまざまな細部で使用されます。独自の識別子を割り当てなければ、Mavo がデフォルトの識別子を割り当てるため、それによって後のプロセスが複雑化する可能性があります。

識別子を作成するには、まず、短く覚えやすいアプリケーション名を考えます。そこから英数字以外の文字を削除し、スペースを下線で置き換えます。そして最後に、識別子が英字または下線で始まるようにします。下記のサンプル・アプリケーション内で使用する識別子は、「poetryclub」です。

サンプル・アプリケーション

この記事では、サンプルとして Poetry Book Club 連絡ページの作成方法を説明しながら Mavo の基本的な機能を紹介します。

Mavo アプリケーションの要素

Poetry Book Club アプリケーション・コードの中核は、HTML 本体の中に含まれる main 要素です。main 要素は、コンテンツの主要な部分を収容するコンテナーの役割を果たします。この例の場合、main 要素は Mavo アプリケーションのコンテナー構造でもあります。アプリケーションの main 要素であることは、mv-app 属性によって示されます。この属性の値に、選択したアプリケーション識別子を設定します。完全な開始タグは、以下のようになります。

<main mv-app="poetryclub" mv-storage="local">

Mavo アプリケーション要素または宣言と呼ばれるこの属性は、main 要素だけでなく、articlediv を含むあらゆる HTML ブロック要素に設定できます。Mavo では上記のように、特化された属性を導入する際に mv- プレフィックスを使用します。mv-storage 属性は、アプリケーションによって処理されたデータの保管先を示します。この属性の値が none に設定されているか、またはこの属性が完全に省略されていると、データは一切保管されません。上記のように値が local に設定されている場合、データはブラウザーのローカル・ストレージに保管されます。

Mavo のプロパティー

Mavo アプリケーション要素に含まれる、property 属性を持つあらゆる要素は、操作して保存することが可能なデータ・アイテムになります。以下のスニペットを見てください。

<p>
  <label>Title: </label>
  <span property="title">Ndewo, Colorado</span>
</p>
<img property="cover" src="//gonzaga.ogbuji.net/~uche/lit/2013/ndewo-cover-small.jpg" 
alt="cover" />
<p>
  <label>Meeting date: </label>
  <time property="meeting" datetime="2017-10-09">9 Oct 2017</time>
</p>

最上位の p 要素内で、span 要素によって title という名前の Mavo データ・プロパティーが宣言され、管理されています。Mavo では、あらゆる HTML 5 要素はプロパティーを管理できるようになっていて、要素のタイプごとに、その要素タイプのセマンティクスにつじつまが合うユーザー編集動作を定義しています。例えば、上記の例での編集モードは単一行のテキスト入力です。プロパティーが p などのブロック要素によって管理されているとすると、編集モードは複数行のテキスト入力になります。

上記のスニペットでは、cover プロパティーおよび meeting プロパティーも使用されています。coverimg 要素によって管理されているため、編集モードは置換画像 URL の入力となります。一方、meetingtime 要素によって管理されているので、編集モードはカレンダー・ウィジェットとなります。

完全な Poetry Book Club サンプル

リスト 1 に記載する bookclub1.html は、上記に抜粋したスニペットを含む完全な HTML ファイルです。

リスト 1. 単純な Poetry Book Club 連絡ページ
<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>The poetry book club</title>

    <link rel="stylesheet" href="https://get.mavo.io/mavo.css"/>
    <script src="https://get.mavo.io/mavo.js"></script>
  </head>
  <body>
    <main mv-app="poetryclub" mv-storage="local">
      <h1>The poetry book club</h1>

      <p>
        <label>Title: </label>
        <span property="title">Ndewo, Colorado</span>
      </p>
      <img property="cover" src="//gonzaga.ogbuji.net/~uche/lit/2013/ndewo-cover-small.jpg" alt="cover" />
      <p>
        <label>Meeting date: </label>
        <time property="meeting" datetime="2017-10-09">9 Oct 2017</time>
      </p>

    </main>
  </body>
  </html>

Mavo の動作

bookclub1.html ファイルをブラウザーにロードすると、図 1 に示されている単純な Poetry Book Club 連絡ページが表示されます。

図 1. 単純な Poetry Book Club 連絡ページ
ブラウザーに表示された単純な Poetry Book Club 連絡ページのスクリーンショット
ブラウザーに表示された単純な Poetry Book Club 連絡ページのスクリーンショット

ページの最上部にある Mavo アクション・バーに注目してください。「Edit (編集)」ボタンをクリックすると、編集機能が表示されます。

図 2 に、「Edit (編集)」ボタンをクリックして「Title (タイトル)」フィールドの編集を開始した後のページを示します。ボタンのラベルが「Editing (編集中)」に変わっていることに注意してください。このボタンを再度クリックすると、ページは通常の表示状態に戻り、特殊な編集動作は行われなくなります。

図 2. ユーザー編集モードの Poetry Book Club 連絡ページ
ブラウザーにユーザー編集モードで表示された単純な Poetry Book Club 連絡ページのスクリーンショット
ブラウザーにユーザー編集モードで表示された単純な Poetry Book Club 連絡ページのスクリーンショット

画像をクリックすると、フィールドがポップアップ表示されます。このフィールドで URL を置き換えることで、新しい画像をアップロードできます。ちなみに、Mavo では、何らかのプロパティーを含めて宣言された各画像には alt 属性を指定する必要があります。もちろん、いずれにしても alt 属性は指定しなければなりません。

図 3. Mavo での画像の編集
ブラウザー内で画像を編集中の単純な Poetry Book Club 連絡ページのスクリーンショット
ブラウザー内で画像を編集中の単純な Poetry Book Club 連絡ページのスクリーンショット

ミーティングの日付をクリックすると、カレンダー・ウィジェットが表示されます (図 4 を参照)。

図 4. Mavo での日付の編集
ブラウザー内で日付を編集中の単純な Poetry Book Club 連絡ページのスクリーンショット
ブラウザー内で日付を編集中の単純な Poetry Book Club 連絡ページのスクリーンショット

「Clear (クリア)」ボタンを使用すると、この編集セッションでのすべての変更を元に戻すことができます。

細心の注意を払って見ていれば、Mavo では、編集ツール内でプロパティー名をさまざまな方法で使用していることに気付くはずです。例えば、画像を編集するためにクリックすると、新しい URL を入力するフィールドのラベルが「Cover: (カバー:)」として表示されます。この名前は、プロパティー名から取られています。

Mavo の式

ここまでのところでデータ・アイテムを宣言して操作する方法を説明したので、次は自動化について説明します。ほとんどのアプリケーションのコードには、データの自動操作が組み込まれています。この自動化を有効にするには、Mavo の式言語である MavoScript を使用できます。

例えば、現在の書籍のタイトルを件名の行に含めた e-メールを主催者に送信するためのリンクを Poetry Book Club Page に追加するとします。この自動化を有効にするには、以下のスニペットを Mavo アプリケーションの main 要素に追加します。

<a href="mailto:poclub@example.com?subject=[title]">Contact us about this meeting</a>

[title] の部分は、Mavo のデフォルトの式構文で、HTML 内ではこの部分を title データ・アイテムの値で置き換えることができます。Mavo の式には柔軟性があるため、例えば e-メールの件名を常に大文字にする場合は、以下のコードを使用することで対応できます。

<a href="mailto:poclub@example.com?subject=[uppercase(title)]">Contact us about this meeting</a>

上記の uppercase(title) は、title の値に作用してすべての文字を大文字に変換する Mavo 式関数です。この例の場合、タイトル「Ndewo, Colorado」が「NDEWO, COLORADO」に変換されています。Mavo 式関数には、テキスト・ストリングを操作するもの、リストを操作するもの、日付と時刻を操作するもの、数学演算に使用するものなど、さまざまな種類があります。完全なリストについては、Mavo ドキュメントの MavoScript に関するページを参照してください。さらに、通常の記号を使用してほとんどの算術演算を表現することもできます (このあと説明します)。このような機能を有効にするには、通常は HTML ドキュメント・オブジェクト・モデル (DOM) を操作する JavaScript を作成しなければならないため、Mavo を使うだけで開発者の日常がいくぶんか楽になります。

Mavo アプリケーションを配置する

Mavo アプリケーションの宣言は、最も外側の要素で行う必要はありません。リスト 2 に、リスト 1 のバリエーションである bookclub1.5.html を記載します。この HTML ファイル内では、主要な見出しといくつかの記述テキストの後に続く div 要素上で Mavo アプリケーションが宣言されています。

リスト 2. 代替 Mavo アプリケーションが配置された Poetry Book Club 連絡ページ
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>The poetry book club</title>

  <link rel="stylesheet" href="https://get.mavo.io/mavo.css"/>
  <script src="https://get.mavo.io/mavo.js"></script>
</head>
<body>
  <main>
    <h1>The poetry book club</h1>

    <p>Where we take our time with each tasty rhyme</p>

    <div mv-app="poetryclub" mv-storage="local">
      <p>
        <label>Title: </label>
        <span property="title">Ndewo, Colorado</span>
      </p>
      <img property="cover" src="//gonzaga.ogbuji.net/~uche/lit/2013/ndewo-cover-small.jpg" alt="cover" />
      <p>
        <label>Meeting date: </label>
        <time property="meeting" datetime="2017-10-09">9 Oct 2017</time>
      </p>
    </div>

  </main>
</body>
</html>

図 5 に、ブラウザーに最初にロードされた状態の bookclub1.5.html を示します。Mavo アプリケーションのバーが、アプリケーションが宣言された要素に応じた場所に配置されていることに注意してください。

図 5. 代替 Mavo アプリケーションの配置
代替 Mavo アプリケーションを配置してブラウザーに表示された Poetry Book Club 連絡ページのスクリーンショット
代替 Mavo アプリケーションを配置してブラウザーに表示された Poetry Book Club 連絡ページのスクリーンショット

数値と日付の表現とスタイルの使用

Mavo の式を使用して画像を扱う興味深い操作を行う方法を理解するために、画像プロパティーを再び見ていきましょう。Poetry Book Club ページには、任意の画像をアップロードできるようになっています。カスタマイズした画像サイズを追加するために、img 要素を以下のスニペットで置き換えました。

<img property="cover" style="height: [height * 2 + 200]px;"
 src="//gonzaga.ogbuji.net/~uche/lit/2013/ndewo-cover-small.jpg" alt="cover" />

 <div>
   <input type="range" property="height" />
 </div>

上記のスニペットで導入している height プロパティーは、HTML スライダー入力として宣言されています。Mavo はこれを、ユーザーのスライド操作に応じて値を 0 から 100 に設定するコンロトールとして解釈します。img 要素には新しい style 属性も設定されています。この属性は Mavo の式に従って、CSS 宣言から画像の高さを設定します。この式は、高さに基づく [height * 2 + 200] という単純な数式です。この例の場合、画像のサイズは 200 (入力スライダーが最小値に設定されている場合) から 400 (入力スライダーが最大値に設定されている場合) の範囲となります。

Mavo での条件式

ミーティング開催までの残り時間が 1 週間を切っている場合、ミーティングの日付を黄色で強調表示して注意を喚起するようにするには、現在の日付セクションを以下のスニペットで置き換えます。

<p style="background-color: [if(days(meeting - $today) &lt; 7, yellow, white)];">
  <label>Meeting date: </label>
  <time property="meeting" datetime="2017-10-09">9 Oct 2017</time>
</p>

if() 関数は 2 つ、または 3 つの引数を取ります。最初の引数は条件式です。

  • この条件式の値が true またはゼロ以外の場合、2 番目の引数がその結果の値として設定されます。
  • 条件が false またはゼロであり、3 番目の引数がある場合、この 3 番目の引数が結果の値として使用されます。

この例の場合、条件は if(days(meeting - $today) &lt; 7 となります。すでに説明したように、meeting プロパティーは編集可能なミーティングの日付です。$today は、Mavo が自動的に指定するプロパティーのうちの 1 つであり、常に Web ブラウザーが判断する現在の日付に設定されます。

この 2 つの日付の値を減算すると、差分の秒数になります。days() 関数はこの秒数を取って、それに相当する日数を計算します。この日数が 7 日より少ない場合 (標準の HTML では <&lt; としてエスケープする必要があることに注意)、条件は true となり、その結果として 2 番目の引数 yellow が設定されます。それ以外の場合、結果は white になります。この例では、ページの背景を白に設定するのが賢明ですが、それは細かいことです。

色の引数は、プロパティー名のように見えます。Mavo はプロパティー名のような要素を見つけると、該当するプロパティーが存在する場合は、それをプロパティーの値で置き換えます。該当するプロパティーが存在しなければ、文字通りのテキストとして扱います。プロパティーのように見える要素がリテラル・テキストとして扱われるようにするには、その要素を引用符で囲むという方法を使えます。つまり、条件式 [if(days(meeting - $today) &lt; 7, 'yellow', 'white')] は上記の条件式と同じように動作します。

完全な Poetry Book Club サンプル

リスト 3 に記載する bookclub2.html は、上記に抜粋したスニペットを含む完全な HTML ファイルです。リスト 1 をベースにしていますが、MavoScript が追加で使用されています。

リスト 3. Mavo 式を使用した Poetry Book Club 連絡ページ
  <!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>The poetry book club</title>

    <link rel="stylesheet" href="https://get.mavo.io/mavo.css"/>
    <script src="https://get.mavo.io/mavo.js"></script>
  </head>
  <body>
    <main mv-app="poetryclub" mv-storage="local">
      <h1>The poetry book club</h1>

      <p>
        <label>Title: </label>
        <span property="title">Ndewo, Colorado</span>
      </p>
      <img property="cover" style="height: [height * 2 + 200]px;"
       src="//gonzaga.ogbuji.net/~uche/lit/2013/ndewo-cover-small.jpg" alt="cover" />

       <div>
         <input type="range" property="height" />
       </div>

      <p style="background-color: [if(days(meeting - $today) &lt; 7, yellow, white)];">
        <label>Meeting date: </label>
        <time property="meeting" datetime="2017-10-09">9 Oct 2017</time>
      </p>

      <a href="mailto:poclub@example.com?subject=[uppercase(title)]">Contact us about this meeting</a>

    </main>
  </body>
  </html>

動的変更を適用した Mavo の動作

Web ブラウザーはスタイルの変更を計算して動的に適用します。MavoScript では、通常は JavaScript が必要となる動的レスポンスを簡潔に入力できるようになっています。図 6 に、ミーティングの日付を現在の日付から 7 日以内に調整し、画像サイズのスライダーを最大限のところまで引いた状態のページを示します。

図 6. Mavo 式を使用した Poetry Book Club 連絡ページ
Mavo 式を使用した、編集モードで表示された Poetry Book Club 連絡ページのスクリーンショット
Mavo 式を使用した、編集モードで表示された Poetry Book Club 連絡ページのスクリーンショット

Mavo の制限事項

Mavo によってプログラマーに対するニーズが軽減されることはありませんが、一貫して 1 つの Web ページ内で機能するコンパクトなアプリケーションを作成する際に使用するには、Mavo は理想的なツールとなります。Mavo の式言語である MavoScript は綿密に考案されていますが、JavaScript が提供するあらゆる機能を拡張できるわけではありません。例えば、ユーザー・セッションを慎重に調整して一連の Web ページをまたがってセッションを維持する必要のある高度なアプリケーションを作成する機能については対応していません。Mavo はサーバー・サイドのストレージを単純化する手法は巧みなものの、大多数のアプリケーションに適切な手法では決してありません。

ストレージの実態

この記事で取り上げた例では、ブラウザーのローカル・ストレージしか使用していませんが、実際のところ、ブラウザーのローカル・ストレージはそれほど有用ではありません。この連載の第 2 回で、Mavo と GitHub ストレージ・バックエンドを組み合わせて使用する方法を説明します。GitHub ストレージでは、複数のユーザーが一連のコンテンツの更新を行ってから、承認のためにそのすべての更新をサブミットします。Mavo は、このような「チャンクからなるストレージ」に最適です。

Web アプリケーションの世界で使用されているストレージ手法は他にも多数あります。例えば、e-コマースで使用されるようなオンライン・トランザクション・データベースでは、一斉にきめ細かい変更を行う多数のユーザーに対応できます。理論上、このようなモデルをサポートするように Mavo のデータベース・バックエンドを作成することは可能です。けれども実際には、コードの精巧さ、そして Mavo の組み込みモデルの動作をほとんどの使用ケースに適応させなければならないことから、このようなストレージは Mavo と組み合わせて使用するにはあまりにも複雑すぎます。

Mavo の普及

Mavo の制限事項を理解することは重要ですが、これらの制限事項があるからといって、この非常に前途有望なプロジェクトを使用するのをためらわないでください。Mavo を作成したチームは、プログラミング概念を単純化することに関する詳細な調査結果を基に、プログラミング以外の Web 専門家が快適なユーザー・エクスペリエンスを創出できるようにしています。

Mavo は簡単に拡張できて、JavaScript の全機能と手際よく対話します。これらの機能により、Mavo は Web 設計者が迅速にプロトタイプを作成するにも、チャンクからなるストレージ・モデルが適合する本格アプリケーションを迅速にデプロイするにも極めて有用なツールとなっています。

関連トピック

  • アプリケーションの構築に強い関心をお持ちの場合は、このリンク先の IBM Code サイトの「Mobile」セクションを調べてください。ここでは、より優れた画期的アプリケーションの構築を可能にするオープンソース・プロジェクトのコードを入手したり、確認したりできます。
  • JavaScript
  • Web development

ダウンロード可能なリソース


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=1062343
ArticleTitle=Mavo を使用した迅速な Web アプリケーション開発の紹介, 第 1 回: オープンソースの Web アプリケーション・フレームワーク、Mavo を導入する
publish-date=08022018