iframeのコンテンツをtextareaにマッピングした話

まえがき

firefoxとchromeでインデックスの番号違うんだな。readyイベントとloadイベントの両方でやってみた。chromeはうまいことできなかったので、firefoxで。

01.html

外部ファイル読み込んでる

コード表示

<html>
  <head>
    <script src="../../lib/jquery-3.4.1.min.js"></script>
  </head>
  <body>
    <iframe id="iframe" src="../sql/01.txt" type="text/plain"></iframe>
    <textarea style="width:100%;height:100%;"></textarea>
    <script type="text/javascript" src="../../js/func/getiframecontent.js"></script>
  </body>
</html>

getiframecontent.js

jqueryで。

コード表示

$(window).on('load',function(){
    var a = $(document.querySelector('iframe')).contents()[0].all[4].innerText;
    console.log(a);
    console.log(Object.prototype.toString.call(a));
    $('textarea').text(a);
    $('iframe').remove();
});

01.txt

読み込んだ奴

コード表示

SELECT
    *
FROM
    (SELECT LEVEL AS rn FROM dual CONNECT BY LEVEL <=10)
MODEL
DIMENSION BY (rn)
MEASURES(
            1 AS val_asc
            ,CAST(NULL AS VARCHAR2(4000)) AS ope_asc
            ,row_number () OVER (ORDER BY rn DESC) AS rnn
            ,MAX(rn) OVER () AS val_desc
            ,CAST(NULL AS VARCHAR(4000)) AS ope_desc
            )
RULES(
        val_asc[rn] ORDER BY rn ASC = nvl(val_asc[cv() - 1],1) * cv(rn)
        ,ope_asc[rn] ORDER BY rn ASC = to_char(nvl(ope_asc[cv() - 1],NULL)) || CASE WHEN to_char(nvl(ope_asc[cv() - 1],NULL)) IS NULL THEN NULL ELSE ' * ' END || to_char(cv(rn))
        ,val_desc[rn] ORDER BY rnn DESC = nvl(val_desc[cv() - 1],1) * rnn[cv()]
        ,ope_desc[rn] ORDER BY rnn DESC = to_char(nvl(ope_desc[cv() - 1],NULL)) || CASE WHEN to_char(nvl(ope_desc[cv() - 1],NULL)) IS NULL THEN NULL ELSE ' * ' END || to_char(rnn[cv()])
        )
ORDER BY rn
;

実行例

できた。firefoxかっこいい。。

あとがき

web側おもしろいな。たのしい。

htmlの書き方がすごい便利になってて感動した話

まえがき

htmlでひさしぶりにあそぼうとして、いろいろ調べていたら、書き方がこんなに便利になっていたんだ。。と驚き、めもしておこうかなとおもいました。仕事では微塵もhtmlとかは書いていないですが。。ブラウザはChromeで。

参考文献

index.html  
fancy-button.js  
app.js  
Web Componentsについて気になること、泉水さんに全部聞いてきました!  
Custom Elements  
HTML Imports - Web Components を構成する技術  
私がscriptタグについて知っていること全て : 知られていない属性や実行順序など 【続】Web標準だけでHTMLを部品化するWeb Componentsを試してみる  
Shadow DOM v1: 自己完結型ウェブ コンポーネント  

ホスト側フォルダ構成

bkは最初やろうとしていたやつ。bk以外が今回ぉぉぉとなったやつ。

コード表示

[oracle@centos weban]$ pwd
/home/oracle/weban
[oracle@centos weban]$ tree
.
├── Dockerfile
├── kick.sh
└── src
    ├── bk
    │   ├── compose.html
    │   ├── footer.html
    │   ├── header.html
    │   └── js
    │       ├── footer.js
    │       └── header.js
    ├── compose2.html
    └── js
        ├── define_component_tag.js
        ├── footer2.js
        └── header2.js

4 directories, 11 files

コンテナ側フォルダ構成

bkは最初やろうとしていたやつ。bk以外が今回ぉぉぉとなったやつ。

コード表示

[oracle@centos weban]$ docker exec -it apa /bin/bash
[root@cffae1e0f9eb /]# cd /var/www/html
[root@cffae1e0f9eb html]# pwd
/var/www/html
[root@cffae1e0f9eb html]# tree
.
|-- bk
|   |-- compose.html
|   |-- footer.html
|   |-- header.html
|   `-- js
|       |-- footer.js
|       `-- header.js
|-- compose2.html
`-- js
    |-- define_component_tag.js
    |-- footer2.js
    `-- header2.js

3 directories, 9 files

Dockerfile

コード表示

[oracle@centos weban]$ cat D*
FROM centos:latest

