「ブラウザからファイルアップロードする際にプログレスバーを表示したい」調べたことまとめ
一番カンタンな方法 axiosの第3引数にoptionを渡す。コードはaxiosのgithubから抜粋 document.getElementById('upload').onclick = function () { var data = new FormData(); data.append('foo', 'bar'); data.append('file', document.getElementById('file').files[0]); var config = { onUploadProgress: function(progressEvent) { var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total ); } }; axios.put('/upload/s
[AWS Workshop] これから学ぶS3基礎 | DevelopersIO
ストレージクラスの選択 基本的には「S3 スタンダード」で使用を開始します。 オブジェクトサイズ、オブジェクト数、リクエスト数を実測し、データコンプライアンスとコストに最も合致するクラスへ変更していきます。 例えば、Glacier は保存データあたりの料金はスタンダートに比べて安価ですが、リクエスト料金は高くなります。 ライフサイクル設定によって◯◯日後に Glacier へ移行を考えている場合は、Glacier リクエスト料金を払って移行したほうが、スタンダードを使い続けるより安くなることを計算することが大切です。 バージョニング バージョニングを使用すると、1 つのバケットで複数バージョンのオブジェクトを維持できます。 バージョニングを使用することで、意図しない上書きや削除からデータを保護します。 バージョンニングはデフォルト無効です。必要な場合は明示的に有効にします。 バージョニング
![[AWS Workshop] これから学ぶS3基礎 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/55e5ee85a70b0b6893eeca79750f0d06a94b8595/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2019%2F05%2Famazon-s3.png)
CDP:Direct Object Uploadパターン - AWS-CloudDesignPattern
解決したい課題 写真や動画の共有サイトでは、多数のユーザーからサイズの大きいデータがアップロードされる。アップロード処理はサーバー側の負荷（特にネットワーク負荷）が高く、ある程度の規模のサイトでも、アップロード専用の仮想サーバーが必要になるケースがある。 クラウドでの解決/パターンの説明 アップロード処理をインターネットストレージに任せる。つまり、クライアントから、仮想サーバーを経由することなく、インターネットストレージに直接アップロードする。これにより、Webサーバーでアップロード処理の負荷を考えなくてもよくなる。 実装 Webサーバー（EC2）上で、S3へのアップロードを行うHTMLのフォームを生成する。 アップロードフォームを使用し、ユーザー側からS3へ直接ファイルをアップロードする。 S3にファイル転送を終了した後にフォームに指定してあるURLへリダイレクトされるので、リダイレクト
Gyazo + Amazon S3 に AWS Lambda を足してもう少し安全にスクリーンショット共有 - Qiita
Gyazo + Amazon CloudFront で簡単☆高速スクリーンショット共有 個人用の Gyazo 環境向けに、クライアントに手を入れて直接 Dropbox や S3 へスクリーンショットをアップロードするというテクニックがある。自前サーバを管理することなく利用できて大変ナイスなものの、クライアント側で比較的重要な固有情報を含んだ状態になっているので、取り扱いが若干難しいと思った。 そこで AWS Lambda を利用して、S3 へのアップロードを行う署名付き URL の発行をそちらで行い、クライアントでは受け取った情報だけでアップロード処理が進めれるような体制を作ってみた。 処理の流れと役割 スクリーンショットを撮る。 通常ならば Gyazo サーバへスクリーンショットをアップロードするところを、後述する AWS Lambda へ S3 アップロードのための署名付き URL を
問い合わせフォームもサーバレスでDevOps! (Github,CircleCI,AWS lambda/cognito/ses) 後編 - Qiita
問い合わせフォームもサーバレスでDevOps! (Github,CircleCI,AWS lambda/cognito/ses) 後編GitHubAWSCircleCIlambdacognito 前回の記事で、単純な静的サイトのオートデプロイフローまで完了した後の続き。 後編 「問い合わせフォームもサーバレスでDevOps!」 認証 AWS Cognito 処理 AWS Lambda 通知 AWS SES を利用して、もちろんサーバレスで。 Gibhubへのstaging/masterへのpush のみで、 CircleCI経由で各種環境へ自動デプロイを実現。 前提 前回同様の続きなので、 s3site.proudit.jp -> 本番サイト st.s3site.proudit.jp -> ステージングサイト が、すでにGithub+CircleCiにてデプロイ可能である前提で進める。 構
S3 + Lambda + Cognitoを使って、簡単お問い合わせシステム構築 - Qiita
S3とLambdaとCognitoを使って、簡単でセキュアなお問い合わせフォームシステムを作ってみます。 記事執筆当時、Cognitoがバージニア/アイルランドのみ利用可能だったため、今回はS3/Lambda/Congito全部バージニア(us-east-1)に揃えています（S3とLambdaはリージョン揃える必要があります）。2015年9月以降、東京リージョンでもCognitoは利用可能となっています。 全体像 S3上にホスティングしているお問い合わせフォームから投稿すると、S3上にJSON形式で内容がuploadされます。ファイルがuploadされると、Lambdaがイベントフックして内容をGmailに送信する構造です。 お問い合わせ数の少ないサイトでは、これで十分でしょう。 SQLインジェクションとは無縁ですし、負荷も気にしなくて良いので、選択肢としてはありかなと思います。 0 準備
S3+lambda+SESで問い合わせフォームの作成 - Qiita
業務で製品の問い合わせフォームを作る機会があったので、まるまるAWSの機能を使ってみようかと。。 下記を参考にさせて頂きましたが、nodemailerの使い方がよく分かっていないので、メール部分はSESを使ってみました。SES以外の設定方法はこちらで S3 + Lambda + Cognitoを使って、簡単お問い合わせシステム構築 http://qiita.com/takuma_yoshida/items/3bd3af8b09307d25981a 1.SESの設定 1-1 メールアドレスを登録 まずは使うメールアドレスを登録。「Email Addresses」の「Verify a New Email Address」からメールアドレスを登録。設定すると登録確認用のメールが飛んでくるので、メール本文にあるURLをクリックして本登録する。登録がされるとStatusがverifiedになります。
私が実施する Heroku x Rails の高速化をまとめてみた - ボクココ
Herokuの欠点は、Tokyoリージョンがないため、ネットワークによる遅延が気になる と言われている。どの程度による遅延が気になっているのかは人によると思うが、Herokuを最大限に高速化させるために私がやっていることをまとめてみた。 これを実施すれば、Herokuが遅いとはあまり思わなくなると考えている。 Asset Sync を利用する [追記（重要）] Asset Syncを利用するのは公式で止めるよう勧告が出ている。CloudFrontを利用する方法が推奨されている。以下の内容は古いのでご注意を。 ーーーーーーーーーーーー Asset Syncは、Amazon S3に画像やCSS/JavaScriptを置き、各アセットのパスの向き先をそちらにかえてくれるgemだ。これを利用しないと、HTMLとかに置いた静的コンテンツが全てHerokuにアクセスしてしまうため、Herokuサーバー
Qiitaの画像アップロード機能も簡単に実装できる。そう、S3ならね。 - Qiita
QiitaとKobitoで画像アップロードができるようになりました。 その後ろ側をちょっぴり公開します。 件名からも分かるように、背後ではAWSのS3を画像ストレージに採用しています。 画像アップロード機能をリリースしました - The Official Qiita Blog Kobito v1.6.1リリース: ドラッグ&ドロップやスクリーンショット撮影で簡単に画像を添付できるようになりました! - The Official Qiita Blog 用語統一 サーバ はQiitaのサーバのことを指すことにします。（つまり、S3ではない、ということ） また クライアント は各ユーザのブラウザのことを指します。 要件 画像アップロード機能を実装するにあたっていくつかの要求がありました。 成りすましを防げる アップロードされたファイルを管理できる 自分達のサーバに負荷をかけたくない 変な画像のア
Google Driveも解約して、BitTorrent SyncとAmazon S3 + Glacierを組み合わせてみたヨー - Nyadgets !
Nyadgets ! にゃるらコト岡村 直樹(26)のITガジェット系ブログ Google Driveも解約して、BitTorrent SyncとAmazon S3 + Glacierを組み合わせてみたヨー 今月のはじめの方に、 Bitcasaの代わりにAmazon S3 + Glacierを使ってみた - Nyadgets ! という記事で、 Bitcasaの代わりにAmazon S3 + Glacier使ってみたヨー という話をしていたんですが、先日、これがまた進化しまして、今度は、 Google Driveを解約して、BitTorrent SyncとAmazon S3 + Glacier という組み合わせにしてみたので、今日はその辺りの記事を書きます。 1. Amazon S3 + Glacierって何よ？ (前回のおさらい) Amazon S3 Amazon Glacier とは、
iOS8 で画像をアルバム or カメラで取得し、S3 へアップロードする - ボクココ
だいぶお決まりな処理な気がするのでまとめてみる。 iOS8 からは Photos Framework という画像を扱うフレームワークがあり、これを利用していく。 UIImagePickerController を使えば、画像選択まではそれなりにうまくいくのだが、 S3 へアップロードとなるとそのファイルパスが必要になってきて、そのファイルパスをどうやってとってくればいいのかが難しいところ。 画像は特に、自前のサーバへアップロードするんじゃなくて、S3に直接アップロードしたほうが負荷的にも優しいし、マルチパートのPOSTを実装する必要もなくなるので、基本的には採用すべきだと思う。そのURLだけを自前サーバにポストすればいいだけにしよう。 画像をリサイズして色々なサイズの画像をS3に保存したいというようなケースも多くあると思う。その時は自前サーバのAPIで、アプリから渡したS3のURLにある画
New Relic のグラフを毎時チャットに貼り付ける - @kyanny's blog
New Relic をこまめにチェックすべきだが怠惰かつ忘れっぽいせいでチェックできないので、グラフ画像が毎時チャットにつぶやかれるようにしてみた。 やり方はけっこう込み入っている。 New Relic の Embedded Charts 機能を使って埋め込み用のグラフを作る。 Amazon S3 にバケットポリシーでデフォルト公開設定にしたバケットを作る。 適当なサーバーに Jenkins と phantomjs と s3cmd をインストールし、 s3cmd は 2. で用意したバケットに書き込める Access Key Secret Key で --configure しておく。 capture_put.sh というスクリプトを使い、 phantomjs で embedded chart のスクリーンショットを撮って s3 に put し、画像の URL を HipChat に投稿す
S3のイベント通知機能（S3 Event Notifications）に対するユースケースを考える - プログラマでありたい
日本のAWS関係者がre:Inventの発表で盛り上がっているなか、風邪ひいて寝込んでました。季節の変わり目には、気をつけましょう。 さて、そんな感じで全然追いつけていませんが、特に面白いなぁと思ったのが、S3 Event NotificationsとAWS Lambdaです。Lambdaについてはまだ触っていないので何ともいえない部分がありますが、発表内容を見る限りインフラの在り方を変えるような存在かもしれません。そして、S3のEvent Notifications。これ、めちゃくちゃ便利です。S3のイベント（現在は、putとpushとcopy）が発生したら、SNSやSQSに通知を送れるという機能です。何が便利かというと、ファイルのアップロードをトリガーに処理を書けるということです。頭に浮かんだユースケースを1つ書いてみます。 S3 Event Notificationsを使ったクローラ
社内用の Gyazo を用意するととっても便利なので Heroku + S3 でお手軽に用意できるようにしたよ
みなさまこんにちは。@riaf でございます。 さて、先日は Slack を導入するととてもいい効果が生まれるお話をしましたが、今日はスクリーンショットを共有したり、ちょっとした画像を共有したりするのに使える社内用 Gyazo を用意したお話をします。 Gyazo ってご存知ですか？（いちおう） ソフトを起動すると、カーソルが十字になって、画面を範囲選択するとその部分のスクリーンショットが自動的にサーバーにアップロードされて URL が発行されるのでとっても素敵！なサービスです。 とはいえ、社内で共有する画像ファイルは、社内の人で管理できると安心できますよね。 この、Gyazo が提供しているアプリは少しいじるとアップロード先が変更できたり、Windows 版では設定ファイルで変更できるようにしたサードパーティのアプリがあったりするので、サーバー側さえなんとかすれば良いということですね。ア
TwilioとAmazon SNSを組み合わせて、電話で自動通知 - プログラマでありたい
今年の4月にTwilioのアカウントをとって早8ヶ月。これは色々なことに使えるとワクワクしながら、すっかり放置していました。日本ではKDDIさんと組んで展開し、色々な所でハンズオンなども開催されていたので、知名度的にも手軽に使える音声APIのデファクトになりつつあるのではないでしょうか？簡単ながらTwilioの紹介とユースケースを考えみます。 Twilioから電話を掛けてみる アカウントと電話番号の取り方は忘れました。アカウントは本家とKDDI経由での取り方あるようです。私は本家の方でとっています。APIの使い方は色々なところで載っていてあまり悩むことはないと思いますが、おさらいを含めてまとめておきます。 rubyで電話を掛けるサンプル make_call.rb require 'rubygems' require 'twilio-ruby' @account_sid = 'Your Ac
s3fsを使ってEC2からS3をマウントする方法 - Qiita
手順1. Console HomeからIAMを選択する。 手順2. s3アクセス用のユーザーを作成する。(画像では「s3-access-user」で作成) 「Create New Users」をクリックして表示されるポップアップの「Access Key ID」と「Secret Access Key」をメモしておく。 作成後 手順3. 作成したユーザーを選択し、「Permissions」タグを選択し、「Attach User Policy」ボタンを押下し、ポリシーを追加ポップアップを表示する。 「Attach User Policy」ボタン 手順4. 「Amazon S3 Full Access」を選択する。（今回はフルアクセス） 手順5. ターミナル接続して、マウントする。 sudo echo "{Access Key ID}:{Secret Access Key}" > /etc/pas
S3とFluentdを用いた効率的なログ管理 | SmartNews開発者ブログ
ゴクロの大平です。 私にとって一番大事で替えの効かないミュージシャンはさだまさしさんですが、私にとってクラウドコンピューティングのサービスの中で一番大事で替えが効かないサービスはS3です。 多種多様なAPIを用いて柔軟にファイルの操作が出来る事や、”99.999999999％”と謳われている高い耐障害性、S3にあるデータをElastic MapReduceやRedshiftなどを用いて手軽にデータ解析を行える基盤が提供されていることなど、あまりに便利すぎてS3の代替となるサービスを探しだすのが難しい状態です。 もちろん多くのAWSユーザーが同じようにS3の便利さを享受していると思いますし、インターネット上でも多くのブログ等でその魅力が語られています。その中で本記事は既に存在する記事と似たような内容を書いてしまうかもしれませんが、弊社なりのS3の使い方についてご紹介したいと思います。 なお
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
