2017-01-02

続きやすかった習慣　と　続きにくかった習慣　を考えてみた

今年はあれやろう、これをものにしようなどと毎年、あるいは毎日欲張ってます。でも、実際にやってみたもの、続いているものというとごくわずか。

せっかく一度は欲張るのだから、もうちょっとものにしたい。

そこで、自分にとって続きやすかったものと続きにくかったものについて、理由を自分なりに探ってみました。

■続きやすかったもの

日時が残る自分専用todo管理

僕はasana ( https://app.asana.com/ )というのを使っています。

１日に２−３個終わるくらいの粒度に分けて登録しています。自分用にしている理由は、僕がフリーランスであることと、参加するプロジェクト全体のtodoだと自分の感覚よりもでかすぎるためです。

最終的には、カレンダー表記を活用して、青色申告をするときの交通費や経費の用途確認に使っています。（まとめてやるので忘れてるため）

作業時間計測

Toggl ( Toggl - Free Time Tracking Software )を使っています。

項目を記入してスタート・ストップを自分で測るのですが、上記のasanaと連携することで項目はasanaで入れたものを取得することができます。さらにasanaの画面内にスタート・ストップボタンが出るようになるので、asanaの画面だけで完結。

プロジェクトに対する自分のコスト計算確認に使っています。

ウォーキング

自宅作業が多いので運動不足になりがちです。そこでせめて歩くくらいはやろうと思って毎日１時間程度歩いています。

猫に毎朝起こされて、起き抜けにそのまま歩いてきます。帰ってきてから朝食をとっています。

Webサービスで勉強

今やってるのはDuolingoというサービスです。

Duolingo: Learn Spanish, French and other languages for free

多くの人が想うであろう「英語が身についたらいいよなー」と思っていたところ、たまたまeラーニングの調べ物をしてた時に知って、試しにやってみたら続いてます。

毎日決まった時刻に「すごいね、XX日連続記録更新中」というメールが来るのを合図にやってます。１回あたり１０分くらい。

使う予定の技術系の勉強

近々やるプロジェクトで使うつもりのものを、電子書籍で教科書的なのを買ってやっています。

日にちが迫って来るため、焦ってます。

図書館で借りて読書

図書館で借りて来て読んでます。月１−２冊くらいか。

返却期限が借りた日から２週間後なので、間近になると布団に潜って一生懸命読みます。

日記

僕はこちらを使って、毎日日記をつけてます。

Day One

Bloom Built Inc
ライフスタイル
¥4,800

フリーランスで自宅作業をしてるからできる技だとは思いますが、毎朝仕事を始める前に「昨日を振り返って４行日記をつける」というのを続けています。

最初の頃は仕事を終わる時に書いていたのですが、猫が遊び来たり、作業が終わらなかったりすると書くタイミングを失ってしまうため、マシンを起動して最初にすることにしました。

■続かなかったもの

日時が残らない自分専用todo管理

asanaを使う前も、やらなきゃいけないことを小分けにしてtodoアプリで管理してました。確かに漏れはなくなるのですが、僕は「あの頃何やったんだっけ？」というのを振り返りたくて、todoとは別にカレンダーアプリに実稼働した内容を記録してました。

こうなると完全に二度手間です。そのためどっちも滞りがちになってしまいました。

みんなで使うtodo管理

要注意：これは一般論ではなく、あくまでも自分と周囲の環境による理由です。

プロジェクトに参加してchatworkやBrabio!、あるいはasanaでtodoを共有したりすることがあるのですが、todoの粒度がバラバラ、複数人に対してざっくりとしたtodoが割り当てられる、スケジュールや内容が更新されない、これらを介してメッセージを飛ばしても誰も見てないなどの理由のため、自分はあまり続きませんでした。

使ってみたい技術系の勉強

今のところ仕事で使う予定はないけど興味があるものや、これを身につけて仕事で活用してやろうなどというものを、紙の本や電子書籍で買ってやっていました。

夜に仕事が片付いてからやっていましたが、猫に遊びに誘われたり仕事が長引いたり眠くなったりして間が空きがちに。

時間が取れる時にやろうとするも、前回までの内容を忘れてしまって、それを思い出してるうちに時間が過ぎるというのが繰り返されて、だんだん遠のいてしまいました。

買った本で読書

手元に置いておきたかったり、図書館にはなかったりするのは、電子書籍や紙の本で買っています。電子書籍の場合、場所を取らないのが便利なのですが、普段目につかないので存在を忘れがち。紙の本は本棚にしまって前にものを置きがち。

何より、図書館の本が届いたりすると、返却期限がないこちらを後回しにしてしまって、いつの間にかそれっきりです。

ポモドーロテクニック

集中力がないのは、そもそもそんなに長い時間集中できないからだった！という福音を受けて飛びつきました。自分が集中しているかを意識して作業ができるし、実際効率も良かったように思うのですが、togglでタイマー、こっちでもタイマーになって管理が煩雑になり、だんだん使わなくなりました。

（それでも時々、思い出したようにやります）

ストレッチ・筋トレ

これも運動不足解消のため、お昼になったら昼ごはんを食べる前に軽く１５分ほどストレッチをしたり、スクワットをしたりといったことをしてました。

これは長く続いていたのですが、昼ごはん前ではない時間帯に動かしたら、やるのを忘れてそのうちしなくなりました。

■気づき

こうしてみると、自分のパターンがいくつか見えてきました。

１：譲れない期限や目的があるとやる

これはある意味義務の履行なので当たり前か。これを趣味やステップアップ的なことに適用するのは、他なかなか大変そうです。

目的があればそりゃやります。でもやってみたいこと・身につけてみたい憧れを習慣にしたいので、もうちょっとなんか解決策が欲しい・・・。

２：紙か電子書籍かは関係ない

よく紙の本と電子書籍との比較が語られますが、僕に関しては媒体の違いは継続にあんまり関係ないように感じました。

３：手間がかかるものはやらなくなる

同じようなことをしていても、一手間増えるごとに離脱率が高まっていきます。究極は「何もしないのにし終わってる」。まるでパッショーネのボス：ディアボロの仕業のように、経過を飛ばして結果だけ残ってるのが理想だと思います。

４：邪魔が入りやすいとやめがち

生活に関わる他の行動と重なる可能性があると、どうしてもそっちを優先しちゃいます。寝落ちや仕事もそれですね。

■続けるための作戦

１：手間を減らす

「一手間増えると命取り」の気持ちで、手を抜く方法をとる。自動化できることは自動化する。

やってたことを思い出すのに時間がかからないよう、やってたことを自分なりのメモにして残すというのも、手間を減らす作戦かもしれません。

２：邪魔者を排除する

猫のことではありません。

自分の生活・行動パターンを思い浮かべて、それとバッティングしないタイミングに設定する。寝食などすべてに勝るのは、シヴィライゼーションくらいなものです。

また、１回にかける時間を短くすることも、邪魔を減らすことにつながります。

「結局やる気がないから続かないんでしょ？」などと言われがちな僕ですが、自分なりに作戦を立ててみました。

行くぞ2017！！

やる気ボタン

出版社/メーカー: タカラトミーアーツ
発売日: 2014/08/21
メディア: おもちゃ＆ホビー
この商品を含むブログを見る

2016-12-31

FuelPHPでPHPUnitのユニットテストをやる時、test環境を使ってる件

FuelPHPは、development、test、staging、productionという４つの環境ごとにconfigファイルを分けることができます。実際にどれを使うか？は、public直下の.htaccessの初っぱなあたりに書かれている

SetEnv FUEL_ENV production

を動かしたい環境にあった内容に書き換えればOKです。あるいはbootstrap.phpの書き換えでも可能。

また、oilを使ってコマンドを実行する場合は、

FUEL_ENV=test oil refine migrate

などのように、FUEL_ENVで指定して好きな環境で実行させることもできます。

そしてPHPUnit。

なんだかんだtests以下にテストしたいことを書いて、これまたoilから次のように実行できます。

oil test --group=App

通常は特に問題ないんだと思うのですが、ちょっと困ったことが起きました。

はじめてのフレームワークとしてのFuelPHP 改訂版

作者: 鈴木憲治
出版社/メーカー: ラトルズ
発売日: 2014/10/25
メディア: 単行本（ソフトカバー）
この商品を含むブログ (2件) を見る

こちらを参考に進めていたところ、「管理ページの作成」の「ファンクショナルテストの追加」で、テストが通らない。。

現象としてはこんなことになってました。

・自分としてはdevelopmentの環境で実行してるつもり

・ファンクショナルテストで入力画面などを通して書き込まれるDBはdevelopment

・PHPUnitの中でDB::insertなどをするDBはtest

明示的に指定しないとダメなのか？と思い、PHPUnitをoilで実行する際に

FUEL_ENV=development oil test --group=Functional

のように指定しましたが、状況は変わりません。

PHPUnitがなぜFUEL_ENVを無視するのか？と思って調べてみると、PHPUnitは

/fuel/core/phpunit.xml

の中の

<server name="FUEL_ENV" value="test"/>

を参照しているようです。

そこで、このファイル自体を/fuel/app以下へコピーして、

<server name="FUEL_ENV" value="development"/>

のように書き換えると、PHPUnitもdevelopment環境を参照するようになりました。

ファンクショナルテストを一緒にやっていて、そっちは.htaccessの設定に従ってDBに値を書き込んでいました。.htaccessはコメントアウトしたままだったので、デフォルトのdevelopmentが選択され、DBもそちらへ。

今回は同時にPHPUnitで直接データを書き込んでおり、同じDBに書き込まれていることを前提としたチェック方法になっていたことが原因かな？と思います。

もっとも、僕が本書中にあるこれらの記述を見落としていた可能性があるのと、そもそも「テストするのがtest環境」だと思うのであんまりやらないことかもしれませんが・・・。

FuelPHPでPHPUnitを動かす時にどこを参照して決めてるのか気がつきにくかったので、備忘録がてら。

2016-10-20

個人的「Markdownってこうやって使えばよかったのか」発見伝

Markdownというのは、簡単な書き方をすることで手軽に見出しとか箇条書きといったフォーマットの文書がつくれるというものです。（ざっくりと）

ブログやWebサービスと連携するエディタなどがあったので、Markdownといえば「ブログの更新とかするときに楽になる」というイメージでした。あるいは、プラグインなどのフォルダにmarkdownで記述したファイルが入っていることも多いので、「HTMLほどではなく、気軽に整形できる書き方」くらいに思ってました。

そのイメージを変えたのは、QuiverというMarkdownエディタを使ってからでした。

そもそもは数式をメモしたいなーと思って探していたところ、LaTexという、これまた簡単な記号を使って数式を記述するっていう使えるエディタとして、このQuiverの存在を知りまして。

Quiver: The Programmer's Notebook

HappenApps, Inc.
仕事効率化
¥1,200

他のMarkdownエディタとちょっと違っていたのは、「Markdownに対応したタグのCSSを自分で設定できる」というところでした。

その他のだと「GitHub風」などの既存のCSSから選ぶよーというのが多い印象なのですが、Quiverの場合はまんまCSSが書けます。 f:id:g2_girichan:20161020203147p:plain

　 f:id:g2_girichan:20161020203230p:plain

試しに、Markdownで出てくる「見出し <h>」や「強調 <strong>」などをいじる前といじった後がこちら。

いじる前

f:id:g2_girichan:20161020203909p:plain

いじった後

f:id:g2_girichan:20161020213729p:plain

見た目に統一感がなかったり、見出しの目立ち具合がそれでいいのか？などは目を瞑っていただいたとしても、見栄えは結構違うのはわかるのではないでしょうか。

普段記述するのは「## 見出し２」のようなものなのに、描画されるときには縁取りとかされてるなんて！CSSで指定しているから当たり前なのだけど、エディタでそれが行われると、ちょっと新鮮。

ちなみにhoverも使えるので、画面上にマウス重ねることで動かしたり色変えたりすることも可能です。

Quiverのサイトではテーマは公開されてたりするものの、CSSは公開されてない模様。残念。

Themes · HappenApps/Quiver Wiki · GitHub

こういうMarkdown向けのCSSセットみたいなのが、じゃんじゃん公開されるといいなぁ。。。

ということで手始めに、いろいろなCSSデザインサイトを参考に作った自分のCSSを公開してみます。

参考にさせていただいたサイト：

シンプルなHTMLとCSSコピペで実装できるタイトル（見出し）のデザインサンプル 50 | NxWorld

CSSで作るリストデザイン | Web’Notes

画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10 | NxWorld

CSSでテキストリンクをおしゃれなデザインにしてみよう

[CSS]コピペでOK！画像のホバー時用のかっこいい新しいエフェクトのまとめ | コリス

Quiverの場合。Preferences　→　Stylesで、CSSを選んでペーストすることで適用できます。元に戻す場合は、同じ画面で「Reset」を押します。

PreviewとExported HTML、PDF and Printなどが別々に分かれてますのでご注意を。印刷してみたら素のCSSだったということが起こります。

/**

* Text Cell
*/

.text-cell {
font-size: 14px;
}

/**
* Code Cell
*/

.code-cell {
font-size: 12px;
}

/**
* Markdown Cell
*/

.markdown-cell {
font-size: 14px;
}

/**
* LaTeX Cell
*/

.latex-cell {
font-size: 14px;
}

h1 {
position: relative;
padding: 1em 0;
}
h1::before,
h1::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 6px;
box-sizing: border-box;
}
h1::before {
top: 0;
border-top: 2px solid #4682B4;
border-bottom: 1px solid #4682B4;
}
h1::after {
bottom: 0;
border-top: 1px solid #4682B4;
border-bottom: 2px solid #4682B4;
}

