Manualmaton's Laboratory

概要

性質上、RedmineのチケットやWikiにコードを貼り付ける機会は多々あると思います。

と、コードで囲まれている部分の脇にコピーボタンをつけて、コピペの手間を軽減します。

確認した環境

Redmine 5.1

さっくりとした手順

1. 設定ファイル(4個分)のバックアップを取ります。
2. パッチファイル(4個分)を作成します。
3. 4つのファイルに対してパッチを適用します。
4. Webサービスを再起動します。

ファイルのバックアップ

• app/views/journals/new.js.erb

sudo cp -pi /redmine/root/directory/app/views/journals/new.js.erb /path/to/backup/directory/new.js.erb.$(date +%Y%m%d)

• app/views/journals/update.js.erb

sudo cp -pi /redmine/root/directory/app/views/journals/update.js.erb /path/to/backup/directory/update.js.erb.$(date +%Y%m%d)

• public/javascripts/application.js

sudo cp -pi /redmine/root/directory/public/javascripts/application.js /path/to/backup/directory/application.js.erb.$(date +%Y%m%d)

• public/stylesheets/application.css

sudo cp -pi /redmine/root/directory/public/stylesheets/application.css /path/to/backup/directory/application.css.erb.$(date +%Y%m%d)

/redmine/root/directoryは、自分の環境に合わせます。(var/lib/redmineなど)

また、/path/to/backup/directtoryは任意のバックアップディレクトリを指定します。

ファイルのバックアップ確認

• app/views/journals/new.js.erb

diff -u /path/to/backup/directory/new.js.erb.$(date +%Y%m%d) /redmine/root/directory/app/views/journals/new.js.erb

• app/views/journals/update.js.erb

diff -u /path/to/backup/directory/update.js.erb.$(date +%Y%m%d) /redmine/root/directory/app/views/journals/update.js.erb

• public/javascripts/application.js

diff -u /path/to/backup/directory/application.js.erb.$(date +%Y%m%d) /redmine/root/directory/public/javascripts/application.js

• public/stylesheets/application.css

diff -u /path/to/backup/directory/application.css.erb.$(date +%Y%m%d) /redmine/root/directory/public/stylesheets/application.css

それぞれ、バックアップしたファイル → バックアップ元ファイルで差分(diff)を取り、エラーがないこと（差分が無いこと）でバックアップを確認します。

パッチファイル作成

cd /hoge && pwd

任意の作業ディレクトリに移動します。

• new.js.erb.patch

tee new.js.erb.patch > /dev/null << 'EOF'
--- new.js.erb
+++ new.js.erb.patch
@@ -11,3 +11,4 @@
 $('#issue_private_notes').prop('checked', true);
 <% end %>

+addCopyButtonToPreTag();
EOF

• update.js.erb.patch

tee update.js.erb.patch > /dev/null << 'EOF'
--- update.js.erb
+++ update.js.erb.patch
@@ -7,6 +7,7 @@
   $("#journal-<%= @journal.id %>-notes").replaceWith('<%= escape_javascript(render_notes(@journal.issue, @journal, :reply_links => authorize_for('issues', 'edit'))) %>');
   $("#journal-<%= @journal.id %>-notes").show();
   $("#journal-<%= @journal.id %>-form").remove();
+  addCopyButtonToPreTag();
   var journal_header = $("#change-<%= @journal.id %>>div.note>h4.note-header");
   var journal_updated_info = journal_header.find("span.update-info");
   if (journal_updated_info.length > 0) {
EOF

• application.js.patch

tee application.js.patch > /dev/null << 'EOF'
--- application.js
+++ application.js.patch
@@ -1123,6 +1123,49 @@
   });
 });

