Digital Ocean でnode.js アプリケーションを実行するとこまでメモ - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
Electronでコピペを実装する - 俺がコピーしたいのはテキストだけじゃないんだ - Qiita
TypeScript製映像編集ソフト Delirを開発しているHanaklaです Electronでコピーペーストといえば「MenuItemOptionにrole: 'copy'をつける」が基礎的な方法です。 しかしこの方法で実装できるコピー＆ペーストはBrowserWindow上のテキストのみで、アプリケーション上のコピー可能なオブジェクトのコピーペーストの実装には別の方法が必要です。今回は、Delirでどのように**「テキストじゃないもののコピーペースト」**を実装したかをお話します。 前提 ElectronのMenuItemを触ったことがある人が対象 なにをコピーしたいの？ Delirには「クリップ」と呼ばれる画像や動画を表すオブジェクトがあり、今回コピペするのはこのオブジェクトです。また、テキストエリアも存在するため、通常のテキストもコピペできる必要があります。 アーキテクチャ D
Firebase Authentication + SPA(React/TypeScript) でユーザ登録／ログイン／ログアウト (1:サンプル起動まで) - Qiita
※2018/10/29 Firebase Authentication + SPA(React/TypeScript) でサンプル作り直してみたとしてサンプルを作り直して記事を書きました。 Firebase Authentication によるユーザ認証周りについて理解しておきたく、実際に自分が普段作っている SPA(React/TypeScript) に組み込むとどんな感じになるかということもあったので試しに作ってみました。なおちょっと面倒なのは承知の上、リダイレクトモードでやります1。 それから、説明まで書くと長くなりそうなので 2 回に分けようと思いますました(2018/10/11)。 サンプル起動まで(この記事) 要点の説明 という感じで考えています。 ※ソースコード一式 は GitHub に置いています。 起動方法 前提条件 Firebase プロジェクトを 1 つ用意する。 そ
Angular でアコーディオンを実装 - Qiita
<!-- アコーディオンを開く閉じるのボタン --> <div class="pointerCursor" (click)="onAccordion($event)"> <i [ngClass]="showDetail ? 'fa fa-minus-circle' : 'fa fa-plus-circle'"></i> 詳しい情報を{{showDetail ? '隠す' : '表示する'}} </div> <!-- アコーディオンの中身 --> <div *ngIf="showDetail" [@accordion]> 〜アコーディオンで表示したい内容〜 </div> import { trigger, style, animate, transition } from '@angular/animations'; @Component({ selector: 'sample-
Vue.jsで実装するシンプルな吹き出し - Qiita
inputやtextareaの入力中に、ちょっとした入力ヒントを出したい時があります。 そんな時に便利な、focusで出る吹き出しをVue.jsで実装します。 実装デモ See the Pen Input Balloon by Vue.js - flow3 by Shoko Oyamada (@chcltn) on CodePen. 吹き出しの実装の流れ 1. 単純な吹き出しをHTMLとCSSで作る 2. focusとblurでv-showを切り替える 3. 吹き出し内のリンクもクリック出来るようにする 1.単純な吹き出しをHTMLとCSSで作る ごく単純な吹き出しをHTMLとCSSで実装します。 ここではまだ吹き出しは最初から表示されており、focus時の動きはありません。 See the Pen Input Balloon by Vue.js - flow1 by Shoko Oyam
Vue.jsで「変更がないときはdisabledなボタン」を実装する - Qiita
フォームを作っていると、ユーザビリティ向上のため、何かしら入力内容が変わった時のみ、保存ボタンのdisabledを外したい、という場面があります。 ここではそんな「変更があった時のみactiveになるボタン」を作りましょう。 実装デモ See the Pen Activate Button by Input's Change - flow3 by Shoko Oyamada (@chcltn) on CodePen. 実装の流れ inputを並べ、dataを入れておく lodashのcloneDeepでオブジェクトをコピーする submitボタンのdisabledを切り替える 1.inputを並べ、dataを入れておく 「変更のあった時のみactiveなボタン」は、しばしば何かの編集画面に現れます。 なので、まずはJS側でdataに情報を入れておき、HTML側ではinputを並べてv-mo
ざっくりECMAScriptとBabelの話 - Qiita
ECMAScriptとは？ ECMAScriptは、JavaScriptを元にして標準規格化されたスクリプト言語です。 JavaScriptはNetscapeによって開発されましたが、それをベースにしたJScriptをマイクロソフトが独自に開発していたりと、互換性に乏しい状態でした。そこで、1990年代後半に、情報通信システムの分野における国際的な標準化団体であるEcma Internationalによって、JavaScriptを元にした標準規格のECMAScriptが策定されました。 ECMAScriptのバージョン ECMAScriptは、ECMA-262という規格番号で標準化されています。 1997年に、1st editionである、ECMAScript 1が策定され、2009年に5th editionのECMAScript 5（以下、ES5）とアップデートをしてきました。 （4th
typescriptをbabelでビルドしつつlintや型チェックもやりたい - Qiita
(2019/04/14追記) tslint-loaderのtypecheckオプションを付けるとビルドが大幅に遅くなるようです。 しかし、typecheckをtrueにしておかないとビルド時にwarningが出ます。 https://github.com/wbuchwalter/tslint-loader/issues/76 tslint以外を使用するか、ビルド時にはlinterチェックはせず、pre-commitのタイミングでlinterを単体で走らせるようにしたほうが良さそうです。 この記事に関してもtslint-loader関連の部分は削除しました。 はじめに babel7がリリースされましたね！ それに伴いtypescriptもサポートされたのでbabel単体でtsのビルドができるようになりました。 しかしbabelはtypescriptから型情報を取り除くだけなので型チェックまで
ChromyとPhantomJSによるスクレイピングで困っていること - Qiita
今回は技術Tipsではなく、個人的に試していて壁にぶち当たったのでアドバイスを 誰かから貰えればいいなと思い、記事にしています。 はじめに 環境 ・一般共有不可、SSOを挟んでログインする必要のあるG Suite ・Google ドライブのドライブFileStreamなどインストール不可 ・GASにて、doPost()で受け取ったデータをドライブに保存するウェブアプリ つまり、未ログインの状態から何をするにもログインが求められるという環境だ。 やっていること PCで生成したデータ（JSONなり、CSVなり）を上記G Suiteの環境のドライブにアップロードするべく、GAS製のウェブアプリへpostで通信。 また、これを自動化。 経緯 元々はPhantomJSを使って上記を実現していたのだが、Chromeが正式にヘッドレスモードを実装したこと、それにともないPhantomJSが開発終了したこ
ES6的に選択したラジオボタンのチェックを外す方法 - Qiita
class OffRadio { constructor(){ this.onclick = (evt)=>{ const sender = evt.target; const name = sender.name; if (this[name] === sender) { // 具体的には、Aがチェック済みならthis.group0 = Aのノード this[name] = null; sender.checked = false // クリックイベントが発生したチェックボックスのチェックを外す } else { this[name] = sender; // 例えばBをチェックしたらthis.group0 = Bのノード } } } static get onclick(){ // クラス定数でシングルトン if (!OffRadio.instance){ OffRadio.insta
Tumblrの投稿をEvernoteに移植して、検索機能を補完する（Node.js） - Qiita
はじめに Tumblrは、Web上のすべての情報が集約される素晴らしいSNSです。 ダッシュボードから気に入った投稿をリブログし続けるだけで、自分のブログページをアイデアやインスピレーションの宝庫にすることができます。 しかし、Tumblrには自分のブログ内の投稿を検索する機能がありません。 また、困ったことに、Tumblrの投稿は検索エンジンにも引っ掛かりづらい特徴があります。*参考 そのため、「あの投稿の詳細なんだっけ？」と思っても、その投稿を検索できる手段が無いのです。 それならば、Tumblrの投稿をEvernoteに移植して検索できるようにしよう！ ということで、この記事では自分のTumblrの投稿をEvernoteに移植する方法を紹介します。 手順 Tumblrの投稿をEvernoteに移植する手順は、次の通りです。 Tumblrから投稿データを取得 取得した投稿データを読み込
Evernote APIで画像URLから画像投稿する（Node.js） - Qiita
はじめに この記事ではEvernote APIを利用して、画像URLから画像データをEvernoteに投稿するソースコードを紹介します。 テキストデータを投稿したい場合は、前回の記事をご覧ください。 ソースコード Sandbox環境のEvernoteに画像データを投稿するソースコードです。 対象とする画像データには、前回の記事で取得していたTumblrの投稿データを用いました。 Evernote APIのDeveloper Tokenを取得していない方は、以下のページより取得してください。 Developer Tokens - Evernote Developers 以下、ソースコード。 var Evernote = require('evernote'), fs = require('fs'), sleep = require('system-sleep'), request = req
[Azure] Visual Studio CodeでAzure Functionsのデバッグができないとき - Qiita
下記のURLにある手順に従っても、うまくいかないんです。 という時の対処方法です。 Deploy to Azure using Azure Functions https://code.visualstudio.com/tutorials/functions-extension/getting-started 現象 Visual Studio Codeでデバッグ実行すると、下記メッセージが表示されます。 Cannot connect to runtime process, timeout after 10000ms (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:5858). 環境 macOS High Sierra node 10.11.0 Visual Studio Code 1.27.2 Az
![[Azure] Visual Studio CodeでAzure Functionsのデバッグができないとき - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/89115f58546162f7f6d9f10c34e9f6b9aa9c9589/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGNTk0NzUlMkZwcm9maWxlLWltYWdlcyUyRjE3Mzg0NzI2MTI_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZDYwNWJiMWY5OGE0NTEyODRmMjlhOWQ0ZWRjMjM0ZjE%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D427d8c13291b6c4be1bd49cf10a50948%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCQXp1cmUlNUQlMjBWaXN1YWwlMjBTdHVkaW8lMjBDb2RlJUUzJTgxJUE3QXp1cmUlMjBGdW5jdGlvbnMlRTMlODElQUUlRTMlODMlODclRTMlODMlOTAlRTMlODMlODMlRTMlODIlQjAlRTMlODElOEMlRTMlODElQTclRTMlODElOEQlRTMlODElQUElRTMlODElODQlRTMlODElQTglRTMlODElOEQmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz04Mzc4NzI2NTBkZmM0OWQ4MGU2Yzg1YmMyY2U1YjNkYg%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBzZW5nb2t1JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9NGZjM2NlOTllNTNiODNlZjhjZDI2NGZmMjhlZDAwMTI%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Da65a199ac3b41776619f619db21e286c)
Visual Studio Code - InsidersでPromise.then()構文をasync/awaitに自動変換 - Qiita
function getSpacePeople_(url: string): Promise<void> { return fetch(url) .then((response) => response.json() ) .then((jsonData) => console.log(jsonData.people) ) .catch((error) => console.error('エラー:', error) ); } getSpacePeople_('http://api.open-notify.org/astros.json'); Visual Studio Codeで関数名をクリックすると、電球のアイコンが左端に表れます。その電球からメニューが開けますので、[Convert to async function]を選んでください(図001)。 図001■電球のアイコンから開いたメニ
16000行の壁を超えてさくっとダウンロードしたい (BigQueryの話) - Qiita
Meguro.es #17 @ Drecom 2018年10月4日 自己紹介 ちきさん GitHub/Twitter/Qiita: @ovrmrw 市ヶ谷のオプトという会社で働いています (話すこと) BigQueryのクエリ結果がデカいときに簡単にローカルにダウンロードする方法 BigQuery は Web UI で使いたいじゃないですか Web UI を使うメリット・デメリット メリット クエリを書いてすぐに実行できるのでさくさく試せる。 クエリを保存する機能が便利。 エンジニアじゃなくても使える。例えばビジネスの人とか。 デメリット 16000行を超える結果を簡単にダウンロードできない。 16000行で切られてしまう選択肢 JSON としてダウンロード CSV 形式でダウンロード スプレッドシートに保存 たとえクエリ結果が100万行でも勝手に切られてしまう。かなしい。 かなしい例 で
Axios(vue.jsのajax)で外部APIをたたく時のクロスドメイン問題を（サクッと）解決したメモ
問題 Vue.js（フロントエンド）から外部の(一部の)APIを呼び出す際、クロスドメインの制限でレスポンスを使えなくなってしまう。 Q.そもそもなぜこんなことになっているのか A.セキュリティの問題でそのWebアプリケーションのドメインのサーバとしか通信できないというブラウザの制約があるため。 対策 調べたところ色々な対策が存在するようです。詳しく理解したいorしっかりと問題を解決したい方はこちら等をご参照下さい。 今回は少しずるい方法でサクッと解決したのでその覚え書きです。 今回の解決法 この制約、ブラウザに付いているため、サーバーサイド等からは通常通りAPIを利用することが可能です。 そこで適当なPHPの動くサーバー（筆者はlolipopのサーバーがあったので）にAPIを叩いてその値をそのまま返すphpを設置しました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptのオブジェクトリテラルの前後にスペースを含めないほうが好き - Qiita
TypeScript - WideningLiteralTypes - - Qiita
Ubuntu16.04LTSでのRuby on Rails5の環境構築 - Qiita
MacにNode.jsとyarnインストールする - Qiita