このページは、2020 年にサポートが終了した Chrome アプリプラットフォームに関するドキュメントの一部です。Enterprise および Education のお客様については、少なくとも 2025 年 1 月までは ChromeOS で引き続きサポートされます。詳しくは、アプリの移行をご覧ください。

このページは Cloud Translation API によって翻訳されました。

ステップ 5: ウェブから画像を追加する

このステップでは、次のことを学びます。

アプリの外部からリソースを読み込み、XHR と ObjectURL を介して DOM に追加する方法。

この手順を完了の推定所要時間: 20 分
このステップの内容を確認するには、このページの一番下に移動 ↓ をクリックしてください。

CSP が外部リソースの使用に与える影響

Chrome アプリプラットフォームでは、コンテンツセキュリティポリシー（CSP）に完全に準拠する必要があります。 Chrome アプリの外部から画像、フォント、CSS などの DOM リソースを直接読み込むことはできません。パッケージ化されています。

アプリで外部画像を表示するには、XMLHttpRequest を介してリクエストする必要があります。 Blob に変換し、ObjectURL を作成します。このObjectURLは、アプリのコンテキストでメモリ内アイテムを指すためです。

ToDo アイテムのサムネイル画像を表示する

ToDo アイテムで画像 URL を検索するようにアプリを変更しましょう。URL が画像のような形式（（.png、.jpg、.svg、.gif で終わっているもの）がある場合は、上記のプロセスを適用して、 URL の横に画像サムネイルが表示されます。

許可を更新

Chrome アプリでは、任意の URL に対して XMLHttpRequest 呼び出しを行うには、指定します。ユーザーが入力する画像の URL は事前にわからないため、許可を求める "<all_urls>" にリクエストを送信します。

manifest.json で、「」権限:

"permissions": ["storage", "alarms", "notifications",
                "webview", "<all_urls>"],

ObjectURL の作成とクリア

controller.js で、_createObjectURL() メソッドを追加して blob から ObjectURL を作成します。

Controller.prototype._createObjectURL = function(blob) {
  var objURL = URL.createObjectURL(blob);
  this.objectURLs = this.objectURLs || [];
  this.objectURLs.push(objURL);
  return objURL;
};

ObjectURL にはメモリが格納されるため、ObjectURL が不要になった場合は取り消す必要があります。こちらの _clearObjectURL() メソッドを controller.js に設定して処理します。

Controller.prototype._clearObjectURL = function() {
  if (this.objectURLs) {
    this.objectURLs.forEach(function(objURL) {
      URL.revokeObjectURL(objURL);
    });
    this.objectURLs = null;
  }
};

XHR リクエストを行う

指定された画像 URL で XMLHttpRequest を実行する _requestRemoteImageAndAppend() メソッドを追加します。

Controller.prototype._requestRemoteImageAndAppend = function(imageUrl, element) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', imageUrl);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    var img = document.createElement('img');
    img.setAttribute('data-src', imageUrl);
    img.className = 'icon';
    var objURL = this._createObjectURL(xhr.response);
    img.setAttribute('src', objURL);
    element.appendChild(img);
  }.bind(this);
  xhr.send();
};

XHR の読み込み時に、このメソッドは XHR のレスポンスから ObjectURL を作成し、<img> 要素を追加します。 ObjectURL で DOM に送信します。

ToDo アイテム内の画像 URL の解析

次に、まだ処理されていないリンクをすべて見つけて、それらをチェックする _parseForImageURLs() メソッドを追加します。作成します。画像などの URL ごとに、_requestRemoteImageAndAppend() を実行します。

Controller.prototype._parseForImageURLs = function () {
  // remove old blobs to avoid memory leak:
  this._clearObjectURL();
  var links = this.$todoList.querySelectorAll('a[data-src]:not(.thumbnail)');
  var re = /\.(png|jpg|jpeg|svg|gif)$/;
  for (var i = 0; i<links.length; i++) {
    var url = links[i].getAttribute('data-src');
    if (re.test(url)) {
      links[i].classList.add('thumbnail');
      this._requestRemoteImageAndAppend(url, links[i]);
    }
  }
};

ToDo リストでサムネイルを表示する

showAll()、showActive()、showCompleted() から _parseForImageURLs() を呼び出します。

/**
 * An event to fire on load. Will get all items and display them in the
 * todo-list
 */
Controller.prototype.showAll = function () {
  this.model.read(function (data) {
    this.$todoList.innerHTML = this._parseForURLs(this.view.show(data));
    this._parseForImageURLs();
  }.bind(this));
};

/**
 * Renders all active tasks
 */
Controller.prototype.showActive = function () {
  this.model.read({ completed: 0 }, function (data) {
    this.$todoList.innerHTML = this._parseForURLs(this.view.show(data));
    this._parseForImageURLs();
  }.bind(this));
};

/**
 * Renders all completed tasks
 */
Controller.prototype.showCompleted = function () {
  this.model.read({ completed: 1 }, function (data) {
    this.$todoList.innerHTML = this._parseForURLs(this.view.show(data));
    this._parseForImageURLs();
  }.bind(this));
};

editItem() についても同様にします。

Controller.prototype.editItem = function (id, label) {
  ...
  var onSaveHandler = function () {
    ...
    if (value.length && !discarding) {
      ...
      label.innerHTML = this._parseForURLs(value);
      this._parseForImageURLs();
    } else if (value.length === 0) {
  ...
}

表示される画像のサイズを制限する

最後に、_bowercomponents/todomvc-common/base.css で、表示するプレースメントのサイズを制限する CSS ルールを追加します。 image:

.thumbnail img[data-src] {
  max-width: 100px;
  max-height: 28px;
}

完成した Todo アプリを起動する

これでステップ 5 は完了です。アプリを再読み込みし、オンラインでホストされている画像に URL を指定した ToDo アイテムを追加します。一部使用できる URL: http://goo.gl/nqHMF#.jpg または http://goo.gl/HPBGR#.png

詳細情報

このステップで導入した API の一部の詳細については、以下をご覧ください。

次のステップに進む準備はできましたか？ステップ 6 - ToDo をファイルシステムにエクスポートする » に進みます