wiki:lesscss_test [ともやん・どっと・ねっと]

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== LessCSS test ======

===== Dark mode test =====
<html>
<input type="checkbox" id="chkDark"> <span>ダークモード</span>&nbsp;
<input type="checkbox" id="chkVertical"> <span>縦書き</span>
<script>
jQuery(() =>{
  const chkDark = document.querySelector("#chkDark");
  const chkVertical = document.querySelector("#chkVertical");

  const setDarkAndLightMode = () => {
    if (chkDark.checked === true) {
      document.body.classList.remove('light-mode');
      document.body.classList.add('dark-mode');
    }
    else {
      document.body.classList.remove('dark-mode');
      document.body.classList.add('light-mode');
    }
  };

  const setVerticalMode = () => {
    if (chkVertical.checked === true) {
      document.body.classList.add('vertical-mode');
    }
    else {
      document.body.classList.remove('vertical-mode');
    }
  };

  chkDark.addEventListener("change", () => {
    setDarkAndLightMode();
  });
  chkVertical.addEventListener("change", () => {
    setVerticalMode();
  });
  
  //setDarkAndLightMode();
});
</script>
</html>

===== code file wrap test 🤔 =====

==== ケース 1 (color_term, color_mincode, mincode) ====
<html><style>
  .wrap_grp_test .wrap_column {
    height: 290px;
    border: 1px solid red;
    border-radius: 5px;
  }
</style></html>
<WRAP group grp_test>
<WRAP column 45% mincode>
^ テーマを Dark にする  ^
| **メニュー:** - [Settings]-[Theme]-[JupyterLab Dark]\\ **Advanced Settings Editor:** - [Theme]  |
| <code javascript User Preferences>
{
    // Theme
    // @jupyterlab/apputils-extension:themes
    // Theme manager settings.
    // *************************************

    // Selected Theme
    // Application-level visual styling theme
    "theme": "JupyterLab Dark",
}
</code> |
</WRAP>

<WRAP column 45% color_mincode>\\ \\ \\ \\
<code javascript User Preferences>
{
    // Theme
    // @jupyterlab/apputils-extension:themes
    // Theme manager settings.
    // *************************************

    // Selected Theme
    // Application-level visual styling theme
    "theme": "JupyterLab Dark",
}
</code></WRAP>
</WRAP>


==== Notebook のセルの通し番号を振る ====
<WRAP group>

<WRAP column 45%>
**Advanced Settings Editor:** - [Notebook]\\

<WRAP color_term>
<WRAP color_mincode>
<code javascript User Preferences>
{
    // Notebook
    // @jupyterlab/notebook-extension:tracker
    // Notebook settings.
    // **************************************

    // Code Cell Configuration
    // The configuration for all code cells.
    "codeCellConfig": {
        "lineNumbers": true
    }
}
</code></WRAP>
</WRAP>

</WRAP>

</WRAP>

