Submit Search
Upload
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
•
Download as PPTX, PDF
•
0 likes
•
388 views
近
近藤 繁延
Follow
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」シリーズ 第1回
Read less
Read more
Engineering
Slideshow view
Report
Share
Slideshow view
Report
Share
1 of 71
Download now
Recommended
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol2
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol2
近藤 繁延
全世界135か国に配信したレーシングゲーム『ACR DRIFT』の制作秘話と技術基盤の構築について
全世界135か国に配信したレーシングゲーム『ACR DRIFT』の制作秘話と技術基盤の構築について
CROOZ, inc.
怖くないブランチ開発外部公開用
怖くないブランチ開発外部公開用
CROOZ, inc.
OpenJDKは使い物になるか?OpenJDKの実際と今後 (NTTデータ オープンソースDAY 2015 Autumn 講演資料)
OpenJDKは使い物になるか?OpenJDKの実際と今後 (NTTデータ オープンソースDAY 2015 Autumn 講演資料)
NTT DATA OSS Professional Services
SaaS運用での大障害の思い出と対策の共有(大噴火編)【WESEEK Tech Conf #6】
SaaS運用での大障害の思い出と対策の共有(大噴火編)【WESEEK Tech Conf #6】
WESEEKWESEEK
Atlassian Summit US 2017 #augj
Atlassian Summit US 2017 #augj
グロースエクスパートナーズ株式会社/Growth xPartners Incorporated.
GitLab & web hooks & git-flowで実現する企業向けgit環境の構築
GitLab & web hooks & git-flowで実現する企業向けgit環境の構築
CROOZ, inc.
MicrosoftのOSSへの取り組み
MicrosoftのOSSへの取り組み
Shinichiro Arai
Recommended
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol2
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol2
近藤 繁延
全世界135か国に配信したレーシングゲーム『ACR DRIFT』の制作秘話と技術基盤の構築について
全世界135か国に配信したレーシングゲーム『ACR DRIFT』の制作秘話と技術基盤の構築について
CROOZ, inc.
怖くないブランチ開発外部公開用
怖くないブランチ開発外部公開用
CROOZ, inc.
OpenJDKは使い物になるか?OpenJDKの実際と今後 (NTTデータ オープンソースDAY 2015 Autumn 講演資料)
OpenJDKは使い物になるか?OpenJDKの実際と今後 (NTTデータ オープンソースDAY 2015 Autumn 講演資料)
NTT DATA OSS Professional Services
SaaS運用での大障害の思い出と対策の共有(大噴火編)【WESEEK Tech Conf #6】
SaaS運用での大障害の思い出と対策の共有(大噴火編)【WESEEK Tech Conf #6】
WESEEKWESEEK
Atlassian Summit US 2017 #augj
Atlassian Summit US 2017 #augj
グロースエクスパートナーズ株式会社/Growth xPartners Incorporated.
GitLab & web hooks & git-flowで実現する企業向けgit環境の構築
GitLab & web hooks & git-flowで実現する企業向けgit環境の構築
CROOZ, inc.
MicrosoftのOSSへの取り組み
MicrosoftのOSSへの取り組み
Shinichiro Arai
SI現場のテスト自動化への挑戦〜フルコンテナ構成のCI/CD環境〜
SI現場のテスト自動化への挑戦〜フルコンテナ構成のCI/CD環境〜
Daiki Kawanuma
大規模運用で見えるWebプロトコルの理想と現実、そして今後 #html5j #html5j_b
大規模運用で見えるWebプロトコルの理想と現実、そして今後 #html5j #html5j_b
Yahoo!デベロッパーネットワーク
Cndt2021 casareal
Cndt2021 casareal
CASAREAL, Inc.
JJUG初心者のためのJava/JJUG講座
JJUG初心者のためのJava/JJUG講座
Yusuke Suzuki
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
Takeshi Ogawa
いまからでも遅くない Docker事始め&愉快な仲間達
いまからでも遅くない Docker事始め&愉快な仲間達
softlayerjp
SaaS運用での大障害の思い出と対策の共有(中噴火編)【WESEEK Tech Conf #4】
SaaS運用での大障害の思い出と対策の共有(中噴火編)【WESEEK Tech Conf #4】
WESEEKWESEEK
開発チームの世代交代への取り組み
開発チームの世代交代への取り組み
グロースエクスパートナーズ株式会社/Growth xPartners Incorporated.
160724 jtf2016sre
160724 jtf2016sre
OSSラボ株式会社
クラウドを超えた先の企業システム像 20091008 JJUG CCC
クラウドを超えた先の企業システム像 20091008 JJUG CCC
Yusuke Suzuki
Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例
Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例
gree_tech
サービスの成長を支えるフロントエンド開発 #denatechcon
サービスの成長を支えるフロントエンド開発 #denatechcon
DeNA
OSS運用管理勉強会 cockpit
OSS運用管理勉強会 cockpit
atk1234
Cloud Days Tokyo 2015 "オンプレミス環境のクラウド化と運用を楽にする OpenStack ソリューション ~ハイブリッド・クラウドを...
Cloud Days Tokyo 2015 "オンプレミス環境のクラウド化と運用を楽にする OpenStack ソリューション ~ハイブリッド・クラウドを...
Shinichiro Arai
Yahoo! JAPANが実践するOpenStackと大規模環境でのコンテナ利用 #devsumi
Yahoo! JAPANが実践するOpenStackと大規模環境でのコンテナ利用 #devsumi
Yahoo!デベロッパーネットワーク
160901 osce2016sre
160901 osce2016sre
OSSラボ株式会社
Mroongaを社内クラウド的なMySQLプラットフォームに標準搭載している話 #groonga
Mroongaを社内クラウド的なMySQLプラットフォームに標準搭載している話 #groonga
Yahoo!デベロッパーネットワーク
20171028_66842_Emacs実践入門_出版記念イベント_以前Emacs使いだったVim使いがEmacsのリハビリしている様子(回想多め)
20171028_66842_Emacs実践入門_出版記念イベント_以前Emacs使いだったVim使いがEmacsのリハビリしている様子(回想多め)
Wataru NOGUCHI
JobScheduler ユーザカンファレンス 2016 東京日産コンピュータシステム様 事例紹介
JobScheduler ユーザカンファレンス 2016 東京日産コンピュータシステム様 事例紹介
Daisuke Ikeda
Microservicesを実現するために、インフラエンジニアと開発者がすべきこと
Microservicesを実現するために、インフラエンジニアと開発者がすべきこと
Takashi Abe
Webシステム脆弱性LT資料
Webシステム脆弱性LT資料
Tomohito Adachi
Gmo media.inc 第9回西日本ossの普及を考える会
Gmo media.inc 第9回西日本ossの普及を考える会
Dai Utsui
More Related Content
What's hot
SI現場のテスト自動化への挑戦〜フルコンテナ構成のCI/CD環境〜
SI現場のテスト自動化への挑戦〜フルコンテナ構成のCI/CD環境〜
Daiki Kawanuma
大規模運用で見えるWebプロトコルの理想と現実、そして今後 #html5j #html5j_b
大規模運用で見えるWebプロトコルの理想と現実、そして今後 #html5j #html5j_b
Yahoo!デベロッパーネットワーク
Cndt2021 casareal
Cndt2021 casareal
CASAREAL, Inc.
JJUG初心者のためのJava/JJUG講座
JJUG初心者のためのJava/JJUG講座
Yusuke Suzuki
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
Takeshi Ogawa
いまからでも遅くない Docker事始め&愉快な仲間達
いまからでも遅くない Docker事始め&愉快な仲間達
softlayerjp
SaaS運用での大障害の思い出と対策の共有(中噴火編)【WESEEK Tech Conf #4】
SaaS運用での大障害の思い出と対策の共有(中噴火編)【WESEEK Tech Conf #4】
WESEEKWESEEK
開発チームの世代交代への取り組み
開発チームの世代交代への取り組み
グロースエクスパートナーズ株式会社/Growth xPartners Incorporated.
160724 jtf2016sre
160724 jtf2016sre
OSSラボ株式会社
クラウドを超えた先の企業システム像 20091008 JJUG CCC
クラウドを超えた先の企業システム像 20091008 JJUG CCC
Yusuke Suzuki
Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例
Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例
gree_tech
サービスの成長を支えるフロントエンド開発 #denatechcon
サービスの成長を支えるフロントエンド開発 #denatechcon
DeNA
OSS運用管理勉強会 cockpit
OSS運用管理勉強会 cockpit
atk1234
Cloud Days Tokyo 2015 "オンプレミス環境のクラウド化と運用を楽にする OpenStack ソリューション ~ハイブリッド・クラウドを...
Cloud Days Tokyo 2015 "オンプレミス環境のクラウド化と運用を楽にする OpenStack ソリューション ~ハイブリッド・クラウドを...
Shinichiro Arai
Yahoo! JAPANが実践するOpenStackと大規模環境でのコンテナ利用 #devsumi
Yahoo! JAPANが実践するOpenStackと大規模環境でのコンテナ利用 #devsumi
Yahoo!デベロッパーネットワーク
160901 osce2016sre
160901 osce2016sre
OSSラボ株式会社
Mroongaを社内クラウド的なMySQLプラットフォームに標準搭載している話 #groonga
Mroongaを社内クラウド的なMySQLプラットフォームに標準搭載している話 #groonga
Yahoo!デベロッパーネットワーク
20171028_66842_Emacs実践入門_出版記念イベント_以前Emacs使いだったVim使いがEmacsのリハビリしている様子(回想多め)
20171028_66842_Emacs実践入門_出版記念イベント_以前Emacs使いだったVim使いがEmacsのリハビリしている様子(回想多め)
Wataru NOGUCHI
JobScheduler ユーザカンファレンス 2016 東京日産コンピュータシステム様 事例紹介
JobScheduler ユーザカンファレンス 2016 東京日産コンピュータシステム様 事例紹介
Daisuke Ikeda
Microservicesを実現するために、インフラエンジニアと開発者がすべきこと
Microservicesを実現するために、インフラエンジニアと開発者がすべきこと
Takashi Abe
What's hot
(20)
SI現場のテスト自動化への挑戦〜フルコンテナ構成のCI/CD環境〜
SI現場のテスト自動化への挑戦〜フルコンテナ構成のCI/CD環境〜
大規模運用で見えるWebプロトコルの理想と現実、そして今後 #html5j #html5j_b
大規模運用で見えるWebプロトコルの理想と現実、そして今後 #html5j #html5j_b
Cndt2021 casareal
Cndt2021 casareal
JJUG初心者のためのJava/JJUG講座
JJUG初心者のためのJava/JJUG講座
さくっと理解するSpring bootの仕組み
さくっと理解するSpring bootの仕組み
いまからでも遅くない Docker事始め&愉快な仲間達
いまからでも遅くない Docker事始め&愉快な仲間達
SaaS運用での大障害の思い出と対策の共有(中噴火編)【WESEEK Tech Conf #4】
SaaS運用での大障害の思い出と対策の共有(中噴火編)【WESEEK Tech Conf #4】
開発チームの世代交代への取り組み
開発チームの世代交代への取り組み
160724 jtf2016sre
160724 jtf2016sre
クラウドを超えた先の企業システム像 20091008 JJUG CCC
クラウドを超えた先の企業システム像 20091008 JJUG CCC
Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例
Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例
サービスの成長を支えるフロントエンド開発 #denatechcon
サービスの成長を支えるフロントエンド開発 #denatechcon
OSS運用管理勉強会 cockpit
OSS運用管理勉強会 cockpit
Cloud Days Tokyo 2015 "オンプレミス環境のクラウド化と運用を楽にする OpenStack ソリューション ~ハイブリッド・クラウドを...
Cloud Days Tokyo 2015 "オンプレミス環境のクラウド化と運用を楽にする OpenStack ソリューション ~ハイブリッド・クラウドを...
Yahoo! JAPANが実践するOpenStackと大規模環境でのコンテナ利用 #devsumi
Yahoo! JAPANが実践するOpenStackと大規模環境でのコンテナ利用 #devsumi
160901 osce2016sre
160901 osce2016sre
Mroongaを社内クラウド的なMySQLプラットフォームに標準搭載している話 #groonga
Mroongaを社内クラウド的なMySQLプラットフォームに標準搭載している話 #groonga
20171028_66842_Emacs実践入門_出版記念イベント_以前Emacs使いだったVim使いがEmacsのリハビリしている様子(回想多め)
20171028_66842_Emacs実践入門_出版記念イベント_以前Emacs使いだったVim使いがEmacsのリハビリしている様子(回想多め)
JobScheduler ユーザカンファレンス 2016 東京日産コンピュータシステム様 事例紹介
JobScheduler ユーザカンファレンス 2016 東京日産コンピュータシステム様 事例紹介
Microservicesを実現するために、インフラエンジニアと開発者がすべきこと
Microservicesを実現するために、インフラエンジニアと開発者がすべきこと
Similar to AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
Webシステム脆弱性LT資料
Webシステム脆弱性LT資料
Tomohito Adachi
Gmo media.inc 第9回西日本ossの普及を考える会
Gmo media.inc 第9回西日本ossの普及を考える会
Dai Utsui
SharePoint Framework Extension 基礎講座
SharePoint Framework Extension 基礎講座
Hiroaki Oikawa
おすすめインフラ! for スタートアップ
おすすめインフラ! for スタートアップ
Koichiro Sumi
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
Yuki Ando
Ossを使ったazureでのdev ops
Ossを使ったazureでのdev ops
裕貴 荒井
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
Osamu Shimoda
コンテナーによるIT基盤変革 - IT infrastructure transformation -
コンテナーによるIT基盤変革 - IT infrastructure transformation -
日本ヒューレット・パッカード株式会社
徳丸本に載っていないWebアプリケーションセキュリティ
徳丸本に載っていないWebアプリケーションセキュリティ
Hiroshi Tokumaru
ToolChainを使った次世代DevOps環境の作り方
ToolChainを使った次世代DevOps環境の作り方
Harada Kazuki
OSC福岡 20111203
OSC福岡 20111203
Hiroshi Bunya
Site Reliability Engineering (SRE)を可能にするOpenPIEのご紹介
Site Reliability Engineering (SRE)を可能にするOpenPIEのご紹介
OSSラボ株式会社
モダンWeb開発ワークショップ
モダンWeb開発ワークショップ
Staffnet_Inc
技術選択とアーキテクトの役割
技術選択とアーキテクトの役割
Toru Yamaguchi
ゼロからのプログラミングRails講座 Codeanywhere版
ゼロからのプログラミングRails講座 Codeanywhere版
DIVE INTO CODE Corp.
Intalio japan special cloud workshop
Intalio japan special cloud workshop
Daisuke Sugai
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
Kouji Matsui
2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて
Masahito Zembutsu
Mbed祭り 2017@春の新横浜 20170225 竹之下
Mbed祭り 2017@春の新横浜 20170225 竹之下
Koyo Takenoshita
Attractive HTML5
Attractive HTML5
Sho Ito
Similar to AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
(20)
Webシステム脆弱性LT資料
Webシステム脆弱性LT資料
Gmo media.inc 第9回西日本ossの普及を考える会
Gmo media.inc 第9回西日本ossの普及を考える会
SharePoint Framework Extension 基礎講座
SharePoint Framework Extension 基礎講座
おすすめインフラ! for スタートアップ
おすすめインフラ! for スタートアップ
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
CODT2020 ビジネスプラットフォームを支えるCI/CDパイプライン ~エンタープライズのDevOpsを加速させる運用改善Tips~
Ossを使ったazureでのdev ops
Ossを使ったazureでのdev ops
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
第3回企業Webシステム開発セミナー「業務システムにHTML5を上手に取り入れるためには?」
コンテナーによるIT基盤変革 - IT infrastructure transformation -
コンテナーによるIT基盤変革 - IT infrastructure transformation -
徳丸本に載っていないWebアプリケーションセキュリティ
徳丸本に載っていないWebアプリケーションセキュリティ
ToolChainを使った次世代DevOps環境の作り方
ToolChainを使った次世代DevOps環境の作り方
OSC福岡 20111203
OSC福岡 20111203
Site Reliability Engineering (SRE)を可能にするOpenPIEのご紹介
Site Reliability Engineering (SRE)を可能にするOpenPIEのご紹介
モダンWeb開発ワークショップ
モダンWeb開発ワークショップ
技術選択とアーキテクトの役割
技術選択とアーキテクトの役割
ゼロからのプログラミングRails講座 Codeanywhere版
ゼロからのプログラミングRails講座 Codeanywhere版
Intalio japan special cloud workshop
Intalio japan special cloud workshop
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
2014年を振り返る 今年の技術トレンドとDockerについて
2014年を振り返る 今年の技術トレンドとDockerについて
Mbed祭り 2017@春の新横浜 20170225 竹之下
Mbed祭り 2017@春の新横浜 20170225 竹之下
Attractive HTML5
Attractive HTML5
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
1.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 Vol.1 2016年05月21日 先端IT活用推進コンソーシアム シニア技術者勉強会 近藤 繁延 シニアと女子
2.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. はじめに • 本勉強会の趣旨 – Web開発界隈で語られるツール、キーワードにつ いて学ぶ – HTML5ベースのWebサイトの開発方法を学ぶ • 本勉強会1~2回目のゴール – HTML5のWebサイトが作成できる – Webサイト開発に必要なツールを使いこなせる
3.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 本日のアジェンダ • いまどきのHTMLとその周辺 • いまどきのWeb周辺技術 • いまどきのWebシステムの構成 • ハンズオン – ハンズオンのゴール – 開発環境を準備する – 開発プロジェクトを作成する – HTML5を書いてみる – CSS3を書いてみる – JavaScriptを書いてみる – さらにチャレンジ
4.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. いまどきのHTMLとその周辺 4
5.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. HTML5はWeb開発のデファクト • 2014年10月28日に勧告されました。 • 現状HTML5がデファクトスタンダードです。 – レガシーブラウザのサポート終了、スマートフォン の登場が追い風になっています。 5
6.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. CSS3は機能/性能共に進化 • CSS3はCSS2に比べ表現の幅が広がりました。 – 透明度を指定できる – 角丸ブロックを表現できる – アニメーションのサポート • CSS3はハードウェアアクセラレータが利用で きるようになり描画速度が格段向上しました。 6
7.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. JavaScriptが飛躍的進化 • 「Webページのスクリプト言語」の枠を超え、 様々な用途で展開されています。 – サーバシステム開発(Node.js) – モバイルアプリ開発(Sencha Touchなど) • 開発方法論やデザインパターンの確立、フ レームワークの発展が盛んであり、大規模開 発での採用もあたりまえになりました。 • ECMAScript6が2015年6月17日に策定完了。 現在、 ECMAScript7の策定が進行中。 7
8.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. いまどきのWeb周辺技術 8
9.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 拡張言語の発展 • CSS、JavaScriptを直接コーディングするのでは なく、拡張言語(メタ言語)を記述し、 CSS、 JavaScriptコードを生成する方法が主流になり つつあります。 9 拡張言語のコード CSS、JavaScript コンパイル コンパイル
10.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. フレームワーク利用は必須 • JavaScript、CSSに関するフレームワーク(※1) が急速に開発/普及しています。 10 ※1 ここでは体系だった複数の機能を提供するソフトウェアを「フレームワーク」と呼称します。
11.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. シングルページとマルチページ • 1HTMLファイル内に複数のページ情報を持つ 「シングルページ」、従来通り1HTML:1ページ 構造を「マルチページ」と呼びます。 11 HTMLファイル Web画面 Web画面 Web画面 HTMLファイル Web画面HTMLファイル Web画面 HTMLファイル Web画面
12.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. レスポンシブWebデザイン • レスポンシブWebデザインで、マルチスクリー ン対応をします。 • 1HTMLでPC/スマホなど複数デバイスをサ ポートする必要がある場合に有効な方法です。 12 HTML (PC用) HTML (PC/SP兼用) HTML (SP用) Non Responsive Responsive
13.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. いまどきのWebシステムの構成 13
14.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. フロントエンド バックエンド • 基本的なWebシステムの構成 基本的な構成 14 PC Mobile Phone Tablet HTML CSS Java Script REST (HTTP/S)HTTP/S Link Link Web API Buisiness Logic DataBaseFile Other System module load REST DB driver File.IO
15.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 抑えておくべきポイント 1. フロントシステムとエンドシステムは切り離す – 役割を明確にする – 適した技術、アプローチを突き詰める 2. フロント-サーバエンドはREST通信で繋げる – 通信はHTTP/HTTPSに統一する – データフォーマットはJSONに統一する 3. 端末/ブラウザを限定する設定は避ける 15
16.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. ハンズオン 16
17.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. ハンズオンのゴール • 郵便番号検索ページを作ります。 – 郵便番号を入力すると住所を取得します。 – データはZipCloud社提供のWebAPIを使います。 • http://zipcloud.ibsnet.co.jp/doc/api 17
18.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発ツールをセットアップする • HTMLエディタ – Bracketsを使います。(http://brackets.io/) 18
19.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発ツールをセットアップする • Bracketsセットアップ手順 1. 以下URLからインストーラをダウンロードする 1. Win:http://qq3q.biz/tXht 2. Mac:http://qq3q.biz/tXhl 2. インストーラを実行し、手順にしたがってセット アップする。 Windowsの場合
20.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発ツールについて • ビルドツール – gruntを使います。(http://gruntjs.com/) 20
21.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発ツールについて • ビルドツール「grunt」とは? – 一部の作業や、昨今のWeb開発で求められる汎 用的な作業を実施するツール。以下、機能一例。 • TypeScript/CaffeScriptのビルド • SASS/LESSのビルド • ファイル圧縮(パフォーマンス向上) • 難読化(セキュリティ向上) • キャッシュ無効化 – 上記以外にも、多数の機能がプラグインとして提 供されており、作業効率の向上などに役立ちます。 21
22.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発環境セットアップ • gruntのセットアップ手順(Windows版) 1. node.jsをインストールするため、NODISTダウン ロードする。 • https://github.com/marcelklehr/nodist/releases/downl oad/v0.7.2/NodistSetup-v0.7.2.exe 2. ダウンロードしたファイルを実行し、手順に従っ てインストールする。 22
23.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発環境セットアップ 3. 環境変数PATHにNODISTのパスを登録する • システムのプロパティ>詳細設定>環境変数 23 設定の先頭に以下を追加 %NODIST_PREFIX%bin;
24.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発環境セットアップ 4. コマンドプロンプトを起動し、以下のNODISTコマ ンドを実行してnode.jsをインストールする。 24 > nodist + node > nodist nodev6.2.0 > node -v ⇒nodev6.2.0 ・・・ node.jsのインストール ・・・ node.jsのバージョン確認 v4.4.4と表示されれば成功
25.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発環境セットアップ 5. 以下のコマンドを実行して、gruntクライアント ツールをインストールする。(成功すると下図の 画面になる) 25 > npm install –g grunt-cli
26.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発環境セットアップ • gruntのセットアップ手順(Mac版) – ターミナルで以下のコマンドを実行します。 26 >ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master /install)“ > brew install node > node –v > npm install –g grunt-cli ・・・ node.jsのインストール ・・・ node.jsのバージョン確認 ・・・ homebrewのインストール ・・・ gruntのインストール
27.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発環境セットアップ • SASSのセットアップ手順 1. Rubyをダウンロードする。 (Windowsのみ) • http://rubyinstaller.org/downloads/ 2. インストーラを実行し、手順にしたがってセット アップを進める。 27 ・・・ 32bitインストーラ ・・・ 64bitインストーラ
28.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発環境セットアップ 3. 下記のチェックをONにする。 28
29.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発環境セットアップ 4. コマンドプロンプトを起動し、以下のコマンドを実 行する。 (Windows&Mac) 29 > gem update --system > gem install sass > sudo gem update --system > sudo gem install sass Windows Mac
30.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発プロジェクトを作成する • HTML、JavaScript等を格納する「プロジェクト」 を作成します。 1. C:に「postal」というフォルダを作成する。 2. コマンドプロンプトで「c:postal」に移動する。 3. 「npm init」コマンドを実行する。 30 > cd c:postal > npm init ・・・ ③ ・・・ ② > mkdir ~/postal > cd ~/postal > npm init
31.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発プロジェクトを作成する • 「npm init」のあと、「name」「version」等の入 力を求められますが、今回は初期値にします。 • 「Is this ok?」がでたら「yes」を入力してください。 31
32.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発プロジェクトを作成する • 開発で使用するツール、フレームワークをイ ンストールします。 – インストールは「npm install」コマンドを使用します。 – 今回使用する「grunt(ビルドツール)」「jQuery(フ レームワーク)」をインストールします。コマンドプ ロンプトで、以下コマンドを実行してください。 32 > npm install grunt --save-dev > npm install jquery --save ・・・ jQueryのインストール ・・・ gruntのインストール
33.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. 開発プロジェクトを作成する • package.jsonを参照し、下図のようになってい れば成功です。 33 gruntのインストール設定 jQueryのインストール設定
34.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. HTML5を書いてみる • 基本的にはHTML4とほぼ同じです。 • 明確に異なるのは「doctype宣言部」です。 34 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html> HTML4 HTML5
35.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. HTML5を書いてみる • HTML5では、「メディア機能拡張」「セクション 要素」など、HTML4の基本機能では実現でき なかった様々な機能が追加されています。 35 機能 機能概要 追加されたタグ オーディオ再生 音声を再生する <audio> ビデオ再生 動画を再生する <video> セクション要素 ドキュメントの構造を明確にする <header>,<section>,<article >,<nav>等 ルビ表示 テキストにルビを設定する <rb> フォームの拡張 formの入力項目で、メール、日付な どが追加(20種以上) <input type=“email”>、 <input type=“date”>等 HTML5追加機能の一例
36.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. HTML5を書いてみる • BracketsでHTMLファイルを作成、プレビューを 出してみましょう。 1. Bracketsを起動し、メニューより新しいファイルを 選択する。 36 設定の先頭に以下を追加
37.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. HTML5を書いてみる 2. ファイル名を index.html と入力する。 3. ファイル名をダブルクリックすると、編集エリアに てindex.htmlの作成ができるようになる。 37 ファイル名を index.html と入力する index.htmlの編集エリア
38.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. HTML5を書いてみる 4. 編集エリアに以下を入力する。 5. Bracketsのライブプレビューボタンをクリックし、 ブラウザでプレビューを確認する。 38 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>郵便番号検索</title> </head> <body> <h1>郵便番号検索</h1> </body> </html> ライブプレビュー ボタン
39.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. HTML5を書いてみる<演習> • 以下のHTMLを作成してください。 39
40.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. HTML5を書いてみる<解答例> 40 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>郵便番号検索</title> <script type="text/javascript"src="node_modules/jquery/dist/jquery.min.js"></script> </head> <body> <h1>郵便番号検索</h1> <section class="condition_area"> <h2>郵便番号入力</h2> <form> <fieldset> <legend>検索したい郵便番号を入力してください。</legend> <!-- 入力フィールド --> 郵便番号:<input id="zipcode3" type="text" maxlength="3" value="104" />-<input id="zipcode4" type="text" maxlength="4" value="6101"/> <!-- 検索ボタン --> <a id="searchButton" href="#">検索</a> </fieldset> </form> </section>
41.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. HTML5を書いてみる<解答例> 41 <section class="result_area"> <!-- 検索結果の表示 --> <h2>検索結果表示</h2> <p>都道府県:<span id="todoufuken">検索結果なし</span></p> <p>市区町村:<span id="shikutyoson">検索結果なし</span></p> <p>町域:<span id="tyoiki">検索結果なし</span></p> </section> <script type="text/javascript" src="javascript/index.js"></script> </body> </html>
42.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. JavaScriptを書いてみる • JavaScriptでは以下の機能を実装します。 1. 検索をクリックしたら郵便番号検索を実施する • 検索をクリックし、画面項目の郵便番号を取得する • 郵便番号検索APIのリクエストパラメータを作成する • 郵便番号検索APIにHTTPリクエストを送信する 2. 検索結果を画面へ表示する • 郵便番号検索APIからレスポンスを受信する • レスポンスから「都道府県」「市区町村名」「町域名」を 取得し、画面に表示する 42
43.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. JavaScriptを書いてみる • JavaScript作成では以下を前提とします。 – jQueryを使用する。 • jQueryの採用により、オブジェクトの取得等を簡素な記 述で実現できるので作業効率が良い。 – JavaScriptは外部ファイルに記述する。 • 外部ファイルにすることで、HTML、JavaScriptの保守性 を高める 43
44.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. JavaScriptを書いてみる • このようなファイル構造になります 44 オリジナルの JavaScriptファイル jQueryの JavaScriptファイル HTMLファイル
45.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. JavaScriptを書いてみる • HTMLに外部JavaScriptファイルのリンクを追 加します。 – Headタグ内に追加(jQuery) – Bodyタグ最下部に追加(オリジナルJavaScript) 45 <head> <meta charset="utf-8"/> <title>郵便番号検索</title> <script type="text/javascript"src="node_modules/jquery/dist/jquery.min.js"></script> </head> ・ ・ ・ <script type="text/javascript" src="javascript/index.js"></script> </body> </html>
46.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. JavaScriptを書いてみる • なぜ「HEAD」「BODY」で使い分けるか? – 最初にロードしたいファイルはHEADに記述 • 基本的なフレームワーク • 他のJavaScriptの前提となるJavaScriptファイル – HTMLファイルの後にロードしたいファイルは BODYに記述 • BODYの最後にロードすることで、静的コンテンツが先 に描画され、体感速度が向上する 46 HTMLの読込 <HEAD>の読込 <BODY>の読込 jQueryロード オリジナルJavaScriptロード画面読込/描画
47.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. JavaScriptを書いてみる • index.jsを作成します。 – $(function(){}); を記述する。 • HTMLの読込完了後に実行することを保証する • {}の中にプログラムを記述する 47 $(function(){ ・ ・ ・ ); javascript/index.js
48.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. JavaScriptを書いてみる • jQueryの基本 – 画面項目の要素を取得する – <input>要素から値を取得する – 画面項目に文字を設定する 48 $('#zipcode3') $('#zipcode3').val() $(‘#todoufuken’).text(“あいうえお”); # + ID名 を指定
49.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. JavaScriptを書いてみる • jQueryの基本 – <a>クリック時のプログラムを作成する 49 <a id="searchButton" href="#">検索</a> index.html javascript/index.js # にするとページ遷移しない $('#searchButton').on('click',function(){ ・ ・ ・ }); プログラムを記述する イベント名を指定する項目名を指定する
50.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. JavaScriptを書いてみる • jQueryの基本 – HTTP通信をし、レスポンスを受信する 50 javascript/index.js $.ajax({ url: "http://zipcloud.ibsnet.co.jp/api/search", data: { zipcode: zipcode7 }, dataType: "jsonp", success: function(data){ ・ ・ ・ } }); レスポンス受信時のプログラムを記述する data:HTTPレスポンス Ajax通信をする パラメータを設定
51.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. JavaScriptを書いてみる<演習> • 入力した郵便番号から、住所を検索し画面表 示するJavaScriptを作成してください。 51 郵便番号を入力し、検索をクリックする 検索結果を表示する
52.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. JavaScriptを書いてみる<解答例> 52 $(function(){ $('#searchButton').on('click',function(){ // 郵便番号作成 var zipcode7 = $('#zipcode3').val() + $('#zipcode4').val() // Web API実行 $.ajax({ url: "http://zipcloud.ibsnet.co.jp/api/search", data: { zipcode: zipcode7 }, dataType: "jsonp", success: function(data){ setDisplay(data.results[0]) } }); // Web API取得結果を画面に表示 function setDisplay(result) { $('#todoufuken').text(result.address1); $('#shikutyoson').text(result.address2); $('#tyoiki').text(result.address3); } }); });
53.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. CSSを書いてみる • CSS作成では以下を前提とします。 – SASSを使用する。 • ファイル形式は SCSS形式 とする。 – SCSS->CSS変換はgruntプラグインで変換します。 53
54.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. CSSを書いてみる • このようなファイル構造になります 54 CSSファイル (ビルド後) SCSSファイル (ソース)
55.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. CSSを書いてみる • SCSSからCSSを生成する設定をgruntに追加し ます。 1. npm installコマンドで、「grunt-contrib-sass」をイ ンストールする。 55 > npm install grunt-contrib-sass --save-dev ・・・ gruntのインストール
56.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. CSSを書いてみる 2. Gruntfile.jsにビルド設定を追加する。 56 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { dist: { files: { "css/main.css": "scss/main.scss" } } } }); // プラグインのロード grunt.loadNpmTasks('grunt-contrib-sass'); // デフォルトタスクの設定 grunt.registerTask('default', ["sass"]); }; 変換元 変換先 プラグイン読み込み sassタスクを実行
57.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. CSSを書いてみる • 環境ができたら、実際にSCSSファイルからCSS を作成し、HTMLで表示してみましょう。 1. Bracketsで、SCSSファイルを作成します。 57 1. 右クリック「新しいフォルダーを作成」で、「scss」と いうフォルダーを作成する。 2. scssフォルダを選択・右クリックで「新しいファイル」 を選択肢、main.scssを作成する。C
58.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. CSSを書いてみる 2. scss/main.scssにスタイル設定を記述する。 3. コマンドプロンプトからgruntのビルドを実行する。 58 .condition_area { background-color: PeachPuff; } scss/main.scss >grunt CSSフォルダに、 main.cssが作成されて いたら成功
59.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. CSSを書いてみる 4. HTMLにCSSの設定を追加する。 5. ブラウザで表示する。 59 <head> <link rel="stylesheet" href="css/main.css"> index.html CSSを指定する 背景色が変更され たら成功
60.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. CSSを書いてみる<演習> • 以下の設定をSCSSで設定しましょう。 60 ①背景色を薄ピン ク ③罫線をピンク ②文字色を赤 アンダーライン ⑥文字色を青 アンダーライン ⑧項目名のみボー ルド ④入力欄の幅を 40px ⑤太字 ⑦背景色を水色
61.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. CSSを書いてみる<回答案> 61 .condition_area { background-color: PeachPuff; h2 { color: red; text-decoration: underline; } fieldset { border-color: deeppink; border-style: solid; } input { width: 40px; } } legend { font: { weight: bold; } } .result_area { background-color: LightCyan; h2 { color: blue; text-decoration: underline; } } p { font: { weight: bold; } span { font: { weight: normal; } } } scss/main.scss (1/2) scss/main.scss (2/2) ・・・ ① ・・・ ② ・・・ ③ ・・・ ④ ・・・ ⑤ ・・・ ⑥ ・・・ ⑦ ・・・ ⑧
62.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. さらにチャレンジする【難読化】 • 難読化とは、JavaScriptの変数名など無意味 な文字列に変換することで、プログラムの挙 動を推測を困難にします。 62 $(function(){ $('#searchButton').on('click',function(){ console.log("click!") // 郵便番号作成 var zipcode7 = $('#zipcode3').val() + $('#zipcode4').val() // Web API実行 $.ajax({ url: "http://zipcloud.ibsnet.co.jp/api/search", data: { zipcode: zipcode7 }, $(function(){$("#searchButton").on("click",function (){function a(a){$("#todoufuken").text(a.address1),$("#shikuty oson").text(a.address2),$("#tyoiki").text(a.address 3)}console.log("click!");var b=$("#zipcode3").val()+$("#zipcode4").val();$.ajax({ url:"http://zipcloud.ibsnet.co.jp/api/search",data:{ zipcode:b},dataType:"jsonp",success:function(b){a( b.results[0])}})})}); javascript/index.js javascript/index.min.js 難 読 化
63.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. さらにチャレンジする【難読化】 • 難読化は、gruntで簡単に実現できます。 1. 以下コマンドで、gruntプラグイン「grunt-contrib- uglify」をインストールする。 63 > npm install grunt-contrib-uglify --save-dev 難読化 gruntプラグイン 「uglify」
64.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. さらにチャレンジする【難読化】 2. Gruntfile.jsに設定を追加する。 64 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { dist: { files: { "css/main.css": "scss/main.scss" } } }, uglify:{ my_target: { files: { 'javascript/index.min.js': ['javascript/index.js'] } } } }); // プラグインのロード grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-uglify'); // デフォルトタスクの設定 grunt.registerTask('default', ['sass','uglify']); }; Gruntfile.js (1/2) Gruntfile.js (2/2)
65.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. さらにチャレンジする【難読化】 3. コマンドプロンプトで grunt を実行する。 65 >grunt Running "sass:dist" (sass) task Running "uglify:my_target" (uglify) task File javascript/index.min.js created: 778 B → 368 B >> 1 file created. Done. 難読化によりファイルサ イズも小さくなる
66.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. さらにチャレンジする【CSS圧縮】 • CSSを圧縮することで、パフォーマンスを改善 します。 66 .condition_area { background-color: PeachPuff; } .condition_area h2 { color: red; text-decoration: underline; } .condition_area fieldset { border-color: deeppink; border-style: solid; } .condition_area input { width: 40px; } legend { font-weight: bold; } .result_area { background-color: LightCyan; } .result_area h2 { legend,p{font- weight:700}.condition_area{background- color:#ffdab9}.condition_area h2{color:red;text- decoration:underline}.condition_area fieldset{border-color:#ff1493;border- style:solid}.condition_area input{width:40px}.result_area{background- color:#e0ffff}.result_area h2{color:#00f;text- decoration:underline}p span{font-weight:400} css/main.css css/main.min.css 圧 縮
67.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. さらにチャレンジする【CSS圧縮】 • CSS圧縮も、gruntで簡単に実現できます。 1. 以下コマンドで、gruntプラグイン「grunt-contrib- cssmin」をインストールする。 67 > npm install grunt-contrib-cssmin --save-dev CSS圧縮 gruntプラグイン 「cssmin」
68.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. さらにチャレンジする【CSS圧縮】 2. Gruntfile.jsに設定を追加する。 68 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { dist: { files: { "css/main.css": "scss/main.scss" } } }, cssmin :{ combine: { files:{ 'css/main.min.css':['css/main.css'] } } } }); // プラグインのロード grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-cssmin'); // デフォルトタスクの設定 grunt.registerTask('default', ['sass','cssmin']); }; Gruntfile.js (1/2) Gruntfile.js (2/2)
69.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. さらにチャレンジする【CSS圧縮】 3. コマンドプロンプトで grunt を実行する。 69 >grunt Running "sass:dist" (sass) task Running "cssmin:combine" (cssmin) task >> 1 file created. 536 B → 333 B Done. 難読化によりファイルサ イズも小さくなる
70.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. おつかれさまでした! • 次回予告 – Gitでソースコードの構成管理を体験します。 – JenkinsでCIを体験します。 – AWSで今回作成したWebページを稼働します。 • 次回参加に向けてのお願い – Githubのアカウントを作成しておいてください。 • https://github.com/ – AWSのアカウントを作成しておいてください。 • http://aws.amazon.com/jp/ 70
71.
Copyright © 2016
Advanced IT Consortium to Evaluate, Apply and Drive All Rights Reserved. http://aitc.jp https://www.facebook.com/aitc.jp 最新情報は こちらをご参照ください ハルミン AITC非公式イメージキャラクター シニア勉強会への参加、 お待ちしてます 7/16(土)14:00~
Download now