携帯電話でGoogle Mapsを使う

Size: px
Start display at page:

Download "携帯電話でGoogle Mapsを使う"

Transcription

1 PHP のファイルは UTF-8 BOM なしで保存し の public_html に置く! テーマ研究会 (05/10) Google Maps を使う 政策情報学部 渡辺恭人 メーリングリスト 資料

2 前回の課題 (1)+α +α 単に $addr を変更するだけでは面白くない 利用者がブラウザ (IE など ) から入力できるとよい テーマ研究会 1 で習った内容を復習して使う フォームで入力させ POST や GET を使って送信 実現方法 入力用のフォームの HTML ファイルを新規作成 フォームから送信された住所の文字列を受信する部分を gc2.php に追加する gc3.php とする 2

3 入力用のフォームのHTMLファイルを新規作成 sendaddr.htm UTF-8 で保存 入力用のフォームを HTML で作成 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> 住所入力 </title> </head> <body> <form method="post" action="gc3.php"> 住所 : <input type="text" name="addr" size= 30" /> <input type="submit" value=" 送信 " /> </form> </body> </html> 3

4 sendaddr.htm 送信された住所の文字 列を受信する部分を gc2.php に追加 gc2.php を改造して sendaddr.htm から POST で送信された住所の文字列を受信し 処理する 処理内容は変更無し 変更点 Geocoding を利用して緯度 経度を取得 Heartrails expressを利用して 緯度 経度から最寄り駅を検索 結果を表示 gc3.php として保存 $addr のところを POST で受信したパラメタにする $addr = $_POST['addr']; 4

5 Google Maps API Google Maps Google 社が提供するオンライン地図サービス Google Maps API 外部の開発者が利用できるように提供された API 使うには Version 3 ( 以下 V3 と略 ) が 2009 年 5 月 27 日に公開 これまでは利用するために 登録と API key の取得が必須だったが不要になった 5

6 サンプル ( 前半 ) <html> <head> <!--iphone 用フルスクリーン表示設定 --> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>google Maps API V3 サンプル </title> <!--Google Maps API の読み込み --> <script type="text/javascript" src=" <script type="text/javascript"> function initialize() { // 地図の座標位置 ( 経度, 緯度 ) を設定 var latlng = new google.maps.latlng( , ); // 地図必須プロパティを設定 var myoptions = { // 地図の初期ズーム値 zoom: 18, 6

7 PC 用のサンプル ( 後半 ) // 地図の初期中心位置 ( 経度, 緯度 ) を設定 center: latlng, // 地図タイプを設定 maptypeid: google.maps.maptypeid.roadmap }; // 地図を生成し 指定した HTML エレメントに表示 var map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions); } </script> </head> <!-- ページ読み込み後に initialize() 関数を実行 --> <body onload="initialize()"> <!-- 地図表示用の領域を幅 高さ 100% で設定 --> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html> 7

8 PHP と組み合わせる Google Maps API は JavaScript からの利用を前提に作られており そのままでは PHP で使えない ライブラリ GoogleMapsAPI クラス を使用する Phpinsider.com から配布されている PHP の知識のみで GoogleMapsAPI を利用可能 日本対応部分は 秋元裕樹氏作成の日本向け対応クラスを利用する 8

9 携帯電話の制約 PC のように JavaScript がブラウザから使えず Ajax にも対応していないので Google Maps などの楽しい Web アプリは使えない しかし 地図を利用したいアプリやサービスはたくさんある 解決法 地図画像を静止画として利用する Google Static Maps API(Google マップの静的画像用 API) が公開 maps/?hl=ja 9

10 地図を静止画で出力する方法 Google Static Maps API(Google マップの静的画像用 API) を使う ion/staticmaps/?hl=ja 使い方例 千葉商科大学を中心に ズームレベル 14 で 画像サイズを 240 ドット 320 ドットで表示する nter= , &zoom=14&size=24 0x320 この URL をブラウザで開くか HTML の中で IMG タグに組み込む 10

11 留意点 Static map を使用するときは パラメタ sensor が必須となる sensor( 必須 ) は 静的マップをリクエストしているアプリケーションがユーザーの位置情報を取得するのにセンサーを用いているかを指定します このパラメータはすべての静的マップのリクエストに必須です 例 sensor=true または false 11

12 使い方例の地図画像 12

13 地図の種類を変える パラメタ名 : maptype roadmap( デフォルト ) Google マップウェブサイトで通常表示される標準の道路地図画像 satellite 航空写真 terrain 物理的な地形図画像です 地形や植生 hybrid 航空写真と道路地図を組み合わせたもので 航空写真の上に主要な道路や場所の名前の透過レイヤが表示される 例 , &zoom=14&size=240x320&maptype= hybrid 13

14 画像にマーカーを追加する URL にマーカーの座標と設定値を並べて書く markers=markerstyles markerlocation1 markerlocat ion2 設定値 ( オプションなくてもよい これらを でつなげて書く ) 大きさ : size: {tiny, mid, small} 省略すると普通のサイズ 色 : color: {black, brown, green, purple, yellow, blue, gray, orange, red, white}. Label: アルファベットまたは番号 : alphanumericcharacter {A-Z, 0-9} 14

15 画像にマーカーを追加する 例 千葉商科大学に青で S の文字のマーカーを付ける , &zoom=14&size=400x400&markers=color :blue label:s , &sensor=false center= , は省略可能自動的に適切な地図を作成する 15

16 さらにマーカーを追加する マーカー毎に &markers から設定値と位置情報を付ける 例 国府台駅の緑で G の文字のマーカーを付ける &zoom=15&size=400x400&markers=color:blue label:s , &markers=color:green label:g , &sensor=false 16

17 位置情報の取得 携帯電話やスマートフォンには GPS が内蔵されていることが多く 地球上の絶対位置 ( 緯度 経度 ( 高度 )) を取得することができる GPS が使えない場合 大まかな位置を取得することができる 携帯電話では基地局情報 PC やスマートフォンではネットワーク位置情報 17

18 携帯電話での位置情報取得 各携帯電話会社ごとに方法は異なるが GET や POST でサーバに送る仕組みがある ( 資料参照 ) サンプルプログラムを試す をダウンロードして展開 3 つのファイルを の自分の publuc_html に転送する 次に 携帯電話から ユーザ名 /gps.php にアクセスする 18

19 PC やスマートフォンで位置情報取得 HTML5 の geolocation API を使用する JavaScript から呼び出す サンプルプログラムを試す をダウンロードして展開 geo0.html ファイルを の自分の publuc_html に転送する 次に PC またはスマートフォンから ユーザ名 /gps.php にアクセスする ( PC の場合は Firefox か Chrome ブラウザを使う ) 19