==== ケース 2 (#mincode_long) ====
<WRAP prewrap 100% #mincode_long>
<code python pip_downloader.py>
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
import cgi
import mimetypes
import os

from pip._internal.download import PipSession
from pip._internal.models.link import Link
from pip._vendor.requests.models import CONTENT_CHUNK_SIZE
from pip._internal.utils.misc import splitext, consume, format_size
from pip._internal.utils.ui import DownloadProgressProvider
from pip._vendor import requests

import logging

logger = logging.getLogger(__name__)

def download_http_url(
    url,  # type: str
    download_dir,  # type: str
    hashes=None,   # type: Optional[Hashes]
    progress_bar='on'   # type: str
):
    logger.debug('download_http_url("%s", "%s")', url, download_dir)
    link = Link(url)
    session = PipSession()
        
    def _download_url(
        resp,  # type: Response
        link,  # type: Link
        content_file,  # type: IO
        hashes,  # type: Optional[Hashes]
        progress_bar  # type: str
    ):
        # type: (...) -> None
        try:
            total_length = int(resp.headers['content-length'])
        except (ValueError, KeyError, TypeError):
            total_length = 0

        cached_resp = getattr(resp, 'from_cache', False)
        if cached_resp:
            show_progress = False
        elif total_length > (40 * 1000):
            show_progress = True
        elif not total_length:
            show_progress = True
        else:
            show_progress = False

        def resp_read(chunk_size):
            try:
                # Special case for urllib3.
                for chunk in resp.raw.stream(
                        chunk_size,
                        decode_content=False):
                    yield chunk
            except AttributeError:
                # Standard file-like object.
                while True:
                    chunk = resp.raw.read(chunk_size)
                    if not chunk:
                        break
                    yield chunk

        def written_chunks(chunks):
            for chunk in chunks:
                content_file.write(chunk)
                yield chunk

        def _progress_indicator(iterable, *args, **kwargs):
            return iterable

        progress_indicator = _progress_indicator

        if show_progress:  # We don't show progress on cached responses
            progress_indicator = DownloadProgressProvider(progress_bar,
                                                            max=total_length)
            if total_length:
                print('Downloading {} ({})'.format(url, format_size(total_length)))
            else:
                print(f'Downloading {link.url}')
        elif cached_resp:
            print(f'Using cached {link.url}')
        else:
            print(f'Downloading {link.url}')

        print(f'Downloading from URL {link}')

        downloaded_chunks = written_chunks(
            progress_indicator(
                resp_read(CONTENT_CHUNK_SIZE),
                CONTENT_CHUNK_SIZE
            )
        )
        if hashes:
            hashes.check_against_chunks(downloaded_chunks)
        else:
            consume(downloaded_chunks)
        
    # type: (...) -> Tuple[str, str]
    """Download link url into temp_dir using provided session"""
    target_url = link.url.split('#', 1)[0]
    try:
        resp = session.get(
            target_url,
            headers={"Accept-Encoding": "identity"},
            stream=True,
        )
        resp.raise_for_status()
    except requests.HTTPError as exc:
        print('HTTP error {} while getting {}'.format(exc.response.status_code, link))
        raise

    content_type = resp.headers.get('content-type', '')
    filename = link.filename  # fallback
    # Have a look at the Content-Disposition header for a better guess
    content_disposition = resp.headers.get('content-disposition')
    if content_disposition:
        # type: (str, str) -> str
        def sanitize_content_filename(filename):
            # type: (str) -> str
            """
            Sanitize the "filename" value from a Content-Disposition header.
            """
            return os.path.basename(filename)
            
        """
        Parse the "filename" value from a Content-Disposition header, and
        return the default filename if the result is empty.
        """
        _type, params = cgi.parse_header(content_disposition)
        filename = params.get('filename')
        if filename:
            # We need to sanitize the filename to prevent directory traversal
            # in case the filename contains ".." path parts.
            filename = sanitize_content_filename(filename)

    ext = splitext(filename)[1]  # type: Optional[str]
    if not ext:
        ext = mimetypes.guess_extension(content_type)
        if ext:
            filename += ext
    if not ext and link.url != resp.url:
        ext = os.path.splitext(resp.url)[1]
        if ext:
            filename += ext
    file_path = os.path.join(download_dir, filename)
    with open(file_path, 'wb') as content_file:
        _download_url(resp, link, content_file, hashes, progress_bar)
    return file_path, content_type
</code>
</WRAP>

==== ケース 3 (color_term, color_command, color_result) ====
<WRAP color_term>
<WRAP color_command><html><pre>
<b class=GRN>$</b> <b class=HIY>sudo</b> /usr/local/lsws/admin/misc/admpass.sh
</pre></html></WRAP>
<WRAP color_result><html><pre>

Please specify the user name of administrator.
This is the user name required to login the administration Web interface.

User name [admin]: tomoyan596 <b class=DiYE>&lt;- 管理者ユーザーを入力</b>

Please specify the administrator's password.
This is the password required to login the administration Web interface.

Password: <b class=DiYE>&lt;- 管理者パスワードを入力</b>
Retype password: <b class=DiYE>&lt;- 管理者パスワードの確認でもう一度入力</b>
Administrator's username/password is updated successfully!
</pre></html></WRAP>
</WRAP>
<WRAP round tip 90%>
このスクリプトは ''/usr/local/lsws/admin/conf/htpasswd'' を上書きリセットする...🤔\\
<WRAP color_term>
<WRAP color_command><html><pre>
<b class=GRN>$</b> <b class=HIY>sudo</b> cat /usr/local/lsws/admin/conf/htpasswd
</pre></html></WRAP>
<WRAP color_result><html><pre>
tomoyan596:$1$2wALctqc$wIsHdEdChWRN0AmAT6L8E0
</pre></html></WRAP>
</WRAP>

パスワードは php により暗号化される...🤔\\
<WRAP color_code><code php /usr/local/lsws/admin/misc/admpass.sh>
# generate password file
ENCRYPT_PASS=`$CUR_DIR/../fcgi-bin/admin_php -q $CUR_DIR/htpasswd.php $PASS_ONE`
echo "$ADMIN_USER:$ENCRYPT_PASS" > $CUR_DIR/../conf/htpasswd 
</code></WRAP>
</WRAP>

==== ケース 4 (code, ncolor_result) ====
<WRAP prewrap 100%><code powershell>
$ ~/scoop/apps/scoop/current/bin/checkver.ps1 <pkg name> -u -Dir <bucket dir>
</code></WRAP>

<WRAP ncolor_result><html><pre>
<b class=HIG>$</b> <b class=HIY>~/scoop/apps/scoop/current/bin/checkver.ps1</b> ffmpeg <b class=WHI>-u -Dir</b> ~/scoop/buckets/main/bucket
ffmpeg: <b class=HIR>4.4-19</b> (scoop version is 4.3.2) <b class=HIC>autoupdate available</b>
<b class=HIB>Autoupdating ffmpeg</b>
<b class=YEL>Downloading</b> <b class=HIG>ffmpeg-n4.4-19-g8d172d9409-win64-gpl-4.4.zip</b> <b class=YEL>to compute hashes!</b>
ffmpeg-n4.4-19-g8d172d9409-win64-gpl-4.4.zip (94.9 MB) [=================>                              ]  34%
</pre></html></WRAP>
...
<WRAP ncolor_result><html><pre>
ffmpeg-n4.4-19-g8d172d9409-win64-gpl-4.4.zip (94.9 MB) [================================================] 100%
<b class=YEL>Computed hash:</b> <b class=HIG>ba5e6a3a29ee90c90a573a39f536f64d48e31eacce3e5b6a31ce96079ef65ac7</b>
<b class=GRN>Writing updated ffmpeg manifest</b>
</pre></html></WRAP>

==== ケース ５ (#result_long, ncolor_result) ====
<code>
# opkg -help
</code>
<WRAP prewrap 100% #result_long><code>
opkg: unrecognized option: h
opkg: unrecognized option: e
opkg must have one sub-command argument
usage: opkg [options...] sub-command [arguments...]
where sub-command is one of:

Package Manipulation:
        update                  Update list of available packages
        upgrade <pkgs>          Upgrade packages
        install <pkgs>          Install package(s)
        configure <pkgs>        Configure unpacked package(s)
        remove <pkgs|regexp>    Remove package(s)
        flag <flag> <pkgs>      Flag package(s)
         <flag>=hold|noprune|user|ok|installed|unpacked (one per invocation)

Informational Commands:
        list                    List available packages
        list-installed          List installed packages
        list-upgradable         List installed and upgradable packages
        list-changed-conffiles  List user modified configuration files
        files <pkg>             List files belonging to <pkg>
        search <file|regexp>    List package providing <file>
        find <regexp>           List packages whose name or description matches <regexp>
        info [pkg|regexp]       Display all info for <pkg>
        status [pkg|regexp]     Display all status for <pkg>
        download <pkg>          Download <pkg> to current directory
        compare-versions <v1> <op> <v2>
                            compare versions using <= < > >= = << >>
        print-architecture      List installable package architectures
        depends [-A] [pkgname|pat]+
        whatdepends [-A] [pkgname|pat]+
        whatdependsrec [-A] [pkgname|pat]+
        whatrecommends[-A] [pkgname|pat]+
        whatsuggests[-A] [pkgname|pat]+
        whatprovides [-A] [pkgname|pat]+
        whatconflicts [-A] [pkgname|pat]+
        whatreplaces [-A] [pkgname|pat]+

Options:
        -A                      Query all packages not just those installed
        -V[<level>]             Set verbosity level to <level>.
        --verbosity[=<level>]   Verbosity levels:
                                        0 errors only
                                        1 normal messages (default)
                                        2 informative messages
                                        3 debug
                                        4 debug level 2
        -f <conf_file>          Use <conf_file> as the opkg configuration file
        --conf <conf_file>
        --cache <directory>     Use a package cache
        -d <dest_name>          Use <dest_name> as the the root directory for
        --dest <dest_name>      package installation, removal, upgrading.
                                <dest_name> should be a defined dest name from
                                the configuration file, (but can also be a
                                directory name in a pinch).
        -o <dir>                Use <dir> as the root directory for
        --offline-root <dir>    offline installation of packages.
        --add-arch <arch>:<prio>        Register architecture with given priority
        --add-dest <name>:<path>        Register destination with given path

Force Options:
        --force-depends         Install/remove despite failed dependencies
        --force-maintainer      Overwrite preexisting config files
        --force-reinstall       Reinstall package(s)
        --force-overwrite       Overwrite files from other package(s)
        --force-downgrade       Allow opkg to downgrade packages
        --force-space           Disable free space checks
        --force-postinstall     Run postinstall scripts even in offline mode
        --force-remove  Remove package even if prerm script fails
        --force-checksum        Don't fail on checksum mismatches
        --no-check-certificate Don't validate SSL certificates
        --noaction              No action -- test only
        --download-only No action -- download only
        --nodeps                Do not follow dependencies
        --nocase                Perform case insensitive pattern matching
        --size                  Print package size when listing available packages
        --force-removal-of-dependent-packages
                                Remove package and all dependencies
        --autoremove            Remove packages that were installed
                                automatically to satisfy dependencies
        -t                      Specify tmp-dir.
        --tmp-dir               Specify tmp-dir.
        -l                      Specify lists-dir.
        --lists-dir             Specify lists-dir.

 regexp could be something like 'pkgname*' '*file*' or similar
 e.g. opkg info 'libstd*' or opkg search '*libop*' or opkg remove 'libncur*'
</code></WRAP>

<code>
# opkg -help
</code>
<WRAP prewrap 100% result_long><code>
opkg: unrecognized option: h
opkg: unrecognized option: e
opkg must have one sub-command argument
usage: opkg [options...] sub-command [arguments...]
where sub-command is one of:

Package Manipulation:
        update                  Update list of available packages
        upgrade <pkgs>          Upgrade packages
        install <pkgs>          Install package(s)
        configure <pkgs>        Configure unpacked package(s)
        remove <pkgs|regexp>    Remove package(s)
        flag <flag> <pkgs>      Flag package(s)
         <flag>=hold|noprune|user|ok|installed|unpacked (one per invocation)

Informational Commands:
        list                    List available packages
        list-installed          List installed packages
        list-upgradable         List installed and upgradable packages
        list-changed-conffiles  List user modified configuration files
        files <pkg>             List files belonging to <pkg>
        search <file|regexp>    List package providing <file>
        find <regexp>           List packages whose name or description matches <regexp>
        info [pkg|regexp]       Display all info for <pkg>
        status [pkg|regexp]     Display all status for <pkg>
        download <pkg>          Download <pkg> to current directory
        compare-versions <v1> <op> <v2>
                            compare versions using <= < > >= = << >>
        print-architecture      List installable package architectures
        depends [-A] [pkgname|pat]+
        whatdepends [-A] [pkgname|pat]+
        whatdependsrec [-A] [pkgname|pat]+
        whatrecommends[-A] [pkgname|pat]+
        whatsuggests[-A] [pkgname|pat]+
        whatprovides [-A] [pkgname|pat]+
        whatconflicts [-A] [pkgname|pat]+
        whatreplaces [-A] [pkgname|pat]+

Options:
        -A                      Query all packages not just those installed
        -V[<level>]             Set verbosity level to <level>.
        --verbosity[=<level>]   Verbosity levels:
                                        0 errors only
                                        1 normal messages (default)
                                        2 informative messages
                                        3 debug
                                        4 debug level 2
        -f <conf_file>          Use <conf_file> as the opkg configuration file
        --conf <conf_file>
        --cache <directory>     Use a package cache
        -d <dest_name>          Use <dest_name> as the the root directory for
        --dest <dest_name>      package installation, removal, upgrading.
                                <dest_name> should be a defined dest name from
                                the configuration file, (but can also be a
                                directory name in a pinch).
        -o <dir>                Use <dir> as the root directory for
        --offline-root <dir>    offline installation of packages.
        --add-arch <arch>:<prio>        Register architecture with given priority
        --add-dest <name>:<path>        Register destination with given path

Force Options:
        --force-depends         Install/remove despite failed dependencies
        --force-maintainer      Overwrite preexisting config files
        --force-reinstall       Reinstall package(s)
        --force-overwrite       Overwrite files from other package(s)
        --force-downgrade       Allow opkg to downgrade packages
        --force-space           Disable free space checks
        --force-postinstall     Run postinstall scripts even in offline mode
        --force-remove  Remove package even if prerm script fails
        --force-checksum        Don't fail on checksum mismatches
        --no-check-certificate Don't validate SSL certificates
        --noaction              No action -- test only
        --download-only No action -- download only
        --nodeps                Do not follow dependencies
        --nocase                Perform case insensitive pattern matching
        --size                  Print package size when listing available packages
        --force-removal-of-dependent-packages
                                Remove package and all dependencies
        --autoremove            Remove packages that were installed
                                automatically to satisfy dependencies
        -t                      Specify tmp-dir.
        --tmp-dir               Specify tmp-dir.
        -l                      Specify lists-dir.
        --lists-dir             Specify lists-dir.

 regexp could be something like 'pkgname*' '*file*' or similar
 e.g. opkg info 'libstd*' or opkg search '*libop*' or opkg remove 'libncur*'
</code></WRAP>

==== ケース 6 (.wrap_tip, .wrap_info, .wrap_important, .wrap_alert, .wrap_help 内の pre を 30% 透過) ====
<WRAP group>
<WRAP round tip column>
Python環境が見つかりません。バンドルされたインストーラーを使用してインストールするか、デフォルトの Python 環境を変更します
<html><pre>
⚠ Python environment not found. <code>Install using the bundled installer</code> or <code>Change the default Python environment</code>
</pre></html>
</WRAP>
<WRAP round info column half>
<html><pre>情報枠</pre></html>
</WRAP>
<WRAP round important column half>
<html><pre>重要枠</pre></html>
</WRAP>
<WRAP round alert column half>
<html><pre>警告枠</pre></html>
</WRAP>
<WRAP round help column half>
<html><pre>ヘルプ枠</pre></html>
</WRAP>
</WRAP>
==== GeSHi code test 🤔 ====
<WRAP color_term>
<WRAP color_command><html><pre>
<b class=GRN>$</b> <b class=HIY>diff</b> build.sh build.sh.org
</pre></html></WRAP>
<WRAP color_result><code diff>
1c1
< #!/bin/sh -x
---
> #!/bin/sh
162c162
<         #yum install -y epel-release 
---
>         yum install -y epel-release 
164,166c164
<         if echo $output | grep "Fedora"; then
<             OSTYPE=FEDORA
<         elif echo $output | grep " 7."; then
---
>         if echo $output | grep " 7."; then
174,177d171
<         if [ ! "${OSTYPE}" = "FEDORA" ] ; then
<             yum install -y epel-release
<         fi
<         
193,194c187
<         #elif [ "${OSTYPE}" = "CENTOS8" ] || [ "${OSTYPE}" = "CENTOS9" ] ; then
<         elif [ "${OSTYPE}" = "FEDORA" ] || ["${OSTYPE}" = "CENTOS8" ] || [ "${OSTYPE}" = "CENTOS9" ] ; then
---
>         elif [ "${OSTYPE}" = "CENTOS8" ] || [ "${OSTYPE}" = "CENTOS9" ] ; then
</code></WRAP>
</WRAP>

===== HackGen Console NFJ Half =====

===== プロジェクトの初期化 =====
<WRAP color_term>
<WRAP color_command><html><pre>
<b class=GRN>$</b> <b class=HIY>mkdir</b> tomoyan-app-dev && <b class=HIY>cd</b> tomoyan-app-dev
<b class=GRN>$</b> <b class=HIY>firebase</b> init
</pre></html></WRAP>
<WRAP color_result_long><html><pre>
<b class=HIR>
     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########
</b>
You're about to initialize a Firebase project in this directory:

  <b class=BOLD>/home/tomoyan/my_projects/tomoyan-app-dev</b>

<b class=BOLD><b class=HIG>?</b> Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter
 to confirm your choices. </b>
<b class=HIY>このディレクトリに設定する Firebase 機能はどれですか? Space を押して機能を選択し、Enter を押して選択を確定します。</b>
(Press <b class=HIC>&lt;space></b> to select, <b class=HIC>&lt;a></b> to toggle all, <b class=HIC>&lt;i></b> to invert selection, and <b class=HIC>&lt;enter></b> to proceed)
 <b class=HIG>◉</b> Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default
 instance
 <b class=HIG>◉</b> Firestore: Configure security rules and indexes files for Firestore
<b class="BOLD HIC">❯</b><b class=HIG>◉</b> <b class=HIC>Functions: Configure a Cloud Functions directory and its files</b>
 <b class=HIG>◉</b> Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
 <b class=HIG>◉</b> Hosting: Set up GitHub Action deploys
 <b class=HIG>◉</b> Storage: Configure a security rules file for Cloud Storage
 <b class=HIG>◉</b> Emulators: Set up local emulators for Firebase products
 <b class=HIG>◉</b> Remote Config: Configure a template file for Remote Config
(Move up and down to reveal more choices)
<b class=HIC>Realtime Database: Configure a security rules file for Realtime Database and 
(optionally) provision default instance, Firestore: Configure security rules and indexes files for Firestore, 
Functions: Configure a Cloud Functions directory and its files, Hosting: Configure files for Firebase Hosting 
and (optionally) set up GitHub Action deploys, Hosting: Set up GitHub Action deploys, Storage: Configure a 
security rules file for Cloud Storage, Emulators: Set up local emulators for Firebase products, Remote Config:
 Configure a template file for Remote Config</b>

<b class=BOLD>=== Project Setup</b>

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

<b class=BOLD><b class=HIG>?</b> Please select an option: </b>
  Use an existing project 
<b class=BOLD><b class=HIC>❯</b> <b class=HIC>Create a new project </b>
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project
<b class=BOLD><b class=HIG>?</b> Please select an option: </b><b class=HIC>Create a new project </b>
<b class="BOLD HIC">i</b>  If you want to create a project in a Google Cloud organization or folder, please use "firebase projects:create" instead, and return to this command when you've created the project.
<b class=BOLD><b class=HIG>?</b> Please specify a unique project id (<b class=HIR>warning</b>: cannot be modified afterward) [6-30 characters]:</b>
 <b class=HIC>tomoyan-app-dev</b>
<b class=BOLD><b class=HIG>?</b> What would you like to call your project? (defaults to your project ID) 
<b class="BOLD HIG">✔</b> Creating Google Cloud Platform project
<b class="BOLD HIG">✔</b> Adding Firebase resources to Google Cloud Platform project

🎉🎉🎉 Your Firebase project is ready! 🎉🎉🎉

Project information:
   - Project ID: tomoyan-app-dev
   - Project Name: tomoyan-app-dev

Firebase console is available at
https://console.firebase.google.com/project/tomoyan-app-dev/overview
<b class="BOLD HIC">i</b>  Using project tomoyan-app-dev (tomoyan-app-dev)

=== Database Setup
<b class="BOLD HIC">i  database</b>: ensuring required API firebasedatabase.googleapis.com is enabled...
<b class="BOLD HIR">⚠  database</b>: missing required API firebasedatabase.googleapis.com. Enabling now...
<b class="BOLD HIG">✔  database</b>: required API firebasedatabase.googleapis.com is enabled

<b class=BOLD><b class=HIG>? It seems like you haven’t initialized Realtime Database in your project yet. Do you want to set it up?</b> Yes
<b class=BOLD><b class=HIG>? Please choose the location for your default Realtime Database instance: </b>
  us-central1 
  europe-west1 
<b class="BOLD HIC">❯ asia-southeast1 </b>
<b class=BOLD><b class=HIG>?</b> Please choose the location for your default Realtime Database instance:</b> <b class=HIC>asia-southeast1</b>
<b class="BOLD HIG">✔</b> Creating your default Realtime Database instance: tomoyan-app-dev-default-rtdb

Firebase Realtime Database Security Rules allow you to define how your data should be
structured and when your data can be read from and written to.

<b class=BOLD><b class=HIG>?</b>  What file should be used for Realtime Database Security Rules?</b>  (database.rules.json) 
<b class="BOLD HIG">✔</b>  Database Rules for tomoyan-app-dev-default-rtdb have been written to database.rules.json.
Future modifications to database.rules.json will update Realtime Database Security Rules when you run
firebase deploy.

<b class=BOLD><b class=HIG>?</b> <b class=BOLD>Select a default Firebase project for this directory:</b> <b class=HIK>(Use arrow keys)</b>
<b class=BOLD><b class=HIC>❯</b></b> <b class=HIC>tomoyan-app-dev (tomoyan-app-dev)</b>

<b class=BOLD>=== Functions Setup</b>
Let's create a new codebase for your functions.
A directory corresponding to the codebase will be created in your project
with sample code pre-configured.

See https://firebase.google.com/docs/functions/organize-functions for
more information on organizing your functions using codebases.

Functions can be deployed with firebase deploy.

<b class=BOLD><b class=HIG>?</b> <b class=BOLD>What language would you like to use to write Cloud Functions?</b> <b class=HIK>(Use arrow keys)</b>
<b class=BOLD><b class=HIC>❯</b></b> <b class=HIC>JavaScript </b>
  TypeScript

<b class=BOLD><b class=HIG>?</b> <b class=BOLD>Do you want to use ESLint to catch probable bugs and enforce style?</b> <b class=HIK>(y/N) </b><b class=HIC>Yes </b>
<b class=BOLD><b class=HIG>✔</b>  Wrote <b class=BOLD>functions/package.json</b>
<b class=BOLD><b class=HIG>✔</b>  Wrote <b class=BOLD>functions/.eslintrc.js</b>
<b class=BOLD><b class=HIG>✔</b>  Wrote <b class=BOLD>functions/index.js</b>
<b class=BOLD><b class=HIG>✔</b>  Wrote <b class=BOLD>functions/.gitignore</b>

<b class=BOLD><b class=HIG>?</b> <b class=BOLD>Do you want to install dependencies with npm now?</b> <b class=HIK>(y/N) </b><b class=HIC>Yes </b>

<b class="WHI BBLK">npm</b> <b class="BLK BYEL">WARN</b> <b class=MAG>EBADENGINE</b> Unsupported engine {
<b class="WHI BBLK">npm</b> <b class="BLK BYEL">WARN</b> <b class=MAG>EBADENGINE</b>   package: undefined,
<b class="WHI BBLK">npm</b> <b class="BLK BYEL">WARN</b> <b class=MAG>EBADENGINE</b>   required: { node: '16' },
<b class="WHI BBLK">npm</b> <b class="BLK BYEL">WARN</b> <b class=MAG>EBADENGINE</b>   current: { node: 'v18.14.0', npm: '9.3.1' }
<b class="WHI BBLK">npm</b> <b class="BLK BYEL">WARN</b> <b class=MAG>EBADENGINE</b> }

added 316 packages, and audited 317 packages in 57s

36 packages are looking for funding
  run `npm fund` for details

2 <b class="BOLD HIR">moderate</b> severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

<b class="BOLD HIC">i</b>  Writing configuration info to <b class=BOLD>firebase.json</b>...
<b class="BOLD HIC">i</b>  Writing project information to <b class=BOLD>.firebaserc</b>...

<b class="BOLD HIG">✔</b>  Firebase initialization complete!
</pre></html></WRAP>
</WRAP>

<WRAP color_term>
<WRAP color_command><html><pre>
<b class=GRN>$</b> <b class=HIY>firebase</b> emulators:start
</pre></html></WRAP>
<WRAP color_result><html><pre>
<div class=BSc><b style="color:#555555;">┌─────────────────────────────────────────────────────────────┐
│ <b class="BOLD HIG" style="font-family: 'HackGen Console NFJ Half'">✔</b>  <b class=BOLD>All emulators ready! It is now safe to connect your app.</b> │
│ <b class="BOLD HIC">i</b>  <b class=WHI>View Emulator UI at</b> <b class="BOLD UND">http://127.0.0.1:4000/</b>               │
└─────────────────────────────────────────────────────────────┘

┌───────────┬────────────────┬─────────────────────────────────┐
│ <b class="BOLD HIR">Emulator</b>  │ <b class="BOLD HIR">Host:Port</b>      │ <b class="BOLD HIR">View in Emulator UI</b>             │
├───────────┼────────────────┼─────────────────────────────────┤
│ <b class=WHI>Functions</b> │ <b class=WHI>127.0.0.1:5000</b> │ <b class="BOLD UND">http://127.0.0.1:4000/functions</b> │
├───────────┼────────────────┼─────────────────────────────────┤
│ <b class=WHI>Firestore</b> │ <b class=WHI>127.0.0.1:8080</b> │ <b class="BOLD UND">http://127.0.0.1:4000/firestore</b> │
└───────────┴────────────────┴─────────────────────────────────┘</b></div>
  <b style="color:#555555;">Emulator Hub running at</b> 127.0.0.1:4400
  <b style="color:#555555;">Other reserved ports:</b> 4500, 9150

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.
 
</pre></html></WRAP>
</WRAP>

===== CodeMirror test 🤔 =====
<WRAP mincode src><code javascript>
<div class="embedCodeMirror">
  <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.12/lib/codemirror.css">
  <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.12/theme/cobalt.css">
  
  <style>
    #dokuwiki__content .embedCodeMirror .CodeMirror * {
      font-family: "HackGen Console NFJ";
      font-size: 10px;
    }
    #dokuwiki__content .embedCodeMirror .CodeMirror {
      height: 200px;
    }
    /*.select-theme .form-control { width: auto; display: inline-block; }*/
  </style>
  
  <script src="/_media/javascript/codemirror/5.65.12/lib/codemirror.js"></script>
  <!-- 言語に応じたjsファイルを読み込む -->
  <script src="/_media/javascript/codemirror/5.65.12/mode/javascript/javascript.js"></script>
  
  <script>
    'use strict';
    window.CodeMirror5 = CodeMirror; // 5.65.12 を保持
    // DOMContentLoaded 時に実行
    document.addEventListener('DOMContentLoaded', () => {
      var jsEditor = CodeMirror5.fromTextArea(document.getElementById('embedCodeMirrorText'), {
        mode: "javascript",
        theme: "cobalt",
        lineNumbers: true,
        indentUnit: 4
      }).setSize(null, "auto");
      document.getElementById('lblCdMirrVer').innerText = CodeMirror5.version;

      var input = document.getElementById("select");
      function selectTheme() {
        var theme = input.options[input.selectedIndex].textContent;
        editor.setOption("theme", theme);
        location.hash = "#" + theme;
      }
    });
  </script>
  
  <textarea id="embedCodeMirrorText">
  var jsEditor = CodeMirror.fromTextArea(document.getElementById('embedCodeMirrorText'), {
    mode: "javascript",
    theme: "cobalt",
    lineNumbers: true,
    indentUnit: 4
  }).setSize(null, "auto");
  </textarea>
  <div class="select-theme">
    <!-- <p>Theme: <select onchange="selectTheme()" id="select"></select></p> -->
    <p>CodeMirror Version: <label id="lblCdMirrVer"></label></p>
  </div>
