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

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選！