読者です 読者をやめる 読者になる 読者になる

38ch blog

気になるから言いたい。

Alasqlを使ってAngularでCSVダウンローダーを実装する

AngularJS

https://cloud.githubusercontent.com/assets/1063454/19309516/94f8007e-9085-11e6-810f-62fd60b42185.png

KPI管理ツールとかを開発してるとよくある要件としてCSVでデータをダウンロードするという機能。
Alasqlというライブラリを使うと簡単にangularで実装できるみたいだったのでやってみました。本来はその名の通りSQLを書くためのものですが、CSVダウンロードも簡単にできる。

github.com このAndrey Gershunというおじちゃんがメインで作ってる・・・?

インストール

お好きな方法でインストールしてください。

npm install --save alasql      # node
bower install --save alasql    # bower
import alasql from 'alasql';   # meteor
npm install -g alasql          # command line

CDNでやる場合はこちらをHTMLに

<script src="http://cdn.jsdelivr.net/alasql/0.3/alasql.min.js"></script>

インストールした場合もちゃんとalasql.min.jsをHTMLに読み込ませてあげましょう。

ダウンローダーを実装

基本的には以下のみ。簡単すぎる!

    alasql.promise('SELECT * INTO CSV("my.csv", {headers:false}) FROM ?',[data])
            .then(function(){
                 console.log('Data saved');
            }).catch(function(err){
                 console.log('Error:', err);
            });;

ここでは単純にSELECT * FROMでやっているけど、WHEREとかGROUP BYとかORDER BYとかも使用可能。 しかし、そもそものデータを持ってくるサーバーサイドでも何かしらのSQLを書いていると思うので、そことの兼ね合いは考える必要あり。サーバーサイドでもフロントエンドでもSQL書いてるのはダサいので。

上記はheaderを無しにしてるけど、trueにすれば付け加えることも可能。
あとは、デフォルトのseparatorが;になっているので、それを,に変えないと、上手くCSV上でセルが分かれなかった。

※参考元 jsfiddle.net

Macのエクセルのセル選択のショートカットは「Ctrl + U」

Excel

f:id:null368:20170225231745p:plain
そういうことです。WindowsだとF2でできるけど。
今までずっとMacではGoogle SpreadSheetだったのでEnterでセル選択できたけど、 Excelだとそういうことみたい。
左手の小指でCtrl & 右手の人差し指でU。

「HabitHub」はデータ好きな人には至高の習慣管理アプリ

アプリ LifeHack

最近使っているHabitHubというAndroidアプリ。文字通り、自分のHabit(習慣)を管理してくれます。 習慣管理アプリはいろいろあるみたいですが、僕はこれが気に入ったのでご紹介。

僕は、習慣として、ジム、数学の勉強、プロテイン飲むこと、瞑想を登録。 f:id:null368:20170225212010p:plain

TOPはその週の完了未完了状況が分かる画面と、習慣の継続状況が折れ線グラフで分かる画面。 サボるとその日は凹になるので、折れ線の成長が下がってしまう。REWARDSは、習慣を継続するとポイントがたまっていって、何ポイント貯まったら自分にご褒美あげましょう的な機能ですが、習慣個別にREWARDSが設定できないのが残念なので、今は使ってません・・・

習慣登録画面はこんな感じ。f:id:null368:20170225213015p:plain
何でやるかを三つ登録する欄がある。これが結構大事。あとは、毎週何曜日にどれくらいやるかとか。 カテゴリは「健康」「仕事」とか登録してみた。

習慣の個別ページはさらに詳細なデータを見れる。 f:id:null368:20170225213431p:plain
習慣開始日から今日までの日数で何%達成してるとか。つまり当たり前だけど、一回でもサボると100%にはなりません。70%はやばい・・・これから巻き返す予定。 もちろんCSVにもエクスポートできて、エクセルとかで詳細な分析とかもできそう。

日々の習慣の達成未達成は、ウィジェットから行えます。これがAndroidの良いところ。 毎日寝る前に、入力して寝ます。 f:id:null368:20170225213807p:plain

iPhoneアプリはcoming soonになっていたので、もう少しで出来るはず。 まだ使いはじめて一ヶ月ほどなので、データ自体はそんなに溜まってきてないですが、UIとか非常にいい感じで入力自体は楽なので、データがたまっていくのが楽しみです。

The HabitHub

play.google.com

Macでterminalにgitのブランチ名を表示する

git terminal

f:id:null368:20170212181217p:plain
デフォルトのターミナルでは、git管理下のディレクトリに行ってもブランチ名が表示されていないので、git branchをしないと自分が今どこのブランチにいるのかわかりません。そのままgit commitしてしまって、「あ、めんどくせ・・・」となることも。

基本的には、気にする場所は、usr/local/Cellar/git/{gitのversionの数字}/etc/bash_completion.d/なんですが、お使いのPCのgitがApple Gitの場合、多分ディレクトリ自体が見つからないはずです。どのgitを使っているかはgit versionで確認しましょう。

Homebrew gitへUpdate

Apple gitの場合、一旦、homebrewのgitにアップデートしましょう。
homebrew自体をインストールしていない人はこちらから。 brew.sh

$ brew install git
==> Downloading https://homebrew.bintray.com/bottles/git-2.5.0.mavericks.bottle.
######################################################################## 100.0%
==> Pouring git-2.5.0.mavericks.bottle.tar.gz
==> Caveats
The OS X keychain credential helper has been installed to:
  /usr/local/bin/git-credential-osxkeychain