</div>
</code></WRAP>

==== theme: cobalt ====
<html>
<div class="embedCodeMirror">
  <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.12/lib/codemirror.css">
  <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.12/theme/cobalt.css">
  
  <style>
    #dokuwiki__content .embedCodeMirror .CodeMirror * {
      font-family: "HackGen Console NFJ";
      font-size: 10px;
    }
    #dokuwiki__content .embedCodeMirror .CodeMirror {
      height: 200px;
    }
    /*.select-theme .form-control { width: auto; display: inline-block; }*/
  </style>
  
  <script src="/_media/javascript/codemirror/5.65.12/lib/codemirror.js"></script>
  <!-- 言語に応じたjsファイルを読み込む -->
  <script src="/_media/javascript/codemirror/5.65.12/mode/javascript/javascript.js"></script>
  
  <script>
    'use strict';
    window.CodeMirror5 = CodeMirror; // 5.65.12 を保持
    // DOMContentLoaded 時に実行
    document.addEventListener('DOMContentLoaded', () => {
      var jsEditor = CodeMirror5.fromTextArea(document.getElementById('embedCodeMirrorText'), {
        mode: 'javascript',
        theme: 'cobalt',
        lineNumbers: true,
        indentUnit: 4
      }).setSize(null, 'auto');
      document.getElementById('lblCdMirrVer').innerText = CodeMirror5.version;

      var input = document.getElementById('select');
      function selectTheme() {
        var theme = input.options[input.selectedIndex].textContent;
        editor.setOption("theme", theme);
        location.hash = "#" + theme;
      }
    });
  </script>
  
  <textarea id="embedCodeMirrorText">
  var jsEditor = CodeMirror.fromTextArea(document.getElementById('embedCodeMirrorText'), {
    mode: 'javascript',
    theme: 'cobalt',
    lineNumbers: true,
    indentUnit: 4
  }).setSize(null, 'auto');
  </textarea>
  <div class="select-theme">
    <!-- <p>Theme: <select onchange="selectTheme()" id="select"></select></p> -->
    <p>CodeMirror Version: <label id="lblCdMirrVer"></label></p>
  </div>
