プロジェクト

全般

プロフィール

ダウンロード (26.6 KB)

機能 #25 » redmine-theme-mockup.html

詳細画面モックアップ - Redmine Admin, 2025-05-11 03:34

 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>機能 #9: VPSへの接続方法 - Redmineの設定 - LINE Redmine</title>
<style>
:root {
/* LINEカラーパレット */
--line-primary: #06C755; /* LINEの特徴的なグリーン */
--line-secondary: #1E1E1E; /* ほぼ黒（テキスト用） */
--line-light-gray: #F7F8F9; /* 背景色 */
--line-mid-gray: #E6E6EB; /* 境界線・区切り線 */
--line-dark-gray: #8E8E93; /* セカンダリテキスト */
--line-white: #FFFFFF; /* 白背景 */
--line-panel-bg: #F0F2F5; /* パネル背景色 */
--line-link: #007AFF; /* リンク色 */
--line-error: #FF3B30; /* エラーメッセージ */
--line-warning: #FF9500; /* 警告 */
--line-success: #34C759; /* 成功メッセージ */
/* 角丸 */
--border-radius-small: 4px;
--border-radius-medium: 8px;
--border-radius-large: 12px;
/* 影 */
--shadow-small: 0 1px 3px rgba(0,0,0,0.1);
--shadow-medium: 0 4px 6px rgba(0,0,0,0.1);
--shadow-large: 0 10px 15px rgba(0,0,0,0.1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
background-color: var(--line-light-gray);
color: var(--line-secondary);
line-height: 1.7;
font-size: 16px; /* フォントサイズを大きく */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
#wrapper {
background-color: var(--line-white);
box-shadow: var(--shadow-small);
border-radius: var(--border-radius-medium);
max-width: 1280px;
margin: 20px auto;
overflow: hidden;
}
a {
color: var(--line-link);
text-decoration: none;
}
/* ヘッダー */
#header {
background-color: var(--line-primary);
padding: 16px 24px;
height: auto;
color: var(--line-white);
display: flex;
align-items: center;
justify-content: space-between;
}
#header-left {
display: flex;
align-items: center;
}
#header-logo {
font-size: 22px; /* フォントサイズを大きく */
font-weight: bold;
margin-right: 20px;
}
#header-right {
display: flex;
align-items: center;
}
#quick-search {
margin-right: 20px;
}
#quick-search input[type="text"] {
border-radius: var(--border-radius-small);
border: none;
padding: 10px 16px; /* パディングを大きく */
width: 220px;
font-size: 15px; /* フォントサイズを大きく */
}
#account a {
color: var(--line-white);
margin-left: 10px;
font-size: 15px; /* フォントサイズを大きく */
}
/* トップメニュー */
#top-menu {
background-color: var(--line-white);
border-bottom: 1px solid var(--line-mid-gray);
padding: 10px 16px;
font-size: 15px; /* フォントサイズを大きく */
}
#top-menu ul {
display: flex;
list-style: none;
}
#top-menu li {
margin-right: 20px;
}
#top-menu a {
color: var(--line-secondary);
font-weight: 500;
}
#top-menu a.selected {
color: var(--line-primary);
font-weight: 700;
}
/* メインメニュー */
#main-menu {
background-color: var(--line-white);
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
#main-menu ul {
display: flex;
list-style: none;
padding: 0 16px;
}
#main-menu li {
margin: 0;
}
#main-menu a {
color: var(--line-secondary);
padding: 12px 16px;
font-weight: 500;
display: block;
font-size: 15px; /* フォントサイズを大きく */
}
#main-menu a.selected {
color: var(--line-primary);
font-weight: 700;
border-bottom: 2px solid var(--line-primary);
}
/* メインコンテンツ */
#main {
display: flex;
padding: 20px;
background-color: var(--line-light-gray);
}
#sidebar {
width: 300px; /* 少し幅を広げる */
background-color: var(--line-panel-bg); /* パネル背景色 */
border-radius: var(--border-radius-medium);
box-shadow: var(--shadow-small);
padding: 20px;
margin-right: 20px;
}
#sidebar h3 {
color: var(--line-secondary);
font-size: 18px; /* フォントサイズを大きく */
border-bottom: 1px solid var(--line-mid-gray);
padding-bottom: 10px;
margin-bottom: 15px;
font-weight: 700;
}
/* カスタムクエリ */
.queries {
margin-bottom: 20px;
}
.queries ul {
list-style: none;
}
.queries li {
margin-bottom: 8px;
}
.queries a {
color: var(--line-secondary);
display: block;
padding: 8px 12px;
background-color: var(--line-white);
border-radius: var(--border-radius-small);
box-shadow: var(--shadow-small);
transition: all 0.2s;
}
.queries a:hover {
background-color: rgba(6, 199, 85, 0.1);
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
/* ウォッチャー */
.watchers {
list-style: none;
}
.watchers li {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
}
.watchers a.user {
color: var(--line-secondary);
display: flex;
align-items: center;
}
.watchers a.delete {
color: var(--line-error);
font-size: 1.2em;
}
#content {
flex: 1;
background-color: var(--line-panel-bg); /* パネル背景色 */
padding: 20px;
border-radius: var(--border-radius-medium);
box-shadow: var(--shadow-small);
}
/* 見出し */
h1, h2, h3, h4 {
font-weight: 700;
margin-bottom: 16px;
letter-spacing: -0.01em;
}
h1 {
font-size: 26px; /* フォントサイズを大きく */
color: var(--line-secondary);
}
h2 {
font-size: 22px; /* フォントサイズを大きく */
color: var(--line-secondary);
}
/* コンテキストメニュー */
.contextual {
float: right;
margin-top: 5px;
display: flex;
gap: 10px;
}
.contextual a {
font-size: 15px; /* フォントサイズを大きく */
}
.button {
background-color: var(--line-primary);
color: var(--line-white);
border: none;
border-radius: var(--border-radius-small);
padding: 10px 16px; /* パディングを大きく */
font-weight: 500;
cursor: pointer;
display: inline-block;
font-size: 15px; /* フォントサイズを大きく */
}
.button-outline {
background-color: var(--line-white);
color: var(--line-primary);
border: 1px solid var(--line-primary);
border-radius: var(--border-radius-small);
padding: 10px 16px; /* パディングを大きく */
font-weight: 500;
cursor: pointer;
display: inline-block;
font-size: 15px; /* フォントサイズを大きく */
}
/* チケット詳細 */
.issue-overview {
background-color: var(--line-white);
border-radius: var(--border-radius-medium);
padding: 20px;
box-shadow: var(--shadow-small);
margin-bottom: 20px;
}
.issue-title {
font-size: 22px; /* フォントサイズを大きく */
font-weight: 700;
margin-bottom: 16px;
display: flex;
align-items: center;
line-height: 1.4;
}
.issue-title .issue-id {
color: var(--line-dark-gray);
margin-right: 8px;
font-weight: normal;
}
/* メタ情報を横並びに */
.issue-meta {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--line-mid-gray);
}
.issue-meta-item {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.issue-meta-label {
font-weight: 500;
color: var(--line-dark-gray);
margin-right: 8px;
font-size: 15px;
}
.issue-meta-value {
font-weight: 500;
font-size: 15px;
}
.issue-description {
background-color: var(--line-white);
border-radius: var(--border-radius-medium);
padding: 20px;
box-shadow: var(--shadow-small);
margin-bottom: 20px;
}
.description-title {
font-size: 18px; /* フォントサイズを大きく */
font-weight: 600;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line-mid-gray);
}
.description-content {
line-height: 1.7;
font-size: 16px; /* フォントサイズを大きく */
}
.description-content p {
margin-bottom: 12px;
}
.description-content ul {
margin-left: 20px;
margin-bottom: 12px;
}
.description-content li {
margin-bottom: 4px;
}
/* 説明内のコードブロック */
.description-content pre {
background-color: #f5f5f5;
border-radius: var(--border-radius-small);
padding: 12px;
overflow-x: auto;
margin-bottom: 12px;
}
.description-content code {
font-family: Monaco, Consolas, 'Courier New', monospace;
}
/* ステータスタグ */
.status-tag {
display: inline-block;
padding: 4px 10px;
border-radius: var(--border-radius-small);
font-size: 14px;
font-weight: 500;
}
.status-new, .status-新規 {
background-color: rgba(6, 199, 85, 0.1);
color: var(--line-primary);
}
.status-in-progress, .status-進行中 {
background-color: rgba(0, 122, 255, 0.1);
color: var(--line-link);
}
.status-resolved, .status-解決済み {
background-color: rgba(52, 199, 89, 0.1);
color: var(--line-success);
}
.status-feedback, .status-フィードバック {
background-color: rgba(255, 149, 0, 0.1);
color: var(--line-warning);
}
.status-closed, .status-終了 {
background-color: rgba(142, 142, 147, 0.1);
color: var(--line-dark-gray);
}
/* タブ */
.tabs {
display: flex;
margin-bottom: 20px;
border-bottom: 1px solid var(--line-mid-gray);
}
.tabs ul {
display: flex;
list-style: none;
}
.tabs li {
margin: 0;
}
.tabs a {
display: block;
padding: 12px 16px;
color: var(--line-dark-gray);
font-weight: 500;
text-decoration: none;
border-bottom: 2px solid transparent;
font-size: 15px; /* フォントサイズを大きく */
}
.tabs a.selected {
color: var(--line-primary);
border-bottom: 2px solid var(--line-primary);
}
/* コメント */
.comments {
margin-top: 30px;
}
.comment {
background-color: var(--line-white);
border-radius: var(--border-radius-medium);
padding: 16px;
box-shadow: var(--shadow-small);
margin-bottom: 20px;
}
.comment-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid var(--line-mid-gray);
}
.comment-author {
font-weight: 500;
display: flex;
align-items: center;
font-size: 15px; /* フォントサイズを大きく */
}
.comment-author img {
width: 36px; /* アバターを大きく */
height: 36px;
border-radius: 50%;
margin-right: 8px;
}
.comment-date {
color: var(--line-dark-gray);
font-size: 14px; /* フォントサイズを大きく */
}
.comment-content {
line-height: 1.7;
font-size: 16px; /* フォントサイズを大きく */
}
.comment-content p {
margin-bottom: 12px;
}
/* 履歴詳細 */
.journal-details {
background-color: rgba(6, 199, 85, 0.03);
padding: 12px;
border-radius: var(--border-radius-small);
margin-top: 10px;
}
.journal-detail {
display: flex;
margin-bottom: 4px;
font-size: 15px; /* フォントサイズを大きく */
}
.journal-property {
font-weight: 500;
width: 120px;
color: var(--line-dark-gray);
}
.journal-value {
flex: 1;
}
.journal-old-value {
text-decoration: line-through;
color: var(--line-error);
margin-right: 8px;
}
.journal-new-value {
color: var(--line-success);
}
/* コメント追加フォーム */
.add-comment {
background-color: var(--line-white);
border-radius: var(--border-radius-medium);
padding: 20px;
box-shadow: var(--shadow-small);
margin-top: 20px;
}
.add-comment h3 {
font-size: 18px; /* フォントサイズを大きく */
margin-bottom: 16px;
}
textarea.comment-textarea {
width: 100%;
border: 1px solid var(--line-mid-gray);
border-radius: var(--border-radius-small);
padding: 12px;
min-height: 120px;
font-family: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif;
font-size: 16px; /* フォントサイズを大きく */
resize: vertical;
margin-bottom: 16px;
}
textarea.comment-textarea:focus {
outline: none;
border-color: var(--line-primary);
box-shadow: 0 0 0 3px rgba(6, 199, 85, 0.1);
}
/* フッター */
#footer {
text-align: center;
padding: 20px;
color: var(--line-dark-gray);
font-size: 14px; /* フォントサイズを大きく */
border-top: 1px solid var(--line-mid-gray);
}
/* レスポンシブ対応 */
@media screen and (max-width: 899px) {
#main {
flex-direction: column;
}
#sidebar {
width: auto;
margin-right: 0;
margin-bottom: 20px;
}
#main-menu ul {
flex-wrap: wrap;
}
}
@media screen and (max-width: 599px) {
#header {
flex-direction: column;
text-align: center;
}
#header-left, #header-right {
flex-direction: column;
}
#quick-search {
margin: 10px 0;
}
#main-menu ul {
flex-direction: column;
}
#main-menu a {
text-align: center;
}
.contextual {
float: none;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contextual a {
margin: 5px 0;
flex: 1;
text-align: center;
}
}
</style>
</head>
<body>
<div id="wrapper">
<!-- ヘッダー -->
<div id="header">
<div id="header-left">
<div id="header-logo">LINE Redmine</div>
</div>
<div id="header-right">
<div id="quick-search">
<input type="text" placeholder="検索...">
</div>
<div id="account">
<a href="#">マイアカウント</a>
<a href="#">ログアウト</a>
</div>
</div>
</div>
<!-- トップメニュー -->
<div id="top-menu">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">マイページ</a></li>
<li><a href="#" class="selected">プロジェクト</a></li>
<li><a href="#">管理</a></li>
<li><a href="#">ヘルプ</a></li>
</ul>
</div>
<!-- メインメニュー -->
<div id="main-menu">
<ul>
<li><a href="#">概要</a></li>
<li><a href="#">活動</a></li>
<li><a href="#" class="selected">チケット</a></li>
<li><a href="#">新しいチケット</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">文書</a></li>
<li><a href="#">ファイル</a></li>
<li><a href="#">設定</a></li>
</ul>
</div>
<!-- メインコンテンツ -->
<div id="main">
<!-- サイドバー -->
<div id="sidebar">
<h3>カスタムクエリ</h3>
<div class="queries">
<ul>
<li><a href="#">ウォッチしているチケット</a></li>
<li><a href="#">報告したチケット</a></li>
<li><a href="#">担当しているチケット</a></li>
<li><a href="#">更新したチケット</a></li>
</ul>
</div>
<h3>ウォッチャー (1)</h3>
<ul class="watchers">
<li>
<a href="#" class="user">Redmine Admin</a>
<a href="#" class="delete">×</a>
</li>
</ul>
</div>
<!-- コンテンツ -->
<div id="content">
<div class="contextual">
<a href="#" class="button-outline">編集</a>
<a href="#" class="button-outline">ウォッチをやめる</a>
<a href="#" class="button-outline">コピー</a>
</div>
<h2 class="inline-block">機能 #9</h2>
<span class="status-tag status-新規">未完了</span>
<div class="issue-overview">
<div class="issue-title">
<span>VPSへの接続方法</span>
</div>
<!-- メタ情報を横並びに -->
<div class="issue-meta">
<div class="issue-meta-item">
<span class="issue-meta-label">ステータス:</span>
<span class="issue-meta-value">新規</span>
</div>
<div class="issue-meta-item">
<span class="issue-meta-label">優先度:</span>
<span class="issue-meta-value">通常</span>
</div>
<div class="issue-meta-item">
<span class="issue-meta-label">担当者:</span>
<span class="issue-meta-value">Redmine Admin</span>
</div>
<div class="issue-meta-item">
<span class="issue-meta-label">開始日:</span>
<span class="issue-meta-value">2025-05-10</span>
</div>
<div class="issue-meta-item">
<span class="issue-meta-label">期日:</span>
<span class="issue-meta-value">-</span>
</div>
<div class="issue-meta-item">
<span class="issue-meta-label">進捗率:</span>
<span class="issue-meta-value">0%</span>
</div>
<div class="issue-meta-item">
<span class="issue-meta-label">予定工数:</span>
<span class="issue-meta-value">-</span>
</div>
</div>
</div>
<div class="issue-description">
<div class="description-title">説明</div>
<div class="description-content">
<h1>VPSへの接続方法</h1>

