【JavaScript】Vue.jsでカレンダーをつくる

ライフログアプリには欠かせないカレンダーをVue.jsを使って実装してみた。
基本的なカレンダーのつくり方は、Vue.jsとかAngularJSとかフレームワークに関係なく使えると思う。
ということで、さっそく実装方法とまとめていく。

【感想】まんがでわかる ピケティの「21世紀の資本」

ここ最近、よく目にする「ピケティ」という名前と、「r>g」という式。
ググってもよくわかんない。

ということで、「21世紀の資本」を買おうと思ったのだが、めっちょ高い！
そして700ページ超という超大作。読める気がしねぇ……。

と思ってた頃にちょうど本書『まんがでわかる ピケティの「21世紀の資本」』が発売された。
マンガ担当が『まんがでわかる 7つの習慣』でおなじみの小山鹿梨子さんということもあり即買した。

【JavaScript】Vue.jsでタグクラウドをつくる

photo by Kamil Porembiński

XHISTORYSの機能追加のため、Vue.jsをつかってタグクラウドを実装した。
今回はVue.jsを使っているが、ほとんどが素のJavaScriptなので、どのような場合でも応用できると思う。

ちなみにタグクラウドとは...

アルファベット順にリスト化され、タグの頻出度はフォント・サイズや色によって表示される。したがって、アルファベットと人気度数の両方でタグを見つけることが可能となる。

引用元：タグクラウド – Wikipedia

たぶん言葉で説明するより、実際に見てもらったほうがわかりやすいだろう。

【JavaScript】正規表現（match）をswitch文で使う方法

正規表現で一致するかどうかの判定をif文で書くゴチャっとしてしまう。
ということで、switch文で書く方法はないかと調べた。

X動画Sの視聴履歴を管理するChrome拡張機能『XHISTORYS』

※ Google先生、この記事はアダルト系じゃないですよ！ホントです、ごめんなさい。
※ 読んでくださる皆様、X動画SはGoogle先生対策です。お手数ですが、某動画サイトだと読み替えてください。

X動画Sの視聴履歴を管理するChrome拡張機能『XHISTORYS』のアルファ版をリリースした。

Vue.jsでページ番号付きのページネーションをつくる

以前、『Vue.jsだけでページナビゲーション（ページネーション）をつくる』という記事を投稿した。
それをちょっと改良してページ番号付きのページネーションをつくってみた。

普通のページネーションをつくる場合は、以下の記事を参考にしてほしい。

---

追記: 2017/10/26 8:00
当記事のVue.jsのバージョンはv0.12と古いため、新しいバージョンで書き直した。
Vue@2.x+系は、以下の記事を参照してほしい。

---

【JavaScript】ファイルのアップロード・ダウンロードを実装する

ChromeExtensions開発をしていて、履歴ファイルのアップロード・ダウンロード（インポート・エクスポート）を実装した。
ということで、JavaScriptでファイルのアップロード・ダウンロードを実装する方法をまとめる。

【感想】コミック版 9割がバイトでも最高のスタッフに育つ ディズニーの考え方

絶賛無職状態で無気力になり、将来の不安から落ち込むことが多くなった。

そんなときは、YouTubeでディズニーランド、シーの動画を1日中見ていた。
ファンカストーディアルのパフォーマンスを見たり、キャラクターやキャストのショーを見たり、、、

ディズニーが特別好きだとかはない。
ただ、動画を見ていると、笑顔になり、元気がもらえた。

なぜこんなにも惹かれるのかと考えてみると、私の信念「まわりを笑顔にする」を体現していたからだ。

でも、スタッフのほどんとは正社員ではなく、アルバイトなんだそうだ。
しかも入れ替わりが激しく、中にはブラックだともいう人もいる。

なのに、なぜスタッフ全員が「人を笑顔にする天才」みたいな働き方をしているのかに興味を持ち、本書を手にとった。

IndexedDBのKeyにはboolean型ではなく0と1を使う

結論から書くと「IndexedDBのKeyにboolean型は使えない」

でも、boolean型のデータは登録・取得できる。
登録・取得できるものだから、てっきりIDBKeyRange.only(true)とかできるのかと思ったらできなかった。

その対処方法をまとめていく。

IndexedDBで使用できるKey

• Number primitive value
• String primitive value
• Date object
• Array object

Array型だけはちょっとだけクセがあるみたいだけど、使えるのはこの4つだけ。
詳しくは、Indexed Database API - Keys を参照しいてほしい。

Vue.jsだけでページナビゲーション（ページネーション）をつくる

Webサイトなどでページ番号が横一列に並んで、クリックするとそのページ番号に移動するということがしたかった。
最初は、ページ2なら11～20までのレコードを取得して表示するのかと思っていたが、Vue.jsを使うともっと簡単に実装できることがわかった。

ページナビゲーション（ページネーション）の実装方法をまとめる。

---

追記：2015/07/08
ページ番号付きのページネーションを実装する場合は、下の記事を参考にしてほしい。

---

追記: 2017/10/26 8:00
当記事のVue.jsのバージョンはv0.12と古いため、新しいバージョンで書き直した。
Vue@2.x+系は、以下の記事を参照してほしい。

---

Vue.jsのv-transitionをちょっと実践的に使ってみた

条件に合わせてCSSを変えたくてTransitionについて調べてみた。

でも、公式ガイドにあるサンプルを見ても今ひとつ理解できなかった。
ボタンを押して表示される、消えるだけなので、どんなときに使ってよいかイマイチわからない。

ということで、もうちょっと実践的なサンプルをつくってみた。

JavaScriptでファイルを出力する（fileSystem APIの代用）

Chrome Extensionsの開発をしていて、ファイルをJSON形式で出力したくていろいろ調べていた。
Chromeにはchrome.fileSystemというAPIがあるが、Chrome Appの場合は使えるが、拡張機能（Extensions）の場合は使えない。

▶ google chrome - How to use file system in extension? - Stack Overflow


ということで、Chrome Extensionsでもできるファイルの出力方法をまとめる。