?

Markdownでタスク管理が出来るウェブサービスを作った

きっかけ

  • Markdownでタスク管理が出来るウェブサービスを作りました
  • GitHubでissueやPRのタスクを管理するときに使っている人もいると思います
- [ ] タスク全消し
  • と書くとf:id:ichir9n1:20170201004817p:plainこのようにチェックボックスになります
  • スペース含めて5個の記号だけでチェックボックスが出来るので大変便利です
  • これを日常的にタスク管理に使いたいと思ったのがきっかけです
  • GitHub上でも似たようなことが出来ますが、いちいちGitHubのissueを建てるのがめんどくさいウェブサービスでやりたいという思いです。(多分既存サービスはない?一応調査しました)

2017/2/1 追記

- [ ] A
 - [ ] B
  - [ ] C
  • のようにAの作業のサブタスクとしてBがあってそのBのサブタスクとしてCがある。みたいな状況を再現したかったのです。

使い方

  • 使い方についてはできるだけ直感的に行えるようにしたつもりです
  • 主な使い方はメインタスクを追加してそれにサブタスクを紐付けていき、完了したらチェックを付けると言う形になります。

  • まず↑に貼っているリンク先に飛ぶと f:id:ichir9n1:20170201005243p:plain

  • こういう画面が出ます。最初サンプルデータが入っています。
  • 飛んだ状態はPreviewモードです。モードはMarkdownモードと2つあります。切り替えは上部にある[Preview]、[Markdown]を押します

Previewモード

  • Previewモードはボタンとキーボード入力で進捗バー付きでタスク管理が行えるモードです。
  • [Add Parent Task]を押すとメインタスクを追加出来ます。 f:id:ichir9n1:20170201010020p:plain
  • すると下にカードが追加され、このような画面になったと思います(入力フォームの中のテストは手動で入力しました)
  • 入力フォームの横に3つのボタンがあります。
  • 左から、サブタスク追加ボタン、コメント追加ボタン、タスク削除ボタンです。
  • サブタスク追加ボタンはメインタスクにサブタスクを追加することが出来ます。下に入力フォームが増えます。
  • 追加したサブタスクに対してサブタスク追加ボタンを押すとサブタスクのサブタスクを追加することが出来ます
  • f:id:ichir9n1:20170201010421p:plain
  • コメント追加ボタンはメインタスクにコメントを追加することが出来ます。下にテキストエリアが増えます。
  • コメントはテキストエリアの右についている×ボタンで削除することが出来ます。隠しているわけではなくて完全に削除します。
  • f:id:ichir9n1:20170201010536p:plain
  • タスク削除ボタンはメインタスクを削除します。この時、紐付いていたサブタスクやコメントも消えます。
  • メインタスクであれば、3つのボタンの隣に進捗バーがあると思います(サブタスクがあるサブタスクにも出現)
  • チェックを付けると進捗バーが変化します。f:id:ichir9n1:20170201010719p:plain
  • 直近のサブタスクの状況を見ているので、サブのサブにチェックを付けた場合(上の画像の場合)はサブの進捗バーのみ変化します。なので、メインタスクの進捗バーは変化していません。

Markdown

  • MarkdownモードはMarkdownを記述してPreviewモードに反映させることを目的として設けています。
  • f:id:ichir9n1:20170201011151p:plain
  • サンプルデータの状態でMarkdownモードにするとこんな感じです。
  • メインタスクがありサブタスクが1つ右に下がっていて、サブタスクのサブタスクが2つ右に下がっています。
  • コメントはついているタスクの下についています。
- [ ] Main
 - [ ] Sub
  - [ ] Sub Sub
  • この形式でMarkdownを書いてPreviewモードに切り替えるとMarkdownに合わせてPreviewモード画面を再構築します。
  • あとはMarkdownモードは現状では機能がないです。タブはスペース2です
  • 今のシステムでは、タスク状態を保存することが出来ないので、Markdownの文字をファイルに保存すると良いと思います。

全体

  • 今後、ほしいと思った機能は実装していくつもりですが、何か致命的なバグなどありましたら、このブログかGitHubリポジトリまで報告して頂けると幸いです。

https://github.com/ichiren1/markdown-task-manager

開発についてだらだらと

  • 思いついたのを実装してみて、使い心地を確かめたかったので凝ったことはしていません。
  • 今後、使ってみてイケそうだなと思ったら(便利だと思ったら)React.jsで書き直したいと思います。今はゴリゴリのJS(一応ES)です。
  • サーバーはbottleで建てて、テンプレートエンジンはMakoCSSコンポーネントはbulma、Markdownエディタの部分はAceを使いました。

https://bottlepy.org/docs/dev/

http://www.makotemplates.org/

http://bulma.io/

Ace - The High Performance Code Editor for the Web

  • bottleはルーティングのみ
  • Makoは殆ど使っていない
  • bulmaはめっちゃ使いました
  • Ace最高! CodeMirrorはちょっとうまく行かなかったです

