Casual Developers Note

エンジニアやデザイナー向けの技術情報・英語学習情報・海外留学情報・海外旅行情報を提供中。世界を旅して人生を楽しもう。

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • お問い合わせ
現在の場所:ホーム / アーカイブmarsedit

2018年1月15日 By KD コメントを書く

MarsEditでMarkdownを使う場合の設定

MarsEditでMarkdownを使う場合の設定

MarsEditの初期設定が完了した後、ブログを書き始めるわけですが、皆さんはどういうフォーマットで書きますか?リッチエディタですか?HTMLですか?それともMarkdownですか?一般のブロガーであればリッチエディタかHTMLになると思いますが、私のようにエンジニアであればMarkdownに決まっています。というか、一般のブロガーもMarkdownの書き方を覚えたら同じ気持ちになりますよ。それでは、設定してみましょう。

MarsEditの設定

以下の設定をしてください。

Preferences -> Blog -> Edittingの設定を変更する

Preview Defaults -> Preview Text Filterから、
Convert Line Breaks => Markdownに変更します。

スクリーンショット 2017 12 25 14 11 45

Preferences -> Editorの設定を変更する

Default editing modeから、Rich text => Plan textに変更します。

スクリーンショット 2017 12 25 14 12 02

Markdownで書いてみる

まさに今書いているこのブログで見てみましょう。こんな感じ。

スクリーンショット 2017 12 25 14 18 15

今回は見出しの指定に使用しています。「##」は「h2タグ」、「###」は「h3タグ」という感じです。Markdownの書き方が分からない方はこちらを参考にしてみて下さい。正直、Markdownの全ての記法が使えるわけではありませんが、ブログに使うだけなら悪くないです。

WordPressの設定

MarsEditの設定だけだと、アップロードした際にWordPress上でMarkdownが適用されないため、こちらにも設定が必要です。以下の2つのプラグインのどちらかの設定をしてください。

Jetpack

Jetpack – WP Security, Backup, Speed, & Growth
Jetpack – WP Security, Backup, Speed, & Growth
Download QR-Code
Jetpack – WP Security, Backup, Speed, & Growth
Developer: Automattic
Price: Free

インストールして有効化したら、WordPressの右のメニューに以下が追加されていますので、「設定」を選択します。

スクリーンショット 2017 12 25 14 49 54

「Writing -> Composing」の「プレーンテキストのMarkdown 構文で投稿やページに書き込み」を有効にします。

スクリーンショット 2017 12 25 14 52 03

上記のやり方は公式サイトのMarkdown導入手順に書いてあります。

Markdown on Save Improved

markdown-on-save-improved
markdown-on-save-improved
Download QR-Code
markdown-on-save-improved
Developer: Matt Wiebe
Price: Free

こちらは実はJetpackに入っているものと同じになります。Jetpackを入れないでMarkdownを使いたい場合のみ使ってください。

こちらはインストールして有効にするだけで投稿画面で使用できます。投稿画面の右側に以下が追加されるので、Markdownを使わない時は外すことができます。

スクリーンショット 2017 12 25 14 29 14

最後に

というわけで、今回はMarsEditのMarkdownの設定方法でした。まだMarkdownへの対応が完璧では無いので、MarkdownとHTMLを併用して書く感じにはなりますが、それでもかなり書きやすいです。試したことが無い人は試してみて下さい。

環境

  • MarsEdit : 4.0.4
  • WordPress : 4.9.1

カテゴリ : ライフハック タグ : markdown, marsedit, wordpress

2017年12月28日 By KD コメントを書く

MarsEditのプレビューをサイトとほとんど同じにする方法

MarsEditのプレビューをサイトとほとんど同じにする方法

MarsEditを使うことのメリットはライブプレビュー(記事を書いている時にリアルタイムでサイトのプレビューが見れること)です。その時に自身のサイトと違う見た目ではプレビューの意味がありません。そこで、プレビューをサイトとほとんど同じにする方法を紹介します。

基本的なプレビューテンプレートを作成する方法①MarsEditの読み込み機能を使う

MarsEditのプレビュー画面から読み込む

「Blog->Edit Preview Template…」からプレビュー画面を表示し、「Download Template…」をクリックします。

うまくいけばこれでブログから自動的にHTMLを読み込んでテンプレートを作成してくれます。

基本的なプレビューテンプレートを作成する方法②自分でHTMLを作る

方法①でうまくいかない場合は、自分で作成しましょう。

まず雛形となるページを作る

いつもやっている通りにWordPressの投稿から記事を作成します。この時にタイトルを「#title#」、コンテンツを「#body##extended#」と記載します。このタグはMarsEditがプレビューする時に使っているもので、ここで入力しておくと後でテンプレート編集が楽になります。

スクリーンショット 2017 12 24 20 26 11

HTMLのソースコードをコピーする

雛形ページを「プレビュー」で表示します。私のサイトの場合はこんな感じになりました。

スクリーンショット 2017 12 24 20 26 47

その後、プレビュー画面で、ブラウザがChromeであれば「Option+Command+U」でHTMLのソースコードが表示できますので、それをまるっとコピーします。

プレビューテンプレートを編集する

ここでやっとMarsEditを起動し、対象のサイトをクリックした状態で上部のメニューから「Blog -> Edit Preview Template…」を選択します。

スクリーンショット 2017 12 24 22 22 09

そうするとデフォルトのテンプレーが表示されます。

スクリーンショット 2017 12 24 20 10 50

このHTMLが書かれている箇所に、先程コピーしてきたサイトのHTMLソースコードを全て貼り付けます。これで概ね完成です。

プレビューテンプレートを調整する

単にHTMLを貼り付けただけだと、表示が少し崩れたり、重くてプレビューに時間がかかったりしてしまう場合があるため、調整が必要です。それでは、ポイントを押さえながら一つずつやっていきましょう。

ポイント1 必須のタグの調整

貼り付けたHTMLのタグが正しく設定されているかプレビューテンプレートを検索して確認します。

  • タイトルは「<title>#title#</title>」となっているか?
  • コンテンツは「<div>#body##extended#</div>」となっているか?

ポイント2 不要な要素の削除

使用しているWordpressのテーマによるのですが、だいたい「<nav></nav>」と「<header></header>」、Wordpressの管理者用の項目を表示している部分は削除しても影響が無いと思いますので、プレビューで確認しながら削除して下さい。

ポイント3 必要に応じてタグを追加する

今回最初に作ったプレビューテンプレートでは#title#、#body#、#extended#の3つのタグしか使っていませんでしたが、実はもっと種類があります。なので、プレビューに反映させたいものがあれば、必要に応じて使ってみて下さい。以下が一覧になります。

MarsEditのプレビューテンプレートで使えるタグ一覧

タグ 内容
#title# タイトル
#url# URL
#body# コンテンツの内容
#categories# カテゴリ
#tags# タグ
#extended# 拡張
#excerpt# 抜粋
#weblogName# プログ名
#weblogURL# ブログURL

ちなみに、私の場合は#categories#と#tags#を追加で設定しています。

実際にプレビューしながら記事を書いて見る

私の場合はこんな感じの仕上がりになりました。ばっちりですね。

スクリーンショット 2017 12 24 23 39 35

最後に

思い通りにライブプレビューできましたか?せっかくMarsEditを買ったのですから、ここまで設定しないと損ですよ。では、また。

環境

  • MarsEdit : 4.0.4
  • WordPress : 4.9.1

カテゴリ : ライフハック タグ : marsedit, wordpress

2017年12月26日 By KD コメントを書く

MarsEditのつまずかない初期設定

MarsEditのつまずかない初期設定

ブログをWordPressにしたことで、記事作成ツールも新しくしてみたくなり、お高いMarsEditを導入してみました。いや、ほんと使いやすいですね、これは。しかし、導入時点でつまずいた点があったため、できるだけ私がやった通りの流れでつまずかない初期設定を紹介します。

そもそもMarsEditとは?

MarsEdit 4 - Blog Editor
MarsEdit 4 - Blog Editor
Preorder QR-Code
MarsEdit 4 - Blog Editor
Developer: 仕事効率化
Price: unknown

主にプロブロガーの中で絶大な支持を集めている記事作成ツールで、現在価格が6000円もするお高いツールです。正直、機能に対して価格が高騰している感じはしますが、残念ながら代替となるツールが無いためこの価格でもほしい人はたくさんいる状況です。もちろん、私もその一人となりました。

では、そこまで高い買い物をして得られるメリットは何でしょうか?以下の3点が好まれている主な理由です。

  • ライブプレビュー(記事を書きながらプレビューが見れる)
  • ネット環境なしでも記事が書ける
  • 写真のアップロードが簡単にできる(実はこれが一番嬉しい)

これらは、Web上のエディタである程度の期間記事を書いたことがある人なら誰でも感じるあのモッサリ感、編集中にシステムエラーで書き途中の記事が吹っ飛ぶイライラ感、システムが勝手に変な編集をしてHTMLをぐちゃぐちゃにする失望感、、、などなどから解放してくれるということです。(Tumblrを使っていた時の不満です)

また、エンジニアの視点で見れば、開発環境を作る時にローカル環境でプレビューさせながらコーディングするようにするのはもはや常識なので、便利に決まっているのです。

初期設定

App StoreからMarsEditを購入し、ダウンロードしたという前提で説明します。まず、MarsEditを起動すると以下のダイアログが出るので、ブログ名とURLを入力します。

スクリーンショット 2017 12 24 16 42 08

その後で、自動設定が実行されるのですが、これは確実に失敗します。(軽いバグですね)出来が悪い感じですが、気にせずに進めます。

スクリーンショット 2017 12 24 16 42 17

そうするとメインのウィンドウが開くので、自分のサイトをダブルクリックして設定を開きます。

スクリーンショット 2017 12 25 0 49 19

あるいは、上部のメニューから「MarsEdit -> Preferences…」からでも設定を開けます。

スクリーンショット 2017 12 25 0 52 27

そして「Blog -> Connection」を選択し、以下の2箇所を設定します。

  • API Endpoint URL : https://yoursite.com/xmlrpc.php
  • Blog ID : 1

