JavaScript書いていると、「DOMを非表示にしておいて、特定条件で表示する」みたいなのってよく書きます。 一個一個は単純でも、複数になるとそこそこ面倒。。。 今回は、この非表示にする方法にフォーカスしてみるやつです。 なんでもかんでもdisplay: none…

Proxyオブジェクトが結構便利だったので書いてみます。 Proxy Proxy オブジェクトは、基本的な操作 (例えばプロパティの検索、代入、列挙、関数の起動など) について独自の動作を定義するために使用します。 const proxy = new Proxy(targetObject, handler)…

初めてVuexを触ったとき、とくにnamespaceも使わずやってました。 ちなみにmapActionsは使わず、this.$store.dispatchでしたい派。 this.$store.dispatchの方がdispatchしてるわー！今dispatchしてるわー感があるので好き。 というのは嘘で、コード見たとき…

Qiitaなんかである入力エリアとプレビューエリアのスクロールが連動するやつ。 要件は違ったんですが、スクロール同期という点では同じだったのでやってみたので書いておきます。 単純に連動する まずは単純に同じサイズの要素を連動させてみます。 単純な連…

Electronのアプリの自動アップデートについて調べる機会があったので書いておきます。 いくつか方法があって Electronに元々入っているautoUpdater electron-builder + electron-updater update-electron-app 今回は、electron-builder + electron-updaterを…

Electronのアプリをレンダラ側はVueで書いています。 ログイン画面→トップ画面みたいな2画面構成。 ログイン、ログアウトを繰り返すとやたらとメモリリークしていました。 何かが破棄しきれていないんだろうけど、スナップショットから見つけるのも結構苦労…

今更ながら非同期でハマったのでメモ。 非同期処理を同期的に書くなら、async/awaitで良いのですが、 これがディレクトリの中身を読むやつみたいな場合... const entries = [] if (entry.isDirectory) { const reader = entry.createReader() reader.readEnt…

最近コンポーネントライブラリにBuefyをちょいちょい触っている中で、 モーダルでちょっとハマったのでメモ。 Programmaticにモーダルを出す Buefyのドキュメント読むと分かりますが、 vm.$modal.open({ parent: true, component: Component, props: { // pr…

Vueやってると出てくる、Util関数をテンプレートで呼びたい問題。 何が問題かというと・・・順番に見ていきましょう。 問題 まずはこんな関数を定義。 日付表記をYYYY/MM/DDにするだけの関数です。 import dayjs from 'dayjs' export function formatDate(da…

ちょっとしたダイアログを出したいとか、ポップアップみたいなの出したいとか・・・。 そういうことありませんか？ コンポーネントライブラリ使ってれば、大体網羅できますが、要件に合わないとか、思ってるのとは違うなーみたいな状況とか。 方法 Vue.compo…

今年はブログ書くって言うたので書いてみます。 ネタは別のとこに書いたやつではあるけど。 前の記事でも触れていますが、昨年の秋ごろからAngularを触っています。 Angularでngrx使いつつです。 ことのなりゆき (本題だけなら飛ばしてね) 年末にふとng-japa…

Vue.js / Nuxt.js Meetup Osaka #0に参加したので、そのレポ。 デザイナーの私が Vue.js を触ってみた / Yasui Risaさん 資料→ デザイナーの私が Vue.js を触ってみた タイトル通り。内容は初心者向け。 環境構築のやり方は飛ばして、CodePenで実演しつつの…

久々の更新。 2月にこんな発表がありました。 Announcing NativeScript-Vue 1.0 要約。「nativescript-vueの1.0が出たよ」 NativeScript JavaScriptとかTypeScript、Angularを使って、ネイティブなモバイルアプリを作ることができるフレームワークです。 詳…

ひっさびさにこっちのブログを書きます。 Gulpを少し触ってみたので、備忘録として、導入からJavaScriptの結合とミニファイまでを書いておきます。 Gulpってなんぞや。 フロントエンドのビルドツールで良いのかな。 Gruntで気になったところが改善されている…

ちょっとハマってしまった事柄があったので、備忘録的なノリで書いておきます。 parseInt() 文字列の引数をパースし、指定された基数の整数を返します。 var num1 = '07', num2 = '08'; console.log(parseInt(num1)); // a console.log(parseInt(num2)); // …

もう10月です。はやい...。 先日、発表をする機会がありまして、 前日まで資料に手を付けず、あたふたしておりました。 会社のPCにはOfficeあるけど、プライベートのPCにはOfficeもなく、 グーグルドライブを使うか…どうするかと考えたわけです。 結局、reve…

先日発売しました、AngularJSリファレンスを購入しました。 やらないと... 最近は便利なAPIが増えてきているおかげもあって、 APIからデータとってきて、何か作るということが増えてきているわけで。 むしろこれから機会も増えそう。 そこで使う言語って何よ…

OpenLayers3用のリポジトリを作った。 ol-sample 印象 OpenLayers2と比較して、なんだかとっつきにくい印象。 まだ深く触っていないからというのもあるけど…。 前にQuickStartだけ触った記事を書いたけど、完全に内容忘れてた。 OpenLayers3をここからダウン…

前回はtransitionで、ひたすら円を動かし、そして消すをやりました。 今回は、見た目難しそうなアレをやってみます。 force layout 力学モデル Wikipedia見ましょう。 あんなやつです。 作ってみる データの用意 nodes用のデータ、links用のデータの2つを用…

地図ばかりいじってきましたが、transitionを使い、 図形を遷移させて遊んでみたいと思います。 SVGと、図形の描画 ここはD3の基本的なところです。 まずはいつも通り、svg要素を作成します。 // svg var svg = d3.select('body').append('svg').attr({width…

前回は自動で回転させましたが、今回は手動で回転させてみます。 手動で回転させる際に参考にしたのは、D3.jsのexampleのこちらになります。 ほぼソースは同じですね。 exampleとの差異 exampleのソースを見てみると... var feature; var projection = d3.ge…

前回まで弄っていた日本地図から少し離れ、今回は別の投影法を試してみます。 orthographic D3.jsには、様々な投影法が用意されています。 その中でも今回はorthographicを使用してみます。 この投影法を使うと、地球儀みたいなものが作れちゃいそうです。 e…

先日の記事では日本地図をとりあえず描いてみました。 あれからちょいちょいと弄りまして、地図上にcircleを追加。 地図にマウスオーバーすると色を変えるようなことをしてみました。 イベントを追加する イベントを追加する時には.on('event_name', functio…

以前買った、インタラクティブ・データビジュアライゼーションはひとまず読了しました。 ちゃんと覚えたか?と問われれば、まだですが、少し感想を。 感想 D3.jsのチュートリアルの拡張のような内容で、 チュートリアルにある内容はもちろん、パイチャートや…

D3.jsとは Data Driven Documentの頭文字をとって、D3のようです。 D3.js はデータに基づいてドキュメントを操作するための JavaScript ライブラリです。 D3 はHTML や SVG、 CSSを使ってデータに命を吹き込みます。D3は WEB 標準に重点を置いており、 強力…

お久しぶりの投稿です。 めちゃくちゃサボっておりました。 さて、今回のネタは地図です。 地図といえば Google Maps APIなんかを使えば、比較的容易に地図を使ったアプリの作成が可能ですね。 あとは、好みに合わせてYahooやBingなんかもあります。 Google …