Network is the Computerの時代到来

リンク集作成スクリプト

Google Sitesなどで自分がよく使ってるGoogleスプレッドシート連携のリンク集作成スクリプトです。スプレッドシートにずらーっとデータを入力するだけで、使い勝手の良いリンク集を作る事が可能です。自分が主に使っているのは、イントラで使うリンク集であったり、Googleアカウント発行者一覧、社内の参考資料をリストアップなどなど。

画面は、jQuery DataTablesというライブラリを利用しています。使用するに当たっては事前のセットアップと注意点があります。スプレッドシートをまずはコピーしてから使用して下さい。

使用するファイル

搭載されている機能

このスクリプトはいくつかの簡単な機能が搭載されています。

  • jQuery DataTablesを用いたリンク集表示機能
  • 作成途中でプレビュー確認する機能
  • サイドバーからデータを追加する機能
  • Google Pickerを使ったファイル・フォルダ選択機能

セットアップ

このスクリプトはセットアップが必要です。また、ウェブアプリケーションですので、スクリプトエディタから公開作業も必要ですので、ご注意下さい。

セットアップ機能

スプレッドシートをコピーしたら開きます。メニューに「リンク集作成」という項目が表示されます。この中にある「セットアップ」を実行しましょう。これは、そのスプレッドシートのIDを取得して格納してくれます。これを行わないとデータが正しく取得されず、リンク集にデータが表示されません。必ず実行しましょう。

プレビュー機能

データを作成後にウェブアプリケーションでどう表示されるか？をスプレッドシート上で確認できます。「リンク集作成」という項目の中にある「プレビュー」を実行してみてください。HTMLで作成されたダイアログが出てきます。

図：スプレッドシート上で確認できます。

データ作成

手入力でももちろん作成する事が出来ます。しかし、ドライブのファイルやフォルダなどを登録する時や分類を入力するのに、全て手入力は何かと不便です。本機能を使うことで、しっかりしたデータをスプレッドシート上に記述する事が可能です。メニューのリンク集作成の中にある「データ作成」をクリックする事でサイドバーの形式で表示されます。

※但しドライブから選択機能は、デベロッパーキーを入れなければ使用出来ません

図：サイドバーから作成がお手軽

プロジェクトを移動

今回の発表直前の2019年4月8日より、Google Apps ScriptからCloud Platform Projectへ直接アクセスが出来なくなりました。これまでにデプロイしてるものについては、これまで通り「リソース」⇒「Google Cloud Platform API ダッシュボード」からアクセスが可能です。

今回の変更はスプレッドシート上で動かすスクリプトやGoogleの拡張サービスを利用しないタイプのスクリプトであれば特に問題はありませんが、「Apps Script API」や「Google Picker API」、「Cloud SQL接続」などGCP上のAPIを利用する場合には以下の手順を踏んで、Google Apps Scriptにプロジェクトを連結する必要があります。これまでは、自動的にGCP上にGoogle Apps Script用のプロジェクトが生成されていたのですが、今後は自分の組織（もしくはGCPプロジェクト）上で作成されたプロジェクトでなければならないということです。詳細はこちらのページを見てください。

連結する手順は以下の通り

  1. Google Cloud Consoleを開く
  2. 左上にある▼をクリックする
  3. ダイアログが出てくるので、新規プロジェクトを作るか？既存のプロジェクトを選択する。この時、G Suiteであれば選択元は「自分のドメイン」を選択する必要があります。
  4. プロジェクト情報パネルから「プロジェクト番号」をコピーする
  5. 対象のGoogle Apps Scriptのスクリプトエディタを開く
  6. 「リソース」⇒「Cloud Platform プロジェクト」を開く
  7. 4.で入手した番号をプロジェクトを変更のテキストボックスに入れて、プロジェクトを設定ボタンをクリックする
  8. 無事に移動が完了すればメッセージが表示されます。
  9. この時、元の自動作成されたプロジェクトはシャットダウンされて消えます。これで設定完了です。

今回のこの変更だと１つ作ったプロジェクトに集約する必要があるので、クォータについてプロジェクト毎のカウントだったので問題なかったものが、集約されることで、クォータに引っ掛かる可能性があります。

図：プロジェクト番号をコピーしておきます

図：プロジェクトを他のプロジェクトに紐付けしました。

図：GCPの拡張サービスを使うには手順が必要になった

デベロッパーキーを入れる

データ作成に於いて、デベロッパーキーの入力がなければ、ドライブから選択の機能が使えません。入れてあればGoogle Pickerを使ってドライブからファイルを選択する事が可能になります。こちらのエントリーを参考にして、Google Picker APIを有効にし、認証情報作成後、APIキーを入手し、登録してください。

ウェブアプリケーションとして公開

ここまでセットアップが完了したら、最期に以下の手順でウェブアプリケーションとして公開してください。公開することで、サンプルページのようにアプリとして利用できるようになります。この時の最期がdevではなく、execになってる公開用URLをGoogle Sitesに埋め込んだりする事で、リンク集として活用する事が出来るようになります。

  1. スクリプトエディタに入る
  2. メニューより「公開」⇒「ウェブアプリケーションとして導入」をクリック
  3. 次のユーザーとしてアプリケーションを実行を設定。通常は自分でOK.
  4. アプリケーションにアクセスできるユーザを設定。社内ならドメイン内のユーザのみにする。
  5. 更新ボタンを押す。
  6. 現在のウェブアプリケーションのURLが出て来るので、これを書き留めておく
  7. Google Sitesに埋め込んだり、直接アクセスして利用する。
  8. 改造をした場合、再度プロジェクトバージョンを変えて、公開作業しないと反映しない。

図：これをやらないと使えない

注意事項

本アプリを利用する場合、注意事項があります。今回利用しているjQuery DataTablesや関連CSSファイル関係は全て自分のサーバ内に設置したものを利用しています。会社等で継続して利用する場合には、これらのCSSやJSのファイルへの参照は自分のサーバ内にファイルを設置して書き換えて下さい。

例えばこのサーバが消滅すると使えなくなりますので、ライブラリ関係は書き換えを推奨します。書き換えをする対象となるファイルは以下の通りです。スクリプトエディタでプロジェクトを開いたら、左サイドバーより

  1. linkman.html内の<head>にあるofficeforest.orgを参照してるファイル類のURL
  2. javascript.html内の74行目付近、officeforest.orgを参照している画像ファイルへのURL

改訂履歴

2018/4/23 Version 1.0

  • 最初のバージョン公開。シート連携、プレビュー機能付きでスタート
共有してみる：

作成アプリ

PAGETOP
Copyright © 🌴 officeの杜 🥥 All Rights Reserved.
Powered by WordPress & BizVektor Theme by Vektor,Inc. technology.