yuya4の備忘録

備忘録です。好きにアウトプットします。

2019年3月現在利用しているメモアプリ

最近,論文を読むために iPad Pro + Apple Pencil を導入したのと, そろそろメインの MacBook Pro を買い換えるので, この機会に使っているメモアプリ(って言葉が正しいかはわからない)を見直そうと思っていろいろ調べたのでそのメモを残します。

tl;dr

以下の 3 つのアプリケーションを利用することにしました。 ちなみに今回は 個人での利用 のみを想定しているので,チームでの共有などのプライオリティは高く設定していません。 ()内は使用するデバイスです。

もともとの環境

利用しているアプリケーションもその用途もバラバラでした。笑

今回最終的に利用することにした Evernote(無料版) と Boostnote はもともと利用していたのですが, 個人で利用するメモアプリとしてはその他にも Kobito (2017年12月27日にユーザサポート終了)やNotion (かじっただけですが),iOS 標準のメモアプリをその時の気分で使いわけており,どこに何を記録しているの分からなくなってしまっている状態でした。 また,iPhoneMac の画像の共有のためにはSlack の自分のアカウントへのDM(?)や適当な友人への Line を利用したりもしていました。。。

さすがにごちゃごちゃしていて良くないなというのと,せっかく新しいデバイスが増えるのでこの機にいろいろと見直したという次第です。

メモアプリに求めたこと

私がメモアプリに求めた要件は以下の 4 つです。

  • すべてのデバイス間でシームレスに共有できること。
  • 文章をプレーンな状態で残せること。
    • マークダウンを変換してくれる場合は,プレビュー機能(画面)が別でついてくること。
  • フォルダ分け or タグ付けなどである程度構造化できること。
  • iPad Pro + Apple Pencil を最大限活かせること。笑

こいつらを満たしつつ,できるだけ少ないアプリケーション数で簡潔させたい。

すべてのデバイス間でシームレスに共有できること。

メインで利用する MacBook ProiPad Pro,iPhone の 3 つのデバイスはメモを共有したい。 少なくとも,テキストメモを共有できることは必須だと感じています。

文章をプレーンな状態で残せること。

最近のメモアプリは中途半端にマークダウンに対応してくれるものが多いおかげで, 逆に管理がしにくいと感じていました。 その瞬間の見た目はいいのですが,テキストを他の場所にコピペすると崩れるみたいなことが多発してストレスがすごかった。。。 ですので,テキストは基本的にプレーンな状態で保存できて,かつ,マークダウンを変換する機能がある場合は別の画面でプレビューができるって状態がベストだと思っていました。

フォルダ分け or タグ付けなどである程度構造化できること。

けっこういろんなコンテキストでメモを残すので, ある程度の構造化は必要です。

iPad Pro + Apple Pencil を最大限活かせること。

せっかく買ったのでいい感じにしたい。笑 これはかねてからいいと聞いていた GoodNote を使うと決め手いました。

PDF を取り込んで,直接 PDF にApple Pencil で書きこんだり,PDF の途中にノートを差し込んでメモしたりできます。 フォルダなどでファイルの管理もきちんとできますし,読んだ論文などは今後こいつで管理していくつもりです。

採用したもの

Evernote

まず,「すべてのデバイス間でシームレスに共有できること。」に関しては,課金してプレミアムプランにアップグレードすることで解決されます。次に「文章をプレーンな状態で残せること。」は,設定からオートフォーマットを無効にすれば達成できます。「フォルダ分け or タグ付けなどである程度構造化できること。」に関しては,ノートブックという形でフォルダ分けもできますし,タグもつけられるので検索には向いています。

そして他のアプリと比べて頭一つ抜けたのは,カメラ機能とレコーダ機能です。 カメラ機能では,紙たやホワイトボード上の文書を撮影する際に,いい感じで文書の部分を判定して切り抜いたものをノートとして保存してくれます。 レコーダ機能はさくっと起動させて,録音音声をノートとして保存することができます。

