What's New Qiita

20200403のHTMLに関する記事は5件です。

  • 投稿日：2020-04-03T23:34:20+09:00

ももかん様への回答欄につけたかったHTMLコード

try1.html
<!DOCTYPE html>
<html>
<head><title>『項目の順番を保存して取得』（試行錯誤１）</title></head>
<body>
    <div id="app">
        <ul id="hoge">
            <li data-id="1">element 1</li>
            <li data-id="2">element 2</li>
            <li data-id="3">element 3</li>
        </ul>
        <p>get.sortlist1は... {{ sortlist1 }}</p>
        <p>set.sortlist2は... {{ sortlist2 }}</p>
    </div>
<!--
順番を保存するには、HTMLのdata-idで設定している順番を、storeのsetでlocalStorageに保存します。
保存した順番を取得するには、storeのgetを用い、getしたものをreturnさせてあげることで、リロードする前の項目順で表示されます。
-->
    <script src="./Sortable.js"></script>
    <script src="./vue.js"></script>
    <script>
        var app = new Vue
        (
            {
                el: "#app",
                data:
                {
                    sortlist1 : "",
                    sortlist2 : "",
                },
            }
        );

        Sortable.create
        (
            hoge,
            {
                group: "save",
                store:
                {
                    /**
                     * Get the order of elements. Called once during initialization.
                     * @param   {Sortable}  sortable
                     * @returns {Array}
                     */
                    get: function (sortable)
                    {
                        var order = localStorage.getItem(sortable.options.group.name);
                        //return order ? order.split('|') : [];
                        app.sortlist1=order.split('|');
                    },

                    /**
                     * Save the order of elements. Called onEnd (when the item is dropped).
                     * @param {Sortable}  sortable
                     */
                    set: function (sortable)
                    {
                        var order = sortable.toArray();
                        localStorage.setItem(sortable.options.group.name, order.join('|'));
                        app.sortlist2=order.split('|');
                    }
                },
                onEnd : function ()
                {
                    app.sortlist2=hoge.set();
                },
            }
        );
    </script>
</body>
</html>
try2.html
<!DOCTYPE html>
<html>
<head><title>『項目の順番を保存して取得』（試行錯誤２）</title></head>
<body>
    <div id="app">
        <ul id="hoge">
            <li data-id="1">element 1</li>
            <li data-id="2">element 2</li>
            <li data-id="3">element 3</li>
        </ul>
        <input type="button" value="並び順を取得" v-on:click="putsortable1" /></p>
        <p>get.sortlist1は・・・ {{ sortlist1 }}</p>
    </div>
<!--
順番を保存するには、HTMLのdata-idで設定している順番を、storeのsetでlocalStorageに保存します。
保存した順番を取得するには、storeのgetを用い、getしたものをreturnさせてあげることで、リロードする前の項目順で表示されます。
-->
    <script src="./Sortable.js"></script>
    <script src="./vue.js"></script>
    <script>
        var app = new Vue
        (
            {
                el: "#app",
                data:
                {
                    sortlist1 : "",
                    sortlist2 : "",
                },
                methods :
                {
                    putsortable1 : function (e)
                    {
                        this.sortlist = sortable4.toArray().join(',');
                    }
                }


            }
        );

        Sortable.create
        (
            hoge,
            {
                group: "save",
                store:
                {
                    /**
                     * Get the order of elements. Called once during initialization.
                     * @param   {Sortable}  sortable
                     * @returns {Array}
                     */
                    get: function (sortable)
                    {
                        var order = localStorage.getItem(sortable.options.group.name);
                        //return order ? order.split('|') : [];
                        app.sortlist1=order.split('|');
                    },

                    /**
                     * Save the order of elements. Called onEnd (when the item is dropped).
                     * @param {Sortable}  sortable
                     */
                    set: function (sortable)
                    {
                        var order = sortable.toArray();
                        localStorage.setItem(sortable.options.group.name, order.join('|'));
                        app.sortlist2=order.split('|');
                    }
                },
            }
        );
    </script>
</body>
</html>
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-03T19:09:43+09:00

ファルコン・パンチの表示順をランダムにする

