この情報は、米国アドビシステムズ社が提供している情報をもとにローカライズし、作成したものです。  

日本語環境での動作保証はしておりませんのでご了承ください。

内容 (What's Covered)

Twitter ウィジェットの動作仕様が変更され、サイト外部では動作しなくなりました。このことにより、Digital Publishing Suite パブリケーションに埋め込まれた Twitter ウィジェットが動作しなくなります。ユーザーが Twitter コンテンツを参照するためには、オンラインに接続している必要があるため、この問題に対処することは可能です。

はじめにウィジェットを Web サイトにポストします。次に、ウィジェットを表示する iframe を含む Web オーバーレイまたは埋め込みの HTML ファイルから直接参照します。以下のコードは、そのサンプルです。

dpstweets.html というウィジェットを用意しました。これは、@adobedigitalpub のすべてのツイートを表示するコードです。URL は http://www.jameslockman.com/dps/jamestweets/dpstweets.html で、以下はそのコードです。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DPS Twitter Feed</title>
<style>
 .body
 {background-color:transparent}
</style>
</head>
<body>
<div>
 <script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
 <script>
 new TWTR.Widget({
 version: 2,
 type: 'search',
 search: '@adobedigitalpub',
 interval: 30000,
 title: 'Adobe DPS',
 subject: 'See what\'s trending',
 width: 180,
 height: 187,
 theme: {
 shell: {
 background: '#8ec1da',
 color: '#ffffff'
 },
 tweets: {
 background: '#ffffff',
 color: '#444444',
 links: '#1985b5'
 }
 },
 features: {
 scrollbar: false,
 loop: true,
 live: true,
 behavior: 'default'
 }
 }).render().start();
 </script>
</div></body>
</html>

非常にシンプルな HTML コードですが、このファイルを Digital Publishing Suite アプリに Web オーバーレイとして埋め込むと、空白の長方形が表示されます。最も簡単な対処方法は、Web オーバーレイの参照先として、http://www.jameslockman.com/dps/jamestweets/dpstweets.html を指定することです。自動再生とインタラクションを許可し、透明を有効にしています。これは、デスクトップまたはタブレット上でプレビューするまでは確認できません。 

もう一つの対処方法は、iFrame の使用で、これは簡単に実装することができます。

dpsiframe.html というファイルを用意しました。この body タグに、以下のコードを入力します。

<iframe src="http://jameslockman.com/dps/jamestweets/dpstweets.html" width="200" height="312" frameborder="0" marginheight="0" marginwidth="0">Your browser doesn't support iFrames</iframe>

iframe の属性や CSS については自由に指定してください。この html ファイルを Folio 内の Web オーバーレイに配置するだけで動作します。

InDesign CS6 の場合は、上記 iframe タグのコードを InDesign 上でコピー&ペーストするだけで、ポスターフレームが生成されます。この機能を活用することで、InDesign CS6 では、ページ上のレイアウトを調整しやすくなります。

 注意 : Twitter の仕様変更によって iframe の使用が禁じられた場合は、上記のコードは動作しなくなります。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー