paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

HTML・CSSだけでWebアプリを開発できる「Mavo」でGitHubをデータベース代わりにしてみた!

f:id:paiza:20170713120244j:plain
どうも、まさとらん(@0310lan)です!

今回は、HTMLに専用の属性を追記するだけで、誰でも簡単にWebアプリを開発することができるフレームワークのご紹介です!

カスタマイズ性も非常に高く、GitHubと連携してデータを保存することも可能なのでアイデア次第でユニークな開発を楽しめますよ。

Mavo

f:id:paiza:20170713120333j:plain

■「Mavo」の始め方!

それでは、まず「Mavo」を利用するための準備から始めていきましょう!

手順はとてもシンプルで、HTMLファイルを作成して専用の「JS / CSSライブラリ」を読み込むだけで完了するというお手軽さです。


読み込むライブラリは次の通りです!

//CSSライブラリ
https://get.mavo.io/mavo.min.js

//JavaScriptライブラリ
https://get.mavo.io/mavo.min.js

このライブラリは、他にも「圧縮版」や「古いブラウザ対応版」など、いくつか種類があるので環境に合わせて好きなモノを公式ページから取得することができます!


そして、あとは簡単なHTMLの骨組みを作れば準備完了です!

<!-- index.html -->


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Mavoのサンプル</title>


        <!-- ライブラリの読み込み -->
        <link rel="stylesheet" href="https://get.mavo.io/mavo.css"/>
        <script src="https://get.mavo.io/mavo.min.js"></script>
    </head>
    <body>


    </body>
</html>


今回は、シンプルな「タスク管理アプリ」を作りながら、「Mavo」の基本的な使い方を解説していきたいと思います!
f:id:paiza:20170713120631j:plain
最終的には、自動保存やGitHubをデータベース代わりに使う手法などもご紹介しますので、ぜひ参考にしてみてください!

■「Mavo」の基本的な使い方!

ここから「Mavo」を使ってWebアプリを開発するのですが、使うのは先ほど作成した「index.html」ファイルだけです。

HTMLタグに専用の属性を指定するだけで、アプリの「ロジック」部分をどんどん構築できるのが大きな特徴になります。


そこで、まずはこれから作るWebアプリの名称を、専用の属性「mv-app」で次のように設定します。

<body>


    <div mv-app="myapp" >
    


    </div>


</body>

名称は自分で好きなように決めて構いません。(今回は「myapp」としました)

この「mv-app」属性を設定することで、「divタグ」の中に配置したHTMLタグは、さまざまな「Mavo」の機能を利用することが出来るわけです。


例えば、「property」属性をHTMLタグに付与すると、その要素はブラウザ上でリアルタイムに編集できるようになります。

<body>
    <div mv-app="myapp" >


      <h1>サンプルタイトル</h1>


      <!-- property属性を付与して編集可能にする -->
      <p property="text">これはMavoアプリです</p>    


    </div>
</body>

上記の例だと、「h1タグ」は通常通りの表示ですが、「pタグ」はproperty属性を付けているので編集できるようになるわけです。(propertyに付けている名称は何でも構いません)


実際に確かめてみましょう!

「index.html」を開くと、「Mavo」の専用ツールバーと一緒にコンテンツが表示されているのが分かります。
f:id:paiza:20170713120730j:plain


ツールバーの「Edit」ボタンをクリックすると、先ほどproperty属性を付与した「pタグ」が編集できますね!
f:id:paiza:20170713120753j:plain
もう一度「Edit」ボタンをクリックすると、編集が終了します。


さらに、今度は「mv-multiple」属性を付与してみましょう!

<body>
    <div mv-app="myapp" >


      <h1>サンプルタイトル</h1>


      <!-- mv-multiple属性を付与して要素の追加を実現する -->
      <p property="text" mv-multiple>これはMavoアプリです</p>    


    </div>
</body>

「mv-multiple」属性を付与したHTML要素は、ブラウザ上でインタラクティブに要素を追加していくことが可能になります。


