月別アーカイブ: 2014年4月

Google Driveだけで動的WEBページを生成してみます

< 注意 >
このページの投稿内容に従ってWEBサイトを公開すると、Gmailアドレスが一般公開のXMLファイルに記載されてしまうため、公開専用のGoogleアカウントを新たに取得することをお勧めします。

< 2014/07/08 新バージョン対応 >
JSONP形式で新バージョンのGoogleスプレッドシートの内容を取得を投稿しました。新バージョンのGoogleスプレッドシートを動的WEBページの生成に使用したい方は参照ください。

< 2014/04/26 追記 >
現在Drive NotepadはGoogle Web Storeからは削除されているようです。代わりにAnyfile Notepadやその他のGoogle Drive用テキストエディタをご使用ください。

< 2014/05/12 追記 >
Drive NotepadがGoogle Web Storeに復活しているようです。

< オススメ >
“Drive Notepad” というGoogle Drive用WEBアプリをインストールすることをオススメします。インストールにはChromeが必要です。Google DriveとDrive Notepadを接続した後はChromeは必須ではありませんので、一時的なインストールでもかまいません。Drive Notepad自体は一般的なブラウザで使用可能です。
https://chrome.google.com/webstore/detail/drive-notepad/gpgjomejfimnbmobcocilppikhncegaj?hl=en-GB
drive_notepad_en_us

< スプレッドシートによるコンテンツの更新 >
今のところ “Googleスプレッドシートversion 1” が必須となります。これは現状(2014/04/19時点)の最新バージョンである “version 2” がCSVやXMLの公開に対応していないためです。通常の手順で新しいスプレッドシートを作成するとversion 2になってしまいます。

Googleは新しいスプレッドシートについて “新しい Google スプレッドシートについて” にて説明しています。

個人的にはversion 2でCSVやXMLの公開がサポートされないのではないかと危惧していたので “新しい Google スプレッドシートでサポートされていない機能” もチェックしてみました。このページにはCSVやXMLの公開については書かれていませんでした。でもそうですね、Googleがいつ仕様変更するかなんて誰にもわかりませんよねw
現状についてもろもろ同意できたでしょうか?w

https://g.co/oldsheets へアクセスして version 1 のスプレッドシートを作成しましょう。

こちらが私のサンプルです。

シートは1枚でヘッダがあり、3カラムでデータが2行です。
( imgur の画像表示用サイトを作ろうとしています )

< 公開しましょう >
下の画像に従ってください。
publish_to_the_web_ja

“ウェブに公開” を選んだあと “公開開始” を押したら、”公開データへのリンクを取得” のところを見て下さい。
publish_to_the_web_2_ja
スプレッドシートは “ウェブページ / ページに埋め込むHTML / CSV / TXT / PDF / ATOM / RSS / XLS / ODS” 全ての形式で公開されます。WEBサイトと連動するためにはCSVやATOMやRSSあたりから選ぶのが良いのではないでしょうか。どれか一つを選択すると、セル範囲の選択機能が下に出てくると思います。範囲指定することで受信するファイルサイズを小さくすることが可能です。

CSVを選択した場合、範囲選択の前にシートを選択します。以下がサンプルです。
select_sheet_ja
私のサンプルでは “A1” がヘッダで最大5行を取得する想定なので、範囲指定は “A2:A6” となります。
select_cell_ja
表示されているURL内に “range=A2%3AA6” という記述が確認できるのではないでしょうか。自分のサイトにページング機能をつけたいときなどはこの “range” の値をJavascriptでダイナミックに変化させます。

< ムズい? >
心配無用です。自分用に書いたプログラムをここに公開しておきました。
https://github.com/mecrazy/generateGoogleDriveUri
このスクリプトではCSVとATOMとRSSフォーマットに対応しています。これはただのURL生成プログラムですのでパーサはご自身で用意してください。ATOMとRSSについてはjQueryをパーサとして使用可能です。

“generateGoogleDriveUri.min.js” はこんな感じで使います。

<!DOCTYPE html>
<html>
<head>
<title>サンプルページ</title<
<script src="js/generateGoogleDriveUri.min.js"></script>
<script type="text/javascript">
window.onload = function(){

//オブジェクトの定義
var gduObj = new genGDU('公開したファイルへのリンクをここに記述');

//URI生成
var atomUri = gduObj.genUri(
  'atom', // ATOM形式を選択。
  {
    startRow:2, //2行目から開始
    startCol:1, //1カラム目から開始
    cols:1, //1カラム取得
    rows:5, //5行取得
    page:1 //1ページ目を取得
  }
);

var html = '<a href="' + atomUri + '" target="_blank">' + atomUri + '</a>';
document.getElementById('sample').innerHTML = html;

}
</script>
</head>
<body id="sample"></body>
</html>

< index.html の追加とDrive Notepadの設定 >
ChromeでDrive Notepadを追加した後であればGoogle Driveの作成メニューに “Text Document” が確認できるかと思います。
add_index_ja
初めてDrive Notepadを使用したときは以下のような表示が出ると思います。
permission_01_en_us
“Login and/or grant app permissions…” を押したあと下の質問に同意します。
permission_02_ja

ファイル名を “index.html” に変更して保存したらタブを閉じます。
change_file_name_en_us

“アプリケーションを管理” を開きます。
manage_apps_ja
Drive Notepadのところの “デフォルトで使用” にチェックをします。
use_by_default_ja
これでDrive Notepadは他のGoogle Driveアプリと同じように使えるようになりました。

< 共有設定の変更 >
WEBサイトとして公開したいフォルダを選択したら以下のように共有設定を開いてください。
set_sharing_enabled_01_ja
“ウェブ上で一般公開” にチェックしてください。
set_sharing_enabled_02_ja

< HTML・CSS・Javascriptを準備します >
Drive Notepadを使って準備するか、普段お使いのテキストエディタで作成したものをアップロードしてください。
私の階層ツリーはこんな感じです。
my_public_tree_ja

以下のリンク先のページは私がGoogleスプレッドシートで作成したページです。
https://googledrive.com/host/0B2hsIY7iHEnLS290OHlmRkFmbU0/
ソースはサンプルと思って参考にしていただいてかまいません。

< その他スクリプト >
imgurのURLコンバータを作成しましたので使いたい方はどうぞ。
https://github.com/mecrazy/imgurUrlConverter

ごめんなさい。

前のサーバがクラッカーによって停止してしまいました。

以前のVPSプロバイダはデータのバックアップを提供していませんでした。
https://archive.org/web/ を使用して投稿を復元する予定ですが、
いますぐ記事を読みたい方は https://web.archive.org/web/20140401080033/http://admin.mecrazy.net/ などで対処してみてください。

また、昨日プロバイダを変更しました。
このページは Linode 上で動いています。
バックアップシステムもあり、スペックも高いです。