Vue.jsで簡単に文字数カウンターを実装する - Qiita
Vue.jsで文字数カウンターの実装をする 背景 テキスト（文字数）カウンターを実装する必要があった 工数はあまりかけられない Vue.jsの組み込みは任意で入れて良い条件 実装 Vue.jsバージョン Vueは<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script> を使いました フォーム設定 フォームは<input v-model.trim="message" maxlength="20">と<textarea v-model.trim="message" maxlength="50"></textarea> の２点 最大文字数はブラウザの制御で持たせるためmaxlengthで制御しました trimを使うことで、冒頭と末尾のスペースが入力時点でトリミングされます。冒頭に半角ス
始めよう React（基礎編）！ Part 2 - 環境構築 - Qiita
本編はReactの開発にあたり、ローカル環境の準備について書いていきます。 Node.jsとIDEがあれば開発できますので、 プログラミングを勉強する際に詰まりやすい環境構築上割と楽な方と思います。 個人ではJAVA、PHPを使ったことがあり、JavaScriptの方は断然にらくです！ Node.jsとは 簡単に説明すると、サーバー側で動くJavaScprit言語です。 詳しくは下記のURL参照してください。 Nodejs Node.jsインストール Node.jsインストールする方法は下記の２パターンがあります。 ①Homebrewを使う（面倒ですが、推奨） HomebrewはMac用のパッケージマネージャで、バージョン管理上でかなり便利になります。 こちら参考して頂いてインストールする https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84
nodejsをAndroidモバイル端末にインストールして、他のモバイル端末とアドホック通信する - Qiita
東京ゲームショウ2018のインディーズゲームブースにてイセキクライマーというゲームの解説のお手伝いをさせていただきました。 ただゲームの解説するのもアレだと思ったので、青森出身という事を活かして津軽弁で解説するか、普通に標準語で解説するかをお客さんに選ばせてみようと思い、下記のようなガジェットを作って持っていきました。 ※イセキクライマーをプレイしていただいた大多数の方々にとっては、こんなもんあったっけ？となると思います。理由は後述いたします。 ただの板に手書きで書かれたようなボタンを触ると、板を見れる位置にいない対面の僕がどのボタンをタップしたのか分かる、という物です。 僕がお手伝いしたイセキクライマーが、一見デジタルに見えないコントローラーだったので、こういうガジェットも似合うんじゃないかな、と思い用意してみました。 仕組み 中身はAndroidタブレットで、タップしたボタンに対応した
仕事でAngular使うことになったので整理する - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Angularとは？ Wikipediaより。 AngularJS（アンギュラージェイエス）、または Angular は、Googleと個人や企業のコミュニティによって開発されている、完全にJavaScriptで書かれたオープンソースのフロントエンドWebアプリケーションフレームワークである。 (中略） AngularJSはシングルページアプリケーション (SPA) の開発が可能なフレームワークで、一つのフレームワーク内で全ての機能が完結するフルスタックフレームワークであることが特徴として挙げられる。 AngularJS - Wikip
[Angular] ngComponentOutlet を使ってモーダルダイアログを実装する - Qiita
$ ng version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___| |___/ Angular CLI: 11.0.5 Node: 12.18.3 OS: darwin x64 Angular: 11.0.5 ... animations, cli, common, compiler, compiler-cli, core, forms ... platform-browser, platform-b
![[Angular] ngComponentOutlet を使ってモーダルダイアログを実装する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/388b5bd108262f5f97af8684e08eba9a973e9f2d/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMTkzMzQyJTJGcHJvZmlsZS1pbWFnZXMlMkYxNTAwODg4MTU5P2l4bGliPXJiLTQuMC4wJmFyPTElM0ExJmZpdD1jcm9wJm1hc2s9ZWxsaXBzZSZmbT1wbmczMiZzPTdkM2Q3MzZlZDRkOWEyOThkYmM1YzQ3NmYzNmI1MzFh%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Df6ef6496ea559ea2ba01a9233a5c9b84%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCQW5ndWxhciU1RCUyMG5nQ29tcG9uZW50T3V0bGV0JTIwJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJUE2JUUzJTgzJUEyJUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgzJUFCJUUzJTgzJTgwJUUzJTgyJUE0JUUzJTgyJUEyJUUzJTgzJUFEJUUzJTgyJUIwJUUzJTgyJTkyJUU1JUFFJTlGJUU4JUEzJTg1JUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9MDhmNDU0Nzc5ZjUyYWUxNjUxODdhOGNkNGUwZDk1Y2I%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBrc2gtZnRociZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPTNmMDNkNmIxNjdmOWNjYjdjYTFiYzcxMjgwODFjOGE4%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D4232ec7d689ccd4d449839c922943d88)
Ionic3でpush通知ができる構成について - Qiita
きっかけ 私のローカルでプッシュ通知が出来てるビルドが作れて、他の開発環境でビルドするとデバッグすらできないという事態が発生。 行きつくところ、phonegap-plugin-push（プッシュ通知のためのプラグイン）のバージョンの問題だった。 前提 基本の構成は以下の通り。 ionic3系のプロジェクト cordovaもそれに付随したバージョン Androidのビルドしかしてない（ああ、browserもあるけどここでは関係ない） LoopbackというものでAPIサーバを作っている プッシュ通知はFirebaseのMessagingを使用 LoopbackのPushの使い方をベースにプッシュ通知を実装している。 https://github.com/strongloop/loopback-component-push https://github.com/strongloop/loopb
babel7でのstage-xの定義を知る - Qiita
As of v7.0.0-beta.55, we've removed Babel's Stage presets. Please consider reading our blog post on this decision at https://babeljs.io/blog/2018/07/27/removing-babels-stage-presets for more details. TL;DR is that it's more beneficial in the long run to explicitly add which proposals to use. For a more automatic migration, we have updated babel-upgrade, https://github.com/babel/babel-upgrade to do
(個人的メモ) Ubuntu | Xubuntu 18.04 上の Visual Studio Codeにおいて NVM でインストールした Node でデバッグする - Qiita
Ubuntu | Xubuntu で nvmを利用可能に source するスクリプトは、多くの人が恐らく ~/.bashrc に記載していると思います。 Visual Studio Codeのデバッガーは ~/.bashrc を読まないため、デバッグ実行しようとすると、 Cannot find runtime 'node' on PATH. とエラーメッセージが表示されます。 stackoverflow 等では、launch.json の runtimeExecutable にフルパスで書け、とか書かれていますが、 launch.json をリポジトリーに上げている場合、そしてWindowsでも同じ launch.json を使用している場合、問題があります。 解決策 OSのメニューバー? やデスクトップアイコンから起動せずに、ターミナルから起動すれば node へのPATHが通るのでデ
[SlackAPI][node-slack-sdk] Workspace内の全てのChannel名を取得する (conversations.list を使う) - Qiita
これまでの一般的な方法 普通にググると大抵はこの channels.list を使っているサンプルに行き着く。 https://api.slack.com/methods/channels.list ただし、最近気づいた下記の文言、 Don't use this method. Use conversations.list instead. 他にも移行が必須なケースがあって、例えば channels.list はShared channelsを返してくれない。ここは場合によっては結構困るのでconversations.listへ移行した。 サンプル conversations.list ではpaginationを意識する必要があるが、node-slack-sdkのサンプルを参照すると下記のようになる。 https://github.com/slackapi/node-slack-sdk/b
![[SlackAPI][node-slack-sdk] Workspace内の全てのChannel名を取得する (conversations.list を使う) - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/18ad403e3eba45e6971ccaabf4019fb6999b6432/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%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkYwJTJGMTk5NDIlMkZwcm9maWxlLWltYWdlcyUyRjE1NjA4NDMwNDc_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9ZjBiZTIzZjU2NjA5NDFhYmM1NDZhZGE2NDgyMjczOTY%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253Dc380764ae39c1c21baae13fe55e07f35%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCU2xhY2tBUEklNUQlNUJub2RlLXNsYWNrLXNkayU1RCUyMFdvcmtzcGFjZSVFNSU4NiU4NSVFMyU4MSVBRSVFNSU4NSVBOCVFMyU4MSVBNiVFMyU4MSVBRUNoYW5uZWwlRTUlOTAlOEQlRTMlODIlOTIlRTUlOEYlOTYlRTUlQkUlOTclRTMlODElOTklRTMlODIlOEIlMjAlMjhjb252ZXJzYXRpb25zLmxpc3QlMjAlRTMlODIlOTIlRTQlQkQlQkYlRTMlODElODYlMjkmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1hZTViODk0ZmI4NGMwMWMzZDc2MzA5NTY2NzllZDNhNA%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBqcnN5byZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWIxN2RlNThkNzBjMjZiYzkwMDQwOGNkNWY3OTQwMDcw%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Ddc4f3dc1974eb21f4768c043ce5c59fd)
obniz（Node.js）で画面に日本語を表示する - Qiita
const Obniz = require("obniz"); const { createCanvas } = require('canvas'); var obnizeId = "YOUR-OBNIZ-ID"; var obniz = new Obniz(obnizeId); obniz.onconnect = async function () { obniz.display.clear(); const canvas = createCanvas(128, 64); const ctx = canvas.getContext('2d'); ctx.fillStyle = "white"; ctx.font = "15px Avenir"; ctx.fillText('こんにちは', 0, 20); obniz.display.draw(ctx); } const Obniz = r
【学習1日目】node.jsによる画面遷移 - Qiita
var http = require('http'); var fs = require('fs'); var server = http.createServer(function(req,res) {var target = ''; switch (req.url){ case '/': case '/index': target = './index.html'; break; case '/next': target = './next.html'; break; default: res.writeHead(404,{'Content-Type':'text/plain'}); res.end('bad request'); return; } fs.readFile(target,'utf-8',function(err,data){ res.writeHead(200,{'C
promisify についてのまとめ - Qiita
もうだいぶ前の話になるが、Node.js v8.0 で util.promisify が実装された。 同じく v8.0 で実装された async/await と一緒に使うと非常に便利。 今回は、promisify の便利さを説明するための資料としてのまとめ。 ちなみに Promise については説明しない。 例 以下のような、何らかのデータベースにクエリ文字列を投げて結果を取得するようなコードがあるとする。 const db = new DB('db://user:pass@host'); db.execQuery('SELECT ... FROM ...', (err, results) => { if (err) console.error(err); else console.log(results); });
IKEA Trådfri Gatewayがいつの間にか売られていたので、Node.jsでド派手なLチカをしてみる。
TL;DR いい色のLED電球をNode.jsで操作できる。 日本でもIKEA Trådfri Gatewayが売ってる。 IKEAにふらっと行ってみたら、 うおおおおおおおお！！！！！ いつの間にか、IKEA Trådfri Gatewayが売られている！！！！ おおおおおおおお！！！！ 取り乱しましたが、IKEA Trådfriとは、かの家具量販店IKEAで販売している、無線で操作できるLED電球のことです。 専用のリモコンで操作できる他、GatewayがあればGoogle Home,Alexaはもちろん、ソフトウェア操作できるものです。 ただ、悔しいながら、日本では、Gatewayが販売されていなかったのです。 シーリングライトはもちろん、床暖房までボイスコントロールするほどホームオートメーション好きの私でしたが、Amazonで入手したLED電球のダウンライトを赤外線操作可能なLED
Canvas（ブラウザ）からBase64変換した画像をNode.jsのサーバーに送って画像保存する #linebootawards - Qiita
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Signature Pad demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> </head> <body onselectstart="return false"> <div id="signature-pad" class="signature-pad"> <div class="signature-pad--body"> <canvas></canvas> </div> </div> <script src="https://cdn.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[Vue] 親子間のデータバインディングを Vuetify の実例を元に理解しようと試みた - Qiita
TypeScriptのMethod Decoratorを解説する。 - Qiita
最速でわかったつもりになるReact / Vue.js / Angularの違い - Qiita
[Vue] Plus ボタン押されるたびにタブみたいにコンポーネントを増殖させる - Qiita
babel v7でbabel-stage-presetが廃止になったから移行した話 - Qiita
画像のSSIM算出のための6+2ツールまとめ - Qiita