<pre><code>"C:\\Program Files\\Git\\bin\\bash.exe" -c "ssh vps-root"</code></pre>

<h2>接続先情報</h2>
<ul>
<li>Ubuntu 24.04.2 LTS</li>
<li>IP: 85.131.243.51</li>
</ul>

<h2>Docker構成</h2>
<ul>
<li>nginx</li>
<li>Redmine</li>
<li>PostgreSQL</li>
</ul>

<h2>アクセス</h2>
<p>https://85.131.243.51/ (admin/admin)</p>
</div>
</div>
<div class="tabs">
<ul>
<li><a href="#" class="selected">コメント</a></li>
<li><a href="#">履歴</a></li>
<li><a href="#">プロパティ更新履歴</a></li>
</ul>
</div>
<div class="comments">
<div class="comment">
<div class="comment-header">
<div class="comment-author">
<img src="/api/placeholder/36/36" alt="アバター" />
<span>Redmine Admin</span>
</div>
<div class="comment-date">約8時間前</div>
</div>
<div class="comment-content">
<h2>VPSへの接続方法と診断・修正レポート</h2>
<h3>接続方法</h3>
<p>SSH経由でVPSに接続：</p>
<pre><code>"C:\Program Files\Git\bin\bash.exe" -c "ssh vps-root"</code></pre>
<h3>VPS環境情報</h3>
<ul>
<li><strong>OS</strong>: Ubuntu 24.04.2 LTS (GNU/Linux 6.8.0-31-generic x86_64)</li>
<li><strong>IPアドレス</strong>: 85.131.243.51 (ens3インターフェース)</li>
<li><strong>システム負荷</strong>: 0.0</li>
<li><strong>メモリ使用率</strong>: 4%</li>
<li><strong>ディスク使用量</strong>: 0.7% (773.90GBのうち)</li>
</ul>
<h3>Dockerコンテナ</h3>
<ol>
<li>
<p><strong>nginx</strong> (redmine-docker_nginx_1)</p>
<ul>
<li>イメージ: nginx:latest</li>
<li>解決前: 再起動を繰り返し（問題発生）</li>
<li>解決後: 正常稼働</li>
</ul>
</li>
<li>
<p><strong>Redmine</strong> (redmine-docker_redmine_1)</p>
<ul>
<li>イメージ: redmine:latest</li>
<li>ポート: 3000/tcp</li>
<li>状態: 稼働中</li>
</ul>
</li>
<li>
<p><strong>PostgreSQL</strong> (redmine-docker_db_1)</p>
<ul>
<li>イメージ: postgres:13</li>
<li>ポート: 5432/tcp</li>
<li>状態: 稼働中</li>
</ul>
</li>
</ol>
<h3>診断した問題</h3>
<p>nginxコンテナが再起動を繰り返していました。ログを調査した結果、SSL証明書が読み込めないエラーが発生していることが判明：</p>
<pre><code>cannot load certificate "/etc/nginx/ssl/nginx.crt": BIO_new_file() failed</code></pre>
<h3>原因</h3>
<p>Docker Compose設定ファイルのマウントポイントが誤っていました：</p>
<ul>
<li>証明書が実際に存在するパス: <code>/etc/nginx/ssl/</code></li>
<li>設定ファイルでマウントされていたパス: <code>/etc/nginx_ssl/</code></li>
</ul>
<h3>解決方法</h3>
<ol>
<li>
<p>Docker Compose設定ファイルを修正</p>
<ul>
<li><code>/root/redmine-docker/docker-compose.yml</code>のマウントを正しいパスに修正</li>
<li><code>/etc/nginx_ssl:/etc/nginx/ssl</code> → <code>/etc/nginx/ssl:/etc/nginx/ssl</code></li>
</ul>
</li>
<li>
<p>Dockerコンテナを再起動</p>
<pre><code>cd /root/redmine-docker
docker-compose down
docker-compose up -d</code></pre>
</li>
</ol>
<h3>アクセス情報</h3>
<ul>
<li><strong>URL</strong>: <a href="https://85.131.243.51/">https://85.131.243.51/</a></li>
<li><strong>デフォルト認証情報</strong>: admin/admin (初回ログイン後に変更推奨)</li>
</ul>
<h3>今後の推奨事項</h3>
<ol>
<li>定期的なログの監視設定</li>
<li>バックアップの自動化</li>
<li>SSL証明書の更新設定</li>
</ol>
</div>
</div>
<div class="comment">
<div class="comment-header">
<div class="comment-author">
<img src="/api/placeholder/36/36" alt="アバター" />
<span>Redmine Admin</span>
</div>
<div class="comment-date">約8時間前</div>
</div>
<div class="comment-content">
<p>VPS接続情報を追加しました（シンプルバージョン）：</p>
<ul>
<li>SSH接続: "C:\Program Files\Git\bin\bash.exe" -c "ssh vps-root"</li>
<li>Ubuntu 24.04.2 LTS</li>
<li>IP: 85.131.243.51</li>
<li>Docker: nginx, Redmine, PostgreSQLが稼働中</li>
<li>アクセス: <a href="https://85.131.243.51/">https://85.131.243.51/</a> (admin/admin)</li>
</ul>
</div>
</div>
<div class="comment">
<div class="comment-header">
<div class="comment-author">
<img src="/api/placeholder/36/36" alt="アバター" />
<span>Redmine Admin</span>
</div>
<div class="comment-date">約8時間前</div>
</div>
<div class="comment-content">
<p>VPSへの接続が完了しました。システム情報：</p>
<ul>
<li>Ubuntu 24.04.2 LTS</li>
<li>システム負荷: 0.0</li>
<li>ディスク使用率: 0.7% (773.90GBのうち)</li>
<li>メモリ使用率: 4%</li>
<li>IPアドレス: 85.131.243.51</li>
</ul>
<p>本日の作業を継続します。</p>
</div>
</div>
</div>
<div class="add-comment">
<h3>コメントを追加</h3>
<textarea class="comment-textarea" placeholder="コメントを入力してください..."></textarea>
<button class="button">追加</button>
</div>
</div>
</div>
<!-- フッター -->
<div id="footer">
Powered by Redmine © 2006-2025 Jean-Philippe Lang
</div>
</div>
</body>
</html>
(1-1/3)