概要 Suica、PASMO、おサイフケータイに代表されるFeliCaカードには一意のIDとしてIDmという数値が割り当てられている。USB接続のFeliCaリーダーを使ってそいつを読む。 デモ デモページはこちら→ https://saturday06.github.io/webusb-felica/demo.html 注意：チャージ済みだったり、オートチャージが有効なカードでは絶対に実験しないでください。勝手に決済が発生してお金が無くなっても責任はとれません。 ソースはこちら　https://github.com/saturday06/webusb-felica/blob/gh-pages/demo.html だいたい、下記のような感じで送受信関数を作っておいて async function send(device, data) { let uint8a = new Uint8Arra

RFC 6749 (The OAuth 2.0 Authorization Framework) で定義されている 4 つの認可フロー、および、リフレッシュトークンを用いてアクセストークンの再発行を受けるフローの図解及び動画です。動画は YouTube へのリンクとなっています。 English version: Diagrams And Movies Of All The OAuth 2.0 Flows 追記 (2019-07-02) 認可決定エンドポイントからクライアントに認可コードやアクセストークンを渡す方法については、別記事『OAuth 2.0 の認可レスポンスとリダイレクトに関する説明』で解説していますので、ご参照ください。 追記（2020-03-20） この記事の内容を含む、筆者本人による『OAuth & OIDC 入門編』解説動画を公開しました！ 1. 認可コードフロー RF

はじめに 過去三年間、技術者ではない方々に OAuth（オーオース）の説明を繰り返してきました※1,※2。その結果、OAuth をかなり分かりやすく説明することができるようになりました。この記事では、その説明手順をご紹介します。 ※1：Authlete 社の創業者として資金調達のため投資家巡りをしていました（TechCrunch Japan：『APIエコノミー立ち上がりのカギ、OAuth技術のAUTHLETEが500 Startups Japanらから1.4億円を調達』）。Authlete アカウント登録はこちら！ ※2：そして２回目の資金調達！→『AUTHLETE　凸版・NTTドコモベンチャーズ・MTIからプレシリーズA資金調達』(2018 年 2 月 15 日発表) 説明手順 （１）ユーザーのデータがあります。 （２）ユーザーのデータを管理するサーバーがあります。これを『リソースサーバ

想定読者 Dockerについてものすごくざっくり知りたい人 ハイパバイザ型とかホスト型とかそう言う話は調査済みもしくはあとで調べればいいと思っている人 Dockerとは Dockerを使えば、OSとアプリがインストールされた環境を閉じ込めて保存しておき、いつでもその環境を立ちあげることができます。"perlをインストールしたUbuntu"とか"JavaとpythonをインストールしたCentOS"みたいな色々なパターンを簡単に作成して保存・立ち上げが可能です。 用語 なるべく事前知識がなくても理解できるようにDockerの用語を冷凍チャーハンに例えて説明します。 ＊厳密性に関してはご容赦ください ファイル系 用語 説明 例えると

Nuxt.jsで自己紹介サイトを作りました。 https://nitta.studio/ 見ていただくと分かる通りアニメーションをしまくったのですが、、 https://t.co/CXj31medDj Nuxt.jsで自己紹介サイト作りました。NetlifyホスティングでPWA対応してます。 いろいろ自分のイカれた略歴など晒しました。宜しくお願いします。 — 新田聡一郎 (@soichiro_nitta) 2018年4月26日 VuexとVue.jsのウォッチャをつかって、 イベントハンドリング ステート変更 ウォッチャで検知 複数のコンポーネントでアニメーション発火🔥 のような書き方をしたら最高だったので、ご紹介です。 アニメーションって、どこにどの処理書けばいいのか困りませんか？ 凝ったものを実装するとめちゃめちゃなコードになりがちですよね... しかーし！Vue.jsのデータ駆動と

2020/01/23追記: これはすでに古い情報です。ESLintとPrettierは同時に使わないのが今の推奨設定です。最新の情報は以下のところにあります。 https://future-architect.github.io/typescript-guide/baseenv.html 以下は過去の情報です PySpa統合思念体です。 go fmt便利ですよね。設定なしで言語が定めるルールで一発でやってくれるので良いですね。で、JavaScriptでは歴史的経緯もあって、フォーマットの流派はいろいろあります。 インデントはスペース2/4、ハードタブ 文字列にはシングルクオート使う派（英語キーボードだとシフトキー押さなくていい） 末尾のセミコロンは必須・省略 そのためカスタマイズ可能なフォーマッターが必要となります。カスタマイズの柔軟性や歴史的経緯や新しい文法への対応などで、いくつかのツー

ピクシブ株式会社 Advent Calendar 2017 の 23 日目担当の syoichi です。 去年の 2 月にエンジニアとして入社しました。去年の Advent Calendar の時から変わらずプレミアムチームに所属しており、主に PHP / JavaScript / CSS で開発しています。直近では pixiv の決済基盤のシステムで Scala に触れる機会もありました。 さて、今回は現在各ブラウザーで開発中で、Edge で先行実装され、Firefox でリリースの目処が立ちつつある、Web Authentication API について簡単に調べてみました。 何ができるのか 端的に言うと、FIDO 2.0 に基いて、FIDO 対応デバイスによって指紋や顔などを照合する生体認証が Web から利用できるようになります。 活用例としては、生体認証によってパスワード無しで素

