独創アプリ開発日記 72日目 固定画面

今日はクリスマスイブですね。ちまちまアプリ作ってる場合ではありません。今日くらいはぱーっと遊びましょう。

はい、というわけで、今回はアプリのトップ画面を作っていました。

スクロールしない画面です。

コードは以下のような感じです。テキスト等を画面のどの位置に配置するか、画面のサイズに対する比率を指定して配置するようにしました。

やろうと思えば絶対座標で位置を指定出来るので、まるでネイティブアプリを作っているような錯覚に陥ります。

<!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/ニニ|    .::::::/ 
 | ___)  ::|  ヽ.;;;//;;.;`ー‐'ォ  ..;;#:::/ 
 | ___)  ::|   .>;;;;::..    ..;,.;-\ 
 ヽ__)_/ :  /            \   
 

コメントを残す

メールアドレスが公開されることはありません。