Web Applicaation」カテゴリーアーカイブ

HTTP 301

新サーバー移行で実は結構問題があった。
解決までの無駄な過程を書いてもしょーがないので結果だけ。

このブログ (WordPress) の RSS が取得できなくなっていた。
どうやらパーマリンクの設定を変更したのがいけなかったようで。

WordPressでRSS配信がされないのは、head内にRSSのURL指定が正しくされていないのでは? | 便利なデジタル生活

マジでこれだった、archive 付きの URL に変更。
それだけで WordPressのURL/feed/ にて普通に取得できるように戻った。
元に戻しただけで進歩は何も無いんですけどね。

まて、本サイトにて RSS の内容を表示していた所が空っぽのままだ。
RSS に直接アクセスは普通に読み込めるようになったのに何故だ?

既存のソースを殆ど変えずにfile_get_contents()をcURLにする │ Webty Staff Blog

RSS 取得はネットでよく見かけるこのコードを使っていたんですけど。
ローカルで色々試すと HTTP Status 301 が戻っていた。
http://localhost で試すとゼロしか戻らないので PHP コードのみでやって。

PHPのcurlやfile_get_contentsでリダイレクトに対応する方法

解説感謝、そういうことかリダイレクトなのか。
移行前のサーバーでは問題なく取得できていたけど同じじゃないのね。

<?php
// localhost(192.168.***.***) や macOSname.local では読み込まない
if ($hostname == "localhost" or preg_match("/^192/", $hostname) or strpos($hostname, ".local") ) {
    echo "RSS";
} else {
    $url = "https://palepoli.skr.jp/wp/feed/";
    // cURL
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_HEADER, 0);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($ch, CURLOPT_TIMEOUT, 60);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);
    // HTTP Status 301 対策
    curl_setopt( $ch, CURLOPT_FOLLOWLOCATION, 1);
    $result = curl_exec( $ch );
    $status = curl_getinfo($ch);
    curl_close( $ch );
    if ($status['http_code'] === 200) {
        $rss = simplexml_load_string($result);
        $i = 0;
        foreach ($rss->channel->item as $item) {
            if( $i++ == 5 ) { break; }
            $link = $item->link;
            $title = $item->title;
            $date = date('Y.m.d', strtotime($item->pubDate));
            $desc = $item->description;
            echo <<< __EOS__
<dt><a href="$link" target="_blank">$title</a>&nbsp;($date)</dt>
<dd>$desc</dd>
__EOS__;
        }
    } else {
        echo "<p>HTTP Status " . $status['http_code'] . "</p>";
    }
}
?>

Status 200 (OK) 時のみ表示させるように変更。

やっと表示できるようになった、長かった。
あれこれ試す過程で PHP を 7=>8 にしたのが原因かと疑ったり。
無駄なコードを散々書いたり、ただの勉強不足でした。

しかしコレについて言及している人少ないね。
Wordpress を使っているだけで自前コードの人って少ないんだろうか。

PHP Imagick

さて PHP をやるといっても言語仕様なんてすぐに理解できる。
筆者はすぐ忘れる人なのでまたチップスページを作る、はいいとして。
PHP で何をやるかだ、とりあえず画像のリサイズだな。

PHPで画像をリサイズしよう!表示・保存方法もわかる | 侍エンジニア塾ブログ(Samurai Blog) – プログラミング入門者向けサイト

GD は定番として Imagick ってココ(さくら)で使えるのかな?
手持ちパソコン内だけで可能なのでは意味がないし。
と思ったけれど、どちらも問題なく使えるようだ。

【さくらのレンタルサーバ】基本仕様 ? さくらのサポート情報

ところで Fedora 自体は PHP をインストールしただけでは両方使えない。
てなわけで dnf する。

sudo dnf install php-gd php-pecl-imagick

httpd を通すのが面倒だからスクリプトで直接試す。
Linux はコレができるから楽なんだよね。

#!/usr/bin/env php

<?php

    // php-gd
    [$width, $hight] = getimagesize('test.jpg');
    $baseImage = imagecreatefromjpeg('test.jpg');
    $image = imagecreatetruecolor(100, 100);
    imagecopyresampled($image, $baseImage, 0, 0, 0, 0, 100, 100, $width, $hight);
    imagejpeg($image , 'out_01.jpg');

    // php-pecl-imagick
    $image2 = new Imagick('test.jpg');
    $image2->thumbnailImage(100, 0); // Segmentation fault...
    $image2->writeImage('out_02.jpg');
    $image2->clear();

?>

Imagick::thumbnailImage でセグメンテーション違反になってしまうヤン。
縮小画像は問題なく作成されるけど。
下記のように起動すればこのエラーは出なくなる、けどソレでいいのか?

env MAGICK_THREAD_LIMIT=1 php test.php

おまけ、cairo も使えるんだね。
PHP: Cairo – Manual
94. PHPからCairoを使う | 日経 xTECH(クロステック)

dnf で見つからないし必要性もあまり感じないので無視するけど。
せっかくなのでリンク先コードを Python3 で書き直ししてみた。
create なんてメソッドは無いのでこんなふうに。

#!/usr/bin/env python3

import cairo

surface = cairo.PDFSurface('sample.pdf', 605.0, 855.0)
cr = cairo.Context(surface)

cr.set_source_rgb (0.0, 0.0, 1.0)