20 課題 後半の Google Maps を静止画で利用する部分を gc3.php に追加して 検索された最寄り駅を Google Maps で表示させなさい 入力実行したプログラムと その実行結果をレポートしなさい レベル 0: 結果ごとに地図を表示させる レベル 1: 地図にマーカーを付ける 上級レベル : 検索結果を 1 つの地図に複数マーカーで表示させる レポート方法 プログラムそのもの ( テキスト ) 実行画面のスクリーンダンプ 感想 20

21 課題 ( つづき ) 提出物 プログラムファイルと実行結果を Word のファイルに貼り付けて メールで提出する 実行画面は フリーソフトの WinShot を使うか または Alt キー + PrintScreen キーを使う ファイル名 : kadai0510- 学籍番号.doc 提出方法 メールで riho-m-rg11@cuc.ac.jp に送る 私個人宛のメールは受け取らないので注意 締切 5/16 18:00 21

携帯電話でGoogle Mapsを使う

携帯電話でGoogle Mapsを使う PHPのファイルは UTF-8 BOMなしで 保 存 し www.cyaneum.orgのpublic_htmlに 置 く! テーマ 研 究 会 (04/28) Google Mapsを 使 う 政 策 情 報 学 部 渡 辺 恭 人 riho-m@cuc.ac.jp メーリングリスト riho-m-rg10@cuc.ac.jp 資 料 http://www.cuc.ac.jp/rg10/ 前 回

More information

Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21

Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21 Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 1/21 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111207 演習

More information

~モバイルを知る~ 日常生活とモバイルコンピューティング

~モバイルを知る~ 日常生活とモバイルコンピューティング テーマ研究会 (2011/04/27) ~ Web アプリ プログラミング入門 (2)~ 政策情報学部 渡辺恭人 riho-m@cuc.ac.jp 資料ページ : http://www.cuc.ac.jp/~riho-m/rg11/ 作業 1: 前回分を少し改造 1 行目の place = 那覇 の 那覇 の部分を他の地名に変えてみる 南西諸島地域以外の場合は 2 行目も変更する必要がある xmlfile

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 情報整理のための Google Map API 入門 日紫喜光良 プロジェクト I/II 2016.9.23 1 今日の目標 Google Map API を用いて Google Map の地図上にマーカーを表示する HTML Web ページの構造を宣言する 地図を表示する場所を宣言する Javascript プログラミング Web ページの地図表示箇所上に 地図を描く マーカーオブジェクトを生成して

More information

医療者のための情報技術入門第 10 回プログラムがはたらくしくみを学ぶ (3) 日紫喜光良 概要 1. はじめに- 具体例から- 2.Javascript のプログラミング入門 ここから 足りないものは借りてくる-Javascrip

医療者のための情報技術入門第 10 回プログラムがはたらくしくみを学ぶ (3) 日紫喜光良 概要 1. はじめに- 具体例から- 2.Javascript のプログラミング入門 ここから 足りないものは借りてくる-Javascrip 2014.6.30 医療者のための情報技術入門第 10 回プログラムがはたらくしくみを学ぶ (3) 日紫喜光良 概要 1. はじめに- 具体例から- 2.Javascript のプログラミング入門 ------------ ここから-------- 3. 足りないものは借りてくる-Javascript のライブラリ ( 現在地の住所を調べる ) 4. 仕事は人にやらせる-サーバとブラウザの役割分担

More information

untitled

untitled Ajax Web Ajax http://www.openspc2.org/javascript/ajax/ajax_stu dy/index.html Life is beautiful Ajax http://satoshi.blogs.com/life/2005/06/ajax.html Ajax Ajax Asynchronous JavaScript + XML JavaScript XML

More information

SmartBrowser_document_build30_update.pptx

SmartBrowser_document_build30_update.pptx SmartBrowser Update for ios / Version 1.3.1 build30 2017 年 8 月 株式会社ブルーテック 更新内容 - 概要 ios Version 1.3.1 build28 の更新内容について 1. 設定をQRから読み込み更新する機能 2.URLをQRから読み込み画面遷移する機能 3.WEBページのローカルファイル保存と外部インテントからの起動 4.JQuery-LoadImageライブラリの組み込み

More information

Microsoft PowerPoint - 04WWWとHTML.pptx

Microsoft PowerPoint - 04WWWとHTML.pptx 船舶海洋情報学 九州大学工学府海洋システム工学専攻講義資料担当 : 木村 04. WWW と HTML WWW(World Wide Web) インターネットの情報をハイパーテキスト形式で参照できる情報提供システム HTML などのコンテンツを HTTP プロトコルで転送 インターネット クライアント PC WWW の情報を画面に表示するクライアントソフトウエア :WEB ブラウザ Internet

More information

スライド タイトルなし

スライド タイトルなし 御中 ドキュメント種 : お得意様名 : システム名 : デモ説明資料資料 EditionFlex DEMO 第一版平成 22 年 11 月第二版平成 22 年 12 月 11 日 15 日 Page - 1 1 DEMO1 Edition Flex エディター ( 編集画面 ) の呼出 DEMO1 では RESOLOGIC の Web サーバー上のデモメニューから まったく別のクラウド上にある Flex

More information

6 2 1

6 2 1 6 1 6 (1) (2) HTML (3) 1 Web HTML 1 Web 1 Web Web 6 2 1 6 3 1.1 HTML(XHTML) Web HTML(Hyper Text Markup Language) ( ) html htm HTML XHTML(XHTML 1.0 Transitional)

More information

Webデザイン論

Webデザイン論 2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 前回の課題 Web デザイン論 の期末試験まで何日残っているか表示する Web ページを JavaScript で制作し 公開せよ 宛先 : dan@cc.matsuyama-u.ac.jp

More information

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID 10 10 10.1 1. 2. 3. HTML(HyperText Markup Language) Web [ ][ ] HTML Web HTML HTML Web HTML ~b08a001/www/ ( ) ~b08a001/www-local/ ( ) html ( ) 10.2 WWW WWW-local b08a001 ~b08a001/www/ ~b08a001/www-local/

More information

メディプロ1 Javaサーブレット補足資料.ppt

メディプロ1 Javaサーブレット補足資料.ppt メディアプロジェクト演習 1 Java サーブレット補足資料 CGI の基本 CGI と Java サーブレットの違い Java サーブレットの基本 インタラクティブな Web サイトとは Interactive q 対話 または 双方向 q クライアントとシステムが画面を通して対話を行う形式で操作を行っていく仕組み 利用用途 Web サイト, シミュレーションシステム, ゲームなど WWW = インタラクティブなメディア

More information

~モバイルを知る~ 日常生活とモバイルコンピューティング