API Endpoint URLに設定するURLは、自分のサイトのURL(例えばhttps://yoursite.com/)の後ろに「xmlrpc.php」を足したものになります。これはWordPressのXML-RPCという仕組みを呼び出すためのものです。

スクリーンショット 2017 12 25 0 49 48

その後で「自分のサイト名 -> Refresh」あるいは上部の更新ボタンからリフレッシュします。

スクリーンショット 2017 12 25 1 02 16

すると、サイトのユーザ名とパスワードを聞かれるので、いつもWordPressにログインしている時と同じものを入力します。

スクリーンショット 2017 12 24 18 09 55

リフレッシュが成功し、今まで書いた記事が一覧に表示されれば初期設定は完了です。やっと使い始められます!

スクリーンショット 2017 12 24 18 11 02

トラブルシューティング

もし、この記事で説明している方法で初期設定が失敗した場合は、考えられる点は2つです。一つは、WordPressのプラグインによる問題、もう一つはレンタルサーバの設定による問題です。前者の場合は、プラグインを一つ一つ外して確認するしか手がありません。後者の場合というのは、レンタルサーバが独自でセキュリティ強化をしている場合で、具体的にはWordPressのXML-RPCにむやみにアクセスされないように権限設定をしていることがあります。

例えば、Xserver (Xdomain) の場合を紹介します。

どうしても設定うまくいかない場合に、自分のXML-RPCのURL(例えば、https://yoursite.com/xmlrpc.php)をブラウザで実行してみてください。すると、以下のように403エラーが出ている可能性があります。もしそうなら、レンタルサーバのセキュリティ設定の問題で間違いありません。もしかして海外からその作業をしていたりしませんか?日本のレンタルサーバは海外からのアクセスを制限するようにしていることがあります。

スクリーンショット 2017 12 24 18 02 48

海外からアクセスして使いたい場合の対処方法は、Xserver (Xdomain) の管理画面にログインし、「WordPressセキュリティ設定」を選択します。

スクリーンショット 2017 12 24 17 43 19

そして、以下の設定をオフにすれば解決します。ただし、注意書きにあるように、セキュリティが弱くなるため、自分で「.htaccess」ファイルを編集するか、セキュリティ強化のためのプラグインを導入することをオススメします。

スクリーンショット 2017 12 24 17 43 46

最後に

MarsEditの初期設定は成功しましたか?私は海外から初期設定を行ったためにトラブルシューティングに記載してある問題に直面して時間を無駄にしてしまいました。。。このブログを見ている方々は私の分まで時間を有意義に使ってくださいね。また、価格が高いと思われる方でもダウンロードは無料で、1カ月はお試しで利用できるので、試してみる価値はあると思いますよ。

環境

  • MarsEdit : 4.0.4
  • WordPress : 4.9.1

カテゴリ : ライフハック タグ : marsedit, wordpress, xserver

ブログ更新情報や海外の関連情報などを配信する無料メルマガ

Sponsored Links

About Author

KD

世界を旅し日本を愛するエンジニア。大学でコンピュータサイエンスの楽しさを学び、日本の大手IT企業で働く中で、新しい技術やスケールするビジネスが北米にある事に気づく。世界に挑戦するための最大の壁が英語であったため、フィリピン留学およびカナダ留学を経て英語を上達させた。現在は日本在住でエンジニアとして働きつつ、次の挑戦に備えて世界の動向を注視している。挑戦に終わりはない。このブログでは、エンジニアやデザイナー向けの技術情報から、海外に留学したい人向けの留学情報、海外に興味がある人向けの海外旅行情報など、有益な情報を提供しています。

https://casualdevelopers.com/

最近の投稿

  • 2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年JS周辺のバックエンド寄りの注目技術!ネクストNodeJSの「Deno」と分散型パッケージレジストリの「Entropic」の紹介

    2020年1月13日
  • 今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    今さら聞けないJavaによる関数型プログラミング入門 ~ラムダ式、ストリーム、関数型インターフェース~

    2019年11月4日
  • ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    ReactのためのEslintおよびPrettierの設定方法 ~Airbnb JavaScript Style Guideの適用~

    2019年10月30日
  • BashからZshに移行する方法(Mac編)

    BashからZshに移行する方法(Mac編)

    2019年10月21日
  • Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    Create React Appを使わないでゼロからReactの開発環境を構築する方法(Webpack/Docker編)

    2019年9月30日

カテゴリ

  • 技術 Tips & Tutorials (100)
  • 技術塾 (6)
  • ライフハック (26)
  • 海外留学 (12)
  • 英語学習 (3)
  • コラム (6)

アーカイブ

最高の学習のために

人気記事ランキング

  • MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
    MySQLで「ERROR 2003 (HY000): Can't connect to MySQL server」と怒られた時の対処法
  • SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
    SAKURAのメールボックスで独自ドメインのメールを設定し、Gmail経由で送受信する方法
  • Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
    Jupyter Notebookで「The kernel appears to have died. It will restart automatically.」というエラーが出た場合の原因と対処法
  • Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
    Expressで「Cannot set headers after they are sent to the client」と怒られた時の対処法
  • SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
    SLF4JとLogbackによるJavaのロギング入門(SLF4J + Logback + Lombok)
  • Amazon EC2インスタンスにSSHできなくなった時の対処法
    Amazon EC2インスタンスにSSHできなくなった時の対処法
  • SpringBootのProfile毎にプロパティを使い分ける3つの方法
    SpringBootのProfile毎にプロパティを使い分ける3つの方法
  • [tips][perl] Perlで文字コードをいい感じに処理する方法
    [tips][perl] Perlで文字コードをいい感じに処理する方法
  • 爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
    爆速でJenkinsをマスターしよう(GitHubアカウント統合編) ~ JenkinsのGitHub Organizationの設定方法 ~
  • Go言語のためのVisual Studio Codeの設定方法
    Go言語のためのVisual Studio Codeの設定方法

Bitcoin寄付 / BTC Donation

Bitcoinを寄付しよう

BTC
Select Payment Method
Personal Info

Donation Total: BTC 0.0010

このブログの運営のためにBitcoinでの寄付を募集しています。お気持ち程度の寄付を頂けると管理者の励みになります。

Bitcoin寄付について知りたい方はこちらの記事へ

ビットコイン取引ならここ

  • ホーム
  • 技術 Tips & Tutorials
  • 技術塾
  • ライフハック
  • 海外留学
  • 英語学習
  • コラム
  • サイトマップ
  • タグ一覧
  • プライバシーポリシー
  • お問い合わせ

Copyright © 2023 KD - Casual Developers Notes