-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdev.html
More file actions
184 lines (167 loc) · 7.81 KB
/
Copy pathdev.html
File metadata and controls
184 lines (167 loc) · 7.81 KB
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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LINE ミニアプリ デモ - 開発モード</title>
<link rel="stylesheet" href="styles.css">
<style>
.dev-banner {
background: linear-gradient(45deg, #ff6b6b, #ffa500);
color: white;
text-align: center;
padding: 10px;
font-weight: bold;
position: sticky;
top: 0;
z-index: 1001;
}
.dev-info {
background: #e3f2fd;
border: 1px solid #2196f3;
border-radius: 8px;
padding: 15px;
margin: 15px;
font-size: 0.9rem;
}
</style>
</head>
<body>
<!-- 開発モード表示 -->
<div class="dev-banner">
🛠️ 開発モード - HTTPローカル環境
</div>
<div class="dev-info">
<h3>🚀 現在の動作環境</h3>
<p><strong>URL:</strong> <span id="currentUrl"></span></p>
<p><strong>プロトコル:</strong> <span id="protocol"></span></p>
<p><strong>LIFF利用可能:</strong> <span id="liffAvailable"></span></p>
<h4>✅ 利用可能な機能（HTTPモード）</h4>
<ul>
<li>UI/UXプレビュー</li>
<li>レスポンシブデザイン確認</li>
<li>位置情報取得（ブラウザ権限必要）</li>
<li>クリップボード操作</li>
<li>モックデータでの機能確認</li>
</ul>
<h4>🔒 HTTPS環境が必要な機能</h4>
<ul>
<li>実際のLINE認証</li>
<li>QRコード読み取り</li>
<li>LINEメッセージ送信</li>
<li>LINE共有機能</li>
</ul>
</div>
<div class="container">
<!-- ヘッダー -->
<header class="header">
<h1>LINE ミニアプリ デモ</h1>
<div id="loginStatus" class="login-status">
<span id="userInfo"></span>
<button id="loginBtn" class="btn btn-primary" style="display: none;">LINEログイン</button>
<button id="logoutBtn" class="btn btn-secondary" style="display: none;">ログアウト</button>
</div>
</header>
<!-- メイン機能エリア -->
<main class="main-content">
<!-- ユーザー情報カード -->
<div id="userCard" class="card" style="display: none;">
<h2>ユーザー情報</h2>
<div id="profileInfo" class="profile-info">
<img id="profilePicture" src="" alt="プロフィール画像" class="profile-image">
<div class="profile-details">
<p><strong>名前:</strong> <span id="displayName"></span></p>
<p><strong>ユーザーID:</strong> <span id="userId"></span></p>
<p><strong>ステータス:</strong> <span id="statusMessage"></span></p>
</div>
</div>
</div>
<!-- 機能ボタンエリア -->
<div class="features-grid">
<!-- QRコード読み取り -->
<div class="feature-card">
<h3>📱 QRコード読み取り</h3>
<p>LINEの実際のQRコードリーダーを起動</p>
<button id="scanQrBtn" class="btn btn-feature">QRスキャン開始</button>
<div id="qrResult" class="result-area"></div>
</div>
<!-- メッセージ送信 -->
<div class="feature-card">
<h3>💬 メッセージ送信</h3>
<p>LINEトークにメッセージを送信</p>
<textarea id="messageText" placeholder="送信するメッセージを入力してください" rows="3"></textarea>
<button id="sendMessageBtn" class="btn btn-feature">メッセージ送信</button>
</div>
<!-- 共有機能 -->
<div class="feature-card">
<h3>📤 コンテンツ共有</h3>
<p>LINEでコンテンツを共有</p>
<input type="text" id="shareText" placeholder="共有するテキスト" class="input-field">
<button id="shareBtn" class="btn btn-feature">LINE共有</button>
</div>
<!-- デバイス情報 -->
<div class="feature-card">
<h3>📲 デバイス情報</h3>
<p>LIFF環境とデバイス情報</p>
<button id="getDeviceInfoBtn" class="btn btn-feature">情報取得</button>
<div id="deviceInfo" class="result-area"></div>
</div>
<!-- 位置情報 -->
<div class="feature-card">
<h3>📍 位置情報</h3>
<p>現在の位置情報を取得</p>
<button id="getLocationBtn" class="btn btn-feature">位置情報取得</button>
<div id="locationInfo" class="result-area"></div>
</div>
<!-- 外部ブラウザで開く -->
<div class="feature-card">
<h3>🌐 外部ブラウザ</h3>
<p>外部ブラウザでURLを開く</p>
<input type="url" id="externalUrl" placeholder="https://example.com" class="input-field">
<button id="openExternalBtn" class="btn btn-feature">外部ブラウザで開く</button>
</div>
<!-- クリップボード -->
<div class="feature-card">
<h3>📋 クリップボード</h3>
<p>クリップボードにテキストをコピー</p>
<input type="text" id="clipboardText" placeholder="コピーするテキスト" class="input-field">
<button id="copyToClipboardBtn" class="btn btn-feature">クリップボードにコピー</button>
</div>
<!-- ウィンドウ閉じる -->
<div class="feature-card">
<h3>❌ ウィンドウを閉じる</h3>
<p>LIFFウィンドウを閉じる</p>
<button id="closeWindowBtn" class="btn btn-danger">ウィンドウを閉じる</button>
</div>
</div>
</main>
<!-- フッター -->
<footer class="footer">
<p>© 2025 LINE ミニアプリ デモ</p>
<div style="margin-top: 10px;">
<a href="diagnostic.html" class="btn btn-secondary" style="font-size: 0.8rem; padding: 0.5rem 1rem;">
🔧 LIFF診断ツール
</a>
<a href="index.html" class="btn btn-secondary" style="font-size: 0.8rem; padding: 0.5rem 1rem; margin-left: 0.5rem;">
🏠 メインページ
</a>
</div>
</footer>
</div>
<!-- ローディング表示 -->
<div id="loading" class="loading" style="display: none;">
<div class="spinner"></div>
<p>処理中...</p>
</div>
<!-- メッセージ表示エリア -->
<div id="messageArea" class="message-area"></div>
<script>
// 開発環境情報表示
document.getElementById('currentUrl').textContent = window.location.href;
document.getElementById('protocol').textContent = window.location.protocol;
document.getElementById('liffAvailable').textContent = typeof liff !== 'undefined' ? 'はい' : 'いいえ（モックモード）';
</script>
<script src="env.js"></script>
<script src="script.js"></script>
</body>
</html>