cr.move_to(150, 150)
cr.select_font_face('Monospace', cairo.FONT_SLANT_NORMAL, cairo.FONT_WEIGHT_NORMAL)
cr.set_font_size(72)
cr.show_text('日本語OK!')
cr.show_page()

# 破棄はガベージコレクション

Linux てか GNOME って本当にプログラミングは楽チンだよね。

PHP SELinux

Fedora Tips | Web 開発
なんてページを作ったのだから超久々に PHP をやろうと思う。
だってプログラミングといいながらインストールして設定してハローワールドするだけじゃまるでサルブンツみたいじゃん、やだー。

というか筆者の知識は PHP 5、それも一部分で止まっているままだったりする。
本サイトも全部 PHP だけど 5 でも 7 でも動く標準関数しか使っていないかったり。
fstring(Python3) やアロー関数(js)をガッツリ使っているのにコレじゃいかん。

基本から PHP を勉強やりなおし、いきなり詰まった。
SELinux で。
write.txt には 666 のパーミッションを付けてね。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Write Test</title>
</head>
<body>
<p>
<?php
    file_put_contents("write.txt", "SUZUKI のバイクはカッコイイ<br />\n", FILE_APPEND);
    echo file_get_contents("write.txt");
?>
</p>
</body>
</html>

リロード毎に行が追記されるサンプル。
のはずなのに PHP でファイルへの書き込みできない!

SELinux にブロックされていると気がつくのに時間が掛かった。
ほわいとのホームサーバ:Fedora構築メモ

httpd 経由で書き込みを行う属性を付ける必要があるみたい。
Fedora 30 では以下でイケた。

# chcon -t 属性名 ファイル名
chcon -t httpd_sys_rw_content_t write.txt

しかもこの属性、Gedit で上書きとかすると消えちゃう。
面倒だと思ったと同時にサーバー用途と考えるとなるほどって感じ。
いやいや SELinux の勉強になった。

関係ないけど file_get_contents って GLib の関数と同じジャン!
echo は sh だし、Linux に慣れた人は多分 PHP が楽しい。

flex-box vender prefix

本日やっと HTML5 Test Page の書き換えが終わりました。
やっと古いページの一掃が終わったぞい。
どう書き換えするか散々迷ったけど ES6 で全部動的作成することに。

CSS3 TestPage – L’Isola di Niente

思い付きでヘッダは上部にマウスカーソルを動かすとヒョッコリ出すように。
もちろん comipoli Web 版で使うため、linux 版はフルスクリーンで出しているもん。
やはり同じにしたいじゃないの。

こうやって色々作ってみると本当に今の Web はスタンドアロンなアプリと変わらない。
普通のアプリみたいに作れるのは楽しい、去年までこんなこと考えられなかったのに。
ES6 様々です。

ところで実際に書き換えてみて解ったんだけど。

.flex {
    /*display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;*/
    display: flex;
    flex-wrap: wrap;
    /*-webkit-flex-wrap: wrap;*/
    text-align: left;
    margin: 5px 0px;
}

2018.08 の現在 flex-box は vender prefix はもういらないのね。
根暗用 OS は持っていないので -ms-* は知らないけど、どうでもいいよね!

JavaScript MessageBox

ガンガンONLINE 等で漫画を読み進めると最後に HTML なダイアログが出る。
これと同じようなダイアログを作りたい。

サイズは alert や GtkMessageDialog のように文字列の流さに合わせたい。
閉じるボタンも当然付いている状態で出したい。

CSS で縦横センタリング! 要素を画面中央に『ドン!!』と表示する方法 | phiary

検索で一番上にでてくる有名な手段だけど width, height 指定必須。

console.log(div.style.width);

は空文字だ。

不定な流さの文字列タグの横幅を得る手段が見つからない、困った。
別の手段に頭を切り換える必要がありそうだ。

position:absolute で中央に配置するやり方 | YouKnow.jp
CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ

transform:translate というのがいいみたいだ。
両方 vender prefix が付いているけど 2018.08 な現在はどうなのかな。
早速試してみよう。

messageBox(id) {
    let div = document.createElement("div");
    div.style.backgroundColor = "#EEE";
    div.style.position = "absolute";
    div.style.display = "block";
    div.style.zIndex = "101";
    // Centering
    div.style.left = "50%";
    div.style.top = "50%";
    div.style.transform = "translate(-50%,-50%)";
    // Border
    div.style.border = "1px solid #7c93b2";
    div.style.borderRadius = "3pt";
    div.style.boxShadow = "5px 5px";
    //
    let paragraph = document.createElement("p");
    paragraph.textContent = document.getElementById(id).value;
    paragraph.style.textAlign = "center";
    //
    let close = document.createElement("p");
    close.textContent = "Close";
    close.style.textAlign = "center";
    close.style.backgroundColor = "#CCC";
    close.style.border = "1px solid #7c93b2";
    close.style.borderRadius = "5pt";
    close.addEventListener("click", ()=> {
        div.removeChild(paragraph);
        div.removeChild(close);
        document.body.removeChild(div);
    });
    div.appendChild(paragraph);
    div.appendChild(close);
    document.body.appendChild(div);
}

vender prefix 無しで safari, firefox, google-chrome イケる!
何も問題ない、お試しは以下に。
ES6 Web TestPage – L’Isola di Niente

ところで google-chrome のデベロッパーツールをよく見ると。。。。。

box-shadow なんて style があるのをポップアップのおかげで知った。
いやいやツールは使ってみるものだ、早速利用しました。