~モバイルを知る~ 日常生活とモバイルコンピューティング 政策情報学部 渡辺恭人 riho-m@cuc.ac.jp 作業 1: 前回分を少し改造 1 行目の place = 那覇 の 那覇 の部分を他の地名に変えてみる 南西諸島地域以外の場合は 2 行目も変更する必要がある xmlfile = http://weather.livedoor.com/forecast/rss/amedas/temp/ 10/47.xml http://weather.livedoor.com/weather_hacks/rss_feed_lis

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 情報システム基礎演習 B 2016/01/28 (Thurs.) テーマ 4 JavaScript による電卓 Web アプリを作成しましょう 健山智子 (t.tateyama.es@cc.it-hiroshima.ac.jp) 広島工業大学情報学部知的情報システム学科知的情報可視化戦略研究室 (ival) 講義のアウトライン 2 1. グループの決定 : 1. 5 人での 6 グループ ( ランダム

More information

Webプログラミング演習

Webプログラミング演習 Web プログラミング演習 STEP9 Ajax を利用した RSS フィードのタイムライン表示 Ajax Asynchronous JavaScript + XML クライアントサイド ( ブラウザ内 ) で非同期サーバ通信と動的ページ生成を組み合わせる技術の総称 ウェブアプリケーションの操作性向上 ( ページ遷移を伴わない ) サーバとの小刻みな通信 = 必要なデータを必要な時に要求 ( リクエスト

More information

JavaScript 1.! DOM Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2

JavaScript 1.! DOM Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2 JavaScript (2) 1 JavaScript 1.! 1. 2. 3. DOM 4. 2. 3. Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2 (1) var a; a = 8; a = 3 + 4; a = 8 3; a = 8 * 2; a = 8 / 2; a = 8 % 3; 1 a++; ++a; (++

More information

Webプログラミング演習

Webプログラミング演習 Web プログラミング演習 特別編 いいね ボタンの実装 いいね ボタン ( 英語では Like) Facebook で, 他の人のコンテンツ ( コメント 写真など ) の支持を表明するためのボタン クリックすると, 自分の Facebook のタイムラインに支持したことが記録される ( コメントを同時投稿することも可能 ) 友達のニュースフィードに表示 コンテンツ毎にクリックしたユーザ数がカウントされる

More information

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 演習

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 演習 Web データ管理 JavaScript (4) (4 章 ) 2012/1/11( 水 ) 1/22 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20120111 演習

More information

Delphi/400開発ノウハウお教えします Googleマップ連携によるリッチなGUIアプリ開発

Delphi/400開発ノウハウお教えします Googleマップ連携によるリッチなGUIアプリ開発 セッション No.4 Delphi/400 開発ノウハウお教えします Google マップ連携によるリッチな GUI アプリ開発 株式会社ミガロ. システム事業部プロジェクト推進室 小杉智昭 アジェンダ Web サービス概要 Web サービスを利用するには Google マップを使ったアプリケーション例 はじめに 2000 年代初めごろに登場した Web サービス は着々と利用が広がり さまざまなサービスが提供されるようになりました

More information

untitled

untitled 2007 IT G Google Map API WEB2.0 2007 8 23 GoogleMapAPI GoogleMapAPI Google Web URL XHTML JavaScript GoogleMAP LHACA FFFTP TeraPad Haruhiro Unno Japan Electronics College 1 GoogleMapAPI Web Google GMail

More information

WebOTXマニュアル

WebOTXマニュアル WebOTX アプリケーション開発ガイド WebOTX アプリケーション開発ガイドバージョン : 7.1 版数 : 第 2 版リリース : 2010 年 1 月 Copyright (C) 1998-2010 NEC Corporation. All rights reserved. 4-1-1 目次 4. J2EE WebOTX...3 4.1. Webアプリケーション...3 4.1.1. Webアプリケーションを作成する...3

More information

forever朝活

forever朝活 forever 朝活 php 講座復習の巻 株式会社フォーエバー 目次 php の基本... 2 php とは?... 2 Web サーバーの代用品 xampp... 2 htdocs がドキュメントルート... 3 プログラムの基本... 4 変数の復習... 4 フォームデータを php で受け取る... 4 セッションでデータを渡す... 8 1 php の基本 今日は php の復習をしてみましょう

More information

1

1 1 2 3 4 確認しよう 今回のサンプルプログラムにアクセスしてみましょう 1. デスクトップ上のフォルダをクリックし /var/www/html に example1.html と example2.php ファイルがあることを確認します 2. ブラウザを起動し 次の URL にアクセスします http://localhost/example1.html 3. 自分の手を選択して じゃんけんぽん

More information

Webデザイン論

Webデザイン論 2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 出席確認 受講管理システム AMUSE を使って 本日の出席登録をせよ 学籍番号とパスワードを入力するだけでよい : http://davinci.cc.matsuyama-u.ac.jp/~dan/amuse/

More information

LeafletとCesiumを切り替えて使用するライブラリS-mapの公開

LeafletとCesiumを切り替えて使用するライブラリS-mapの公開 Leaflet と Cesium を切り替えて使用するライブラリ S-map の公開 西岡芳晴 産業技術総合研究所地質情報研究部門シームレス地質情報研究グループ 20 万分の 1 日本シームレス地質図 ~ 誰にでも使いやすい地質図を目指して ~ S-map 公開サイト ( 試験公開中 ) 1.https://gsj-seamless.jp/labs/smap/doc/ S-map とは? 1. シームレス地質図のために開発した地図描画ライブラリ

More information

Microsoft PowerPoint _2b-DOM.pptx

Microsoft PowerPoint _2b-DOM.pptx 要素ノードの参照 プロパティで参照可能な親 子 兄弟ノード 要素ノードの他に, テキストノード, ノード, コメントノードなど様々なノードが含まれる ( 処理中に判別が必要 ) 要素ノードのみ参照するプロパティ プロパティ 参照先 parentelement 親要素 firstelementchild 先頭の子要素 lastelementchild 末尾の子要素 nextelementsibng 直後の兄弟要素

More information

C:\Apache Software Foundation\Apache2.2\htdocs\sample\login.html サンプルプログラム passworddisc.php <head><title> ログイン </title></head> $user=$_post['user']; $

C:\Apache Software Foundation\Apache2.2\htdocs\sample\login.html サンプルプログラム passworddisc.php <head><title> ログイン </title></head> $user=$_post['user']; $ PHP を利用すると 動的に Web ページを生成することが出来る 予め HTML ファイルを準備しておき その内で必要に応じてスクリプトを記載することで Web アプリケーションを容易に開発することが出来る Java に比べて 比較的にサーバーの設定などが 簡単である ホームページから PHP 応用演習ソースプログラム をダウンロードして C:\Apache Software Foundation\Apache2.2\htdocs\sample\

More information

第7回 Javascript入門

第7回 Javascript入門 Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 9 回 JavaScript 入門 (2) 萩野達也 (hagino@sfc.keio.ac.jp) 1 JavaScript 入門 ( 前回 ) オブジェクト指向について JavaScriptの誕生プロトタイプベースのオブジェクト指向 言語 構文および制御構造 代入条件文繰り返し関数

More information

Web のしくみと応用 ('15) 回テーマ 1 身近なWeb 2 Webの基礎 3 ハイパーメディアとHTML 4 HTMLとCSS 5 HTTP (1) 6 HTTP (2) 7 動的なWebサイト 8 クライアントサイドの技術 回 テーマ 9 リレーショナルデータベース 10 SQL とデータ

Web のしくみと応用 ('15) 回テーマ 1 身近なWeb 2 Webの基礎 3 ハイパーメディアとHTML 4 HTMLとCSS 5 HTTP (1) 6 HTTP (2) 7 動的なWebサイト 8 クライアントサイドの技術 回 テーマ 9 リレーショナルデータベース 10 SQL とデータ Web のしくみと応用 ('15) 回テーマ 1 身近なWeb 2 Webの基礎 3 ハイパーメディアとHTML 4 HTMLとCSS 5 HTTP (1) 6 HTTP (2) 7 動的なWebサイト 8 クライアントサイドの技術 回 テーマ 9 リレーショナルデータベース 10 SQL とデータベース管理システム 11 認証とセッション管理 12 Web のセキュリティ 13 Web の応用 (1)

More information

実験 5 CGI プログラミング 1 目的 動的にWebページを作成する手法の一つであるCGIについてプログラミングを通じて基本的な仕組みを学ぶ 2 実験 実験 1 Webサーバの設定確認と起動 (1)/etc/httpd/conf にある httpd.conf ファイルの cgi-bin に関する

実験 5 CGI プログラミング 1 目的 動的にWebページを作成する手法の一つであるCGIについてプログラミングを通じて基本的な仕組みを学ぶ 2 実験 実験 1 Webサーバの設定確認と起動 (1)/etc/httpd/conf にある httpd.conf ファイルの cgi-bin に関する 実験 5 CGI プログラミング 1 目的 動的にWebページを作成する手法の一つであるCGIについてプログラミングを通じて基本的な仕組みを学ぶ 2 実験 実験 1 Webサーバの設定確認と起動 (1)/etc/httpd/conf にある httpd.conf ファイルの cgi-bin に関する次の項目を調べよ このとき CGIプログラムを置く場所 ( CGI 実行ディレクトリ) と そこに置いたCGIプログラムが呼び出されるURLを確認せよ

More information

JavaScript 演習 2 1

JavaScript 演習 2 1 JavaScript 演習 2 1 本日の内容 演習問題 1の解答例 前回の続き document.getelementbyid 関数 演習問題 4 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習問題 5 演習問題 1 prompt メソッドと document.write メソッドを用いて, ユーザから入力されたテキストと文字の色に応じて, 表示内容を変化させる JavaScript

More information

Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/18

Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/18 Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 1/18 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111221

More information

ÉvÉçPM_02

ÉvÉçPM_02 2 JavaScript 2JavaScript JavaScript 2-11hello1.html hello

More information

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 講義で使うフォルダ 2/23

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 講義で使うフォルダ 2/23 Web データ管理 CGI (3 章 ) 2011/11/30( 水 ) 1/23 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 講義で使うフォルダ 2/23 CGI とは Common Gateway Interface の略 通常のページでは

More information

2016 IP 1 1 1 1.1............................................. 1 1.2.............................................. 1 1.3............................................. 1 1.4.............................................

More information

19 ステップで 2 大人気スクリプト言語を学ぶ GUI のあるアプリを作る STEP11 から STEP12 までまとめ 1.Python での GUI アプリ作成 Python は標準ではグラフィックスの機能を持ちませんが ライブラリを使うことで GUI のアプリを作成することができる そこで

19 ステップで 2 大人気スクリプト言語を学ぶ GUI のあるアプリを作る STEP11 から STEP12 までまとめ 1.Python での GUI アプリ作成 Python は標準ではグラフィックスの機能を持ちませんが ライブラリを使うことで GUI のアプリを作成することができる そこで 19 ステップで 2 大人気スクリプト言語を学ぶ GUI のあるアプリを作る STEP11 から STEP12 までまとめ 1.Python での GUI アプリ作成 Python は標準ではグラフィックスの機能を持ちませんが ライブラリを使うことで GUI のアプリを作成することができる そこで Kivy というソフトウェアを使う Kivy は Python のパッケージ管理システム pip を使ってインターネット上のファイルサーバからインストールが可能である

More information

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) Web プログラミング 1 CGI (3 章 ) 2012/6/12( 水 ) 講義

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) Web プログラミング 1 CGI (3 章 ) 2012/6/12( 水 ) 講義 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) Web プログラミング 1 CGI (3 章 ) 2012/6/12( 水 ) 講義で使うフォルダ 1/23 2/23 CGI とは Common Gateway Interface の略

More information

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は 1225-9 練習 9 Skew Wheel(skewX, skewy, skew) カラーホイールが斜めに回転するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると カラーホイールが 回転しながら斜めに傾いていきます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 カラーホイールの画像の傾き transform

More information

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top 1116 位置の記述方法について (position, top, right, bottom, left) ここまでの説明では ボックスの大きさを変えると その後ろや下にある他のボックスの位置が移動してしまいました それは margin プロパティが隣接するボックスとの間の空白を指定しているからです position プロパティを使用すると ボックスの配置位置を指定して位置を固定させたり 移動できるようにすることができます

More information

第 7 回の内容 動的な Web サイト フォーム Web システムの構成

第 7 回の内容 動的な Web サイト フォーム Web システムの構成 第 7 回の内容 動的な Web サイト フォーム Web システムの構成 動的な Web サイト 静的なリソース ファイルシステムのパス / URI のパス a 公開ディレクトリ / b b GET /b HTTP/1.1 c c e d /a/b を送り返す d e 静的なリソース ファイルシステムのパス / / URI のパス f b c e GET /g/e HTTP/1.1 d /f/e

More information

~モバイルを知る~ 日常生活とモバイルコンピューティング

~モバイルを知る~ 日常生活とモバイルコンピューティング 2012/04/19 個 人 行 動 支 援 の 情 報 提 供 PHPの 応 用 政 策 情 報 学 部 渡 辺 恭 人 riho-m@cuc.ac.jp PHPのファイルは UTF-8 BOMなしで 保 存 し www.cyaneum.orgのpublic_htmlに 置 く! 変 更 研 究 計 画 書 の 作 成 今 学 期 の 作 業 の 中 身 を 考 えて 現 時 点 での 構 想 と

More information

JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と

JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と略 ) にある ガントチャートプラグイン を 下記の手順で利用してみましょう ガントチャートプラグイン

