ラベル Markdownエディタ の投稿を表示しています。 すべての投稿を表示
ラベル Markdownエディタ の投稿を表示しています。 すべての投稿を表示

2021年6月25日金曜日

Typora(Markdownエディタ)の紹介② ~画像の保存先を変更する~

 

こんにちは。ひっくです。

前回はMarkdownエディタのTyporaについて、紹介記事を書きました。

 

Typora関連記事

→第1回 はこちら Typora(Markdownエディタ)の紹介①

→第3回 はこちら Typora(Markdownエディタ)の紹介③ ~数式を編集する~

→第4回 はこちら Typora(Markdownエディタ)の紹介④ ~シーケンス図を作成する~

→第5回 はこちら Typora(Markdownエディタ)の紹介⑤ ~フロー図を作成する~

→第6回 はこちら TyporaVer1.x リリースに伴い有料化(でもベータ版はまだまだ無料利用可能)

→第7回 はこちら Typora(Markdownエディタ)の紹介⑥ ~クラス図を作成する~

 

今回は「Typora」で画像の保存先を変更する方法を紹介します。

何故画像の保存先を変更する?


Typoraを使用して手順書等を作成する際、画面のキャプチャ画像等をそのまま

添付することが多くあります。

 

デフォルトの設定ではデフォルトの特定パス下に格納されますが、後々作成したMarkdownファイルを

更新する用途に備えて管理する際、Markdownファイルに添付した画像も一緒に管理したくなります。

その際、画像の保管場所を設定しておくと、管理がしやすくなります。

 

保管先を変えてみよう


というわけで、画像の保存先を変更してみましょう。

 

画像の保存先は、「ファイル」→「設定」→「画像」選択で変更が可能です。

デフォルトは以下の通りになっているはず。

以下の通り変更し、右上の「×」を押下してください。

  • 「画像を ./${filename}.assets」に保存する」を選択
  • 「上記のルールをローカルの画像に適用」にチェック
  • 「上記のルールをオンラインの画像に適用」にチェック
  • 「可能であれば相対パスを使う」にチェック

 

上記のようにすることで、Markdownファイルと同じ階層に『Markdownファイルと同じ名称+.assets』ディレクトリが作成され、その中に画像ファイルが全て格納されるようになります。

  • Markdownファイル格納先ディレクトリ
  • 画像格納先ディレクトリ

 

※ちなみに画像ファイルを添付した直後のTyporaの表示は以下のようになってます。

 () 内に画像の保存先パスが表示されているのが分かります。

 

デフォルトの保存先は?


何も設定を変更しない場合、画像はどこに保存されるかですが、以下に保存されるようです。(version 0.9.96(beta)で確認)

C:\Users\(ユーザー名)\AppData\Roaming\Typora\typora-user-images

 

  • テスト用に作成した画像ファイルを添付した直後のTyporaの表示(ユーザー名のみ塗りつぶし済)

 

画像の保存先を任意に変更したい場合は?


先程、画像の保存先を変更した際、「Markdownファイルと同じ階層に『Markdownファイルと同じ名称+.assets』ディレクトリが作成され、その中に画像ファイルが全て格納され」ていました。

保存先として「./${filename}.assets」を選択したからなのですが、任意のディレクトリに変更も可能です。

 

以下の通り変更し、右上の「×」を押下してください。

  • 「指定したフォルダに画像をコピー」を選択
  • 「保存先フォルダ」を編集(絶対パス or 相対パスいずれでも可)

 

上記では「../Images/${filename}」として相対パスを設定しました。

編集中のMarkdownファイルの一つ上の階層に「Images」ディレクトリが作成され、

その下にファイル名のディレクトリができて、画像ファイルが格納されることになります。

 

以下の通り、ちゃんと格納されていますね。

 

まとめ


画像の保存先を変更する方法について、今回は紹介しました。

画像についてはアップロードも行う設定があったりします。

この辺りも組み合わせて使うと、より画像の管理がしやすくなるかもしれません。

今回はこのへんで。ではまた!

2021年4月11日日曜日

Typora(Markdownエディタ)の紹介①

こんばんは。ひっくです。

今回は「Typora」というMarkdownエディタを紹介したいと思います。


 

Typora関連記事

→第2回 はこちら Typora(Markdownエディタ)の紹介② ~画像の保存先を変更する~

→第3回 はこちら Typora(Markdownエディタ)の紹介③ ~数式を編集する~

→第4回 はこちら Typora(Markdownエディタ)の紹介④ ~シーケンス図を作成する~

→第5回 はこちら Typora(Markdownエディタ)の紹介⑤ ~フロー図を作成する~

→第6回 はこちら TyporaVer1.x リリースに伴い有料化(でもベータ版はまだまだ無料利用可能)

→第7回 はこちら Typora(Markdownエディタ)の紹介⑥ ~クラス図を作成する~

 

導入の経緯


