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

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 があるのをポップアップのおかげで知った。
いやいやツールは使ってみるものだ、早速利用しました。

comico

comico アプリを iPhone に入れた。
たしか「ももくり」アニメが始まった直後だったから約2年ぶり。
当事は iPhone 5s だったので「画面ちいさすぎでアカン!」だった。

iPhone 7 の今はド近視+老眼ぎみな筆者でも悪くないと思えるように。
画面はデカくなる一方なのでスマホで漫画はもう全然問題無いのかも。
てか、縦スクロールで読む漫画ってスマホでは本当に最適かも。

いや実は「マンガUP!」等は随分前から入れていたりするんだけーが。
横フリックでページめくりは縦長画面の恩恵が無いって感じ。

そんなこんなで。
Comipoli Web 版はスマホでは自動で comico 型になるようにしたいなと。
特許は無いよな?

とりあえず、スマホやタブレットを見分ける方法を捜さないと。
[JavaScript] ユーザーエージェントを判定し、にクラスを付与する
こんなにアッサリ、Web JavaScript 楽すぎる。

ES6 なら includes が使えるし PC ならプラットホームも得てみたいし。
ということで。

getUserAgent(id) {
    let ua = navigator.userAgent;
    let res = "";
    if (ua.includes("iPhone"))
        res = "iPhone";
    else if (ua.includes("iPad"))
        res = "iPad";
    else if (ua.includes("Android"))
        if (ua.includes("Mobile"))
            res = "Android Smartphone";
        else
            res = "Android Tablet";
    else
        res = navigator.platform; // pc
    document.getElementById(id).innerHTML = `This is a ${res}`;
}

こんな感じに。

ちなみに iPhone, iPad 用 Google Chrome でも iPhone になる。
PC の場合ブラウザ毎に違うので「Linux x86_64」等を表示するオマケ。
window.navigator.platform – Web API インターフェイス | MDN

どうでもいいけどついでに。
navigator のプロパティ一覧なんかは以下で得ることができる。

let ss = "";
for (let s in navigator) ss += `${s}: ${navigator[s]}\n`;
document.getElementById(id).innerHTML = ss;

常識かも。

コレ書いていて JavaScript でも内包表記できればなぁと思ったけど。
配列内包表記 – JavaScript | MDN
SpiderMonkey 限定で以前はできていたのか、知らなかった。
ちなみに Gjs では今でも使えるようです。

ただし for in はできないようだ、結局意味ネェ!