RUN yum install -y httpd \ 
yum install -y iputils \
yum install -y net-tools \
yum install -y iproute \
yum install -y vim \
yum install -y tree \
yum install -y lsof \
yum install -y traceroute

EXPOSE 80
CMD ["/sbin/init"]

kick.sh

コード表示

[oracle@centos weban]$ cat k*
#!/bin/bash

WK_PATH=$0
EXE_PATH=$(pwd)${WK_PATH#.}
IMAGE_NAME=$1

if [ -z "${IMAGE_NAME}" ]; then
cat <<EOF
_________________________________________________________________________________
please enter build image name.

EOF
  exit 1
fi

echo "Building image '${IMAGE_NAME}' ..."

BUILD_START=$(date '+%s')
( cd ${EXE_PATH%/*};docker build --force-rm=true --no-cache=true -t ${IMAGE_NAME} -f Dockerfile . || {
  echo 'there was an error building the image.'
  exit 1
} )
BUILD_END=$(date '+%s')
BUILD_ELAPSED=$((${BUILD_END}-${BUILD_START}))

echo ''

if [ $? -eq 0 ]; then
cat <<EOF
_________________________________________________________________________________

-->${IMAGE_NAME} was built

Build completed in ${BUILD_ELAPSED} seconds.

EOF

else
  echo 'docker image was NOT successfully created'
fi

httpdサービス起動

コード表示

[oracle@centos weban]$ docker images
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE
apache/httpd        latest              c6496579c5db        5 hours ago         389MB
[oracle@centos weban]$ docker run -v /home/oracle/weban/src:/var/www/html -p 8080:80 --privileged -it --name apa -d apache/httpd
[oracle@centos weban]$ docker ps -a
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                  NAMES
cffae1e0f9eb        apache/httpd        "/sbin/init"        5 hours ago         Up 5 hours          0.0.0.0:8080->80/tcp   apa
[oracle@centos weban]$ docker exec -it apa /bin/bash
[root@cffae1e0f9eb /]# systemctl start httpd
[root@cffae1e0f9eb /]# systemctl status httpd
● httpd.service - The Apache HTTP Server
   Loaded: loaded (/usr/lib/systemd/system/httpd.service; disabled; vendor preset: disabled)
   Active: active (running) since Fri 2019-05-17 07:56:50 UTC; 4h 36min ago
     Docs: man:httpd(8)
           man:apachectl(8)
 Main PID: 2617 (httpd)
   Status: "Total requests: 232; Current requests/sec: 0; Current traffic:   0 B/sec"
   CGroup: /docker/cffae1e0f9ebbecb6cb05e853cb3c17515ff4a805dd8b8ead996f87fcb37beff/system.slice/httpd.service
           ├─2617 /usr/sbin/httpd -DFOREGROUND
           ├─2618 /usr/sbin/httpd -DFOREGROUND
           ├─2619 /usr/sbin/httpd -DFOREGROUND
           ├─2620 /usr/sbin/httpd -DFOREGROUND
           ├─2621 /usr/sbin/httpd -DFOREGROUND
           ├─2622 /usr/sbin/httpd -DFOREGROUND
           ├─2624 /usr/sbin/httpd -DFOREGROUND
           ├─2625 /usr/sbin/httpd -DFOREGROUND
           ├─2626 /usr/sbin/httpd -DFOREGROUND
           └─2988 /usr/sbin/httpd -DFOREGROUND
           ‣ 2617 /usr/sbin/httpd -DFOREGROUND

May 17 07:56:50 cffae1e0f9eb systemd[1]: Starting The Apache HTTP Server...
May 17 07:56:50 cffae1e0f9eb httpd[2617]: AH00558: httpd: Could not reliably determine the server's fully qualified domain name, using 172.17.0.2. Set the 'ServerName' directive globally to suppress this message
May 17 07:56:50 cffae1e0f9eb systemd[1]: Started The Apache HTTP Server.
Hint: Some lines were ellipsized, use -l to show in full.

bk/compose.html

コード表示

[root@cffae1e0f9eb html]# cat $(find ./bk -name "c*")
<html>
  <head>
    <link rel="import" href="./header.html">
    <link rel="import" href="./footer.html">
  </head>
  <body>
    <div id="header"></div>
    <div id="content">
      <div>main</div>
      <div>side</div>
    </div>
    <div id="footer"></div>
    <script type="text/javascript" src="./js/header.js"></script>
    <script type="text/javascript" src="./js/footer.js"></script>
  </body>
</html>

bk/header.html

コード表示

[root@cffae1e0f9eb html]# cat $(find ./bk -name "h*")
<template>
  <div>
    <h1>header</h1> 
  </div>
</template>

bk/footer.html

コード表示

[root@cffae1e0f9eb html]# cat $(find ./bk -name "h*")
<template>
  <div>
    <h1>header</h1> 
  </div>
</template>

bk/js/header.js

コード表示

[root@cffae1e0f9eb html]# cat $(find ./js/bk -name "h*")
var link = document.querySelector('link[rel="import"]');
var template = link.import.querySelector('template');
var clone = document.importNode(template.content, true);
document.querySelector('#header').appendChild(clone);

bk/js/footer.js

コード表示

[root@cffae1e0f9eb html]# cat $(find ./js/bk -name "f*")
var link = document.querySelector('link[rel="import"]');
var template = link.import.querySelector('template');
var clone = document.importNode(template.content, true);
document.querySelector('#footer').appendChild(clone);

http://192.168.1.109:8080/bk/compose.html

compose2.html

コード表示

[root@cffae1e0f9eb html]# cat $(find ./ -maxdepth 1 -name "c*")
<html>
  <body>
    <header-custom></header-custom>
    <div id="content">
      <div>main</div>
      <div>side</div>
    </div>
    <footer-custom></footer-custom>
  <script type="module" src="./js/define_component_tag.js"></script>
  </body>
</html>

js/header2.js

コード表示

[root@cffae1e0f9eb html]# cat $(find ./js -name "h*")
export default class Header extends HTMLElement {
  static get template() {
    return `
      <div>
        <h1>header</h1>
      </div>
    `;
  }

  constructor() {
    super();
  }

  connectedCallback() {
    this.attachShadow({
      mode: 'open'
    }).innerHTML = Header.template;
  }
};

js/footer2.js

コード表示

[root@cffae1e0f9eb html]# cat $(find ./js -name "f*")
export default class Footer extends HTMLElement {
  static get template() {
    return `
      <div>
        <h1>footer</h1>
      </div> 
    `;
  }
  
  constructor() {
    super();
  }
  
  connectedCallback(){
    this.attachShadow({
      mode: 'open'
    }).innerHTML = Footer.template;
  }
};

js/define_component_tag.js

コード表示

[root@cffae1e0f9eb html]# cat $(find ./js -name "d*")
import Header from './header2.js';
import Footer from './footer2.js';
customElements.define('header-custom', Header);
customElements.define('footer-custom', Footer);

http://192.168.1.109:8080/compose2.html

あとがき

たのしくなってきた!!!自作タグできるすごい便利。新しいことに飛び込んでみるもんだなー。

追記

slotタグつかうとかなり便利。関数になった!!!

フォルダ構成

コード表示

[oracle@centos weban]$ tree
.
├── Dockerfile
├── kick.sh
└── src
    ├── compose.html
    └── js
        ├── define_component_tag.js
        ├── footer.js
        └── header.js

2 directories, 6 files

src/compose.html

コード表示

[oracle@centos weban]$ cat $(find . -name "c*")
<html>
  <body>
    <header-custom>hoge</header-custom>
    <div id="content">
      <div>main</div>
      <div>side</div>
    </div>
    <footer-custom>toge</footer-custom>
  <script type="module" src="./js/define_component_tag.js"></script>
  </body>
</html>

src/js/header.js

コード表示

[oracle@centos weban]$ cat $(find . -name "h*")
export default class Header extends HTMLElement {
  static get template() {
    return `
      <div>
        <h1><slot></slot></h1>
      </div>
    `;
  }

  constructor() {
    super();
  }

  connectedCallback() {
    this.attachShadow({
      mode: 'open'
    }).innerHTML = Header.template;
  }
};

src/js/footer.js

コード表示

[oracle@centos weban]$ cat $(find . -name "f*")
export default class Footer extends HTMLElement {
  static get template() {
    return `
      <div>
        <h1><slot></slot></h1>
      </div>
    `;
  }

  constructor() {
    super();
  }

  connectedCallback() {
    this.attachShadow({
      mode: 'open'
    }).innerHTML = Footer.template;
  }
};

http://192.168.1.109:8080/compose.html

テーブルレイアウト 列ヘッダ固定 行ヘッダ固定

EXCEL LIKEに作りたいテーブルを!いろいろ調べたので、結果をメモ。
列ヘッダ固定の際に左隣のth,tdの幅分width指定しないといい感じにできないのが、めんどい。クラス指定したタグの直前までのタグ幅を動的に取得できるコードがほしい。今回の例だと.stickky-header-col2に指定しているleft: 120px;の部分かな。ここが指定したタグの直前分まで漸化的に取得できれば、楽。

See the Pen
sample
by brunohigashi (@brunohigashi)
on CodePen.

wordpressだとposition:stickyできないぽいから、列ヘッダは実現できず。。