</div>

  <!--<script>
    document.querySelector('.wrap_mincode_long.wrap_src pre.code').innerText = document.querySelector('.embedCodeMirror').innerHTML;
  </script>-->
</html>

==== theme: monokai ====
<html>
<div class="embedCodeMirror001">
  <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.12/lib/codemirror.css">
  <link rel="stylesheet" href="/_media/javascript/codemirror/5.65.12/theme/monokai.css">
  
  <style>
    #dokuwiki__content .embedCodeMirror001 .CodeMirror * {
      font-family: "HackGen Console NFJ";
      font-size: 10px;
    }
    #dokuwiki__content .embedCodeMirror001 .CodeMirror {
      height: 200px;
    }
    /*.select-theme .form-control { width: auto; display: inline-block; }*/
  </style>
  
  <script src="/_media/javascript/codemirror/5.65.12/lib/codemirror.js"></script>
  <!-- 言語に応じたjsファイルを読み込む -->
  <script src="/_media/javascript/codemirror/5.65.12/mode/javascript/javascript.js"></script>
  
  <script>
    'use strict';
    window.CodeMirror5 = CodeMirror; // 5.65.12 を保持
    // DOMContentLoaded 時に実行
    document.addEventListener('DOMContentLoaded', () => {
      var jsEditor = CodeMirror5.fromTextArea(document.getElementById('embedCodeMirrorText001'), {
        mode: 'javascript',
        theme: 'monokai',
        lineNumbers: true,
        indentUnit: 4
      }).setSize(null, 'auto');
      document.getElementById('lblCdMirrVer001').innerText = CodeMirror5.version;

      var input = document.getElementById('select');
      function selectTheme() {
        var theme = input.options[input.selectedIndex].textContent;
        editor.setOption("theme", theme);
        location.hash = "#" + theme;
      }
    });
  </script>
  
  <textarea id="embedCodeMirrorText001">
  var jsEditor = CodeMirror.fromTextArea(document.getElementById('embedCodeMirrorText001'), {
    mode: 'javascript',
    theme: 'monokai',
    lineNumbers: true,
    indentUnit: 4
  }).setSize(null, 'auto');
  </textarea>
  <div class="select-theme">
    <!-- <p>Theme: <select onchange="selectTheme()" id="select"></select></p> -->
    <p>CodeMirror Version: <label id="lblCdMirrVer001"></label></p>
  </div>