More information

PowerPoint Presentation

PowerPoint Presentation 上級プログラミング 2( 第 1 回 ) 工学部情報工学科 木村昌臣 今日のテーマ 入出力に関わるプログラムの作り方 ネットワークプログラミングの続き TCP の場合のプログラム 先週のプログラムの詳細な説明 URLクラス サーバープログラムの例 データ入出力プログラミングの復習 テキストの読み込み関係のクラス テキストからデータを読み込むときには 通常 三段構えで行う バイナリデータとして読み出し

More information

Webデザイン論

Webデザイン論 2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 出席確認 受講管理システム AMUSE を使って 本日の出席登録をせよ 学籍番号とパスワードを入力するだけでよい : http://davinci.cc.matsuyama-u.ac.jp/~dan/amuse/

More information

コンテンツメディアプログラミング実習2

コンテンツメディアプログラミング実習2 CMP 実習 2 JavaScript + 地図を使ってみよう 中村, 宮下, 斉藤, 菊池 1 必要な知識 JavaScript の基本 HTMLのどの部品なのかを指定する方法 その部品にイベントを埋め込む方法 それを JavaScript で記述する方法 2 要素をどうやって取得する? DOM とは Document Object Model HTML や XML の各要素についてアプリケーションから利用するための

More information

<443A5C C8D488DEC5C C92B28DB85C E690B65C504382C AF82E9476F6F676C6589B990BA94468EAF82CC E707074>

