(Boostnote)簡単コピペだけで使えるすごいエンジニアノート

Boostnoteのアイキャッチ

今、現在プログラミングを勉強してます。

覚えてたり、メモしたりするのは大変。

何か効率よく勉強するに、何かいいツールはないかと探してました。

そこで会ったのが、『Boostnote』です。

[Boostnote]エンジニアノート

「Boostnote」は様々なプログラミング言語に対応している、エンジニア向けのノート。

その対応言語は、100種類、180カ国の言語にも対応してるマルチに使えるノートです。

まだ、完全に使い切れていませんが、この便利性には驚かされました。

このツールついて紹介していこうと思います。

インストール方法について

Boostnoteの公式ホームページ ]

まずはじめに公式ホームページから、お使いの環境に合うものを選びダウンロードしてください。

ダウンロードして、インストールを実行するだけで簡単に使用できます。

初期設定について

初期設定については、言語設定・テーマの設定についてふれたいと思います。

まずインストールしたBoostnoteを立ち上げてください。

言語設定(英語→日本語)

初めてインストールすると英語表記になっているのを言語の日本語にします。

言語の設定は「◦◦◦」のようなマークを選択。

次に「interface」→「Language」→「Japanese」で日本語に設定できます。

日本語設定したとしても100%日本語にはならないようです。

インタフェーステーマの設定

こちらは、Boostnoteの枠・メニューバーの色を変えることができます。

「インターフェーステーマ」から6種類を選択できます。

自分好みの設定にすることができます。

私が設定した色は「Monokai」で使ってます。

エディタ、コードブロックのテーマ設定

こちらの設定は後に説明する、マークダウン、スニペットのテーマ色の設定ができます。

エディタは、実際に文字を入力できる場所の色の設定。

コードブロックは、マークダウンのプレビューの表示色を設定。

コードブロックのテーマ色は、
あらかじめエディタで確認すると設定の手間は少しなくなります。

お好みの設定が完了したら、右上にある保存をクリックして設定を反映します。

Boostnoteの使い方(初めの方向け)

データの保存は、すべてオートセーブでやってくれます。

マークダウンとスニペットの使い分けは、私はこのようにしてます。

マークダウンはメモやノートとして活用
スニペットは、制作したプログラムのパーツ部品やメモするのに活用

次は、マークダウンで使用できる、編集コマンドを紹介します。

マークダウンの使い方について

下に書いてあるコードをそのままコピーして、マークダウンのエディアにペーストしてください。

貼り付けると、プレビュー画面で表示が確認できます。

———– ここから ———–


# 大見出し
## 中見出し
### 小見出し
標準
**強調**
~~打ち消し~~
<details><summary>内容の見出し</summary>
-機能-<br>
 ・brは改行<br>
 ・brを記載しないと改行されない<br>
 ・サンプルだと
 ・こうなります。
</details>
* リスト1
* リスト2
* リスト3
リンク
[Boostnote](https://boostnote.io)  
チェックボックス
- [x] タスク1
- [ ] タスク2
> 引用
> 引用引用
* * *
***
*****
- - -
---

画像の埋め込み

![画像タイトル](https://boostnote.io/assets/img/logo.png)

ソースコードの表示

※下にある「■」はコピペした後に削除して下さい。

うまく消せない場合は` (backtick)を3つになるよう、書き直してみてください。

`■`■` js
function set_posts_per_page_mobile( $query ) {
  if ( is_mobile() && $query->is_main_query() ) {
      $query->set( 'posts_per_page', get_posts_per_page_mobile() );
  }
}
add_action( 'pre_get_posts', 'set_posts_per_page_mobile' )
`■`■`

上側の` (backtick)「js」はソースの拡張子を指定することで色を反映してくれます。

そうするとプログラムが、補完され色が適応されます。

下記の2行目にあるマークがないとテーブルになりません。
| 果物            | 値段    |
|:-----------|------------:|
| お茶         | 120円    |
| 弁当         | 398円    |

———– ここまで ———–

上記のようにエディタで書き足すことで、プレビューの表示を調整できます。

またソースコードを色付きで、見やすくするには、

ソースコードの初めと終わりに「`」 (backtick)3つで挟みます。(例えば「“`css」になるように)

「“`css」のように、ソースコードの拡張子を指定すると、コードを判別して見やすく色付けをしてくれます。

Boostnoteの活用方法

マークダウン

探してみたところ活用についての記事がなかったので、個人的な活用方法を紹介します。

調べ物をしていて、欲しい情報をホームページで見つけたとします。

そこで必要なところを範囲選択してコピーして、Bootsnoteにそのまま貼り付けるだけ。

(Mac:command + Sift + v で貼り付け)

YouTubeのような動画を切り取ることはできません

これでホームページの情報を抜き取り、そのままノートのように手元に置くことができます。

あとは不要な情報や広告があれば添削して、自分が見やすいように紹介したコマンドを使ってオリジナルのノートとして仕上げるって感じです。

ソースコードは、勉強しているコードの拡張子の「“`CSS」のすぐ横にコメントを書き込むことで色付けされ見やすくできます

あとは、Boostnoteが用意しる文字編集が適応されなくなるので、要所で使い分けてあげてください。

スニペット

プログラムの拡張子をファイル名で指定してあげると、それに合うように自動で補完されます。

設定を変更したい場合には、エディタの下からメニューを選び設定できます。

まだ、上手く使いこなせてません。

色々と便利な使い方が見つかればシェアしたいと思います。

まとめ

まだBootsnoteは使い始めたばかりですが、覚えないで情報を集めてあとで確認できるようにすればいいかって感じで活用しています。

そうすることで覚えることに対すストレスがなくなり楽になりました。

わからないものは、どんどんコピペして蓄積してってます。

あとは、今後の勉強にうまく活用して捗らせたいと思います。

コメント

タイトルとURLをコピーしました