+function addCopyButtonToPreTag() {
+  $('.wiki .copy-contents').remove();
+  var copyContents =
+    $("<div class='copy-contents'>").append(
+      $("<button class='code-copy-button' title='Copy' onclick='copyText($(this).parent().next(\"pre\"), $(this).parent());'>")
+      .append("<span class='icon-only icon-copy'>")
+    );
+  $('.wiki pre').before(copyContents);
+  $('.code-copy-button[title]').tooltip({
+      show: {
+        delay: 400
+      },
+      position: {
+        my: "center bottom-5",
+        at: "center top"
+      }
+  });
+}
+function copyText(target, copyEl) {
+  // Selecting strings in 2 ways for cross-browser support
+  // 1. Use select();
+  copyEl.append("<textarea class='tmp'>");
+  var tmp = copyEl.find('.tmp');
+  tmp.val(target.text());
+  tmp.select();
+  // 2. Use createRange();
+  var range = document.createRange();
+  range.selectNode(target[0]);
+  window.getSelection().removeAllRanges();
+  window.getSelection().addRange(range);
+  // Copy and Cleanup
+  var copied = document.execCommand('copy');
+  window.getSelection().removeAllRanges();
+  tmp.remove();
+  // Show copied messages
+  if (copied){
+    copyEl.append("<div class='copied-message'>Copied.</div>");
+    var copiedMessage = copyEl.find('.copied-message');
+    copiedMessage.show();
+    copiedMessage.fadeOut('slow', function() { $(this).remove(); });
+  }
+}
+
 function inlineAutoComplete(element) {
     'use strict';

@@ -1241,6 +1284,7 @@
 $(document).ready(setupAttachmentDetail);
 $(document).ready(setupTabs);
 $(document).ready(setupFilePreviewNavigation);
+$(document).ready(addCopyButtonToPreTag);
 $(document).ready(setupWikiTableSortableHeader);
 $(document).on('focus', '[data-auto-complete=true]', function(event) {
   inlineAutoComplete(event.target);
EOF

• application.css.patch

tee application.css.patch > /dev/null << 'EOF'
--- _old/application.css
+++ application.css.patch
@@ -449,6 +449,30 @@
   height: initial;
 }

+.copy-contents {
+  position: relative;
+}
+.copy-contents .code-copy-button {
+  position: absolute;
+  display: flex;
+  right: -13px;
+  top: 0px;
+  border: none;
+  background-color: transparent;
+}
+.copy-contents .copied-message {
+  position: absolute;
+  display: flex;
+  right: -13px;
+  top: 20px;
+  display: none;
+  color:#505050;
+}
+.copy-contents .tmp {
+  position: fixed;
+  left: 200%;
+}
+
EOF

パッチファイルの所有権変更

• 変更前確認

ls -l *.patch

上記、作成した4つのパッチがあり、作業アカウントが所有者になっていることを確認

• 所有者変更

sudo chown www-data:www-data *.patch

→ redmineの実行ユーザを指定します。

• 変更後確認

ls -l *.patch

4つのパッチの所有者がredminの実行ユーザーになっていることを確認

パッチ適用

• app/views/journals/new.js.erb にパッチ適用

sudo -u www-data patch /redmine/root/directory/app/views/journals/new.js.erb < /hoge/new.js.erb.patch

• /app/views/journals/update.js.erb にパッチ適用

sudo -u www-data patch /redmine/root/directory/app/views/journals/update.js.erb < /hoge/update.js.erb.patch

• public/javascripts/application.js にパッチ適用

sudo -u www-data patch /redmine/root/directory/public/javascripts/application.js < /hoge/application.js.patch

• public/stylesheets/application.css にパッチ適用

sudo -u www-data patch /redmine/root/directory/public/stylesheets/application.css < /hoge/application.css.patch

それぞれ、ファイルがある箇所を絶対パスで実行してください。特に、application.jsとapplication.cssの取り違えに注意ください。

パッチが上手くいかないときは？

エディタなどを利用して、

https://www.redmine.org/attachments/25075

の内容を、追記してください。

diffによるパッチ適用確認

• app/views/journals/new.js.erb

diff -u /path/to/backup/directory/new.js.erb.$(date +%Y%m%d) /redmine/root/directory/app/views/journals/new.js.erb

• app/views/journals/update.js.erb

diff -u /path/to/backup/directory/update.js.erb.$(date +%Y%m%d) /redmine/root/directory/app/views/journals/update.js.erb

• public/javascripts/application.js

diff -u /path/to/backup/directory/application.js.erb.$(date +%Y%m%d) /redmine/root/directory/public/javascripts/application.js

• public/stylesheets/application.css

diff -u /path/to/backup/directory/application.css.erb.$(date +%Y%m%d) /redmine/root/directory/public/stylesheets/application.css

として、作成したパッチファイルと同じかを確認します。

設定反映

• Webサービス再起動

sudo systemctl restart apache2.service

• Webサービス再起動確認

systemctl status apache2.service

active(running)を確認します。

上記適用後、

1. コードブロックにコピーボタンがあり、
2. ボタンクリックで内容がクリップボードに保存される

ことが確認できれば設定完了です。