• 概要
• 動作環境
• 画面構成
• Edit タブ
• Preview タブ
• Code タブ
• Custom CSS タブ
• Settings タブ
• Help タブ
• 便利なスニペット入力！

概要

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

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

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

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

動作環境

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

画面構成

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

Edit タブ

テキストの編集に利用します

Preview タブ

HTML化されたテキストの表示確認に利用します

Code タブ

HTML化されたテキストのコードを表示します

Custom CSS タブ

ユーザーが独自に適用したいCSSを記述します

Settings タブ

でんでんエディターの設定に使用します

Help タブ

使い方の解説です

Edit タブ

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

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

一つ前の操作に戻ります

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

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

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

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

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

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

カーソルの位置に画像を挿入します。テキストが選択されていれば、そのテキストを代替テキストにします。画像の挿入には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 画面の任意の位置にカーソルを置いて、ruby ボタンを押してみてください。こんな文字が挿入されます。

{親文字|ルビ文字}

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

{電子書籍|ルビ文字}

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

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

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

電書ちゃん

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

DenDen Editor

Copyright (c) 2014, Densho Channel

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

Softwares

• Ace (Ajax.org Cloud9 Editor) Copyright (c) 2010, Ajax.org B.V.
• DenDen Markdown Copyright (c) 2013-2014 Densho Channel
• PHP Markdown Lib Copyright (c) 2004-2013 Michel Fortin
• Markdown Copyright (c) 2003-2006 John Gruber
• Bootstrap Copyright (c) 2011-2014 Twitter, Inc
• jQuery Copyright 2014 jQuery Foundation and other contributors

Services

• Github by GitHub
• Heroku by Heroku

Contact

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

電書ちゃん

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