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 :

$ rails g devise_token_auth:install User auth Running via Spring preloader in process 3685 create config/initializers/devise_token_auth.rb create db/migrate/20180401103356_devise_token_auth_create_users.rb insert app/models/user.rb insert app/controllers/application_controller.rb gsub config/routes.rb GitHubのマニュアルに書いてある通りにこのコマンドを打ったはいいのですが、すでにdeviseを導入しているのでUserモデルはあるんですよね。なので、このままマイグレートしても失敗するのは目

【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プログラミングまで網羅。

CSS Gridは、今まで使用してきたレイアウトの実装とは大きく異なります。flexboxはアイテムを一つの軸に沿って並べるので、floatの延長としてあまり難しくはないと思います。しかし、CSS Gridは軸が一つではなく、縦と横の二つの軸でレイアウトします。 CSS Gridの基本的な使い方を分かりやすく解説します。 Learn CSS Grid in 5 Minutes by Per Harald Borgen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSS Gridを始めよう！ 最初のグリッドレイアウト CSS Gridの列と行 CSS Gridのアイテムの配置 CSS Gridを始めよう！ グリッドレイアウトはWebサイトの設計において基本であり、CSS Grid モジュールはグリッドを作成するための最も強力で

概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: 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の組み合わせ