ブラウザで確認すると、新たに「Add Collection」ボタンが表示されて、クリックする毎に要素を追加できるようになっているのが分かりますね!
f:id:paiza:20170713120819j:plain
このように、「property」属性で任意のHTML要素を編集可能な状態にして、「mv-multiple」属性で要素を追加できるようになりました。

これだけで、タスク管理っぽいアプリが作れそうな気がしませんか?


そこで、次のようなHTML構造にしてみましょう!

<body>
    <div mv-app="myapp">
      <ul>
            
            <li mv-multiple>


                <input type="checkbox" />


                <span property="title">サンプルのタスク</span>


            </li>
            
        </ul>
    </div>
</body>

リスト構造にして、「liタグ」の中に「チェックボックス」と「テキスト」を挿入しています。

この「liタグ」に「mv-multiple」属性を付けているので、要素を追加するとその中にある「チェックボックス / テキスト」も同時に追加されて便利です!


あとは、CSSで少しデザインを整えれば、タスク管理っぽくなるはず!
f:id:paiza:20170713120846j:plain
ここからさらに、データの保存機能やツールバーを使わなくても編集できるように改造していきましょう!

GitHubをデータベース代わりにしよう!

ここからは、データを保存する機能を作っていきましょう!

…と、言っても「Mavo」を使えば驚くほど簡単に実現できてしまいます。


先ほどのコードで、「mv-app」を指定したdivタグに新しく「mv-storage」属性を追記してみましょう!

<body>
    <div mv-app="myapp" mv-storage="local">
        <ul>


            <!-- 〜省略〜 -->


        </ul>
    </div>
</body>

この例では、「mv-storage="local"」と設定しているのですが、たったこれだけでブラウザの「ローカルストレージ」にデータを保存できるようになります。


実際に試すと、Mavoツールバーに「Save」ボタンが表示されているので、これをクリックするだけで編集内容が保存されます!
f:id:paiza:20170713120919j:plain
ここで言う「編集内容」というのは、「property」属性を付与したHTML要素のデータが保存されるという意味になります。


ブラウザのデベロッパーツールで「ローカルストレージ」の内容を見てみると、しっかりと保存されているのが分かりますね!
f:id:paiza:20170713120929j:plain
さらに、ローカルストレージではなく、自分のGitHubアカウントと連携して任意のリポジトリにデータを保存することも可能です!


そこで、まずは新しくリポジトリを作成しましょう。

ここではブラウザ上から作る方法をご紹介しておきます。実際は好きな方法で構いません。


GitHubサイトの上部メニューから「New repository」をクリックします。
f:id:paiza:20170713120948j:plain


好きな「① リポジトリ名」を入力したら、「② Create repository」ボタンをクリックしましょう。
f:id:paiza:20170713133525j:plain
これでデータ保存用のリポジトリが作れました。

もう一度「index.html」に戻り、先ほど「mv-storage="local"」と指定した箇所をGitHubリポジトリURLに変更するだけでOKです!


GitHubのユーザー名が「webhacck」で、リポジトリ名が「mydata」の場合は次のようになります!

<body>


    <!-- データの保存先をGitHubのリポジトリにする -->
    <div mv-app="myapp" mv-storage="https://github.com/webhacck/mydata">
        <ul>


            <!-- 〜省略〜 -->


        </ul>
    </div>
</body>

とても簡単ですね!


Mavoツールバーに「ログイン」ボタンが表示されるのでクリックしましょう。
f:id:paiza:20170713122733j:plain


初回だけ、認証画面が表示されるのでボタンをクリックします。
f:id:paiza:20170713122742j:plain


あとは、普通にタスクを追加するなど編集をした後に、「Save」ボタンをクリックすればOKです!
f:id:paiza:20170713122751j:plain

これで、ブラウザを更新してもデータは消えません。


GitHubリポジトリを見ると、しっかりとデータが保存されているのが分かりますね!
f:id:paiza:20170713122803j:plain
HTMLの属性を記述するだけで、GitHubを簡易的なデータベース代わりに使えるのは「Mavo」の面白い特徴といえるでしょう。

