Enviar búsqueda
Cargar
180112 nishimoto-stripes-v1
•
Descargar como PPTX, PDF
•
0 recomendaciones
•
620 vistas
Takuya Nishimoto
Seguir
アクセシブルな決済サイトの試作 with Stripe + Python + NVDA
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 15
Descargar ahora
Recomendados
Kintone + ruby + ThinReports 連携
Kintone + ruby + ThinReports 連携
sy250
初めてつくる Webアプリの開発戦略
初めてつくる Webアプリの開発戦略
Masato Koishi
Ruby and I at 神奈川Ruby会議01
Ruby and I at 神奈川Ruby会議01
Yutaka Tachibana
楽しいRails開発
楽しいRails開発
俊博 三宅
Refrection of kawasaki.rb
Refrection of kawasaki.rb
Aki Ariga
go generate 完全入門
go generate 完全入門
yaegashi
TypeScriptで辛麺を注文する(ライブコーディング)
TypeScriptで辛麺を注文する(ライブコーディング)
Tomoe Sawai
Lightning Talk
Lightning Talk
Takahiro Saeki
Recomendados
Kintone + ruby + ThinReports 連携
Kintone + ruby + ThinReports 連携
sy250
初めてつくる Webアプリの開発戦略
初めてつくる Webアプリの開発戦略
Masato Koishi
Ruby and I at 神奈川Ruby会議01
Ruby and I at 神奈川Ruby会議01
Yutaka Tachibana
楽しいRails開発
楽しいRails開発
俊博 三宅
Refrection of kawasaki.rb
Refrection of kawasaki.rb
Aki Ariga
go generate 完全入門
go generate 完全入門
yaegashi
TypeScriptで辛麺を注文する(ライブコーディング)
TypeScriptで辛麺を注文する(ライブコーディング)
Tomoe Sawai
Lightning Talk
Lightning Talk
Takahiro Saeki
[コデアル株式会社] Ruby on rails 開発環境設定勉強会(株式会社シンクスマイル主催)
[コデアル株式会社] Ruby on rails 開発環境設定勉強会(株式会社シンクスマイル主催)
codeal
RubyとRのおいしい関係
RubyとRのおいしい関係
sady_nitro
2016 01-23アジャイル札幌
2016 01-23アジャイル札幌
pandeiro245
自作アプリ7月号
自作アプリ7月号
Tsuyoshi Kinoshita
しょぼいカレンダーからアニメデータベースを作る
しょぼいカレンダーからアニメデータベースを作る
Misao X
遅刻可視化ツールの紹介
遅刻可視化ツールの紹介
mizdra
AsssetStoreに頼ってVRコースターを作ってみる
AsssetStoreに頼ってVRコースターを作ってみる
Yo Takezawa
田舎暮らし流エンジニアスキルアップ術
田舎暮らし流エンジニアスキルアップ術
Tomoe Sawai
クラウドネイティブ時代のアプリケーション運用をもっと簡単に!
クラウドネイティブ時代のアプリケーション運用をもっと簡単に!
Yasuhiro Horiuchi
9 27 yebisu-tokachi-selfish_sister_city_event_vr_conference_room
9 27 yebisu-tokachi-selfish_sister_city_event_vr_conference_room
dechidechi1
RubyからC#を扱う
RubyからC#を扱う
107steps
Hexo + Github + CircleCI + Netlifyでブログ運用
Hexo + Github + CircleCI + Netlifyでブログ運用
Masaya Morimoto
200208 osh-nishimoto-v2
200208 osh-nishimoto-v2
Takuya Nishimoto
180224 osh-after-party-nishimoto
180224 osh-after-party-nishimoto
Takuya Nishimoto
Nishimoto 170603-mruby
Nishimoto 170603-mruby
Takuya Nishimoto
MicroPython + ESP32
MicroPython + ESP32
Takuya Nishimoto
191208 python-kansai-nishimoto
191208 python-kansai-nishimoto
Takuya Nishimoto
200918 hannari-python
200918 hannari-python
Takuya Nishimoto
211120 他人の書いたPythonスクリプトをステップ実行で理解する
211120 他人の書いたPythonスクリプトをステップ実行で理解する
Takuya Nishimoto
210526 Power Automate Desktop Python
210526 Power Automate Desktop Python
Takuya Nishimoto
第32回信号処理シンポジウム「Raspberry PiとROSを使ったロボットシステム」
第32回信号処理シンポジウム「Raspberry PiとROSを使ったロボットシステム」
Ryuichi Ueda
スクリーンリーダーと点字ディスプレイの話
スクリーンリーダーと点字ディスプレイの話
Takuya Nishimoto
Más contenido relacionado
La actualidad más candente
[コデアル株式会社] Ruby on rails 開発環境設定勉強会(株式会社シンクスマイル主催)
[コデアル株式会社] Ruby on rails 開発環境設定勉強会(株式会社シンクスマイル主催)
codeal
RubyとRのおいしい関係
RubyとRのおいしい関係
sady_nitro
2016 01-23アジャイル札幌
2016 01-23アジャイル札幌
pandeiro245
自作アプリ7月号
自作アプリ7月号
Tsuyoshi Kinoshita
しょぼいカレンダーからアニメデータベースを作る
しょぼいカレンダーからアニメデータベースを作る
Misao X
遅刻可視化ツールの紹介
遅刻可視化ツールの紹介
mizdra
AsssetStoreに頼ってVRコースターを作ってみる
AsssetStoreに頼ってVRコースターを作ってみる
Yo Takezawa
田舎暮らし流エンジニアスキルアップ術
田舎暮らし流エンジニアスキルアップ術
Tomoe Sawai
クラウドネイティブ時代のアプリケーション運用をもっと簡単に!
クラウドネイティブ時代のアプリケーション運用をもっと簡単に!
Yasuhiro Horiuchi
9 27 yebisu-tokachi-selfish_sister_city_event_vr_conference_room
9 27 yebisu-tokachi-selfish_sister_city_event_vr_conference_room
dechidechi1
RubyからC#を扱う
RubyからC#を扱う
107steps
Hexo + Github + CircleCI + Netlifyでブログ運用
Hexo + Github + CircleCI + Netlifyでブログ運用
Masaya Morimoto
La actualidad más candente
(12)
[コデアル株式会社] Ruby on rails 開発環境設定勉強会(株式会社シンクスマイル主催)
[コデアル株式会社] Ruby on rails 開発環境設定勉強会(株式会社シンクスマイル主催)
RubyとRのおいしい関係
RubyとRのおいしい関係
2016 01-23アジャイル札幌
2016 01-23アジャイル札幌
自作アプリ7月号
自作アプリ7月号
しょぼいカレンダーからアニメデータベースを作る
しょぼいカレンダーからアニメデータベースを作る
遅刻可視化ツールの紹介
遅刻可視化ツールの紹介
AsssetStoreに頼ってVRコースターを作ってみる
AsssetStoreに頼ってVRコースターを作ってみる
田舎暮らし流エンジニアスキルアップ術
田舎暮らし流エンジニアスキルアップ術
クラウドネイティブ時代のアプリケーション運用をもっと簡単に!
クラウドネイティブ時代のアプリケーション運用をもっと簡単に!
9 27 yebisu-tokachi-selfish_sister_city_event_vr_conference_room
9 27 yebisu-tokachi-selfish_sister_city_event_vr_conference_room
RubyからC#を扱う
RubyからC#を扱う
Hexo + Github + CircleCI + Netlifyでブログ運用
Hexo + Github + CircleCI + Netlifyでブログ運用
Similar a 180112 nishimoto-stripes-v1
200208 osh-nishimoto-v2
200208 osh-nishimoto-v2
Takuya Nishimoto
180224 osh-after-party-nishimoto
180224 osh-after-party-nishimoto
Takuya Nishimoto
Nishimoto 170603-mruby
Nishimoto 170603-mruby
Takuya Nishimoto
MicroPython + ESP32
MicroPython + ESP32
Takuya Nishimoto
191208 python-kansai-nishimoto
191208 python-kansai-nishimoto
Takuya Nishimoto
200918 hannari-python
200918 hannari-python
Takuya Nishimoto
211120 他人の書いたPythonスクリプトをステップ実行で理解する
211120 他人の書いたPythonスクリプトをステップ実行で理解する
Takuya Nishimoto
210526 Power Automate Desktop Python
210526 Power Automate Desktop Python
Takuya Nishimoto
第32回信号処理シンポジウム「Raspberry PiとROSを使ったロボットシステム」
第32回信号処理シンポジウム「Raspberry PiとROSを使ったロボットシステム」
Ryuichi Ueda
スクリーンリーダーと点字ディスプレイの話
スクリーンリーダーと点字ディスプレイの話
Takuya Nishimoto
Similar a 180112 nishimoto-stripes-v1
(10)
200208 osh-nishimoto-v2
200208 osh-nishimoto-v2
180224 osh-after-party-nishimoto
180224 osh-after-party-nishimoto
Nishimoto 170603-mruby
Nishimoto 170603-mruby
MicroPython + ESP32
MicroPython + ESP32
191208 python-kansai-nishimoto
191208 python-kansai-nishimoto
200918 hannari-python
200918 hannari-python
211120 他人の書いたPythonスクリプトをステップ実行で理解する
211120 他人の書いたPythonスクリプトをステップ実行で理解する
210526 Power Automate Desktop Python
210526 Power Automate Desktop Python
第32回信号処理シンポジウム「Raspberry PiとROSを使ったロボットシステム」
第32回信号処理シンポジウム「Raspberry PiとROSを使ったロボットシステム」
スクリーンリーダーと点字ディスプレイの話
スクリーンリーダーと点字ディスプレイの話
Más de Takuya Nishimoto
221217 SwiftはPythonに似ている
221217 SwiftはPythonに似ている
Takuya Nishimoto
220427-pydata 統計・データ分析 特集
220427-pydata 統計・データ分析 特集
Takuya Nishimoto
220126 python-datalake-spark
220126 python-datalake-spark
Takuya Nishimoto
211020 すごい広島 with OSH 2021.10
211020 すごい広島 with OSH 2021.10
Takuya Nishimoto
210917 オープンセミナー@広島のこれまでとこれから
210917 オープンセミナー@広島のこれまでとこれから
Takuya Nishimoto
210911 これから始める電子工作とMicroPython
210911 これから始める電子工作とMicroPython
Takuya Nishimoto
210728 mpy
210728 mpy
Takuya Nishimoto
210630 python
210630 python
Takuya Nishimoto
210428 python
210428 python
Takuya Nishimoto
200429 python
200429 python
Takuya Nishimoto
200325 flask
200325 flask
Takuya Nishimoto
191101 nvda-sightworld-nishimoto
191101 nvda-sightworld-nishimoto
Takuya Nishimoto
191114 iotlt-nishimoto
191114 iotlt-nishimoto
Takuya Nishimoto
191030 anna-with-python
191030 anna-with-python
Takuya Nishimoto
190916 nishimoto-nvda-pyconjp
190916 nishimoto-nvda-pyconjp
Takuya Nishimoto
190925 python-windows
190925 python-windows
Takuya Nishimoto
190731 chalice
190731 chalice
Takuya Nishimoto
190719 nishimoto nvda talk
190719 nishimoto nvda talk
Takuya Nishimoto
PCN 190630 v2
PCN 190630 v2
Takuya Nishimoto
190516 nishimoto
190516 nishimoto
Takuya Nishimoto
Más de Takuya Nishimoto
(20)
221217 SwiftはPythonに似ている
221217 SwiftはPythonに似ている
220427-pydata 統計・データ分析 特集
220427-pydata 統計・データ分析 特集
220126 python-datalake-spark
220126 python-datalake-spark
211020 すごい広島 with OSH 2021.10
211020 すごい広島 with OSH 2021.10
210917 オープンセミナー@広島のこれまでとこれから
210917 オープンセミナー@広島のこれまでとこれから
210911 これから始める電子工作とMicroPython
210911 これから始める電子工作とMicroPython
210728 mpy
210728 mpy
210630 python
210630 python
210428 python
210428 python
200429 python
200429 python
200325 flask
200325 flask
191101 nvda-sightworld-nishimoto
191101 nvda-sightworld-nishimoto
191114 iotlt-nishimoto
191114 iotlt-nishimoto
191030 anna-with-python
191030 anna-with-python
190916 nishimoto-nvda-pyconjp
190916 nishimoto-nvda-pyconjp
190925 python-windows
190925 python-windows
190731 chalice
190731 chalice
190719 nishimoto nvda talk
190719 nishimoto nvda talk
PCN 190630 v2
PCN 190630 v2
190516 nishimoto
190516 nishimoto
180112 nishimoto-stripes-v1
1.
アクセシブルな決済サイトの試作 with Stripe +
Python + NVDA 西本 卓也 nishimotz@gmail.com / @24motz 2018-01-12 1
2.
pcn-hiroshima.connpass.com 2 第3回 1月27日(土曜) 会場 fabbit
広島駅前
3.
すごい広島 with Python •
2017年4月から毎月の最後の水曜日の夜に開催 • 2017年3月 Python Boot Camp in 広島 • 2016年 / 2015年は PyCon mini Hiroshima を開催 • Python に興味がある人が集まって情報交換 • Slack PyConJP Fellow #hiroshima • http://pyconjp-fellow.herokuapp.com/ • 今年は PyCon mini Hiroshima をやりたい 3
4.
NVDA / NVDA日本語チーム 4
5.
アクセシブルな決済サイト • 要求 • スクリーンリーダー利用者がちゃんと使える •
具体的には • iOS : Safari + VoiceOver • Windows : Firefox + NVDA • 特定の環境向けのワークアラウンドはしない • アクセシビリティの Web 標準に準拠 5
6.
決済プラットフォームの評価 • テストモード • ユーザー環境と同じ条件の検証が不可欠 •
決済を実行してみないと試せない、では困る • UIやライブラリの検証 • サイトに簡単に組み込める=問題があっても自力で直せない • 最初はよかったのに突然悪くなることもあり得る • 外部ライブラリを動的に読み込んでいる場合 • 場合によってはあきらめて自前で作る 6
7.
Stripe Checkout • https://stripe.com/docs/checkout/tutorial 7
8.
Python + Flask 8
9.
Tabキーでフォーカス移動すると • モーダルダイアログの外にも行ける(実行もできる) • ダイアログのクローズにフォーカスを移動できない 9
10.
決済情報を保存する 10
11.
コーディングWebアクセシビリティ • 6-3「ダイアログ」注意点 • モーダルダイアログが開いている間は その他の要素を操作させない •
ブラウザのアドレスバーなどに フォーカスを移動できるように • ダイアログを閉じるときに、 そのダイアログを呼び出した要素に フォーカスを戻す 11
12.
Stripe Elements (v3) •
https://stripe.com/docs/stripe-js • https://stripe.com/elements 12
13.
試作サイト • https://stripe.com/docs/stripe-js/elements/quickstart 13 <form action="/pay"
method="post" id="payment-form"> <div class="form-row"> <label for="card-element">クレジットカード情報を入力してください</label> <div id="card-element"></div> <div id="card-errors" role="alert"></div> </div> <button type="submit">送信する</button> <input type="hidden" name="stripeToken" id="stripeToken" value="" /> </form>
14.
クライアント / サーバーサイド 14 var
form = document.getElementById('payment-form'); form.addEventListener('submit', function(event) { event.preventDefault(); stripe.createToken(card).then(function(result) { if (result.error) { // handle error } else { document.getElementById('stripeToken').value = result.token.id; form.submit(); } }); }); @app.route('/pay', methods=['POST']) def pay(): # handle login / logout / email stripeToken = request.form['stripeToken'] amount = 1000 customer = stripe.Customer.create( email=email, source=stripeToken ) charge = stripe.Charge.create( customer=customer.id, amount=amount, currency='jpy', description='Flask Charge' ) return render_template('pay.html', ...)
15.
まとめ • Stripe looks
good to me • TODO • VoiceOver 検証 15
Descargar ahora