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

関連記事

  1. jquery-side-navi

    JavaScript

    サイドからスライドでナビゲーションを表示できる「jquery-side-navi」

    jquery-side-naviは、サイドからスライドでタブコンテンツ…

  2. Flex-box Gallery

    JavaScript

    ランダムサイズの画像をかっこいいギャラリーにしてくれる「Flex-box Gallery」

    Flex-box Galleryは、ランダムサイズによる画像たちをかっ…

  3. rpage

    JavaScript

    Bootstrapを使ったレスポンシブなページネーション「rpage」

    rpageはBootstrapを使ったレスポンシブに対応したページネー…

  4. JavaScript

    カスタマイズしやすい軽量のツールチップを実装できるjQueryプラグイン「TinyTip」

    TinyTipはカスタマイズしやすいツールチップを実装することができる…

  5. JavaScript

    ボックス要素からはみ出した分のテキストを「…」に置き換えてくれるjQueryプラグイン「…

    なんとなく使う機会がありそうな感じのjQueryプラグイン「jQuer…

  6. Animated Image Pieces

    JavaScript

    画像が細かいピースになるアニメーション実装「Animated Image Pieces」

    Animated Image Piecesは、画像が細かいピースに分解…

最近の記事

  1. NIB2600
  2. Anker PowerPort Atom PD 4
  3. USB-2H401BKN
  4. Dyson Pure Cool Me

アーカイブ

PAGE TOP