nikkie-ftnextの日記

イベントレポートや読書メモを発信

イベントレポート | 「Python入門者向けハンズオン」にメンター参加してきました #pynyumon

はじめに

だんないよ、nikkieです。
5/12に「Python入門者向けハンズオン」でメンターに挑戦してきました。

Python入門者向けハンズオン #7 - connpass

 

メンター参加の経緯

2017年11月くらいからPythonを趣味ではじめ、2018年には業務でも使い始め、
入門者から中級者へ進んでいるかなと感じています。
ここまで来られたのは、Pythonのコミュ二ティでいろいろ教えていただいたからです。

入門者から多少進んでいるだけの自分からも
入門者の質問に答えられることはきっとあると考えてメンターとして申し込みました。
自分が教えていただいたことを新しく入ってきた人にも伝えていくことで
コミュニティが回っていくんじゃないかなと考えています。
 
入門者向けハンズオンは過去に参加していたものの、スクレイピングについて予習して臨みました。

https://gist.github.com/ftnext/f44b4bc5dd4c21cc74e223c01ae47fa6

 

感想

  • 月並みですが、教える側のメンターもめちゃくちゃ勉強になりました。

    例えば「importとfrom ... importって何が違うんですか？」と聞かれて、うまく説明できず

    人に説明できるレベルでは理解していなかったと痛感しました。

  • 答えられない質問は他のメンターの方に聞いてサポートをいただきました。

    メンターの皆さんにも支えていただき、感謝です。ありがとうございました。

 

メンター参加して学んだこと

  • VSCodeの統合ターミナルが便利（Atomと違って拡張追加不要）
  • pyenvはディレクトリごとにPythonのバージョンを分けられるが、
    仮想環境も必要（pyenv-virtualenv）
  • FizzBuzz：狭い条件（15で割り切れる）ほどif文のはじめでチェックする
  • スクレイピング実行中のコードの変数の値を見るにはpdbがある
  • requests.getでページが取れたことはstatus_codeで判断できる
  • BeautifulSoupのget_textとtextは同じ

VSCode導入と、pdb試すのは近日中にやってみます。

「robot.txtを確認してスクレイピングしていいかを判断する」という
スクレイピングのお作法を懇親会で教えていただきました。
 

おわりに

業務で使うためのスクレイピングのプログラムや
ご自身が普段から見ているサイトをスクレイピングするプログラムを作っている方がいらっしゃいました。

中にはブログでイベントレポートをアップしている方もいらっしゃいます！

m4usta13ng.hatenablog.com


ハンズオンの後も作ってみたよという方は
数カ月後にある「入門者の集い」でLTしていただければと思います。
アウトプットが勉強になることは保証します。

入門者ハンズオン出席者の皆さま、運営の皆さま、
どうもありがとうございました。半日お疲れさまでした。

イベントレポート | 第27回 Pythonもくもく会 #mokupy （Azure VMにFlaskアプリをデプロイ）

はじめに

だんないよ、nikkieです。
4/30の#mokupyでAzureのVM（CentOS）に
FlaskアプリケーションをデプロイしてHello Worldしてきました。

 

勉強会の概要

この勉強会について

主にPythonに関するやりたいことを各自持って来て、進めていく感じのゆるい会です。 もくもく開発をして情報共有したり、交流を深めることができればと思っています。 是非お気軽にご参加ください。（Python初心者の方でも大歓迎です！）

Pythonもくもく会御三家の一つ#mokupy。（※一個人の認識です）
GW開催ということもあってか盛況でした。
今回はお昼に食べたハンバーガーが美味しかった・・・（しみじみ）
 

取り組んだこと

以下の記事を参考に、AzureにLinuxのVMを構築し、
Hello WorldするFlaskアプリケーションをApacheとmod_wsgiとで動作させました。
（以降では「30分記事」と呼びます）

qiita.com

https://twitter.com/ftnext/status/990861840501489664

https://twitter.com/ftnext/status/990861840501489664

 

業務でPaaSにデプロイしたところ、POSTするエンドポイントが500内部サーバエラーとなりハマっています。
代替手段が必要そうなので予習してみました。

 

VM作成

30分記事とバージョンを揃えるためCentOS6.8で検索。
（CentOSは6系と7系でコマンドが変わる認識。大きな読み替えは無しで進めた方が成功しやすいと考えた。）
D2s_v3 Standardで動くものがあったので、費用を抑えるために
「CentOS-based 6.8 HPC　Rogue Wave Software (formerly OpenLogic)」を選択。

