Google-docs

Как написать надстройку для Google Документов

Вы видели примеры некоторых действительно полезных надстроек для Google Docs, но было бы здорово, если бы вы могли написать свое собственное дополнение, которое добавляет новые функции в ваши Google Docs, которое делает вас рок-звездой среди миллионы пользователей Google Docs.
Что ж, это не так уж и сложно. Если вы знаете немного HTML, CSS и JavaScript, вы можете создать надстройку Google Docs.

Создайте надстройку Google для Документов и таблиц

Это пошаговое руководство (загрузка) проведет вас через процесс создания собственного дополнения для Google Docs. Надстройка, используемая в демонстрации, позволяет вставлять изображение любого адреса на Google Maps в документ Google без необходимости в каком-либо программном обеспечении для захвата экрана.
Хорошо, поехали.
Шаг 1. Откройте новый документ на Google Диске и выберите Инструменты -> Редактор скриптов. Это IDE Apps Script, в которой мы напишем код для надстройки.
Шаг 2. Выберите «Файл» -> «Новый HTML», чтобы создать новый HTML-файл в редакторе сценариев, и назовите его как googlemaps.html (или как угодно).
Шаг 3. Скопируйте и вставьте следующий код в файл HTML и сохраните изменения. Это код, который будет использоваться для отображения боковой панели в ваших документах Google.

<link href="https://ssl.gstatic.com/docs/script/css/add-ons.css"
rel="stylesheet">


<div class="sidebar">

<div class="block form-group">
<input type="text" id="search" placeholder="Enter address.. " />
<button class="blue" id="load_maps">Search Google Mapsbutton>
div>

<div id='maps'>div>
div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
script>
<script>
// Attach click handlers after the Sidebar has loaded in Google Docs
$(function() {
// Use Static Maps to generate an image of the address entered by the user
$('#load_maps').click(function() {
var mapURL = 'https://maps.googleapis.com/maps/api/staticmap?center='
+ encodeURIComponent($('#search').val())
+ '&zoom=14&size=200x400&sensor=false';
$('#maps').html('+ mapURL + ' "/>');
});
// If the user presses the Enter key in the search box, perform a search
$('#search').keyup(function(e) {
if (e.keyCode === 13) {
$('#load_maps').click();
}
});
// When a user clicks the thumbnail image in the sidebar, call
// insertGoogleMap to insert the maps image in the current document
$('#maps').click(function() {
google.script.run.insertGoogleMap($('#search').val());
});
});
script>

Шаг 4. Затем мы напишем серверный JavaScript (скрипт Google), который будет отображать боковую панель и вставлять изображения Google Maps в документ.
/* What should the add-on do after it is installed */
function onInstall() {
onOpen();
}
/* What should the add-on do when a document is opened */
function onOpen() {
DocumentApp.getUi()
.createAddonMenu() // Add a new option in the Google Docs Add-ons Menu
.addItem("Google Maps", "showSidebar")
.addToUi(); // Run the showSidebar function when someone clicks the menu
}
/* Show a 300px sidebar with the HTML from googlemaps.html */
function showSidebar() {
var html=HtmlService.createTemplateFromFile("googlemaps")
.evaluate()
.setTitle("Google Maps - Search"); // The title shows in the sidebar
DocumentApp.getUi().showSidebar(html);
}
/* This Google Script function does all the magic. */
function insertGoogleMap(e) {
var map=Maps.newStaticMap()
.setSize(800, 600) // Insert a Google Map 800x600 px
.setZoom(15)
.setCenter(e); // e contains the address entered by the user
DocumentApp.getActiveDocument()
.getCursor() // Find the location of the cursor in the document
.insertInlineImage(map.getBlob()); // insert the image at the cursor
}

Сохраните изменения, а затем выберите ONOPEN из меню «Запустить» в редакторе сценариев. Авторизуйте скрипт и перейдите на документ Google.
Вы увидите новую опцию Google Maps в меню Add-ons. Выберите пункт меню, и вы сможете вставить изображения MAPS внутри ваших документов Google без использования программного обеспечения для захвата экрана.

Поделитесь своими дополнениями Google с другими пользователями Google Docs

Теперь, когда ваше первое дополнение Google готово, вы можете распространить его среди других пользователей Google Docs. Самый простой вариант — предоставить общий доступ к документу и установить разрешение Кто угодно может просматривать . Теперь любой желающий может создать копию вашего документа на своем собственном Google Диске и использовать ваше дополнение.
Надстройки Google также можно опубликовать в магазине Chrome, процесс аналогичен публикации расширений Chrome, но пока это доступно не всем разработчикам Google.