これさえあればWEBアプリが簡単に作れる！Nuxt・Express・Vuetifyを使ったログイン画面の実装テンプレ - Qiita
目的 nuxt.jsを使うことでWEBアプリが簡単に作れるようになりました。 加えてVuetifyやExpressを使うことで、高度なWEBアプリが開発できます。 今回はそれらを使ったログイン画面の実装テンプレートを紹介します。 実装に向けて https://github.com/nuxt-community 基本このGithubを参考にしました。 Expressやauth-moduleのテンプレートはありますが、 まるっと統合したものが欲しかったので、これらを応用して作成しました。 使用したフレームワーク・ライブラリ nuxt Express（API） vuetify（デザイン） axios（API通信） ドキュメント Nuxt auth-module Vuetify Express GitHubレポジトリ ソース解説 フォルダ構成 ./api # Express ./api/index
PuppeteerとJasmineを使ったE2Eテストの自動化 - Qiita
やりたいこと Puppeteerでクローリングした内容を元にJasmineで簡易に実装したE2Eテストを自動化したい。 背景 よくある管理画面として、所属によってアクセス可能な画面が分かれていたり（例：社内向けの画面、広告主向けの画面、代理店向けの画面など）、また担当者に与えられる権限によっては画面の表示（例：偉い人には「承認」ボタンを表示など）が異なっていたりします。 そのため、VIEW側で「こうゆう条件の場合はこうゆう表示をする」などの出し分けが複雑になりがちです。 例えば、社内、代理店、広告主で共通して使うElement（CakePHPで開発している場合、Elementは各VIEWの共通するコードをまとめる時に使います。）などにおいて、if文でフラグをチェックして表示を出し分けたりしている場合、そこのコードを変更した際に、社内、代理店、広告主のそれぞれの画面にログインして想定する動作
PuppeteerとResemble.jsを使ったスクショ比較によるピクセル差分テスト - Qiita
やりたいこと Puppeteerによるクローリングでスクリーンショットを取得する。 Resemble.jsを使って時系列による二地点の画像比較を行う。 Resemble.jsは二つの画像の比較を行った上で、差分部分のピクセルに色を付けた比較画像を出力してくれるので、差分ピクセルが一定比率を超えた場合に、Jasmineによるテストが落ちるようにしたい。 背景 「１ピクセルを笑うものは、１ピクセルに泣く。」 Webメディアを運営している会社などでは、１ピクセル程デザインがずれただけで収益が大きく変動すると言うのもよく聞く話ですね。 そこまでシビアな環境にいなくても、例えば、cssをちょこっといじりたい時に、他の画面のどこのデザインに跳ねてるのかが分からず、不安になったりしますよね。そのcssが長い年月をかけて肥大化していて、複雑怪奇に色々なところに当たっていたりするものだったりするとなおさらで
[Chromeヘッドレスブラウザ活用] セキュリティ解析ツール | Webアクセス先の可視化/調査GUI - Qiita
概要 この記事では、私の作成したWebリソースのアクセス状況の可視化/分析ツール（beta版）を紹介します。 私はこのツールをサイバーセキュリティの調査の用途を念頭に置いて、開発しました。その他、プライバシーポリシーの順守状況の調査など、顧客情報にまつわるコンプライアンス状況の調査にも利用を想定しています。 このGUIツールは、あるページ（ランディングページなど）にアクセスした際に付随してアクセスが発生するインターネット上のリソースを「グラフ図」として可視化すると同時に、クリックしたリソースの詳細情報を調査確認する機能を備えています。 Adso | Web Access Analyzer 動作イメージ 更改しているGithub上のデモ動画は、以下の通り。 Wikipediaの「横浜中華街」にアクサスした際、付随してアクセスが生じる画像やJavascriptなどの要求/応答関係をグラフとして
![[Chromeヘッドレスブラウザ活用] セキュリティ解析ツール | Webアクセス先の可視化/調査GUI - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/15369a16b9e7b8cee584c3540b08c6584b9e92a1/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGNDI4NDglMkZwcm9maWxlLWltYWdlcyUyRjE1Mjg1OTE4MDg_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9MjIzOTZhMzY5YjllMTE1ZWYxN2I3MzgyZDBjMjAzYmQ%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dbf5625829fac6bcf719f57d82fe2bc6d%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCQ2hyb21lJUUzJTgzJTk4JUUzJTgzJTgzJUUzJTgzJTg5JUUzJTgzJUFDJUUzJTgyJUI5JUUzJTgzJTk2JUUzJTgzJUE5JUUzJTgyJUE2JUUzJTgyJUI2JUU2JUI0JUJCJUU3JTk0JUE4JTVEJTIwJUUzJTgyJUJCJUUzJTgyJUFEJUUzJTgzJUE1JUUzJTgzJUFBJUUzJTgzJTg2JUUzJTgyJUEzJUU4JUE3JUEzJUU2JTlFJTkwJUUzJTgzJTg0JUUzJTgzJUJDJUUzJTgzJUFCJTIwJTdDJTIwV2ViJUUzJTgyJUEyJUUzJTgyJUFGJUUzJTgyJUJCJUUzJTgyJUI5JUU1JTg1JTg4JUUzJTgxJUFFJUU1JThGJUFGJUU4JUE2JTk2JUU1JThDJTk2JTJGJUU4JUFBJUJGJUU2JTlGJUJCR1VJJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MjU2MDY4M2VlNWQwMDZkODI1MWFjNWE1YWY1MDZmZjA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBZb2hLbWImdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1kYjhhZTZiYmZlYjU0OTZkMjg3NTU4ZGZhYmZmYTZjYw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Df2ab0aaa21e3ed3ba500d9c743285c9d)
Box API を叩くその前に - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? APIリファレンス 英語：https://developer.box.com/reference 日本語：https://ja.developer.box.com/reference 日本語はところどころ崩れてるので、英語版を参照したほうがいいです(2018/10現在) 認証方式 ざっくり。 OAuth 2 と、OAuth 2 with JWT がある OAuth 2 と、OAuth 2 with JWT では、扱うユーザータイプが異なる OAuth 2 管理対象ユーザー[Managed Users ]、外部ユーザー[External
自サイトのリンク切れを見つけるスクリプト(SPA対応版) - Qiita
自サイトのリンク切れを網羅的に見つける ユーザコンテンツや外部リンクを直接参照している場合などに問題となるのがリンク切れです。 外部リンク切れ(404エラー)はサイトの評価を下げる直接の原因にはならないといわれていますが、 【SEO】外部サイトへのリンク切れは検索エンジンからの評価を下げない リンク切れがあることでユーザ体験を阻害させ、離脱に繋がります。 簡易的に見つけるには次のようなW3Cでも用意されてはいます。 W3C Link Checkcer が、サイト全体から見つけるにはサイト全体のリンクを総チェックする必要があります。 書いてみた スクレイピングライブラリで有名なpuppetterを使用して自サイトをスクレイピングしてみます。 aタグとimgタグを対象とします。 puppeteerでレンダリングを実行完了してから、urlチェックするため、SPAなサイトでも対応可能です。 sit
最近のNode.jsプロジェクトのだいたいテンプレ - Qiita
サンプルプロジェクト 要素 Typescript ts-node koajs koa-router tslint (standard) mocha, chai log4js config 説明 TypeScriptで書いて、tscはせずにts-nodeでそのまま動かしている。 ts-nodeだとサーバーなどは起動頻度が低くていいけど、コマンド実行系が遅くてめんどくさいのでtscするように変更。 Webまわりはkoajsを使っている。expressに差し替えても問題ない。 tslintはtslint-config-standardを使っているけどこのへんは好み。 DBは含めてないが、mongooseやsequelizeなどその都度好きなのを使う。 index.tsとserver.tsを分けているのはAPIのテストを 走らせるため。
FlowtypeとTypeScriptにおけるHOC(またはrecomposeの)型付けについて
型付け地獄へようこそ 個人的にはここ2, 3年ほどJavaScriptの型付けとしてFlow(Flowtype) をメインで扱ってきていたのですが、いよいよTypeScriptもバージョン3になり型の表現力も増し、さらにBabelでもうまくいけるようになったのを見てきたので、TypeScriptもちらほらやってきています。 しかしながら、主にReactの開発でTypeScriptを使っていますが、Flowtypeと比べてどうも腑に落ちない点が多々あります。その一つがHOCの型付けの際の型推論です。 まずは普通のpresentational (dumb) component。描画要素およびハンドラをプロパティで受け取るだけ。 import * as React from 'react'; export type CompProps = { title: string, count: numb
Django×Electron でデスクトップアプリ開発はできないの？ - Qiita
はじめに Django Electron Django とは、「PythonでWebアプリを開発する際に使うWebフレームワーク」です。 Electron とは、「Web技術でデスクトップアプリを作ることができるエンジン」です。 つまり、***Django×Electron で『Python 製のデスクトップアプリケーション』***が作れる！ そんな……夢を見たんだ。 Is it a good idea to use Django in making a desktop app? How difficult is it? なんだか良くないっぽい。 どうりで「Django Electron」や「Django デスクトップアプリ」と検索しても人気記事が出てこないわけだ。 DJANGO Y ELECTRON PARA APLICACIONES MULTIPLATAFORMA 一応、実践している記
TypeScriptの型初級 - Qiita
この記事は「TypeScriptの型入門」の続編です。入門の続編ということなので初級というタイトルにしてみました。TypeScriptの型よくわからんという方は先に入門から読むことをおすすめします。入門レベルのTypeScriptくらい分かるよという方は読まなくても大丈夫です。 TypeScriptの型入門 さて、前回の記事ではTypeScriptの型を一通り紹介しました。この記事ではその続編として、実用上必要になるTypeScriptの型の挙動を理解したり、標準ライブラリに存在する型の使い方を理解することを目標にします。前回に引き続き、あくまでTypeScriptの型に関する話ですから、JavaScriptの言語機能とか、TypeScriptの構文とかの話はしません。悪しからずご了承ください。 最終更新： 2019-03-16 (TypeScript 3.4に対応しました） union型
Ethereumのフレームワーク「Truffle」とローカル開発環境「Ganache」入門ログ - Qiita
概要 Ethereumを使ったスマートコントラクトの開発をしていて、ローカルの開発環境としてGanacheが便利だよ、と聴いたのでその入門ログを残します。 リアルタイムで導入しながら記事を書いています。たまにはこういう記事の書き方もいいですね。 前提 当方、メインネットへのスマートコントラクトのデプロイ（という言い方が正しいかどうかすらわからない）とかやったことないですし、入門書を読んで一通りやったくらいです。 これくらいのレベルの人間でも環境構築して動作させるくらいは訳ない、という意味でのGanache解説記事だと思っていてくださいm(_ _)m 導入手順 Google検索 「Ethereum Ganache」でGoogle検索すると Ethereum のローカル開発環境 Ganache を使ってみる Truffle Suite | Ganache - Truffle Framework
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AmazonLinux (Docker)にNode.js & npmをインストールする。 - Qiita
GitlabCI でLambda@Edge で動かすようのnode.js のテストを書く - Qiita
【Angular7】 json を module として扱う - Qiita
Angular js gives developer control - Qiita
Node.jsでAmazon CloudFrontの署名付きURLを生成する - Qiita
TypeScript で型定義ファイル( d.ts )がないときの対処法 - Qiita
JavaScriptのぐぐりづらい記号の名前を知る - Qiita
angular2-materializeでdatepickerのeventを受け取る - Qiita
VueとVuexを使った簡単なCRUD - Qiita
