Enviar pesquisa
Carregar
第5回rest勉強会 ログイン編
•
2 gostaram
•
1,679 visualizações
K
ksimoji
Seguir
2015/5/22に行われたAWS上で構築するRESTfulアプリ勉強会~Web開発ワークショップ~【第5回】で使用した資料です。
Leia menos
Leia mais
Software
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 115
Baixar agora
Baixar para ler offline
Recomendados
2015/5/22に行われたAWS上で構築するRESTfulアプリ勉強会~Web開発ワークショップ~【第5回】で使用した資料です。
第6回rest勉強会 アソシエーション編
第6回rest勉強会 アソシエーション編
ksimoji
2015/7/24に行われたAWS上で構築するRESTfulアプリ勉強会~Web開発ワークショップ~【第7回】で使用した資料です。
第7回rest勉強会 バリデーション編
第7回rest勉強会 バリデーション編
ksimoji
2015/12/22に行われたAWS上で構築するRESTfulアプリ勉強会~Web開発ワークショップ~【第12回】で使用した資料です。
第12回rest勉強会 これまでの補足・展望編
第12回rest勉強会 これまでの補足・展望編
ksimoji
2015/4/26に行われたAWS上で構築するRESTfulアプリ勉強会~Web開発ワークショップ~【第3回】で使用した資料です。
第4回REST勉強会 RequireJS編
第4回REST勉強会 RequireJS編
ksimoji
実際に案件に入れてみた話です
Lambda EdgeとALB認証を導入した話
Lambda EdgeとALB認証を導入した話
淳 千葉
AWS as code_and_test
AWS as code_and_test
Serverworks Co.,Ltd.
第7回 Amazonクラウド(JAWS-UG) 岡山 参考URL ・storage-efs-mountfilesystem.config https://github.com/awslabs/elastic-beanstalk-docs/blob/master/configuration-files/aws-provided/instance-configuration/storage-efs-mountfilesystem.config ・Beansralk Docker Multi container : pulling docker image from private registry http://qiita.com/kazu_0/private/072e716d7e7352d4015e ・Analyzing VPC Flow Logs with Amazon Kinesis Firehose, Amazon Athena, and Amazon QuickSight https://aws.amazon.com/jp/blogs/big-data/analyzing-vpc-flow-logs-with-amazon-kinesis-firehose-amazon-athena-and-amazon-quicksight/ ・S3のデータをAmazon Athenaを使って分析する https://aws.amazon.com/jp/blogs/news/analyzing-data-in-s3-using-amazon-athena/
ドキュメント週末趣味のAWS Elastic Beanstalk 編
ドキュメント週末趣味のAWS Elastic Beanstalk 編
Namba Kazuo
2015/10/23に行われたAWS上で構築するRESTfulアプリ勉強会~Web開発ワークショップ~【第10回】で使用した資料です。
第10回rest勉強会 リファクタリング(サーバ編)編
第10回rest勉強会 リファクタリング(サーバ編)編
ksimoji
Recomendados
2015/5/22に行われたAWS上で構築するRESTfulアプリ勉強会~Web開発ワークショップ~【第5回】で使用した資料です。
第6回rest勉強会 アソシエーション編
第6回rest勉強会 アソシエーション編
ksimoji
2015/7/24に行われたAWS上で構築するRESTfulアプリ勉強会~Web開発ワークショップ~【第7回】で使用した資料です。
第7回rest勉強会 バリデーション編
第7回rest勉強会 バリデーション編
ksimoji
2015/12/22に行われたAWS上で構築するRESTfulアプリ勉強会~Web開発ワークショップ~【第12回】で使用した資料です。
第12回rest勉強会 これまでの補足・展望編
第12回rest勉強会 これまでの補足・展望編
ksimoji
2015/4/26に行われたAWS上で構築するRESTfulアプリ勉強会~Web開発ワークショップ~【第3回】で使用した資料です。
第4回REST勉強会 RequireJS編
第4回REST勉強会 RequireJS編
ksimoji
実際に案件に入れてみた話です
Lambda EdgeとALB認証を導入した話
Lambda EdgeとALB認証を導入した話
淳 千葉
AWS as code_and_test
AWS as code_and_test
Serverworks Co.,Ltd.
第7回 Amazonクラウド(JAWS-UG) 岡山 参考URL ・storage-efs-mountfilesystem.config https://github.com/awslabs/elastic-beanstalk-docs/blob/master/configuration-files/aws-provided/instance-configuration/storage-efs-mountfilesystem.config ・Beansralk Docker Multi container : pulling docker image from private registry http://qiita.com/kazu_0/private/072e716d7e7352d4015e ・Analyzing VPC Flow Logs with Amazon Kinesis Firehose, Amazon Athena, and Amazon QuickSight https://aws.amazon.com/jp/blogs/big-data/analyzing-vpc-flow-logs-with-amazon-kinesis-firehose-amazon-athena-and-amazon-quicksight/ ・S3のデータをAmazon Athenaを使って分析する https://aws.amazon.com/jp/blogs/news/analyzing-data-in-s3-using-amazon-athena/
ドキュメント週末趣味のAWS Elastic Beanstalk 編
ドキュメント週末趣味のAWS Elastic Beanstalk 編
Namba Kazuo
2015/10/23に行われたAWS上で構築するRESTfulアプリ勉強会~Web開発ワークショップ~【第10回】で使用した資料です。
第10回rest勉強会 リファクタリング(サーバ編)編
第10回rest勉強会 リファクタリング(サーバ編)編
ksimoji
JAWS UG 岡山の第7回勉強会での発表資料です。
ElasticBeanstalkでのRailsアプリ運用
ElasticBeanstalkでのRailsアプリ運用
Masaya Konishi
2015/11/27に行われたAWS上で構築するRESTfulアプリ勉強会~Web開発ワークショップ~【第11回】で使用した資料です。
第11回rest勉強会 リファクタリング(クライアント編)
第11回rest勉強会 リファクタリング(クライアント編)
ksimoji
Serverless Meetup Tokyo #1 http://serverless.connpass.com/event/40687/
The Internal of Serverless Plugins
The Internal of Serverless Plugins
Terui Masashi
Webデザイン・Web制作に関する勉強会 #4 https://kfug.connpass.com/event/117873/ で発表した資料です。
Amplify Consoleで かんたん!Webサイト公開
Amplify Consoleで かんたん!Webサイト公開
Daisuke Yagi
AWS Elastic Beanstalk のススメ
AWS Elastic Beanstalk のススメ
Taiji INOUE
JSON Schema で Web API のスキマを埋めよう
JSON Schema で Web API のスキマを埋めよう
VOYAGE GROUP
https://connpass.com/event/52103/ こちらのイベントのLT資料です。 http://dev.classmethod.jp/cloud/aws/apigateway_mock_dev/ クラウドメソッドさんのブログでも取り上げていただきました。
APIモック3分クッキング
APIモック3分クッキング
政雄 金森
AWSのAmazon Simple Workflow Service(SWF)の説明です。AWSのサービスの中で、1,2を争う難解なサービスですが、凄いサービスです。
JAWSUG Kansai Simple Workflow Service (SWF)
JAWSUG Kansai Simple Workflow Service (SWF)
Takuro Sasaki
Build insider testingwithvs
Build insider testingwithvs
Tomoyuki Iwade
50分で掴み取る ASP.NET Web API パターン&テクニック
50分で掴み取る ASP.NET Web API パターン&テクニック
miso- soup3
AWS EC2の自動リブート
AWS EC2の自動リブート
Eiji Kamiya
北海道科学大学電子計算機研究部ネットワークチーム 後期講座01
densan2014-late01
densan2014-late01
Takenori Nakagawa
開発初心者がAWSサービスを色々使ってアプリ開発をした話です。
開発初心者がAWSサービスを色々使ってアプリ開発をした話
開発初心者がAWSサービスを色々使ってアプリ開発をした話
MaiFujisawa
Ateam Corporate TECH MeetUp_vol.01 で使用した資料です。
組織で、もっとAnsible
組織で、もっとAnsible
sugoto
WordFes Nagoya 2013のLTのスライドです。WordPress on Azure Web サイトの紹介です。
WordPress と Azure の素敵な関係 version 3.6
WordPress と Azure の素敵な関係 version 3.6
Masaki Takeda
アメブロのフロントエンド刷新についてFrontrend Vol.8で発表した内容です。
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
Kazunari Hara
AWS クックパッドの運用事例
AWS クックパッドの運用事例
Satoshi Takada
App Service の基本概要についてのお話 MS Tech Camp #1 のセッション資料 https://mspjp.connpass.com/event/189743/
App service コトハジメ
App service コトハジメ
Tsubasa Yoshino
AWS Cloud Roadshow 2014 札幌での講演スライドです。 http://roadshow.awseventsjapan.com/sapporo/
Farmnoteの技術(AWS Cloud Roadshow 2014 札幌)
Farmnoteの技術(AWS Cloud Roadshow 2014 札幌)
Takehito Tanabe
Firebase新機能でハンズオン! and factory beer bash#3 https://andfactory.connpass.com/event/98718/ の発表資料 FirebaseAuthenticationとFirebaseUIを使ってソーシャルログイン
ソーシャルログイン5分クッキング
ソーシャルログイン5分クッキング
Saiki Iijima
Agile Japan 2015 サテライト<沖縄> https://java-kuche.doorkeeper.jp/events/22305 --- 開発を安心して高速に回すための取り組みの一つに 「テストの実行時間を短縮する」 というものがある。 今回はその一例として、Docker のコンテナ技術を用いてテスト並列実行の高速化かつ安定化を目指した記録を紹介する
あなたの安心を高速に守る Container-based CI
あなたの安心を高速に守る Container-based CI
Wataru MIYAGUNI
AWS Amplifyを初めて使う方向けの構築ハンズオン資料です。
AWS Amplify - Auth/API Category & Vue 構築ハンズオン
AWS Amplify - Auth/API Category & Vue 構築ハンズオン
Eiji KOMINAMI
Mais conteúdo relacionado
Mais procurados
JAWS UG 岡山の第7回勉強会での発表資料です。
ElasticBeanstalkでのRailsアプリ運用
ElasticBeanstalkでのRailsアプリ運用
Masaya Konishi
2015/11/27に行われたAWS上で構築するRESTfulアプリ勉強会~Web開発ワークショップ~【第11回】で使用した資料です。
第11回rest勉強会 リファクタリング(クライアント編)
第11回rest勉強会 リファクタリング(クライアント編)
ksimoji
Serverless Meetup Tokyo #1 http://serverless.connpass.com/event/40687/
The Internal of Serverless Plugins
The Internal of Serverless Plugins
Terui Masashi
Webデザイン・Web制作に関する勉強会 #4 https://kfug.connpass.com/event/117873/ で発表した資料です。
Amplify Consoleで かんたん!Webサイト公開
Amplify Consoleで かんたん!Webサイト公開
Daisuke Yagi
AWS Elastic Beanstalk のススメ
AWS Elastic Beanstalk のススメ
Taiji INOUE
JSON Schema で Web API のスキマを埋めよう
JSON Schema で Web API のスキマを埋めよう
VOYAGE GROUP
https://connpass.com/event/52103/ こちらのイベントのLT資料です。 http://dev.classmethod.jp/cloud/aws/apigateway_mock_dev/ クラウドメソッドさんのブログでも取り上げていただきました。
APIモック3分クッキング
APIモック3分クッキング
政雄 金森
AWSのAmazon Simple Workflow Service(SWF)の説明です。AWSのサービスの中で、1,2を争う難解なサービスですが、凄いサービスです。
JAWSUG Kansai Simple Workflow Service (SWF)
JAWSUG Kansai Simple Workflow Service (SWF)
Takuro Sasaki
Build insider testingwithvs
Build insider testingwithvs
Tomoyuki Iwade
50分で掴み取る ASP.NET Web API パターン&テクニック
50分で掴み取る ASP.NET Web API パターン&テクニック
miso- soup3
AWS EC2の自動リブート
AWS EC2の自動リブート
Eiji Kamiya
北海道科学大学電子計算機研究部ネットワークチーム 後期講座01
densan2014-late01
densan2014-late01
Takenori Nakagawa
開発初心者がAWSサービスを色々使ってアプリ開発をした話です。
開発初心者がAWSサービスを色々使ってアプリ開発をした話
開発初心者がAWSサービスを色々使ってアプリ開発をした話
MaiFujisawa
Ateam Corporate TECH MeetUp_vol.01 で使用した資料です。
組織で、もっとAnsible
組織で、もっとAnsible
sugoto
WordFes Nagoya 2013のLTのスライドです。WordPress on Azure Web サイトの紹介です。
WordPress と Azure の素敵な関係 version 3.6
WordPress と Azure の素敵な関係 version 3.6
Masaki Takeda
アメブロのフロントエンド刷新についてFrontrend Vol.8で発表した内容です。
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
Kazunari Hara
AWS クックパッドの運用事例
AWS クックパッドの運用事例
Satoshi Takada
App Service の基本概要についてのお話 MS Tech Camp #1 のセッション資料 https://mspjp.connpass.com/event/189743/
App service コトハジメ
App service コトハジメ
Tsubasa Yoshino
AWS Cloud Roadshow 2014 札幌での講演スライドです。 http://roadshow.awseventsjapan.com/sapporo/
Farmnoteの技術(AWS Cloud Roadshow 2014 札幌)
Farmnoteの技術(AWS Cloud Roadshow 2014 札幌)
Takehito Tanabe
Mais procurados
(19)
ElasticBeanstalkでのRailsアプリ運用
ElasticBeanstalkでのRailsアプリ運用
第11回rest勉強会 リファクタリング(クライアント編)
第11回rest勉強会 リファクタリング(クライアント編)
The Internal of Serverless Plugins
The Internal of Serverless Plugins
Amplify Consoleで かんたん!Webサイト公開
Amplify Consoleで かんたん!Webサイト公開
AWS Elastic Beanstalk のススメ
AWS Elastic Beanstalk のススメ
JSON Schema で Web API のスキマを埋めよう
JSON Schema で Web API のスキマを埋めよう
APIモック3分クッキング
APIモック3分クッキング
JAWSUG Kansai Simple Workflow Service (SWF)
JAWSUG Kansai Simple Workflow Service (SWF)
Build insider testingwithvs
Build insider testingwithvs
50分で掴み取る ASP.NET Web API パターン&テクニック
50分で掴み取る ASP.NET Web API パターン&テクニック
AWS EC2の自動リブート
AWS EC2の自動リブート
densan2014-late01
densan2014-late01
開発初心者がAWSサービスを色々使ってアプリ開発をした話
開発初心者がAWSサービスを色々使ってアプリ開発をした話
組織で、もっとAnsible
組織で、もっとAnsible
WordPress と Azure の素敵な関係 version 3.6
WordPress と Azure の素敵な関係 version 3.6
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
アメブロ2016 アメブロフロント刷新にみる ひかりとつらみ
AWS クックパッドの運用事例
AWS クックパッドの運用事例
App service コトハジメ
App service コトハジメ
Farmnoteの技術(AWS Cloud Roadshow 2014 札幌)
Farmnoteの技術(AWS Cloud Roadshow 2014 札幌)
Semelhante a 第5回rest勉強会 ログイン編
Firebase新機能でハンズオン! and factory beer bash#3 https://andfactory.connpass.com/event/98718/ の発表資料 FirebaseAuthenticationとFirebaseUIを使ってソーシャルログイン
ソーシャルログイン5分クッキング
ソーシャルログイン5分クッキング
Saiki Iijima
Agile Japan 2015 サテライト<沖縄> https://java-kuche.doorkeeper.jp/events/22305 --- 開発を安心して高速に回すための取り組みの一つに 「テストの実行時間を短縮する」 というものがある。 今回はその一例として、Docker のコンテナ技術を用いてテスト並列実行の高速化かつ安定化を目指した記録を紹介する
あなたの安心を高速に守る Container-based CI
あなたの安心を高速に守る Container-based CI
Wataru MIYAGUNI
AWS Amplifyを初めて使う方向けの構築ハンズオン資料です。
AWS Amplify - Auth/API Category & Vue 構築ハンズオン
AWS Amplify - Auth/API Category & Vue 構築ハンズオン
Eiji KOMINAMI
2019/05/29~30 に行われた PowerPlatform Touch&Try でのハンズオン。Teams の発言を元に Excel ファイルの内容を抽出し、応答する
decode2019_HandsOn_Flow_04
decode2019_HandsOn_Flow_04
Tomoyuki Obi
20210128 エムスリー BIR勉強会資料 https://m3-engineer.connpass.com/event/200495/
React(TypeScript) + Go + Auth0 で実現する管理画面
React(TypeScript) + Go + Auth0 で実現する管理画面
KentaEndoh
CIの構成とserverless frameworkの利用方法について
担当Pjのciにserverless frameworkを導入した話
担当Pjのciにserverless frameworkを導入した話
masaya tawata
5分でHello Worldアプリの作り方を説明します。 当該アプリはownCloudアプリを作る際に一般的に利用するAppFrameworkを用いたアプリです。 主に以下のセンテンスの説明となります。 ・ルーティング : URLをコントローラーにひもづけます ・コントローラー : リクエスト受け取ってレスポンス返します ・DIコンテナのエントリ : コントローラで使えるようにこれを作っておきます ・テンプレート : ページを表示させるのに使うHTMLテンプレートです
5分でわかる!ownCloudアドオンの作り方
5分でわかる!ownCloudアドオンの作り方
Yuki Takahashi
素敵なjavascript ~google chrome編~
素敵なjavascript ~google chrome編~
ngi group.
俺とGitHub 完成版
俺とGitHub
俺とGitHub
Masayuki KaToH
2019/05/29~30 に行われた PowerPlatform Touch&Try でのハンズオン。Teams の発言を元に Excel ファイル更新。
decode2019_HandsOn_Flow_03
decode2019_HandsOn_Flow_03
Tomoyuki Obi
DjangoでさくっとWebアプリケーション開発をする話
DjangoでさくっとWeb アプリケーション開発をする話
DjangoでさくっとWeb アプリケーション開発をする話
Nakazawa Yuichi
Google App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろう
kenji4569
Ec cube開発合宿 プラグインセミナー
Ec cube開発合宿 プラグインセミナー
Ayumu Kawaguchi
minami.rbにて発表した認証についての資料
deviseを利用した認証について@Minamirb
deviseを利用した認証について@Minamirb
Jun Fukaya
Service Workerハッカソンでつくったもの
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
Toshiaki Maki
Cakephpstudy5 hacks jp
Cakephpstudy5 hacks jp
Hiroki Shimizu
2012/12/21に行われたサイバーエージェント社内勉強での講演資料です。
Chrome DevTools.next
Chrome DevTools.next
yoshikawa_t
2015/3/10の勉強会にて発表された資料です。 SCRIPTY#3 ~フロントエンド紳士・淑女のための勉強会~ http://scripty.connpass.com/event/12374/
Service Workerとの戦い ~ 実装編 ~ #scripty03
Service Workerとの戦い ~ 実装編 ~ #scripty03
Yahoo!デベロッパーネットワーク
以前のやつ 【紹介編】 http://www.slideshare.net/otiai10/ss-26631311 【実装編】 http://www.slideshare.net/otiai10/ss-26908975 もう第3弾になっちゃったのでひとまずこれでおしまいにします。ご清聴ありがとうございました。機能要望などは引き続き受け付けております!
加賀さんと僕 〜艦これウィジェットの新機能とか〜
加賀さんと僕 〜艦これウィジェットの新機能とか〜
Hiromu Ochiai
Colla(コラ)というSlackアプリ開発を通して得た、プロダクトとしてのSlackアプリ開発の知見を共有します
コロナ時代を生き抜く(?) Slackアプリ開発・運用知見まとめ
コロナ時代を生き抜く(?) Slackアプリ開発・運用知見まとめ
Masayuki Uehara
Semelhante a 第5回rest勉強会 ログイン編
(20)
ソーシャルログイン5分クッキング
ソーシャルログイン5分クッキング
あなたの安心を高速に守る Container-based CI
あなたの安心を高速に守る Container-based CI
AWS Amplify - Auth/API Category & Vue 構築ハンズオン
AWS Amplify - Auth/API Category & Vue 構築ハンズオン
decode2019_HandsOn_Flow_04
decode2019_HandsOn_Flow_04
React(TypeScript) + Go + Auth0 で実現する管理画面
React(TypeScript) + Go + Auth0 で実現する管理画面
担当Pjのciにserverless frameworkを導入した話
担当Pjのciにserverless frameworkを導入した話
5分でわかる!ownCloudアドオンの作り方
5分でわかる!ownCloudアドオンの作り方
素敵なjavascript ~google chrome編~
素敵なjavascript ~google chrome編~
俺とGitHub
俺とGitHub
decode2019_HandsOn_Flow_03
decode2019_HandsOn_Flow_03
DjangoでさくっとWeb アプリケーション開発をする話
DjangoでさくっとWeb アプリケーション開発をする話
Google App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろう
Ec cube開発合宿 プラグインセミナー
Ec cube開発合宿 プラグインセミナー
deviseを利用した認証について@Minamirb
deviseを利用した認証について@Minamirb
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
おれおれブログシステムにServiceWorkerを導入してみた #serviceworker
Cakephpstudy5 hacks jp
Cakephpstudy5 hacks jp
Chrome DevTools.next
Chrome DevTools.next
Service Workerとの戦い ~ 実装編 ~ #scripty03
Service Workerとの戦い ~ 実装編 ~ #scripty03
加賀さんと僕 〜艦これウィジェットの新機能とか〜
加賀さんと僕 〜艦これウィジェットの新機能とか〜
コロナ時代を生き抜く(?) Slackアプリ開発・運用知見まとめ
コロナ時代を生き抜く(?) Slackアプリ開発・運用知見まとめ
第5回rest勉強会 ログイン編
1.
CakePHPで実装する ログイン機能 AWS上で構築するRESTfulアプリ勉強会 ~Web開発ワークショップ~【第5回】
2.
概要
3.
概要 1. ログインとは 2. やりたいこと 3.
今回追加する機能
4.
概要 1. ログインとは 2. やりたいこと 3.
今回追加する機能
5.
「ログイン」 =認証 (本人確認)
6.
「ログイン」 =承認 (認可)
7.
「ログイン」 =知っている人(認証) はアクセス許可(承認) する
8.
「ログイン機能を作る」 認証処理と承認処理 の2つを作ること!
9.
概要 1. ログインとは 2. やりたいこと 3.
今回追加する機能
10.
ログインしないと TODOが見られな いようにする
11.
概要 1. ログインとは 2. やりたいこと 3.
今回追加する機能
12.
今回追加する機能 1. ユーザ登録 2. ログイン 3.
ヘッダ表示(ユーザ名) 4. ログアウト
13.
ユーザ登録・ログイン画面
14.
ヘッダ表示(TODO一覧画面)
15.
ヘッダ表示(TODO詳細画面)
16.
ログアウト
17.
ワークショップ
18.
本日のメニュー 1. 事前準備 2. Lesson1 サーバサイド開発 3.
Lesson2 クライアントサイド開発
19.
本日のメニュー 1. 事前準備 2. Lesson1 サーバサイド開発 3.
Lesson2 クライアントサイド開発
20.
事前準備 • gitのブランチを整える • ユーザ登録用テーブルを作 成する
21.
gitのブランチを整える ■masterブランチを前回の内容 を終えた状態にする ■masterブランチを元に、今回 の作業用である、 「vol/05」ブランチを作成する どう整えるのか
22.
人によって手順が違い ます!(重要) ■前回の内容を途中までやった方 ■前回の内容を完了した方 ■今回から参加の方 gitのブランチを整える
23.
http:// goo.gl/WEHXqX ジーオーオー.ジーエル/ ダブリューイーエイチエックスキューエックス ここに詳しく 書いております!
24.
ユーザ登録用テーブルを作成する ■phpMyAdminを使用する ユーザ登録用テーブル 「users」を作成 ■項目は、 •id •username •name •password
25.
phpMyAdmin http://(PublicIP)/phpMyAdmin
26.
本日のメニュー 1. 事前準備 2. Lesson1 サーバサイド開発 3.
Lesson2 クライアントサイド開発
27.
Lesson1 サーバサイド開発 REST,SPA流 ■ポイント
28.
ログイン画面表示 までの動き
29.
通常の Webページの場合 (REST,SPAでなく、 サーバサイドでページ生成)
30.
(CakePHPの既定の動作) ブラウザ サーバサーバ
31.
(CakePHPの既定の動作) ブラウザ サーバサーバ ① GET todo_lists
32.
(CakePHPの既定の動作) ブラウザ サーバサーバ ① GET todo_lists 「誰?」
33.
(CakePHPの既定の動作) ブラウザ サーバサーバ ① GET todo_lists
34.
(CakePHPの既定の動作) ブラウザ サーバサーバ ① GET todo_lists ログイン画面で 名前教えて!
35.
(CakePHPの既定の動作) ブラウザ サーバサーバ ① GET todo_lists ②
302 Found (Location users/login) ログイン画面で 名前教えて!
36.
(CakePHPの既定の動作) ブラウザ サーバサーバ ① GET todo_lists ②
302 Found (Location users/login)
37.
(CakePHPの既定の動作) ブラウザ サーバサーバ ① GET todo_lists ②
302 Found (Location users/login) わかりました!
38.
(CakePHPの既定の動作) ブラウザ サーバサーバ ① GET todo_lists ②
302 Found (Location users/login) ③ GET users/login わかりました!
39.
(CakePHPの既定の動作) ブラウザ サーバサーバ ① GET todo_lists ②
302 Found (Location users/login) ③ GET users/login
40.
(CakePHPの既定の動作) ブラウザ サーバサーバ ① GET todo_lists ②
302 Found (Location users/login) ③ GET users/login ④ 200 OK
41.
(CakePHPの既定の動作) ブラウザ サーバサーバ ① GET todo_lists ②
302 Found (Location users/login) ③ GET users/login ④ 200 OKログイン画面 表示
42.
REST,SPAの場合
43.
Javascript サーバサーバ
44.
Javascript サーバサーバ ① GET todo_lists.json
45.
Javascript サーバサーバ ① GET todo_lists.json 「誰?」
46.
Javascript サーバサーバ ① GET todo_lists.json
47.
Javascript サーバサーバ ① GET todo_lists.json ②
401 Unauthorized
48.
Javascript サーバサーバ ① GET todo_lists.json ②
401 Unauthorized ログインが必要!
49.
Javascript サーバサーバ ① GET todo_lists.json ②
401 Unauthorized
50.
Javascript サーバサーバ ① GET todo_lists.json ②
401 Unauthorizedログイン画面 表示
51.
まとめ
52.
まとめ ■通常のWebページ
53.
まとめ ■通常のWebページ サーバのリダイレクト指示により ブラウザがリダイレクト先を要求、 サーバがログイン画面を返す
54.
まとめ ■通常のWebページ ■REST, SPA サーバのリダイレクト指示により ブラウザがリダイレクト先を要求、 サーバがログイン画面を返す
55.
まとめ ■通常のWebページ ■REST, SPA サーバのリダイレクト指示により ブラウザがリダイレクト先を要求、 サーバがログイン画面を返す サーバに拒否されたことを受け、 Javascriptがログイン画面を表示
56.
■REST, SPA サーバに拒否されたことを受け、 Javascriptがログイン画面を表示 リダイレクト(302) CakePHPの既定の動作 →許可なし(401)に変更する
57.
作成するAPI一覧 URL(/rest-study/…) Http Method 処理 Controller Action users/login.json
POST ログインする UsersController login users/logout.json POST ログアウトする UsersController logout users/ loggedin.json GET ログインユーザ情報を取得 (ログイン中かどうかのチェック) UsersController loggedIn users/signup.json POST ユーザを登録する UsersController signUp
58.
本日のメニュー 1. 事前準備 2. Lesson1 サーバサイド開発 3.
Lesson2 クライアントサイド開発
59.
Javascript で全部やる ■ポイント Lesson2 クライアントサイド開発
60.
まとめ(再掲) ■通常のWebページ ■REST, SPA サーバのリダイレクト指示により ブラウザがリダイレクト先を要求、 サーバがログイン画面を返す サーバに拒否されたことを受け、 Javascriptがログイン画面を表示
61.
■通常のWebページ サーバのリダイレクト指示により ブラウザがリダイレクト先を要求、 サーバがログイン画面を返す
62.
■通常のWebページ サーバのリダイレクト指示により ブラウザがリダイレクト先を要求、 サーバがログイン画面を返す サーバとブラウザが 面倒みてくれる
63.
■REST, SPA サーバに拒否されたことを受け、 Javascriptがログイン画面を表示
64.
サーバは拒否するだけ、 ブラウザは何もしない ■REST, SPA サーバに拒否されたことを受け、 Javascriptがログイン画面を表示
65.
サーバはクライアントの質問に答えるだけ、 クライアントはその答えを見て判断、が基本 ■Javascriptで全部やる
66.
今回は、起動時にログイン 済みかどうかサーバに確認 するようにします。 ■Javascriptで全部やる
67.
■Javascriptで全部やる ログイン済みなら、ヘッダに表示するユーザ情報が 返ってきます。
68.
TODO一覧画面表示 未ログイン ログイン済み ブラウザで「…/rest-study/」 をたたく サーバに、ログ イン済みか確認 ログイン画面表示 起動時 ■Javascriptで全部やる
69.
Lesson2 クライアントサイド開発 Ajaxはその名の通り 「非同期」である ■ハマりどころ
70.
未ログイン ログイン済み サーバに、ログ イン済みか確認 ■ログイン確認 「非同期」なのでこんな 単純じゃない
71.
XHR サーバ■ログイン確認 Controller 起動時の処理 ルーティング開始まで待機
72.
①サーバに、ログイン済みか どうかの確認要求を送信する XHR サーバ■ログイン確認 Controller 起動時の処理 ルーティング開始まで待機
73.
①サーバに、ログイン済みか どうかの確認要求を送信する XHR サーバ ②関数実行 ■ログイン確認 Controller 起動時の処理 ルーティング開始まで待機
74.
①サーバに、ログイン済みか どうかの確認要求を送信する XHR サーバ ②関数実行 ■ログイン確認 Controller 起動時の処理 ルーティング開始まで待機
75.
①サーバに、ログイン済みか どうかの確認要求を送信する XHR サーバ ②関数実行 ■ログイン確認 Controller 起動時の処理 ルーティング開始まで待機
76.
①サーバに、ログイン済みか どうかの確認要求を送信する XHR サーバ ②関数実行 ③CallBack ④サーバからの応 答を保持しておく ■ログイン確認 Controller 起動時の処理 ルーティング開始まで待機
77.
①サーバに、ログイン済みか どうかの確認要求を送信する XHR サーバ ②関数実行 ③CallBack ④サーバからの応 答を保持しておく ■ログイン確認 ユーザ情報 Controller 起動時の処理 ルーティング開始まで待機
78.
①サーバに、ログイン済みか どうかの確認要求を送信する XHR サーバ ②関数実行 ③CallBack ④サーバからの応 答を保持しておく ■ログイン確認 ⑤ルーティング を有効にする ユーザ情報 Controller 起動時の処理 ルーティング開始まで待機
79.
①サーバに、ログイン済みか どうかの確認要求を送信する XHR サーバ ②関数実行 ③CallBack ④サーバからの応 答を保持しておく ■ログイン確認 ⑤ルーティング を有効にする ユーザ情報 Controller 起動時の処理 ルーティング開始まで待機
80.
①サーバに、ログイン済みか どうかの確認要求を送信する XHR サーバ ⑥TODO一覧画面を表示する ②関数実行 ③CallBack ④サーバからの応 答を保持しておく ■ログイン確認 ⑤ルーティング を有効にする ユーザ情報 Controller 起動時の処理 ルーティング開始まで待機
81.
①サーバに、ログイン済みか どうかの確認要求を送信する XHR サーバ ⑥TODO一覧画面を表示する ②関数実行 ③CallBack ④サーバからの応 答を保持しておく ■ログイン確認 ⑤ルーティング を有効にする ユーザ情報 ⑦ログイン済み/未ロ グインを確認 Controller 起動時の処理 ルーティング開始まで待機
82.
①サーバに、ログイン済みか どうかの確認要求を送信する XHR サーバ ⑥TODO一覧画面を表示する ②関数実行 ③CallBack ④サーバからの応 答を保持しておく ■ログイン確認 ⑤ルーティング を有効にする ユーザ情報 ⑦ログイン済み/未ロ グインを確認 Controller 起動時の処理 ルーティング開始まで待機
83.
①サーバに、ログイン済みか どうかの確認要求を送信する TODO一覧画面表示 未ログイン ログイン済み ログイン画面表示 XHR サーバ ⑥TODO一覧画面を表示する ②関数実行 ③CallBack ④サーバからの応 答を保持しておく ■ログイン確認 ⑤ルーティング を有効にする ユーザ情報 ⑦ログイン済み/未ロ グインを確認 Controller 起動時の処理 ルーティング開始まで待機
84.
■どうハマったか? ①ルーティング を有効にする 起動時の処理 前回までのプログラム 最初にルーティングを 有効にしている
85.
XHR サーバ ■こうハマる Controller 起動時の処理 ルーティング開始まで待機
86.
XHR サーバ ■こうハマる Controller 起動時の処理 ルーティング開始まで待機 ①ルーティングを有効にする
87.
②サーバに、ログイン済みか どうかの確認要求を送信する XHR サーバ ■こうハマる Controller 起動時の処理 ルーティング開始まで待機 ①ルーティングを有効にする
88.
②サーバに、ログイン済みか どうかの確認要求を送信する XHR サーバ ③関数実行 ■こうハマる Controller 起動時の処理 ルーティング開始まで待機 ①ルーティングを有効にする
89.
②サーバに、ログイン済みか どうかの確認要求を送信する XHR サーバ ③関数実行 ■こうハマる Controller 起動時の処理 ルーティング開始まで待機 ①ルーティングを有効にする
90.
④TODO一覧画面を表示する ②サーバに、ログイン済みか どうかの確認要求を送信する XHR サーバ ③関数実行 ■こうハマる Controller 起動時の処理 ルーティング開始まで待機 ①ルーティングを有効にする
91.
⑤ログイン済み/未ロ グインを確認 ④TODO一覧画面を表示する ②サーバに、ログイン済みか どうかの確認要求を送信する XHR サーバ ③関数実行 ■こうハマる Controller 起動時の処理 ルーティング開始まで待機 ①ルーティングを有効にする
92.
⑤ログイン済み/未ロ グインを確認 ④TODO一覧画面を表示する ②サーバに、ログイン済みか どうかの確認要求を送信する XHR サーバ ③関数実行 ■こうハマる Controller 起動時の処理 ルーティング開始まで待機 ①ルーティングを有効にする
93.
⑤ログイン済み/未ロ グインを確認 ④TODO一覧画面を表示する ②サーバに、ログイン済みか どうかの確認要求を送信する XHR サーバ ③関数実行 ■こうハマる Controller 起動時の処理 ルーティング開始まで待機 ①ルーティングを有効にする
94.
⑤ログイン済み/未ロ グインを確認 ④TODO一覧画面を表示する ②サーバに、ログイン済みか どうかの確認要求を送信する 未ログイン ログイン画面表示 XHR サーバ ③関数実行 ■こうハマる Controller 起動時の処理 ルーティング開始まで待機 ①ルーティングを有効にする
95.
⑤ログイン済み/未ロ グインを確認 ④TODO一覧画面を表示する ②サーバに、ログイン済みか どうかの確認要求を送信する 未ログイン ログイン画面表示 XHR サーバ ③関数実行 ■こうハマる Controller 起動時の処理 ルーティング開始まで待機 ①ルーティングを有効にする
96.
⑤ログイン済み/未ロ グインを確認 ④TODO一覧画面を表示する ②サーバに、ログイン済みか どうかの確認要求を送信する 未ログイン ログイン画面表示 XHR サーバ ③関数実行 ⑥CallBack ⑦サーバからの応 答を保持しておく ■こうハマる Controller 起動時の処理 ルーティング開始まで待機 ①ルーティングを有効にする
97.
⑤ログイン済み/未ロ グインを確認 ④TODO一覧画面を表示する ②サーバに、ログイン済みか どうかの確認要求を送信する 未ログイン ログイン画面表示 XHR サーバ ③関数実行 ⑥CallBack ⑦サーバからの応 答を保持しておく ■こうハマる Controller 起動時の処理 ルーティング開始まで待機 ①ルーティングを有効にする ユーザ情報
98.
ログイン済み TODO一覧画面表示 ⑤ログイン済み/未ロ グインを確認 ④TODO一覧画面を表示する ②サーバに、ログイン済みか どうかの確認要求を送信する 未ログイン ログイン画面表示 XHR サーバ ③関数実行 ⑥CallBack ⑦サーバからの応 答を保持しておく ■こうハマる Controller 起動時の処理 ルーティング開始まで待機 ①ルーティングを有効にする ユーザ情報
99.
Lesson2 クライアントサイド開発 ログイン後、詳細ボタン クリック時はどうか?
100.
■TODO詳細画面に遷移 ユーザ情報 Controller XHR サーバ
101.
①TODO詳細画面を表示する ■TODO詳細画面に遷移 ユーザ情報 Controller XHR サーバ
102.
①TODO詳細画面を表示する ■TODO詳細画面に遷移 ユーザ情報 ②ログイン済み/未ロ グインを確認 Controller XHR サーバ
103.
①TODO詳細画面を表示する ■TODO詳細画面に遷移 ユーザ情報 ②ログイン済み/未ロ グインを確認 Controller XHR サーバ
104.
③TODO詳細画面表示 ログイン済み ①TODO詳細画面を表示する ■TODO詳細画面に遷移 ユーザ情報 ②ログイン済み/未ロ グインを確認 Controller XHR サーバ
105.
④TODO1件取得 ③TODO詳細画面表示 ログイン済み ①TODO詳細画面を表示する ■TODO詳細画面に遷移 ユーザ情報 ②ログイン済み/未ロ グインを確認 Controller XHR サーバ
106.
④TODO1件取得 ③TODO詳細画面表示 ログイン済み ①TODO詳細画面を表示する ■TODO詳細画面に遷移 ユーザ情報 ②ログイン済み/未ロ グインを確認 Controller XHR サーバ ⑤関数実行
107.
④TODO1件取得 ③TODO詳細画面表示 ログイン済み ①TODO詳細画面を表示する ■TODO詳細画面に遷移 ユーザ情報 ②ログイン済み/未ロ グインを確認 Controller XHR サーバ ⑤関数実行
108.
④TODO1件取得 ③TODO詳細画面表示 ログイン済み ①TODO詳細画面を表示する ■TODO詳細画面に遷移 ユーザ情報 ②ログイン済み/未ロ グインを確認 Controller XHR サーバ ⑤関数実行
109.
④TODO1件取得 ③TODO詳細画面表示 ログイン済み ①TODO詳細画面を表示する ■TODO詳細画面に遷移 ユーザ情報 ②ログイン済み/未ロ グインを確認 Controller XHR サーバ ⑤関数実行 ⑥CallBack TODO1件表示
110.
④TODO1件取得 ③TODO詳細画面表示 ログイン済み ①TODO詳細画面を表示する ■TODO詳細画面に遷移 ユーザ情報 ②ログイン済み/未ロ グインを確認 Controller XHR サーバ ⑤関数実行
111.
④TODO1件取得 ③TODO詳細画面表示 ログイン済み ①TODO詳細画面を表示する ■TODO詳細画面に遷移 ユーザ情報 ②ログイン済み/未ロ グインを確認 Controller XHR サーバ ⑤関数実行
112.
④TODO1件取得 ③TODO詳細画面表示 ログイン済み ①TODO詳細画面を表示する ■TODO詳細画面に遷移 ユーザ情報 ②ログイン済み/未ロ グインを確認 Controller XHR サーバ ⑤関数実行 Ajaxエラーハンドラ ③CallBack
113.
④TODO1件取得 ③TODO詳細画面表示 ログイン済み ①TODO詳細画面を表示する ■TODO詳細画面に遷移 ユーザ情報 ②ログイン済み/未ロ グインを確認 Controller XHR サーバ ⑤関数実行 ログイン画面表示 Ajaxエラーハンドラ ③CallBack
114.
マニュアル(Qiita) http:// goo.gl/VGqHYB ジーオーオー.ジーエル/ ブイジーキューエイチワイビー
115.
マニュアル(Qiita) http:// goo.gl/VGqHYB ジーオーオー.ジーエル/ ブイジーキューエイチワイビー はじめましょう!
Baixar agora