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

---

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

---

参照：paiza開発日誌
簡単にJavaScriptでSPAのブログを構築して公開できるライブラリ「CMS.js」を使ってみた！

---

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