miyabihitoの日記

個人的な技術メモ

IndexedDB

概要

構造化された多くのデータをブラウザ内に永続化する有用なAPI。
Key:Valueでデータを保存できる。
オブジェクト指向データベース
Indexedの名の通り、Valueがオブジェクトの場合、
指定したプロパティのインデックスを作成し、検索することができる。

developer.mozilla.org

  • インデックス

    Valueがオブジェクトの場合、プロパティでインデックスを作成できる。
    したがって、特定の値のプロパティを持つオブジェクトを取得する時、アプリケーション側での全件探索が不要となる。

  • トランザクション

    CRUDはトランザクションで行われる。
    開始時に、オブジェクトストアやモード(readonly等）を指定する。

他の概念や用語の定義はこちら

ライブラリ

  • Dexie

    Promiseベースのインタフェースを提供してくれるライブラリ
    ObjectStoreとclassのマッピングもやってくれるとのこと

  • localForage

    localStorageと同じようなAPIのストレージライブラリ

資料

リアルタイムWeb技術

概要

リアルタイムWeb技術と呼ばれたりする技術のメモ
詳細はそれぞれの資料を参照。

Polling

  • メリット
    • 単純
  • デメリット
    • 無駄なリクエストが生じ、サーバ負荷の増加等を招く
    • それほどリアルタイムではない
  • 対応環境
    • 特に制限なし

Long Polling

サーバからのPushを擬似的に実現

  • メリット
    • Pollingよりリクエスト回数を減らせる
  • デメリット
    • 再リクエスト中に生じたイベントの通知が遅延する
  • 対応環境
    • 特に制限なし

Server-Sent Events

サーバサイドpush

WebSocket

上述の技術はサーバからのpushを実現するためのものだが、本技術は双方向通信を実現するもの。
また、上述の技術の通信プロトコルはHTTPだが、本技術のプロトコルはWebSocket
APIも規格化されている
same origin policyがないため、想定しないドメインからの利用を防いだりする必要がある。

資料

ID

OAuth, OpenID

「OAuth 認証」を定義しよう - OAuth.jp
OpenID Connectはそんなに大変かね？ - OAuth.jp

スマートフォンUIフレームワーク

UIフレームワーク

スマホサイトを作ろうと思うが、CSSをフルスクラッチできる力はないので、
フレームワークのお力を借りようと思う。

色々調べたけど、とりあえずBootstrap使っていきます。
この分野はどう学習していけばいいのかよく分からない。

Bootstrap

言わずと知れたフレームワーク

  • テーマ・テンプレート

Semantic UI

Materialize

ChocolateChip-UI

material ui

マテリアルデザインを実装したReactのコンポートネント
Reactを学ぶ時に、合わせて触ろうか

資料

Vim プラグイン

Vim 調査中

プラグイン

NeoBundle (Shougo/neobundle.vim)

プラグイン管理のプラグイン
同様のプラグインにVundle等もあるが、こちらは後発ゆえ様々な機能が追加されている。
以降のプラグインは、本プラグインで管理していく。

コマンド一覧等の詳細は、:help neobundle にて

neocomplete (Shougo/neocomplete.vim)

入力補完のプラグイン
Shougo/neocomplcache.vimの後継

どう設定するのが良いのか、まだ把握できていない。。。

Neosnippet (Shougo/neosnippet.vim)

fugitive.vim (tpope/vim-fugitive)

gitのラッパープラグイン

詳細は、:help fugitive

unite.vim (Shougo/unite.vim)

キーマッピングが各々に任されているので、自由ではあるが、
設定を模索中。

lightline.vim

ステータスライン・タブラインのカスタマイズプラグイン

vim-gitgutter

gitの差分を表すマークを行番号の左に表示してくれる。
hunkのリバートやhunk間の移動もできるようにしてくれる。

ctrlpvim/ctrlp.vim

ファイル等のファインダープラグイン
Ctrl-p等のキーマッピングがデフォルトで設定されているので、
自分で設定せずとも簡単に使い始められる。

quickrun(thinca/vim-quickrun)

watchdogs.vim

syntastic

emmet-vim

Emmetのvim plugin
HTML & CSS のコーディング速度が向上するそう

previm

markdown等のプレビュー用プラグイン

Vim - 依存ツールなしにMarkdownプレビューできるprevimプラグインを作った - ぼっち勉強会

snipmate

YankRing.vim

surround.vim

テキストオブジェクトの外側の区切り文字（文字列）の操作を可能にするプラグイン
vimでHTMLを編集するのに必須と思われる

sudo.vim

smartchr

vimfiler

NERD Tree

ファイルエクスプローラ　プラグイン
IDEのように、ツリー状にファイルシステムを表示できる。
tで新しいタブでファイルを開く時、少し間があるのは自分の環境のせいか。。。

project.vim

savevers

Tagbar

Gundo

JavaScript or Node.js

Node.vim

gfで、requireで読み込まれるファイルをオープンできる。
コードリーディングが捗りそう。
特段の設定をせず、使い始められる。

vim-javascript-syntax

JavaScriptのシンタックスプラグイン
( や 引数がハイライトになるので見やすくなる

Vim 操作

Vim

基本中の基本は省略。
普段使おうと思った操作をまとめる。

オプション

  • -p

    指定されたファイルをタブで開く

移動

コマンド 効果
w 次の単語の先頭へ移動
e 単語の末尾へ移動
b 前の単語の先頭へ移動
f 行中の次のへの移動 （;で更に次へ移動）
t 行中の次のへの移動（;で更に次へ移動）
# カーソル位置の単語の検索（前方）
* カーソル位置の単語の検索（後方）
% 対欧する括弧への移動
H 画面上の最上行へ移動
M 画面上の中央行へ移動
L 画面上の最下行へ移動
z or zt 現在のカーソルの行が最上行になる
z. 現在のカーソルの行が中央行になる
z- 現在のカーソルの行が最下行になる
C-f 下にページスクロール
C-b 上にページスクロール
C-d 下に半ページスクロール
C-u 上に半ページスクロール
gf カーソル位置の名前のファイルをオープン(goto file)

編集

基本

<オペレータ><モーション> で操作と操作対象を指定する。 （モーション単体は上の移動のコマンド）

  • オペレータ
オペレータ 操作
c 変更（削除 + ノーマルモード移行）
d 削除
y コピー
  • モーション
モーション 対象
w カーソルのある単語 （後ろの空白含む） 単語全体を指定する場合、単語の先頭で使う
e カーソルのある単語（後ろの空白含まない）
$ カーソル位置から行末まで

テキストオブジェクト

特定の文字で囲まれた文字列を操作対象に指定するコマンド
citは便利

コマンド 対象
a 全体を指定
i 内部のみ指定
w 単語
s 文章
[, ], (, ), <, >, {, }, “, ‘ 指定された記号の範囲
t タグ

etc

コマンド 効果
r 一文字置換 （x + i + ESC の一連の操作を省略できる）
u 操作の取消
C-r 取消の取消
:r ファイル内容の挿入
:r ! コマンド出力の挿入
= インデントの自動調整
C-v -> I 矩形選択後の編集
. 最後に行った変更を再度適用する

検索

コマンド 効果
[I

バッファ

ウィンドウ

コマンド 効果
:close ウィンドウのクローズ
:only カレントウィンドウ以外のクローズ

全ウィンドウまとめてクローズは？

タブ

コマンド 効果
:tabnew 新規タブの作成
:tabe 新規タブでのファイルオープン
gt, gT タブの移動
:tabclose タブのクローズ
C-w gf カーソル位置の名前のファイルを別タブでオープン

全タブまとめてクローズは？

折り畳み

コマンド 効果
zo カーソル位置の折り畳みを開く
zO カーソル位置の折り畳みを全段階開く
zc カーソル位置の折り畳みを閉じる
zC カーソル位置の折り畳みを全段階閉じる
zM 全ての折り畳みを閉じる (foldlevel=0)
zR 全ての折り畳みを開く (foldlevel={maz})
[z カーソル位置の折り畳みの最初の行へ移動
]z カーソル位置の折り畳みの最後の行へ移動
zj カーソル位置の下の折り畳みへ移動
zk カーソル位置の上の折り畳みへ移動

Netrw

リモートに対応したファイルブラウザプラグイン。
Vimに同梱されているので、別途インストールは不要。

コマンド 効果
:Explorer 起動
:Vexplorer(!) 縦分割後、左（右）ウィンドウで起動
Netrw内コマンド 効果
<Enter> ファイルオープン、ディレクトリ移動
v 縦分割後、右ウィンドウでオープン
P オープン済みウィンドウでファイルオープン
t 新しいタブでオープン
- 上位ディレクトリへ移動
s 並び順の基準変更
r 逆順
i 表示形式の切替

資料

その他

コマンド 効果
C-g ファイル・カーソル位置情報の表示

Tips

検索

検索時に、大文字小文字を区別しない場合、\cを末尾に付ける
ex: /abc\c

複数回にわたって区別しない場合、
:set ic (Ignore Case)
区別する設定に戻る時
:set noic
（設定の無効化は、他の設定に関してもnoを付けるだけ）

補完候補一覧

コマンドやファイル名の入力中に、C-dで補完候補が表示される

オプション

:echo &(option name) or :set (option name)? で、設定されているオプションの値を確認できる。

ex. ) :echo &history

:options で、オプションの一覧が表示される。

ハイライト

:noh で、検索後等のハイライトを消せる

複数行にまとめて挿入

  1. Ctrl + v で挿入箇所選択
  2. I
  3. 挿入する文字を入力
  4. ESC

参考

Vim

Vim

※項目毎に分割中

概要

操作

設定

プラグイン

NeoBundle (Shougo/neobundle.vim)

プラグイン管理のプラグイン
同様のプラグインにVundle等もあるが、後発ゆえ様々な機能が追加されている。
以降のプラグインは、本プラグインで管理していく。

コマンド一覧等の詳細は、:help neobundle にて

neocomplete (Shougo/neocomplete.vim)

入力補完のプラグイン
Shougo/neocomplcache.vimの後継

Neosnippet (Shougo/neosnippet.vim)

fugitive.vim (tpope/vim-fugitive)

gitのラッパープラグイン

unite.vim (Shougo/unite.vim)

ctrlp.vim (ctrlpvim/ctrlp.vim)

※unite.vim把握後に確認。

quickrun

snipmate

airblade/vim-gitgutter

YankRing.vim

surround

sudo.vim

smartchr

NERDtree

project.vim

savevers

syntastic

vim-gitgutter

vimshell

vimfiler

カラースキーマ

Vim colorschemes (flazz/vim-colorschemes)