作成にあたって

友人がpythonを用いてターミナル上動作するこれを作っていたので、僕はhtmlとjs使って作成してみました。
動けばいいだけだったので1つのファイルにまとめて書いています。

コード

index.html
<!doctype html>
<html>
<head>
<title>ファルコン・パンチ</title>

<script type="text/javascript">
    function exchangeText() {
        var text = document.forms.id_form.id_textBox.value.split("");
        target = document.getElementById("output");
        if(exchange(text)){
            target.innerText = exchange(text);
        }else{
            target.innerText = "";
        }
    }
    // 文字の順番を入れ替える
    function exchange(text) {
        for(i=0; i<text.length; i++){
            var rand = Math.floor(Math.random()*text.length);
            var tmp = text[i];
            text[i] = text[rand];
            text[rand] = tmp;
        }
        var output;
        for(i=0; i<text.length; i++){
            if(output){
                output = output + text[i];
            }else{
                output = text[i];
            }
        }
        return output;
    }
</script>
</head>

<body>
    <p><b>ファルコンのうんちぶり</b></p>
    <form name="form" id="id_form" action="">
        <input name="textBox" id="id_textBox" type="text" value="ファルコン・パンチ" />
        <input type="button" value="入れ替え" onclick="exchangeText()" />
    </form>
    <div id="output"></div>

</body>
</html>

おわりに

実務経験が少ないため、どうかけば可読性が向上するのか等コメント頂ければ幸いです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-03T16:43:23+09:00

overflow: scroll; にはじめからスクロールバーを表示させる

要件

高さを指定してスクロールで表示させた時にはじめからスクロールバーが表示されてると「スクロールできるんだな」とわかりやすいので設置したい

ついでにニュース一覧でよくつかうパーツでコーディング:relaxed:

サンプルコード

See the Pen GRJaoBM by naoko kikuchi (@kikuchi) on CodePen.

肝の部分

::-webkit-scrollbar スクロールバー全体
::-webkit-scrollbar-thumb スクロールバーの移動するパーツ部分
::webkit-scrollbar-track-piece:start スクロールバーの背景部分

参考サイト

スクロールバーをデザインする::-webkit-scrollbarに関しての覚え書き

図で解説されてるのでとてもわかり易かったです^^

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-03T13:41:20+09:00

puppeteerでユーザーによるクリックを待つ

ユーザーによるクリックなどのイベントををpuppeteerで待ちたい

闇が深い場面な気はしますがpuppeteerを使ってクリックや入力などのイベントを受け取りたいことがあったとします。

そんな時にイベントを検知するスクリプトに苦戦したので関数として書き残しておきます。Promiseに対してresolveするだけの関数を作りpage.exposeFunctionで関数を公開し、evaluateで公開した関数をaddEventListenerを使って登録します。
半自動でパスワードなどは入力させたい時なんかに使ってください。
引数のmyEventNameは複数回実行する時に被らなければ何でも構いません。

script.js
async function waitEvent(page,myEventName,eventType,elementId){
    return new Promise(async resolve=>{
        await page.exposeFunction(myEventName,()=>{resolve(myEventName);});
        await page.evaluate((elementId,eventType,myEventName)=>{
            document.getElementById(elementId).addEventListener(eventType,()=>{
                eval('window.'+myEventName+'();');
            });
        },elementId,eventType,myEventName);
    });
}

使い方

使用例です。
クリック以外のイベントにも使えます。
要素のイベントでは無い物が欲しければobserve等使えば行けるとは思います。

example.js
var result_input = await waitEvent(page,'myclickEvent','click','buttonId');

jQueryのval()などからの変更はプログラム側から意図的にイベントが発生させない限り反応できないらしい。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む
  • 投稿日：2020-04-03T05:05:32+09:00

初心者によるプログラミング学習ログ 279日目

100日チャレンジの279日目

twitterの100日チャレンジ#タグ、#100DaysOfCode実施中です。
すでに100日超えましたが、継続。
100日チャレンジは、ぱぺまぺの中ではプログラミングに限らず継続学習のために使っています。
279日目は、

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

日付別

タグ一覧