githubのworkflowsを

2024.03.05

Logging

おはようございます、個人用に初めてgithubのAction用のymlを作ったって話です。githubで個人でactionを使う場合、公開設定、非公開設定ともに使えるようですね、使えないみたいな記述の記事を見かけましたが…。因みに静的解析ツールは導入していません。PHPStanみたいなものは導入していません。仕事では静的解析ツールも導入していますが個人で今回のように雛🐣レベルの開発には必要ないかなって。後々、追加するかもしれませんが?

black flat screen computer monitor
Photo by Markus Winkler on Pexels.com

自分が作ったYmlファイルはこちらでも公開しときますね。actionが成功するまでにかなりの失敗(エラー)を繰り返しましたところが(泣)ですね~。一回では上手く動作してくれず試行錯誤しました良い学びにはなりましたが👍。

name: testing

on:
  push:
    branches: [ "main" ]
  pull_request:
    branches: [ "main" ]
defaults:
  run:
    working-directory: ./turi-map-app
jobs:
  laravel-test:
    runs-on: ubuntu-latest
    services:
      mysql:
        image: mysql:5.7
        ports:
          - 3306:3306
        env:
          MYSQL_ROOT_PASSWORD: turi
          MYSQL_DATABASE: turi
          MYSQL_USER: turi
          MYSQL_PASSWORD: turi
          MYSQL_ALLOW_EMPTY_PASSWORD: 'yes'
        options: --health-cmd "mysqladmin ping -h 127.0.0.1" --health-interval 20s --health-timeout 10s --health-retries 10
    strategy:
      matrix:
        node-version: [21.x]
    steps:
    - uses: shivammathur/setup-php@15c43e89cdef867065b0213be354c2841860869e
      with:
        php-version: '8.2'
        extensions: mbstring, dom, fileinfo, pdo_mysql, PDO, zip
    - uses: actions/checkout@v4
    - name: Copy .env
      run: php -r "file_exists('.env') || copy('.env.testing', '.env');"
    - name: Install Dependencies
      run: composer install -n --prefer-dist
    - name: Generate key
      run: php artisan key:generate
    - name: storage link
      run: php artisan storage:link
    - name: Directory Permissions
      run: chmod -R 777 storage bootstrap/cache
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v4
      with:
        node-version: ${{ matrix.node-version }}
    - name: npm install
      run: npm i
    - name: Build Assets
      run: npm run build
    - name: migrate
      run: php artisan migrate
    - name: Execute tests (Unit and Feature tests) via PHPUnit
      run: php artisan test

明日へ続く。

タグ

actions, chmod, defaults, dom, env, extensions, generate, health-cmd, health-timeout, matrix, migrate, MYSQL, password, PDO, ports, services, steps, strategy, Testing, working-directory,

ページ無限スクロールの作り方 #インフィニティ#InfinityPageScroll #JavaScript

2022.09.22

Logging

おはようございます、台風14号が過ぎ去ってからいきなり秋模様ですね🫠。

さて、先日ツイートしたページ無限ループが出来るJavaScriptコードを書きました。これを作ろうと思ったキッカケは、自分が運営しているWordPressサイトに巷のページ無限スクロールプラグインが尽く(ことごとく)使用出来なかったので自分で自作した訳です。因みにページ無限スクロールプラグインとはページを送りをしなくてもページの最下までスクロールすると次頁を読み込んでくれるプラグインの事を指します。

下記のコードは自サイト専用なのでそのまま使用することは出来ませんが、重要な部分だけ抜き取って再利用すれば、独自のページ無限ループに対応することは可能かと思います。

コードを読んで頂ければ分かることですが、重要なポイントはページを読み込む方法とそれをDomに変換する方法だと思います。まず、ページを読み込む方法は下記のファンクションで可能です。

