shift2/help.html at main · tukumanalab/shift2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>シフト管理システム - ヘルプガイド</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            background-color: #f5f5f5;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background: linear-gradient(135deg, #4285f4 0%, #357ae8 100%);
            color: white;
            padding: 40px 20px;
            text-align: center;
            margin-bottom: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }

        h1 {
            font-size: 2rem;
            margin-bottom: 10px;
        }

        .subtitle {
            font-size: 1.1rem;
            opacity: 0.95;
        }

        .section {
            background: white;
            padding: 30px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        h2 {
            color: #4285f4;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e0e0e0;
            font-size: 1.5rem;
        }

        h3 {
            color: #333;
            margin-top: 25px;
            margin-bottom: 15px;
            font-size: 1.2rem;
        }

        .steps {
            counter-reset: step-counter;
            margin: 20px 0;
        }

        .step {
            position: relative;
            padding-left: 40px;
            margin-bottom: 20px;
            counter-increment: step-counter;
        }

        .step::before {
            content: counter(step-counter);
            position: absolute;
            left: 0;
            top: 0;
            background: #4285f4;
            color: white;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 14px;
        }

        .info-box {
            background: #e3f2fd;
            border-left: 4px solid #2196f3;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
        }

        .warning-box {
            background: #fff3e0;
            border-left: 4px solid #ff9800;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
        }

        .success-box {
            background: #e8f5e9;
            border-left: 4px solid #4caf50;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }

        .feature-card {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            transition: transform 0.2s, box-shadow 0.2s;
        }

        .feature-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .feature-icon {
            font-size: 2rem;
            margin-bottom: 10px;
        }

        .feature-title {
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }

        .feature-description {
            color: #666;
            font-size: 0.95rem;
        }

        ul {
            margin-left: 20px;
            margin-top: 10px;
        }

        li {
            margin-bottom: 8px;
        }

        .button-example {
            display: inline-block;
            padding: 8px 16px;
            background: #4285f4;
            color: white;
            border-radius: 4px;
            text-decoration: none;
            margin: 5px;
            font-size: 14px;
        }

        .screenshot {
            margin: 20px 0;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .screenshot img {
            width: 100%;
            display: block;
        }

        .screenshot-caption {
            padding: 10px;
            background: #f8f9fa;
            text-align: center;
            color: #666;
            font-size: 0.9rem;
        }

        .faq-item {
            margin-bottom: 20px;
            border-bottom: 1px solid #e0e0e0;
            padding-bottom: 20px;
        }

        .faq-question {
            font-weight: bold;
            color: #4285f4;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }

        .faq-answer {
            color: #666;
            line-height: 1.8;
        }

        .contact-info {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }

        code {
            background: #f4f4f4;
            padding: 2px 6px;
            border-radius: 3px;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
        }

        .toc {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
        }

        .toc h3 {
            margin-top: 0;
            color: #333;
        }

        .toc ul {
            list-style: none;
            margin-left: 0;
        }

        .toc li {
            margin-bottom: 10px;
        }

        .toc a {
            color: #4285f4;
            text-decoration: none;
            transition: color 0.2s;
        }

        .toc a:hover {
            color: #357ae8;
            text-decoration: underline;
        }

        footer {
            text-align: center;
            padding: 30px 20px;
            color: #666;
            border-top: 1px solid #e0e0e0;
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>🗓️ シフト管理システム</h1>
            <p class="subtitle">一般ユーザー向け操作ガイド</p>
        </header>

        <div class="toc section">
            <h3>📑 目次</h3>
            <ul>
                <li><a href="#getting-started">1. はじめに</a></li>
                <li><a href="#login">2. ログイン方法</a></li>
                <li><a href="#profile-setup">3. プロフィール設定</a></li>
                <li><a href="#shift-request">4. シフト申請</a></li>
                <li><a href="#my-shifts">5. 自分のシフト確認</a></li>
                <li><a href="#shift-calendar">6. シフトカレンダーの見方</a></li>
                <li><a href="#faq">7. よくある質問</a></li>
                <li><a href="#troubleshooting">8. トラブルシューティング</a></li>
            </ul>
        </div>

        <div class="section" id="getting-started">
            <h2>1. はじめに</h2>
            <p>このシフト管理システムは、アルバイトスタッフの皆様がシフト申請を簡単に行えるウェブアプリケーションです。</p>

            <div class="feature-grid">
                <div class="feature-card">
                    <div class="feature-icon">📱</div>
                    <div class="feature-title">どこからでもアクセス</div>
                    <div class="feature-description">PC、スマートフォン、タブレットから利用可能</div>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">🔄</div>
                    <div class="feature-title">リアルタイム更新</div>
                    <div class="feature-description">空き状況が即座に反映されます</div>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">📅</div>
                    <div class="feature-title">Googleカレンダー連携</div>
                    <div class="feature-description">承認されたシフトは自動でカレンダーに追加</div>
                </div>
            </div>
        </div>

        <div class="section" id="login">
            <h2>2. ログイン方法</h2>

            <div class="steps">
                <div class="step">
                    <strong>ブラウザでシステムにアクセス</strong>
                    <p>提供されたURLをウェブブラウザで開きます。</p>
                </div>

                <div class="step">
                    <strong>Googleアカウントでログイン</strong>
                    <p>画面右上の「Google でログイン」ボタンをクリックします。</p>
                </div>

                <div class="step">
                    <strong>アカウントを選択</strong>
                    <p>使用するGoogleアカウントを選択し、必要に応じてパスワードを入力します。</p>
                </div>

                <div class="step">
                    <strong>ログイン完了</strong>
                    <p>ログインが成功すると、シフト管理画面が表示されます。</p>
                </div>
            </div>

            <div class="warning-box">
                <strong>⚠️ 注意事項</strong>
                <ul>
                    <li>事前に登録されたGoogleアカウントのみログイン可能です</li>
                    <li>アクセス権限がない場合は、管理者にお問い合わせください</li>
                    <li>ブラウザのポップアップブロックを無効にしてください</li>
                </ul>
            </div>
        </div>

        <div class="section" id="profile-setup">
            <h2>3. プロフィール設定</h2>

            <p>初回ログイン時は、必ずプロフィール設定を行ってください。</p>

            <h3>設定手順</h3>
            <div class="steps">
                <div class="step">
                    <strong>設定タブを開く</strong>
                    <p>画面上部の「設定」タブをクリックします。</p>
                </div>

                <div class="step">
                    <strong>本名を入力</strong>
                    <p>勤務簿に記載する本名（フルネーム）を入力します。</p>
                    <div class="info-box">
                        例：山田太郎、田中花子
                    </div>
                </div>

                <div class="step">
                    <strong>ニックネームを入力</strong>
                    <p>シフト表示で使用するニックネームを入力します。</p>
                    <div class="info-box">
                        例：やまだ、たなか、タロウ
                    </div>
                </div>

                <div class="step">
                    <strong>設定を保存</strong>
                    <p>「設定を保存」ボタンをクリックして完了です。</p>
                </div>
            </div>

            <div class="success-box">
                <strong>💡 ヒント</strong>
                <p>本名とニックネームの両方を設定することで、シフト表には見やすいニックネームが表示され、正式な書類には本名が使用されます。</p>
            </div>
        </div>

        <div class="section" id="shift-request">
            <h2>4. シフト申請</h2>

            <h3>申請方法</h3>
            <div class="steps">
                <div class="step">
                    <strong>シフト申請タブを開く</strong>
                    <p>「シフト申請」タブをクリックします。</p>
                </div>

                <div class="step">
                    <strong>希望日を選択</strong>
                    <p>カレンダーから希望する日付をクリックします。</p>
                    <div class="info-box">
                        <strong>色の意味：</strong>
                        <ul>
                            <li>🟢 緑：空きあり（3名以上）</li>
                            <li>🔵 青：空きあり（2名）</li>
                            <li>🟡 黄：残りわずか（1名）</li>
                            <li>🔴 赤：満員</li>
                        </ul>
                    </div>
                </div>

                <div class="step">
                    <strong>時間枠を選択</strong>
                    <p>希望する時間枠にチェックを入れます（複数選択可）。</p>
                    <ul>
                        <li>13:00-13:30</li>
                        <li>13:30-14:00</li>
                        <li>14:00-14:30</li>
                        <li>14:30-15:00</li>
                        <li>15:00-15:30</li>
                        <li>15:30-16:00</li>
                        <li>16:00-16:30</li>
                        <li>16:30-17:00</li>
                        <li>17:00-17:30</li>
                        <li>17:30-18:00</li>
                    </ul>
                </div>

                <div class="step">
                    <strong>申請を送信</strong>
                    <p>「申請する」ボタンをクリックして完了です。</p>
                </div>
            </div>

            <div class="warning-box">
                <strong>⚠️ 申請時の注意点</strong>
                <ul>
                    <li>1日から15日までは、その月のシフトを申請できます。16日からは翌月のシフトも申請することができます。</li>
                    <li>過去の日付は選択できません</li>
                    <li>定員に達した時間枠は選択できません</li>
                    <li>同じ日の同じ時間枠には重複申請できません</li>
                    <li>申請後の変更は「自分のシフト一覧」から削除して再申請してください</li>
                </ul>
            </div>
        </div>

        <div class="section" id="my-shifts">
            <h2>5. 自分のシフト確認</h2>

            <p>「自分のシフト一覧」タブで、申請済みのシフトを確認できます。</p>

            <h3>更新（リロード）ボタン</h3>
            <p>画面上部の「更新（リロード）」ボタンをクリックすると、最新のシフト情報を取得できます。他の端末やブラウザで変更した内容を反映させたい場合に使用してください。</p>

            <h3>表示される情報</h3>
            <ul>
                <li><strong>日付：</strong>シフトの日付と曜日</li>
                <li><strong>時間：</strong>勤務時間帯</li>
                <li><strong>備考：</strong>申請時に入力したメモ</li>
                <li><strong>登録日：</strong>申請した日時</li>
            </ul>

            <h3>シフトの削除</h3>
            <div class="steps">
                <div class="step">
                    <strong>削除したいシフトを確認</strong>
                    <p>一覧から削除したいシフトを見つけます。</p>
                </div>

                <div class="step">
                    <strong>削除ボタンをクリック</strong>
                    <p>該当行の「削除」ボタンをクリックします。</p>
                </div>

                <div class="step">
                    <strong>確認ダイアログで承認</strong>
                    <p>確認メッセージが表示されたら「OK」をクリックします。</p>
                </div>
            </div>

            <div class="info-box">
                <strong>💡 ポイント</strong>
                <p>当日、および過去のシフトは薄い背景色で表示され、削除できません。未来のシフトのみ削除可能です。</p>
            </div>
        </div>

        <div class="section" id="shift-calendar">
            <h2>6. シフトカレンダーの見方</h2>

            <p>カレンダー形式でシフトの空き状況を確認できます。</p>

            <h3>カレンダーの機能</h3>
            <ul>
                <li><strong>月切り替え：</strong>複数月分のカレンダーが縦に表示されます</li>
                <li><strong>色分け表示：</strong>空き状況が一目でわかります</li>
                <li><strong>インライン選択：</strong>日付をクリックせずに直接時間枠を選択可能</li>
                <li><strong>リアルタイム更新：</strong>他の人の申請が即座に反映されます</li>
            </ul>

            <h3>日付の色について</h3>
            <ul>
                <li><strong>青背景：</strong>今日の日付</li>
                <li><strong>グレー背景：</strong>過去の日付（選択不可）</li>
                <li><strong>白背景：</strong>選択可能な未来の日付</li>
                <li><strong>赤文字：</strong>日曜日</li>
                <li><strong>青文字：</strong>土曜日</li>
            </ul>
        </div>

        <div class="section" id="faq">
            <h2>7. よくある質問</h2>

            <div class="faq-item">
                <div class="faq-question">Q: シフトを間違えて申請してしまいました。修正できますか？</div>
                <div class="faq-answer">A: 「自分のシフト一覧」から該当シフトを削除し、正しい内容で再度申請してください。</div>
            </div>

            <div class="faq-item">
                <div class="faq-question">Q: スマートフォンからも利用できますか？</div>
                <div class="faq-answer">A: はい、スマートフォンのブラウザからも同様に利用できます。画面は自動的に最適化されます。</div>
            </div>

            <div class="faq-item">
                <div class="faq-question">Q: 複数の時間枠をまとめて申請できますか？</div>
                <div class="faq-answer">A: はい、同じ日の複数時間枠を選択して一度に申請できます。連続した時間枠を選択することも可能です。</div>
            </div>

            <div class="faq-item">
                <div class="faq-question">Q: シフトの空き状況はリアルタイムで更新されますか？</div>
                <div class="faq-answer">A: はい、他のスタッフが申請すると即座に空き状況が更新されます。「更新」ボタンで最新情報を取得することもできます。</div>
            </div>
        </div>

        <div class="section" id="troubleshooting">
            <h2>8. トラブルシューティング</h2>

            <h3>ログインできない場合</h3>
            <ul>
                <li>正しいGoogleアカウントを使用しているか確認</li>
                <li>ブラウザのポップアップブロックを無効化</li>
                <li>ブラウザのキャッシュをクリア</li>
                <li>別のブラウザで試す（Chrome推奨）</li>
            </ul>

            <h3>シフト申請ができない場合</h3>
            <ul>
                <li>プロフィール設定が完了しているか確認</li>
                <li>選択した時間枠に空きがあるか確認</li>
                <li>過去の日付を選択していないか確認</li>
                <li>ページを更新して最新情報を取得</li>
            </ul>

            <h3>表示がおかしい場合</h3>
            <ul>
                <li>ブラウザを最新版にアップデート</li>
                <li>画面の拡大率を100%に設定</li>
                <li>ブラウザのキャッシュをクリア</li>
                <li>JavaScriptが有効になっているか確認</li>
            </ul>
        </div>
    </div>
</body>
</html>