昨年頃から社内で情報共有をする目的で、調査した結果を簡単にまとめられる

エディタを探していました。

(画像・コードを添付できたり、数式も記載可能※なエディタを求めていました。)

※機械学習に関して調べた内容をまとめるのに、数式を記載する必要があったため。

 

上記要件を満たせそうなエディタとして、Typoraを見つけた次第です。

 

まずはTyporaを導入


公式ページはこちらから。

Typora公式

 

使用している環境に応じてインストーラをダウンロードし、インストールすることで使用可能となります。

URL先で下にスクロールすると、上部に「Download」が表示されます。

Windows、Mac、Linuxのそれぞれに対応しています。

 

Typoraでよく使うショートカット(Windows)


インストールが終了したら、実際に使ってみましょう。

私がTyporaを使用し始めてから、日頃よく使うショートカットの一部を以下に紹介しておきます。

  • 見出しの作成(h1~h6)

    Ctrl + + /

    + 押下毎にh6→h5→h4 と変化していきます。 押下毎は逆にh4→h5→h6となります。


    (表示サンプル)

  • テーブル/表の作成

    Ctrl + T

    押下で次のようなダイアログが表示されます。列、行数を決めてOKを押したら表が作成されます。


    (表示サンプル)

    Ctrl + T

    押下で次のようなダイアログが表示されます。列、行数を決めてOKを押したら表が作成されます。

    表が作成されたら、クリックすることで編集モードとなり、上部のメニューから簡単に

    表のリサイズや文字列の表示位置を変更できます。(以下はMore Actions 選択時)

  • 小見出し

    + 半角Space または Ctrl + Shift + ]

    階層に応じて、小見出しの表示が変わります。

    Tab 押下で自由に階層を変更でき、表示も都度変わります。


    (表示サンプル)

  • 区切り線

    (3回連続入力)

    表示範囲を区切りたい場合に使用します。


    (表示サンプル)


  • 順序付きリスト

    Ctrl + Shift + [

    項目を順番立てで表示したい場合に使用します。


    (表示サンプル)

    1. 手順1
    2. 手順2
    3. 手順3
  • 引用

    Ctrl + Shift + Q


    (表示サンプル)

  • ハイパーリンク

    Ctrl + K

    [] と () のペアが作成されるので、[]内にリンク名称を、()内にリンク先URLを記載します。


    (表示サンプル)

    Typora公式

  • コードブロック

    Ctrl + Shift + K

    コードブロックが作成されたら、右下に「言語を選択」と出るので、言語を入力します。

    後はブロック内にコードを記載するだけです。


    (表示サンプル)

メリット/デメリット


まだ他にも使える機能が存在しますが、長くなりそうなので次回に回そうと思います。

以下にはメリット、デメリットを挙げてみました。

  • メリット

    1. 見やすい資料を時間をかけることなく作成可能になる。

      (過去には手順書等をテキストエディタのみで作成していたこともありましたが、

      図や表、画像、段落分け等見やすさが失われていました。

      最近では作業をしながら手順書を同時にまとめていく、といった使用をしています。)

    2. エクスポートの形式が豊富

      PDF、HTMLの他、Word、OpenOfficeなどにも対応している。

      (Markdownで手順書を作成 → PDFで展開 をよく利用しています。)

    3. 画像管理がしやすい

      ファイル内で使用する画像について、そのファイルに関連する画像のみを

      ドキュメントと同じ階層に配置することが(設定により)可能となる

      (この方法は次回紹介しようと思います。)

    4. ブログも作成できる

      Typoraで編集後、以下手順で「blogger」のエディタに貼り付けて

      今回のブログは作成しました。(画像については別途アップロードしています)

      1. 編集内容を全選択
      2. メニューから、「編集」 → 「HTMLとしてコピー」 の順に選択
      3. 「blogger」のエディタに貼り付け
  • デメリット

    1. (無料でないと絶対にダメという方にとっては)有料化のリスクあり

      現在はβ版ということで、無料で使用できるようですが、今後有料になる可能性も

      あるとのこと。

      ~2021/12/18追記~

      2021/11/23の正式版(ver1.x系)リリースに伴い、現在は有料となりました。

      ただし現時点でベータ版は引き続き無料利用可能なようです。

      →参考記事(第6回) はこちら TyporaVer1.x リリースに伴い有料化(でもベータ版はまだまだ無料利用可能)

    2. タグ管理はできない

      ファイル単位での保存となるので、メモを大量に作成する用途では向いていないことも。

      ファイル管理をするためにGitHubを使用する等が必要となる。

Markdownエディタを利用したことがない人は、1回使ってみることをオススメします。

(なお、社内ではVisual Studio Code でMarkdownファイルを編集されている方もいます。

今回はTyporaに絞って紹介しましたが、Visual Studio Codeの方も使い勝手は良さそうです。)

興味のある方は両方使ってみてはどうでしょうか。

 

今回はこのへんで。ではまた!