Next.jsの基本まとめ

準備 npm init next-app <APPNAME> npm run dev ページの編集 /pagesの各jsxファイルがそのままページになる。 ・ファイル名=パスネーム ・indexは/コンポーネントをexport defaultすればいい。 // 例 export default function () { return <h1>First Post</h1> } // このよう</appname>…

Twitterログイン実装

参照 Log in with Twitter — Twitter Developers 申請 これはそのへんにたくさんブログあるので省略 OAuthの準備 requests_oauthlib pip install requests-oauthlib トークンの取得 POST api.twitter.com/oauth/request_token HTTP/ params oauth_callback: …

MacにWebpackをいれて、Babel 7 を使えるようにする

前提 npm (インストール方法) Webpackインストール npm install webpack --save-dev ディレクトリ構成 こんなかんじに整える /任意のディレクトリ -- package.json -- webpack.config.js -- /src -- /js -- entrypoint.js -- /moduleswebpack.config.jsの中…

まっさらなMacにBabelをインストール

環境 MacBook Pro ( macOS Mojave 10.14.5 -> Catalina 10.15.3 ) 前提 以下はインストール済みの前提です。逆に、以下以外はインストールしてない。 Homebrew (インストール方法) やってく 必要なもの nodebrew node.js & npm (セット) node.js & npmをイン…

全てのブラウザ向けにいいかんじにスムーススクロールを設定する

2019/2/23現在、スムーススクロール(このページのサイドバークリックしたときみたいなやつ)は、 ・JavaScript(jQuery) ・CSS のどっちかで実現します。そう、CSSでもできるのです。ただし、ChromeとFirefoxだけ。CSS対応ブラウザ(特にChrome)は自分でjQu…

今日の認証における課題(ぼくなりの認証論)

オンラインでパーソナルなサービスを利用する際に必ず必要になる「認証」。今回は認証論というか、そもそも認証ってなに、という話。 理論上、認証に利用できるもの 知識 長所 短所 所有物 長所 短所 生体 長所 短所 現実世界の「人-人」の「認証」って 生体…

Google Cloud DatastoreをGoogle App Engineから利用する

前提知識はProgateでのPythonレッスン修了レベルです。Pythonで説明しますが、他の言語でも読み替えられると思います。 Google Cloud Datastoreとは 構造 Propertyに設定できる型 GAEからGoogle Cloud Datastoreを利用する方法 import データベースへのアク…

Google App EngineからGoogle Cloud Storageを利用する

Google App Engine(Pythonスタンダード環境)からAPIでGoogle Cloud Storageにファイルを保存・取り出しをします。Cloud Storageは写真や動画などリッチメディア用です。文字列などの通常のデータベースはCloud Datastoreを利用しましょう。 ▷Google Cloud …

詐欺防止を判断力に頼ってはいけない

詐欺対策で最も重要なのは、個人の判断力に依存しない手順を徹底することです。こちらのエントリーを読みましたが、最近僕の母も怪しげな電話にひっかかりそうになり慌てました。 さて、母と言いましたが他人事ではありません。詐欺の手口は日々アップデート…

Google App EngineでGoogle Cloud DatastoreとFlaskを利用したセキュアなサーバーを作る

前回までにGoogle Cloud Datastoreを利用した簡単なFlaskサーバーとFlaskのセキュリティを学びました。今回はこれらを踏まえて、実際に運用できるFlaskサーバーを作りましょう。利用するデータベースはGoogle Cloud Datastore(以下Datastore)です。今回の…

Flaskのセキュリティ対策

Flaskではデフォルトでセキュリティ対策がなされている部分もありますが、もちろんコーディングする上で気をつけなければいけない点もあります。このページはこちらの公式リファレンスを噛み砕いた内容になります。 Security Considerations — Flask 1.0.2 d…

Google Cloud Datastoreを利用したサーバーをFlaskでつくる [GAE]

前回はじめてのFlaskアプリをGoogle App Engineで作ったわけですが、今回はデータベースを利用したアプリを作ります。HTTPリクエストを受けて値を保存したり返したりするRESTサーバーをGoogle Cloud Datastoreで作ってみましょう。 ▷HTTPリクエストの構造に…