画像の保存を禁止する方法とその回避方法 - Qiita
Webサイトによっては掲載する画像を保存できないようにしなければいけない時があります。 今回は画像がダウンロードできないようにするための対策とその回避方法を紹介します。 回避方法に関しては既存のサイトでも使えるかもしれないので、悪用厳禁です！ また、ここに載っている方法は回避可能なので他の方法を検討しなければいけません。 個々の内容は昔からあるテクニックなので何番煎じな内容ですが、まとめ記事として残しておきます。 TL;DR フロントエンド: 透明の画像を被せる フロントエンド: 右クリックを禁止する フロントエンド: ドラッグを禁止する バックエンド: 画像のURLから直接アクセスできないようにする 環境 フロントエンドはChromeで確認しています。 バックエンドはnginx、Node.jsで確認しています。 OSはmacOS 10.13で確認しています。 透明の画像を被せる 保存され
ESLint v5.0.0 変更点まとめ - Qiita
/*eslint no-unused-vars: error */ function f(a, b, c, d) { // 従来は d だけ警告されていたが、今後は c と d が警告される。 return b } #10143: eslint CLI コマンドに与えたファイルパス (or glob) にマッチするファイルが存在しない場合にエラーを投げるようになりました。 これまで、ファイルパスの typo 等で存在しないファイルを検証しようとした場合、ESLint は正常終了していました。そのため、ファイルが存在しない場合と検証エラーが無い場合の区別がつけられませんでした。 今回の変更で、ファイルが存在しなかった場合にエラーが投げられるようになります。 ファイルが存在しないパスを eslint コマンドに渡している場合、対応が必要になります。 #10152,#10230: parserO
ブロックチェーンにまつわる7つの『不都合な真実』 - Qiita
世間では、ブロックチェーンが持て囃されています。 けれど、中には、ブロックチェーンではできないことや、ブロックチェーンじゃなくてもできることが、ブロックチェーンで実現するかのように書かれているものを目にすることもよくあります。 かなりネガティブな文章のようですが、ブロックチェーンの持つ可能性を正しく理解するには、ブロックチェーンの性質を正しく認識する必要がある、という信念によるものです。ご理解ください。 1. ブロックチェーンでの「改竄が困難」とは、システム管理者による改竄が困難という意味である 普段、銀行にお金を預けている皆さんは、銀行職員によって預金を不正に引き出されないか心配されていると思います。 また、SNSを利用されている皆さんは、SNS運営会社の社員によって、不正にご自身の投稿内容を改竄されてトラブルに発展するのではないかと心配されていると思います。 ブロックチェーンを利用すれ
styled-componentsを使ったCSS設計 - Qiita
はじめに 自分は普段フロントエンドエンジニアとして、React Reduxなアーキテクチャのアプリを作ることが多いのですが、stylingにstyled-componentsを導入しています。今回は、styled-componentsでのCSS設計について書いてみたいと思います。 styled-componentsとは JSでstyleを記述するCSS in JSのライブラリで、2019年8月現在最も人気のあるライブラリです。タグ付きテンプレートリテラルをうまく使った独自性と、明快なAPIでCSS in JSの火付け役にもなり、同じ思想を持った亜種ライブラリ(paypal/glamorous, zeit/styled-jsx等)が続々と出て来るなどある種のブームを巻き起こしました。 そもそも、Reactの登場でフロントエンド開発が「jQueryによるhtmlへの振る舞いの後付け」というスク
docker-composeを使うと複数コンテナの管理が便利に - Qiita
docker-composeを使うと、複数のコンテナから構成されるサービスを従来よりも簡単に管理できるようになる。 dockerだけで管理する場合の不便さ たとえば dockerだけでmysqlとgitbucket・redmine・リバースプロキシ(nginx)を立ち上げる場合には、次のようなコマンドをシェルスクリプト化しておく必要があった。linkオプションがあるので、コンテナの立ち上げ順序も気にしなればいけない。 # mysql docker run --name mysql \ -d \ -p 3306:3306 \ --volumes-from data-mysql \ -e 'MYSQL_ROOT_PASSWORD=password' \ mysql # redmine docker run --name redmine \ -d \ --link mysql:mysql \ -
死んだCSSを見つける方法 - Qiita
使われてないCSSであればツールで見つけられますが、そうではなく、"実質的に"使われてないCSSを見つけるにはどうすればよいでしょうか。 という問題にスマートな解決方法を記載している記事を見つけたので訳してみます。 以下はFinding Dead CSSの日本語訳です。 Finding Dead CSS 私が今週開いていたパフォーマンスワークショップで、Webサイト上で死んだCSSを見つけるテクニックが頭をよぎりました。 今、故意に『未使用CSS ( unused CSS ) 』ではなく『死んだCSS ( dead CSS ) 』というフレーズを使いましたが、これは以下のようなシナリオを想定して使いました。 数十人規模の多数のチームが開発している、数十万行のコードを含む、長期にわたって運用されている大規模なプロジェクトがあるとしましょう。 そこには既に使われていないCSSがあるだけではなく
ReactとVueのどちらを選ぶか - Qiita
主に非Web系のバックエンド開発者(C/C++, Java, Python等を使用)がReactとVueをそれぞれ簡単に触れて、感じたメリット、思ったことなどをまとめています。 色々と書いてますが、どちらも完成度の高いライブラリ/フレームワークですね。 結論 JavaScript等にあまり深入りせずにWebアプリを簡単に書きたい、あるいは効率的に書くことが目的であればVueの方がお勧めです。しかし開発者としてスキルや設計などについて中長期的にレベルアップを図りたいのであれば、Reactから学ぶことをお勧めします。 何故かと言うと、ReactとVueにはそれぞれの利用者に対するスタンスが明確に異なり、Reactの方が利用者を開発者であることを想定/期待しているからです。 Reactは利用者が「開発者」であることを想定/期待します。 What, Whyを重視する 利用者を厳しめに教育する Vu
もし、異世界転生モノのチートスキルが「Gitコマンド」だったら【その１】 - Qiita
この記事のゴール 以下についてざっくり理解することができる（かもしれません）。 commitとはなにか checkoutとはなにか 本編 僕「好きです。付き合ってください！」 帰り道、僕は勇気をふりしぼって先輩にそう伝えた。 先輩はちょっと驚いた顔をした。 そのまま笑って、何かをつぶやく。 ーー僕は、横から突然やってきた暴走トラックに跳ねられたので、何も聞けなかった。 気がつくと、森の中にいた。 僕「ここは一体…？」 薄暗い森の中。 僕「そうか、僕、あの時…」 死んだのだ。 頭に霞がかかったかのようだ。思考がまとまらない。 しかし、僕はここが異世界なのだと、何故か瞬時に分かった。 周りを見渡すと、少しはなれたところに男が立っている。 フラフラとしたおぼつかない足取り。虚ろな瞳。痩けた頬。 明らかに憔悴しきっている。 男は虚空をしばらく見つめていた。 ……そして振り絞るような声で、こうつぶや
GitHub Issuesでブログを作る - Qiita
GitHubのIssueをNuxtとNetlifyでブログ化するというのをやってみたので解説します。 デモサイト： https://gh-blog.netlify.com/ Issues： https://github.com/miyaoka/gh-blog/issues Headless CMS はじめにHeadless CMSについて解説しておきます。旧来のAPI無しのWordPressのような一体型CMSではなく、コンテンツ管理部分を切り離してAPIでやりとりできるようにするのがHeadlessなCMSです。これによりフロントの実装やデプロイが疎結合になり、好きにできるようになります。 例としてCMSにContentful、デプロイにNetlifyを使う構成だとこんな感じになります。 参考） 次世代Headless CMS「contentful」事始め - Qiita Nuxt.js
世のフロントエンドエンジニアにApollo Clientを布教したい - Qiita
こんにちは。いかがコーディングお過ごしでしょうか。 私は今更ながら最近GraphQLで遊び出し、そしてApollo Clientに出会いました。 ワクワクしました。「これは想像以上に既存のフロントエンドの設計・実装を変えるものだぞ！」と感じました。 「Apollo ClientってGraphQLクライアントでしょ？GraphQLエンドポイントない俺には関係ないな。」と思ったそこのあなた、それだけじゃないんですApollo Clientは！！！！！ 本記事では「Apollo Clientとはなんぞや」という話と「なぜ私がApollo Clientを布教したいのか」という点について語ります。実は最初は実装含めたチュートリアルを書いていたのですが長くなり過ぎたため記事を二つに分けました。この記事はどちらかと言うと概念系の話が多めで、片方にApollo Client + Reactのチュートリアル
WebサイトをHerokuで公開してドメイン取得とSSL化までの全手順
2018/6/4 公開していたサービスはAPIのリクエスト数上限を超えたため、停止いたしました ここでは元々作成したサイトも紹介していましたが、F5攻撃を受けたことでAPIのリクエスト数上限を超えてしまいました。 元々勉強の為に作成した物だったのでこのまま対策方法を学ぶのも時間が掛かりそうでしたのでサービスは終了させました。 今後のために対策方法がわかれば、次のサービスを公開する際に一緒に共有しようと思っています。 ここには公開手順のみ残して置きますのでよければ参考にしてください。 本文 自分で作ったwebサービスを公開したことがなかったので、知見を広げる為にもやってみようと思いました。 同じように、知識が浅い人、作ったサービスを公開したいけど何をすればいいかわからないという人の参考になればと思います。 公開手順 GitHubに登録 もしかしたら最初にやるべき事なのかもしれないですけど、ノ
Web Audio APIの闇 - Qiita
HTML5でゲームやリッチなコンテンツを作る上で欠かせない「Web Audio API」 しかしコイツがなかなか・・・モバイルでの特殊実装やメモリ使用量まわりで色々と闇を抱えていて・・・ ということで闇を見つけ次第、検証結果や対処方法など記録を残していきます。 iOS SafariはBGMなどの自動再生ができない iOS Safariは以下ようなコードでサウンドの自動再生ができない const AudioContext = window.AudioContext || window.webkitAudioContext; const ctx = new AudioContext(); const request = new XMLHttpRequest(); const url = 'https://zprodev.github.io/web-audio-test/assets/Campf
[macOS向け] gitのクライアントはGitUpがいいぞ。 - Qiita
ツイッタフォローしてやで(ﾎﾞｿｯ https://twitter.com/JotaroUT いろいろ使ってみたけどGitUp、やめられませんでした。 Macbookをスタバで開いてはプロジェクトをgitで管理する機会の多いであろう諸兄・諸姉のために、独断でイケてるなと思ったgitのGUIクライアントについて紹介したい。その名もGitUp。 GitUp : http://gitup.co/ GitUpとは GitUpはmacOS用に開発されたgitのGUIクライアントである。 公式ホームページに、 Work quickly, safely, and without headaches. とあるように、確かに使っている間は頭痛がしない気がする。大きな特徴としては、謳い文句の通り、 早い。 ざっくりした使い方 コミットを参照する。 ここでは、openFrameworks (https://op
![[macOS向け] gitのクライアントはGitUpがいいぞ。 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/9cff9c96a28cc3077d4bd2b98bfe29257b729956/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCbWFjT1MlRTUlOTAlOTElRTMlODElOTElNUQlMjBnaXQlRTMlODElQUUlRTMlODIlQUYlRTMlODMlQTklRTMlODIlQTQlRTMlODIlQTIlRTMlODMlQjMlRTMlODMlODglRTMlODElQUZHaXRVcCVFMyU4MSU4QyVFMyU4MSU4NCVFMyU4MSU4NCVFMyU4MSU5RSVFMyU4MCU4MiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YjI1NDlmNGE3ZDUxYmZkNWQ3MTE4ZWQyN2M0YWE0YTE%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBKb3Rhcm9TJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kOTU1ZmZiNmExMWE4YWYyNjRhMTZmM2M4NzE5ZWNlMg%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dd18c2743a394d738a76f3ab95cd53758)
Node.jsでウェブスクレイピングする色々な方法 - Qiita
ウェブサイトの更新チェックをするのに、ブラウザを開くのが面倒でスクリプト化したいことがあります。 Node.jsを使って、スクリプト化します。 お題 国立大学法人 電気通信大学から最新の新着情報の日付を取得します。 ブラウザ上での動作 最初にブラウザでの情報取得方法を確認します。 開発コンソールで次のJavaScriptを実行します。 document.querySelector('.newsList').children[0].firstChild.textContent.trim() "2017年10月 5日"最新の新着情報の日付が取得できます。 解法 色々な実装方法があります。 環境 Nodo.js v8.6.0 MacBook Pro (Retina, 13-inch, Late 2013) 比較表 最初に簡単な比較を載せます。 ソースコードは後半にあります。 ヘッドレスブラウザ
システムで「性別」の情報を扱う前に知っておくべきこと - Qiita
0は性別に関する情報が得られない場合に使います。性別に関する情報はあるのだけど1とも2とも言えない場合は9を使います。要は「0でもなくて1でも2でもなければ9」です。 これを知っていればMだとかFだとかを議論をせずに済みますね。 国際規格に従うべき理由 国際規格に従うことは色々と利点があります。まず、どうしてそういうコード体系にしたのかを説明しやすいです。また多言語対応する際も規格通りに書けば伝わるはずなので迷わずに済みます。別システムへのデータの移行や、異なるシステム間でのデータの統合もコード体系が同じならラクラクです。もしかしたら別のプロジェクトで書いたコードをそのまま使いまわせるかもしれません。技術者に対するトレーニングも不要です。 対して、わざわざ国際規格に反する実装をする場合は上記のメリットがそのままひっくり返ってデメリットになりはしますが、もちろん、それなりの理由があれば規格と
AWSの料金を「ざっくり」計算できるサイトを作る - Qiita
AWSの料金、ややこしいですよね。 サービスの選択肢が多く構成が柔軟なおかけで、さまざまな要件をカバーできるのは嬉しいのだけど、そのぶん料金体系がややこしいので、やるせない気持ちになります。 この気持ちはなんだろう、この気持ちはなんだろう、と自問しているうちに春になってしまったので、AWSの料金を「ざっくり」計算できるサイトを作り始めました。 ざっくりAWS 公式ツールの存在 Simple Monthly CalculatorというAWSの料金を計算できる公式のツールがあるのですが、悲しいことに名前ほどシンプルではありません。 正確な料金を算出するために入力項目が多いのは仕方がないとは思うのですが、サイトを開いたときの威圧感がすごいので、もう少しさっぱりできないかという気持ちがありました。 なので、公式ツールの敷居が高いと感じる自分のような人向けに、料金を「ざっくり」計算できるサイトを作り
工数見積もりのコツ - Qiita
はじめに 本稿では、仕事をする上での作業工数の見積もり方法について説明します。 工数とは何か 工数(こうすう1)というのは、仕事において、あるひとつの作業を完了するまでにかかる総累計時間のことです。情報処理技術者試験に出てくるTAT(ターンアラウンドタイム)とは意味合いが異なります2。 例えば、ある作業に40時間(40H3)かかるとした場合、工数は40時間であるといえます。1日8時間勤務だとした場合、40時間は5人日(にんにち)と表現することができます。さらに、1ヶ月20日勤務だとした場合、0.25人月(にんげつ)と表現することもできます。 一般的に工数の単位は「人日」および「人月」で扱います。 学生時代は工数を気にすることはないですが、ITエンジニアとして会社で働くようになると、かならず工数を意識する必要があります。 なぜ工数を意識する必要があるのか なぜ工数を意識する必要があるのかとい
なぜfor文は禁止なのか？関数型記述のススメ - Qiita
var totalOfEvenNumberUnder100 = 0; for (var i = 0; i < 100; i++) { if (i % 2 === 0) { totalOfEvenNumberUnder100 += i; } } 命題に、「繰り返す」という文字がないのに、forで繰り返しています。手続き型に慣れたプログラマは、もう違和感を感じなくなってしまっているかもしれませんが、なぜ繰り返すのでしょうか。0から100未満の数字がほしいだけなのに。 また、最初に0で変数を初期化するのも命題にはありません。 さらには、偶数のみを取り出す処理と足す処理が交互に行われることになっています。偶数のみを累計する、という命題とは違う処理になってしまっています。 もちろん答えは一緒ですが、命題とは別の処理になってしまっているともいえます。 推奨 できるだけ処理に名前をつけていきます。 命題
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue CLI UIが想像以上に便利だった話 - Qiita
Macで矢印「↑」を「うえ」とかで変換している人へ。←↓↑→ - Qiita