はじめに Google Apps Script (GAS) は Web ブラウザ上の JavaScript とも Node.js とも環境が異なります。その違いや、 GAS 特有の機能を理解するとさらに開発が捗るので、それらをこの記事で紹介しようと思います。 Tokyo GAS で 5 分 LT した内容です。 スライドはこちら > GAS ビギナーが GAS を使いこな すために知るべきこと 10 選 ※より網羅的で最新の情報を得たい方は DevFest 2020 の登壇動画 Google Apps Script 入門 2020 をご覧ください。 1. ローカル環境で開発する GAS を好きなエディタで開発したり、ローカルで開発したものを github に上げたりしたくなる。 Google ブログの記事 Apps Script による高度な開発プロセス で紹介されているが、 node-g

GitHub Appsとは、GitHubと連携するアプリケーションの新しい形式です。 この形式はアプリケーションのマーケットプレイスである、GitHub Marketplaceの公開と共にアナウンスされました。つまり、GitHub Appsを作成する、マーケットプレイスで公開する、それで収益を上げる、というエコシステムがしっかりと整備されたということです。 そんな夢の広がるGitHub Appsの作り方を、本記事では紹介しようと思います。 GitHubと連携するアプリケーションの形式 まず、GitHub Appsを含め、GitHubと連携するアプリケーションの形式を整理しておきます。 Webhooks Webhooksは、リポジトリの特定のイベント(pushしたとか)をトリガにして、その更新情報を設定先のサーバーなどに通知する形式になります。設定は以下の場所で行います。ここで、通知対象のイ

Google Compute Engine(GCE)でSlackのBotkitを動かすぞい！という話。 以降 Google Compute EngineはGCEと書きます！ Slackのbotkitの詳細については割愛しますが、全く動かしたことないです！って人は一度以下とか読んで簡単なものでも動かしておくといいかもです。 BotkitでSlackのBotをサクッと作る方法 - http://toach.click/slack-botkit/ Google Compute EngineのVM インスタンスを作成する 今回はLinux VMインスタンスを作成します。 公式のドキュメントにそってやれば簡単にインスタンスは作れます。ちなみに、私は操作に慣れているUbuntuを使ってます。 Quickstart Using a Linux VM - https://cloud.google.com/

シェル変数に export をつけることで、環境変数となり、子プロセスでも利用できるようになる（変数はターミナルからログアウトもしくはexitするまで保持） $ export HOGE=aiueo なお $ HOGE=aiueo; export HOGE でも同じ。 使用例）export LANG=ja_JP.eucJP 永続的に変数の値を設定変更したいのであれば、 環境変数をログインする度に手で入力することはありません。~/.bashrc や ~/.bash_profile といったファイルで export 文を上のように書いておけば良いのです。 引用元：https://linuxshugendo.wordpress.com/2013/12/26/%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0%E3%81%A3%E3%81%A6%E4%BD%95%E3%81%A

Shell Script Advent Calendar 2015 3日目の記事です。 この記事では自分が最近はまったシェルスクリプトの初歩の初歩、シングルクォート(')とダブルクォート(")の違いを紹介できればと思います。 C言語とかを書いてたら、シングルクォート(')とダブルクォート(")は違うのは当たり前なわけですが、最近JavaScriptやPythonばかり書いてたので、当然(')と(")は同じものだと脳みそが思い込んでてはまってしまいました。 ShellScriptでのクォートの基本の使い方 とある"Program Files"というセンスのない名前のフォルダがあったときに、