また,Google アドレスでログインできるのと,デスクトップアプリもモバイルアプリも,Web アプリケーションも存在するので,かなり汎用性が高いのも良い点だと思いました。

Boostnote

テキストメモを共有するという目的だけですと Evernote だけでも充分なのですが, コードスニペットをいい感じに残しておいたりしたい。 そういう意味では,Boostnote はかなりベンリなアプリだと思います。シンタックスハイライトがデフォルトでいい感じに設定されているし,ローカルで動いて爆速。 あと,Boostnote はマークダウンプレビューがいい感じにできるのでストレスフリーにマークダウンのメモが残せます。

現在はモバイルアプリがインストールできないので,デスクトップで使うしかできないのですが, コードスニペットの管理だけなら問題ないと感じました。 また,PC 間での共有(というよりもバックアップ)でしたら,Dropbox と連携することで可能ですので, そうすることにしました。

普段 GitHub の Issue 等にそこそこの分量のコメントなりを投下する前には, こいつで下書きしてから書き込んでいます。

というわけで,テキストだけのメモや画像,音声の共有とは別に, コードスニペットの管理という意味で Boostnote を採用することにしました。 コードスニペットを他のメモと一緒に管理するのもイケてないなと思っていましたので。

GoodNote

これはかねてからいいと聞いていた GoodNote を使うと決めていました。

PDF を取り込んで,直接 PDF にApple Pencil で書きこんだり,PDF の途中にノートを差し込んでメモしたりできます。 フォルダなどでファイルの管理もきちんとできますし,読んだ論文などは今後こいつで管理していくつもりです。

採用しなかったもの

Apple 標準メモ

今回いろんなアプリケーションを見ていてかなり優秀なんだと思いました。 Apple のデバイスでしたら「すべてのデバイス間でシームレスに共有できること。」はクリアできますし, 「文章をプレーンな状態で残せること。」も,箇条書き以外は達成できてるはず(箇条書きも設定で無効化できるのかな?)。「フォルダ分け or タグ付けなどである程度構造化できること。」も,フォルダを作成できるのでクリアできています。

ただ,Apple 製品でしか使えないというのは若干汎用性にかけるかなと思ったのと,検索機能が貧弱だなと思いました。 また,前述の採用した Evernote に比べると,もうひと押し使える機能が欲しいなと思ってしまいました。

Notion

最近界隈で盛り上がってきてますね。 私も軽くは使っていたのですが,使いこなせばとてもベンリだと思いました。 私が今回メモアプリに求めている要件も余裕で満たしています。 しかし,いかんせん機能が豊富過ぎて,さくっとメモ用途で使うという意味では使いにくいなと思いました。

拡張性も高く,そのうち本格的に導入できればとも思うのですが,少々導入するのに学習コストもかかりそうですので,今はいったん見送ることにしました。

Inkdrop

こちらも最近盛り上がっていますね! ほとんど Boostnote と遜色ない機能を持っていると思っています。 Inkdrop が Boostnote より際立って優れているのは,モバイルアプリがきちんと実装されていることですかね。

ただ,Boostnote は特定の開発コミュニティで開発が進められている+OSS化されているのに対して,Inkdrop は個人で開発していらっしゃるので若干バグ対応であったり今後の改善スピードが不安ってのと,こちらは有料アプリですので,同じ機能を求めるのなら Boostnote かなと思って今回は利用を見送りました。

モバイルアプリがあるのは魅力的なのですが,今回はコードスニペットの管理に使いたいため基本的に Mac でだけ動けばいいってのと,何故か今はインストールできなくなっちゃっていますが,実は Boostnote のモバイルアプリも存在しているので,強く Inkdrop に変えたいというモチベーションは出てこなかったです。

OneNote

