<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>iframe &#8211; 株式会社カジトリ 技術ブログ</title>
	<atom:link href="https://develop.kajitori.co.jp/archives/tag/iframe/feed" rel="self" type="application/rss+xml" />
	<link>https://develop.kajitori.co.jp</link>
	<description>Officeアドイン、Laravel、Exmentなどの技術記事を記載します。</description>
	<lastBuildDate>Wed, 27 Jan 2021 02:48:24 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://develop.kajitori.co.jp/wp-content/uploads/2021/01/cropped-logo1-32x32.png</url>
	<title>iframe &#8211; 株式会社カジトリ 技術ブログ</title>
	<link>https://develop.kajitori.co.jp</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Officeアドインを開発時に気を付けなければいけない地雷まとめ</title>
		<link>https://develop.kajitori.co.jp/archives/22</link>
					<comments>https://develop.kajitori.co.jp/archives/22#respond</comments>
		
		<dc:creator><![CDATA[hsatou]]></dc:creator>
		<pubDate>Mon, 15 Apr 2019 11:48:01 +0000</pubDate>
				<category><![CDATA[Officeアドイン]]></category>
		<category><![CDATA[iframe]]></category>
		<category><![CDATA[PICKUP]]></category>
		<category><![CDATA[地雷]]></category>
		<guid isPermaLink="false">https://develop.kajitori.co.jp/?p=22</guid>

					<description><![CDATA[はじめに 「Officeアドイン」は、ざっくり言うとOffice上で動作するWebアプリケーションです。 Office2013から登場し、Office2016、Office365(クライアント版)、Office365(W...]]></description>
										<content:encoded><![CDATA[<h1>はじめに</h1>
<p>「Officeアドイン」は、ざっくり言うとOffice上で動作するWebアプリケーションです。<br />
Office2013から登場し、Office2016、Office365(クライアント版)、Office365(Web版)など、様々なOfficeで動作します。</p>
<img decoding="async" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204834/b6feaee7-d18b-413a-88c8-c658a536d416.png" alt="image.png" />
<p>Officeアドインは2013年頃に登場し、細々と機能追加を繰り返してきました。<br />
しかし、いかんせんノウハウと情報が少ないです。<br />
そしてこの技術を使えるエンジニアの方も非常に少ないので、なかなか広まらないのも事実です。<br />
「Officeアドイン」と日本語で検索すると、MS公式か、ほとんどが自分の発信な気がしてます・・・笑<br />
（先日、「officeアドイン」で検索したら、<strong>MS公式ページより先に、自分の過去の発信が上位に出てきました笑</strong>）</p>
<p>そしてもう一つ。<br />
このOfficeアドインは、いかんせん情報が少ないこともあり、いざやってみると、意外なところで詰まってしまう「<strong>地雷</strong>」が多いです。<br />
そこで今回は、幾多の案件を行ってきて、この地雷に立ち向かってきた自分が、「<strong>Officeアドインで気を付けなければいけないところ</strong>」についてまとめます。<br />
今後、もしOfficeアドインを案件や自社開発などで使用することを検討している方は、まずこの記事を読んでいただいて、事前に検証いただけることをオススメします。</p>
<h1>地雷まとめ</h1>
<h2>Officeの種類によって、出来ることがぜんぜん違う</h2>
<p>OfficeアドインはOffice2013から登場した、ということは上記で説明しました。<br />
そこからOffice2016、Office365(クライアント版)、Office365(Web版)と増えてくるにつれて、出来る機能も増えてきました。<br />
ですが、<strong>その出来る機能が、すべてのOfficeで使えるものではありません。</strong></p>
<p>例えば「アドインコマンド」。これはOfficeのメニューにコマンドを追加するという機能です。<br />
あらかじめアドインを設定しておけば、以降わざわざOfficeアドインを選択しなくても、メニューボタンをクリックするだけでアドインを実行できます。<br />
<img decoding="async" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204834/8ee7f3f9-9fd1-1cb3-5f21-f6f432b337a9.png" alt="image.png" /></p>
<p>※引用：(<a href="https://docs.microsoft.com/ja-jp/office/dev/add-ins/design/add-in-commands">https://docs.microsoft.com/ja-jp/office/dev/add-ins/design/add-in-commands</a>)</p>
<p>しかし、この機能はOffice2013とOffice2016では動作しません（ただしOutlook2016のみOK）。<br />
こちらに<a href="https://docs.microsoft.com/en-us/office/dev/add-ins/reference/requirement-sets/add-in-commands-requirement-sets">アドイン コマンドの要件セット</a>というページがあるのですが、ここでアドインコマンドは、Office2013と2016は「N/A」や「16.0.4678.1000 Supported in Outlook only」となっています。<br />
つまり非対応ですね。<br />
最新のOfficeだけで合わせると、「これ出来なかったのか」という事故につながるので、気をつける必要があります。</p>
<p>なお、各Officeで出来ること、出来ないことは、以下のページをご参照ください。<br />
<a href="https://docs.microsoft.com/en-us/office/dev/add-ins/reference/requirement-sets/office-add-in-requirement-sets">Office Common API requirement sets</a></p>
<h2>Officeのログイン者情報を、Officeアドインで取得することはできない</h2>
<p>Office2013から、Officeにログインを行うことができます。<br />
<img decoding="async" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204834/ac1b3b4d-6691-8fcd-a5f9-f696395620f1.png" alt="image.png" /></p>
<p>なのでOfficeアドインを始める際、「このログイン情報を取得しよう」と誰もが思うでしょう。このログイン情報からアクセストークンを取得し、ゴニョゴニョしよう、ということです。<br />
ですが、<strong>このOfficeの情報を、Officeアドインでは取得することが、現在は出来ません。</strong><br />
なので、ユーザーのOffice365の情報を絡めたアプリを作成する場合、ユーザーは再度、サインインページを表示する必要があります。</p>
<p>なお正確に言うと、2019/04/13現在、上記機能はプレビュー版です。<a href="https://docs.microsoft.com/en-us/office/dev/add-ins/reference/requirement-sets/identity-api-requirement-sets">Identity API</a>という名前で、現在プレビュー版ということで実装しているようです。<br />
ただし、それでもやはり「Office 2013 or later for Windows」では「N/A」になっているので、いずれにせよOffice2013と2016は切り捨てて実装しなければなりません。</p>
<h2>認証が絡む場合、Office Onlineには本当に注意</h2>
<p>クライアント版のOfficeアドインが、Office Onlineでも動作すると思っていると、確実に失敗します。<br />
なぜなら、クライアント版のOfficeアドインと、Office OnlineのOfficeアドインは、作られ方がぜんぜん違うからです。</p>
<p>クライアント版のOfficeアドインは、ざっくり言うとアプリ内で、ブラウザ（IE）を立ち上げるような形式に対し、<br />
<strong>Office OnlineのOfficeアドインは、iframeで起動します。</strong></p>
<p>もし、サードパーティ(GoogleやOffice365やGitHubなど)のアクセストークンを使用して、サードパーティの情報を使用したアプリを開発しようと考えた場合。<br />
iframeなので、つまりサードパーティ(GoogleやOffice365やGitHubなど)のログイン画面などは、パネル内で表示されないことになります。</p>
<p>一方で、クライアント版では普通に表示されます。<br />
なので、最初にクライアント版でログイン画面が表示され、よしこのままOnline版もやっちゃおう！となった場合、<br />
このことを知らないと、Office Onlineでは確実にエラーになってしまいます。</p>
<h2>回避方法もあるが、IEで以上に面倒なことになる</h2>
<p>これを回避するために、<a href="https://github.com/OfficeDev/office-js-helpers">office-js-helpers</a>という仕組みも用意されています。<br />
これは、ログイン画面をOfficeアドイン内ではなく、ダイアログを起動してログイン画面を表示する仕組みです。<br />
<img decoding="async" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204834/c5ba9332-cd91-22e4-0772-1fd9914d7d15.png" alt="image.png" /><br />
上記のように、アドインとは別のダイアログを起動します。<br />
未ログインの状況であれば、そのままログイン画面が表示され、IDパスワードを入力し、ログイン完了したら、ダイアログを自動で閉じて、アドイン側にトークンを受け渡す、という仕組みです。<br />
ダイアログ内で表示するので、iframeの制約にも引っかかることなく、ログインを行うことができます。</p>
<p>これを使えばいいじゃないか、と思うかもしれませんが、今度はIEの場合で、「<strong>信頼済みサイト</strong>」の問題が出てきます。<br />
「信頼済みサイト」の問題とは、簡単にいうと「<strong>ブラウザ内のすべてのサイトを、同一のセキュリティゾーンに入れなければいけない</strong>」、という制約です。</p>
<p>例えば、Office365にログインを行ってアクセストークンを取得し、Office365の情報を取得するようなアプリを考える場合。<br />
この場合、以下のページの信頼済みサイトを揃える必要があります。<br />
「Office OnlineのSharePointサイト」（<a href="https://foobar.sharepoint.com">https://foobar.sharepoint.com</a>）<br />
「アドインの本体のサイト」（<a href="https://foobar1234567.azurewebsites.net">https://foobar1234567.azurewebsites.net</a>）<br />
「Office365ログインページ」(<a href="https://login.microsoftonline.com">https://login.microsoftonline.com</a>)<br />
<img decoding="async" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204834/73238fc0-0c3b-7a33-6477-fef1f7725377.png" alt="image.png" /></p>
<p>「揃える」とはすなわち、<br />
「<strong>すべて信頼済みサイトに入れる</strong>」か、「<strong>すべて信頼済みサイトに入れない</strong>」の、どちらかです。<br />
これが揃っていないと、エラーが発生します。</p>
<p>そしてこれが厄介なのが、<strong>『いつの間にか、Office OnlineのSharePointサイトが追加されていることがある』</strong>ということです。<br />
Office365をいじっているときなのか、クライアント版のOfficeにアプリのURLを追加した場合なのかは分かりませんが、気付いたらこのSharePointサイトが信頼済みサイトに追加されているときがあります。<br />
そうなると、アプリが起動できなくなります。その場合には、残りのサイトを追加する必要があります。</p>
<p>そして、<strong>この一連の流れを、アプリを利用する利用者にやってもらわなければなりません。</strong><br />
会社でポリシー配布などを行っていればいいですが、そうでない場合でIEで実行を行う場合に、すべての利用者に、この信頼済みサイトの追加をやってもらわなければなりません。・・・まあ、超面倒ですね。<br />
対策としては、「IEをサポートから切り捨てる」というのも有りかもしれないですね笑</p>
<h2>Windows10のIE11で、データのやり取りが正常に動作しない場合がある</h2>
<p>上記のダイアログ形式で、アクセストークンのやり取りをするわけですが、<strong>ここまでやっても、正常に動作しないことがあります。</strong><br />
それはどうも、Windows10の、一定時期より古いIE11だと、正常に動作しないようです。<br />
かんたんに調査してみたでのすが、</p>
<ul>
<li>ダイアログ同士のデータのやり取りは、標準ではjavascriptのpostMessageで行う</li>
<li>だが、IEではpostMessageに対応していないので、localStorageの監視によりデータをやり取りしている</li>
<li>だがだが、Windows10のIE11だと、上記の「IEかどうか」という条件が正常にしておらず、うまく動かない（Office.jsのバグ？）</li>
<li>そのため結果的に、一部のWindows10のIE11だと動作しない</li>
</ul>
<p>ということで、Windows10のIE11だと、うまく動かないことがあるようです。<br />
なので、最終的な結論としては、Online版は<strong>IE非推奨</strong>にしてしまうのが一番ですね。（切実）</p>
<h1>まとめ</h1>
<p>Officeアドインはどうにも伸び悩んでいます。<br />
その背景は多々ありますが、一つはこの地雷の多さにあると、私は思っています。<br />
それでも、Officeアドインで開発する！という事になった場合、まずはこの記事を読んでいただき、どんな地雷があるかどうか、知ってもらえると嬉しいです。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://develop.kajitori.co.jp/archives/22/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
