Sqliteviz is a single-page offline-first PWA for fully client-side visualisation of SQLite databases or CSV files. With sqliteviz you can: run SQL queries against a SQLite database and create Plotly charts and pivot tables based on the result sets import a CSV file into a SQLite database and visualize imported data export result set to CSV file manage inquiries and run them against different datab

この本では、Denoを有効に扱うための「依存関係の管理」や「パーミッションの取り扱い」などに関する様々なノウハウをまとめています。 この本を読めば、Denoを有効に活用するためのノウハウを一通り得られることを目標にして書きました。 Denoは頻繁にアップデートが行われているため、それに合わせてこの本の内容も継続的に更新していく予定です。

目的 本記事の目的は、Vuetifyの<v-data-table>を使用して、複数条件で絞り込み、動的にテーブルの表示を切り替えることである。 やったこと はじめにVuetifyのV-Data-TableのAPI を読んで、custom-filterプロパティを使用しようと考えた。 しかし、custom-filterプロパティの引数であるsearchは一つしか変数を持つことができない。 そこで、V-Data-TableのAPIのheadersに記述されているfilterプロパティを使用することで複数項目のフィルタリングを可能にした。 作成画面 使用環境 Vue.js: "^2.6.11", Vue-Router: "^3.2.0", Vuetify: "^2.3.21" ファイルの説明 sampleDataTable.json : テーブルに格納するサンプルデータ Table.vue :

【JS/ Python両方OK!】「データ可視化」が歴史から実装まで体系的に学べるStanford講座の独習ノートJavaScriptd3.jsデータ分析データサイエンスcolaboratory CS 448B Visualization (2020 Winter)は、Maneesh Agrawala氏による、Stanford大で行われた、データの可視化に関する体系的な講義です。 スタンフォード大の"CS 448B Visualization (2020 Winter)" がすごい。 データ可視化の体系的講義。どう図表に変換するかの理論、探索的データ分析、ネットワーク分析等の実践と盛り沢山。 スライドに加え、Observable(JavaScript), Colab(Python)どちらでも例を試せる。https://t.co/lGyPElrihg pic.twitter.com/mWZn

