外部の Web ページにリンクする方法 (HTML)

  • [アーティクル]

この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、 「最新のドキュメント」をご覧ください]

ここでは、外部の Web ページにリンクし、そのページをアプリで表示する方法を説明します。

必要条件

手順

外部の Web ページへのリンク

外部の Web ページにリンクするには、HTML にハイパーリンクを追加すると済みます。 次の例では、www.bing.com へのリンクを作ります。リンクをクリックすると、そのリンクが (アプリ内ではなく) Web ブラウザ内で開きます。


<p><a href="https://www.bing.com">Search the web</a></p>

アプリでの外部の Web ページの表示

アプリでは、iframe で外部のページを表示できますが、トップレベルのページから外部の Web ページに移動することはできません。

Hh780594.wedge(ja-jp,WIN.10).gifアプリで外部の Web ページを表示するには

  1. Web ページを表示する iframe を作ります。iframe 要素の name 属性を設定します。

    
<iframe name="targetFrame">
</iframe>

  2. 外部 Web サイトへのリンクを作ります。リンクの target 属性を、前の手順で作った iframe の名前に設定します。

    
<p><a href="https://www.bing.com" target="targetFrame" >Search the web</a></p>

<iframe name="targetFrame">
</iframe>

    アプリを実行してリンクをクリックすると、アプリ内でリンクが開きます。 ページは Web コンテキストで実行され、アプリのパッケージに含まれるページと比較されてシステムへのアクセスが制限されます。

    外部の Web ページを iframe で表示するときは、ページに問題がある場合に備えて、カスタム エラー ページを用意しておくことをお勧めします。この方法の例については、XHR、ナビゲーション エラーの処理、URL スキームのサンプルに関するページをご覧ください。

    注  パフォーマンス上の理由から、Windows ストア アプリはリモート コンテンツを無期限にキャッシュする場合があります。その結果、最新のスクリプトや CSS の更新がアプリに表示されない場合があります。アプリのアンインストールや再インストールで、キャッシュはクリアされます。ほかに、クエリ文字列へのランダムなパラメーターの挿入や、Web サーバーの設定により、アプリでキャッシュが行われないようにする解決策もあります。詳しくは、「[HOWTO] Internet Explorer でキャッシュを無効にする」をご覧ください。

     

ローカル コンテキストと Web コンテキストについて

アプリ自体に含まれるページは、通常、アプリのローカル コンテキストで実行されます。iframe を使ってリモート ページに移動した場合、そのページは Web コンテキストで実行され、システムへのアクセスが制限されます。

ローカル コンテキスト ページとスクリプトは、Web コンテキスト内のページとスクリプトがアクセスできるもの以外の機能にアクセスできます。たとえば、Windows ランタイムにアクセスし、クロスドメイン XHR 要求を行うことができます。ローカル コンテキスト ページと Web コンテキスト ページは、どちらも JavaScript 用 Windows ライブラリにアクセスできます。

ローカル コンテキスト ページと Web コンテキスト ページで利用できるさまざまな機能について詳しくは、「各コンテキストの機能と制限」をご覧ください。

アプリのパッケージ マニフェストの ApplicationContentUriRules セクションを使うと、Web コンテキストのページでシステムの地理位置情報デバイス (この機能にアクセスするためのアクセス許可がアプリにある場合) やクリップボードにアクセスできるようになります。

Hh780594.wedge(ja-jp,WIN.10).gifWeb コンテキスト ページに追加アクセス権限を付与するには

  1. Web コンテキストのページに追加アクセス権限を付与するには、コンテンツ URI 規則を作ります。Microsoft Visual Studio のソリューション エクスプローラーで、アプリの package.appxmanifest ファイルを右クリックし、[デザイナーの表示] を選びます。 マニフェスト デザイナーが表示されます。

  2. [URI] 列で、含める Web ページの URI を指定します。

    URI 照合を指定する方法はいくつかあります。

    • 完全なホスト名を指定できます。
    • 任意のサブドメインを指定した URI を含むホスト名、またはサブドメインを指定した URI を除外したホスト名を指定できます。
    • 完全な URI を指定できます。
    • クエリ プロパティを含むことができる完全な URI を指定できます。
    • 対象に含めるルールの場合、部分的なパスを指定し、ワイルドカードを使って特定のファイル拡張子を示すことができます。
    • 対象から除外するルールの場合、相対パスを使うことができます。対象に含めるルールで相対パスを使うことはできません。

    この例では、URI を https://www.bing.com/* に設定しています。

    注  複数のサブドメインがある場合は、サブドメインごとに 1 個のワイルドカードを使う必要があります。 たとえば、"https://*.microsoft.com" は "https://"any".microsoft.com" と一致しますが、"https://"this"."any".microsoft.com" とは一致しません。

     

  3. [ルール] ボックスを使って、URI を含める必要があるか除外する必要があるかを指定できます。これを [必要] に設定します。

  4. [新しい URI の追加] をクリックして規則を追加します。その裏で、デザイナーによって新しい Rule 要素がパッケージ マニフェスト ファイルの ApplicationContentUriRules セクションに追加されます。

          <ApplicationContentUriRules>
        <Rule Match="https://www.bing.com/*" Type="include" />
      </ApplicationContentUriRules>

Web コンテキスト ページからローカル コンテキスト ページへの移動

ローカル コンテキスト ページから MSApp.addPublicLocalApplicationUri を呼び出し、Web コンテキスト ページから移動できるようにするページの URI をこのメソッドに渡さない限り、Web コンテキスト ページからローカル コンテキスト ページに戻ることはできません。たとえば、Web コンテキスト ページからアプリ内の "page2.html" というページに移動できるようにするには、次のコードを使います。

MSApp.addPublicLocalApplicationUri("page2.html");

これで、Web コンテキスト ページから page2.html に移動できます。このメソッドを、Web コンテキスト ページにアクセスできるようにするローカル コンテキスト ページごとに 1 度呼び出す必要があります。

警告  クエリ パラメーターを受け付けるページが存在し、Web 上のある場所からそのページに移動できるように設定すると、その外部 Web ページは悪意のあるクエリ パラメーターを渡すことができる状態になります。

 

関連トピック

各コンテキストの機能と制限