■「Mavo」をカスタマイズしよう!

さて、ここまでの作業で「タスク管理アプリ」はだいたい完成なのですが、もう少し使いやすいようにカスタマイズしていきたいと思います!


まず、現状だとタスクのテキストデータしか保存されないので、チェックしたかどうかのデータも保存されるようにしましょう。

<ul>
    <li mv-multiple>
        
        <!-- チェックボックスも保存対象にする -->
        <input property="check" type="checkbox" />
        <span property="title">サンプルのタスク</span>
    </li>
</ul>

先ほども少し解説しましたが、「property」属性を付与したHTML要素のデータが保存される仕組みになっているので、チェックボックスの要素にも「property」属性を付けて保存できるようにします。


ついでに、「タスクの残数」を表示できるようにしてみましょう!

Mavo」にはいくつか便利なメソッドが用意されており、例えば「count()」を使うとpropertyのデータ数がいくつあるのかを教えてくれます。

<!-- タスク数とチェック数を数えてその差分を求める -->
<p>[count(task) - count(check)]個のタスクがあります</p>


<ul>
    <li property="task" mv-multiple>
        
        <!-- チェックボックスも保存対象にする -->
        <input property="check" type="checkbox" />
        <span property="title">サンプルのタスク</span>
    </li>
</ul>

Mavo」では、[ ]の中に計算式を挿入することが可能で、この中でメソッドを利用することもできます。

この例では、「liタグ」にproperty属性を付与してタスクがいくつあるのかを数えられるようにしています。

このタスク数からチェックされた数を引けば、残りのタスク数を求めることができますよね。

こんな感じで「タスクの残数」が表示できます!
f:id:paiza:20170713122908j:plain


さらに、これまで「Mavoツールバー」を利用して編集や保存を行ってきましたが、このツールバーを排除してリアルタイムに編集や保存ができるようにしてみましょう!

これも方法は簡単で、「mv-mode」「mv-bar」「mv-autosave」の3つの属性を付与するだけで実現できてしまいます!

<body>


    <div mv-app="myapp" mv-mode="edit" mv-bar="hide" mv-storage="local" mv-autosave>
        <ul>


            <!-- 〜省略〜 -->


        </ul>
    </div>


</body>

「mv-mode="edit"」でツールバーを使わずに編集することが可能で、「mv-bar="hide"」でツールバーを排除することができます。

また、「mv-autosave」を付与するだけで自動的にデータを保存することができるので便利です。(保存タイミングも指定可能)

これで、一般的なタスク管理ができるWebアプリの完成です!
f:id:paiza:20170713122932j:plain
このサンプルデモは、以下のリンクから実際に試せますので参考にしてみてください!
(PCブラウザ推奨)

タスク管理サンプルデモ|GitHub

また、サンプルデモのソースコードは以下のリンクから閲覧できます!

タスク管理アプリのソースコード|GitHub

■HTML/CSS講座も公開中!動画でプログラミングが学べるレッスン


paizaでは、プログラミング未経験者・初心者向け学習サービス「paizaラーニングを公開しています。

今回記事の中で使用しているHTML/CSSが学べる入門講座をはじめとして、PythonJavaJavaScriptC言語PHPRubySQLなど、プログラミング初心者でも動画で学べるレッスンが多数ございます。プログラミング初心者の方はぜひごらんください!

↓詳しくはこちら
paiza.jp

■まとめ

今回は、「Mavo」の基本的な部分だけを駆け足でご紹介しましたが、これだけでも応用次第ではユニークなWebアプリを誰でも作れると思います。

Mavo」は2017年5月に公開されたばかりで、まだベータ版ということもあり新しい機能追加なども活発に行われています。

プラグインでまったく新しい機能を追加することも可能で、さまざまな開発事例も公式ページで紹介されているのでぜひ参考にしてみてください!


<参考>





paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

現在、普段有料公開しているPHP、DB/SQL、Webアプリ開発入門(PHP+MySQL編)のレッスンを、期間限定で連続無料公開中ですのでぜひごらんください。

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza