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

Size: px
Start display at page:

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

Transcription

1 19 ステップで 2 大人気スクリプト言語を学ぶ GUI のあるアプリを作る STEP11 から STEP12 までまとめ 1.Python での GUI アプリ作成 Python は標準ではグラフィックスの機能を持ちませんが ライブラリを使うことで GUI のアプリを作成することができる そこで Kivy というソフトウェアを使う Kivy は Python のパッケージ管理システム pip を使ってインターネット上のファイルサーバからインストールが可能である まず Python3.4 を Python 本家の Python.org からダウンロードしインストールを行う Python の pip を使って Kivy をインストールするには 以下のコマンドをコマンドプロ ントで入力する python m pip install --upgrade pip wheel setuptools python m pip install docutils pygments pypiwin32 kivy.deps.sd12 kivy.deps.glew python m pip install kivy 次に簡単なアプリの起動リスト 1 main.py import kivy from kivy.app import App 取り込む from kivy.uix.label import Label #kivy をインポート #kivy.app というパッケージを指定し App を class MyApp(APP): def build(self): return Label(text= Hello world ) # クラスの定義 # 関数定義 #Hello world を表示 if name == main : MyApp().run() # アプリの起動

2 if name == main : は その Python のファイルをメインのプログラムとしても ライブラリ ( モジュール ) としても使いたいときに使用する メインプログラムで実行された場合は if 文は True になり 別のファイルからライブラリとして読み込まれた場合は False になる すなわち if 文の配下に ライブラリとして読み込まれたときに実行したくないコード を記述することができる ボタンを押すとこんにちは! を表示する GUI アプリリスト 2 import kivy #kivy をインポート from kivy.app import App #kivy.app というパッケージを指定し App を取り込む from kivy.uix.button import Button from kivy.uix.boxlayout import BoxLayout from kivy.uix.label import Label class TextApp(App): # クラスの定義 def build(self): # 関数定義 layout = BoxLayout(padding=30, orientation= vertical ) #Kivy が提供する BoxLayout クラス self.label = Label(font_size 50sp, font_name meiryo.ttc ) # フォントサイズ 68sp メイリオ layout.add_widget(self.label)

3 button = Button(text= OK, font_size= 48sp ) # ボタンの定義 button.bind(on_press = self.buttonclicked) # ボタンが押された際に buttonclickd 関数を実行 layout.add_widget(button) # ボタンウィジェット return layout # 戻り値 def buttonclicked(self, btn): # 関数の定義 ( ボタンが押された際 ) self.label.text= 徐ゼミの皆さん, こんにちは! # 徐ゼミの皆さん, こんにちは! の文字を Label クラスで作成 if name == main : TextApp().run() #name が main なら #TextApp の起動

4 グラフィックスを描く 線を描くだけのテストプログラム リスト 1 import kivy #kivy をインポート from kivy.app import App #kivy.app というパッケージを指定し App を取り込む from kivy.uix.widget import Widget from kivy.graphics import Color, Line classmyline(widget): # クラスの定義 def drawline(self, x0, y0): # 関数定義 color=(0.5, 0, 0) with self.canvas: color(*color, mode= rgba ) line(points=[x0, y0, x0+50,y0+80],width=5) class MyLineApp(App): def build(self): line = MyLine() line.drawline(400,300) retrun line if name == main :

5 MyLineApp().run() tree.py フラクタルで樹木を描く リスト 2 以下実行で樹木を描くことができる 描写の処理は重く 完了に時間がかかる DrawTree メソッドで再帰呼び出す 再帰の回数が多いほど複雑な樹木になる import kivy import math from kivy.app import App from kivy.uix.widget import Widget from kivy.graphics import Color.Line class Tree(Widget): def drawtree(self, n, x0, y0, 1, a): if n<0: return if n<10: color=(0, 0.3, 0.18) else:

6 color=(0.6, 0.3, 0) xl = int(x0 + math.cos(a*math.pi/180)*1) y1 = int(y0 math.sin(a*math.pi/180)*1) with self.canvas: Color(*color, mode= rgba ) Line(points=[x0,600-y0,xl,600-y1],width=n/3) self.drawtree(n-1, x1, y1, 1*0.7, a-20) self.drawtree(n-1, x1, y1, 1*0.7, a+20) class TreeApp(App): def build(self): tree = Tree() tree.drawtree(14, 400, 700, 200, 90) return tree if name == name : TreeApp().run()

7 2.JavaScript で GUI アプリを作る JavaScript で GUI アプリを作るには,GUI の部品は HTML で, 動作は JavaScript で書 くのが一番素直な方法です. 以下の textinput.html は簡単な GUI アプリの例です. textinput.html <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>gui サンプル </title> <style> body{ padding:20px; } </style> </head> <body> <p id="resulttext"> こんにちは </p> <p><label for="inputtext"> お名前は :</label> <input type="text" id="inputtext" size="30"></p> <p><button onclick="showname()">ok</button></p> <script type="text/javascript"> //script の中身が JavaScript ファイルであることを明記 function showname() { // 関数定義 let resulttext = document.getelementbyid("resulttext"); let inputtext = document.getelementbyid("inputtext"); resulttext.innerhtml = " こんにちは " + inputtext.value + " さん "; } </script> </body> </html>

8 これは OK ボタンを押すと, テキスト入力欄から文字列を取得して, こんにちは ( 取得し た文字列 ) さん と表示される.JavaScript のプログラムは script タグで記述します. JavaScript でグラフィックスを描く JavaScript では,HTML5 の canvas の機能を使うことで, 自由にグラフィックスを描 くことが出来ます. プログラムは以下の tree.html になります. tree.html <html> <head> <meta http-equiv="content-type" content="text/html; charaset=utf-8"/> <title>javascript で描くフラクタル </title> <style>canvas{ background-color: black; }</style> </head> <body> <p><canvas id="drawingcanvas" width="800" height="600"/></p> <script> let drawingcanvas = document.getelementbyid('drawingcanvas'); let ctx = drawingcanvas.getcontext("2d"); drawtree(ctx, 12, 400, 700, 200, 90); function drawtree(ctx, n, x0, y0,l,a){ if(n<0) return; let clr = 'orange'; if(n<1) clr = 'green';

9 let x1 = Math.round(x0 + (Math.cos(a*Math.PI/180))*l); let y1 = Math.round(y0 - (Math.sin(a*Math.PI/180))*l); ctx.strokestyle = clr; ctx.linewidth = n / 3; ctx.moveto(x0, y0); ctx.lineto(x1, y1); ctx.stroke(); drawtree(ctx, n-1, x1, y1, l*0.7, a-20); drawtree(ctx, n-1, x1, y1, l*0.7, a+20); } </script> </body> </html> フラクタルの描画は描画を担当する drawtree 関数の再起呼び出しで, 樹木の形をしたフラ クタル画像を生成しています. これは Python の樹木を生成する方法と同じです.

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

JavaScript 演習 2 1

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

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

JavaScript演習

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

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

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

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

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

More information

C#の基本

C#の基本 C# の基本 ~ 開発環境の使い方 ~ C# とは プログラミング言語のひとつであり C C++ Java 等に並ぶ代表的な言語の一つである 容易に GUI( グラフィックやボタンとの連携ができる ) プログラミングが可能である メモリ管理等の煩雑な操作が必要なく 比較的初心者向きの言語である C# の利点 C C++ に比べて メモリ管理が必要ない GUIが作りやすい Javaに比べて コードの制限が少ない

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

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

~モバイルを知る~ 日常生活とモバイルコンピューティング 政策情報学部 渡辺恭人 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

第1章 ビジュアルプログラミング入門

第1章 ビジュアルプログラミング入門 第 9 章アプレット 学習内容とねらい 本章では Java 言語で作ったプログラムを Web ブラウザ上で動作させる方法を学習します Java 言語には これまで作成してきた Windows アプリケーションの他に Web ブラウザ上で動作させる事のできるアプレットという形態があります このアプレットを利用すれば Web 上で Java プログラムを公開することもできます アプレットは Java 言語の普及当初は

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

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

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

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

~モバイルを知る~ 日常生活とモバイルコンピューティング テーマ研究会 (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

ÉvÉçPM_02

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

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

ご利用のコンピュータを設定する方法 このラボの作業を行うには 事前設定された dcloud ラボを使用するか 自身のコンピュータをセットアップします 詳細については イベントの事前準備 [ 英語 ] とラボの設定 [ 英語 ] の両方のモジュールを参照してください Python を使用した Spar

ご利用のコンピュータを設定する方法 このラボの作業を行うには 事前設定された dcloud ラボを使用するか 自身のコンピュータをセットアップします 詳細については イベントの事前準備 [ 英語 ] とラボの設定 [ 英語 ] の両方のモジュールを参照してください Python を使用した Spar ご利用のコンピュータを設定する方法 このラボの作業を行うには 事前設定された dcloud ラボを使用するか 自身のコンピュータをセットアップします 詳細については イベントの事前準備 [ 英語 ] とラボの設定 [ 英語 ] の両方のモジュールを参照してください Python を使用した Spark API との通信 このラーニングモジュールでは Python を使用した Spark API とのインターフェイスを扱います

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

6 章 付録 マニフェストファイルの設定新規プロジェクトの作成手順追加モジュールのバージョン Bootstrap CSS の適用場所追加モジュールの登録記述アニメーションアイコン CSS の適用場所 3 章の変更 3.2 ダウンロード URL やインストールコマンドが変更になります ❶N

6 章 付録 マニフェストファイルの設定新規プロジェクトの作成手順追加モジュールのバージョン Bootstrap CSS の適用場所追加モジュールの登録記述アニメーションアイコン CSS の適用場所 3 章の変更 3.2 ダウンロード URL やインストールコマンドが変更になります ❶N 2017/02/23 開発環境バージョンアップ対応手順書 はじめに本書では ソフトウェアのインストール時にバージョンを指定することで 書籍の記述との違いや不具合を最小限に抑えてきました 今月 Angular CLI の指定バージョン 1.0.0-beta.17 の配布が終了したため 新しいバージョンへの対応を行います この手順書は 本書が現時点で最新の開発環境へ対応する方法をまとめたものです 不具合発生への対応今回指定する最新バージョンも

More information

Prog2_6th

Prog2_6th 2017 年 11 月 2 日 ( 木 ) 実施 インテントインテントとは Android アプリは複数のアクティビティを持つことが出来, また, アクティビティ以外の要素も持つので, 複数のアクティビティ間, アクティビティとアクティビティ以外の要素との間といったオブジェクト間を結び付ける仕組みが必要となる その役割を担うのがインテントで, 複数のアプリ間やアプリとシステムとの間もインテントで結び付けることが出来る

More information

Prog2_9th

Prog2_9th 2017 年 11 月 30 日 ( 木 ) 実施 Canvas による描画 Canvas とは Canvas は, 描画コールを保持するためのクラスである 描画には, 次の 4 つの要素が必要である (1) ビットマップピクセル ( 画素 ) を保持 (2) キャンバス描画コール ( ビットマップへの書き出し要請 ) に対応 (3) 描画プリミティブ描画領域, パス, テキスト, ビットマップ等

More information

Prog2_12th

Prog2_12th 2018 年 12 月 13 日 ( 木 ) 実施クラスの継承オブジェクト指向プログラミングの基本的な属性として, 親クラスのメンバを再利用, 拡張, または変更する子クラスを定義することが出来る メンバの再利用を継承と呼び, 継承元となるクラスを基底クラスと呼ぶ また, 基底クラスのメンバを継承するクラスを, 派生クラスと呼ぶ なお, メンバの中でコンストラクタは継承されない C# 言語では,Java

More information

スライド タイトルなし

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

More information

Intl WebStorm Google Chrome (64-bit) Node.js git for Windows 開発環境バージョンアップの影響 1 章変更なし 2 章変更なしソフトウェアのバージョン指定 3 章

Intl WebStorm Google Chrome (64-bit) Node.js git for Windows 開発環境バージョンアップの影響 1 章変更なし 2 章変更なしソフトウェアのバージョン指定 3 章 2017/04/07 Angular4.0 バージョンアップ対応手順書 Angular2 によるモダン Web 開発 TypeScript を使った基本プログラミング ( 以下 本書 と記載します ) の対象である Angular2 は 2017 年 3 月 23 日にメジャーバージョンアップ を行い Angular4.0 になりました Angular4.0 への対応をまとめたのがこの手順書です Angular

More information

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

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

More information

ボタンイベントアプリイベント処理を含むアプリとして, ボタンをもち, ボタンを押すと文字列を表示するアプリを作る. このアプリは,HelloWorld アプリを改造して作成するため, アプリ作成の途中からの手順を示す. 1. ボタンの設置 (1) レイアウトにボタンを追加するパレットの フォーム ウ

ボタンイベントアプリイベント処理を含むアプリとして, ボタンをもち, ボタンを押すと文字列を表示するアプリを作る. このアプリは,HelloWorld アプリを改造して作成するため, アプリ作成の途中からの手順を示す. 1. ボタンの設置 (1) レイアウトにボタンを追加するパレットの フォーム ウ ボタンイベントアプリイベント処理を含むアプリとして, ボタンをもち, ボタンを押すと文字列を表示するアプリを作る. このアプリは,HelloWorld アプリを改造して作成するため, アプリ作成の途中からの手順を示す. 1. ボタンの設置 (1) レイアウトにボタンを追加するパレットの フォーム ウィジェット からボタンのアイコンをドラッグして, ワークスペースにドロップする. 図 1 ボタンの追加

More information

Java講座

Java講座 ~ 第 1 回 ~ 情報科学部コンピュータ科学科 2 年竹中優 プログラムを書く上で Hello world 基礎事項 演算子 構文 2 コメントアウト (//, /* */, /** */) をしよう! インデントをしよう! 変数などにはわかりやすい名前をつけよう! 要するに 他人が見て理解しやすいコードを書こうということです 3 1. Eclipse を起動 2. ファイル 新規 javaプロジェクト

More information

IronPython による柔軟なゲーム開発 筑波大学 AmusementCreators

IronPython による柔軟なゲーム開発 筑波大学 AmusementCreators IronPython による柔軟なゲーム開発 筑波大学 AmusementCreators 自己紹介 Amusement Makers ではありません 注意 IronPython って?.Net Framework および Mono 上で動作する Python.NetFramework Mono は共通中間言語 (CIL) のための仮想マシン CIL が動く仮想マシンの仕様は共通言語基盤 (CLI)

More information

Microsoft PowerPoint _2b-DOM.pptx

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

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

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

情報システム工学特論 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

携帯電話でGoogle Mapsを使う

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

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

スライド 1

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

More information

第5回 マインクラフト・プログラミング入門

第5回 マインクラフト・プログラミング入門 マインクラフト プログラミング応用 第 2 回はじめてのプラグイン はじめての JavaScript はじめてのプラグイン 2018.01.22 鎌倉シチズンネット (KCN) 2017-2017 Kamakura Citizens Net All rights reserved 1 はじめての JavaScript(0) JavaScript とは JavaScript はスクリプト言語と呼ばれるプログラミング言語の一種で

More information

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT 1320 Animation のトリガー ( 開始させるきっかけ ) の方法 animation を開始させるきっかけは 次の3つの方法があります 1web ページが表示されるのと同時に開始させる方法 2マウスでクリック (click) して開始させる方法 3マウスカーソルを乗せている (hover) 間だけ動かす方法アニメーションを動かすためにはアニメーション名 (animation-name プロパティの値

More information

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り 1250 アウトラインのトランジション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースとして使用されることが多い機能です outline はボックスに指定して border と同じようにトランジションさせることもできますが あまり使われることはないかもしれません outline には border と違って 角の半径を指定して丸くする機能はありません 入力フィールドをクリックすると変化します

More information

Java言語 第1回

Java言語 第1回 Java 言語 第 2 回簡単な Java プログラムの作成と実行 知的情報システム工学科 久保川淳司 kubokawa@me.it-hiroshima.ac.jp 簡単な Java プログラム Java プログラムのファイル名 Java プログラムのファイル名命名ルール ファイル名とクラス名は同じでなければならない HelloJava.java public class HelloJava { public

More information

Bootstrap ngx-bootstrap beta.8 Intl WebStorm Google Chrome 62.0 Node.js git for Windows 開発環境バージョンアップの影響 1 章変更なし

Bootstrap ngx-bootstrap beta.8 Intl WebStorm Google Chrome 62.0 Node.js git for Windows 開発環境バージョンアップの影響 1 章変更なし 2017/11/27 バージョンアップ対応手順書 Angular2 によるモダン Web 開発 TypeScript を使った基本プログラミング ( 以下 本書 と記載します ) の対象である Angular2 は 2017 年 11 月 1 日にメジャーバージョンアップ を行い Angular5.0 になりました Angular5.0 への対応をまとめたのがこの手順書です のバージョンアップと本書の対応

More information

平成 30 年度 プログラミング研修講座 岩手県立総合教育センター

平成 30 年度 プログラミング研修講座 岩手県立総合教育センター 平成 30 年度 プログラミング研修講座 岩手県立総合教育センター 目次第 1 章プログラミングについて 1 ソフトウェアの働き 1 2 プログラミング言語 1 3 主なプログラミング言語の歴史 2 第 2 章 Visual Basic について 1 Visual Basic とは 3 2.NET Framework の環境 3 3 Visual Basic と.NET Framework の関係

More information

GIMP

GIMP (JavaScript ) Javascript 2 1. 2 2. 52 3. A, K, Q, J, 10, 9, 8, 7, 6, 5, 4, 3, 2 4. 13 5. 6. 7. 8. 9. 13 10. 11. 12. JavaScript.png 1 GIMP 200 300 2 var ctx; function init() { var

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション オブジェクト指向 プログラミング演習 第 2 回クラス インスタンス メソッド コンストラクタ 先週の出席確認 Webブラウザはどのようなプログラムでできているかこの問に答える前に Webブラウザとは 何か? 普段使ってますよね? Webブラウザを使ってできることと Webブラウザがやっていることを区別する必要がある 何をすれば Web ブラウザ と言えるのか NHK チコちゃんに叱られる! Web

More information

Si 知識情報処理

Si 知識情報処理 242311 Si, 285301 MS 第 12 回 竹平真則 takemasa@auecc.aichi-edu.ac.jp 2015/12/21 1 本日の内容 1. 先週のおさらい 2. PHP のスクリプトを実際に動かしてみる 3. RDB についての説明 2015/12/21 2 資料の URL http://peacenet.info/m2is 2015/12/21 3 注意事項 ( その

More information

ななちゃんの IT 教室 マルチタートルでオブジェクトを理解しようの巻 by 複数のタートルを操作する環境でななちゃんがオブジェクト指向とは何かを勉強します 第 0.7 版 2017 年 5 月 7 日 フリー素材

ななちゃんの IT 教室 マルチタートルでオブジェクトを理解しようの巻 by 複数のタートルを操作する環境でななちゃんがオブジェクト指向とは何かを勉強します 第 0.7 版 2017 年 5 月 7 日 フリー素材 ななちゃんの IT 教室 マルチタートルでオブジェクトを理解しようの巻 by nara.yasuhiro@gmail.com 複数のタートルを操作する環境でななちゃんがオブジェクト指向とは何かを勉強します 第 0.7 版 2017 年 5 月 7 日 フリー素材 http://freeillustration.net もくじ第 1 回復習! 第 2 回マルチタートル! 第 3 回書き方の工夫第 4

More information

ホームページ制作 基礎編 (HTML5 CSS3 コーディング )

ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 ホームページ制作 基礎編 目次 はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8

More information

超簡単にWebページを作成

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

More information

Webプログラミング演習

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

More information

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

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

More information

目次 概要... 2 フォームレイアウトデザイナー機能の設定... 3 設定したフォームレイアウトデザイナーの確認...14 その他スタイルの設定...15 フォームレイアウトデザイナーをエクスポート...17 フォームレイアウトデザイナーをインポート...18 インポート時の制限事項...19 リ

目次 概要... 2 フォームレイアウトデザイナー機能の設定... 3 設定したフォームレイアウトデザイナーの確認...14 その他スタイルの設定...15 フォームレイアウトデザイナーをエクスポート...17 フォームレイアウトデザイナーをインポート...18 インポート時の制限事項...19 リ [SP 改 ] フォームレイアウトデザイナー FOR SHAREPOINT 2013 ユーザーマニュアル 1.0 版 2014 年 04 月 11 日 株式会社アンク 目次 概要... 2 フォームレイアウトデザイナー機能の設定... 3 設定したフォームレイアウトデザイナーの確認...14 その他スタイルの設定...15 フォームレイアウトデザイナーをエクスポート...17 フォームレイアウトデザイナーをインポート...18

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

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

Java言語 第1回

Java言語 第1回 Java 言語 第 8 回ウインドウ部品を用いる (1) 知的情報システム工学科 久保川淳司 kubokawa@me.it-hiroshima.ac.jp 前回の課題 (1) マウスを使って, 前回課題で作成した 6 4 のマスの図形で, \ をマウスクリックによって代わるようにしなさい 前回の課題 (2) import java.applet.applet; import java.awt.*;

More information

Prog2_2nd

Prog2_2nd 2017 年 10 月 5 日 ( 木 ) 実施 アクティビティアクティビティとは Android アプリのユーザインターフェイスの中で, 画面と関連付けられている最も基本的なのものがアクティビティ (Activity) である 複数の画面を利用するアプリには, それぞれの画面に対応したアクティビティが必要となる アクティビティは oncreateメソッドによって生成され, ondestroyメソッドによって消滅する

More information

Prog2_15th

Prog2_15th 2019 年 7 月 25 日 ( 木 ) 実施メニューメニューバーとコンテクストメニュー Visual C# では, メニューはコントロールの一つとして扱われ, フォームアプリケーションの上部に配置されるメニューバーと, コントロール上でマウスを右クリックすると表示されるコンテクストメニューとに対応している これ等は選択するとメニューアイテムのリストが表示されるプルダウンメニューと呼ばれる形式に従う

More information

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63> 情報処理 C (P.1) 情報処理 C (2011 年度 ) ホームページの作成 http://open.shonan.bunkyo.ac.jp/~ohtan/ テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合

More information

■新聞記事

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

More information

GUIプログラムⅣ

GUIプログラムⅣ GUI プログラム Ⅳ 画像指定ウィンドウの生成 ファイル名 :awtimage.java import java.awt.*; import java.awt.event.*; public class awtimage extends Frame // コンポーネントクラスの宣言 Button btnbrowse; Label lblcaption7; TextField txtimage; //

More information

Moshimo Challenge Report

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

More information

医療者のための情報技術入門第 9 回プログラムがはたらくしくみを学ぶ (2) 日紫喜光良 概要 1. はじめに- 具体例から ここから Javascript のプログラミング入門 次はどうする--

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

More information

(1) プログラムの開始場所はいつでも main( ) メソッドから始まる 順番に実行され add( a,b) が実行される これは メソッドを呼び出す ともいう (2)add( ) メソッドに実行が移る この際 add( ) メソッド呼び出し時の a と b の値がそれぞれ add( ) メソッド

(1) プログラムの開始場所はいつでも main( ) メソッドから始まる 順番に実行され add( a,b) が実行される これは メソッドを呼び出す ともいう (2)add( ) メソッドに実行が移る この際 add( ) メソッド呼び出し時の a と b の値がそれぞれ add( ) メソッド メソッド ( 教科書第 7 章 p.221~p.239) ここまでには文字列を表示する System.out.print() やキーボードから整数を入力する stdin.nextint() などを用いてプログラムを作成してきた これらはメソッドと呼ばれるプログラムを構成する部品である メソッドとは Java や C++ などのオブジェクト指向プログラミング言語で利用されている概念であり 他の言語での関数やサブルーチンに相当するが

More information

GIMP

GIMP (JavaScript ) Javascript 1. 2 2. 3. A, K, Q, J, 10, 9, 8, 7, 4. 5. 6. 7. J Q K A 8. 9. 6 10. 11. 12. 13. A- K- Q- J- 10-9 8 7 JavaScript.png 1 GIMP 200 300 2 var ctx; function init()

More information

Microsoft Word - no06.doc

Microsoft Word - no06.doc 2. オブジェクト ( もう一度 ) 値をいくつかまとめたものを C 言語では構造体と呼んでいました 構造体は複数の値を含んだものでした これに対して JavaScript では オブジェクト (Object) という物を使います オブジェクトは 値 ( プロパティ ) と動作 ( メソッド ) を持ちます これはオブジェクト指向プログラミングと言われるもの特徴です オブジェクトにアクセスすることでプロパティの変更や動作を実行できます

More information

ガイダンス

ガイダンス プログラムの 1 行目に以下のように自分の入れること // vm12345 杉崎えり子 情報科学 B 第 10 回 GUI 情報科学 B Info2/3 info10 今日のフォルダー作成 Example10_1.java 1 今日やること Windows などで見られるウィンドウを作 成して (GUI プログラム ) そこに実行結 果を表示させる 2 ウィンドウの作成 Java を使用してウィンドウの作成をしたい

More information

メソッドのまとめ

メソッドのまとめ メソッド (4) 擬似コードテスト技法 http://java.cis.k.hosei.ac.jp/ 授業の前に自己点検以下のことがらを友達に説明できますか? メソッドの宣言とは 起動とは何ですか メソッドの宣言はどのように書きますか メソッドの宣言はどこに置きますか メソッドの起動はどのようにしますか メソッドの仮引数 実引数 戻り値とは何ですか メソッドの起動にあたって実引数はどのようにして仮引数に渡されますか

More information

(1) 情報表示機能 1つ目として専用ツールを作成するにあたり よく見受けられる専用画面を使用した情報表示機能 ( 以降 : 情報表示機能と記す ) を作成した これは 図形を選択すると 関連する情報が専用画面に表示される機能である 4. プラグインツールの開発手法 4.1 プラグインモジュールの開

(1) 情報表示機能 1つ目として専用ツールを作成するにあたり よく見受けられる専用画面を使用した情報表示機能 ( 以降 : 情報表示機能と記す ) を作成した これは 図形を選択すると 関連する情報が専用画面に表示される機能である 4. プラグインツールの開発手法 4.1 プラグインモジュールの開 QGIS を用いたプラグインツールの作成手法について エンジニアリング本部国土基盤情報部建設情報グループ内田照久 1. はじめに総務省では 災害発生時にも行政情報の業務を継続するため 効率的で災害に強い電子自治体の実現に向けて取り組んでいる 自治体における地理情報システム ( 以降 GIS と記す ) の整備状況は 平成 27 年 4 月 1 日現在 都道府県では 46 団体 (97.9%) 市区町村では

More information

Prog2_5th

Prog2_5th 2017 年 10 月 26 日 ( 木 ) 実施 レイアウトレイアウトの位置付け Android アプリで用いられる様々なレイアウト (Layout) は, それぞれ ViewGroup クラスを継承するクラスとして定義されているものであり,ViewGroup クラスは Viewクラスを継承するクラスである Viewクラスはユーザインタフェイスを構成する基本要素を表す ビュー (View) は画面上に長方形の領域を占め,

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

ガイダンス

ガイダンス プログラムの 1 行目に以下のように自分の入れること // vm12345 杉崎えり子 情報科学 B 第 10 回 GUI 情報科学 B Info2/3 info10 今日のフォルダー作成 Example10_1.java 1 今日やること Windows などで見られるウィンドウを作 成して (GUI プログラム ) そこに実行結 果を表示させる 2 ウィンドウの作成 Java を使用してウィンドウを作成をしたい

More information

第1章 ビジュアルプログラミング入門

第1章 ビジュアルプログラミング入門 第 9 章アプレット 学習内容とねらい 本章では Java 言語で作ったプログラムを Web ブラウザ上で動作させる方法を学習します Java 言語には これまで作成してきた Windows アプリケーションの他に Web ブラウザ上で動作させる事のできるアプレットという形態があります このアプレットを利用すれば Web 上で Java プログラムを公開することもできます アプレットは Java 言語の普及当初は

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

第7回 Javascript入門

第7回 Javascript入門 Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 8 回 JavaScript 入門 萩野達也 (hagino@sfc.keio.ac.jp) 1 Web ページの構成要素 直交技術を組み合わせる 内容 スタイル ( 表現方法 ) プログラミング スタイル プログラミング JavaScript CSS Web ページ Web 文書

More information

デュアルウェア講習会課題 5 会津大学講習会 簡単な IoT を作成 2018 The University of Aizu

デュアルウェア講習会課題 5 会津大学講習会 簡単な IoT を作成 2018 The University of Aizu 会津大学講習会 簡単な IoT を作成 2018 The University of Aizu 目次 1 課題... 1 1.1 課題説明... 1 課題 5-1... 1 課題 5-2... 1 2 Google API... 2 2.1 Gmail API とは... 2 2.2 Gmail API 設定... 2 Google アカウント作成... 2 Google Developers Console

More information

Android Layout SDK プログラミング マニュアル

Android Layout SDK プログラミング マニュアル プログラミングマニュアル Version 1.3.0 用 更新履歴 年月日 バージョン 履歴 2014.09.08 1.2.0.0 新規 (Layout Utilities ユーザーズ ガイド ) 2016.08.16 1.3.0.0 モバイル端末用レイアウトで直線部品と矩形部品に対応 モバイル端末用レイアウトファイルを CLFX から XML へ変更 Layout Print Engine から

More information

前ページからの続き // テキストボックス02 id 属性で取得 // id 属性で取得する場合は一意に決まるので 何番目かの指定は不要 var textbox02elem = document.getelementbyid("text_box02_id"); if ("001" == statee

前ページからの続き // テキストボックス02 id 属性で取得 // id 属性で取得する場合は一意に決まるので 何番目かの指定は不要 var textbox02elem = document.getelementbyid(text_box02_id); if (001 == statee 全体のヒント 1. テキストボックスの制御 1.1. 日付入力日付の入力ボックスは フォーカスが入った時にスラッショを消し フォーカスが他の項目等に移るとスラッシュが加わるようにする オンフォーカス 20100101 オフフォーカス 2010/01/01 1.1.1 オンフォーカス時にスラッシュを消す入力項目のスラッシュを消すには include/function.js ファイル内の var delslash

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

プログラミング基礎I(再)

プログラミング基礎I(再) 山元進 クラスとは クラスの宣言 オブジェクトの作成 クラスのメンバー フィールド 変数 配列 メソッド メソッドとは メソッドの引数 戻り値 変数の型を拡張したもの 例えば車のデータベース 車のメーカー 車種 登録番号などのデータ データベースの操作 ( 新規データのボタンなど ) プログラムで使う部品の仕様書 そのクラスのオブジェクトを作ると初めて部品になる 継承 などの仕組みにより カスタマイズが安全

More information

Microsoft PowerPoint Java基本技術PrintOut.ppt [互換モード]

Microsoft PowerPoint Java基本技術PrintOut.ppt [互換モード] 第 3 回 Java 基本技術講義 クラス構造と生成 33 クラスの概念 前回の基本文法でも少し出てきたが, オブジェクト指向プログラミングは という概念をうまく活用した手法である. C 言語で言う関数に似ている オブジェクト指向プログラミングはこれら状態と振る舞いを持つオブジェクトの概念をソフトウェア開発の中に適用し 様々な機能を実現する クラス= = いろんなプログラムで使いまわせる 34 クラスの概念

More information

Microsoft PowerPoint - ruby_instruction.ppt

Microsoft PowerPoint - ruby_instruction.ppt Ruby 入門 流れ Ruby の文法 画面に出力 キーボードから入力 数値 文字列 変数 配列 ハッシュ 制御構造 ( 分岐 繰り返しなど ) if while case for each 関数 クラス Ruby とは プログラミング言語 インタプリタ言語 オブジェクト指向 国産 ウェブアプリケーションフレームワーク RubyOnRails で注目 弊社での Web アプリケーション開発に利用 画面に出力

More information

TestDesign for Web

TestDesign for Web 発行日 2012/6/21 発行元 株式会社アープ 本書は Web でのテスト自動化における Test Design の一連の操作方法まとめたものです Test Design のメニューの説明やより詳細な使い方については ユーザーズガイド を参照してください 目次 1. はじめに... 1 2. 環境構築... 2 2.1. Selenium のサイトについて... 2 2.2. Selenium

More information

NetworkApplication-09

NetworkApplication-09 ネットワークアプリケーション 第 9 回 JavaScript によるクライアントサイドウェブプログラミング 石井健太郎 (423 研究室 オフィスアワー火 3 限 ) スケジュール 9 月 27 日第 1 回 TCP/IPプロトコルスイート 10 月 4 日第 2 回 Javaによるウィンドウプログラミング 10 月 11 日第 3 回 ネットワークアプリケーションのプログラミングモデル 10 月

More information

1 JAVA APPLET 実習 1. はじめに Java フォルダに applet フォルダを作成する 2. 実習問題の作成 J01.java public class J01 extends Applet{ public void paint(graphics kaku){ kaku.drawstring("hello World from Java!",60,70); j01.html

More information

intra-mart Accel Platform — 招待機能プログラミングガイド   初版  

intra-mart Accel Platform — 招待機能プログラミングガイド   初版   Copyright 2016 NTT DATA INTRAMART CORPORATION 1 Top 目次 1. 改訂情報 2. はじめに 3. 権限リストを拡張する 2 改訂情報 変更年月日 変更内容 2016-04-01 初版 3 はじめに 項目 このガイドについて このガイドについて このガイドでは 招待機能の拡張方法および注意点について解説します 4 権限リストを拡張する 項目 この機能について実装済みの招待権限デコレータ実装方法設定方法

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

リスト 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

Prog2_10th

Prog2_10th 2017 年 12 月 7 日 ( 木 ) 実施 効果音の付加 SoundPool とは Android には音を処理するクラスが複数用意されているが, その中で SoundPool は, 予め音のデータをメモリ上に読み込んで再生するため, 長い音楽よりも短い音を扱うのに適している また,SoundPool では遅延が無いので, 効果音を付加したい場面で用いられる 授業の準備 1)Android Studio

More information

Microsoft PowerPoint - widget.ppt

Microsoft PowerPoint - widget.ppt WordPress 2.8 用の ウィジェットの開発 藤本壱 1 今日のアジェンダ 自己紹介新しいウィジェット API の概要作成するウィジェット ( ステータス表示 ) クラスとコンストラクタの定義 form メソッド update メソッド widget メソッドウィジェットの登録まとめ 2 自己紹介 3 自己紹介 藤本壱 ( ふじもとはじめ ) フリーライター パソコン関係 ここ数年は Movable

More information

2018 年 11 月 10 日開催 第 27 回日本コンピュータ外科学会大会 ハンズオンセミナー 2 外科領域における医用画像の深層学習 事前インストール手順 2018 年 10 月 11 日版 作成 : 名古屋大学小田昌宏 1

2018 年 11 月 10 日開催 第 27 回日本コンピュータ外科学会大会 ハンズオンセミナー 2 外科領域における医用画像の深層学習 事前インストール手順 2018 年 10 月 11 日版 作成 : 名古屋大学小田昌宏 1 2018 年 11 月 10 日開催 第 27 回日本コンピュータ外科学会大会 ハンズオンセミナー 2 外科領域における医用画像の深層学習 事前インストール手順 2018 年 10 月 11 日版 作成 : 名古屋大学小田昌宏 1 必要環境 Windows10 がインストールされた PC メモリ 8GB 以上必須,16GB 以上推奨 インターネット接続 Windows のユーザ名に日本語等の全角文字を使用していないこと.

More information

PowerPoint Presentation

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

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

10 (1) s 10.2 rails c Rails 7 > item = PlanItem.new => #<PlanItem id nil, name nil,...> > item.name = "" => "" > item.valid? => true valid? true false

10 (1) s 10.2 rails c Rails 7 > item = PlanItem.new => #<PlanItem id nil, name nil,...> > item.name =  =>  > item.valid? => true valid? true false 10 (1) 16 7 PicoPlanner validations 10.1 PicoPlanner Web Web invalid values validations Rails validates validate 107 10 (1) s 10.2 rails c Rails 7 > item = PlanItem.new => #

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

Microsoft Word - PaLearn_manual_05c.doc

Microsoft Word - PaLearn_manual_05c.doc c.palearn API リファレンスマニュアル (5. コンテンツ開発編 ) Panasonic Learning Systems Co., Ltd. Ver.1.1 目次 1 4 PaLearn API の概要... 4 PaLearn API の動作原理... 5 PaLearnLIB.js の役割... 6 API について... 6 LMSInitialize... 7 LMSGetValue...

More information

10th Developer Camp - B5

10th Developer Camp - B5 B5 PHP テクニカルセッション Delphi for PHP で作るリッチコンテンツブログ エンバカデロ テクノロジーズエヴァンジェリスト高橋智宏 アジェンダ コンポーネントをフル活用しよう お馴染み データモジュール Blog データの表示用ページ Blog データの登録用ページ 2 コンポーネントをフル活用しよう 開発環境の進歩と退化 80 年代の IDE が登場エディタ + コマンドライン型の開発から脱却

More information

フローチャート自動生成ツール yflowgen の使い方 目次 1 はじめに 本ツールの機能 yflowgen.exe の使い方 yflowgen.exe の実行方法 制限事項 生成したファイル (gml ファイル形式 ) の開

フローチャート自動生成ツール yflowgen の使い方 目次 1 はじめに 本ツールの機能 yflowgen.exe の使い方 yflowgen.exe の実行方法 制限事項 生成したファイル (gml ファイル形式 ) の開 フローチャート自動生成ツール yflowgen の使い方 目次 1 はじめに...2 2 本ツールの機能...2 3 yflowgen.exe の使い方...3 3.1 yflowgen.exe の実行方法...3 3.2 制限事項...3 3.3 生成したファイル (gml ファイル形式 ) の開き方...4 3.3.1 yed Graph Editor を使って開く...4 3.3.2 yed

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション HPOP( HP オプション ) リンク作成方法 目次 1.HPOPの構造 2. 職種リンク 3. 職種カテゴリリンク 4. 業種リンク 5. 勤務地リンク 6. 選択肢リンク 7. 特定のJOBへのリンク 8. 特定の企業へのリンク 9. キーワードリンク 1 単独キーワード 2 複数キーワード 2 1.HPOP の構造 JOB 自動公開機能は以下の 3 画面 (2 階層 ) もしくは 2 画面

More information