eLabFTWの編集ウィンドウ(edit.html)の構成を変更して使いやすくしてみる

この記事の目的

eLabFTWは優秀な実験ノートツールなのだが、時々使いにくいポイントがある。
具体的には

• 記事作成画面において新規編集画面にCreateボタンがあり、これをSaveと間違って押してしまうことで編集中の記事をロストする
  
• Markdown editorにおいて、Previewウィンドウがないためリアルタイムで記事の仕上がりを確認できない。

これを改善するために、edit.html内を編集した。

記事編集画面におけるCreateボタンの消去

{% block createnew %}
  <div class='d-flex'>
    <div class='align-self-center'><h3>{{ Entity.page|capitalize }} > {{ 'Editing an entry'|trans }}</h3></div>
<!--    <div class='ml-auto'>
      {% include 'create-new.html' %}
    </div>    -->
  </div>
{% endblock %}

オリジナルのコードから、上記に示した3行をコメントアウトする。

オリジナル

{% if editor == 'md' %}
  <textarea aria-label='{{ 'Main content'|trans }}' id='body_area' class='markdown-textarea' data-language='{{ App.getJsLang }}' name='body'>{{ Entity.entityData.body }}</textarea>
{% endif %}

改変

{% if editor == 'md' %}
  <div class="row">
    <div class='col-md-6 mt-4'>
      <textarea aria-label='{{ 'Main content'|trans }}' id='body_area' name='body_md' class='markdown-textarea' data-language='{{ App.getJsLang }}' rows="35" name='body'>{{ Entity.entityData.body }}</textarea>
    </div>
    <div class="col-md-6" style="margin-top: 20px;">
      <h3>{{ 'Preview'|trans }}</h3>
      <div id="preview" class="preview-container" style="border: 1px solid #ccc; padding: 10px; overflow-y: auto; height: 850px;"></div>
    </div>
  </div>
{% endif %}

保存ボタンのレイアウト調整

オリジナル

<div class='mt-4 text-center'>
  <button type='button' {{ not displayMainText ? 'hidden' }} data-action='update-entity-body' class='btn btn-primary'>{{ 'Save'|trans }}</button>
  <button type='button' data-action='update-entity-body' data-redirect='view' class='btn btn-secondary'>{{ 'Save and go back'|trans }}</button>
</div>

改変

<div class='mt-4 text-center'>
  <button {{ not displayMainText ? 'hidden' }} data-action='update-entity-body' class='btn btn-outline-primary'>{{ 'Save'|trans }}</button>
  <button data-action='update-entity-body' data-redirect='view' class='btn btn-outline-secondary'>{{ 'Save and go back'|trans }}</button>
</div>

HTMLコードの整理

オリジナル

<div {{ not displayMainText ? 'hidden' }}>
  <h3 data-action='toggle-next' class='d-inline togglable-section-title' tabindex='0' role='button' aria-expanded='true'><i class='fas fa-caret-down fa-fw mr-2'></i>{{ 'Main text'|trans }}</h3>
  <div data-save-hidden='mainTextDiv'>
    <div class='mt-4'>
      {% if editor == 'md' %}
        <textarea aria-label='{{ 'Main content'|trans }}' id='body_area' class='markdown-textarea' data-language='{{ App.getJsLang }}' name='body'>{{ Entity.entityData.body }}</textarea>
      {% else %}
        <textarea aria-label='{{ 'Main content'|trans }}' id='body_area' class='mceditable invisible' name='body'>{{ Entity.entityData.body }}</textarea>
      {% endif %}
    </div>
    <div class='mt-4 text-center'>
      <button type='button' {{ not displayMainText ? 'hidden' }} data-action='update-entity-body' class='btn btn-primary'>{{ 'Save'|trans }}</button>
      <button type='button' data-action='update-entity-body' data-redirect='view' class='btn btn-secondary'>{{ 'Save and go back'|trans }}</button>
    </div>
  </div>
  <hr>
</div>

改変

  {# BODY #}
  <h3 data-action='toggle-next' class='d-inline togglable-section-title'>
    <i class='fas fa-caret-down fa-fw mr-2'></i>
    {{ 'Main text'|trans }}</h3>

  {% if editor == 'md' %}
    <div class="row">
      <div class='col-md-6 mt-4'>
        <textarea aria-label='{{ 'Main content'|trans }}' id='body_area' name='body_md' class='markdown-textarea' data-language='{{ App.getJsLang }}' rows="35" name='body'>{{ Entity.entityData.body }}</textarea>
      </div>
      <div class="col-md-6" style="margin-top: 20px;">
        <h3>{{ 'Preview'|trans }}</h3>
        <div id="preview" class="preview-container" style="border: 1px solid #ccc; padding: 10px; overflow-y: auto; height: 850px;"></div>
      </div>
    </div>

  {% else %}
    <div class='mt-4'>
      <textarea aria-label='{{ 'Main content'|trans }}' id='body_area' class='mceditable invisible' name='body'>{{ Entity.entityData.body }}</textarea>
    </div>
  {% endif %}

  <div class='mt-4 text-center'>
    <button {{ not displayMainText ? 'hidden' }} data-action='update-entity-body' class='btn btn-outline-primary'>{{ 'Save'|trans }}</button>
    <button data-action='update-entity-body' data-redirect='view' class='btn btn-outline-secondary'>{{ 'Save and go back'|trans }}</button>
  </div>

今回の改変では、主にユーザーインターフェースの改善とコードの整理を行った。特にマークダウンエディタのプレビュー機能の追加や、不要なボタンの削除によって、ユーザー体験の向上とコードの保守性の向上が図られた。

※本記事はコニカミノルタ株式会社　技術開発本部にて@yanamiと共に実施しました。本記事の公開は、コニカミノルタ技術開発本部先進コア技術センターにより外部発表許可を受けていますが、本コードは私及び@yanamiが構築したものであり、コニカミノルタ株式会社は本ページ記載の情報の利用に関して、一切の責任を負いません。