</div>

  <!--<script>
    document.querySelector('.wrap_mincode_long.wrap_src pre.code').innerText = document.querySelector('.embedCodeMirror').innerHTML;
  </script>-->
</html>

===== 均等文字幅フォント test 🤔 =====
<WRAP color_mincode_long><code cobol main.cbl>
000001*  プログラム名  はるおわ〜るど🤤
000002*  プログラムID  HARUO-WORLD01
000003*  バージョン    0.0.1
000004*  作成日        作成者
000005*  2022/09/01    Tomoyan
000006*  更新日        更新者    更新概要
000007*  YYYY/MM/DD    XXXXXXXX  XXXXXXXXXX
000008
000009 IDENTIFICATION                   DIVISION.
000010   PROGRAM-ID.                    HARUO-WORLD01.
000011 ENVIRONMENT                      DIVISION.
000012   CONFIGURATION                  SECTION.
000013   INPUT-OUTPUT                   SECTION.
000014 DATA                             DIVISION.
000015   FILE                           SECTION.
000016   WORKING-STORAGE                SECTION.
000017     01 OUTPUT-MESSAGE            PIC X(30).
000018     01 RND                       PIC 99V9(3).
000019*    Unicode 内部表現 UTF-16 1文字 4Byte🤔
000020     01 EMOJI                     PIC X(44)
000021       VALUE "✔😅😊🤔🤤😁😃👅👅👅😍😱".
000022     01 WK-INDEX                  PIC 9(2).
000023     01 CUR-DATE                  PIC X(21).
000024 PROCEDURE                        DIVISION.
000025   MAIN.
000026     MOVE "Welcome to Haruo World!" TO OUTPUT-MESSAGE.
000027     
000028     DISPLAY EMOJI UPON CONSOLE
000029     PERFORM VARYING WK-INDEX FROM 1 BY 1 UNTIL WK-INDEX > 11
000030       PERFORM SHOW-RND-MESSAGE
000031     END-PERFORM.
000032
000033     STOP RUN.
000034
000035   SHOW-RND-MESSAGE               SECTION.
000036     MOVE FUNCTION CURRENT-DATE TO CUR-DATE
000037     COMPUTE RND = FUNCTION RANDOM(
000038                     RND + FUNCTION NUMVAL(
000039                             CUR-DATE(15:2))) * 10 + 1
000040     DISPLAY
000041*       CUR-DATE(15:2)" ["RND"] "
000042       "["WK-INDEX"] " FUNCTION TRIM(OUTPUT-MESSAGE)
000043         EMOJI(4 * (RND - 1) + 1:4) UPON CONSOLE
000044     END-DISPLAY
000045     EXIT.
</code></WRAP>

===== スクリーン test 🤔 =====
<WRAP color_term>
<WRAP color_command><html><pre>
<b class=GRN>$</b> <b class=HIY>sudo</b> dietpi-drive_manager
</pre></html></WRAP>
<WRAP color_result_long><html><pre>
<b class=BoHIK>[ <b class=WHI>INFO</b> ] DietPi-Drive_Manager | Detecting drives, please wait...
[ <b class=WHI>INFO</b> ] DietPi-Drive_Manager |  - Detected mounted physical drive: /dev/mmcblk0p2 > /
[ <b class=WHI>INFO</b> ] DietPi-Drive_Manager |  - Detected mounted physical drive: /dev/mmcblk0p1 > /boot
[ <b class=WHI>INFO</b> ] DietPi-Drive_Manager |  - Detected unmounted drive: /dev/zram0
[ <b class=GRN> OK </b> ] DietPi-Drive_Manager | <b class=WHI>mv .fstab /etc/fstab</b>
[ <b class=GRN> OK </b> ] DietPi-Drive_Manager | <b class=WHI>systemctl daemon-reload</b>
[ <b class=WHI>INFO</b> ] DietPi-Drive_Manager | Checking for required APT packages: e2fsprogs
[ <b class=GRN> OK </b> ] DietPi-Drive_Manager | <b class=WHI>sync</b></b>
---
<div class=BScBLU>RPi Zero W (armv6l) | IP: 192.168.1.201








