Webアプリ開発を試したいJSライブラリ

自分が試したいJSライブラリをメモ（2019）
howler.js
オーディオスプライトによる制御可能 > オーディオ機能/音楽

var sound = new Howl({
  src:['sound.mp3']
});
sound.play();

play()関数など用意されている

var sound = new Howl({
  src:['sound.mp3'],
  autoplay:true, 
  loop:true,
  volume:0.5,
  onend: function() {
    console.log('音楽は終了しました');  
}
});

*「howler.js」https://howlerjs.com/

---

jPList
HTML要素を自由にソート・フィルタリングできる

<div 
  style="display:none"
  data-jplist-control="hidden-sort"
  data-group="sort-list"
  data-path=".name"
  data-order="asc"
  data-type="text">
</div>

• examples
• 使い方

---

jKanban
Trelloのようにドラッグ＆ドロップで任意のタスクを移動させながら進捗情報管理ができるWebアプリを簡単に構築

const defaultBoards = [

   {
       "id": "sample-board-1",
       "title": "タスク",
       "item": [
           { "title": "報告書の作成" },
           { "title": "14時から打ち合わせ" }
       ]
   },
   {
       "id": "sample-board-2",
       "title": "進行中",
       "item": [{ "title": "○○案の企画書作成" }]
   },
   {
       "id": "sample-board-3",
       "title": "完了",
       "item": [{ "title": "日報の提出" }]
   }

];

lightgallery.js
ギャラリー系のJavaScriptライブラリ

<div id=”lightgallery”>

   <a href=”1枚目の画像パス”>
       <img src=”1枚目の画像パス”>
   </a>

   <a href=”2枚目の画像パス”>
       <img src=”2枚目の画像パス”>
   </a>

   <a href=”3枚目の画像パス”>
       <img src=”3枚目の画像パス”>
   </a>

</div>

lightGallery(document.getElementById('lightgallery'));

---

Microlink
普通のリンク要素をリッチな可視化ツールに変えるライブラリ

---

GrapesJS
HTMLコンテンツをドラッグ＆ドロップで組み立てるだけでWebサイトを制作できるオーサリングツール

<div id="gjs"></div>

var editor = grapesjs.init({

   container : '#gjs'

});

• [GitHub] (https://github.com/artf/grapesjs)

---

CMS.js
最後にGitHubと連携したブログをJavaScriptで簡単に構築できるライブラリ

---

参照：paiza開発日誌
[簡単にJavaScriptでSPAのブログを構築して公開できるライブラリ「CMS.js」を使ってみた！]
(https://paiza.hatenablog.com/entry/2018/12/12/%E7%B0%A1%E5%8D%98%E3%81%ABJavaScript%E3%81%A7SPA%E3%81%AE%E3%83%96%E3%83%AD%E3%82%B0%E3%82%92%E6%A7%8B%E7%AF%89%E3%81%97%E3%81%A6%E5%85%AC%E9%96%8B%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%A9%E3%82%A4%E3%83%96)

---

参照：paiza開発日誌
個人でWebアプリを開発する時に便利な高機能JavaScriptライブラリ6選！