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

    シンプル・軽量なアナログ時計を実装できる「jsRapClock」

    jsRapClockはシンプルで軽量なアナログ時計を実装できるjQue…

  2. PIGNOSE-ParallaxSlider
  3. Choice.js
  4. Shine

    JavaScript

    ダイナミック(動的)で美しいシャドウを実装できるJSライブラリ「Shine」

    ShineというJavaScriptライブラリが素敵だったのでメモがて…

  5. no-image

    JavaScript

    HTML要素を回転させれる「jquery-ui-rotatable」

    jquery-ui-rotatableはHTML要素を回転させれるjQ…

  6. Tilt Hover Effects

    JavaScript

    ホバーによるチルトエフェクトを実装できる「Tilt Hover Effects」

    指定したアイテムにホバーすることでオシャレなチルトエフェクトを実装する…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP