Monthly Archives: April 2014

Generating dynamic web pages only with Google Drive

< Warning >
I recommend you to get extra Google account only for public.
Because if you follow my procedure, your Gmail address will be on public XML file.

< Can I put adsense codes on HTML on Google Drive? >
The answer is NO. I found the important information on Google Product Forums below.
Can I place adsense codes (ads) in my google drive every doucement?
You can not place adsense codes on any documents in Google Drive. Please be careful.

< New solution on 2014/07/07 >
I wrote the post Get new version of Google Spreadsheets as JSONP. If you want to use new version of Google Spreadsheets to generate dynamic web pages instead of the old version, please read that post.

< Updated on 2014/04/26 >
Please use Anyfile Notepad or any other text editor apps for Google Drive on Google Web Store instead of Drive Notepad. Because Drive Notepad was removed from store.

< Updated on 2014/05/12 >
Hey! Drive Notepad is back to Google Web Store!

< Recommendation >
I recommend you to install “Drive Notepad”. It’s an extension for Google Drive. When you install Drive Notepad, you need Chrome. But after connecting Drive Notepad to Google Drive, Chrome is not required. You can use Drive Notepad on any browsers.
https://chrome.google.com/webstore/detail/drive-notepad/gpgjomejfimnbmobcocilppikhncegaj?hl=en-GB
drive_notepad_en_us

< For updating contents from Spreadsheet >
You need to use “Google Spreadsheet version 1”. Because “version 2” doesn’t support CSV and XML sharing yet. ( I wrote this post in April 19 2014. ) If you normally generate new spreadsheet today, it’s automatically be version 2.

Google explained new spreadsheet on “Check out the new Google Sheets“.

I worried about CSV and XML sharing will not support in version 2. So I checked also “Unsupported features in the new Google Sheets“. But this function isn’t listed on that page. Yep … not listed … but nobody is sure when Google change their mind….
Can you agree this situation? LOL

Let’s access https://g.co/oldsheets to generate a spreadsheet in version 1.

It’s my sample.

It’s only one sheet. It has header, 3 cols and 2 rows.
( I’m going to generate imgur image web site. )

< Let’s make it public >
Follow the pic below.
publish_to_the_web_en_us

Select “Publish to the web” and push “Start publishing”.
See “Get a link to the published data” section.
publish_to_the_web_2_en_us
You can get your spreadsheet as Web page, HTML, CSV, TXT, PDF, ATOM, RSS, XLS and ODS.
If you want to sync spreadsheet to your website, you should choose CSV, ATOM or RSS. These are easy format for syncing. When you choose one of them, you can find the function to select column and row. This function can make file size per request smaller.

If you choose CSV, before selecting range, please select a target sheet. Sample is like the pic below.
select_sheet_en_us
In my sample, “A1” is header. I want to get 5 rows maximum. So I set the range “A2:A6”.
select_cell_en_us
You can find “range=A2%3AA6” in the url. If you want to add paging function to your web site, you should dynamically change the parameter for “range” by Javascript.

< Is it difficult? >
Don’t worry. I wrote the Javascript code here.
https://github.com/mecrazy/generateGoogleDriveUri
This script is compatible with CSV, ATOM and RSS formats. It’s only URI generator. It doesn’t have parser. If you choose ATOM or RSS, you can use jQuery as a parser.

Please use “generateGoogleDriveUri.min.js” like below.

<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
<script src="js/generateGoogleDriveUri.min.js"></script>
<script type="text/javascript">
window.onload = function(){

//Casting object
var gduObj = new genGDU('Put a link to the published data here');

//Generate URI
var atomUri = gduObj.genUri(
  'atom', // I choose ATOM format.
  {
    startRow:2, //Start from row 2
    startCol:1, //Start from col 1
    cols:1, //Cut 1 columns
    rows:5, //Cut 5 Rows per page
    page:1 //Get page 1
  }
);

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

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

< Add index.html and Drive Notepad setting >
After you add Drive Notepad on Chrome, you can find “Text Document” on create menu of your Google Drive.
add_index_en_us
If it’s your first time to use Drive Notepad, you will be asked like below.
permission_01_en_us
Push “Login and/or grant app permissions…” and accept the question below.
permission_02_en_us

Please change file name to “index.html”. After saving the file, close the tab.
change_file_name_en_us

Please change setting about “Manage apps”.
manage_apps_en_us
Please check “Use by default” of Drive Notepad row.
use_by_default_en_us
After that, you can use Drive Notepad like the other apps on Google Drive.

< Change sharing settings >
Select your folder to set public.
After that, follow the pic below.
set_sharing_enabled_01_en_us
Set “Public on the web” checked.
set_sharing_enabled_02_en_us

< Preparing HTML, CSS, Javascript >
Use Drive Notepad to prepare them.
Or edit with your own text editor and upload them.
My relative position is like below.
my_public_tree_en_us

The link below is my web page created with Google Spreadsheet.
https://googledrive.com/host/0B2hsIY7iHEnLS290OHlmRkFmbU0/
If you want, please use sources as sample.

< Extra script >
I developed imgur URL converter for my web page. If you want, please use this.
https://github.com/mecrazy/imgurUrlConverter