AIMEK's blog

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

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

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

ブログUPまでの手順

これまで紹介したTyporaの記事を含め、ここ最近のブログ記事はTyporaを使用して作成しています。

手順としては以下の様な感じになります。

「Typora(Markdownエディタ)の紹介②　～画像の保存先を変更する～」に従い、

画像の保存設定を変更する。(Typoraを最初に使う1回だけすればOK)
記事を書く(普段はここから)
記事で使用した画像をUpload
記事をHTML形式でコピー＆ブログサービスへ貼り付け
記事の画像挿入先とUploadした画像URLを紐づけ
(おまけ) 表紙画像を選定

画像の保存先設定を変更

Typora(Markdownエディタ)の紹介②　～画像の保存先を変更する～「保管先を変えてみよう」を参考に

設定を変更し、Typoraに貼付した画像が一つのフォルダに格納されるようにしておきます。

(「記事で使用した画像をUpload」する際に、記事ごとに画像がまとまっている方が楽なため)

記事を書く

好きなテーマで記事を書きます。

記事の先頭に以下の様にCSS定義を記載しておくと、CSSを使うことも可能になります。

CSS定義の例

使用時(Typoraの表示上はCSS適用なしで「－」表示となりますが、CSSが有効になるとこう表示されます → －)

記事で使用した画像をUpload

記事のMarkdownファイルと同じ階層にあるディレクトリ内に、記事で使用した画像が含まれています。

全て画像を選択する前に、不要な画像が含まれていないか確認してください。

(ver1.1以前では画像を貼付後、Typora上で削除してもソースとなる画像は削除されずに残るため。

Ver1.2以上のTyporaは、メニューから画像の削除でソースとなる画像も削除されるようです。)

以下では右から2番目・3番目の画像が不要なので削除します。

画像のUpload方法はそれぞれ使用されるブログサービスで確認してください。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

(参考)以下はBloggerで画像をUploadする方法です。

「画像を挿入」をクリック

「パソコンからアップロード」を選択
ファイルを選択 → 画像を全選択 → 開く
選択クリック

レイアウト選択 → OK
Upload完了後

※これが記事の画像挿入先と画像を紐づける元ネタとなります。

記事をHTML形式でコピー＆ブログサービスへ貼り付け

記事を全選択 → 編集 → HTMLとしてコピーを選択
ブログサービスのエディタに貼り付け

記事の画像挿入先とUploadした画像URLを紐づけ

Typoraで画像を貼付した箇所は、HTML形式にすると以下の様に表示されています。

<p><img src="Typoraで作成した記事をブログにUPするまで.assets/image-20220328210335179.png" referrerpolicy="no-referrer" alt="image-20220328210335179"></p>

この部分をUploadした画像URLに置き換えます。置き換え方は次の通り。

まず以下のタグを用意します。「画像URL」が置換場所になります。

<div class="separator" style="clear: both;"><a href="画像URL" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="1152" data-original-width="2048" src="画像URL" width="600"></a></div>

続いてUpload後のURL情報を、見やすい形に整形します。

エディタ(下記はサクラエディタ)に貼り付けて全て置換を選択すると

こうなります。
最初のimgタグに画像のファイル名が記載されているので、対応するファイル名を取得します。

「image-20220328210335179.png」で検索したら、以下URLが対応するものと分かりました。

「画像URL」をURL情報で置き換えたのが以下になります。

「width="600"」が画像幅になるので、必要に応じて調整しましょう。

<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMMJq02vnRr7eMUSS2JLMvsjVuQyMIcrLyIA1NS7_l_kqgSL_4C-8j5mfR5kR-mCP3M3bTzVzkSGLDhhbR2KAVcq9oJy5GKY2Nl6lEjleuwHSgPZLXI5eJvdudPBnUTEeTtn-rBezOVjDc-TIe50D7dLfzu6XAw6lR-VCoqrjd0LfslZl09bSO3eE3KQ/s1600/image-20220328210335179.png" style="display: block; padding: 1em 0px; text-align: center;"><img alt="" border="0" data-original-height="1152" data-original-width="2048" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMMJq02vnRr7eMUSS2JLMvsjVuQyMIcrLyIA1NS7_l_kqgSL_4C-8j5mfR5kR-mCP3M3bTzVzkSGLDhhbR2KAVcq9oJy5GKY2Nl6lEjleuwHSgPZLXI5eJvdudPBnUTEeTtn-rBezOVjDc-TIe50D7dLfzu6XAw6lR-VCoqrjd0LfslZl09bSO3eE3KQ/s1600/image-20220328210335179.png" width="600"></a></div>

置き換え前

置き換え後

(おまけ)表紙画像を選定

ブログの先頭に表紙画像をつけておくと、目を引くことができるかと思います。

(記事と関連のある画像だとなお良し)

商用利用可・著作権フリーの画像を入手できる画像サイトから、ダウンロードして先頭に貼り付けておきましょう。