▼作成手順の参考

Azureに仮想マシン(CentOS)を構築する | OSS on Azure 技術ブログ

 

環境構築

mod_wsgiについて./configureするところですが、
Pythonを/usr/local/bin/python3.6にインストールしているので、
赤字のように修正が必要だと思います。

./configure --with-apxs=/usr/sbin/apxs --with-python=/usr/local/bin/python3.6

（修正せずに進めたところ、/usr/local/bin/python3: No such file or directory というエラーが出た）

 

Apacheとmod_wsgiの設定
SSLまでやる余力がなかったため、30分記事を流用できず、Apacheのconfで一番苦労しました。
（mod_wsgiについてはadapter.wsgiを使いました）
Apacheのconfはmod_wsgiのドキュメントをもとにしました。
（Flaskのドキュメントにもwsgi関連の説明ページがあったが、
　簡略化されすぎていてほとんど初めてconf書く人間には理解できなかった。。）
 
ドキュメントの通りに書いても以下のエラーが出ていたのですが、
Invalid command 'WSGIScriptAlias', perhaps misspelled or defined by a module not included in the server configuration  
mod_wsgiがロードされていないらしいので、以下を参考に LoadModule の行を追加しました。

[Python] mod_wsgiを使ってPython3.6をApacheで動かす（CentOS6系） - YoheiM .NET

（なぜ30分記事と違ってロードされないのかは不明）

 

落とし穴：Azureのネットワークセキュリティグループの設定

Apacheのconfのエラーが消せたと思ったら、次はHello Worldのページが表示されない。。
error_logにも出てこないので、リクエストがVMまで届いていない感じ。
→80番ポートへのHTTPアクセスを許可する必要がありました。

Azure Portal を使用した VM へのポートの開放 | Microsoft Docs

 

束の間の安息と次なる課題

Hello Worldできたので「やったか！？」と思いきや
Hello Worldする別のGETアクセスポイントを追加すると500エラー。

これはブラウザからのアクセスによるのではなく、pythonコマンドでファイルを実行しても発生する。

今回は時間切れなので、引き続き取り組んでいきます。

 

感想

  • 環境構築がブラックボックスすぎて、エラーが自己解決できない不安あり。
    （アクセスポイント増やしたところFlaskアプリが動かなくなったのは
    　環境構築に起因した問題でないことを祈るのみ）
  • VM作り直すたび、./configureからmakeするの大変だよなあ。（何回も繰り返したくない。。）
    →Docker使えばいいんじゃないか？　Dockerに俄然興味出てきた。

 

ハマっている事象：WebAppsのFlaskにPOSTすると500エラー

最後にVMで構築することになった経緯を書いておきます。

PythonのWebサーバを立てよう
→VM構築するよりPaaSの方が構築が簡単らしい
→チュートリアルのとおりにやったら短時間でHello Worldできた

Azure に Python Web アプリを作成する | Microsoft Docs

→POSTのエンドポイント追加してみたら内部サーバエラー

この内部サーバエラーが解決できない。。

  • 何が原因かがわからない。（スタックトレースが見られていない。期待しているものは見られないのかもしれない）
  • Kuduを使うとIISのスタックトレースは見られた。IISはまったく経験がなく提示している情報がつかめない。

今回診ていただいたところ、IIS関連（web.config）の設定ではないかという話ですが、
POSTだけ500エラーという挙動はやはり謎。
診ていただきありがとうございました。

 

もくもく会参加者の皆さま、1日お疲れさまでした&ありがとうございました。

 
 
 

イベントレポート | Global Azure Bootcamp 2018@Tokyo #jazug

はじめに

だんないよ、nikkieです。
4/21は「Global Azure Bootcamp 2018」に参加してきました。
4/22のブログ執筆時点で確認したセッションスライドやLTスライドをまとめます。
セッション中のメモをレポート記事にするときに参照する意図です。
（直近の優先事項が完了次第、聴講セッションにフォーカスしたレポートを公開する予定です）

 

勉強会の概要

Global Azure Bootcamp 2018@Tokyo - connpass

Global Azure Bootcampとは？

Global Azure Bootcampとは世界中の Azure コミュニティが世界180ヶ所以上で一斉に開催するMicrosoft Azureのコミュニティイベントです。

 
Azureは業務で使うことが多いです。
自分の経験がVMやAzure MLなど一部の分野に偏っているので、
Azureの全体感がつかみたくて参加しました。
 