<div class=BScHGRY><b class="Bo"><b class="GRY">┌───────────────────────────────────────────────┤ <b class=ScRED>DietPi-Drive_Manager</b> ├───────────────────────────────────────────────┐
│ <b class=BLK>Please select a drive to see available options.</b>                                                                      │
│  <b class=BLK>- User data location: RootFS (/mnt/dietpi_userdata)</b>                                                                 │
│                                                                                                                      │
│                                                  ●─ mmcblk0 ───────────────────────────────────────────────          │
│        <b class=BScRED><b class=ScHGRY>/                                         : /dev/mmcblk0p2 | ext4 | Capacity: 1.7G | Used: 1.5G (90%) </b></b>        │
│        /boot                                     : /dev/mmcblk0p1 | vfat | Capacity: 126M | Used: 50.7M (40%)        │
│                                                  ●─ zram0 ────────────────────────────────────────────────           │
│        /mnt/75eebb29-af8d-49e5-9973-ad5d342df36c : /dev/zram0 | swap | Not mounted                                   │
│                                                  ●─ Global Options ─────────────────────────────────────────●        │
│        Idle Spindown                             : Set a global idle duration, before drives power down              │
│                                                  ●─ Add / Refresh Drives ───────────────────────────────────●        │
│        Add network drive                         : Select to mount networked drives                                  │
│        Refresh                                   : Scan for recently added/removed drives                            │
│                                                                                                                      │
│                                                                                                                      │
│                                  &lt;Ok>                                      &lt;Exit>                                    │
│                                                                                                                      │
└──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘</b></b></div>