h2 {
position: relative;
padding: .75em 1em .75em 1.5em;
border: 1px solid #4682B4;
}
h2::after {
position: absolute;
top: .5em;
left: .5em;
content: '';
width: 6px;
height: -webkit-calc(100% - 1em);
height: calc(100% - 1em);
background-color: #4682B4;
border-radius: 4px;
}

h3 {
padding: .5em .75em;
background-color: #F0F8FF;
border-left: 6px solid #4682B4;
}

h4 {
padding: .5em .75em;
background-color: #F0F8FF;
border-radius: 6px;
}

h5 {
padding: .5em .75em;
border-bottom-style: dotted;
border-bottom-color: #4682B4;
border-bottom-width:thin;
}

table thead th {
background: #4682B4;
font-weight: bold;
vertical-align: top;
color: #fff;
}

hr {
background-color: #fff;
border-top: 1px dashed #4682B4;
}

strong {
background: linear-gradient(transparent 60%, #4682B4 100%);
}

ul>li{
padding:0px;
margin:0px;
}

ul>li{
list-style-type:none !important;
list-style-image:none !important;
margin: 5px 0px 5px 0px !important;
}

ul>li{
position:relative;
padding-left:20px;
}

ul>li:before{
content:'';
display:block;
position:absolute;
box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
top:3px;
left:2px;
height:0;
width:0;
border-top: 6px solid transparent;
border-right: 7px solid transparent;
border-bottom: 6px solid transparent;
border-left: 9px solid #4682B4;
}

a {
position: relative;
color: #4682B4;
}

a:before {
content: "→ ";
}

ol {
counter-reset:li; /* Initiate a counter */
padding:0; /* Remove the default left padding */
list-style:none; /* Disable the normal item numbering */
}
ol li {
position:relative; /* Create a positioning context */
margin:0 0 8px 4em; /* Give each list item a left margin to make room for the numbers */
padding:2px 8px;

}
ol li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:-2px;
left:-2em;
width:2em;
padding:3px 0;
color:#fff;
background:#4682B4;
font-weight:bold;
text-align:center;
border-radius: 20px;
}

img {
height: 50%;
width: 50%;

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

img:hover {
width: 100%;
height: 100%;
}

CSSに詳しくないため、おかしな記述があるかもですのでそこはご注意ください。

メモするのが楽しくなる、いろんなCSSがたくさん出てきますように！

2016-10-10

クリップボードに入れたURLを元にMarkdown形式のリンク文字列を作りたい！

最近ようやく便利さに気がついたMarkdown（とLaTex）。それもこれもQuiverというアプリのおかげ。

Quiver: The Programmer's Notebook

HappenApps, Inc.
仕事効率化
¥1,200

Markdownのどこが便利に感じたのかは改めていつかひょっとすると語るとして、いろいろ使ってるとリンクをメモるのが結構面倒くさいなーと思いました。

というのも、Markdownとしての記述はこう。

[リンクテキスト](URL "タイトル")

これを自分でメモの時に作ろうと思ったら、こんなことに。

　１：ブラウザのURLをコピーして貼り付け

　２：そのページのタイトルっぽいところをコピーして貼り付け

　３：その間にMarkdownのタグも書く

今時のチャットツール系だとURLを貼り付けると自動的にそのページの情報も表示してくれるので、それに慣れ親しんだ体には面倒くささが・・・。

ということで、URLをコピーするだけでそのページのタイトルを取ってきてMarkdown形式にしてくれるものを作ってみました。

やりたいこと

URLを選択して、右クリック的なもので処理を選択。

Markdown形式になったものが貼り付けられる。

やりかけたこと

いつもお世話になってるClipMenu。

ClipMenu.com: クリップボード管理ソフト - ClipMenu.com

これはJavaScriptで処理を実行させることができます。これを使ってMarkdownのいろいろなのをやっていたので、これでできると嬉しいなぁ・・。

しかし、JavaScriptから任意のサイトへアクセスすることができないので、断念。

実際にやったこと

URLを選択した状態でMacOSのコンテキストメニューの「サービス」から処理を呼び出し、クリップボードにMarkdown形式になった文字列を入れるようにしました。

手順

処理をPHPで書く

取得そのものは、こちらを参考にさせていただきました。

URLからwebページのタイトルを取得する - Qiita

PHPのmb_convert_encodingを使って文字コードを検出する方法 |

そして、実際に書いたのはこんな感じ。

<?php
$to_encoding = 'UTF-8'; // 取得した文字は、最終的にUTF-8で扱う

$url = $argv[1]; // クリップボードの中身
$html = file_get_contents_curl($url); // 該当ページを取得
preg_match('/<title>(.+?)<\/title>/s',$html,$matches); // titleタグの間を取り出す
$title = trim($matches[1]); // 改行や空白に対応
$title = mb_convert_encoding($title, $to_encoding, check_charcode($title)); // 文字コードをUTF-8に変更

// http;が付いていないとリンクとして認識されないので、付与する
if(!preg_match('/^http.+/', $url, $maches)){
$url = 'http://'.$url;
}

echo '[' . $title . '](' . $url . ' "' . $title.'")'; // これをシェルスクリプトで受け取る

// 指定のURLからページ内容を取得
function file_get_contents_curl($url){
$ch = curl_init();
curl_setopt($ch, CURLOPT_HEADER, 0);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
$data = curl_exec($ch);
curl_close($ch);
return $data;
}

// 文字コードを判別
function check_charcode($str){
foreach(array('UTF-8','SJIS','EUC-JP','ASCII','JIS') as $charcode){
if(mb_convert_encoding($str, $charcode, $charcode) == $str){
return $charcode;
}
}

return null;
}