最近気になったOSS UIまとめ

handsontable

ExcelライクなUIを提供するライブラリ

範囲選択、右︎クリックとかできて割と便利。

使い方

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script src="//cdnjs.cloudflare.com/ajax/libs/handsontable/0.12.2/handsontable.full.min.js"></script>
<div id="example"></div>
<script>
var data = [
  ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"],
  ["2009", 0, 2941, 4303, 354, 5814],
  ["2010", 5, 2905, 2867, 412, 5284],
  ["2011", 4, 2517, 4822, 552, 6127],
  ["2012", 2, 2422, 5399, 776, 4151]
];
var container = document.getElementById('example');
var hot = new Handsontable(container,
{
  data: data,
  minSpareRows: 1,
  colHeaders: true,
  contextMenu: true
});
</script>

Sortable

非JQueryのドラッグ＆ドロップ操作を簡単に実現できるライブラリ

使用方法は単純で、対象エレメントをSortable.create(エレメント)するだけ。

ドラッグ＆ドロップできるlistサンプル

  • item 1
  • item 2
  • item 3

CODE

1
2
3
4
5
6
7
8
9
10
11
<script src="bower_component/Sortable/Sortable.js"></script>
<ul id="items">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>
<script>
var el = document.getElementById('items');
var sortable = Sortable.create(el);
</script>

wysihtml

高機能なWeb Textエディタ。

hexoを使ってみる

HEXO

ライトなWebメモ的なのを探していたら、面白そうな物を見つけたので使ってみる。

NodeJSベースのBlog生成ツールのようで、jekyllのような物らしい。

ちょっと前まではjekyllでやっていたが、最近NodeJSとJavaScriptにハマっているのでこちらを試してみようと思う。

とりあえずインストール

1
npm install hexo -g

NodeJSとGitが入っていればこれだけでインストールできる。

とりあえずページ作成

最初にやる事はこれ

1
hexo init hogeBlog

上のコマンドを実行する事で、ブログの雛形が出来る。

あとは、出来上がったディレクトリに移動してnpmモジュールをインストール

1
2
3
cd hogeBlog
npm install

次のコマンドを叩くとローカルサーバーが立ち上がる。

1
hexo server

その後、http://localhost:4000/ とかにアクセスすると最初に出来上がっている雛形ページが見えるようになる。

画像の追加できるように設定する

post_asset_folder: falseとなっているのでpost_asset_folder: trueに設定する、これで次から作れる新規投稿毎にリソースを管理できるようになる。

画像を指定する場合は以下のような専用のタグを使うと指定すると画像が見えるようになる、

1
{％ img center /myfreebook/2014/12/08/use-hexo/002.png 500 ％}

別段マークダウン指定でも問題ない。

1
![image](/myfreebook/2014/12/08/use-hexo/002.png)

リポジトリ作成

github pagesでも公開できるようなので、リポジトリを作り_config.ymlのdeploy:に自分のgithubの設定を加える。

詳しくはhexoの設定ページ参照

ページ公開

ここまでの設定が巧く言っていれば、deployコマンドで公開できる。

1
hexo deploy

最後に

画像の登録が多少面倒な事をのぞけば、普通に使いやすい。

作業記録兼、メモ帳にしつつ、テンプレート部分を色々弄って行きたい。

個人的にはマークダウンでドキュメントを書けるというのがとても楽だというだけなので、はてぶだろうがキータだろうがjekyllだろうがなんでもいいのだけれども

ヘッダ部分の機能が完全に死んでる(RSSとかサイト内部検索とか)ので、ここをまずどうにかしないと。