</div>
---
<div class=BScBLU>RPi Zero W (armv6l) | IP: 192.168.1.201





<div class=BScHGRY><b class="Bo"><b class="GRY">┌───────────────────────────────────────────────┤ <b class=ScRED>DietPi-Drive_Manager</b> ├───────────────────────────────────────────────┐
│ Mount target: /                                                                                                      │
│ Mount source: /dev/mmcblk0p2                                                                                         │
│ Filesystem:   ext4                                                                                                   │
│ UUID:         14fcf30d-e3ea-40e7-be42-2304f593b40e                                                                   │
│ Allocation:   Capacity: 1.7GiB | Used: 1.5GiB (90%)                                                                  │
│ Status:       Drive is online and ready for use                                                                      │
│ Read only:    Disabled                                                                                               │
│                                                                                                                      │
│                                     ●─ Benchmark Options ─────────────────────────────────────●                      │
│                     Benchmark       : Test read and write speeds                                                     │
│                                     ●─ Userdata & Swap options ───────────────────────────────●                      │
│                     User data       : [X] | DietPi user data is currently located on this drive                      │
│                     Swap file       : [ ] | Select to transfer swapfile to this drive                                │
│                                     ●─ Advanced options ──────────────────────────────────────●                      │
│                     Read Only       : [ ] | Select to toggle RW/RO modes                                             │
│                     Reserved blocks : [79 MiB] | Space reserved for root user                                        │
│                     Check & Repair  : Check and optionally repair filesystem                                         │
│                     <b class=BScRED><b class=ScHGRY>Resize          : Maximize the available filesystem size                   </b></b>                      │
│                     I/O Scheduler   : [mq-deadline]                                                                  │
│                                                                                                                      │
│                                                                                                                      │
│                                  &lt;Ok>                                      &lt;Back>                                    │
│                                                                                                                      │
└──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘</b></b></div>





</div>
---
<b class=BoHIK>[ <b class=GRN> OK </b> ] DietPi-Drive_Manager | <b class=WHI>systemctl enable dietpi-fs_partition_resize</b></b>
---
<div class=BScBLU>RPi Zero W (armv6l) | IP: 192.168.1.201













<div class=BScHGRY><b class="Bo"><b class="GRY">┌───────────────────────────────────────────────┤ <b class=ScRED>DietPi-Drive_Manager</b> ├───────────────────────────────────────────────┐
│                                                                                                                      │
│ RootFS resize will occur on next reboot.                                                                             │
│                                                                                                                      │
│ Would you like to reboot the system now?                                                                             │
│                                                                                                                      │
│                                   <b class=BScRED><b class=ScHGRY>&lt;Ok></b></b>                                       &lt;Cancel>                                │
│                                                                                                                      │
└──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘</b></b></div>













</div>
</pre></html></WRAP>
</WRAP>

===== 顔文字 =====
<html>
<span style="font-size: 500px">🤐</span>
<span style="font-size: 500px">😷</span>
</html>

===== 参考文献 =====
[[git>GeSHi|Generic Syntax Highlighter]] (GeSHi)\\
[[https://www.color-sample.com/colors/101050/|#101050の色見本 - color-sample.com]]\\
[[so>questions/7073396/disable-zoom-on-input-focus-in-android-webpage|javascript - Disable zoom on input focus in Android webpage - Stack Overflow]]\\

==== 付録 ====
[[tw>tomoyan596sp/status/1641904227625885707|この配色は原理を知っててそうしたのか、経験から最適化してそうしたのか、とても気になる部分ですけど、色の違いによる記憶の話をもう一度見直してみよう👀🤔]]\\
[[tw>tomoyan596sp/status/1644345432678752257|信号機🚥は何故みどりを青と言ってるのかも、なんとなく想像が付く🤔赤❤緑💚黄💛青💙、この順番に視覚的記憶に重要な優先度で作用してるからです🤔信号機🚥は緑である必要があります😅]]\\