感想

  • LogicApps、気になります！
    コーディング不要で色々なサービスを連携させられるそうなので、ライフハック的なことができそう。
    好きなアニメの公式アカウントのツイートを見逃し、こんなイベントあったのか。。orzってなることが多いので、
    定期的にチェックしてSlackに通知する機能がほしかったところ。
    課題解決優先でLogicAppsでまず組み、素振りとして自力実装という進め方でやってみよう。
    LogicAppsで扱えるものの一部にAzure MLやCognitive Servicesがあり、
    いままで触っていたのはAzureのごくごく一部なんだと実感。
  • アーキテクチャセンターのドキュメント確認したことない状態で業務でAzure触ってきたとか恐ろしや。
    読めばAzureをもっと効果的に使い倒せそう
  • 月100ドル、3ヶ月分のクーポンいただけるんですね！ LogicApps試します！！
    大盤振る舞いにただただ感謝 人

 

聴講したセッションのスライド

www.slideshare.net

 

www.slideshare.net

 

www.slideshare.net

 

www.slideshare.net

 

 

聴講していないセッションのスライド

www.slideshare.net

 

www.slideshare.net

 
 

LTスライド

www.slideshare.net

 

speakerdeck.com

 

speakerdeck.com

 

kamoppusan.hatenablog.com

 

s2terminal.hatenablog.com

 

▼seosoftさんのLTで言及されていた「Cognitive Services と Bot Service で作る業務アプリケーション (2018 年 4 月版)」のダウンロードリンク

http://download.microsoft.com/download/9/7/8/978ED1D1-A670-47A7-B478-5C0FEC542204/Hands-on-12-CognitiveServices_and_BotService_for_InternalApp.pdf

 

運営の皆さま、登壇者の皆さま、参加者の皆さま、
貴重なお話とそれを聞く機会をありがとうございました。
長時間のブートキャンプお疲れさまでした。

イベントレポート | (第87回)Python mini Hack-a-thon #pyhack

はじめに

だんないよ、nikkieです。
土曜日は#pyhackに参加してきました。（3月は#rettypy優先したので2月以来の参加）

 

勉強会の概要

(第87回)Python mini Hack-a-thon - connpass

この勉強会について

基本的に毎月開催です。スプリントのゆるい版みたいな感じで各自自分でやりたいことを持ってきて、勝手に開発を進めています。参加費は無料です。 初めての方も常連さんもぜひご参加ください。

独学している身としては猛者同士のちょっとした会話からも勉強できる場です。
なるべく毎回行きたいなあと思っています。

取り組んだこと

『仕事ではじめる機械学習』の7章（映画のレコメンドの章）を写経しました。
1月から3ヶ月ほど弊社にてレコメンドシステムの開発に携わっていたので、
振り返って総括するために写経することにしました。（どうやるべきだったか知りたかった）
開発ではAzure Machine LearningでMicrosoft謹製のレコメンドアルゴリズムを使って実装したのですが、
レコメンド予測モデルがブラックボックスすぎるので理解を深めたいという気持ちもありました。
 
仮想環境作って写経スタートと思いきや。。
pip installに失敗するエラーが発生。（pipのバージョンも上げられず、原因不明）
かしゅーさんに診ていただきつつ、Python3.6系を導入してpip installはできるようになりました。
かしゅーさん、ありがとうございました！
venvに代えてvirtualenv使おう。pipのバージョンアップも自動で適用されるところに魅力を感じる。
 