システム開発本部アプリケーションエンジニアの Edy です。 マイクロアドの WEB アプリケーションのフロントエンドは、大半を Vue.js を用いて開発しています。 その Vue.js ですが、「Vue 3 is now in RC! (Vue 3 is now in RC! · Issue #189 · vuejs/rfcs · GitHub)」が公開され、version 3 ( Vue 3 ) が盛り上がりを見せています。 今回は、Vue 2 から 3 へ移行する理由と、 2 から 3 へ version up するために行なっている Composition API の導入 についてお話していこうと思います。 そもそも Vue.js とは ? SFC TypeScript Vue 2 の限界 大規模なプロジェクトになるほど開発効率が落ちる ロジックの再利用にかかるコストが大きい 単

数日前（4/21頃）に Next.js のチュートリアルが一新されました。 Next.js は 3 月頭に ver 9.3 がリリースされ、ビルド時に静的に HTML を生成する関数などが追加されるなど、今までよりもかなりパワフルになり、いわゆる JAMstack と呼ばれるようなアプリケーションを作りやすくなりました。 そのバージョンアップに対応するかたちで、チュートリアルも大幅に書き直されました。 参考（開発チームの @chibicode さんのツイッター） Next.jsの公式チュートリアルを最新版に沿ってゼロから書き直しました! 🎓英語ですが初心者向けです! ⚛️最近導入されたgetStaticProps等の関数や、 🎨CSS Modulesの解説をしています! 🗣ブログを作りながら学びます 🤗ご感想お待ちしております!https://t.co/R4j9vpAQoc — S

【第1位】キカガク（公式：https://www.kikagaku.ai/） あのマイクロソフトが導入するほどの高品質なPythonスクール。AI・機械学習・Python特化型。給付金で最大70%OFF。 【第2位】Aidemy（公式：https://aidemy.net/） 日本の大企業のDXで利用されている、高品質なPythonスクール。こちらも給付金最大70%OFF。 【第3位】TechAcademy（公式：https://techacademy.jp/） 知名度抜群の総合型プログラミングスクール。Webアプリ開発からPythonプログラミングまで網羅。

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: Why CSS Grid is better than Bootstrap for creating layouts 原文公開日: 2017/12/03 著者: Per Harald Borgen CSS GridはWebレイアウト作成の新しい手法です。ブラウザでネイティブに動作するまともなレイアウトシステムが登場したのはこれが初めてです。 CSS Gridのメリットは、かの有名なBootstrapと比較することでいっそう際立ちます。以前ならJavaScriptを導入しなければ到底不可能だったレイアウトを作れるようになっただけではなく、コードのわかりやすさやメンテのしやすさも向上します。 本記事でその理由を解説します。 筆者は現在無料のCSS Grid上級編講座の準備も進めており、12月中に立ち上げを予定しています。 今のうちに講

今日は1日でスピーディーにWebサービスを作る方法について紹介します。 本記事の対象読者は 時間も技術力もない デザインもできない が、とりあえず、何かWebサービス作りたい お金もできればあまりかけたくない フォームとか最低限の機能があって、見た目そこそこならそれでいい アクセスも作ってみなきゃわからんがな といった方です。 とにかく、こういった状況でも、どうやってサービスを作るか書いていきます。 インフラ整備 あなたは、とにかく時間もお金も技術力もあまりないので、chefなどのプロビジョニングツールは使わず、サーバーに入って直接いろいろインストールしましょう。 お金がないので、Herokuとかは使わず、Sakuraのサーバーを借りましょう。（1年契約とかなら、Sakuraの方が安い。） （※もっと最安なものがあったら教えてください） さくらサーバー：http://vps.sakura.

概要 Google検索などでよく使われるAutocompleteをjQueryのAutocomponentで実現します。サジェストする内容に関してはAjaxでGETして取ってきます。 実装手順 以下の手順で実装していきます。 1. jQuery Autocompleteを静的コンテンツにて実装 2. 静的コンテンツ部分をAjaxで入力した内容に応じて取ってくる JQuery Autocompleteの実装 // 以下３ファイルを読み込みます。 <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.min.css" /> <script type="text/javascript" src="http://code.jquery.com/

2016年9月19日2020年5月9日Java Script jsTreeはリスト li 要素をツリービュー形式で表示させるためのjQueryプラグインです。 htmlでliを記述するばかりでなく、jsonデータを読み込んでツリーを動的に作成することもできます。 普通にツリー表示させてアイコンを変更する程度なら簡単にできるので、メモがてらやり方を書いておきます。 ハマった時のポイントうまくいかない時は ' シングルクオーテーション と " ダブルクオーテーションを確認して下さい。プロパティは json と同じく “ ダブルクオーテーションでくくらないとだめ。必然的に波カッコは ' シングルクオーテーションでくくることになります。

インタラクティブに階層構造を操作できるjQuery pluginのjsTreeを使い、上記のようにUIを向上させます。 「Railsでawesome_nested_setを使って階層構造を作成する」の実施を前提にしています。 動作確認 Ruby 2.1.2 Rails 4.2.0 awesome_nested_set 3.0.2 jsTree 3.0.9 目次 1. jsTreeでクライアント側の動きを実装する 1.1. RailsにjsTreeをインストールする 1.2. jsTreeのプラグインでカテゴリーを移動できるようにする 1.3. カテゴリーの追加、リネーム、削除を追加する 2. jsTreeの各アクションとRailsのAPIを連携させる 2.1. カテゴリの初期データをサーバーから取得する 2.2. カテゴリの追加/リネーム/削除アクションを実装する 2.3. カテゴリの移動

久々にプログラミング系のネタです。 はてなブログにJavaScriptのグラフライブラリであるNVD3.jsを使用し、ハイセンスな株価チャートを表示させてみます。 もちろん、同様の方法で棒グラフ、円グラフ、折れ線グラフ等の基本グラフや、複合グラフ等の高機能なグラフまで簡単に表示させることができます。 １．CSS/ライブラリの読み込み まずはCSSとJavaScriptライブラリを読み込みましょう。 下記ソースをページ上部にコピーします。 <link href="http://cdn.rawgit.com/novus/nvd3/v1.8.4/build/nv.d3.css" rel="stylesheet" type="text/css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" char

pageが対象のページ per_pageが１ページあたりの件数 詳しくはこちらをご確認ください。 http://qiita.com/docs JavaScriptでJSONデータ保存 こちらの記事にもっとシンプルなものを書いています。 http://qiita.com/ganezasan/items/b5dbb42b966af0de44cb 保存後はqiita.jsonという名前にしてください。 <!DOCTYPE html> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; border: 0; } body { background: #fff; } </style> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https:

Buffer のメンバーはReactが大好きで、フロントエンドの多くのコードベースを徐々にReactに移行させています。ReactにFluxを加えると、モジュラー形式の小さなアプリでできた複雑なプロダクトを構築するための、とても健全な方法になると思います。そこで、１つ１つの新しい小さなアプリと機能を、大規模な構造体に追加される、Reactの新しいブロックと考えます。 私は最近、このような新機能の１つに取り組んでいますが、React＋Fluxのアプリケーションを作るのがいかに簡単であるかと、その理由について、さらに夢中になってしまいました。Reactを使うと有意味なコンポーネントを集めてUIを宣言的に構築するのが楽になり、Fluxはその混成体に妥当なデータフローをもたらします。 複雑なアプリケーションを作るときに発生する課題について多くの考察がなされましたが、React＋Fluxの組み合わせ

先日『Flux Utilsのドキュメント日本語訳』というFlux Utilsのドキュメント英語版を翻訳した記事を投稿しました。Flux Utilsは、Facebook製のFluxフレームワークとでもいうでしょうか。ただ残念なことに、このドキュメントを読むだけでは、Flux Utilsの使い方のイメージを完全に掴むことは難しいと思います（自分がそうでした…）。ということで、Flux Utilsを使って、簡単なサンプルを作ってみました。この簡単なサンプルを通して、Dispatcher.jsだけを使ったFluxの実装方法と比較しながら、Flux Utilsの使い方を説明していきます。 はじめに（Flux Utilsとは） Flux Utilsは、Facebook製のFluxフレームワークとなります。ただ、すべての用途に対応するような完成されたフレームワークではないとFlux Utilsのドキュメ

ドラッグアンドドロップでフォームを作れるWebサービスはたくさんあるんですが、フォームを設置するjQueryプラグインはそんなにないですよね。 そんなわけで今回はそんなD&Dでフォームを作れるようにするためのプラグインのご紹介です。 こういうのを実装できます。 ドラッグアンドドロップでフォームを組み立てる。 編集は超らくちん。 View XMLをクリックすればそのまま使えるコードがでてきます。 実際は触ってみるのが一番わかり易いと思います。 jQuery formBuilder | Drag & Drop Form Creation ダウンロード後、圧縮ファイルを解凍して、demoフォルダの中のindex.htmlを、コーダーで開いてみましょう。 大体の仕様はその中を見ればほぼわかると思いまうs。