fetch(next_url).then(
                response => response.text()
            ).then(data => {

そしてDomに置き換えている所はこの部分になります。これら2つの箇所が重要になります。

                const parser = new DOMParser();
                const doc = parser.parseFromString(data, 'text/html');

これらの事に注意して独自コードを書いてみてください。最後に全コードを記載しときます。


let cnt = 2;
let blk = 0;
async function nextpage() {
    if (cnt !== blk) {
        blk = cnt;
        await (async () => {
            let next_url = "https://fox-black.com/blog/page/" + cnt;
            return await fetch(next_url).then(
                response => response.text()
            ).then(data => {
                const parser = new DOMParser();
                const doc = parser.parseFromString(data, 'text/html');
                let blogs = doc.querySelectorAll('.blogpage');
                cnt++;
                if (blogs[0].innerHTML !== undefined) {
                    document.querySelector(".foxpage").insertAdjacentHTML("beforeend", (function (elm) {
                        let str = "";
                        for (const key in elm) {
                            const element = elm[key];
                            if (element.innerHTML !== undefined) {
                                str += "<div class=\"blogpage\">" + element.innerHTML + "</div>";
                            }
                        }
                        return str;
                    })(blogs));
                } else {
                    if (document.querySelector("#fin") === null) {
                        document.querySelector(".foxpage").insertAdjacentHTML("beforeend", "<div id=\"fin\"></div>");
                    }
                }
            }).catch(error => {
                if (document.querySelector("#fin") === null) {
                    document.querySelector(".foxpage").insertAdjacentHTML("beforeend", "<div id=\"fin\"></div>");
                }
            });
        })();
    }
}

if (navigator.userAgent.match(/iPhone|Android.+Mobile/)) {
    window.addEventListener("scroll", async function () {
        let s = (() => {
            let tgt;
            if ('scrollingElement' in document) {
                tgt = document.scrollingElement;
            } else if (this.browser.isWebKit) {
                tgt = document.body;
            } else {
                tgt = document.documentElement;
            }
            return tgt;
        })();
        if (document.querySelector("#fin") === null && s.scrollTop >= (s.clientHeight - 650)) {
            await nextpage();
        }
    });
} else {
    document.querySelector(".foxpage").addEventListener("scroll", async function () {
        if (document.querySelector("#fin") === null && document.querySelector(".foxpage").scrollTop >= (document.querySelector(".foxpage").scrollHeight - 300)) {
            await nextpage();
        }
    });
}


タグ

14, dom, InfinityPageScroll, javascript, WordPress, インフィニティ, キッカケ, コード, こと, これ, サイト, スクロール, それ, ツイート, プラグイン, ページ, ポイント, ループ, 下記, , 作り方, 使用, 先日, 利用, 可能, 台風, 変換, 対応, 専用, , 方法, 最下, 模様, 次頁, 無限, , , 自作, 自分, , 運営, 部分, 重要,

WEBスクレイピングで日経平均株価の値を取得するPHPプログラム

2021.05.26

Logging

WEBスクレイピング日経平均株価の値を取得するPHPプログラムです。下記のようなブログラムを応用してクラウドワークスなどの案件(データ取得の案件)を自分は請け負っています。現在のWEBスクレイピングの相場は1-5万円ぐらいです。PHP言語ではJSがOFFの状態をスクレイピングするのでJS(java script)が動作して表示されているものは取得できないのが難点です。そのような場合はPhantomJSを使用すると良いらしいですが、こちら開発が終了しているライブラリになります。

WEBスクレイピングで日経平均株価の値を取得するPHPプログラム

大手の企業はJSがOFFの状態でも表示できるように設計されている事が多いので大体のデータは取得可能です、例外として大手のショッピングサイト(ECサイト)では、JSをゴリゴリと使用している場合もあるのでスクレイピングする前にブラウザで見栄えの検証(java script OFFの状態)することをオススメします。

<?php
	//WEBスクレイピング
	$url = "https://stocks.finance.yahoo.co.jp/stocks/detail/?code=998407.O";
	$html = file_get_contents($url);
	$dom = new DOMDocument();
	$html = mb_convert_encoding($html, "HTML-ENTITIES", 'UTF-8');
	@$dom->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
	$xpath = new DOMXPath($dom);
	print $xpath->query("//*[@id=\"root\"]/main/div/div/div[1]/div[2]/div[1]/div[2]/div[2]/p[2]/span")->item(0)->textContent;

追記:スクレイピング先のコードが変わればデータは取得出来なくなりますので、ソースコードの変更が必要です。

タグ

$dom-&gt, div, dom, gt, gt;textContent, HTML-ENTITIES&quot, item, loadHTML, lt, mb_convert_encoding, NODEFDTD, NOIMPLIED, PhantomJS, php, print, query, quot, quot;root, XPath, プログラム,

ANA積立で決済する方法とiPhoneでウォレット追加する方法。

2019.04.09

Logging


ANA積立航空券で決済する方法ですが、
まずWEBで予約まで行います、次に下記のサイトに
書かれているANA旅行積立プラン専用デスクに電話します。
その後、WEBへログインし支払い期限が延長されている
事を確認します。
サイトにANA航空券(旅行券)を送る住所が記載されているので
封筒にそれらを明記しANA旅行積立プラン専用デスク 行と記入した
うえで、郵便局で簡易書留+追跡サービスで送りましょう。
※送付するときは必ず送付書を入れて送りましょう。
尚、往復の場合、余白に搭乗日時などを明記し上記の内容に
合算することを明記しましょう。
http://www.anas.co.jp/tsumitate/anaticket/use_ticket/dom_desk/index.html
iPhoneでウォレット追加する方法
下記のサイトから手順通り行うとうまく行くはずなのですが、
純正ブラウザ以外の場合、インストールできない場合があります。
なので必ずSafariを使用してウォレット追加しましょう。
https://www.ana.co.jp/ja/jp/serviceinfo/share/passbook/

タグ

ANA, anas, anaticket, co, desk, dom, htmliPhone, http, index, iPhone, jp, Safa, ticket, tsumitate, use, web, www, インストール, うえ, ウォレット, こと, サービス, サイト, それら, デスク, とき, パス, ブラウザ, プラン, ログイン, 上記, 下記, 予約, , 住所, 余白, 内容, 合算, 場合, 封筒, 専用, 延長, 往復, , 手順, 搭乗, 方法, 旅行, 旅行券, 日時, 明記, 期限, 決済, 確認, 積立, 簡易書留, 純正, 航空券, , 記入, 記載, 追加, 追跡, 送付, 郵便局, 電話,