写経

  • 推薦システム構築に使うライブラリ：fastFM
  • ユーザIDと商品IDはカテゴリ変数として扱う。（→One-hot Encoding）
  • データは3種類
    ユーザ情報（例：ユーザID=U001の名前はnikkie、男性、、）
    レーティング情報（例：ユーザU001が映画M12345を☆5（＝最高評価）と評価）
    映画情報（例：M12345はタイトルが『さよ朝』、公開が2018年、、）
  • pandasを使ってデータを探索
    pd.mergeでDataFrameの同じ名前の列同士を内部結合。
    古い映画ほど評価データの数が多い。（古い映画ほど多くの人が評価）
    映画ごとの平均評価を出す上では、評価の数が100以上のようにフィルターをかける必要あり
    ユーザ1人あたりの評価した映画数の中央値は65本（平均が106本なので、数多く見ている人に引っ張られている）
    ユーザ1人あたりの評価値の平均は25%〜75%が☆3台：（▲）
    →平均評価が高い映画を評価しているユーザの属性など、もっと探索は深められそう
  • アルゴリズムはMCMCを採用（ハイパーパラメタが少ないのが長所）
    レーティング情報だけを用いる
    イテレーション回数を300までで変化させ、平均二乗誤差やハイパーパラメタの様子を見ると、100回程度で収束している
    行列を圧縮する次数rankを変化させて平均二乗誤差（性能指標）を見ると、rank=32以降は収束している（ユーザの映画への評価値を予測しているので、平均二乗誤差が求まる）
    （▲）から、ユーザごとに平均評価値にばらつきがあったので標準化する
  • イテレーション回数とrankが決まった後は、ユーザ情報と映画情報も加える
    加える特徴量の数パターン用意し、平均二乗誤差を比較する
    →ユーザの年齢、性別、評価した年、映画の公開日を加えるとよさそう
  • pandasでの処理の書き方勉強になる
    movie_stats = lens.groupby('title').agg({'rating': [np.size, np.mean]})
    list(filtered_lens.drop('rating', axis=1).T.to_dict().values())
    lens['date'].apply(str).str.split('-').str.get(0)
  • Cell 21に不要なコードありませんか？
    （不要と思う点1箇所目）同内容の繰り返し
    lens['year'] = lens['date'].apply(str).str.split('-').str.get(0)
    lens['release_year'] = lens['release_date'].apply(str).str.split('-').str.get(2)
    （不要と思う点2箇所目）y_predに代入していないfm.fit_predict、不要じゃないでしょうか？
    fm.fit_predict(X_mf_train, y_mf_train_norm, X_mf_test)
    MCMCでは学習と予測をセットで行うfit_predictメソッドしか提供されていないそうなので、
    上記の箇所とy_predへの代入の箇所で全く同じことを重ねて行っている認識。
    指摘箇所を削ったところ、結果は変わらずに待ち時間は減った（ただし体感）。
  • p.156に誤植発見（Cell21が正しい）
    誤：y_mf_train_norm = scaler.fit_transform(np.array(y_mf_train)).ravel()
    正：y_mf_train_norm = scaler.fit_transform(np.array(y_mf_train).reshape(-1, 1)).ravel()
  

感想

人に説明できるレベルでは理解できていない感じ。もう少し取り組んでみる。

pandasの書き方は大変勉強になりました。使いこなせるよう自分でもこのデータ探索してみよう。

fastFMはチュートリアルがあるようなので、手を動かしてみたい。

Tutorials — fastFM 0.2.10 documentation

Azure MLのレコメンドのサンプルデータをfastFMで動かして
同じ結果を得られることを確認してはじめて脱ブラックボックスかなと思う。

 

nobolisさんの三角グラフ、画像をRGBで表すのによさそう。

 

運営及び参加者の皆さま、1日どうもありがとうございました！

 

LT報告 | 『Djangoにモザイクアート』 ＠みんなのPython勉強会#34 #stapy

はじめに

だんないよ、nikkieです。
みんなのPython勉強会#34でモザイクアート作成のソースコードを
Djangoで動かせるようにしたというLTをしてきました。
イベントレポートは近日中にあげます。

 

LT報告：Djangoにモザイクアート

gitpitch.com

かいつまんで言うと。。。

  • モザイクアートとは：画像を寄せ集めて別の1枚の画像を作る（下の関係資料参照）
  • これまでPillowという画像処理のライブラリを使ってPythonで実装していた。今回それをDjangoで動かしてみた。
  • Djangoは初めてだったので、まずモザイクアートの一覧を表示することを目標にし、徐々に機能を追加していった。
  • 表示機能はDjango Girls Tutorialを読み替えながら進めた。テンプレートの<img>タグを動的に作る際に get_static_prefix を使うのがポイントだった。
  • 機能追加としてモザイクアートが作成できるフォームボタンを実装した。
    （押すとモザイクアートが作成されてから、モザイクアート一覧が再表示される。そのため作ったばかりのモザイクアートが見られる）
  • フォームにモザイクアートにする画像を選べるプルダウンを実装した。フォームは引き続き機能追加していく
  • Djangoを初めて触った感想としては「賢い」に尽きる。設定不備があるとき、実行するべきコマンドがコンソールに出力される
  • Django Congressにいけなくなった人がいらっしゃったらチケット譲っていただけるとうれしいです。

 

関係資料

speakerdeck.com

 

感想

Fintech回にDjangoネタを持っていったのは選択ミスのような気もしましたが、
Pillowの頃から知っている方からフィードバックもいただけ、ありがたかったです。

