<div class="page-header" markdown="1">
# でんでんエディター
</div>

でんでんマークダウンをリアルタイムでプレビューできるよっ！

## 段落

これは段落です。

これは別の段落です。


### 段落内の改行

これは段落です。
これは段落の続きです。

---

## 見出し

# 見出しレベル１ #

## 見出しレベル２ ##

### 見出しレベル３ ###

#### 見出しレベル４ ####

##### 見出しレベル５ #####

###### 見出しレベル６ ######

---

## 引用

> これは引用された段落です。
>
> これも引用された段落です。

---

## リスト

* りんご
* もも
* みかん

1. りんご
2. もも
3. みかん

---

## コードブロック

    <body>
      <p>Hello world.</p>
    </body>

---

## ハイパーリンク

詳しくは[こちら](http://example.com/)をごらんください。

---

## 強調

これは*強調されたテキスト*です。

これは**重要なテキスト**です。

---

## ルビ

{電子出版|でんししゅっぱん}を手軽に

---

## 縦中横

昭和^53^年

---

## 脚注

これは脚注付き[^1]の段落です。

[^1]: そして、これが脚注です。

---

## 画像

![電書ちゃん](https://lh4.googleusercontent.com/-m3cvu_gKtW8/TrauQGoZbHI/AAAAAAAAJdc/ytImJ4o4DcU/s144/sd-07.png)
                        
/* 独自に追加したいCSSがあればここに書いてください。プレビューに反映されます  */

Markdown Mode

Markdownの変換モードを選択します

Options でんでんマークダウンのみ有効

桁数

でんでんエディターの使い方

概要

でんでんエディターはでんでんマークダウンによる文書作成を支援するウェブアプリケーションです。でんでんマークダウンで書かれたテキストは、でんでんコンバーターにアップロードしてEPUBファイルに変換することができます。

でんでんエディターでは次のことができます。

  • テキストの作成
  • テキストの保存（ダウンロードまたはDropboxに保存）
  • HTML化されたテキストのプレビュー
  • HTML化されたテキストのコードビュー
  • HTMLに適用するレイアウトの変更
  • HTMLに適用するCSSの追記

でんでんマークダウンの記法については、でんでんマークダウンのページを参照してください。

ただし、改ページ（ファイル分割）の記法は利用できませんので注意してください。

動作環境

Chrome、Safari、Opera (15以降)での利用を推奨します。それ以外のブラウザでは縦書きのレイアウトを適用した場合に表示に問題が発生したり、一部の機能が利用できなかったりする可能性があります。

画面構成

画面の構成と役割を説明します。

Edit タブ
テキストの編集に利用します
Preview タブ
HTML化されたテキストの表示確認に利用します
Code タブ
HTML化されたテキストのコードを表示します
Custom CSS タブ
ユーザーが独自に適用したいCSSを記述します
Settings タブ
でんでんエディターの設定に使用します
Help タブ
使い方の解説です

Edit タブ

保存するファイル名の指定欄 保存する際のファイル名を指定します

ファイルを保存します。ダウンロードするかDropboxに保存するか選択できます。

一つ前の操作に戻ります

元に戻した操作を一つ先に進めます

カーソルの位置に見出しを挿入します。テキストが選択されていれば、そのテキストを見出しにします。

カーソルの位置に重要なテキスト（太字）を挿入します。テキストが選択されていれば、そのテキストに対して適用します

カーソルの位置に強調されたテキスト（通常はイタリック体）を挿入します。テキストが選択されていれば、そのテキストに対して適用します

カーソルの位置にルビ付きテキストを挿入します。テキストが選択されていれば、そのテキストに対してルビを振ります。

カーソルの位置にハイパーリンクを挿入します。テキストが選択されていれば、そのテキストに対して対して適用します

カーソルの位置に画像を挿入します。テキストが選択されていれば、そのテキストを代替テキストにします。画像の挿入にはDropboxのアカウントが必要です。また、選択した画像は一時的にウェブ上に公開されるURLを持つので注意してください。でんでんコンバーターで利用する場合には、アップロードするファイル名に別途置き換えてください。

編集中のテキストを消去します

Preview タブ

HTMLに適用するテーマ（レイアウト）を選択します

画面の幅を変更できます

プレビューをフルスクリーンで表示します。esc ボタンで元にもどります。

文字の大きさを変更できます

テキストで使われている表外漢字（常用漢字表に含まれない漢字）と人名用漢字を確認することができます。仮名に直したりルビを振ったりする際の参考にしてください（あくまでも参考です。義務ではありません）。

  • 人名用漢字 ピンク色にハイライトされます。日本における戸籍に子の名として記載できる漢字のうち、常用漢字に含まれないものですが、常用漢字に準じたものとしてそのまま使うこともあります
  • 表外漢字 水色にハイライトされます。内閣告示「常用漢字表」で示された現代日本語の漢字に含まれない漢字です。仮名に直したりルビを振るなどの対処を検討してください
  • 表外漢字の例外 表外漢字であっても共同通信社記者ハンドブック(第12版)で使うとされた漢字は黄色にハイライトされます。対処の要否は各自検討してください

現在の制限事項として、Unicodeのサロゲートペアに含まれる漢字の検出に対応していない点があります。ご了承ください

Code タブ

テキストから変換されたHTMLのコードを確認できます。編集はできません。

全てのコードを選択状態にします。コピーして再利用する際に使ってください。

Custom CSS タブ

ここに書かれたCSSも Preview 画面に反映されます。Preview タブでテーマに「プレーン」を選択した状態にすれば、Custom CSSの内容だけでレイアウトすることができます。

編集中のテキストを消去します

Settings タブ

でんでんエディターの設定を行ないます。

Markdown Mode

でんでんマークダウン以外のMarkdown記法も選択できます。次の中から選んでください。

  • でんでんマークダウン このエディターがメインに採用するMarkdown記法です
  • Markdown Extra でんでんマークダウンのベースになったMarkdown記法です。ルビや縦中横が使えない他、脚注の出力コードもでんでんマークダウンとは異なります。http://michelf.ca/projects/php-markdown/extra/
  • Markdown 拡張のない純粋なMarkdown記法です。http://daringfireball.net/projects/markdown/

オプション

でんでんマークダウンのオプション機能を選択します。Markdown Modeがでんでんマークダウンの時のみ有効です。

  • 自動縦中横を有効にする 連続する数字と!?を自動的に縦中横にします。
  • 桁数 連続する数字を何桁まで縦中横にするか指定します。
  • 縦書きの文字の向きを補正する 縦書きにした時に一部の文字や記号などの向きを日本人にとって自然になるように補正します。

Help タブ

このページを表示します。

便利なスニペット入力！

最後にヒントです。でんでんエディターのスニペット入力はとても便利なので、ちょっと体験してみてください。

Edit 画面の任意の位置にカーソルを置いて、 ボタンを押してみてください。こんな文字が挿入されます。

{親文字|ルビ文字}

そして、「親文字」が選択状態になっているので、そのまま文字を入力すると「親文字」の位置に入力した文字が反映されます。仮に「電子書籍」と入力したとしましょう。入力が終わったらTABキーを押してみてください。

{電子書籍|ルビ文字}

今度は「ルビ文字」が選択された状態になりました。そのまま「でんししょせき」と入力したら、もう一度TABキーを押します。

{電子書籍|でんししょせき}|

するとカーソルが最後尾に移動しましたね。これで続きの文章を書くことができます。このように、でんでんエディターのスニペットはTABキーを使うことで楽に入力ができます。

電書ちゃん

だいたいわかった？ 全部の機能を使わなくちゃいけないわけじゃないのよ。できる範囲で頑張りなさい

DenDen Editor

Copyright (c) 2014, Densho Channel

でんでんエディターが利用しているソフトウェアやサービスを紹介します。

Softwares

Services

Contact

お問い合せは以下までお願いします。

twitter
@lost_and_found
mail
[email protected]

電書ちゃん

facebookコミュニティもあるよ。気軽に参加してね

電書ちゃんのご機嫌を取る

'; ns.target_doc_head = ns.target_doc.getElementById('head'); ns.target_doc_css_link = ns.target_doc.getElementById('css_link'); ns.target_doc_custom_css_link = ns.target_doc.getElementById('custom_css_link'); ns.target_doc_body = ns.target_doc.getElementsByTagName('body')[0]; }; ns.initDoc(); ns.render = function(){ var XHR = new XMLHttpRequest(); XHR.open(ns.config.request_method, ns.config.request_uri); XHR.timeout = 6000; //XHR.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); XHR.setRequestHeader("Content-Type", "application/json"); try { XHR.send(JSON.stringify({ "text": ns.editor.getValue(), "mode": ns.config.request_mode, "autoTcy": ns.config.request_autotcy, "tcyDigit": ns.config.request_tcydigit, "autoTextOrientaion": ns.config.request_autotextorientation, "aozoraRuby": ns.config.request_aozoraruby, })); } catch (e) { var text = '

サーバーが応答しません

'; ns.code.textContent = text; ns.target_doc.getElementsByTagName('body')[0].innerHTML = text; $('#loading_image_container').fadeOut(); $('#preview').attr('style', 'visibility:visible'); } $('#preview').attr('style', 'visibility:hidden;'); $('#loading_image_container').fadeIn(); XHR.onload = function () { var text = XHR.responseText; ns.code.textContent = text; ns.target_doc.getElementsByTagName('body')[0].innerHTML = text; $('#loading_image_container').fadeOut(); $('#preview').attr('style', 'visibility:visible'); } XHR.onerror = function() { console.log(XHR.status); var text = '

変換に失敗しました

'; ns.code.textContent = text; ns.target_doc.getElementsByTagName('body')[0].innerHTML = text; $('#loading_image_container').fadeOut(); $('#preview').attr('style', 'visibility:visible'); } XHR.ontimeout = function () { var text = '

Reqest Timeout

'; ns.code.textContent = text; ns.target_doc.getElementsByTagName('body')[0].innerHTML = text; $('#loading_image_container').fadeOut(); $('#preview').attr('style', 'visibility:visible'); } } ns.render(); ns.applyCustomCSS = function(){ var css_val = ns.css_editor.getValue(); var data = encodeURIComponent(css_val); var data = 'data:text/css,' + data; ns.target_doc_custom_css_link.setAttribute('href', data); } // build snippet buttons $("#undo-btn").click(function () { ns.editor.undo(); }); $("#redo-btn").click(function () { ns.editor.redo(); }); $('#bold_btn').click(function () { var selection = ns.editor.session.getTextRange(ns.editor.getSelectionRange()); if (selection == "") { selection = "重要なテキスト" } var snippet = "**${1:" + selection + "}**"; ns.snippetManager.insertSnippet(ns.editor, snippet); ns.editor.focus(); }); $('#italic_btn').click(function () { var selection = ns.editor.session.getTextRange(ns.editor.getSelectionRange()); if (selection == "") { selection = "強調されたテキスト" } var snippet = "*${1:" + selection + "}*"; ns.snippetManager.insertSnippet(ns.editor, snippet); ns.editor.focus(); }); $('#ruby_btn').click(function () { var selection = ns.editor.session.getTextRange(ns.editor.getSelectionRange()); if (selection == "") { selection = "親文字"; var snippet = "{${1:" + selection + "}|${2:ルビ文字}}"; } else { var snippet = "{" + selection + "|${1:ルビ文字}}"; } ns.snippetManager.insertSnippet(ns.editor, snippet); ns.editor.focus(); }); $('#link_btn').click(function () { var selection = ns.editor.session.getTextRange(ns.editor.getSelectionRange()); if (selection == "") { selection = "代替テキスト"; var snippet = "[${1:" + selection + "}](${2:http://example.com})"; } else { var snippet = "[" + selection + "](${1:http://example.com})"; } ns.snippetManager.insertSnippet(ns.editor, snippet); ns.editor.focus(); }); $('#image_btn').click(function () { var options = { success: function(files) { var link = files[0]['link']; var snippet = "![${1:代替テキスト}](" + link +")"; ns.snippetManager.insertSnippet(ns.editor, snippet); ns.editor.focus(); }, linkType: "direct", multiselect: false, extensions: ['.jpg', '.jpeg', '.JPG', '.JPEG', '.png', '.PNG', '.gif', '.GIF', '.svg'], }; var link = Dropbox.choose(options); console.log(link) }); $(".h_btn").click(function () { var selection = ns.editor.session.getTextRange(ns.editor.getSelectionRange()); if (selection == "") { selection = "見出し"; } var lank = parseInt(this.getAttribute('data-dd-hlank')); var hmark = ""; for (i = 0; i < lank; i = i + 1) { hmark += "#"; } var snippet = hmark + " ${1:" + selection + "} " + hmark; ns.snippetManager.insertSnippet(ns.editor, snippet); ns.editor.focus(); }); $('.dd-snippet-btn').click(function () { var snippetName = this.getAttribute('data-dd-snippet-name'); var s = ns.snippetManager.getSnippetByName(snippetName, ns.editor); ns.snippetManager.insertSnippet(ns.editor, s.content); ns.editor.focus(); }); $('.font_size_btn').click(function(){ $('.font_size_btn').parent('.active').attr('class',''); var size = this.getAttribute('data-dd-font-size'); ns.target_doc_body.setAttribute('style', 'font-size:' + size + "%;"); this.parentNode.setAttribute('class','active'); }); $('.width_btn').click(function(){ $('.width_btn').parent('.active').attr('class',''); var width_class = this.getAttribute('data-dd-width'); ns.preview.setAttribute('class', width_class); this.parentNode.setAttribute('class','active'); }); ns.preview.setAttribute('class', 'width-md'); $('#preview-link, #code-link').on('shown.bs.tab', function (e) { ns.render(); ns.applyCustomCSS(); }); $('#fullscreen_btn').click(function() { var elem = document.getElementById("preview_container"); if (elem.requestFullScreen) { elem.requestFullScreen(); } else if (elem.mozRequestFullScreen) { elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullScreen) { elem.webkitRequestFullScreen(); } }); ns.setPreviewTheme = function(name) { if (name == 'plain') { ns.target_doc_css_link.setAttribute('href', './plain.css'); } else if (name == 'bookstrap') { ns.target_doc_css_link.setAttribute('href', 'http://denshoch.github.io/bookstrap/build/stylesheets/bookstrap.css'); } else if (name == 'bookstrap-pink') { ns.target_doc_css_link.setAttribute('href', 'http://denshoch.github.io/bookstrap/build/stylesheets/bookstrap-pink.css'); } else if (name == 'bookstrap-orange') { ns.target_doc_css_link.setAttribute('href', 'http://denshoch.github.io/bookstrap/build/stylesheets/bookstrap-orange.css'); } else if (name == 'bookstrap-grass') { ns.target_doc_css_link.setAttribute('href', 'http://denshoch.github.io/bookstrap/build/stylesheets/bookstrap-grass.css'); } else if (name == 'bookstrap-coffee') { ns.target_doc_css_link.setAttribute('href', 'http://denshoch.github.io/bookstrap/build/stylesheets/bookstrap-coffee.css'); } else if (name == 'bookstrap-purple') { ns.target_doc_css_link.setAttribute('href', 'http://denshoch.github.io/bookstrap/build/stylesheets/bookstrap-purple.css'); } else if (name == 'default') { ns.target_doc_css_link.setAttribute('href', './default.css'); } else if (name == 'default_vertical') { ns.target_doc_css_link.setAttribute('href', './default_vertical.css'); } else { ns.target_doc_css_link.setAttribute('href', './plain.css'); } } $('.theme_seletor').click(function () { $('.theme_seletor').parent('.active').attr('class',''); var theme = this.getAttribute('data-dd-theme'); ns.setPreviewTheme(theme); this.parentNode.setAttribute('class','active'); }); $("#kanji_btn").click(function () { checkKanji(ns.target_doc_body); }); $("#select_all_btn").click(function () { $('#code').select(); }); $("#select_all_css_btn").click(function () { $('#css_code').select(); }); $('#download-modal').on('show.bs.modal', function (e) { var container = document.getElementById('dropbox-saver-container'); // remove previous Dropbox Saver button for(var i = container.childNodes.length - 1; i >= 0; i--) { container.removeChild(container.childNodes[i]); } var title = $('#title_input').val(); if (!title) { title = "Untitled Document" } var filename = title.replace(/\s+|　+/g, '_') + '.txt'; $('#download_filename').text(filename); console.log(filename); var text = ns.editor.getValue(); // create Dropbox Saver button var data = window.btoa(unescape(encodeURIComponent(text))); var options = { files: [ {'url': 'data:text/plain;base64,' + data, 'filename': filename} ], error: function (errorMessage) { console.log(errorMessage); } }; var button = Dropbox.createSaveButton(options); container.appendChild(button); // set blob to href var blob = new Blob([text], { "type": "text/plain" }); $('#download-link').attr('href', window.URL.createObjectURL(blob)); $('#download-link').attr('download', filename); }); // Markdowモード $('.markdown_mode_btn').change(function(){ var v = $(this).attr('value'); console.log(v); ns.config.request_mode = v; console.log(ns.config.request_mode); }); // オプション $('#opt_btn--autotcy').change(function(){ var v = $(this).prop('checked'); //console.log(v); ns.config.request_autotcy = v; //console.log(ns.config.request_autotcy); }); $('#opt_tcydigit').change(function(){ var v = $(this).val(); console.log(v); ns.config.request_tcydigit = Number(v); //console.log(ns.config.request_autotextorientation); }); $('#opt_btn--autotextorientation').change(function(){ var v = $(this).prop('checked'); //console.log(v); ns.config.request_autotextorientation = v; //console.log(ns.config.request_autotextorientation); }); $('#opt_btn--aozoraruby').change(function(){ var v = $(this).prop('checked'); //console.log(v); ns.config.request_aozoraruby = v; console.log(ns.config.request_aozoraruby); }); $(window).bind("beforeunload", function() { var obj = { text: ns.editor.getValue(), custom_css: ns.css_editor.getValue() } localStorage.setItem("previous_data", JSON.stringify(obj)); }); $("#remove_btn").click(function () { if (confirm("編集中のテキストを消去します。よろしいですか？")) { ns.editor.setValue("", -1); } }); $("#css_remove_btn").click(function () { if (confirm("編集中のテキストを消去します。よろしいですか？")) { ns.css_editor.setValue("", -1); } }); ns.preview.setAttribute('class', 'width-sm'); ns.target_doc_body.setAttribute('style', 'font-size:100%;'); // Initialize Bootstrap tooltip $("[data-toggle=tooltip]").tooltip({"container": 'body'}); ns.loadPreviousData(); });