Comments
Description
Transcript
レジュメ
基礎セミナー インターネットを使って情報発信し よう 第７回 インラインフレーム(iframe)，外部サービスの利用 インラインフレーム インラインフレーム • Webページの中に小窓（インラインフレーム）を作り， そこに別のWebページを表示できる機能 メインのWebページ インラインフレーム インラインフレームの記述方法 iframe1.html sub1.html <html> <html> <head> ・・・（略）・・・ </head> <head> ・・・（略）・・・ </head> <body> <body> <h1>インラインフレームとは</h1> <h2>サブページ１</h1> <iframe src="sub1.html" name=“sub” width="400" height="400"></iframe> これはサブページ１です． </body> </html> </body> </html> インラインフレーム内の ページ切り替え リンクをクリックすると このインラインフレーム の中が切り替わる インラインフレームの記述方法 iframe2.html sub1.html, sub2.html, sub3.html <html> <html> <html> <html> <head> <head> ・・・（略）・・・ <head> ・・・（略）・・・ </head> ・・・（略）・・・ </head> </head> <body> <body> <body> <h2>サブページ１</h1> <h2>サブページ１</h1> <h2>サブページ３</h1> これはサブページ１です． これはサブページ１です． これはサブページ３です． </body> </body> </html> </body> </html> </html> <head> ・・・（略）・・・ </head> <body> <h1>インラインフレームとは</h1> <ul> </ul> <li><a href="sub1.html" target="sub">サブページ１</a></li> <li><a href="sub2.html" target="sub">サブページ２</a></li> <li><a href="sub3.html" target="sub">サブページ３</a></li> <iframe src="sub1.html" name="sub" width="400" height="400"></iframe> </body> </html> 外部サービスの利用 Googleのサービス • Gmail • Googleカレンダー • Googleマップ • Googleドライブ • Googleフォト • Google+ • YouTube ・・・ Googleカレンダー埋め込みの例 Googleカレンダーにアクセス • http://www.google.com/calendar/ • Googleアカウントがある人はログイン • 無い人はこの機会に作ってみましょう Googleカレンダーの画面 月表示・週表示・日表示等 切り替えることができる 自分で編集可能な カレンダー 閲覧のみ可能な カレンダー Googleカレンダーの操作 予定を追加した日を クリック タイトルを入力． さらに「編集」を押すと 時間や詳細も入力できる． 埋め込み用カレンダーの準備 この演習用に，公開可能な カレンダーを新規作成する 埋め込み用カレンダーの準備 「このカレンダーを共有」 を選択 埋め込み用カレンダーの準備 「このカレンダーを一般公開 する」にチェックし，「保存」 ※もちろん公開したくない カレンダーはチェックしては いけない 埋め込み用カレンダーの準備 先ほど作った 新規カレンダーの 「カレンダー設定」 を選択 カレンダーの共有設定 ここの文字列を全選択して コピー （iframeタグを使った記述 になっている） Webページに文字列を貼り付け gcal.html <html> <head> ・・・（略）・・・ </head> <body> <h1>Googleカレンダーの埋め込み</h1> <iframe src="https://calendar.google.com/calendar/embed?src=********%40gmail.com&ctz=Asia/Tokyo" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe> </body> </html> コピーした文字列をここに 貼り付ける Webページを確認 Googleマップにアクセス • http://www.google.com/maps/ Googleマップにアクセス 名称や住所を入力して検索 「共有」をクリック Googleマップにアクセス 「地図を埋め込む」を選択 ここに表示される文字列を 全選択しコピー Webページに文字列を貼り付け gmap.html <html> <head> ・・・（略）・・・ </head> <body> <h1>Googleマップの埋め込み</h1> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52419.770890985244!2d135. 49530470506033!3d******************!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6000f b60db96a653%3A0xc4d761b68075571e!2z5aSn6Ziq5aSn5a2mIOeUo-alreenkeWtpueglOeptuaJgA!5e0!3m2! 1sja!********** " width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> コピーした文字列をここに </body> </html> 貼り付ける Webページを確認