こいつもいろいろできちゃうのですが,Notion と同じく機能が豊富過ぎてさくっと使うには使いづらいかなと思いました。あと,Apple 標準メモ は Apple 製品だけでしか使えないから汎用性がどうとかいいつつも,やっぱり Apple が好きなので宗教じ(ry

まとめ

今回,利用するメモアプリを見直すということで,以下のような要件でサーベイを行いました。

  • すべてのデバイス間でシームレスに共有できること。
  • 文章をプレーンな状態で残せること。
    • マークダウンを変換してくれる場合は,プレビュー機能(画面)が別でついてくること。
  • フォルダ分け or タグ付けなどである程度構造化できること。
  • iPad Pro + Apple Pencil を最大限活かせること。

その結果,以下のアプリケーションを採用することにしました。

文章中でも触れたように,様々な便利なメモアプリが開発され続けているので, 私の中でのベストプラクティスも半年後にはどうなっているのか分かりませんが, とりあえず今使うならこの布陣だなぁと思って挙げさせていただきました。 参考になれば幸いです。

【JavaScript】【jquery】jquery.validate.jsの基本的な使い方

 フォームへの入力チェック(バリデーション)を行ってくれる、jQueryプラグインの【jquery.validate.js】を利用したのでまとめておきます。

今回フォームはこんな感じです。
f:id:yu-ya4:20150702162648p:plain
date_select.html

<html>
<head>
<title>validate</title>
<meta charset="utf-8">
</head>
<body>
  <h2>validate</h2>
  <form class="form-signin">
    <table class="usertable">
        <tr>
            <th>名前</th>
            <td><input name="myname" type="text" value="" /></td>
        </tr>
        <tr>
            <th>電話番号</th>
            <td><input name="num" type="text" value="" /></td>
        </tr>
        <tr>
            <th>メアド</th>
            <td><input name="address"type="text" value="" /></td>
        </tr>
        <tr>
            <th>性別</th>
            <td>
                <input name="gender" type="radio" value="男性" /> 男姓  
                <input name="gender" type="radio" value="女性" /> 女姓
            </td>
        </tr>
    </table>
    <button id="button" class="btn btn-large btn-primary" type="submit">登録</button>
  </form>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/val.js"></script>
</body>
</html>


jquery.validate.jsはこちらのリンクからダウンロードしてください。
jQuery Validation Plugin | Form validation with jQuery

ダウンロードしたzipファイルを解凍したら、jquery.validate.min.jsを自分のjsファイルにつっこんで準備完了です。(jquery.jsも一緒に設定してください)

jquery.validate.jsでは、inputのname属性ごとにエラーメッセージ、エラーチェックのルールを定義できます。また、デフォで用意されているルール以外にも自分で独自のバリデートルールを定義することも可能です。

とりあえずJavaScriptのコードはこんな感じになりました。

val.js

(function(){
  //標準エラーメッセージの変更
  $.extend($.validator.messages, {
    email: '*正しいメールアドレスの形式で入力して下さい',
    required: '*入力必須です',

    phone: "*正しい電話番号の形式で入力してください"
  });

 //追加ルールの定義
  var methods = {
    phone: function(value, element){
      return this.optional(element) || /^\d{11}$|^\d{3}-\d{4}-\d{4}$/.test(value);
    }
  };

  //メソッドの追加
  $.each(methods, function(key) {
    $.validator.addMethod(key, this);
  });

  //入力項目の検証ルール定義
  var rules = {
    myname: {required: true},
    num: "phone",
    address: {required: true, email: true},
    gender:  {required: true}
  };

  //入力項目ごとのエラーメッセージ定義
  var messages = {
    myname: {
      required: "*名前を入力してください"
    },
    address: {
      required: "*メアドを入力してください"
    },
    gender: {
      required: "*性別を選択してください"
    }
  };

  $(function(){
    $('#testform').validate({
      rules: rules,
      messages: messages,

      //エラーメッセージ出力箇所調整
      errorPlacement: function(error, element){
        if (element.is(':radio')) {
          error.appendTo(element.parent());
        }else {
          error.insertAfter(element);
        }
      }
    });
  });

})();


1ブロックずつ解説していきますね。



まず1ブロック目では、標準で定義されているエラーメッセージを変更してあげています。もちろん変更なしでもvalidate自体は問題なく機能します。

 //標準エラーメッセージの変更
  $.extend($.validator.messages, {
    email: '*正しいメールアドレスの形式で入力して下さい',
    required: '*入力必須です',

    phone: "*正しい電話番号の形式で入力してください"
  });

バリデートルール : "表示させたいエラーメッセージ"
って感じで好きにつけてあげてください。


続いて2ブロック目では追加ルールを定義しています。

var methods = {
    phone: function(value, element){
      return this.optional(element) || /^\d{11}$|^\d{3}-\d{4}-\d{4}$/.test(value);
    }
  };

今回は'phone'というルールを新たに定義してあげました。正規表現で表してやればよいみたいです。この'phone'は11桁の数字または000-0000-000のように3桁-4桁-3桁とハイフンで数字が繋げられているものならエラーを出さないというルールです。

そして3ブロック目のaddMethod()で定義した追加ルールを登録しています。

4ブロック目と5ブロック目ではそれぞれ、適応する検証ルールとエラーメッセージをinputのname属性ごとに設定しています。

//入力項目の検証ルール定義
  var rules = {
    myname: {required: true},
    num: "phone",
    address: {required: true, email: true},
    gender:  {required: true}
  };

  //入力項目ごとのエラーメッセージ定義
  var messages = {
    myname: {
      required: "*名前を入力してください"
    },
    address: {
      required: "*メアドを入力してください"
    },
    gender: {
      required: "*性別を選択してください"
    }[f:id:matsumura-kobetsu:20150611175118p:plain]
  };

ルール定義では基本的に、name : {rule: true} という感じでokです。
たとえば myname: {required: true} は、name="myname"であるinputに対してrequired(入力必須)ルールの適用を行う、という具合です。
"phone"というのは先ほど定義した検証ルールですね。
エラーメッセージ定義では、name : {rule: "エラーメッセージ"} という感じです。


これで設定が終わりましたので、最後にフォームに対して(idで指定しています)先ほど設定してあげたrulesとmessagesを適用してバリデートを実行しています。

$(function(){
    $('#testform').validate({
      rules: rules,
      messages: messages
    });
  });

実際にバリデイトを行うとこんな感じで怒ってくれます。すみません。

f:id:yu-ya4:20150702162644p:plain

何が素晴らしいって、入力するたびにエラーチェックを行ってくれるのと、submitしようとした際もエラーチェックを行ってくれるところですね。便利。

ちなみにerrorPlacementってのは、エラーメッセージを表示する箇所を設定してあげてます。

以上で簡単なjquery.validate.jsの使い方は終了です。
もうちょい書きたいことがあったりなかったりするのでまた続編を書くかもしれません。書かないかもしれません。

この記事がどなたかのお役に立てれば幸せです。

【JavaScript】【jquery】セレクトボックスでのうるう年計算

簡単な入力フォームを作ってJavaScriptの勉強をしているのですが、
生年月日を入力する際にいい感じでうるう年も考慮してくれるものがなかったので
いろいろなサイトやらを参考にしながら作りました。

フォームはこんな感じです。
f:id:yu-ya4:20150702162652p:plain
date_select.html

<html>
<head>
<title>日付選択</title>
<meta charset="utf-8">
</head>
<body>
<form class="form">
    <select id="year">
        <option value="">--西暦--</option>
    </select>
    <select id="month">
        <option value="">-月-</option>
    </select>
    <select id="day">
        <option value="">-日-</option>
    </select>
</form>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/date_select.js"></script>
</body>
</html>

javascriptはこんな感じです。
date_select.js

(function(){
  //日付範囲決定
  function calcDays(){
    $('#day').empty();
    var y = $('#year').val();
    var m = $('#month'). val();

    if (m == "" || y == "") { //年か月が選択されていない時は31日まで表示
      var last = 31;
    } else if (m == 2 && ((y % 400 == 0) || ((y % 4 == 0) && (y % 100 != 0)))) {
      var last = 29; //うるう年判定
    } else {
      var last = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31)[m-1];
    }

    $('#day').append('<option value="">日</option>');
    for (var i = 1; i <= last; i++) {
      if (d == i) { //日がすでに選択されている場合はその値が選択された状態で表示
        $('#day').append('<option value="' + i + '" selected>' + i + '</option>');
      } else {
        $('#day').append('<option value="' + i + '">' + i + '</option>');
      }
    }
  }

  var d = 0;
  $(function(){
    //1900年~2015年まで表示
    for (var i = 2015; i >= 1900; i--) {
      $('#year').append('<option value="' + i + '">' + i + '</option>');
    }
    //1月~12月まで表示
    for (var i = 1; i <= 12; i++) {
      $('#month').append('<option value="' + i + '">' + i + '</option>');
    }
    //1日~31日まで表示
    for (var i = 1; i <= 31; i++) {
      $('#day').append('<option value="' + i + '">' + i + '</option>');
    }

    $('#day').change(function(){
      d = $(this).val();
    });
    //年か月が変わるごとに日数を計算
    $('#year').change(calcDays);
    $('#month').change(calcDays);
  });
})();