Preview画面について

  • ESでクラスが使えるということでTaskクラスを作り、Taskクラスの子要素としてTaskクラスを付けていくという形で実装しました。
  • Taskクラスに完了しているかの状態も持たせて、Taskクラスベースで描画を行っています。
  • サブのサブの個数もメインタスクの進捗バーに入れても良かったのですが(実装的には問題ない)、サブのサブが1つ終わったこととサブが1つ終わったことが同価値だと思えなかったのでこういう実装にしました。
  • 進捗バーの挙動はかなりデバッグしたので多分矛盾がない動きになっていると思います。
  • メインタスクしかない時にチェックをしても完了になる
  • 子要素が全て完了したときに親要素を完了にする
  • 既に完了していたタスクにサブタスクが増えたときにメインタスクの完了が外れる
  • 完了していないサブタスクが削除され、それにともなってメインタスクの全てのサブタスクが完了になっているときにメインタスクを完了にする

Markdown画面について

  • Ace最高!なんでも出来る

HTML ⇔ Markdownについて

  • Marked.js https://github.com/chjj/marked というMarkdownをHTMLに変換してくれるものがありました。
  • しかし、これで変換するとネストした部分は同階層になってしまいます
- [ ] A
 - [ ] B
  - [ ] C

と書くと得られるHTMLは

<ul>
 <li>A</li>
 <li>B</li>
 <li>C</li>
</ul>
  • になってしまうのでネストしたデータが失われてしまいます。なので、正規表現です。
  • 正規表現でネストを保ったままTaskクラスを生成し、Previewモードで描画するという流れです。
  • 逆(Preview->Markdown)はTaskクラスがあるのでそれを基にHTMLを生成します。

終わりに

  • さくっと実装しようと思いましたが、4日はかかりました。
  • まだまだデザイン的にも機能的にも不十分ではあると思っているので開発を続けたいと思います。
  • それでも最低限使える段階には鳴っていると思うので使ってみていただければと思います。
  • GitHubリポジトリもあるので機能的な要望などありましたらご意見いただけると幸いです。実装するかは話が別だとして

2017/07/31 追記 - Atomの拡張で以下のようなものがありました。 atom.io

スマートウォッチを買って変わったこと

  • この記事はFUN Advent Calendar 2016の4日目の記事です。

www.adventar.org

  • 昨日は主催でもあるおれおくんでした

oreo.hateblo.jp

  • FUN Advent Calendarについては昨年度のこちらの記事が良いです

  • 今年買ったデバイスの紹介をしようと思って思い出してみたらスマートウォッチみたいなものを買ったので使用感やらを書き連ねて、後続の人の敷居を下げるのが本記事

  • 比較のために先に持ってたスマートウォッチを紹介します

持ってたスマートウォッチ

  • Pebble f:id:ichir9n1:20161204020528j:plain

Pebbleについて

  • Kickstarterから生まれたスマートウォッチ

良さ

  • iOSAndroidのどっちでも使える
  • Moto 360やApple Watchと違って電子ペーパーを使っているので電池の持ちがいい(1週間ぐらい)
  • iPhoneに来た通知をPebbleでも受け取れる(Slackとか, Googleマップとか)
  • 当時1万6000円とスマートウォッチで比較すると格安
  • WatchFaces(時計のテーマ), Appを8つまで時計に保存でき、切り替えることができる
  • 防滴
  • WatchFacesを自分で開発出来る(C言語、JSでも出来るけど確か機能が制限される)

悪さ

  • WatchFacesを切り替えまくると時間が分からないぐらいノイズが乗る(致命的)
  • ちょっとでかくて四角なのでおもちゃ感がある
  • ゴムバンドがゴミバンド(夏蒸れる)
  • 机の上においてるときに通知が来るとうるさい

総合

  • 上記の点からかなり満足をしていたのですが、ある程度使っているとノイズが入ってどうしようもなくなる
  • 日本のコミュニティがあるのでそこもちょくちょく覗いていたが解決せず...
  • 放置されていた

今年買ったスマートウォッチ

  • Pebble Time Round f:id:ichir9n1:20161204172650j:plain

Pebble Time Roundについて

  • 強い丸いPebble

良さ

  • Pebbleの良さはそのまま
  • 革バンドになった
  • Pebbleより小さくなった
  • ノイズが出ない
  • カラー

悪さ

  • WatchFacesが切り替えられなくなった(OSっぽいものが変わったからしょうがない)
  • カラーになったけど充電の持ちが2日ぐらいになった
  • 充電するところが手首と接しているところにあって机で充電しにくい(端子が外れる)

総合

  • めっちゃ良くなった

比較

f:id:ichir9n1:20161204172646j:plain

  • 写真ではわかりづらいですが、大きさがかなりコンパクトになりました

  • Time Roundは500円玉4枚くらいの薄さです f:id:ichir9n1:20161204172657j:plain

  • Pebbleは6枚ぐらいでした f:id:ichir9n1:20161204172653j:plain

