GoogleSheets-HTMLImporter

JavaScript

Googleスプレッドシートからデータをインポートできる「GoogleSheets-HTMLImporter」

GoogleSheets-HTMLImporterは、GoogleスプレッドシートからデータをインポートできるjQueryプラグインです。GoogleスプレッドシートとはGoogleが提供するサービスで、Excelと同様に表計算やグラフの作成を行えるツールです。複数人と共同でファイルの作成・編集ができ、オンラインで作業が可能です。このGoogleスプレッドシートをサイトへインポートできるプラグインのご紹介です。

GoogleSheets-HTMLImporter

デモ

本来、サイトへデータや表を表示させる場合、<table>タグを使用する方法が主流です。しかし、<table>タグを使用されたことがある方はご存知かと思いますが、意外と面倒な作業です。データの量が多く複雑になる程、表のどの部分がどのようにサイトへ反映されるのかを想定しながらマークアップするので、ややこしく混乱してしまうこともあります。

そんな時は、本プラグインを使用すればGoogleスプレッドシートで作成されたデータをそのまま読み込みサイトへ反映することができるので、効率よくサイト構築を進めることができると思います。

本プラグインの導入方法は以下の手順になります。

< script  src = " http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js " > </ script >
< script  src = " dist / jquery.gsImport.min.js " > </ script >
< div  class = " gsImport "
		 data-key = " Google-Sheets-Key "
		データインデックス = "シート番号"
		 data-headers = " String、of、Headers " >
	</ div >
< script > 
$(" .gsImport ")。gsImport(); 
</ script >	

以上のような手順で導入は完了です。ぜひご活用ください。特に大量なデータや更新が頻繁に必要なデータをお持ちの方へおすすめです。

GoogleSheets-HTMLImporter

Ember Burger Menu豊富なアニメーションを有するハンバーガーメニュー「Ember Burger Menu」前のページ

jQueryの代わりに使用できるマイクロJavaScriptライブラリ「Selector」次のページno-image

関連記事

  1. no-image

    JavaScript

    テキストに応じてアンダーラインが伸び縮みする「Magic Line Menu」

    Magic Line Menuはナビゲーションメニューのテキストに応じ…

  2. no-image

    JavaScript

    シンプルなモバイルメニューを実装できる「offcanvas-mobile-menu」

    offcanvas-mobile-menuは、シンプルでモバイルフレン…

  3. no-image

    JavaScript

    多彩なエフェクトを備えたjQueryスライダープラグイン「camera-slider」

    camera-sliderは多彩なエフェクトを備えた美しいスライドショ…

  4. CardTabs

    JavaScript

    ミニマルで超軽量・シンプルなタブを実装できるjQueryプラグイン「CardTabs」

    CardTabsは超軽量でシンプルなタブを実装できるjQueryプラグ…

  5. jquery.horizonScroll.js
  6. MG Space

    JavaScript

    Google画像のようなアコーディオンプラグイン「MG Space」

    MG SpaceはGoogle画像のようなjQueryアコーディオンプ…

最近の記事

  1. 長十郎
  2. COMOLI シルクネルシャツ
  3. WiMAX
  4. 甘柿
PAGE TOP