- PVSM.RU - https://www.pvsm.ru -
Ни для кого не секрет, что печатные книги уходят в прошлое. Им на смену приходит новое поколение устройств (а вместе с ними и программ), которые позволяют не только прочитать материал, подобно книге, но и разнообразить чтение интерактивными вставками. Это может быть как и некий динамически изменяющийся материал (лента твиттера и т.п.), так и некое интерактивное содержание (анимация работы конденсатора и т.п.)
Компания Apple выпустило приложение IBOOK Author, которое позволяет делать интерактивные книги для приложения IBOOKS устройств IPAD. Сегодня я предлагаю познакомиться с тем, как же создавать HTML-виджеты для данного приложения на примере виджета твиттера.
Для создания виджетов существует множество программ, стоимость которых варьируется от 0 (Dashcode) до 60 (Tumult Hype [1]).
Создавать же свой виджет мы будем «вручную», без использования специализированных программ.
Теперь предлагаю перейти от слов к делу.
HTML виджет для IBOOK — это папка с расширением wdgt.
При создании HTML виджета можно выделить следующие обязательные файлы:
Данный файл конфига представляет собой ничто иное, как xml файл, в котором параметры записываются как
<key>Параметр</key>
<тип данных>Значение</тип данных>
Используемые параметры:
Использование данных параметров будет достаточным для создания первых виджетов.
Теперь приступим непосредственно к реализации виджета.
Для того, чтобы автор мог контролировать виджет, возьмем за начальные условия:
В данном виджете будем использовать библиотеку JQuery (для упрощения работы с JSON и создания AJAX запросов)
Не представляет «практической» пользы в данном примере. Содержит контейнер для будущих твитов:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<input type="hidden" id="ID" value="SomeWidgetIDForServerQuery" />
<div id='tweet-container'>
</div>
<script type="text/javascript" src="ServerQuery.js"></script>
</body>
</html>
Главной задачей скрипта будет отправка AJAX запросов к серверам. Здесь существует одно ограничение. В прямом виде такие запросы отправить нам не получится. Точнее запрос уйдет на сервер, сервер его обработает, но принять данные виджет не сможет. Поэтому выходом из данной ситуации будет использование JSONP.
Что это такое? Это паттерн, который позволит нам отправить данные на удаленный сервер и «обойти» политику ограничения доменов.
Как выглядит данный способ?
Виджет создает GET запрос, в параметрах которого(помимо нужной информации) указывает функцию callback. Сервер возвращает данные, обернутые в вызов JavaScript функции в формате
callback-функция(Данные в формате JSON);
Определим данные, которые будет отправлять сервер: допустим данные будут содержать только один параметр results, который будет представлен как массив элементов name (включаем сюда, как пользователей, так и хештеги)
Примерный ответ сервера:
jsonp_callback({"results":[{"name":"user1"},{"name":"#hashCode1"}]});
Напишем скрипт, который будет делать запрос на сервер и обрабатывать полученные данные, переводя в «нужный» для твиттера формат:
(формат простой — твиты пользователя определяются как from: пользователь, связь между различными фильтрами поиска проводится посредством "+OR+", хеш-теги не меняются за исключением переноса # в символ %23)
//В этой переменной накапливаем строку для запроса
var requestStr = "";
//Переводит один "поисковой фильтр" в часть запроса
function PrepareItem(item)
{
if (requestStr != "")
requestStr += '+OR+';
if (item[0] != "#")
{//перевод поиска твитов по пользователю
requestStr += 'from:' + item;
}
else
{//перевод поиска по хеш-тегу
requestStr += '%23';
for (var index = 1; index < item.length; index++)
requestStr += item[index];
}
}
$(document).ready(function()
{
$.ajax({
//Определение формата передачи данных
dataType: 'jsonp',
jsonp: 'jsonp_callback', //в GET запрос под этим названием и будет функция-callback
url: "http://mySite.ru/widgets/twitter.php",
data: { ID:$('#ref').val() },
success: function( result ) {
$(result.results).each(function(item)
{
PrepareItem(item.name);
});
//Организуем запрос к твиттеру (чуть ниже будет ее описание)
CreateQueryToTwitter(requestStr);
}
});
Однако JSONP предполагает и второй способ передачи данных (физически он не отличается от первого — разница только в программных реализациях) — именно вторым способом мы и воспользуемся для передачи запроса твиттеру.
Данный способ заключается в добавлении в HTML код элемента «script», тело которого пусто, а src содержит такой же GET запрос с указанием функции callback и других параметров.
После отправки запроса нам остается только разобрать ответ твиттера (самая полезная информация находится в элементе results) и отформатировать его.
function CreateQueryToTwitter(request)
{
var newScript = document.createElement('script');
newScript.setAttribute("type", "text/javascript");//организуем скрипт
newScript.setAttribute("src", "http://search.twitter.com/search.json?q=" + request + "&callback=tweetResponse&rpp=40");
//добавляем его к HTML коду
document.getElementsByTagName("head")[0].appendChild(newScript);
}
function tweetResponse(result) {
var container=$('#tweet-container');
container.html('');
//обрабатываем ответ
$(result.results).each(function () {
var str = (' <div class="tweet">
<div class="avatar"><a href="http://twitter.com/'+this.from_user+'" target="_blank"><img src="'+this.profile_image_url+'" alt="'+this.from_user+'" /></a></div>
<div class="user"><a href="http://twitter.com/'+this.from_user+'" target="_blank">'+this.from_user+'</a></div>
<div class="txt">' + formatTweet(this.text) + '</div>
');
container.append(str);
});
}
//Создадим гиперссылки на людей, другие ссылки и хештеги
function formatTweet(str) {
str=' '+str;
str = str.replace(/((ftp|https?)://([-w.]+)+(:d+)?(/([w/_.]*(?S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
str = str.replace(/([^w])@([w-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>');
str = str.replace(/([^w])#([а-я,А-Я,a-z,A-Z,-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
return str;
}
Остается только прописать стили для виджета и HTML код готов:
body
{
font-family: Tahoma,Arial,Verdana,sans-serif;
width:1024px;
margin: auto;
height:768px;
}
#tweet-container
{
overflow-y:scroll;
height:768px;
width:660px;
margin: auto;
}
.tweet
{
color:black;
margin-top:5px;
background-color:#F0F1F4;
border-bottom:3px solid #5ea8de;
padding:10px;
margin-left:5px;
width:600px;
height:autopx;
}
.avatar
{
float:left;
}
.avatar:hover
{
opacity:0.5;
}
.user
{
float:left;
padding-left:10px;
}
.user a
{
text-decoration:none;
color:black;
font-size:1.1em;
}
.user a:hover
{
color:#DB4FDB
}
.txt
{
clear:left;
}
Теперь добавим к данной веб-страничке файл Info.plist. В моем виджете он выглядит так:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>BackwardsCompatibleClassLookup</key>
<true/>
<key>CFBundleDevelopmentRegion</key>
<string>Russian</string>
<key>CFBundleDisplayName</key>
<string>twitter</string>
<key>BRNotifiesOnReady</key>
<true/>
<key>CFBundleIdentifier</key>
<string>ru.mySite.widget.twtter</string>
<key>CFBundleName</key>
<string>twitter</string>
<key>CFBundleShortVersionString</key>
<string>1.0</string>
<key>CFBundleVersion</key>
<string>1.0</string>
<key>KFNotifiesOnReady</key>
<false/>
<key>Height</key>
<integer>768</integer>
<key>MainHTML</key>
<string>main.html</string>
<key>Width</key>
<integer>1024</integer>
<key>IBNotifiesOnReady</key>
<false/>
</dict>
</plist>
Таким образом, остается только переименовать папку, добавив к ней расширение .wdgt и его можно смело использовать в Ibook Authors.
В данном how-to я постарался разобрать этапы создания простейшего виджета и описать наиболее «опасные» места, такие как связь виджета с сервером. Конечно же, если убрать связь виджета с неким сервером, который задает ему имена и хеш-теги и прописав их в виджете — можно уменьшить количество зависимостей данного виджета.
Надеюсь данная статья не просто заняла Ваше время, но и будет чем-то полезна. :)
Автор: xnim
Источник [3]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/28362
Ссылки в тексте:
[1] Tumult Hype: http://tumult.com/hype/whats-new/1.6/
[2] статьи на эту тему: http://habrahabr.ru/search/page2/?q=%D0%A1%D0%B0%D0%B9%D1%82%D1%8B+%D0%B4%D0%BB%D1%8F+Retina+%D0%B4%D0%B8%D1%81%D0%BF%D0%BB%D0%B5%D0%B5%D0%B2
[3] Источник: http://habrahabr.ru/post/171141/
Нажмите здесь для печати.