Elm 0.19で作るTodoアプリ?(0) docker + webpack で環境構築 - Qiita
はじめに 前回、elm0.19の開発環境を構築したので、 elmを試すために、Elm 0.18で作るTodoアプリ(1)を試してみる。 ElmをSPAではなく一部適用にしたいので調整する。 開発環境 Windows 10 Vagrant 2.1.5 Virtualbox 5.2.18 Ubuntu 18.04 LTS (Bionic Beaver) Docker version 18.06.0-ce, build 0ffa825 docker-compose version 1.22.0, build f46880fe ファイル構成イメージ 以下のようなファイル構成としたい。 const path = require("path"); const webpack = require("webpack"); const merge = require("webpack-merge"); co
ブラウザレンダリング後の要素をスクレイピングする - Qiita
自分で作っているプロダクトで、一部他のサイトからスクレイピングをする必要があったものの、JSで動的に生成されている要素だったため、スクレイピングができませんでした。 そのため調べてヘッドレスブラウザを使うことにしたのですが、いろいろあってスクレイピングする必要がなくなり、調べた時間を無駄にしたくないと思いまとめました。。 ヘッドレスブラウザとは 調べてみるとGUIのないブラウザと説明をよく見ます。 ヘッドレス Chrome ことはじめによると下記のような説明がありました。 ヘッドレスブラウザは、GUI を持つ必要のない自動テスト環境やサーバー環境にとてもよいツールです。例としては、実際のウェブページに対してなにかテストを実行する、そのページの PDF を生成する、またはただ、そのページがどう表示されるかを検証するなどが挙げられるでしょうか。 GUIはないけどブラウザが行ってくれている処理を
webpack4対応webpack-dev-serverの主要な設定オプション(CLI,webpack.config.js)の意味と挙動 - Qiita
概要 Webpack 4を利用した開発に便利な webpack-dev-server の設定メモです。 webpack-dev-serverのソースコードと公式wiki、公式Docを参考に実動確認した結果を書きます。 HMR等オートリロード系の設定(--hotとかとか--inlineとか)やよく使いそうなCLIオプションなど理解しておくためのメモです。 環境 本投稿で使っている環境は以下の通り。 webpack-dev-server:3.1.7 webpack:4.17.1 webpack-cli:3.1.0 webpack-dev-server とは webpack-dev-serverはwebpackを用いたフロントエンド開発のときに利用できる開発用のwebサーバー。 *.jsファイルやリソースファイルを更新すると即座に反映してくれる機能をもっている。 webpack-dev-serv
Puppeteerを使ってThe EconomistのWebスクレイプを試した - Qiita
スクレイプ対象 英語の学習にも役立てたいのでスクレイプ対象は購読しているThe Economist。 The EconomistのPuppeteerによるスクレイピングなので、作ったライブラリの名前はPuppenomist。良いもじりだと思っている。 学び ログイン処理 ログイン処理を行なっているPuppeteerの例は少ないので実例として参考になるのでは。 マナーを守ったスクレイピング The Economistのrobots.txtに「5秒ごとのアクセス」とあるので、割りに時間がかかる。1冊分で5,6分、一年分だと数時間になる。数時間だと１回では無理なので、ログを残して途中から再開できるようにした。 RECAPTCHA サイト側ではgoogleのRECAPTCHAが設置されている。 詳しくは書かないけど、RECAPTCHAに引っかかりやすいページや挙動というものがある。 挙動に関しては
Botkitのスクラッチ構築テンプレ - Qiita
var Botkit = require('botkit'); const controller = Botkit.slackbot({ debug: false, retry: Infinity //https://botkit.ai/docs/readme-slack.html#botkitslackbot }); controller.spawn({ token: "xoxb-から始まるトークン" }).startRTM(function (err) { if (err) { throw new Error(err); } }); /** * RTM APIのイベント * これがないと「Error: Stale RTM connection, closing RTM」というエラーになる */ controller.on('rtm_open', (bot, message) => {
React開発環境構築2018 - Qiita
この記事について この記事では実際にReactの開発環境をセットアップする方法を説明します。ReactなどのSPAでネックになる速度を改善するための手法としてサーバーサイドレンダリングも行います。 出来る限り短く説明するReact.js入門 | Reactとは？を解説してくれている良記事 フロントエンド開発についてまだよく知らないという人は下の記事を読んでおきましょう。 今時のフロントエンド開発2017 (1. 愚痴編) 2018年の最先端フロントエンドエンジニアになろう フロントエンドとはいえ、今回は静的サイトではなく動的サイト（サーバーサイドレンダリングを行うため）を作成するのでサーバー側の話がメインとなります。 ユーザー体験を向上させるサーバーサイドレンダリングJavaScript — 歴史と利点 実際のところ「ブラウザを立ち上げてページが表示されるまで」には何が起きるのかではブラウ
ChromeとFireFoxのHeadless機能を使ってブラウザーテスト駆動開発[gulp+karma+jasmine&GitHub+TravisCI] - Qiita
var gulp = require("gulp"); var browser = require("browser-sync").create(); var concat = require("gulp-concat"); var uglify = require("gulp-uglify"); var Server = require("karma").Server; /** * server setting */ gulp.task("server", function () { browser.init({ server: { baseDir: "./", index: "index.html" } }); }); /** * browser reload */ gulp.task("reload", function () { browser.reload(); }); /**
![ChromeとFireFoxのHeadless機能を使ってブラウザーテスト駆動開発[gulp+karma+jasmine&GitHub+TravisCI] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/73ec984938c42960cf38bbf0f5003cfdecbdaf27/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9Q2hyb21lJUUzJTgxJUE4RmlyZUZveCVFMyU4MSVBRUhlYWRsZXNzJUU2JUE5JTlGJUU4JTgzJUJEJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgzJTk2JUUzJTgzJUE5JUUzJTgyJUE2JUUzJTgyJUI2JUUzJTgzJUJDJUUzJTgzJTg2JUUzJTgyJUI5JUUzJTgzJTg4JUU5JUE3JTg2JUU1JThCJTk1JUU5JTk2JThCJUU3JTk5JUJBJTVCZ3VscCUyQmthcm1hJTJCamFzbWluZSUyNkdpdEh1YiUyQlRyYXZpc0NJJTVEJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1jYWU5YWE4NTk1NDM5ZTlmN2NjY2E5NjMzNWExMzExZA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBpZW5hZ2EmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTU0YjExMjVmYjFiMDQ0OGI1Y2MwNWU0MzA3MjZkY2I3%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44K944OL44OD44Kv44Og44O844OW%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D9d72a14ddb27cce1225a86aa8d1c18f9)
LambdaからDynamoDB操作 - Qiita
エヌシーアイ総合システムのmizu-ponです。 主に金融業務系システムの開発をしています。 AWSは勉強中ですが、知り得た知識などを載せていければと思います。 今回はLambdaからDynamoDBの操作(参照/更新)を行うまでの話です。 Lambdaって？## AWSが提供するサービスのひとつ。 ソースコード実行のためにサーバを立てる必要がなく色々と楽。(サーバレスアーキテクチャ) 幾つかの言語(Java,node.js(JavaScript),C#,Pythonなど)に対応している。 DynamoDBって？## AWSが提供するNoSQLデータベース。 NoSQLは一般的に高速かつスケールアウトに強く、IoT/ビッグデータ向きといわれている。 データをキーとバリュー(値)の組み合わせで管理する(Key-Value型) AWSコンソール画面## こんな感じです。リージョン(拠点)の指定
websocketで映像を送受信するのでっち上げた=>スマホの電源の関係か24/365運用は無理=>0.5FPSにしたら24時間稼働OK - Qiita
websocketで映像を送・受信するの作った。 古めのスマホがネットワークカメラになる。 iPhoneでは動作確認していない。 chromeにて動作確認 https://github.com/modeverv/SendAndReceiveVideoWithWebSocket 追記 ちょっと動かして見たけど充電が電力消費に追いつかぬ。24H/365運用は無理。 リクエストしたら静止画をとる感じに仕様変更すとか、それこそ本式のネットワークカメラ入れたほうが良さそう。 まぁ、簡単に実現できるよーということでこの投稿は終了。 追記2 24稼働いけました。0.5FPSという感じにしたらなんとか。 Alfredとかどうやってるんだろう。 Canvasの処理がくそ重いのがそのまま出てる感じなのでこの辺はアプリにしてどうにかしないとですね。 ともかく、いけました、24時間稼働！！。 navigator.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue - v-bind:style で left プロパティの値が変化しない - Qiita
Google App Engine (AppEngineStandard)で動かせるruntime - Qiita
TypeScript3 tsconfig.jsonで出力先ディレクトリを設定する。 - Qiita
Above the fold（ファーストビュー）に含まれる CSS を webpack を使ってインライン化する - Qiita
今から始めるReact入門 〜 Redux 編: Redux 単体で状態管理をしっかり理解する - Qiita
Vue / Vuetify / Jest での開発環境構築 - Qiita
ExpresssでSalesforceと連携するWebアプリをサクッと作成する その２ ユーザ情報取得編 - Qiita
ExpresssでSalesforceと連携するWebアプリをサクッと作成する その１ OAuth認証編 - Qiita
Node.js / npm をインストール (Mac環境) - Qiita
Express(Node.js)とMongoDBで人物プロフィールを登録・取得するAPIの作成 - Qiita
Reactでテキストボックス入力値を取得する - Qiita
