今日はクリスマスイブですね。ちまちまアプリ作ってる場合ではありません。今日くらいはぱーっと遊びましょう。
はい、というわけで、今回はアプリのトップ画面を作っていました。
スクロールしない画面です。
コードは以下のような感じです。テキスト等を画面のどの位置に配置するか、画面のサイズに対する比率を指定して配置するようにしました。
やろうと思えば絶対座標で位置を指定出来るので、まるでネイティブアプリを作っているような錯覚に陥ります。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
.vintage {
background: #EEE url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAHklEQVQImWNkYGBgYGD4//8/A5wF5SBYyAr+//8PAPOCFO0Q2zq7AAAAAElFTkSuQmCC) repeat;
text-shadow: 5px -5px black, 4px -4px white;
font-weight: bold;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text
}
.title_label {
font-size: 48px;
text-align: center;
width: 400px;
line-height:150px;
}
.txtbase {
position: absolute;
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer */
-khtml-user-select: none; /* KHTML browsers (e.g. Konqueror) */
-webkit-user-select: none; /* Chrome, Safari, and Opera */
-webkit-touch-callout: none; /* Disable Android and iOS callouts*/
}
.btn {
font-size: 36px;
text-align: center;
width: 400px;
line-height:100px;
}
</style>
<title>TextManga</title>
</head>
<body>
<span id="title" class="title_label txtbase vintage">てきすとまんが</span>
<a id="mine_btn" class="btn txtbase vintage" href="<?php echo url(''); ?>">じぶんのまんが</a>
<a id="everyone_btn" class="btn txtbase vintage" href="<?php echo url(''); ?>">みんなのまんが</a>
<a id="other_btn" class="btn txtbase vintage" href="<?php echo url(''); ?>">他の人のまんが</a>
<a id="help_btn" class="btn txtbase vintage" href="https://minnano.app/support/2015/02/01/usage_of_textmanga_1/">つかいかた</a>
<script type="text/javascript" src="<?php echo env('ASSETS_PATH').'/js/jquery-2.1.0.min.js'; ? >">
</script>
<script type="text/javascript">
// スクロールを無効にする
$(window).on('touchmove.noScroll', function(e) {
e.preventDefault();
});
function adjust() {
var w = $(window).width();
var h = $(window).height();
if (w < h) {
// タイトル
setPos("#title", 0.5, 0.2, w, h);
// 各ボタン
var y_base = 0.5;
var pitch = 0.12;
setPos("#mine_btn", 0.5, y_base + pitch * 0, w, h);
setPos("#everyone_btn", 0.5, y_base + pitch * 1, w, h);
setPos("#other_btn", 0.5, y_base + pitch * 2, w, h);
setPos("#help_btn", 0.5, y_base + pitch * 3, w, h);
} else {
// タイトル
setPos("#title", 0.5, 0.05, w, h);
// 各ボタン
var y_base = 0.4;
var pitch = 0.2;
setPos("#mine_btn", 0.5, y_base + pitch * 0, w, h);
setPos("#everyone_btn", 0.5, y_base + pitch * 1, w, h);
setPos("#other_btn", 0.5, y_base + pitch * 2, w, h);
setPos("#help_btn", 0.5, y_base + pitch * 3, w, h);
}
}
function setPos(selector, rate_x, rate_y, w, h) {
var ih = parseInt($(selector).css("height"));
var iw = parseInt($(selector).css("width"));
$(selector).css("left", (w - iw) * rate_x + "px");
$(selector).css("top", (h - ih) * rate_y + "px");
}
$(document).ready(function () {
adjust();
});
$(window).resize(function () {
adjust();
});
</script>
</body>
</html>
なお、リンク先はまだ全然作っていません。
：／￣| ： ： .／ / # ;,; ヽ
：. ｜ ::｜ ／⌒ ;;# ,;.;::⌒ : ::::＼ ：
｜ ::｜： / -==、 ' （ ●） ..:::::|
,― ＼ | ::::::⌒（__人__）⌒ :::::.::::| ：
| ＿＿_） ::｜： ! #;;:.. l/ﾆﾆ| .::::::/
| ＿＿_） ::｜ ヽ.;;;//;;.;`ｰ‐'ｫ ..;;#:::/
| ＿＿_） ::｜ .＞;;;;::.. ..;,.;-＼
ヽ＿＿）＿／ ： / ＼