ローカルで動作するメモ管理アプリ Obsidian

普段からメモやなんやらは全部Evernoteに放り込んでいてすごく便利に使っている。昨年末くらいにあった大幅なアップデートの後には、一部欲しい機能が未実装なところもあるけど、もろもろの使い勝手もだいぶ上がったし非常に便利。Web版も使いがってが良くなっていい感じ。

なのだけど、最近どうしてもオンラインに上げるのがはばかられるメモというのも増えてきた。ひと昔前はEvernoteにもオフラインノートブック的なものがあったけど、ちょっと最近は使えそうにない(主にWeb版のEvernoteを使う機会が多いので)。

で、しょうがないのでオフラインでメモやらなんやらを管理できるツールを探していたところで見つけたのが、このObsidian。概要は以下ののリンク先なんかを見てもらえればと思うのだけど、ぶっちゃければMarkdownファイルを管理表示する専用のファイラー的なもの。適当なディレクトリにMarkdownを放り込むと階層表示やらエディタやらプレビューやら見出しによるアウトライン表示なんかが付いてくる。

jmatsuzaki.com
qiita.com
pouhon.net
pouhon.net

このシンプルさがすごく手軽で便利。所詮は階層フォルダにMarkdownファイルが置いてあるだけ。ただのテキストファイルなので最悪いつも使っているテキストエディタやVSCodeで触れたり、検索や置換もただのテキストと同じ感じでコマンドラインからできてしまう。自分としても、大昔はChangelogメモ、Obsidianと同じようにフォルダ+Markdownを使った簡易Wikiみたいなものを使ってたりもしたので、全く違和感がない。

あれ?Obsidianを使わなくてもVSCodeで十分代用可能なくらいしか使ってないな。なんかあったらそれでもいいか。

普通に使えばローカルに閉じた使い方だけど、多分ファイルの保存場所をDropboxやGoogleDriveなんかにするともっと便利かもしれない。今回の自分の例だとそぐわないのでやってないから知らんけど。

あと、どうもObsidian的にはキーワードやリンクをうまいこと張り巡らせるとグラフ化してくれたりともっと便利になるようだけど、まだそこまでは使ってない。この辺の機能はEvernoteでも欲しいかもな。

エディタをAtomからVisual Studio Codeへ変えた

 日常使いするエディタといえばOeditなのは変わらないのだけど、プログラミングしたり、色々なファイルをタブで開いたりするとなるともう少しサポートがほしい。ので、そういう事が必要なときはAtomを使っていた。

 特になにがあったわけじゃないんだけど、ちょうどエディタを探していた突起に目についたし、Githubが作ってるってのもネームバリュー的によかったし、プラグイン周りも充実していたので随分いい感じだったのだけど、「遅い」ってところが最大の不満。

 こればっかりは正直使っているマシンのスペックが低いってのもあるので、一概にAtomのせいにはできないのだけど、実害があるんだからしょうがない。で、しばらく色々と放浪していたんだけど、今の所、Visual Studio Codeに落ち着いたという話。

 使い始める前まではあまり期待していなかったのだけど、使ってみれば何より軽い。俺の貧弱マシンでもそれなりに動いてくれるのが素晴らしい。使い勝手にしてみてもモダンなエディタなので特にどうということもなく使える。

で、今のところの設定やインストールしていたりする拡張メモ

 個人的には、あまりゴテゴテにカスタマイズするのは、自分がその環境に最適化されてしまうのであまり好きではない。なので最低限。もちろん、いろいろいじっていけば快適にはなるんだろうけどね。

拡張機能

 ぶっちゃけインストールしているのはこんなもん。メインで使っているのはPHP関係なので、それ系のものを入れてもいいかなぁっとは思ってるけど、まぁ良いやって感じ。

設定等

 細かい設定は色々あるんだけど、真っ先にやったのはポータブル化。普通に使ってるとOSのユーザディレクトリ配下に保存される設定ファイルなんかを別の場所に保存できるようにする。自分の場合はVS Codeを置いているディレクトリ配下に置いて置いて、バックアップやらなんやらを簡単にできるようにするためやっている。

 設定については今のところ以下のような感じ。そんなにいじってはなくて、フォントと色味、ターミナルをCygwinにするとかそのあたりかな。最低限、PHPの実行ファイルへのパスとか関連付けくらいはいじってる。

 

Atomエディタでインストールしているプラグイン

最近、Atomエディタを使い始めて、ぼちぼちプラグインをインストールし始めたのでまとめておく。

atom-beautify
: フォーマッターのWrapper。本体は別途インストール。PHPの場合はこちら

autoclose-html
: HTMLのタグを補完する

docblockr
: プログラム中のコメントを補完する

file-icons
: tree viewにファイル形式に応じたアイコンを表示

highlight-selected
: エディタ中で選択した文字列をエディタ全体で反転させる

japanese-menu
: 日本語化
: 2015/11/16, v1.2.0から同等の機能が本体に組み込まれたため不要

japanese-wrap
: 日本語の折り返しをよろしくする

line-ending-converter
: 改行コードを変換する。
: 2015/08/29, v1.0.8から同等の機能が本体に組み込まれたため不要