<443A5C C8D488DEC5C C92B28DB85C E690B65C504382C AF82E9476F6F676C6589B990BA94468EAF82CC E707074> 日本音響学会北陸支部ジョイント研究会資料 PC に於ける Google 音声認識の利用 山崎信久 ( ウィンドクラフト ) 船田哲男 ( 元金沢大 ) 音声認識の種類 方式 特定話者方式 ( 特定話者での学習が必要 ) 不特定話者方式 ( 学習不要 ) 種類 連続認識 単語認識 ( 限定語認識 ) 連続認識 単語認識 ( 限定語認識 ) 例 ) Windows 搭載 音声コマンド Tool Julius

More information

2003年度 情報処理概論

2003年度 情報処理概論 提出課題 課題 1( 提出課題 ): 利用者の情報を入力し 登録 ボタンを押すと, 入力されたデータで利用者 (user) テーブルにレコードを新規登録する Web ページを作りましょう. 手順 1:HTML のファイル ( 利用者情報の入力 Web ページ ) を input_regist_user.html という名前で作業フォルダに作成する. 手順 2:DB に登録処理を行う PHP プログラムのファイルを

More information

ArcGIS for Server での Web マップの作成方法

ArcGIS for Server での Web マップの作成方法 ArcGIS for Server での Web マップの作成方法 1 目次 はじめに... 3 このドキュメントについて... 3 ArcGIS アプリケーションとは... 3 ArcGIS for Server での Web マップの作成... 5 コンテンツサーバ... 6 モバイルコンテンツディレクトリ... 6 マップコンテンツの検索とフォルダの操作... 7 Web マップの作成...

More information

Microsoft PowerPoint - TwitterInsight edit.pptx

Microsoft PowerPoint - TwitterInsight edit.pptx IBM Bluemix を使って Twitter 上の評判検索アプリケーションを作る ibm.biz/bluemix-i4tw IBM Insights for Twitter デモサイト https://cdetestapp.mybluemix.net/ 2 IBM で検索 IBM を含むツイートが検索される 3 IBM sentiment:positive で検索 IBM を含むツイートで 内容がポジティブなものだけが検索される

More information

Taro-02_Web_html自習テキストⅡ.

Taro-02_Web_html自習テキストⅡ. 平成 18 年度 学校 Web ページ作成研修講座 HTML の基礎 Ⅱ ~ メモ帳で Web ページを作ろう!!~ 今回の勉強内容 背景画像の挿入 / 画像の挿入 / BGM の設定 / メールリンクの設定 岩手県立総合教育センター 情報教育室 目 次 1 復習 1 2 背景画像の挿入 2 3 画像の挿入 4 4 BGM の挿入 5 5 メールリンクの設定 6 作業フォルダの準備 作成したファイルを保存するフォルダとして

More information

スライド 1

スライド 1 Sencha Touch 入門 2011/11 伊藤雄大 ( 株 ) コア北海道カンパニー ビジネスソリューション部 IT ビジネスチーム アジェンダ 1. 会社紹介 自己紹介 2. なぜWebUI? 3. Sencha Touch ってどんな感じ? 4. Sencha Touch デモ 5. どうやって実装するの?- 基礎編 6. どうやって実装するの?- 応用編 7. 今回の開発で困ったこと 会社紹介

More information

Blue Asterisk template

Blue Asterisk template IBM Content Analyzer V8.4.2 TEXT MINER の新機能 大和ソフトウェア開発 2008 IBM Corporation 目次 UI カスタマイズ機能 検索条件の共有 柔軟な検索条件の設定 2 UI カスタマイズ機能 アプリケーションをカスタマイズするために Java Script ファイルおよびカスケーディングスタイルシート (CSS) ファイルの読み込み機能が提供されています

More information

Microsoft PowerPoint - CSS(Cascading Style Sheets)の基本.pptx

Microsoft PowerPoint - CSS(Cascading Style Sheets)の基本.pptx CSS(Cascading Style Sheets) の基本 1. CSSの基本的な考え方は HTMLの構造を表す要素 ( タグ ) に対しスタイルを定義するというもの 2. CSSでは セレクタ プロパティ 値 の3つを組み合わせてスタイルを設定する 3. セレクタ は ,, や 要素などコンテンツ内のどの要素にスタイルを適用するかを指定する 4. セレクタの次の

More information

スライド 0

スライド 0 第 3 章さまざまな情報を取り込むテキストファイル形式の住所録や写真や GPS ログ等を取り込みます 3-1 テキスト情報の取込み テキスト情報の取り込みとは CSV 形式 またはテキスト形式で顧客管理 販売管理 年賀状ソフトなど他のアプリケーションから出力された情報をスーパーマップル デジタル上にカスタム情報として取り込むことができます 参考 一度に取り込めるデータは データ内容の容量と機種の能力によりますが

More information

ArcGIS API for JavaScript スタートアップ ガイド

ArcGIS API for JavaScript スタートアップ ガイド ArcGIS API for JavaScript スタートアップ ガイド 目次 はじめに... 2 このスタートアップガイドについて... 2 ArcGIS API for JavaScript とは... 2 ArcGIS API for JavaScript の開発環境... 3 WEB マッピングアプリケーションの開発... 4 ArcGIS API for JavaScript によるアプリケーションの作成...

More information

