• はてなブックマークに追加
  • Yahoo!ブックマークに登録
ミクシィ鈴木理恵子の“アプリ開発ビギナー向け講座” Vol.
4
Webアプリ制作に役立つ
「iframe」利用シーン一挙紹介
WebアプリやWebサイトの拡張、マッシュアップして連携するために使われるインラインフレーム「iframe」。今回は利用シーンに応じて分類し、ソーシャルアプリ型、ソーシャルプラグイン型、ブログパーツ型、ポータル型、それぞれの代表例をご紹介します。
(取材・文/鈴木理恵子 総研スタッフ/宮みゆき 撮影/佐藤聡)作成日:12.08.30
身近なWebの世界でよく使われている「iframe」とは

 こんにちは、ミクシィの鈴木理恵子です。この連載はWebアプリ開発をする上で陥りやすいポイントを取り上げて、初心者の方でも読みやすいよう「ゆるふわ」にお話しています。前回まではAPIを利用するのに欠かせないOAuthという技術について取り上げました。今回からはiframeにまつわるお話をしていきます。

 ミクシィはmixiの中で楽しめるWebアプリとして「mixiアプリ」と「mixiページアプリ」を提供しています。これはmixiの画面の中央に四角いアプリ描画エリアを設け、その中にWebアプリを表示しています。Webアプリはmixiではない3rd Partyの開発者の皆さんがご提供下さっていて、mixiとは別のドメインで動いています。

 下図はmixiアプリの画面をGoogle Chromeのディベロッパーツールで表示したものです。HTMLの構造を見ると、アプリの描画部分にiframeを使用していますね。

図1

 iframeはHTMLのタグの1つで、srcに指定したWebページを表示します。私はiframeがドラえもんの「どこでもドア」に似ているなぁと思います。のび太くんは家にいるのだけれどどこでもドアの中は全くの別世界で、例えばドアの向こうがしずかちゃん家のお風呂場の場合もあるでしょう(笑)。iframeも同様で、mixiにいながらmixiの外部にあるWebアプリを表示して遊ぶことができるのです。iframeの中はHTMLやCSS等を解釈してWeb画面が表示されます。さながら小さなブラウザのようですね。

 以前、私はiframeをちょっとダサイ存在に思っていました(汗)。業務用システムが画面デザインを簡単に済ませるために使っているイメージがあり、あまり面白みを感じていませんでした。でも実は、iframeは身近なWebの世界でよく使われています。それは、iframeがWebアプリやWebサイトを拡張したり、マッシュアップして連携したりするための最も簡単な方法のうちの一つだからでしょう。それぞれの利用シーンに応じて分類した中から代表的なものをご紹介します。

■ソーシャルアプリ型

 SNS等のWebページにアプリを組み込んで表示をしているもので、先程ご紹介した「mixiアプリ」や「mixiページアプリ」もこのソーシャルアプリ型です。ほかにはFacebookアプリで「Facebook上のアプリ」を選んだ場合もiframeで表示します。SNSとWebアプリ、つまりiframeの親子間であらかじめSNSから定められたAPIを使い、通信を行うこともあります。

ソーシャルアプリ型

■ソーシャルプラグイン型

 Webサイトで頻繁に見かけるようになった「いいね」ボタンも実はiframeを使って表示しています。この図の場合、iframeのsrcは「http://www.facebook.com/plugins/like.php?…」となっていますね。つまりボタンだけの小さなFacebookのWebページがTech総研さんのWebページに組み込まれています。そしてFacebookへのログイン情報もこのボタンのページに引き継がれています。このようなボタンを『ソーシャルプラグイン』などと呼んだりしますが、ソーシャルプラグイン型のiframeでは、先ほどのソーシャルアプリがSNSの中にアプリをiframeで埋め込んでいたのとは対照的に、iframeの中身がSNSから提供される形になります。

ソーシャルプラグイン型

■ブログパーツ型

 ブログに貼られている小さなガジェットを表示するのにもiframeが使われています。時刻を表示する時計ガジェットのように、シンプルな機能でアカウントも不要であるものが多くあります。

■ポータル型

 残念ながらサービス停止が決まったiGoogleや企業向けポータルのinfoScoopもガジェットの表示にiframeが使われています。アカウントが不要でガジェット単体で機能が閉じているものが多い点がブログパーツ型と似ていますが、ポータル型はガジェットが主役であることで分類を分けています。