まあ、単純にうるう年の計算方法をそのまま実装しただけですね。

  1. 西暦年が4で割り切れる
  2. ただし、西暦年が100では割り切れてはいけない
  3. ただし、西暦年が400で割り切れるのはok

西暦年か月が選びなおされる都度日付を計算するようにしています。
また、日付がすでに選択されていた場合はその値を保持しておき、
年や月を選び直して再度日付計算が行われても日付を選びなおさないでいいように実装しています。

こんな簡単なことなのにとても時間がかかってしまいました・・・。
jquery使ったのも初めてですので多めに見てやってください。

次回はvalidateについて書こうかな...

記事中へのソースコードの埋め込み

さて、ブログを始めてみたわけですがどうやって記事中にソースコードを埋め込むのかなーって思って調べてみたのでまとめてみました。

と言っても簡単で、ソースコードを'>||'と'||<'という記号で挟めばいいだけのようでした。

ただ、一つ注意点ですが、これははてな記法というらしく、

f:id:yu-ya4:20150702160715p:plain

こんな風に設定の編集モードをはてな記法モードに変更してやる必要があります。

例えば、記号で挟まなかったら

#include

int main(void){

printf("hello, world!");

return 0;

}

という風に表されるところ、'>||'と'||<'で挟んでやれば...

#include <stdio.h>

int main(void){

    printf("hello, world!"); 

    return 0;

}

こんな風に、入力コードをいい感じに表してくれます。枠で囲んでくれるのいいですね。

また、記号で挟む際に、'>|lang_type|' '||<' のlang_typeにプログラミング言語の種類を入れてやると、
(この例では lang_type = c)

#include <stdio.h>

int main(void){

    printf("hello, world!"); 

    return 0;

}

こんな風に色分けして表示してくれるようです。

他にもいろんな言語に対応しているようで、詳しくは以下のリンクから対応しているファイルタイプをご確認下さい。

ソースコードを色付けして記述する(シンタックス・ハイライト) - はてなダイアリーのヘルプ

とりあえずこんな感じでかっこよくコードを貼付ける方法は分かりましたので、これからは貼付けるだけのコードを書けるように精進して参ります。

他にもはてな記法には便利なものがたくさんあるようですので少しずつ使えるようになればいいなと思います。

以上、初投稿でした。