Web プログラミング 1 JavaScript (4) (4 章 ) 2013/7/17( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5

Web プログラミング 1 JavaScript (4) (4 章 ) 2013/7/17( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5 Web プログラミング 1 JavaScript (4) (4 章 ) 2013/7/17( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/8 ( 水 ) HTML+CSS (3) (2 章 ) 5/15 ( 水 ) HTML+CSS (4)

More information

第7回 Javascript入門

第7回 Javascript入門 Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 9 回 JavaScript 入門 (2) 萩野達也 (hagino@sfc.keio.ac.jp) 1 JavaScript 入門 ( 前回 ) オブジェクト指向について JavaScriptの誕生プロトタイプベースのオブジェクト指向 言語 構文および制御構造 代入条件文繰り返し関数

More information

超簡単にWebページを作成

超簡単にWebページを作成 Lesson を始める前に どんなプログラマーもこれを実践しました 超簡単に Web ページを作成 この解説書は Lesson が高レベルになっても参照用として利用して下さい この章の実践方法はまず解説ページ内にある HTML ソースコードをコピーして メモ帳などに貼り付けて 実行して 表示してそのあとで表示内容を解説します 最初は全然理解できない方でも 同じ HTML コードを繰り返し 繰り返 し実践する事で

More information

6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1

6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML 6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 3 1.1 HTML Web HTML(Hyper Text Markup Language)

More information

1 JIS X 8341-3:2016 WCAG2.0 http://waic.jp/docs/wcag2/understanding.html WCAG2.0 http://waic.jp/docs/wcag2/techs.html 2 ... 1... 3... 6 1.1... 6 1.2... 7... 8 1.1.1... 8 1.2.1... 13 1.2.2... 14 1.2.3...

More information

情報システム工学特論 Web アプリの作成により 次のことを学んでもらいます 1 無料ソフトウェアの活用 2 無料のソフトウェア開発ツール Runstant Lite 3 Web ブラウザのゲームライブラリ phina.js 4 Web アプリとは 無料ソフトウェアの活用 無料ソフトウェアとは イン

情報システム工学特論 Web アプリの作成により 次のことを学んでもらいます 1 無料ソフトウェアの活用 2 無料のソフトウェア開発ツール Runstant Lite 3 Web ブラウザのゲームライブラリ phina.js 4 Web アプリとは 無料ソフトウェアの活用 無料ソフトウェアとは イン 情報システム工学特論 Web アプリの作成により 次のことを学んでもらいます 1 無料ソフトウェアの活用 2 無料のソフトウェア開発ツール Runstant Lite 3 Web ブラウザのゲームライブラリ phina.js 4 Web アプリとは 無料ソフトウェアの活用 無料ソフトウェアとは インターネットなで 無料で提供されているソフトウェアのこと フリ ーソフト とも言う パソコンの学習や活用に大いに役立つ

More information

JavaScript演習

JavaScript演習 JavaScript 演習 2 山口研究室後期博士課程 3 年玉川奨 ( たまがわすすむ ) 居室 :24-604 / 23-620 mail : s_tamagawa@ae.keio.ac.jp 1 前回の補足説明 + 復習 IE における JavaScript のデバッグ方法 prompt 関数 演習問題 1 IE における JavaScript のデバッグ方法 1. ツール インターネットオプションメニューを実行

More information

ウェブデザイン技能検定学科試験 3 級 1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 head 要素は body 要素の前に記述する 第 2 問 アクセシビリティの観点から img 要素の alt 属性には何らかのテキストを入力することが

ウェブデザイン技能検定学科試験 3 級 1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 head 要素は body 要素の前に記述する 第 2 問 アクセシビリティの観点から img 要素の alt 属性には何らかのテキストを入力することが 1. 各設問において 正しいものは 1 を 間違っているものは 2 を 該当設問の解答欄に記せ 第 1 問 head 要素は body 要素の前に記述する 第 2 問 アクセシビリティの観点から img 要素の alt 属性には何らかのテキストを入力することが必須である 第 3 問 画像データであれば 拡張子を.jpeg に変更すれば JPEG 形式のファイル形式となる 第 4 問 擬似要素 :hover

More information

Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/

Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/ Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/8 ( 水 ) HTML+CSS (3) (2 章 ) 5/15 ( 水 ) HTML+CSS (4)

More information

■新聞記事

■新聞記事 情報処理 C (P.1) 情報処理 C ホームページ作成入門 テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合 ) [ スタート ]-[ プログラム ]-[ テキストエディタ ]-[TeraPad] をクリック

More information

Microsoft Word - homepage

Microsoft Word - homepage web ページ 1. web ページ ( ホームページ ) の公開 インターネットには無数の web サイトが公開されています. 複数の web ページのまとまりのことを web サイトと言います.web ページは,web ブラウザを使って閲覧できます. 代表的な web ブラウザ ( 以下ブラウザと略 ) は, マイクロソフトの IE(Internet Explorer) や Edge があります.

More information

Microsoft PowerPoint - Lecture_3

Microsoft PowerPoint - Lecture_3 プログラミング III 第 3 回 : サーブレットリクエスト & サーブレットレスポンス処理入門 Ivan Tanev 講義の構造 1. サーブレットの構造 2. サーブレットリクエスト サーブレットレスポンスとは 3. 演習 2 Lecture2_Form.htm 第 2 回のまとめ Web サーバ Web 1 フォーム static 2 Internet サーブレ4 HTML 5 ットテキスト

More information

第 8 回の内容 クライアントサイド処理 JavaScript の基礎

第 8 回の内容 クライアントサイド処理 JavaScript の基礎 第 8 回の内容 クライアントサイド処理 JavaScript の基礎 クライアントサイド処理 クライアントサイド / サーバサイド クライアントサイド サーバサイド Web ブラウザ Web サーバ 動的な Web ページ Web ブラウザ Web サーバ Web ブラウザ Web サーバ リソース生成 描画 描画 リソース生成 再描画 描画 再描画 描画 リソース生成 再描画 動的な Web ページとページ遷移

More information

凸 凸 デコメールとは 簡易な HTML メール 普通のメール デコメールだと 各キャリアの凸 DoCoMo (i-mode) デコメール au (EZweb) デコレーションメール SoftBank (S! メール ) アレンジメール DoCoMo / デコメール Version 対応機種テンプレート 1.0 900iシリーズ 901iシリーズ らくらくホンIII 2.0 D800iDS 902iシリーズ

More information

情報システム設計論II ユーザインタフェース(1)

情報システム設計論II ユーザインタフェース(1) CMP 実習 2 DB+PHP+XML/JSON+JavaScript 中村, 宮下, 斉藤, 菊池 1 PHP と JavaScript 連携 サーバとクライアントをどうやって繋げるか? PHP と JavaScript 間の情報のやりとりを行う JavaScript JSON/XML PHP DB 簡易的な Web API を作ろう! PHP に GET で情報を送り込むことで XML または

More information

Microsoft Word - no11

Microsoft Word - no11 web ページ 1. web ページ ( ホームページ ) の公開 インターネットには無数の web サイトが公開されています. 複数の web ページのまとまりのことを web サイトと言います.web ページは,web ブラウザを使って閲覧できます. 代表的な web ブラウザ ( 以下ブラウザと略 ) は, マイクロソフトの IE(Internet Explorer) や Edge があります.

More information

SOC Report

SOC Report IE8 以降の F12 開発者ツール を使った DOM Based XSS の検査法について N T T コ ミ ュ ニ ケ ー シ ョ ン ズ株式会社 ソ リ ュ ー シ ョ ン サ ー ビ ス 部 第四エンジニアリング部門 セキュリティオペレーション担当 2011 年 09 月 05 日 Ver. 1.0 1. 調査概要... 3 2. F12 開発者ツール... 3 2.1. F12 開発者ツール...

More information

情報システム設計論II ユーザインタフェース(1)

情報システム設計論II ユーザインタフェース(1) 中村研究室ゼミ Web API / 取り込んで利用する 中村聡史 1 PHP + MySQL どうでした? データを集めるのが大変 データベースを構築するのが大変 データを入力してくのが大変 2 3 API Web API とは? Application Program Interface( 何らかの機能をプログラミングするための仕組み ) メソッド名 + 引数で何らかの動作を実現する! Web API

More information

合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 The. H.30 情報研究会 1

合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 The. H.30 情報研究会 1 合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 2018 6.12 The. 1 前回の復習 n ブラウザ って何? n Web サイト のキホンを作ってみよう 2 ブラウザ とは?HTML とは?? n ブラウザとは? WEB ページを閲覧するためのソフトウェア p HTML というブラウザに言語を表示する言語によって表示されている n HTML とは? p Hyper Text

More information

SVG資料第10回目(その2) Ajaxによる同期通信と非同期通信の違い

SVG資料第10回目(その2) Ajaxによる同期通信と非同期通信の違い 10 ( SVG 10 ( Ajax Ajax I(SVG) 2017/6/27 10 ( Ajax 10 ( Ajax 100 10 HTML 1 2 3 4 5 6

More information

Microsoft PowerPoint - css-3days 互換モード

Microsoft PowerPoint - css-3days 互換モード 情報基礎 CSS を用いた Web ページ作成 CSS とは Cascading Style Sheet の省略表記 シーエスエスと読む Web ページのレイアウト ( 視覚的構造 ) を定義する スタイルシート の規格の一つ Web の標準化団体である W3C(World Wide Web Consortium) によって標準化 W3C で推奨される考え方 論理構造 : マークアップ言語 HTML,

More information

触覚マウスライブラリを使った 触覚付き Web ページの作り方 ver 富士ゼロックス株式会社 -1-

触覚マウスライブラリを使った 触覚付き Web ページの作り方 ver 富士ゼロックス株式会社 -1- 触覚マウスライブラリを使った 触覚付き Web ページの作り方 ver. 2.0 2001.08.17 富士ゼロックス株式会社 -1- 1 画像全体に触覚テクスチャをつける 画像全体に触覚テクスチャを貼り付けた HTML ファイルのソースを次に示します 画像全体に触覚テクスチャをつける

More information

システム設置方法 ご購入いただきますと ご注文時のメールアドレス宛に専用のダウンロードアカウントをお送りしておりますので こちらの発行アカウントでダウンロードシステム にログインして頂きシステム一式をダウンロードしてください URL はご購入後のご案内となります ダウンロード後の設置手順は下記の通り

システム設置方法 ご購入いただきますと ご注文時のメールアドレス宛に専用のダウンロードアカウントをお送りしておりますので こちらの発行アカウントでダウンロードシステム にログインして頂きシステム一式をダウンロードしてください URL はご購入後のご案内となります ダウンロード後の設置手順は下記の通り アドクロック AD-Clock 管理画面解説マニュアル この度は 弊社の アドクロック をご購入いただきましてありがとうございます アドクロックは WEBサイトの広告枠へ掲載する広告を管理する広告管理システムです 広告枠を登録し 一度タグを貼るだけで 広告の配信管理が可能となりますので 面倒なタグの差し替え作業などは不要です 広告表示制御も充実しており ローテーション広告 ( ランダム配信 ) はもちろん

More information

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ 1225-6 練習 6 Overflow The Stage(overflow) ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょ う Hover ボタンの上をマウスポインター ( カーソル ) で hover すると ピエロの玉乗りが ステージの外から入って外へ出て行きます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 ピエロとボールの横方向の動き

More information

WEBシステムのセキュリティ技術

WEBシステムのセキュリティ技術 WEB システムの セキュリティ技術 棚橋沙弥香 目次 今回は 開発者が気をつけるべきセキュリティ対策として 以下の内容について まとめました SQLインジェクション クロスサイトスクリプティング OSコマンドインジェクション ディレクトリ トラバーサル HTTPヘッダ インジェクション メールヘッダ インジェクション SQL インジェクションとは 1 データベースと連動した Web サイトで データベースへの問い合わせや操作を行うプログラムにパラメータとして

More information

soturon2013

soturon2013 4.4. CGI, CGI Web. UNIX, UNIX Windows. UNIX CGI. i ( ). mi- http://www.mimikaki.net/ 67 (mi- ),mi-, http://ugawalab.miyakyo-u.ac.jp/j3/chika/wari.cgi.txt http://ugawalab.miyakyo-u.ac.jp/j3/chika/wari.cgi.txt,.

More information

Moshimo Challenge Report

Moshimo Challenge Report このコーナーは HTML CSS のことならなんでもおまかせの マリー と うさぎ界 No.1 とも言われているデザイナー ナムー が WEB ページ作成の コツを解説していきます 少し技術的な内容も含まれていますが 分からない ことは積極的に調べて 1 つ 1 つスキルアップをしていきましょうね! マリー HTML CSS のプロフェッショナル うさぎだけど好きなブラウザは Fire Fox ナムー

More information

Microsoft Word Webmail

Microsoft Word Webmail 7.8 Web Mail を利用する Web Mail は ウェブブラウザを介して東京都市大学のメールサーバから電子メールを送受信するものです 以下にメールの受信や送信などの基本的な使い方を説明します 第 7 章電子メール (Web Mail) 1. 利用を開始する ( ログイン ) (1) ブラウザの URL 入力欄に https://mail.tcu.ac.jp/ を入力して Enter キーを押してください

More information

リスト 1 1 <HTML> <HEAD> 3 <META http-equiv="content-type" content="text/html; charset=euc-jp"> 4 <TITLE> 住所の検索 </TITLE> 5 </HEAD> 6 <BODY> <FORM method=

リスト 1 1 <HTML> <HEAD> 3 <META http-equiv=content-type content=text/html; charset=euc-jp> 4 <TITLE> 住所の検索 </TITLE> 5 </HEAD> 6 <BODY> <FORM method= 第 4 章 セキュア Perl プログラミング [4-3.] Perl の Taint モード ( 汚染検出モード ) Perl のエンジンには Taint モード ( 汚染検出モード ) というものがある このモードで動作する Perl エンジンは, 外部から与えられた警戒すべきデータを汚染データとしてマーキングし, それが処理の過程でどの変数に伝搬していくかを追跡してくれる これは, セキュア

More information

ISコースプロジェクト実習 前期(第1回 ガイダンス)

ISコースプロジェクト実習 前期(第1回 ガイダンス) プロジェクト実習 IS2 前期 ( 第 1 回 ) 使用教室 :5-102,8-203,8-303,8-305,4-205 担当教員 : 熊谷和志, 早川吉弘 資料サイト : 熊谷研究室授業資料 (http://ckuma.html.xdomain.jp/class/) 1. 授業を進める上で 授業概要 1 学年の コンピュータリテラシ, 総合工学基礎実験 を踏まえ, 数週間から数ヶ月の中長期にわたり,

More information

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動 1225-8 練習 8 Translate Balls(translateX, translatey, translate) transform プロパティの translate 関数を使用して 2 つのボールを斜めに転がすトランジシ ョンを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると 2 つのボールが斜 めに転がります 動きの仕組み このトランジションは

More information

Microsoft Word - PHP演習資料.doc

Microsoft Word - PHP演習資料.doc PHP 概要ホームページは 毎回同じ画面しか表示する事が出来ない 従って ログインごとにパスワード認証をしたり 現在の時刻を表示したりするためには プログラムで HTML の構文を動的に作成する必要がある 一般的には Java や C# が使われるが それらは多少大がかりな仕掛けが必要になる 従ってプロバイダのレンタルサーバ等で 利用できるプログラムは 基本的には Pearl や PHP しか無い

More information

情報リテラシー(4)

情報リテラシー(4) 情報リテラシー (14) 教室の後方 3 列への着席 を禁止します 1 情報リテラシー (14) 2018 年度前期 九州産業大学理工学部 2 講義計画 第 8 回 (2018/ 6/ 8) デジタル情報の利用 (1) 第 9 回 (2018/ 6/15) デジタル情報の利用 (2) 第 10 回 (2018/ 6/22) 資料の作成 (1) 第 11 回 (2018/ 6/29) 資料の作成 (2)

More information

緊急情報メール配信システム

緊急情報メール配信システム 緊急情報メールの情報変更 削除方法について 準備 1. 迷惑メールフィルターの設定をご確認ください 携帯電話の迷惑メール対策の設定で インターネット (PC) からのメール 本文中に URL があるメール アドレス帳に登録されていないアドレスからのメール これらの受信を拒否している場合は緊急情報メールを受信できない場合がございます お手数ですが以下のドメイン メールアドレスを受信可能に設定してください

More information

Microsoft PowerPoint - Lecture_2

Microsoft PowerPoint - Lecture_2 プログラミング Java III 第 2 回 :WebForm および サーブレット入門 Ivan Tanev 講義の構造 1. ダイナミックWebコンテンツとサーブレット 2.Webフォーム 3. 演習 2 1. ダイナミック Web コンテンツとサーブレット 3 1. ダイナミック Web コンテンツとサーブレット Internet Response: HTML テキスト ユーザー 4 1. ダイナミック

More information

CONTENTS 0 /JSP 13 0.1 Web 14 1 HTML Web 21 1.1 Web HTML 22 1.2 HTML 27 1.3 Web 33 1.4 HTML 43 1.5 46 1.6 47 1.7 48 2 Web 51 2.1 Web 52 2.2 Web 54 2.3 Web 59 2.4 65 2.5 68 2.6 75 2.7 76 2.8 77 3 81 3.1

More information

目次 0. 計測タグ設置の基本 3 このマニュアルについて... 4 計測タグ設置の流れ... 5 必ず確認していただきたいこと 計測タグの種類 7 入口ページタグ... 9 コンバージョンタグ イベント計測用タグ 計測タグの設置方法 14 計測タグを設

目次 0. 計測タグ設置の基本 3 このマニュアルについて... 4 計測タグ設置の流れ... 5 必ず確認していただきたいこと 計測タグの種類 7 入口ページタグ... 9 コンバージョンタグ イベント計測用タグ 計測タグの設置方法 14 計測タグを設 計測タグの設置と動作確認方法 このマニュアルの対象となる方 ウェブアンテナの計測タグをサイトに設置するご担当の方 (HTML に関する知識をある程度お持ちの方を想定 ) このマニュアルでわかること 計測タグの設置方法や注意点 コンバージョン属性を計測するための実装例 計測タグの動作確認方法 正しく動作していない場合に考えられる原因 2017 年 03 月 24 日改定版 目次 0. 計測タグ設置の基本

More information

ビジネスサーバ設定マニュアル_Standard応用編

ビジネスサーバ設定マニュアル_Standard応用編 ビジネスサーバ シリーズ設定マニュアル ~Standard 応用編 ~ 本マニュアルの内容は サービスの各機能に関する解説資料としてご利用いただくことを目的としております 設定変更にあたっては 予め変更対象のファイル等のバックアップを取られることをお奨め致します ( 弊社側でのファイル復旧は出来ませんのでご注意ください ) 第 1.3 版 株式会社 NTT ぷらら 本ご案内に掲載している料金等は消費税相当額を含んでおりません

More information

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML Web 工学博士大堀隆文 博士 ( 工学 ) 木下正博 共著 World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML ii HTML CSS CSS HTML HTML HTML HTML Eclipse Eclipse Eclipse

More information

情報システム運用・管理規程

情報システム運用・管理規程 Web 情報共有サービスの概要 (2015/3/17 版 ) 情報処理センター 1 どういうサービス? パソコンのファイルを 他のユーザに送ったり 他のユーザから受け取ったり することができます 2 どういう仕組み? IPC のサーバの共有フォルダにファイルを保存 Web ブラウザからアップロード Web ブラウザからダウンロード 3 何がうれしいのか? そんな面倒なことしなくても, メールにファイルを添付して送ればいいじゃないか?

More information

管理者から携帯電話に向けて命令や位置確認を行います 携帯電話からリアルタイムに情報をアップロードするとともに サーバ側のデータと同期をします GPS 測位を用いて 現在位置や軌跡を管理します 携帯電話からシステム契機でメールを送付します 基幹サーバと連携するためのデータファイルの出力や プリンタ連携

管理者から携帯電話に向けて命令や位置確認を行います 携帯電話からリアルタイムに情報をアップロードするとともに サーバ側のデータと同期をします GPS 測位を用いて 現在位置や軌跡を管理します 携帯電話からシステム契機でメールを送付します 基幹サーバと連携するためのデータファイルの出力や プリンタ連携 ~ モバイル機器を使った ~ 組み上げソリューションのご案内 1 管理者から携帯電話に向けて命令や位置確認を行います 携帯電話からリアルタイムに情報をアップロードするとともに サーバ側のデータと同期をします GPS 測位を用いて 現在位置や軌跡を管理します 携帯電話からシステム契機でメールを送付します 基幹サーバと連携するためのデータファイルの出力や プリンタ連携などを行います システム情報を 管理者

More information

JavaScript演習

JavaScript演習 JavaScript 演習 2 1 本日の内容 prompt 関数 演習 1 演習 2 document.getelementbyid 関数 演習 3 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習 4 IE における JavaScript のデバッグ方法 1. ツール インターネットオプションメニューを実行 2. 詳細設定タブの スクリプトエラーごとに通知を表示する をチェック

More information