markdown-table-formatter
: Markdown中のテーブルを整形する

pretty-json
: JSONを整形する

show-ideographic-space
: 全角空白を表示する

symboles-tree-view
: プログラム中の関数、変数の一覧を表示する

Atomエディタでatom-beautifyを使ってPHPのソースコードを整形する(追記あり)

使っているPCが凄まじく貧弱なのが悪いのだけど、今まで使ってきたEclipseの遅さに耐え切れなくなってきた。しかたがないので幾つかのIDEを触ってみたのだけど、ぶっちゃけAtomエディタでいいんじゃないかという結論に陥ってしばらく前から使ってみている。

いくつかのサイトを見ながらPackageや設定をごちゃごちゃしているのだけど、その中でもPHPのソースコードの自動フォーマットの話。はじめのうちちゃんと動かなかったのが動くようになったので一先ず覚書として書き残しておく。

はじめに準備すること

なにはなくともAtomエディタをインストールする必要があるのでやっておく。日本語化など必要な設定があれば良しなに。PHPも動作するように忘れずに。Windows環境の場合、インストーラーがあるのでそちらからインストールしておく。詳しくはマニュアルを参照のこと。

ちなみにPHPは環境変数でPathを通しておくこと。Windowsの場合、コマンドプロンプトから以下のコマンドで動けば良い。

$ php -v

PHP-CS-Fixer をダウンロードする

後ほどインストールする atom-beautify は PHP-CS-Fixerというライブラリを使ってPHPのソースコード整形を行なう。そのために予めダウンロードしておく。

GitHubのページではいくつかのインストール方法が書いてあるが、面倒臭ければ直接php-cs-fixer.pharをダウンロードしてしまう。ダウンロードしたファイルはどこか適当な場所に展開しておく。自分は面倒だったのでDropboxの配下に放り込んだ。確認までに以下のコマンドを実行して結果が返ってくることを確認しておく。

$ php /path/to/php-cs-fixer.phar

atom-beautifyをインストールする

Atomエディタの設定から install を選択、atom-beautify をインストールする。ここら辺は特に何事も無く。

php-cs-fixerの設定をおこなう

atom-beautify をインストールした後、Atomエディタの設定画面からpackagesを選択、atom-beautify の Settings を選択する。えらい長い設定画面が開くので、以下の項目を設定していく。

設定項目が上下に分かれているので要確認。

設定名 説明 設定値
Language Config – PHP – Beautify On Save 保存時に自動で整形するか? お好きに
Language Config – PHP – Default Beautifier どの整形ツールを使うか? PHP-CS-Fixer
Language Config – PHP – Disable Beautifier Languager 整形を有効にするか? チェックを外す
PHP – PHP-CS-Fixer Path php-cs-fixer.pharのパス /path/to/php-cs-fixer.phar
PHP – Fixers php-cs-fixerのオプション お好きに
PHP – Level どの整形基準を使うか お好きに

実行してみる

これまででatom-beautifyの設定が終わったので実際にPHPのプログラムを整形してみる。まずは適当なPHPファイルを開いて、右クリックから「beautify editor contents」を選択するとコードが整形されるはず。実行の際には一瞬GitCatのシルエットがポップアップされる。

ちなみに設定がおかしいとポップアップは出るのになにも変化がないという不思議な状況になるので注意。その際は、右クリックから「Debug Atom Beautify」から実行することでデバッグ出力がクリップボードに貼り付けられるので、そっから追いかけていく。

デフォルトのショートカットとしては「ctrl-alt-b」が割り振られているので適宜振り直すなり、なれるなりしておく。

php-cs-fixerの設定値

PHPの整形ルールなどは php-cs-fixer の設定に従う。Fixerに設定可能な値などについては、GitHubのReadmeを参照のこと。個人的には「align_double_arrow,short_echo_tag」を指定している。

また、Levelについては以下の様な値が準備されているので、用途にあったものを指定しておく。

  • psr0
  • psr1
  • psr2
  • ymfony

なんか上手く動かない 追記:2016-05-28

上記を設定してatom-beautifyを起動しても上手く動かない。なんとなく動いたようなエフェクトがあるんだけどコードが整形されない。という現象にぶち当たった。よくわからないのでDebug Atom Beautify を使ってログを見てみたところ、以下の様なエラーを吐いている様子。

Fixersを指定した時はこんなの

[Symfony\Component\Console\Exception\RuntimeException]
The “–fixers” option does not exist.

Levelを指定した時はこんなの

[Symfony\Component\Console\Exception\RuntimeException]
The “–level” option does not exist.

要するに設定画面で、FixersやLevelを指定するとphp-cs-fixerがコケてしまうらしい。なんぞ?試しにコマンドラインから実行してみても確かにそういうエラーが出てくる。Readme通りにやってもエラー出るしなぁ。

とりあえずは、FixersとLevelの指定を空にしてやると動くのでそのようにしておく。

なんか上手く動かない 追記:2016-05-28

あと、プログラムにsyntax errorがあるとうまく動かない。動かない時はその辺りも確認のこと。