訳者からひとこと Googleが昨年公開したGCPにおけるDDoS対策のドキュメントを和訳しました。 技術文書の和訳は初めてなので至らない点も多いと思います。お気づきの点やよりわかりやすい表現の提案がありましたら、ご指摘お願い致します。 以下、本文です。 翻訳元 Best Practices for DDoS Protection and Mitigation on Google Cloud Platform (https://cloud.google.com/files/GCPDDoSprotection-04122016.pdf) （翻訳元の）最終更新日: 2016年4月12日 導入 DoS攻撃はサービス又はアプリケーションを利用不可能にしようとするものです。また、DDoS攻撃では標的に対して大規模な攻撃を仕掛けるために複数のリソース（多くの場合、多数の侵害されたホスト/インスタンス）

はじめに 僕はウェブサイト制作会社でサイトの運用・アクセス解析担当をしている者です。 ウェブサイトの制作・リニューアルを受注した際にプロジェクトに参加し、クライアントの現状サイトのアクセス解析とレポート作成、リニューアル提案が主な仕事です。 クライアントと直接相対するディレクターから「GoogleAnalyticsの権限もらったからアクセス解析して」とオーダーを受け、アクセス解析を行うことになります。 そもそも、初めて見るサイトを構造から理解し、リニューアルに資する提案ができるようなインサイトを得るまで分析するのは本当に骨が折れます。 さらに（全くの主観ですが）、多くのクライアントはGoogleAnalyticsを「タグ貼っただけ」状態で放置しています。 そのため、計測したデータが整理されていない・そもそも正しく計測できていないということはよく起こります。 そして、そのような計測エラーがノ

どうも。よくブロックチェーン興味あるけどよくわからん、という声を某所から聞くので、僭越ながら自分が勉強するために使っている参考文献を紹介します。 今後自分が新しく読むたびに追加していく予定です。 色々と追加していって、だんだん初心者向けじゃなくなっている気がしますが、各通貨内の小見出しが、上から下に行くに従って内容が難しくなるように並べてあります。 Mastering Bitcoin (書籍) Mastering Bitcoin Mastering Bitcoin（翻訳版） https://bitcoinbook.info/translations-of-mastering-bitcoin 名著中の名著ですね。主にビットコインのブロックチェーンに関する一通りの説明が乗っています。業界では読んでいることが常識と呼ばれるくらいに一般的な書籍となっています。 全部目を通しておいて損はないと思われ

みなさまへのお願いごと 間違いなどの指摘は、編集リクエストでお願いします。 コメントの記載はページが長いこともあり、お控えください。 TOEIC900でも英語が話せない日本人へ ITエンジニアの私がなぜ令和の今、中国語を学ぶのか？ 名詞/イディオム gotcha はまりポイント。注意すべきこと。引っ掛け。 Got you のくだけた表現。捕まえた、誰かをトラップに引っ掛ける、という意味から。 注) 一般的には、Got itやYup、I seeのような、同意の返事でよく使われる。 類) caveat, pitfall There are many gotchas in this application. sought-after (スキル、人材、機能、アプリが) 人気の、需要がある、求められてる、引っ張りだこ Python is a sought-after language. c-suit

GitHubのIssue検索でできること チームメンバのタスク消化量をIssueの検索だけで可視化できないかと思ってIssueの検索についてざっくり調べました。 ざっくりとまとめておきます。 基本 スペース区切りで複数条件を指定可。 AND条件。 指定した条件は基本的にはその文字列の全文検索 「:」で区切られた各種フィルターを指定できる in 文字列がどのフィールドに含まれているかを指定する。 指定できるのはtitle, body, comment。カンマ区切りで複数指定可 in:title in:title,body in:comment is:public / is:private リポジトリ横断で検索する場合にpublicのみ、privateのみを指定できる 当然、privateは自分がアクセス権を持っているリポジトリのみ is:public is:private author Is

PKG_VERSION=`node -pe 'require("./package.json").version'` 以上。 .versionの部分は適宜書き換えてください。 解説 はじめは npm version コマンドで取得できるでしょー、と思って調べたんですが、これはバージョンアップ専用で取得はNGでした。 ということで node の-e: eval scriptオプションでpackage.jsonファイルを直接ロードする方法で解決。 require 便利！ 2014.10.20 追記 インラインでconsole.logしていたのを、-p: evaluate script and print result オプションで代替できると教えてもらいました。 @fukayatsu ありがとうございます！ 少しハマったので書き残しておきます。 Register as a new user a

問題提起 （※タイトルはキャッチーなのにしましたが、Middleware全般の不要論ではありません。非同期処理において不要論です。） Redux使うときに非同期処理はどう書きますか？ 「よくわからないけどMiddleware使うらしい」と思考停止していませんか？ この記事では、Reduxは本来どのように扱うことを想定されているのかと、なぜ非同期処理の文脈でもMiddlewareが出てきたのか、そして「実はMiddleware無くても読みやすく書けるよね」という話をしていこうと思います。 Reduxでの設計を悩む人への個人的な解です。 （気になる・詳しく知りたい箇所などありましたらお気軽にコメントください） この記事のゴール ActionDispatcherという筆者が命名したクラスを使うことで、 複数の非同期処理を含むロジックでも読みやすく書ける ネットワーク通信などを含んでもテストがしや

相談内容 既存の管理ツールを新しく作り直すために新しいJSフレームワーク/言語使いたいのですが、何を選んだらよいでしょうか？ ここで選んだものは今後新しく作る時にも使用していく予定のため、学習コストよりメンテナンスしやすいものを選びたいと考えています。 利用者は社内外で特定の権限を持った人のみであるため、サーバサイドレンダリングはしない予定です。 言語は型があるものを利用したいのですが、TypeScriptとFlowのどちらがよろしいでしょうか？ 時間に余裕があれば、テストフレームワークやビルドツールについてもお聞きしたいです。 現在のページ/チーム jQueryなどで書かれている部分が多いですが、変更を加えることが難しくメンテナンスコストが高いです。 サーバサイドをやってる人が片手間で書くJavaScriptといった状況です。 今回新規で数ページを追加する必要があるため、何を利用すれば良