私は普段、次の画像サイトを良く利用しています。

・写真AC

・O-DAN(オーダン)

まとめ

Typoraで作成した記事をブログにUPする方法について、今回は紹介しました。

ブログを書き始めた頃、Bloggerのエディタと格闘していましたが、正直使い勝手が悪く

1記事書くのに結構時間がかかっていました。

Typoraに限らず、Markdownエディタなら記事を書くのに集中できるかと思います。

普段Markdownエディタを使ってブログを書かれている方には参考にならないかと思いますが、

これからブログを書き始めよう、もっと楽にブログを書きたいと思っている方は

是非参考にしてみてください。

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

2021年12月17日金曜日

TyporaVer1.x リリースに伴い有料化(でもベータ版はまだまだ無料利用可能)

おはようございます。ひっくです。

これまで紹介してきたMarkdownエディタのTyporaですが、

先日(2021/11/23)　正式版(ver1.x系)がリリースされました。

Typoraの更新が表示されたのでいつも通りUpdateを選択したらversionが上がっていて、

とうとうこの日が来たかと思われた方も多いのではないでしょうか。

今回はTypora正式版リリースに際し、①正式版の利用方法、②引き続きβ版を利用する方法を紹介します。

Typora関連記事

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

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

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

Typora ver1.x系リリースで何が変わるか

正式版のリリースに伴い、ver1.x系は有料化されることとなります。

また、最終β版から多少の機能改善が含まれているようです。

詳細については、ver1.0の内容に詳しく載っていますので、こちらを参照してください。

β版の頃からver1.x のリリースで有料化されることはアナウンスがあったため、気になるのはそのお値段。

1ライセンス税抜き$14.99、日本円だと1937(約2000)円でした。

現時点ではライセンスに有効期限はなく、1回買い切りとなります。

ただしメジャーバージョンUp(ver1.x系 → ver2.x系へのVersionUp)の場合、

追加料金がかかる可能性は否定されていません。

このお値段を高いと思うかは人それぞれかと思いますが、個人的にはありだなと思うレベルでした。

(とはいえ当分は購入予定なしです。理由は後述します。)

なお、1ライセンスあたり3デバイスまでの適用が可能で、試用期間は15日間となるようです。

冒頭で触れた様に、β版からの更新でver1.xになった方は強制的に試用期間に移行となっているはずなので

15日経過後は使用できなくなるかと思われます。

ライセンスの購入・適用

ライセンスコードの購入はFastSpringで行います。

Typora公式で「Purchase」選択・押下後、表示される画面は英語となっています。

日本円で購入したい場合は、右上の国を「Japan」に変更しましょう。

変更後、以下の画面となります。

支払い方法は「Credit/Debit」「PayPal」「WIRETRANSFER」のいずれか。

必要事項を記入の上、支払うと入力したメールアドレスにライセンスコードが送信されます。

ライセンスコードを手に入れたら、Typoraを起動してActivateしておきます。

Help→My License… でライセンス入力画面が開くので、上記でライセンス取得に使用したメールアドレスと

ライセンスコードを入力し、Activateを押下しましょう。

なお、1ライセンスあたり3デバイスを超過して登録した場合、

一番最初に登録したデバイスから自動的に非Activate化されるようです。

過去にTyporaを使用したデバイスで非Activate化し忘れた場合も、

新しいデバイスで登録すれば良いということですね。

ライセンスを当分購入しない理由

個人的にTyporaは最終β版でもかなり使えるMarkdownエディタでした。

現在リリースされている1.x系も最終β版からあまり変更がなく、

かつこのβ版はまだ無料で利用できる状態にあります。

となると当分はβ版でいいかな・・・というのが理由です。

今後リリース版で新たに使い勝手の良い機能が追加されたり、不具合修正の状況などを考慮して

購入してもいいかなと思うタイミングで購入しようかと思っています。

Typora(β版)を無料で使用する

ver1.x系は有料になったものの、β版についてはこれまで通り無料で利用が可能となります。(2021/12/16現在)

詳しくはライセンス契約を参照してください。

TyporaはversionのUp・Down を自由にできる仕様になっているため、過去のインストーラを実行すれば

容易にダウングレードが可能です。(ver1.x系にした場合も、β版に戻すことが可能)

もちろん新規インストールも同様に可能です。

以下でTypora(β版)をインストールする方法を記載しておきます。

まず以下画面で「History Releases」を選択します。

「Dev / Beta Releases」から「old macOS beta」または「old WIndows / Linux beta」を選択します。

以下は「old Windows / Linux beta」を選択した際の遷移先です。

OSに対応するリンクをクリックするとインストーラがダウンロードされます。

ダウンロードされたインストーラでインストールをすることにより、選択したバージョンの

β版Typoraを使用できるようになります。

まとめ

以上、①正式版の利用方法、②引き続きβ版を利用する方法を紹介しました。

別のMarkdownエディタに乗り換えるのも一つの手かとは思いますが、