NaoY_pyさんのPyCon JPスタッフ募集LT、コミュニティに多少なりとも返していきたいので応募考えてみよう。

[ GitPitch ] NaoY-2501/GitPitch-Slides/master

LTされたアプリ、UIまわり（ルビの出方など）がきれいだった！
3万語をレベル分けして辞書作ったのはすごすぎる。
（ディープラーニングで5万枚の画像を一人でアノテーションして、誤差5.1％達成した話を思い出す）

【新感覚】辞書を引かずに英語がサクサク読めちゃうアプリ『英読』がすごい！

 

stapy運営の皆さま、出席者の皆さま、LTの機会をいただきありがとうございました。
100人参加者の場でLTできる機会はそんなにないので、貴重な機会です。

継続してLTできるよう個人開発を頑張ります。

イベントレポート | 第26回Pythonもくもく会 #mokupy

はじめに

だんないよ、nikkieです。
#mokupyに行ってもくもくしてきました。

 

勉強会の概要

第26回 Pythonもくもく会 - connpass

この勉強会について

主にPythonに関するやりたいことを各自持って来て、進めていく感じのゆるい会です。 もくもく開発をして情報共有したり、交流を深めることができればと思っています。 是非お気軽にご参加ください。（Python初心者の方でも大歓迎です！）

 

取り組んだこと

来週の#stapyでLTしようと、「Djangoにモザイクアート」を進めていました。

  1. モザイクアートにする画像を指定するフォーム作成
  2. フォームを動かすためにモザイクアートのソースコード修正
  3. LT準備（スライドに盛り込む項目考える）

 

フォーム作成：済

Django Girls Tutorialには「Django フォーム」のセクションがありましたが、
フォームからDBにレコードを入れたいわけではないので、HTMLタグでformを作りました。
（今にして思うとCakePHPみたいなフォームヘルパーがあるのか調べてみればよかったな）

やりたいことはプルダウンからモザイクアートにしたい画像を選択して
サブミットボタンを押すとその画像でモザイクアートが作成されるようにすることです。

フォームのactionにURLが紐づくビューのメソッドには
request.POSTという形式でPOSTの内容が渡ってきます。
指定された画像の取得は意外と簡単でした。（request.POSTをdictのように扱えばよい）

（余談）プルダウンの内容は決め打ちにしたのですが、
ビューでモザイクアート対象画像の一覧を取得、
それをテンプレートに渡し、テンプレート内でfor文でプルダウンのタグを作る。
これで動的なプルダウンが実現できるんじゃないかと帰り道に気づきました。

 

モザイクアートのソースコード修正：済

新たな技術的負債を発生させながら、内在する技術的負債に取り組んでいました。。

今回返済した技術的負債は、モザイクアートにする画像と、
作成したモザイクアートのファイル名をソースコード内に直接書いているというものです。
以下のように修正しました。

  • モザイクアートにする画像は引数で渡せるようにする
  • 作成したモザイクアートはファイル名に日時情報を入れて区別できるようにする
    （作成したモザイクアートが全て同じファイル名だとDjangoで一覧にしたときにまずい。モザイクアートどうしは区別する必要あり）

前者の修正は既に終わっていたため、もくもく会中は後者の作業が主となりました。

Bugfix/#21 モザイクアートのファイル名の区別 by ftnext · Pull Request #24 · ftnext/mosaic-art-python · GitHub

3パターンのモザイクアート作成処理が統合できていない
（平均の色を使う場合、中央の色を使う場合、一番使われている色を使う場合それぞれのファイルが存在している）
という超弩級の技術的負債（DRY原則違反）がソースコードにあります。
今回の修正も同一の関数をやむなく各ファイルに埋め込む形になってしまいました。。

この負債を早く返済しないとソースコードがメンテナンスしにくくていけないです。。
（釈迦に説法だと思いますが、DRY原則はマジで守りましょう）

本日の作業後のDjangoにモザイクアートのソースコードはこちらです。

GitHub - ftnext/mosaic-art-on-django at develop

 

LT準備：途中

急ぎGitPitchでスライドを作り、成果発表で練習LTしました。
staticフォルダの配置の情報が2つ見つかったという質問を盛り込んだところ
好みの問題だが、プロジェクトの下に1つだけ設けることが多いという回答をいただきました。
独学の身には参考になります。ありがとうございます。

3日まで日がないので、明日完成度80%まで持っていきます。

 

感想

