CORS(Cross-Origin Resource Sharing)について整理してみた | DevelopersIO
ブラウザからAmazon S3に直接ファイルをアップロードしたい 先日、Amazon S3にファイルをアップロードするWebアプリを作ろうとして色々調べていたところ、S3にCORSという仕様のクロスドメインアクセスの設定をすることによって、ブラウザから直接S3にアップロードをする方法にたどり着きました。ただ、この方法を使うにあたってはCORSというクロスドメインアクセスの仕様をきちんと理解しておいた方が良さそうでしたので、まずはCORSについて自分なりに整理してみました。 なお、弊社の横田がCORSとS3についての記事を以前書いていますので、S3のCORSサポートに関する概要を知りたい方はそちらをご覧下さい。 CORS(Cross-Origin Resource Sharing)によるクロスドメイン通信の傾向と対策 CORS ブラウザでAjax通信を行う際には、同一生成元ポリシー(Same
BankCodeJP API — 金融機関コードAPI
Japan Financial institution Code Web API金融機関検索APIのスタンダード銀行、信用金庫等の統一金融機関コード、名称を検索できる Web API。 毎月 8,000万を超える検索リクエストを処理し、トラフィック増加時にも優れた可用性とレイテンシを提供しています。 BankcodeJP APIシンプルそしてパワフルに設計されたAPIは、Eコマースにおける金融機関検索に最高のパワーを与えます。 JSONフォーマットで金融機関情報を返却するAPIはCORS対応しているためAjaxで通信できます。JQuery はもちろん、Angular や React、Ember.js、Aurelia、Vue.js などの SPAフレームワーク からも利用できます。 いくつもの企業がBankcodeJP APIを導入し、素早く効率的に Webサービスを構築しています。
WASMとRustはVue.js/React.jsを打倒するのか？ - JSへの侵略の歴史
はじめに 「Typescriptの次はRustかもしれない」という記事がバズってるのを見かけました。 なかなか面白くて、PAとしてのWASMとRustを比較している記事です。ちょうど最近「レガシーおじさん、SPAを始めてみた。そして限界を知る」でも書いた通り最近SPAに手を出してみたのですが、いろいろやろうとするとSSRのためのBackend for Frontend (BFF)等が必要になるとわかり「これJSでやる必要なくない？」とも感じていたのでちょうど良かったです。 こういうのを見るとRIAやGWTのように似たアプローチで廃れた技術や、登場が早すぎたMeteor、今も頑張ってるMSのBlazorなど色々頭をよぎります。といわけで歴史を俯瞰する意味でHTML + JavaScriptとそれ以外の技術のせめぎ合いの歴史やMSのBlazorやRustのyewなどWebassemblyを使う
一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます（スマホで開くか、PCの場合はUAをスマホに偽装する必要があります） https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか？ どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削
JavaScriptがちょっとわかる人向けの、Ajaxの話。 - Qiita
先程のdata引数は、第一引数にあたります。 これは、jqXHRオブジェクトのresponseJsonプロパティ値と同じものです。 第二引数のtextStatusは、通信の結果により、success, notmodified, nocontent, error, timeout, abort, parsererrorのどれかが返ります。 では、jqXHRオブジェクトとは、なんでしょうか？ jqXHRオブジェクトとは？ jQueryの公式ドキュメントを見ると、こう書かれています。 The jqXHR Object The jQuery XMLHttpRequest (jqXHR) object returned by $.ajax() as of jQuery 1.5 is a superset of the browser's native XMLHttpRequest object. F
プロダクトに 1 から Vue.js を導入した話
プロダクトに 1 から Vue.js を導入した話1. プロダクトに 1 から Vue.js を取り入れた話 マーケティング事業の開発現場でリアルに使われるJS事情 2. 岡田 正平（おかだ しょうへい）@okashoi • 開発グループ ソリューションユニット所属 • 2015年にウィルゲートに新卒入社（3年目） • サーバサイドエンジニア • PHP / Laravel • Vue.js をチームに導入した立場のお話をします 2 自己紹介 3. 宮西 由貴（みやにし ゆうき） • 開発グループ ソリューションユニット所属 • 2016年にウィルゲートに新卒入社（2年目） • フロントエンド勉強中 • Vue.js の導入を受けたメンバーの立場から お話をします 3 自己紹介 4. 4 ウィルゲートの事業 5. • 前半パート「チームに導入した話」@岡田 • 後半パート「実際に使った話」
さよなら、Firebug | POSTD
最も人気が高くパワフルなWeb開発ツール。 Firebugはこれまでに驚異的な成功を収めており、その12年の歴史において、オープンソースのツールとして、Web開発者の間でカルト的な人気を築き上げてきました。登場したのは2005年、Firefoxブラウザでコードの検査、編集、デバッグをできるようにした最初のツールです。また、どのようなWebページにおいても、CSS、HTML、JavaScriptの調査を可能にしています。これは大きな前進でした。 Firebugは多くの人の注目を集め、現在でも100万人以上の熱心なファンがそれを使用しています。 そのような中、来月リリースされるFirefox Quantum (バージョン57) で、Firebugが終焉を迎えるのは残念でなりません。ただし、現在のFirefox Developer ToolsにFirebugの全ての機能が盛り込まれている点につい
同僚のコードレビューでこんなにクラスの設計が良くなったという話 - Qiita
弊社では、案件とは関係のないプロジェクトでも業務時間中にみんなにコードレビューを依頼できる時間が確保されています(参加は任意)。案件のコードレビューを依頼したり、ちょっとした個人の制作物を見てらったりと使い方は色々です。 先日、TypeScriptの練習にQiitaのAPIを叩いていて記事を表示するブログウィジェットを作成しました。このウィジェットのレビューを依頼したところ、クラスの設計について具体的な指摘と、それに対する改善を経験できたのでこの記事に記載します。 今回作ったQiitaWidgetの要件 Qiitaの公式APIV2から記事とユーザー情報を取得し、HTMLテンプレートに表示する 投稿の合計いいね数を算出するために、あるユーザーの投稿を全件取得する (このために複数回リクエストの送信とレスポンスデータの結合を行う) パラメータによってユーザー、いいね数によるソート、表示件数、ラ
Awesome Ruby : 素晴しい Ruby のライブラリ・ツール・フレームワーク・ソフトウェアの数々
元記事: Awesome Ruby Ruby 以外の言語, ソフトウェアについては を参照してください. Awesome List in Qiita Awesome Java Awesome JavaScript Awesome Node.js Awesome Python Awesome Go Awesome Selenium Awesome Appium 抽象化 ActiveInteraction - アプリケーション固有のビジネスロジックを管理します. Cells - Rails のコンポーネントを表示します. Decent Exposure - コントローラに宣言的インタフェースを提供するヘルパー. dry-rb - 共通のタスクをカプセル化するための, 次世代 Ruby ライブラリコレクションです. Interactor - 1回のリクエストで複雑なインタラクションを実行するため
Web UXを作れるサーバサイド人材が少ない？！問題 | F's Garage
昨今、ネイティブアプリ全盛が故に、WebサービスのUXを作れるエンジニアが少なくなってるんじゃないか説がある。 また、受託からWebサービスが主流になったことで、一つのソースコードをこねくり回す機会が増え、新規にWeb UIを作り込む頻度が低くなり、そもそも鍛えられていないんじゃないか説もある。 例えば、商品登録画面のような何かのテキスト情報と一緒に登録する画像アップロードを考えてみる。 その際に、「入力確認画面」が必要だと仮定する。また、それなりに秘匿性を意識すべき企業用途のサービスだとする。 書きながら2002年の案件を思い出してるので、なんか古い話だったらゴメンよ。 １．いつどこに画像を保存するのか？ post or ajax ? ２．Webサーバに置くのか？S3に上げてしまうのか？今時ないかもしれないがObject Databaseに登録する？Webサーバに置いたらロードバランサー
JavaScriptでできること
JavaScriptでできることは山ほどありますが、今回はその一部を紹介します。 具体的にその言語で「何ができるのか」をはっきり知っておくと、学習する時に役に立つと思います。 プログラミングを覚えるには、実際に何かを作ってみるのが一番近道です。今回紹介する「JavaScriptでできること」を手を動かして試してみましょう。 今回は「タイマーが作れる」「計算ができる」あたりは省略します。 HTMLを操作できる DOM操作と呼ばれるやつですね。これはJavaScriptの醍醐味ともいえます。 以下のボタンをクリックすると、その下のテキストが変化します。 Button ここのテキストが書き換わります。 JavaScriptはクライアントサイド（ブラウザなど）で動く言語です。一度ブラウザに表示されたドキュメントを、動的に書き換えることができるのです。 アニメーション CSSだけでは表現できない複雑
大量接続に耐えるWebSocketアプリケーションサーバ構築のコツ - pixiv inside [archive]
WebSocketの扱うサービスでは、長時間のコネクション、再接続処理、プロキシ、ロードバランサなど、インフラの面で多くの問題を抱えがちです。弊社のサービス「pixiv」の9周年企画でも、この問題に直面しました。 実際にそこで構築したインフラの事例をもとに、本運用に使えるWebSocketサーバの構成について、pixivインフラ部の南川からご紹介します。 * 9周年企画 “黒歴史”をロケットで宇宙に飛ばす pixiv黒歴史 そもそも WebSocket とは？ WebSocketはTCP上で動く双方向通信のための通信規格です。 Webページの読み込みで行われているような、クライアントがサーバにデータを要求し、サーバはクライアントにレスポンスを返すというHTTPの通信ルールとは違います。サーバと長時間コネクションを確立し、Socketのようにデータのやり取りを行います。そして、コネクションを
![大量接続に耐えるWebSocketアプリケーションサーバ構築のコツ - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/95f08ea3414673bb0131022fbc9dc354bb7483ba/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fd%2Fdevpixiv%2F20161129%2F20161129204837.png)
フロントエンジニアが今話題のFirebaseについて語りたい - Qiita
最初に 最近、Firebaseについての記事をよく見ます。 稚拙ながらもFirebaseについて注目している一人として語りたい。 知識不足(特に後述の歴史の認識)のため、駄文乱文あると思います。ご指摘いただけると幸いです。 React + Redux + Firebaseの実装記事を書きました。 Firebase Databse導入のために考えた4つのポイント。NoSQLと真剣に向き合った時ぶつかったことを書きました。 Firebaseとは mBaas(Mobile Background as a Service)の一つで、Googleの買収で一気に知名度が上がりました。 今までも、十分使えるものでしたが、2016年のGoogle I/Oの発表で統合プラットフォームとしての風格がムンムン漂ってきました。 また、Parse終了の知らせがでるやいなや無料プラン(SPARK)の改変、push n
これからReactを勉強する人が最初に見るべきスライド７選
React.js（以下、React）は、Facebookが作ったJavaScriptのビュー・ライブラリです。最近よく耳にするけどあまり理解していないという人も多いのではないでしょうか。 そこで今回は、 「Reactって最近よく聞くけど一体何？」 「jQueryと何が違うの？」 といった疑問にこたえてくれる初心者向けのスライドを厳選して紹介します。JavaScriptは苦手だけど概念だけは理解したいといった人のために、なるべくわかりやすいものを選んでいます。 ＊もし、「このスライドもおすすめ」というものがあったら教えてください。 Reactとは？ なぜ人は必死でjQueryを捨てようとしているのか なぜjQueryを捨て、Reactを採用しようとするのかについて説明してくれるスライドです。ページ遷移のないシングルページアプリケーション（SPA）への需要が増えてきているといった最近のトレンド
【翻訳まとめ】jQuery 3.0 アップグレードガイド - Qiita
はじめに jQuery 3.0が正式リリースとなったので、最新のアップグレードガイドをまとめようと思います。 原文から一部わかりやすいように言い換えたり、補足したり、省略したりしています。 注意: 長いです。主要な変更点は前回の記事【翻訳まとめ】jQuery 3.0 alpha リリースノートを参照してください。 jQuery Core 3.0 Upgrade Guide 全体像 APIを綺麗にしてバグを修正しました。 - 一部破壊的な変更があり - 既に非推奨と公表していたAPIを削除 - ドキュメントにない隠しAPIの削除 - 特定の入力値に対する既存APIの振る舞いを修正 サポートブラウザ IE9 以上 Chrome, Edge, Firefox, Safariの最新版とそのひとつ前のバージョン Operaの最新版 iOS 7 以上のモバイルSafari Android 4.0以上
Google AJAX Feed API が「403 : This API is no longer available.」を返す件について | astone.jeez.jp
Home » Programming » 【復旧済み】Google AJAX Feed API が「403 : This API is no longer available.」を返す件について 【復旧済み】Google AJAX Feed API が「403 : This API is no longer available.」を返す件について ※15/12/04 10:00 最終更新 【重要】本現象は2015/12/04の午前にとりあえず復旧したようです。 情報を追いやすい様に、追記を上に追加しております。 Google developersの公式フォーラムの情報はこちら とりあえず現状を知りたいかたはこちら 本文から読まれるかたはこちらからどうぞ！ また、転記している代替案はフロントエンド側のみで実現可能そうなものを抜粋しております。PHPやRuby等のサーバーサイド実装を使っての解
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロントエンドのトレンド〜サーバーレスSPA、Jamstack〜
GitHub - bigskysoftware/htmx: </> htmx - high power tools for HTML
ユーザのブラウザで起きた JavaScript のエラーを収集する - Qiita
【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog
