Suche senden
Hochladen
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
•
36 gefällt mir
•
13,310 views
Takuya Ueda
Folgen
Technologie
Diashow-Anzeige
Melden
Teilen
Diashow-Anzeige
Melden
Teilen
1 von 36
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
OSC浜名湖2016 Hamamatsu.rbの歩みとITコミュニティとの上手な関わり方
OSC浜名湖2016 Hamamatsu.rbの歩みとITコミュニティとの上手な関わり方
Yuto Ogi
ngx_small_light
ngx_small_light
Tatsuhiko Kubo
起業しようぜ
起業しようぜ
2chdekigyou
起業しようぜ
起業しようぜ
2chdekigyou
Go + WS (仮) psoをws使ってやってみる- @spdy+ws勉強会
Go + WS (仮) psoをws使ってやってみる- @spdy+ws勉強会
Takuya Ueda
Meguro es7
Meguro es7
健太 田上
スクレイピングは避けられない
スクレイピングは避けられない
Daiki Kojima
.NET技術でこれからも食べていくための技術戦略
.NET技術でこれからも食べていくための技術戦略
Yuya Yamaki
Empfohlen
OSC浜名湖2016 Hamamatsu.rbの歩みとITコミュニティとの上手な関わり方
OSC浜名湖2016 Hamamatsu.rbの歩みとITコミュニティとの上手な関わり方
Yuto Ogi
ngx_small_light
ngx_small_light
Tatsuhiko Kubo
起業しようぜ
起業しようぜ
2chdekigyou
起業しようぜ
起業しようぜ
2chdekigyou
Go + WS (仮) psoをws使ってやってみる- @spdy+ws勉強会
Go + WS (仮) psoをws使ってやってみる- @spdy+ws勉強会
Takuya Ueda
Meguro es7
Meguro es7
健太 田上
スクレイピングは避けられない
スクレイピングは避けられない
Daiki Kojima
.NET技術でこれからも食べていくための技術戦略
.NET技術でこれからも食べていくための技術戦略
Yuya Yamaki
業務アプリケーション開発を支える.NET技術 #ngtnet
業務アプリケーション開発を支える.NET技術 #ngtnet
将 高野
【ABC2014Spring LT】AngularJSでWEBアプリ開発
【ABC2014Spring LT】AngularJSでWEBアプリ開発
Hiroyuki Kusu
第8回rest勉強会 bootstrap編
第8回rest勉強会 bootstrap編
ksimoji
.Net技術でこれからも食べていくための技術戦略
.Net技術でこれからも食べていくための技術戦略
Yuya Yamaki
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
Fuminori Mori
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
Toshiaki Maki
Windowsフォームで大丈夫か?一番良いのを頼む。
Windowsフォームで大丈夫か?一番良いのを頼む。
Yuya Yamaki
はじめてのASP.NET MVC5
はじめてのASP.NET MVC5
Tomo Mizoe
AngularJS 概説
AngularJS 概説
Kenichi Kanai
大人の基礎C#【Niigat.NET 2015-10】
大人の基礎C#【Niigat.NET 2015-10】
Mitsuhito Ishino
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Hiroaki Okubo
HTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminar
kujirahand kujira
サルでもわかるHTML5超入門
サルでもわかるHTML5超入門
tomo kaneko
BootstrapとRailsで、 高速にWebサイトを作ってみた
BootstrapとRailsで、 高速にWebサイトを作ってみた
BeMarble
PHP で始める AWS モバイルサービス - PHPカンファレンス_20150530
PHP で始める AWS モバイルサービス - PHPカンファレンス_20150530
崇之 清水
0528 kanntigai ui_ux
0528 kanntigai ui_ux
Saori Matsui
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
MOCKS | Yuta Morishige
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
pinmarch_t Tada
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
tomonari takahashi
Weitere ähnliche Inhalte
Andere mochten auch
業務アプリケーション開発を支える.NET技術 #ngtnet
業務アプリケーション開発を支える.NET技術 #ngtnet
将 高野
【ABC2014Spring LT】AngularJSでWEBアプリ開発
【ABC2014Spring LT】AngularJSでWEBアプリ開発
Hiroyuki Kusu
第8回rest勉強会 bootstrap編
第8回rest勉強会 bootstrap編
ksimoji
.Net技術でこれからも食べていくための技術戦略
.Net技術でこれからも食べていくための技術戦略
Yuya Yamaki
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
Fuminori Mori
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
Toshiaki Maki
Windowsフォームで大丈夫か?一番良いのを頼む。
Windowsフォームで大丈夫か?一番良いのを頼む。
Yuya Yamaki
はじめてのASP.NET MVC5
はじめてのASP.NET MVC5
Tomo Mizoe
AngularJS 概説
AngularJS 概説
Kenichi Kanai
大人の基礎C#【Niigat.NET 2015-10】
大人の基礎C#【Niigat.NET 2015-10】
Mitsuhito Ishino
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Fumio SAGAWA
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Hiroaki Okubo
HTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminar
kujirahand kujira
サルでもわかるHTML5超入門
サルでもわかるHTML5超入門
tomo kaneko
BootstrapとRailsで、 高速にWebサイトを作ってみた
BootstrapとRailsで、 高速にWebサイトを作ってみた
BeMarble
PHP で始める AWS モバイルサービス - PHPカンファレンス_20150530
PHP で始める AWS モバイルサービス - PHPカンファレンス_20150530
崇之 清水
0528 kanntigai ui_ux
0528 kanntigai ui_ux
Saori Matsui
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
MOCKS | Yuta Morishige
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
Andere mochten auch
(20)
業務アプリケーション開発を支える.NET技術 #ngtnet
業務アプリケーション開発を支える.NET技術 #ngtnet
【ABC2014Spring LT】AngularJSでWEBアプリ開発
【ABC2014Spring LT】AngularJSでWEBアプリ開発
第8回rest勉強会 bootstrap編
第8回rest勉強会 bootstrap編
.Net技術でこれからも食べていくための技術戦略
.Net技術でこれからも食べていくための技術戦略
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
入門HTML5/CSS3@HTML5 conference 2015 in 鹿児島
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
続・Twitter bootstrap入門 #html5j
続・Twitter bootstrap入門 #html5j
Windowsフォームで大丈夫か?一番良いのを頼む。
Windowsフォームで大丈夫か?一番良いのを頼む。
はじめてのASP.NET MVC5
はじめてのASP.NET MVC5
AngularJS 概説
AngularJS 概説
大人の基礎C#【Niigat.NET 2015-10】
大人の基礎C#【Niigat.NET 2015-10】
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
Flashじゃなくて HTML5で ビュンビュン動くサイトを 作ってと言われたら
HTML5/JavaScriptで作るAndroidアプリ開発seminar
HTML5/JavaScriptで作るAndroidアプリ開発seminar
サルでもわかるHTML5超入門
サルでもわかるHTML5超入門
BootstrapとRailsで、 高速にWebサイトを作ってみた
BootstrapとRailsで、 高速にWebサイトを作ってみた
PHP で始める AWS モバイルサービス - PHPカンファレンス_20150530
PHP で始める AWS モバイルサービス - PHPカンファレンス_20150530
0528 kanntigai ui_ux
0528 kanntigai ui_ux
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Ähnlich wie Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
pinmarch_t Tada
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
tomonari takahashi
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
Naoki Yamada
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923
Staffnet_Inc
俺とAngular JS 2
俺とAngular JS 2
Masayuki KaToH
Ng mtg#3
Ng mtg#3
Kenichi Kanai
Isomorphic Architecture & Interface
Isomorphic Architecture & Interface
Jxck Jxck
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
Mitsuru Ogawa
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
kazuki matsumura
C++ REST SDKを使ってWebサービスを利用する
C++ REST SDKを使ってWebサービスを利用する
You&I
もっとサーバーレスを手軽に便利に!Azure Logic Apps
もっとサーバーレスを手軽に便利に!Azure Logic Apps
典子 松本
観葉植物IoT&高校生から見るIoT
観葉植物IoT&高校生から見るIoT
ssuser817c3f
非エンジニアでも安心!ノンコーディングでもココまでできる!LINE × Azure Logic Apps
非エンジニアでも安心!ノンコーディングでもココまでできる!LINE × Azure Logic Apps
典子 松本
Our Track to Modern Angular
Our Track to Modern Angular
Yuta Shimizu
今からでも遅くない! 2から始めるangular js
今からでも遅くない! 2から始めるangular js
Kohashi Daisuke
ノーコーディングでAIサービスを使ってみた話
ノーコーディングでAIサービスを使ってみた話
典子 松本
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
Mitsuru Ogawa
はじめてのMobile hub
はじめてのMobile hub
mafmoff Yamamoto
grpc-gateway を試してみた fukuoka.go#11
grpc-gateway を試してみた fukuoka.go#11
Yutaka Tachibana
Walking front end
Walking front end
Hirata Tomoko
Ähnlich wie Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
(20)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS x Chrome Apps (2014.08.23 #gdgkobe event)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
AngularJS勉強会「そもそもwebって」@ツクロア勉強会(2015.09.10)
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
Angularモダンweb開発セミナー紹介 20170923
Angularモダンweb開発セミナー紹介 20170923
俺とAngular JS 2
俺とAngular JS 2
Ng mtg#3
Ng mtg#3
Isomorphic Architecture & Interface
Isomorphic Architecture & Interface
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
メンテナンス性の良いWebシステムを構築するためにjavaとフロントエンドでやるべきこと
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
普段Reactを触ってる僕が Angularを触ってみた感想を共有する
C++ REST SDKを使ってWebサービスを利用する
C++ REST SDKを使ってWebサービスを利用する
もっとサーバーレスを手軽に便利に!Azure Logic Apps
もっとサーバーレスを手軽に便利に!Azure Logic Apps
観葉植物IoT&高校生から見るIoT
観葉植物IoT&高校生から見るIoT
非エンジニアでも安心!ノンコーディングでもココまでできる!LINE × Azure Logic Apps
非エンジニアでも安心!ノンコーディングでもココまでできる!LINE × Azure Logic Apps
Our Track to Modern Angular
Our Track to Modern Angular
今からでも遅くない! 2から始めるangular js
今からでも遅くない! 2から始めるangular js
ノーコーディングでAIサービスを使ってみた話
ノーコーディングでAIサービスを使ってみた話
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
今後のWeb開発の未来を考えてangular jsにしました(拡大版)
はじめてのMobile hub
はじめてのMobile hub
grpc-gateway を試してみた fukuoka.go#11
grpc-gateway を試してみた fukuoka.go#11
Walking front end
Walking front end
Mehr von Takuya Ueda
Goにおけるバージョン管理の必要性 − vgoについて −
Goにおけるバージョン管理の必要性 − vgoについて −
Takuya Ueda
WebAssembly with Go
WebAssembly with Go
Takuya Ueda
GAE/Goとsyncパッケージ
GAE/Goとsyncパッケージ
Takuya Ueda
静的解析を使った開発ツールの開発
静的解析を使った開発ツールの開発
Takuya Ueda
そうだ、Goを始めよう
そうだ、Goを始めよう
Takuya Ueda
マスター・オブ・goパッケージ
マスター・オブ・goパッケージ
Takuya Ueda
メルカリ カウルのマスタデータの更新
メルカリ カウルのマスタデータの更新
Takuya Ueda
Go1.8 for Google App Engine
Go1.8 for Google App Engine
Takuya Ueda
Go Friday 傑作選
Go Friday 傑作選
Takuya Ueda
GoによるiOSアプリの開発
GoによるiOSアプリの開発
Takuya Ueda
Static Analysis in Go
Static Analysis in Go
Takuya Ueda
静的解析とUIの自動生成を駆使してモバイルアプリの運用コストを大幅に下げた話
静的解析とUIの自動生成を駆使してモバイルアプリの運用コストを大幅に下げた話
Takuya Ueda
メルカリ・ソウゾウでは どうGoを活用しているのか?
メルカリ・ソウゾウでは どうGoを活用しているのか?
Takuya Ueda
エキスパートGo
エキスパートGo
Takuya Ueda
Go静的解析ハンズオン
Go静的解析ハンズオン
Takuya Ueda
Goにおける静的解析と製品開発への応用
Goにおける静的解析と製品開発への応用
Takuya Ueda
オススメの標準・準標準パッケージ20選
オススメの標準・準標準パッケージ20選
Takuya Ueda
Gopher Fest 2017参加レポート
Gopher Fest 2017参加レポート
Takuya Ueda
Google Assistant関係のセッションまとめ
Google Assistant関係のセッションまとめ
Takuya Ueda
Cloud functionsの紹介
Cloud functionsの紹介
Takuya Ueda
Mehr von Takuya Ueda
(20)
Goにおけるバージョン管理の必要性 − vgoについて −
Goにおけるバージョン管理の必要性 − vgoについて −
WebAssembly with Go
WebAssembly with Go
GAE/Goとsyncパッケージ
GAE/Goとsyncパッケージ
静的解析を使った開発ツールの開発
静的解析を使った開発ツールの開発
そうだ、Goを始めよう
そうだ、Goを始めよう
マスター・オブ・goパッケージ
マスター・オブ・goパッケージ
メルカリ カウルのマスタデータの更新
メルカリ カウルのマスタデータの更新
Go1.8 for Google App Engine
Go1.8 for Google App Engine
Go Friday 傑作選
Go Friday 傑作選
GoによるiOSアプリの開発
GoによるiOSアプリの開発
Static Analysis in Go
Static Analysis in Go
静的解析とUIの自動生成を駆使してモバイルアプリの運用コストを大幅に下げた話
静的解析とUIの自動生成を駆使してモバイルアプリの運用コストを大幅に下げた話
メルカリ・ソウゾウでは どうGoを活用しているのか?
メルカリ・ソウゾウでは どうGoを活用しているのか?
エキスパートGo
エキスパートGo
Go静的解析ハンズオン
Go静的解析ハンズオン
Goにおける静的解析と製品開発への応用
Goにおける静的解析と製品開発への応用
オススメの標準・準標準パッケージ20選
オススメの標準・準標準パッケージ20選
Gopher Fest 2017参加レポート
Gopher Fest 2017参加レポート
Google Assistant関係のセッションまとめ
Google Assistant関係のセッションまとめ
Cloud functionsの紹介
Cloud functionsの紹介
Kürzlich hochgeladen
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
Kürzlich hochgeladen
(8)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
Angular jsとbootstrapでサクッと作るwebアプリ@html5勉強会 名古屋#2
1.
AngularJSとBootstrapでサ クッと作るWebアプリ 2013年3月19日 (火) HTML5勉強会 名古屋#2
2.
自己紹介 上田拓也 豊橋技術科学大学大学院 電子・情報工学専攻 博士後期課程3年 twitter : @tenntenn blog:
http://u.hinoichi.net
3.
アジェンダ ● ぼくのかんがえたさいきょうのうぇぶあぷりかい はつ ● CRUDアプリとRESTful
API ○ 基本的なWebのデータの流れ ○ CRUD ○ RESTful API ● AngularJSとは ● Bootstrapとは
4.
ぼくのかんがえた さいきょうの うぇぶあぷり かいはつ
5.
Webアプリのざっくりとした構成 AngularJS Bootstrap Goweb MongoDB Memcached クライアントサイド サーバサイド RESTful
6.
サーバサイド ● Goweb ○ Go言語のライブラリでRESTful
APIを提供する ● MongoDB ○ NoSQLのドキュメント指向型のデータベース ● Memcached ○ オンンメモリ型のキーバリューストア
7.
クライアントサイド ● AngularJS ○ JavaScriptのMVCフレームワーク ●
Bootstrap ○ 簡単にきれいなサイトが作れるCSS/JSライブラリ
8.
使用する言語 HTML Typscript SCSS Go言語 クライアントサイド サーバサイド RESTful
9.
サーバサイド ● Go言語 ○ Googleの開発した言語 ○
Google App Engineなどで使える ○ GoCon 2013 springが大人気
10.
クライアントサイド ● Typescript ○ Microsoftが開発しているJavaScript代替言語 ○
型がある ○ ECMAScript6との互換を視野に入れている ● SCSS ○ CSSを拡張したもの
11.
CRUDアプリとRESTful API
12.
基本的なWebのデータの流れ ブラウザ Webサーバ GETリクエスト HTML/JS/CSS/画像など POSTリクエスト IDやステータスなど ユーザのデータ HTTP通信 DB 永続化取得
13.
CRUDアプリケーション C : Create R
: Read U : Update D : Delete を主にやるアプリケーション ⇒ RESTful APIで実現!
14.
RESTful API ● HTTPのメソッドとURIをうまくを使う ●
ステートレスなリソースサーバを提供 ● 多くの大手Webサービスで提供されている ● クライアントサイドに依存しない ○ 複数種類のクライアントで共通で利用可能 ■ PC版Web ■ モバイル版Web ■ モバイルアプリ など
15.
RESTful APIとCRUDアプリ ブラウザ Webサーバ [1]
CREATE DB 永続化 POST/diary/arriticle { "articleId" : 1 } 日記のデータ {"title" : "今日のご飯", "body" : "寿司"} 取得
16.
RESTful APIとCRUDアプリ ブラウザ Webサーバ [2]
READ DB 永続化取得 GET/diary/arriticle/1 {"articleId" : 1, "title" : "今日のご飯", "body" : "寿司"}
17.
RESTful APIとCRUDアプリ ブラウザ Webサーバ [3]
UPDATE DB 永続化 PUT/diary/arriticle/1 {"articleId" : 1, "title" : "今日のご飯", "body" : "寿司"} 取得
18.
RESTful APIとCRUDアプリ ブラウザ Webサーバ [4]
DELETE DB 永続化取得 DELETE/diary/arriticle/1
19.
CRUDとRESTful APIの対応 ● メソッドでやりたい事を指定する ○
Create, Read, Update, Delete ● URIで対象のリソース(データ)を指定する ○ diary/article/1
20.
AngularJSとは
21.
AngularJSとは? ● Google製 ● MVCフレームワーク ●
双方向データバインド ● CRUDアプリに向いている ● テストが容易
22.
MVCフレームワーク Model jsのデータ View html/css Controller ロジック $scope
23.
双方向バインディングでない場合 Model jsのデータ View htmlI(DOM) 今日のご飯タイトル: title = "今日のご飯"; ユーザWebアプリ title
= "昨日のご飯"; $("#title").val("昨日のご飯");
24.
双方向バインディングのない場合 Model jsのデータ View htmlI(DOM) ユーザWebアプリ 今日のご飯タイトル: title = "昨日のご飯"; 同期!
25.
実際の例 ngRepeate <ul ng-repeate="article
in articles"> <li> <a href="#/article/{{article.articleId}}"> {{article.title}} </a> </li> </ul>
26.
KnockoutJSとの違い ● 特別なラッパーがいらない ○ ko.observableやko.observableArrayみたいな ●
バリデーションが簡単にできる ○ inputタグで入力されたデータのチェックができる
27.
AngularJSとCRUDアプリ Model jsのデータ Controller ロジック RESTful API ngResource
28.
実際の例 var article =
article.$get({articleId : 1}); article.title = "ほげ"; article.$save({articleId : 1});
29.
AngularJSとテスト View html/css Controller ロジック $scope それぞれ別にテストできる! 直接繋がっていない
30.
Bootstrapとビュー
31.
Bootstrap ● Twitter社が開発しているCSSのライブラリ ● リッチなUIが簡単にできる ○
グリッド ○ ボタン ○ かっこいアイコン ● class属性をうまく使う ○ HTMLとCSSだけでできる ○ jQuery UIとかだと、見た目を構築する部分がJSに入っ てしまう!
32.
グリッドの例 <div class="row"> <div class="span6"> 右! </div> <div
class="span6"> 左! </div> </div>
33.
アイコン付きボタンの例 <a href="#" class="btn
btn-primary"> <i class="icon-plus icon-white"></i> 追加 </a>
34.
アイコン付きボタンの例
35.
Awesome Font ● BootstrapのアイコンをWebFontにする ○
Bootstrapのアイコンはpng ○ pngだと拡大できない ○ フォントであれば拡大自由! ● アニメーションが使える ○ ぐるぐるまわる読み込み中のアイコンとか
36.
まとめ ● それぞれの構成の関係を疎にする ○ 役割分担やテストがしやすくなる ●
AngularJSを使うと ○ MVCでコントローラーとビューが独立できる ○ 双方向バインディングでモデルとビューを同期 ○ RESTful APIと相性がいい ● Bootstrap ○ class属性でリッチなUIが作れる ○ ビューとコントローラーが依存しにくい ■ JSでUIの見た目の構築をあまりしないので
Jetzt herunterladen