お昼のときにPythonもくもく会にはそれぞれ色があるという話を聞いてなるほどと思いました。
個人的には

  • #pyhack：もくもく中、猛者の会話が多いが、勉強になるのでありがたい。作業しつつも耳は研ぎすませている状態がベター
  • #rettypy：もくもく中の会話は中程度。最初の自己紹介で困っていることを共有するので教え合いやすい
  • #mokupy：もくもく中の会話が少なめ。皆さん作業に没頭している感じ

というようなグラデーションかなあと思います。それぞれ色があるのも私は好きです。

 

FlaskとKerasでNBLのプレーヤー分類を作った方がいらっしゃいました。

The Keras Blog - Tutorials

こちらかな？ pillow使ってるようなので興味あります。

 

紹介（宣伝？）されたDjango連載など時間を作って読まなくちゃ。

 

もくもく会関係者と出席者の皆さま、本日はありがとうございました。1日お疲れ様でした。

イベントレポート | MANABIYA DAY2　2限「2018年のWeb標準」#MANABIYA

はじめに

だんないよ、nikkieです。
MANABIYAはもう1週間前なんですね。
2日目のメルカリ 泉水さんによる「2018年のWeb標準」の聴講メモです。

 

講義の概要

【国内最大級のエンジニア向け技術祭典】MANABIYA -teratail Developer Days-

進化を続けるWebプラットフォーム、
それを支えるのがHTML、CSS、JavaScriptなどをはじめとしたWeb標準です。
本セッションでは昨今のWeb標準の変遷を振り返ると共に、
今後のWebアプリケーションの動向を予測します。

機械学習に取り組む前はサーバサイドに携わっていたのでWebの話を聞きに行きました。
屋上から移動してきたら教室はすごい人数でしたが、床枠で聞けました（笑）

2018年のWeb標準

speakerdeck.com

私のまとめツイートを掘り下げていきます。

 

Service Worker
  • ブラウザにインストールされるWeb Worker
    キャッシュがあったらキャッシュを返す、なかったらネットワークへ。
    オフライン対応が注目されるが、それだけではない
  • JSで実装できるネットワークプロキシ
  • オンライン復帰を検知できる
    チャットアプリなどでユーザには送信完了と表示し、裏でネットワークが復旧したら送る
  • プッシュデータ受信できる
    生放送アプリでの利用例 ↓

developers.cyberagent.co.jp

Service WorkerはPWA（Progressive Web Apps）にも寄与する。

Chromeは対応済み。SafariはiOS11.3から。Firefox、MicrosoftもPWA対応に追従。

 

Web Components

HTML要素を自分で定義できる。CSSのスコープを汚染しない

  • Custom Elements：HTML要素を自分で定義できる
  • Shadow DOM：カスタムHTML要素がグローバルスコープに出ないようにする
  • ES Modules：再利用のための外部ファイル（export、import）

Web Componentsを使えば、ビルドがシンプルになる。（Reactなどのライブラリは多段ビルドを要求する）

描画パフォーマンスが気になる場合はlit-html。差分描画を担ってくれる

github.com

Chrome、Safariが対応しているのでモバイルWebでは使える。

泉水さんブログ：

1000ch.net

 

Web Payments

ECサイトでクレジットカード情報を扱わない決済を可能にする。（スライド55, 56）

  • ECサイトから決済代行業者の画面に遷移する従来のユーザ体験と比べてストレスレス。
    トークンはカード情報ではないので、万が一漏れてもリスクは小さい
  • フォームUIの統一＝決済のユーザ体験を統一

ChromeとEdgeは対応済み。SafariはiOS11.3から

参考：

クレジットカード取引におけるセキュリティ対策の強化に向けた実行計画2017（「実行計画2017」）を取りまとめました～国際水準のクレジットカード決済環境の整備を進めます～（METI/経済産業省）

 

感想 

久々にWebの話を聞いたら浦島太郎状態でした。こんなに進んでいるとは。。

最近PWAの動きが出てきているのはSafariがService Worker対応するからなんですね。
Web Componentsは触ってみたいです。（GitPitchにも載せられたりしないかな）
Web Paymentsを聞いて、AppleやGoogleを通さずに支払いを受ける仕組みを作ろうとしているという話（2017年5月のHTML5感。）を思い出しました。

積読リスト

Service Workerってなんなのよ (Service Workerのえほん) - Qiita （2017年1月なので古いかも）

ライブラリを使わずここまでできる！Web Componentsで近未来のフロントエンド開発 | ヌーラボ

 

泉水さん、並びにMANABIYA運営スタッフの皆さま、
貴重なお話とそれを聞く機会をありがとうございました。