The "contrib" directory has been installed to:
  /usr/local/share/git-core/contrib

Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

zsh completion has been installed to:
  /usr/local/share/zsh/site-functions
==> Summary
🍺  /usr/local/Cellar/git/2.5.0: 1383 files, 32M

terminalを再起動したあと、git versionで再度、gitのバージョンを確認してみる。
ここでバージョンが変わってなければ、PATHを通すなり対処してください。

gitcomprication.bashを移動

さて、homebrewのgitがインストールされると、初めの、usr/local/Cellar/git/{gitのversionの数字}/etc/bash_completion.d/ができており、そこにgitcomprication.bashがあるはずです。それを/usr/local/git/contrib/completion/に移動してあげます。

mkdir -p /usr/local/git/contrib/completion/
cd usr/local/Cellar/git/{gitのversionの数字}/etc/bash_completion.d
mv git-completion.bash /usr/local/git/contrib/completion/


.bashrcと.bash_profileの設定

.bashrcに以下の記述を追加(ホームディレクトリにあるはずです)

# git settings
source /usr/local/git/contrib/completion/git-completion.bash
GIT_PS1_SHOWDIRTYSTATE=true
export PS1='\[\033[32m\]\u@\h\[\033[00m\]:\[\033[34m\]\w\[\033[31m\]$(__git_ps1)\[\033[00m\]\$ '

そもそも.bashrcがない場合は、新しく作成しましょう。
追記したら、反映のために以下を実行

source ~/.bashrc

.bash_profileに.bashrcを読みに行く設定が書かれていない場合は、以下は.bash_profileに追記してください。

$ vi ~/.bash_profile

if [ -f ~/.bashrc ] ; then
. ~/.bashrc
fi

.bashrcやら.bash_profileとか何やねんそれという人はこちらを読んでみてください。

qiita.com

以上を完了させると、terminalでgitのブランチ名が表示されるようになるはずです。

Slackの新機能「スレッド」の使いどきはこんな時

Slack

2,3週間くらいまえにslackにスレッドという新機能が追加されましたね。
jp.techcrunch.com

会社では、同期との社内プロジェクトで前からslackは使っていて、
スレッド機能リリース後に何度か利用する機会があったので、今日はそのことに関して書こうかと。

現状の活用方法

以下が僕たちが利用している主なチャンネルです。

f:id:null368:20170204232018p:plain

1個か2個死んでるチャンネルはあるけど、基本的には、こんな感じ。
その中で、スレッドを作成して会話するのが多かったのは、#generalと#github_logです。

generalはみなさんご存知の通り、どこのチャンネルにポストすべきかわからない時に使われるので、話題ごとに自然とスレッドが発生していきます。 例えば、「〇〇のやり方知ってる人いる?」的な質問があった時には、その回答やディスカッションは以降スレッド内で行われます。

もう一つの#github_logは、Githubでの様々なアクションがログとして吐き出されてきます。基本的はログ以外はポストしたくないので、ログに対するコメントはそのログからスレッドを作成して、スレッドないで行う感じになっています。

今後の運用方法

特にスレッドに関して運用方法は決めてないですが、基本的には、よくスレッドが立つ話題に関しては、チャンネル化していくという方針(例えば、上記のような質問チャンネルができるとか)になりそうです。とにかく、スレッドがリリースされる前までは、generalで一つの話題で50~100とかディスカッションが続いていたこともあったので、スレッド化すると後からログを参照するのが簡単かなという印象です。

MongoのGUIツールはmongo-express一択だった

mongo

mongoのGUIツールでいいものを探してたんだけど、mongo-expressが導入も楽で使いやすかった。
bootstrapで作られているであろうシンプルなUI。 f:id:null368:20170130230439p:plain

導入方法

※ Nodeが動く環境であることが大前提

  1. インストール
    npm install https://github.com/andzdroid/mongo-express/tarball/master

  2. configファイルを編集する
    node_modules/mongo-expressにconfig.default.jsというファイルがあるので、複製してconfig.jsを作る。
    そして以下のように編集する

  mongo = {
    db:       'mongoDBのDB名',
    host:     'localhost',
    password: 'mongoDBのパスワード、指定してなければ空',
    port:     27017,
    ssl:      false,
    url:      'mongodb://localhost/mongoDBのデータベース名',
    username: 'mongoDBのユーザ名、指定してなれば空',
  };
  1. 起動
    node_modules/mongo-expressでnode appを実行。
    http://localhost:8081でブラウザで確認できる。
    Basic認証でIDとPASSを聞かれるが、「admin」と「pass」と入力すれば突破できる。

    ターミナルにでている、basicAuth credentials are "admin:pass", it is recommended you change this in your config.js!basic認証のIDとPASSが初期設定で危ないから変えましょう、ってこと。

【正規表現】一番最初にマッチした箇所までを抽出する

正規表現

例えば、URLとかで、https://www.amazon.co.jp/sample/xxx/sampleみたいなものがあったとします。

正規表現で、https://www.amazon.co.jp/sampleまでを取りたいんだけど、https.*sampleとすると、最後のsampleまで引っかかっちゃって上手く取れない。

そういう時は、https.*?sampleみたいに、*のあとに?をつけてあげると、最初にマッチした箇所までを抽出してくれます。