今更だけどPromise入門 - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Promiseアンチパターン - くじら公園
Promise Anti-patternsを翻訳させて頂きました。著者のtaoofcodeから許可を頂いて翻訳、投稿しています。 Promiseは一度理解してしまえば簡単だが、いくつか頭を抱えさせるパターンがある。ここにあるのは私が経験したいくつかのアンチパターンだ。 ネストされたPromise 君は複数のPromiseをネストする: loadSomething().then(function(something) { loadAnotherthing().then(function(another) { DoSomethingOnThem(something, another); }); }); 君がこれをする理由は、両方のPromiseの結果で何かをする必要があるからだ。then()は一つ前のPromiseの結果しかコールバックに渡せないのでここでチェインを用いることはできない。 だが
node.jsとjQueryでスクレイピングするウェブアプリの作り方
やっぱ jQuery 便利ですよ(*´・ω・)(・ω・｀*)ﾈｰ セレクタ使って jQuery でダカダカやってると、DOM とか正規表現でネチネチやるのがバカらしくなっちゃいます。 と日頃から思ってたりしてまして、サーバサイド JavaScript がメインストリームになって、jQuery でウェブアプリをコーディングできれば超ラクできるかもと期待しています。 で、先日サーバサイドJavaScriptとjQueryでスクレイピングという記事をうpったところ、やっぱ Rhino じゃなくて node.js がえーんよ(´･ω･｀)というコメントを頂きましたので、node.js と jQuery でサーバサイド JavaScript スクレイピングしてみることにしました。 今回は node.js ですので、単にスクレイピングする（コマンドラインから実行する）スクリプトだけじゃなくて、スクレイ
selenium-webdriverの紹介とAPI翻訳 - Qiita
こんにちは、中島 (@nazomikan)です。 ※この記事は2016年に書かれた記事でver2系を対象に書いています。 ver3,4-betaで色々変わってるのでその辺についてのキャッチアップはこちらの記事をご利用ください 最近のselenium-webdriverの話 本記事は株式会社ネクスト(Lifull) Advent Calendar 2016の1日目の投稿です。 ブラウザベースのテストツールのseleniumをコードから実行するselenium-webdriverのnode版について導入からAPI紹介までしていきます。 あと手元で作業するにあたってAPIの翻訳(ソース上にうまってるdocsの翻訳)をしてたのでそれも載せておきます(むしろそっちメイン) 導入 webdriverのテスティングについて テストの書き方 よくある使い方 API翻訳 driverのAPI navigat
Seleniumアレルギーのための処方箋 - Qiita
何年も前、SeleniumやWebDriverの話で盛り上がった記憶があります。ただ、その当時はまだRailsなどバックエンド中心の文脈でした。今、フロントエンドに軸足が移る中、ブラウザテストの状況はどうなったのでしょう? 不思議なことに、フロントエンド界隈でそれほど話題に上がって来ないですよね (私の周りだけ?)。結構大事なのに。実は皆さん、「Seleniumアレルギー」なんじゃないですか? 公式サイトに漂う ゼロ年代感(下図)。Javaへの躊躇、「めんどくさい」と聞かされ続けた過去、無意識に避けてしまうのがSeleniumです。 ただ、フロントエンドの文脈でこそ、ブラウザテストは重要度を増しています。そこで「Selenium触りたくない病」の筆者が、 四苦八苦した背景 と、2016年だからこそ 見えてきた落とし所 を書いてみたいと思います。 註: 思ったより長文になってしまいました。先
PhantomJSラッパーのNightmareでUIをテストする - Qiita
C:\Users\**>npm install nightmare | > weak@0.3.3 install C:\Users\**\node_modules\nightmare\node_modules\phantom\node_modules\dnode\node_modules\weak > node-gyp rebuild C:\Users\**\node_modules\nightmare\node_modules\phantom\node_modules\dnode\node_modules\weak>node "C:\Program Fil es\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild Building the projec
oratta.net - oratta リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
さいきょうの二重サブミット対策 - Qiita
この記事はシステムエンジニア Advent Calendar 2015 - Qiitaの記事です。 弊社アーキ部で@kawasimaさんに教えてもらったさいきょうの二重サブミット対策について書いていきます！ 二重サブミットが発生するケース 不正な更新リクエストが発生するケースとして、以下のものが考えられます。 サブミットボタンをダブルクリックする 戻るボタンで戻って、再度保存ボタンを押す 完了ページでブラウザリロードする CSRF攻撃による不正な更新リクエスト 1. サブミットボタンをダブルクリックする 確定ボタンをダブルクリックすることによって、ユーザが意図していないリクエストが発生してしまうケース。 2. 戻るボタンで戻って、再度保存ボタンを押す 処理完了画面から戻るボタンで前の画面に遷移し、再び確定ボタンを押すケース。 本来は入力➡︎確認➡︎完了の画面遷移が適切だが、その画面遷移にな
webブラウザにPush通知送るサーバとjsのサンプル - DRYな備忘録
このドキュメントは 以下の２つのドキュメントをよりプリミティブに理解するためのDRYな備忘録です。 Adding Push Notifications to a Web App | Web | Google Developers The Web Push Protocol | Web | Google Developers 背景 かつて サーバからブラウザにプッシュ通知を送りたい（非WebSocket、非ロングポーリング） - DRYな備忘録 これ書いたけど、改めてProgressive Web Appのドキュメント行ったらアホみたいに分かりづらくなってて不条理を感じたので書きます。 サーバからPush通知がブラウザに対して送れて、ブラウザのjsが閉じててもServiceWorkerが生きてるからNotificationが出る、っていうやつです。最近だとウェブのGmailと
第6回 ASP.NETによるWebアプリ開発（アプリケーションの開発 3）
第6回 ASP.NETによるWebアプリ開発（アプリケーションの開発 3）：連載：ASP.NETによる軽量業務アプリ開発（1/3 ページ） コマンドラインとエディターのみでWeb開発する方法を説明。今回は前回作成したASPXのWebサービスを利用するクライアント側JavaScriptについて説明する。 連載目次 本連載の目的 本連載では、部門コンピューティング（Excel＋VBAで簡単な業務アプリを開発するようなこと）レベルの開発手法として、ASP.NETを利用した軽量Webアプリ開発を説明する。タブレットを利用した業務アプリのプロトタイプ実装や、Excel＋VBAの業務アプリのWebアプリへの移行などの参考にしていただきたい。 なお本連載では、最小限のセットアップでWindowsを活用できるよう、可能な限りGUIツールを利用することなくコマンドラインとエディターのみで開発する方法を説明し
localStorageの挙動と簡単なラッパー - Block Rockin’ Codes
[追記] テストのソースだけを見られる様に、gistに張りました。 gist:542451 localStorageを使ってちょっとやってみたいことが有るので、まずはlocalStorageを色々使って見ようと思ったのですが、思った以上にブラウザごとの挙動に差があって、イベントどころかだだ値を取り出すだけでも、色々気をつける必要があることが分かりました。 以下は、手元の Mac に有った FireFox 3.6.8 Chrome 5.0.375.126 Sagari 5.0 (6533.16) の環境で試した結果です。 格納出来るデータ W3Cの仕様ではJSのオブジェクトであれば一通り格納出来るように定めているらしいですが、現在は単なる文字列しか入らない物が多いようです。 なので、オブジェクトを格納するためには、JSONをシリアライズして入れる形になると思います。 Native JSON
[Node.js] Socket.ioで双方向通信チャットアプリを構築 〜 JSおくのほそ道 #005 - Qiita
// 1.モジュールオブジェクトの初期化 var fs = require("fs"); var server = require("http").createServer(function(req, res) { res.writeHead(200, {"Content-Type":"text/html"}); var output = fs.readFileSync("./index.html", "utf-8"); res.end(output); }).listen(8080); var io = require("socket.io").listen(server); // ユーザ管理ハッシュ var userHash = {}; // 2.イベントの定義 io.sockets.on("connection", function (socket) { // 接続開始カスタムイベン
![[Node.js] Socket.ioで双方向通信チャットアプリを構築 〜 JSおくのほそ道 #005 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/09dd38f9be21daf39b9c8f9c34593799cbd5f647/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzkzMzAlMkZwcm9maWxlLWltYWdlcyUyRjE1MjY4ODU0NDY_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZWJkYzFhZTg1MDg3M2QwOTZmMzExNDA0MDhlZjA4Yjc%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D5126823b99606645c55a20cd5c84b61e%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCTm9kZS5qcyU1RCUyMFNvY2tldC5pbyVFMyU4MSVBNyVFNSU4RiU4QyVFNiU5NiVCOSVFNSU5MCU5MSVFOSU4MCU5QSVFNCVCRiVBMSVFMyU4MyU4MSVFMyU4MyVBMyVFMyU4MyU4MyVFMyU4MyU4OCVFMyU4MiVBMiVFMyU4MyU5NyVFMyU4MyVBQSVFMyU4MiU5MiVFNiVBNyU4QiVFNyVBRiU4OSUyMCVFMyU4MCU5QyUyMEpTJUUzJTgxJThBJUUzJTgxJThGJUUzJTgxJUFFJUUzJTgxJUJCJUUzJTgxJTlEJUU5JTgxJTkzJTIwJTIzMDA1JTIwJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9OTU1MDNhYWNlODBlMzg3YTk4ZmVkODdjNGJhNjMwYWE%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBob3NvbWljaGkmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1jZDVlMGZjYWRlYjFlZWZkOTc3ZDg1NjBkOTFmYTM4Nw%26blend-x%3D242%26blend-y%3D454%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26txt64%3DaW4gVW5pcG9z5qCq5byP5Lya56S-%26txt-x%3D242%26txt-y%3D539%26txt-width%3D838%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D28%26s%3D28ec0142f197664cbe436a813d3b56c4)
<input> - フォーム部品：入力欄 - とほほのWWW入門
形式 <input type="..."> サポート LS / H2 / e2 / Ch1 / Fx1 / Sa1 / Op1 / N2 / i1 カテゴリ フローコンテンツ フレージングコンテンツ インタラクティブコンテンツ(※1) パルパブルコンテンツ(※1) リステッド, ラベラブル(※1), サブミッタブル, リセッタブル, リアソシエイタブル, フォーム関連要素 ※1 type=hidden 以外の場合 親要素 フレージングコンテンツ を子要素に持てるもの 子要素 無し(Empty) タグの省略 開始タグ:必須 / 終了タグ:無し 属性 グローバル属性 accept alt autocomplete autofocus checked dirname disabled form formaction formenctype formmethod formnovalidate fo
Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点のまとめ
Bootstrap 4ではそのインストール方法をはじめ、グリッドの単位やレスポンシブ用のclassが変わり、そしてカードやツールチップなどの新しいコンポーネントやレイアウトにFlexboxも利用できるようになりました。 Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点をまとめたリストを紹介します。 How to Migrate from Bootstrap Version 3 to 4 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 Bootstrap 4で変わった点 Bootstrapのファイル構造 Bootstrap 4のインストール グリッドシステムのアップデート リセットは、「normalize.css」から「reboot.css」に classの変更とアップデート タイポグラフィ テー
JavaScriptで金額の数値表示とカンマ区切り表示を切り替え。
example JavaScriptで金額の数値表示とカンマ区切り表示を切り替え。 フォーカス時は数値で表示し、フォーカスが外れたらカンマ区切り(プラス円表記)で表示し、データベースへ保存する際は数値で、という要望があったので。 ぶっちゃけ、めんどくさい。 サンプル window.onload = function(){ //読み込み時にエンコード $(".money").each(function(){ addFigure(this); }); //フォーカス時にデコード $(".money").focus(function(){ delFigure(this); }); //フォーカスが外れた時にエンコード $(".money").blur(function(){ addFigure(this); }); //保存時は全ての値をデコード $("#save").click(functio
kamoland
AutoHotKeyを使って，キーを押すことでモニター間のマウスカーソル移動ができるようにするという話です． ディスプレイを横に並べて3枚使っているのですが，マウス移動が，距離が長くなり少々めんどくさいというのがあります． こちらのサイト トリプルモニタ間のマウス移動をボタン1つで実現！圧倒的に快適な業務環境の構築メモ を参考にして，F1，F4キーで左右のディスプレイを切り替えるための，AutoHotKeyスクリプトを作りました． F1:: SysGet, MonitorC, Monitor, 1 SysGet, MonitorL, Monitor, 3 CoordMode, Mouse, Screen MouseGetPos, x, y If x < %MonitorCRight% MouseMove, (MonitorLLeft + MonitorLRight) / 2, (Monit
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
for文の中で非同期関数を使いたいときでも慌てずPromiseする - Qiita
TEST CORDING » node.js 怒濤の50サンプル!! – socket.io編
ChromeのヘッドレスモードをMacOSXで試してみた - Qiita
リダイレクトの方法 - Qiita