スマートウォッチを買って変わったこと

  • 通知内容を手元で確認するのでスマホを見なくなった(スマホの充電がなくなりにくくなった)
  • 前はスマホを開いて内容を確認する際についゲームを開いたりまとめサイトを見ていたがそれがなくなった
  • 電車で音楽を聞いているときに曲を変えるとか音量を変えるときにいちいち取り出さなくてもよくなった
  • 通知でバイブレーションが来るたびに時計を見るので時間を気にしている人みたいになった

まとめ

  • Pebble Time Roundを買いました
  • Pebbleで不満に思っていたことのいくつかが解決していたので満足度高いです
  • スマホを見る機会が減りました

備考

  • Pebble 2誰か買った人いたら感想聞かせてください
  • Pebble 2は今見たら$130でした

  • 以上ですありがとうございました

  • 明日は@t0oo0fuさんです お楽しみに

p5.jsのすゝめ

おしながき

  • あらまし(省略可能)
  • p5.jsとは
  • p5.jsを触る
  • p5.jsで作ったものを公開する

  • この記事では、p5.jsについて知ってもらい、最終的にはGithub Pagesで公開しだれでも見れるようにするまでを目指します

  • この記事のターゲットとしては本学の学部1,2年生とします

あらまし

  • おれおくんから誘われて何か記事を書くことになりました。
  • テーマについて考えた結果、以前講義で某教授が話していた「本学生はデモ力が低い」ということについて考えました。
  • この記事では、デモ力が高いとは自分の研究を視覚的に分かりやすく伝える力として考えます。
  • デモ力を上げるための講義として私はJavascriptとhtmlを学習しましたが、1,2年生の忙しい時期にプログラミング言語をいくつも学習することは難しいと思います。
  • そこでProcessingの知識を使いウェブで動くものを作って公開することで1,2年のうちから視覚的な表現に慣れようというのが本記事の目的です。拙い文章ですが見ていただければ幸いです。

p5.jsとは

  • 基本的にブラウザで見れる何かサービスをつくるときはHTMLやJavascirptを記述します。
  • でもp5.jsを使えばProcessingのコードを書くだけでHTMLやJavascriptは""あまり""書かなくても簡単に描画や音声を扱う事ができますf:id:ichir9n1:20151208123747p:plain

  • 公式サイト

  • ドットインストール

p5.jsを触る

  • 公式サイトのDownloadを押してください f:id:ichir9n1:20151208121338p:plain
  • すると、いろいろなボタンがあると思います
  • Complete Libraryはアドオンやサンプルが入っているやつです
  • Single Filesはp5.jsを使うなら最低限これらのどれか1個あればいいです
  • EditorはProcessingのように再生ボタンを押すと出力画面が出るエディタです、あってもいいし、なくてもいいです。MacWindowsどちらもあります
  • 今回はp5.jsをメインで使うのでp5.jsをダウンロードして進めますf:id:ichir9n1:20151208122011p:plain
  • 今回はHTML記述とp5.jsを使ったJavascriptの記述を分けるために主に書き換えていく部分はファイルを分けていきます
  • デスクトップでもドキュメントでのいいのでフォルダを新しく作成し、p5_test.html(ファイル名はなんでも良い)とscript.jsというファイルを作成しそこにダウンロードしたp5.jsをコピーします f:id:ichir9n1:20151208123747p:plain
  • p5_test.htmlにメモ帳やエディタで開いて以下を記述します
<html>
<head>
  <script src="./p5.js" type="text/javascript"></script>
</head>
<body>
  <script src="./script.js" type="text/javascript"></script>
</body>
</html>
  • タグの中でダウンロードしてきたp5.jsを読み込みます
  • タグの中で今から主に書き換えて行く部分を読み込みます

  • あとはp5_test.htmlは保存して閉じてもらっても問題ないです

  • script.jsにコードを書いていきます
function setup() {
  createCanvas(200,200);
}

function draw() {
  rect(0, 0, 100, 100);
}
  • Processingとちょっと違うところはvoid setup()ではなくfucntion setup()になっているところです
  • createCanvasで画面の大きさを指定します Processingではsize(200,200);に相当します
  • rectはProcessingと一緒です rect(x, y, width, height);です
  • あとはscript.jsを保存してブラウザにドラッグアンドドロップとかすると確認できます
  • 要素の検証をしてみるとタグで書かれており、canvasタグを学習する必要なくcanvasを扱えていることがわかります(個人的にcanvasタグで楕円を書くのはtranslateしたりscaleしなきゃいけないのでellipseだけでかけるのはいいです) f:id:ichir9n1:20151208124922p:plain
  • あとは微妙に書き方がProcessingと違う部分があるのでドキュメントを確認するといいです
  • リファレンス
  • もちろん純粋なJavascriptと一緒に書くこともできます
  • 変数宣言はvar hoge;です。

作ったものをウェブに公開する

デモ

  • サンプル作りました 2のべき乗が現れたら色が変わる時計です
  • 2のべき乗時計