β版もまだまだ使える状態ではあるので、(最終β版で十分満足していた方などは)

この方法を取るのも良いのではないでしょうか。

なお現時点ではβ版のリンクは残されていますが、今後消える可能性がないとはいえません。

今後もβ版を引き続き利用する方は、最新のβ版インストーラを念のため残しておいた方が良いでしょう。

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

2021年11月5日金曜日

Typora(Markdownエディタ)の紹介⑤　～フロー図を作成する～

おはようございます。ひっくです。

今回も、MarkdownエディタのTyporaを取り扱います。

Typora関連記事

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

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

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

今回は図式(フロー図)の記載方法を紹介します。

Typora バージョン

今回確認するTyporaバージョンは、「0.11.13(beta)」となります。

拡張機能の有効化

※ 第4回(シーケンス図の作成) と同内容となります。既に有効化されている方は読み飛ばしてください。

Markdownで図を作成できる設定となっているか確認します。

設定は、「ファイル」→「設定」→「Markdown」→「文法サポート」から変更できます。

以下赤枠の設定がチェックONになっていればOKです。

フロー図の記法 (flowchart.js)

Typoraでは「flowchart.js」を使用してフロー図を作成することができます。

以下にフロー図を作成する方法を紹介します。

バッククォート「`」× 3 を記載した後、続けて「flow」と記載します。

これで、「flowchart.js」を使用してフロー図を作成するモードになります。

【選択後】のカーソル表示部分に、「flowchart.js」の構文を使用して作図していきます。

初期表示でフロー図が表示されます。
- 【入力時】
- 【選択後】

以下は作図した際の記載例です。

入力欄には、以下のような記載をしています。
```
st=>start: ログイン処理開始:>http://www.google.com
e=>end: ログイン処理 終了
opMsg=>operation: 入力値不正
メッセージ表示
opMsg1=>operation: ID存在なしメッセージ表示
opChk=>operation: ID、パスワード入力値チェック
subChk=>subroutine: ID存在チェック
cond=>condition: 入力値が
不正な値？
cond2=>condition: ID存在
チェック結果？
ioLog=>inputoutput: 操作ログ出力

st->opChk->cond
cond(true@No)->subChk->cond2->e
cond2(false@No)->opMsg1->ioLog->e
cond(false@Yes)->opMsg->ioLog(left)->e
cond2(true@Yes)->e
```
構文の詳細は「flowchart.js」のGitHub ReadMe.md で確認可能ですが、

簡単に紹介すると、2つ覚えなければいけない構文があります。

①各ノードを定義する構文

「ノード変数名=>ノードタイプ: ノードテキスト |ノード表示装飾(※) :>URLリンク(※)」

※はオプション項目。

②接続を定義する構文

「ノード変数名->ノード変数名(方向:[ top / left / right / bottom ])」

ノードを定義して、各ノードを接続することでフロー図を作成していくことができます。

基本となる構文さえ覚えてしまえば、後は自由に作成することができます。

以下は個人的な感想となります。(注意すべき点や、考えられる使用用途等を挙げてみました。)
- 上記例の「ログイン処理開始」をクリックしてみてください。
  
  リンクURLとしてGoogleの検索ページを設定しているので、そちらに遷移します。
  
  リンクURLはどのノードに対しても設定することができます。
  
  例えばGitHubの該当URLを付記すれば、対応するソースとの対応関係が
  
  すぐに確認できるので使い勝手が良くなるかもしれません。
- ノード変数名は分かりやすい変数名とする方が良いでしょう。
  
  似た変数名が多いと、各ノードを接続する際に、ノードに対応する変数を
  
  探す手間が増えそうです。
- 条件分岐のノードは、ノードテキストを改行する方が図が小さくなりやすく
  
  見やすいフロー図を作成できるようになるかと思います。
  
  他のノードでも改行は許可されるため、必要に応じて使用した方が良いでしょう。
- ノード接続時の方向(left等)は必ず記載しなければならない訳ではありません。
  
  ただ、多方面から接続される場合や、ノード下部にスペースがない場合に
  
  接続線が乱れる(※)ことがあります。
  
  このような場合は、方向を記載して調整するのが良いでしょう。
  
  ※上記例の「cond(false@Yes)->opMsg->ioLog(left)->e」記載について、
  
  方向情報を削除した際の表示例が、以下となります。

まとめ

Typoraで図式(フロー図)を作図する方法について、今回は紹介しました。

複雑になってくると各ノード間の接続が作成しづらくなるので、慣れが必要かもしれません。

ですが、ぱぱっと簡易的なフロー図を作成したい場合には、便利かと思います。

興味を持った方は是非一度作成してみてください。

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

2021年9月24日金曜日

Typoraの紹介④　～シーケンス図を作成する～

おはようございます。ひっくです。

今回も第1～3回に引き続き、MarkdownエディタのTyporaを取り扱います。

Typora関連記事

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

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

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