はてなブックマーク

いつも苦労するので備忘録として pythonからGoogle OAuthする方法ですが、検索すると情報が古かったり、サービスアカウント使うやりかただったりして、個人のユーザーに対してサービス提供する為のやり方がいまいち分からなかったりしたのでまとめ。 必須事項 GCP使ってAPIキーを取得する Google_Client_IDとGoogle_Client_Secretは必須です redirect_uriは、帰ってくるURLを入れてください。これはGCPに設定したものと同じである必要があります OAuthするためのURIを生成する GOOGLE_DISCOVERY_URL = ( "https://accounts.google.com/.well-known/openid-configuration" ) def get_google_provider_cfg(): return requ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? そういえばQiitaに書いてないなと思いたち、この一ヶ月くらいの取り組みについて紹介します。 何を作ったのか Slackから OpenAI APIを通して ChatGPTを使うためのアプリ 誰でもインストールできるようにしてあります アプリ詳細 Party on Slack DeepL Translator TimeLine 以上の3つです。TimeLineだけ、すべての公開チャンネルにjoinする機能と、特定のチャンネルに投稿を転送する機能を有していますが、基本的に全部同じアプリです。 複数アプリをリリースしている理由は後述しますが、

はじめに NTTテクノクロス Advent Calendar 2018の8日目担当 @geek_duck です🦆 最近はReact.jsでフロント側、SpringBoot/GrailsでAPI側を作るプロジェクトに関わっています。 そのプロジェクトの中で調べた、知っていると捗るcreate-react-appの設定を紹介したいと思います。 この投稿で使用している言語、ライブラリのバージョン Node.js v10.14.1 npm v6.4.1 create-react-app v2.1.1 react.js v16.6.3 create-react-app基本の使い方 最初にcreate-react-appの基本的な使い方をサッと紹介します。 create-react-appは、React.jsのアプリのひな形を作成してくれるツールです。 以下のnpxコマンド経由でcreate-rea

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? macにwineをインストールしてみたのでメモしてみました。 実行環境 PC: MacBook Pro (13-inch, 2017, Two Thunderbolt 3 ports) OS: Darwin 19.3.0 (macOS Catalina 10.15.3 (19D76)) wine: wine-5.5 (githubからそのままcloneしました。) ＊インストールした時点でのstableなバージョンは公式サイト（winehq.org）では5.0でした。 公式サイトでwineのインストールに必要なもののバージョン biso

追記 Viewファイル内でJSとCSSを読み込んでいたのをテンプレートファイル内で読み込むように変更。 リポジトリを用意しました。開発にそのまま使用できます。 記事を読んでいちいち設定めんどいなと思ったらこのリポジトリをクローンしてアプリ開発に使ってください。 https://github.com/shan-shan95/rails-vue-template 1/27 追記 「webpackに乗り換えることのメリット」の項目を追加しました。 ファイル構成、webpackの設定を少し変更しました。 この構成にさらにbulma, fontawesome5, normalize.cssを入れる手順です。 めんどくさい人は上のリポジトリに入っているのでそのまま使ってください。 https://shanshan.hatenadiary.jp/entry/2019/01/26/152807 なぜ人類は

2018.11.20 求めていること SSRは極力やりたくない。 SSRのメリットは初回読み込み時のブラウザレンダリング速度向上とSEO・OGP対応と言われる。 レンダリング速度をシビアに要求されてない。SEOもgooglebotが対応してればいいや〜。という場合、結局の所OGP対応（facebook, twitter）の為だけにSSRを選ぶことになる。 SPAの静的配信って大きなメリットなので、それを捨ててまでSSR…なんとかOGP対応だけしてSSRを避けられないものか。 対応するページが少なければPrerender-SPA-Plugin等を使ってビルド時に全ページ出力するのが早いが、ここではCGM/UGCのようにページ数増加が激しいサイトを想定する。 結論 ダイナミックレンダリングする。Googleが公式に認める方法なのでクローキングに当たる心配も無さそう。 prerender.ioの

