You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
This is a content editable div with a custom keyboard layout. Press Enter to add new lines. HTML <div id="contenteditable" contenteditable="true">This is a <em>content editable</em> div with a custom keyboard <strong>layout</strong>. Press <kbd>Enter</kbd> to add new lines.</div> Script $.keyboard.keyaction.undo = function (base) { base.execCommand('undo'); return false; }; $.keyboard.keyaction.re
概要 作ったもの 最近お金が減るのが早くなった気がしたので、家計簿をつけようと思い立ちました。アプリをダウンロードしてきてもよいのですが、せっかくなので自分で作ることにしました。 タブレット、スマホ、パソコンのどれでも見れるようレスポンシブ対応を行ったのですが、タブレット(iPad)からみると以下の画像のようなものになっています。 チャート画面 記入画面 取引一覧画面 構成 静的ファイルはAWSのS3にホスティングし、お金のやり取りに関する情報はRDSに貯め、情報の追加・削除・修正にはLambdaとAPI Gatewayを用いて作ったAPIを通して行います。LambdaのコードはPythonで書いています。 簡単な図にすると、以下の画像のようになります。 共通部分 フロントエンド フロントはVue.jsを使って実装します。以下の画像の赤枠で囲った部分に表示するコンポーネントを切り替えます(
社内システムはバックオフィス向け、または営業向けのシステムになります。営業向けのシステムとして最も有名なのはCRMでしょう。顧客との関係性を向上させることによって、よりきめ細かいフォローアップや売り上げ増につなげられるようになります。 そんなCRMを自社開発するといった場合に使えそうなVueテンプレートがVue-CRMです。 Vue-CRMの使い方 社内システムなので最初に認証があります。 ダッシュボードです。 注文一覧。 注文の編集画面。 顧客一覧。 顧客情報編集画面。 商品一覧。 商品編集画面。 アバウト画面。 Vue-CRMはあくまでもモックなので、これでシステムが動くわけではありません。後は内部的なデータを提供すればCRMとして動作します。CRMの基本的な画面は用意されていますので、自社システムを構築する基礎としていいのではないでしょうか。VueベースなのでAPIを作ることでシステ
テーブル表示はWebシステムのデファクトとも言えます。業務システムはいうに及ばず、管理者画面などでも必ず求められる表示です。そしてただ表示すればいいという訳ではなく、ソートやフィルタリング、インラインでの編集など様々な機能が求められるものです。 そんな多機能なテーブル表示を実現してくれるのがTabulatorです。多くのニーズを満たしてくれることでしょう。 Tabulatorの使い方 てんこ盛りなデモテーブル。ざっと見てもフィルタ、ページネーション、グラフ表示、ソートなどの機能が確認できます。 インライン編集もサポートされています。 データに合わせて幅を自動調整。 行をクリックして展開する機能。 カラムをグループ化。 カラムを縦に。これはカラムが多い時に便利そうです。 ドリルダウン。 テーブルを入れ子にもできます。 スパークライン表示。 フッターで集計。 HTMLテーブルを変換する機能もあ
ここ数年書いているJavaScript入門本ですが https://jsprimer.net/ というURLで無料で公開しました。 まだ開発中です これからJavaScriptを始める人がES2015以降をベースにして学べる本 プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、今のJavaScriptアプリケーションを読み書きできるようになるもの Webサイト: https://jsprimer.net/ リポジトリ: asciidwango/js-primer: JavaScriptの入門書 もともと公開してありましたが、jsprimer.net というドメインを取ったのでURLが変わっただけです。リダイレクトされているので既存のブックマークはリンク切れにはなりませんが、気になる人はブックマークしなおしてください。 またリポジトリ(asciidwan
1. はじめに 最近わけあってNodeのセキュリティ調査をしているのですが、今年の5月に開催された North Sec 2018 でセキュリティ研究者の Olivier Arteau 氏による 「Prototype pollution attacks in NodeJS applications」という面白い発表を見つけました。 この発表の論文や発表資料、デモ動画などもgithubで公開されていますし、ちょうどタイミングよくセッション動画も最近公開されました。 github.com Olivier Arteau -- Prototype pollution attacks in NodeJS applications この発表で解説されているのは、悪意のある攻撃者が、JavaScript言語固有のプロトタイプチェーンの挙動を利用して、Webサーバを攻撃する方法です。 発表者は、npmからダ
JavaScriptの型にまつわるややこしい仕様について、簡単にまとめてみたいと思います。 5つのプリミティブ型を判定 JavaScriptにおける型とは、数値(number)、文字列(string)、ブール値(boolean)、null、undefinedの5つのプリミティブ型を指します。これらはtypeof演算子を用いて判別する事が出来ます。ただし、nullだけは仕様に反して'object'を返します。 typeof 'str'; // 'string' typeof 1; // 'number' typeof true; // 'boolean' typeof null; // 'object' (ECMAScript標準規格によれば独自の型のはずだが...) typeof undefined; // 'undefined'
今までわかっている気になっていた正規表現。 先日仕事で正規表現を書く機会があったのだが、うまく書けず、数時間ハマってしまったので、改めて勉強し直そうと思う。 そもそも正規表現とは? 「文字列内で文字の組み合わせを照合するために用いられるパターン」 だそうです。 簡単に言うと、文字列内にある文字があるかどうか、など文字列をいい感じに検証したいときに便利な記述方法、なのだろうか。 正規表現は以下2つのパターンで書ける。 正規表現リテラル
Array.forEachとは ECMA-262標準で追加されたメソッドで、for文を書かなくても、Arrayの要素すべてに対してcallbackの処理を行ってくれる便利なメソッドです。 たとえば、配列の中身をすべて表示するようなコードを組んでみましょう。 // テストデータ const TEST_DATA = ["a", "b", "c", "d", "e"]; // 従来の記法 for(let i = 0; i < TEST_DATA.length; i++){ console.log(TEST_DATA[i]); } // forEachを利用した記法 TEST_DATA.forEach(value => { console.log(value); }); 関数型言語っぽい非常にシンプルな記述が可能ですね。 forブロック内における、break、continue、returnと同じ動
for (var i = 0; i < takusan; i++) { omotai(i, function () { おやっ? }); } これコールバックの中のものどうやって取るんだ?(だいたい無理) Promiseが使える環境なら、迷わず書けます。 予めPromise化しておくと便利です。bluebirdなどPromise化を助けてくれるライブラリを使うのもいいでしょう。 function omotaiPromise(arg) { new Promise(function (resolve, reject) { omotai(arg, function (err, result) { if (err != null) { reject(err); return; } resolve(result); }); }); }
// ソート対象のデータ let users = [ {id: 1, name: "ジャック", birthdate: "1996/10/01", age: 20}, {id: 2, name: "ジョン", birthdate: "1990/05/05", age: 26}, {id: 3, name: "ボブ", birthdate: "1996/11/14", age: 20}, {id: 4, name: "マイケル", birthdate: "1995/10/01", age: 21}, {id: 5, name: "アルバート", birthdate: "1984/09/10", age: 32}, {id: 6, name: "メアリー", birthdate: "1994/07/22", age: 22}, {id: 7, name: "ジョン", birthdate: "
TOPjQuery jQueryでページ読み込み中にローディング画面を表示する方法 jQueryでページ読み込み中にローディング画面を表示する方法 公開日:2015.11.20 更新日:2020.05.19 jQuery, ローディング jQueryでローディング画面を実装しました。 全てのページの内容が読み込まれたらローディング画面が非表示になる仕様です。 2GRAVITY様の方法を参考にさせていただいています。 jQueryを使わずにjavaScriptで実装するプラグインはこちら デモページ 実装方法 html ロード画面とロード後に表示させたい要素を個別に括っておきます。 <div id="loader-bg"> <div id="loader"> <img src="img-loading.gif" width="80" height="80" alt="Now Loading.
追記: 2019/04/24 本日リリースされたNode v12でESM周りの仕様が大幅に変更されました。 この記事の内容は既に古くなっているため、最新の情報は以下の公式ブログを参考にしてください。 Announcing a new — experimental-modules – Node.js Foundation – Medium 追記終了 この話を今日のNode学園で話すので、ご興味あればどうぞ。 nodejs.connpass.com (今日いくつか加筆修正しました) ECMAScript 2015で待望のES Modules(ESM)の仕様が策定されたものの実装がなかなか進まない、という話を1年前に発表した。 その後、ブラウザでのES Modules仕様が策定完了し、フラグ付きながら全主要モダンブラウザで初期実装が揃った (caniuse)。(dynamitterさん、kijt
(注:2017/07/19、いただいたフィードバックを元に翻訳を修正いたしました。) ESM、CJS、UMD、AMD — どれを使うべき? 最近、 Twitter では、 ESモジュール の現状、特に、 *.mjs をファイル拡張子として導入すると決めた Node.js の現状について大騒ぎになっています。この話題は複雑で、かなりの労力を費やしてそれに専念しないと議論について行けないので、 皆が恐れと不安を抱く のも無理はありません。 古き恐れ フロントエンド開発者なら、 JavaScriptの依存関係の管理に悩まされた日々 を憶えている人も多いでしょう。あの頃は、ライブラリをベンダーフォルダにコピー&ペーストし、グローバル変数に依存し、あらゆる物を正しい順序でconcatしようとしてもネームスペースの問題に対処する必要がありました。 何年もかかって、私たちは共通モジュール形式と中央集権
JavaScriptのデバッグに苦労しているなら、Nodeのデバッガーを試してみてはどうでしょうか。Visual Studio Codeならさらに手軽です。 袋小路です! 何時間も費やしていろいろ試してみたけれどもうまくいきません。コードをじっと吟味してもエラーになりそうなところはありません。2、3回ロジックを見直して、何度も実行しています。単体テストも助けにはならず、同じく失敗してしまいます。もはやどうしていいか分からず、虚空を見つめたくなります。ひとり闇の中にいるように感じて、だんだん腹が立ってきます。 こんなときの自然な反応は、コードの品質を落とし、邪魔なものを全部捨て去ることです。コードのあちこちにprintをちりばめて、なにかうまくいくことを祈るわけです。これでは暗闇で的を狙うようなもので、望み薄なことが分かるでしょう。 よくある話だと感じたのではないでしょうか。今までに数行以上
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く