ポータル型

 さて、あなたが普段使っているWebツールはありましたか? こう見てみるとiframeは意外と身近ですよね! 特にソーシャルアプリ型のiframe内Webアプリは、SNSの力を利用して多くのユーザを獲得することができるため人気が高まっています。開発してみたいという方も多いのではないでしょうか。

 iframeはまるで小さなブラウザであるかのようにフレーム内にWebページを表示してくれます。そのためフレーム内のWebアプリは通常のWebサイトとほぼ同じ開発方法で作成ができ、特別な技術は必要ありません。しかし全く同じ開発方法で問題ないかというとそうでもなく、そのままだとさまざまな問題に直面してしまうことでしょう。しかも開発中には気付きにくく、サービスイン前に行う動作確認や、サービスインしてユーザからの問い合わせで気付くことが多いようです。さて、この問題とは何でしょうか? 詳しくは次回の連載でお伝えします。どうぞお楽しみに!

鈴木 理恵子

株式会社ミクシィ 技術部 コアプロダクト開発G所属。
青春時代はギター制作に明け暮れていたが、一転、IT業界に転身しプログラマとなる。
業務アプリケーションシステムの開発を経て、現在はミクシィでmixi Graph API等のアプリプラットフォーム開発を担当。

  • はてなブックマークに追加
  • Yahoo!ブックマークに登録

このレポートに関連する企業情報です

◎インターネットメディア事業/ソーシャル・ネットワーキング サービス『mixi』  ◎インターネット求人広告事業/Webな人の転職サイト『Find Job !』(株式会社ミクシィ・リクルートメント提供)続きを見る

あなたを求める企業がある!
まずはリクナビNEXTの「スカウト」でチャンスを掴もう!
スカウトに登録する

このレポートの連載バックナンバー

鈴木理恵子のアプリ開発ビギナー向け講座

ミクシィ鈴木理恵子が、アプリ初心者の方向けに、聞きたくても聞けないアプリ開発の初歩的なノウハウや失敗回避法などを伝授します。

鈴木理恵子のアプリ開発ビギナー向け講座

このレポートを読んだあなたにオススメします

ミクシィ鈴木理恵子の“アプリ開発ビギナー向け講座”

開発者のためのiframe内アプリのセッション管理方法

鈴木理恵子のアプリ開発ビギナー向け講座開発者を悩ませるiframe内表示Webアプリ問題。前回はその現状についてお伝えしましたが、今回はiframe内Web…

開発者のためのiframe内アプリのセッション管理方法

ミクシィ鈴木理恵子の“アプリ開発ビギナー向け講座”

開発者を悩ませるiframe内表示Webアプリ問題とは?

鈴木理恵子のアプリ開発ビギナー向け講座フレーム内に小さなブラウザのようにWebページを表示してくれる「iframe」。特別な技術は必要ないのに、さまざまな…

開発者を悩ませるiframe内表示Webアプリ問題とは?

ミクシィ鈴木理恵子の“アプリ開発ビギナー向け講座”

Treasure Dataなら初心者も大量データ解析ができる!?

鈴木理恵子のアプリ開発ビギナー向け講座今回はTreasure Dataというクラウドサービスを利用し、アプリ開発初心者でも大量のデータを高速かつ簡単にデータ…

Treasure Dataなら初心者も大量データ解析ができる!?

ミクシィ鈴木理恵子の“アプリ開発ビギナー向け講座”

アプリデータ解析ができるおすすめクラウドサービス

鈴木理恵子のアプリ開発ビギナー向け講座アプリ開発で欠かせないのがデータ解析。今回はお手軽にアプリデータ解析ができるサービス「Google Analytics…

アプリデータ解析ができるおすすめクラウドサービス

ミクシィ鈴木理恵子の“アプリ開発ビギナー向け講座”

初心者でもわかる!アプリ開発に役立つHerokuの機能

鈴木理恵子のアプリ開発ビギナー向け講座前回ご紹介した「mixi、Facebookで活用できるアプリ自動生成機能」。どちらのアプリもHeroku上に自動生成…

初心者でもわかる!アプリ開発に役立つHerokuの機能

広める?深める?…あなたが目指したいのはどっちだ

自分に合った「キャリアアップ」2つの登り方

「キャリアアップしたい」と考えるのは、ビジネスパーソンとして当然のこと。しかし、どんなふうにキャリアアップしたいのか、…

自分に合った「キャリアアップ」2つの登り方

この記事どうだった?

あなたのメッセージがTech総研に載るかも

あなたの評価は?をクリック!(必須)

あなたのご意見お待ちしております

こちらもお答えください!(必須)

歳(半角数字)
(全角6文字まで)
  • RSS配信
  • twitter Tech総研公式アカウント
  • スカウト登録でオファーを待とう!
スマートグリッド、EV/HV、半導体、太陽電池、環境・エネルギー…電気・電子技術者向け特設サイト

PAGE TOP