初版：2018.12.7 laravel-5.7, php-7.2 対応 ルーティング調整 不要ファイル削除 レスポンスをjsonに固定 Auth系いらない場合 ルーティング調整 webルート削除 routes/web.phpを削除 app/Providers/RouteServiceProvider.phpからmapWebRoutes()の実装と呼び出しを削除 app/Http/Kernel.phpの$middlewareGroups['web']を削除 apiルートのprefix消す app/Providers/RouteServiceProvider.phpのmapApiRoutes()内、prefix('api')をprefix(null)にする 不要ファイル削除 Controllers app/Http/Controllers/Auth/* すべて削除 frontend系 pac

Cognitoの認証機能を簡単にsetupしつつ、webクライアント（js）からユーザ登録、ログイン、ログアウト、パス忘れに対応するお試し実装。 この実装フローではCognitoのWebコンソールを直接触らない。 前提 2018.11.14現在 yarn 1.10.1 https://yarnpkg.com/ja/ 要AWSアカウント 用語ざっくり Mobile Hub モバイルアプリやwebサービス開発で使えるAWSサービスを簡易にセットアップ出来るサービス（Mobile Hub自体は無料、他サービスは別途） Cognito ユーザ認証とAWSへのアクセスコントロールを行うサービス（月間アクティブ50,000まで無料） Amplify AWSの新しいライブラリ、Cognito等を簡易に利用できるよう作られたもの。 公式docではグローバルインストールしたamplifyからamplify

認証だけfirebase使いたい場合の考察。 要求 ユーザ認証（登録・ログイン）はfirebaseに任せたい。 ユーザデータはAWS RDS等別途のシステムで管理したい。 全体像 Firebase <-> client ... ユーザ登録・ログイン（アクセストークンの発行） client -> self-backend ... アクセストークンの送信 self-backend <-> Firebase ... アクセストークン検証、uid（firebase user ID）の確認 self-backend -> client ... 認証可否含めたレスポンスの返却 詳細 1. Firebase <-> client ... ユーザ登録・ログイン（アクセストークンの発行） firebaseとclient間のみのやりとりでユーザ認証をしアクセストークンを得る ドキュメント通り実装する http

目的 デスクトップブラウザで、スマホのカメラアプリ的な動作を実装します。 PCに接続しているカメラの動画をvideoタグに映しつつ、 videoタグの表示領域をクリックするとその時の映像をPNGファイルとしてダウンロードします。 デモ Chrome推奨 https://geekduck.github.io/getUserMedia/ 機能 MediaDevices.enumerateDevices APIを使用してカメラの情報を取得する(複数カメラ接続にも対応) MediaDevices.getUserMedia APIを使用してユーザが選んだデバイスIDのカメラ映像をvideoタグに表示する videoタグから画像を生成してダウンロードさせる MediaDevices.enumerateDevices APIを使用してカメラの情報を取得する(複数カメラ接続にも対応) // 接続されている

目的 ユーザに画像をアップロードしてもらうようなWebアプリで、画像の解像度が大きい場合はサーバ側でアップロードされた画像の解像度をリサイズして格納するような処理を実装することがあると思います。 サーバ側ではなく、クライアント側で画像をリサイズする方法を調べました。 機能 次のcanvasのメソッドを利用することでクライアント側で画像のリサイズができます。 ctx.drawImage(srcImage, srcX, srcY, srcWidth, srsHeight, dstX, dstY, dstWidth, dstHeight) 第1引数に元画像(Imageオブジェクトや別のcanvasオブジェクトなどを指定可能) 第2, 3, 4, 5引数に元画像から切り取る領域を指定 第6, 7, 8, 9引数にリサイズ後の領域を指定 var scale = 0.5; // 縦横を50%縮小 va

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

前置き タイトルの「プレビュー型プラグイン」とは、テキストエディタに書かれた文字列を変換して表示するプラグインのことです。 例えば、Atomにビルトインされているmarkdown-previewをはじめとして、asciidoc-preview、atom-html-previewなどがあります。 この投稿では、ハンズオン形式で簡単なプレビュー型のAtomプラグインを一から作っていく過程を解説していきます。 夏休みの課題としてAtomプラグインを作ってみましょう！ 作成するプラグイン プレビュー元のテキストエディタから数値を抜き出して合計するプレビュープラグインを作ってみます。 実装する機能 以下の機能を実装します メニューバーのpackageや、コマンドパレットからプレビューを起動 プレビュー対象のテキストエディタやファイルから数値を抜き出して合計をプレビュー画面に表示 プレビュー対象のテキ

サンプルコード 新バージョン:Socket.IO(v1.3.5) + pm2(forkモード) 旧バージョン:Socket.IO(v0.9) + pm2(clusterモード) 前置き Socket.IOのv1.0でRedisを使ったスケールの仕方が変わり、 pm2のclusterモード(Node.jsのclusterモジュール)を使っていたv0.9用のスケールの仕方がそのままでは通用しなくなりました。 v0.9用のスケールの仕方に関する参考情報 Socket.IO, Redisを使用し各ゲーム間でプッシュ通知するシステム Node.js + Socket.IO + pm2でデーモン化とクラスタリング Express / Socket.IO をスケールアウトしてみよう 目的 最新のSocket.IO(v1.3.5)とpm2を使ってWebSocketサーバをスケールさせる方法を調べました。