CGIとして呼ばれるPythonプログラムをつくって、Cronからも呼び出すようにしました。
Pythonプログラムから、プログラムと同じディレクトリにある別のファイルにアクセスするようにしました。この実行中のプログラムファイルの絶対パスを取得しようと試行錯誤したのですが、結果はダメでした。仕方なくプログラムの絶対パスを定数としてプログラムに埋め込みました。
カレントディレクトリを取得する方法は次のようなものですが、CGIから呼び出されるときはプログラムのあるディレクトリと同じでした。Cronから呼び出すとプログラムとは異なるディレクトリになりました。
import os
カレントディレクトリ = os.getcwd()
または
import os
カレントディレクトリ = os.path.abspath('./')
サーバに乗っけたCSSや.htaccessファイルなどを更新したのに、ブラウザで開いてみると更新されないってことが多々ありませんか？
WindowsならMicrosoft Edgeの設定を変更して、ブラウザを閉じて開きなおせば最新のファイルを再読み込みしてくれるようにできます。
まずMicrosoft Edgeを開きます。
画面右上にある 『・・・』 から『設定』を選び、『プライバシー、検査、サービス』を開きます。
『閲覧データをクリア』欄にある『ブラウザーを閉じるたびにクリアするデータを選択する』を開き、『キャッシュされた画像とファイル』をオンにします。
これでMicrosoft Edgeを開きなおすたびに変更内容が反映されます。
ファイル名が日本語のファイルをFTPでアップロード／ダウンロードすると文字化けします。
ファイル名は英数字にするようお願いします。
HTMLの書き方は人それぞれ多種多様ではないかとおもいます。
しかしながら初めてHTMLを書こうと思い立ったひとは、やることが多すぎて困ってしまうのかなとおもいます。
そんなわけでこんな感じでどうでしょうか？というテンプレートをつくってみました。
<!doctype html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
<meta name=”description” content=”ページの要約”>
<meta name=”keywords” content=”キーワード1,キーワード2″>
<title>ページのタイトル</title>
<link rel=”shortcut icon” href=”./favicon.ico”>
<link rel=”stylesheet” href=”./スタイルシートのファイル名.css”>
<script type=”text/javascript” src=”./スクリプトのファイル名.js”></script>
<meta property=”og:site_name” content=”サイト名”>
<meta property=”og:type” content=”website”>
<meta property=”og:url” content=”サイトのパス”>
<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:domain” content=”サイト名”>
</head>
<body>
<header>
/* ここにページの上部を書く */
</header>
<main>
/* ここにページの本文を書く */
</main>
<footer>
<small>Copyright © 2022 <a href=”著作者のサイトのパス”>著作者名</a></small>
</footer>
</html>
カミュプリィのウェブサイトwww.commuply.co.jpは、wwwなしのcommuply.co.jpでもアクセスできるように、DNSで同じIPアドレスを設定しています。
ウェブサイトはwww付きのhttps://www.commuply.co.jp/ですよ！とご案内してますので、wwwなしでアクセスしてきたときはwww付きへ自動変換しています。
（空欄） A IPアドレス
WWW A IPアドレス参考にしたページはつぎのものです。
【.htaccess】httpからhttpsへリダイレクト、wwwありなし統一、index.html（php）ありなし統一の設定方法＆記述内容の意味
Pythonのプログラムを日本語対応するために次のコードを追加します。
import sys
sys.stdin = open(sys.stdin.fileno(), 'r', encoding='UTF-8')
sys.stdout = open(sys.stdout.fileno(), 'w', encoding='UTF-8')
sys.stderr = open(sys.stderr.fileno(), 'w', encoding='UTF-8')
ページの末尾にCopyrightを記載したサイトを見かけます。ちなみに『©』は『©』と書くことで表示できます。
Copyright © 2022 カミュプリィ (Commuply Inc.)
年が入っているため更新しないでおくと、何年もサイトを更新していないように思われてしまいます。
自動更新できないかなぁと考えました。
htmlのhead部分に使用するジャバスクリプトのファイルを記載します。
<head>
<script type="text/javascript" src="./loadevent.js"></script>
</head>
つぎに、実際に表示される年の数字部分に『currentyear』と名前を付けます。この名前をつけた部分をジャバスクリプトで書き換えます。
<span class="currentyear">2022</span>
『currentyear』を今年へ書き換える関数を書きます。
function updateyear() {
let currentyear = document.getElementsByClassName(‘currentyear’);
for(var i = 0, len = currentyear.length|0; i < len; i = i + 1|0) {
currentyear[i].textContent = (new Date()).getFullYear();
}
}
つぎに、htmlが表示されたときに『updateyear』を呼び出す設定をします。
window.addEventListener('load', updateyear);
カミュプリィのホームページの上部にある『カミュプリィ』は左寄せ、『個人情報保護方針』は右寄せになっています。
<div class="top">
<div class="commuply"><a href="./index.html">カミュプリィ</a></div>
<div class="privacypolicy"><a href="./aboutus/privacypolicy.html">個人情報保護方針</a></div>
</div>.top {
display: flex;
justify-content: space-between;
}
.top div {
margin: 0 1rem; /* 外側の余白: 上下左右*/
list-style: none;
height: 2rem;
line-height: 2rem;
text-align: center; /* 文字の位置: 中央寄せ */
}
.top .commuply {
text-align: left;
}
.top .privacypolicy {
text-align: right;
}
カミュプリィのホームページの上部にある『ホーム』『ウェブ』『維持』『ついて』の４つのタブを等間隔で並べています。
<div class="menu">
<div class="current"><a href="./index.html">ホーム</a></div>
<div><a href="./site-create/index.html">ウェブ</a></div>
<div><a href="./system-keep/index.html">維持</a></div>
<div><a href="./aboutus/index.html">ついて</a></div>
</div>.menu {
display: flex;
justify-content: space-between;
}
.menu div {
list-style: none;
width: 25%;
height: 2rem;
line-height: 2rem;
text-align: center; /* 文字の位置: 中央寄せ */
border: 1px solid white; /* 枠線 */
background-color: #f7b977cc; /* 背景色 */
}
.menu div:hover {
background-color: #f7b97777; /* 背景色 */
}
.menu a {
display: block;
color: black; /* 文字色 */
text-decoration: none;
}
.current a {
border: 2px solid; /* 枠線 */
border-color: black white white black;
background-color: #f7b977ff; /* 背景色 */
}長いリストのうしろのほうを隠しておき、ボタンが押されたら開くようにします。
↓ボタンが押されると展開します。
<div class="cp_box">
<input id="cp01" type="checkbox">
<label for="cp01"></label>
<div class="cp_container">
<p>0000/00/00（日）<br>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす</p>
/* ここに複数行を書く */
<p>0000/00/00（日）<br>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす</p>
</div>
</div>.cp_box label {
z-index: 1;
position: absolute;
bottom: 0;
width: 100%; /* グラデーションの幅 */
height: 6em; /* グラデーションの高さ */
cursor: pointer;
text-align: center; /* ボタン内の文字の位置 */
background: linear-gradient(to bottom, #FFFFFF00 0%, #FFFFFFFF 100%); /* 背景をサイトに合わせる */
}
.cp_box input:checked + label:after {
content: '閉じる'; /* ボタンの名前（開いたとき） */
}
.cp_box label:after {
z-index: 2;
content: '続きをよむ'; /* ボタンの名前（閉じたとき） */
position: absolute;
line-height: 2.5em; /* ボタンの高さ */
bottom: 0;
left: 50%;
width: 16em;
transform: translate(-50%, 0);
letter-spacing: 0.05em;
border-radius: 20px;
color: #FFFFFF; /* ボタンの文字色 */
background: #5AA25A; /* ボタンの背景色 */
}
.cp_box {
position: relative; /* ボタンの位置を内容にあわせる */
}
.cp_box input:checked + label {
background: inherit; /* 開いた時にグラデーションを消す */
}
.cp_box input {
display: none;
}
.cp_box .cp_container {
overflow: hidden; /* 閉じているときに下の部分を隠す */
height: 20em; /* 閉じているときの高さ */
}
.cp_box input:checked ~ .cp_container {
height: auto; /* 開いたり閉じたりするときに高さが変更されるようにする */
padding-bottom: 2.5em; /* 閉じるボタンを下へ調整 */
}
タグのなかにstyle=”設定”と書く方法、<html>の<head>内に<style>～</style>と書く方法、別のファイルに書いて<html>の<head>内に<link rel=”stylesheet” href=”ファイル名.css”>と書く方法の３種類があります。
いずれにしても、①どこへ適用するのか、②どの設定か、③どんな値かということを書いていきます。改行をいれて見やすくすることができますが必須ではありません。
①適用範囲 { ②設定: ③値; } タグ名はそのまま入力します。クラス名は先頭に『.（ピリオド）』を付けます。アイディ名は先頭に『#（シャープ）』を付けます。全要素にするときは『*（アスタリスク）』です。
複数の名前を空白で区切ると[または（OR）]という意味になり、適用範囲を広げられます。
複数の名前を『,（カンマ）』で区切ると[かつ（AND）]という意味になり、適用範囲を小さくします。
区切記号は他にも『>（不等号記号）』『+（プラス）』『~（チルダ）』があります。
そして『[]（角括弧）』や『:（コロン）』でさらに条件を付けることができます。
設定できる項目は決まっています。
CSSで色を指定できるところは、文字色（color:）、背景色（background-color:）、枠の色（border-color:）があります。
カミュプリィのホームページではみかん色（#F08300）やあんず色（#F7B977）を多く使用しています。CSSでの指定は『color: #f08300』のようになります。
色の番号は色見本のサイトで調べることができます。
同じ色の濃淡が必要なときは『color: #f08300cc』『color: #f0830077』のように濃さ（透過）の設定を加えます。透過を指定しない『color: #f08300』は『color: #f08300FF』と同じです。
色の設定とは別に、濃さ（透過）のみ（opacity:）を設定することができます。画像の透過に役立てそうです。値は0から1までの数値か、0%から100%までの割合で設定できます。1または100%が透過しないという意味になります。
つぎのようにすると文字を太字にすることができます。本当は細かく太さを設定できるのですが、実際には普通と太字しか表示できないようです。
font-weight: bold; /* 太字 */
font-weight: normal; /* 標準 */CSSを使用してHTMLの一部分をかくすことができます。
display: none;状況にあわせて内容を表示するのに使えるかもしれませんね。
改行を含んだ値を、そのまま表示するには次のようにします。
<pre>値<pre>
前のページのURLを調べるときは、PHPで『$_SERVER[‘HTTP_REFERER’]』を使います。
直接URLを開いたり、ブックマークから開いたりしたとき、『$_SERVER[‘HTTP_REFERER’]』はどんなURLになるでしょうか。
試してみたところ空っぽでした。
ちなみに<a href=””></a>と、hrefにブランクを渡すと現在のURLへのリンクになっていました。
IF文での分岐は次のようになります。
if(条件) {
式;
}
if(条件) {
式;
} elseif {
式;
} else {
式;
}
WindowsパソコンにLaravelの開発環境を整えました。およそ次のとおりになります。
[コントロールパネル]>[プログラム]>[プログラムと機能]>[Windowsの機能の有効化または無効化]を開いて、次の項目にチェックを入れます。
これをPowerShellで設定するには次のようにします。PowerShellは[管理者として実行]します。
dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestartWindowsでWSL2を使って「完全なLinux」環境を作ろう！
ここまで設定したら、一旦Windowsを再起動します。
パソコンから目を離しても、Windowsがスリープしないように、[システム]>[電源とバッテリー]で設定しておきます。
それでは、Ubuntuをインストールしましょう。PowerShellを[管理者として実行]し、次のようにします。
wsl --install Ubuntuがインストールされると、新しいユーザーの名前とパスワードの登録がおこなわれます。
ユーザー名とパスワードは何でもよいですが、ブランクにできません。このパスワードは頻繁に使いますので、しっかりメモしておきましょう。
成功すると、[スタート]>[すべてのアプリ]に[Ubuntu]が登録されます。
WSL を使用して Windows に Linux をインストールする
次に、Ubuntuを更新しましょう。[スタート]>[すべてのアプリ]から[Ubuntu]を開いて、次のようにします。
sudo apt update && sudo apt upgrade -y
exitここでWindowsを再起動します。
もういちど、Ubuntuを開いて、次のようにします。
sudo do-release-upgrade
exit途中で[y]や[ENTER]の入力を求められます。
更に、WindowsとUbuntuの改行コードの違いを吸収するために次のようにします。
sudo apt-get install -y dos2unix
find . -type f -print0 | xargs -0 dos2unix次のサイトからWindows用のDocker Desktopをインストールします。これはWindowsのアプリです。
インストールが正常に終わると[Installation succeeded]と表示されます。そのあとDocker Desktopを開くとチュートリアルが始まりますが、とりあえずスキップしましょう。
Ubuntuを開いて、次のようにします。
[○○]部分には任意のディレクトリ名を入れます。例えば[example-app]とすることができます。
curl -s "https://laravel.build/○○?php=81" | bash
cd ○○ && ./vendor/bin/sail upこれで、開発環境は整いました。
【Docker】Laravel Sailのインストールと使い方を確認
ここからは、コンピューターを開いてLaravelにアクセスするたびにおこないます。
まずはUbuntuを開いて、次のようにします。
cd ○○ && ./vendor/bin/sail up -d [○○]部分には、先に curl -s “https://laravel.build/○○?php=81” | bash したときの○○を入れます。
次に、ブラウザを開いて http://localhost/ にアクセスします。無事にLaravelの画面が表示されたでしょうか。
なお、Laravelを終わらせるには、次のようにします。
./vendor/bin/sail down開発環境の細かいところは、参加するチームによって色々と差異があるとおもいます。基本的なところが押さえられていたなら いいな..とおもいます。
Windowsに Apache HTTP Server、PHP、MariaDB をインストールして開発環境を構築してみます。
最初は XAMPP をインストールしたのですが、あるとき動かなくなって、どうしたら復旧するのかわからなくなりました。「こんなことになるのなら個別にインストールしたほうがわかりやすくない？」とおもい、個別にインストールとセットアップをすることにしました。
最初に PHP をインストールします。PHP は次のリンクから、スレッドセーフのZIPをダウンロードします。ZIPファイルの中身をお好きなところへコピーします。
https://windows.php.net/download
『php.ini-development』ファイルをコピーして『php.ini』にします。
そして『php.ini』の次の各行の先頭の『;』を取り除きます。
Windowsの[設定]-[システム]-[バージョン情報]-[システムの詳細設定]で、[システムのプロパティ]-[詳細設定]タブを開き、下のほうにある[環境変数]ボタンを押します。[システム環境変数]の[Path]を編集して、PHP のファイルをコピーしたフォルダ（例: C:\PHP）を追加します。
インストールファイルを次のリンクからダウンロードします。
https://www.apachelounge.com/download/
ダウンロードした ZIP ファイル中の『Apache○』フォルダごと、お好きなところへコピーします。
そして『Apache○\conf\httpd.conf』の次の各行のように更新したり追加したりします。
設定が終わったら Apache を Windowsサービスに登録します。管理者モードでWindowsコマンドプロンプトを開きます。そして Apacheの bin ディレクトリへ移動するコマンド（例: CD /D ○:\Apache○\bin）を実行します。続けて『httpd.exe -k install』でサービスに登録されますが、まだサービスは開始されていません。
インストーラーを次のリンクからダウンロードします。
https://mariadb.com/downloads/
インストーラーを実行して、例えば次のように選択・入力していきます。インストールが完了すると、自動でサービスに登録され、開始されます。
次に『MariaDB\data\my.ini』を開いて確認します。『utf8mb4』は4バイト対応のUTF-8です。
[mysqld]
character-set-server=utf8mb4
skip-character-set-client=handshake
・・・
[client]
・・・ 最後にWindowsを再起動します。
Apache のドキュメントルートは『○:\Apache○\htdocs』になります。このフォルダに *.php ファイルを置いて、ブラウザーから『http://localhost/○.php』を呼び出してみましょう。
Windowsでパスワードを変更しようとするとき、通常は Ctrl + Alt + Delete キーを押してパスワード変更の画面をだします。
リモートデスクトップからパスワードを変更するには Ctrl + Alt + End キーを押します。キーがかぶらないように工夫されていますね。
HTMLとPHPをつかって、お問い合わせ内容をメールで送信するものをつくりました。
<form action="PHPファイル名.php" method="post">
<p>ご返信先メールアドレス<br>
<input name="email" type="email" size="40"></p>
<br>
<p>ご用件を教えてください<br>
<textarea name="body" required cols="40" rows="6" placeholder="ウェブサイト作成のご依頼ほか"></textarea></p>
<p><input type="submit" value="送信"></p>
</form><!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
</head>
<body>
<main>
<?php
$email = $_POST['email'];
$body = $_POST['body'];
mb_language("Japanese");
mb_internal_encoding("UTF-8");
$headers = "From: $email";
mb_send_mail($email, "お問い合わせ", $body, $headers);
print ("お問い合わせありがとうございます");
?>
</body>
</html> Python（パイソン）で『pip install ○○』と入力したとき、pipって何？というエラーがでました。
なぜでしょうか？
name 'pip' is not defined
昔インストールした古いパスが残っていることがあります。
Windowsのスタート画面で『環境変数を編集』と検索し、検索結果を開きます。
画面上部にユーザー環境変数が、画面下部にシステム環境変数が表示されます。どちらにも『Path』があります。
Pathに設定された値を確認します。『Python』を含むものを見つけましょう。そのパスが示すフォルダはあるでしょうか？なければ削除しましょう。これで治ったのではないかとおもいます。
次のようにクラス名に空白が含まれるものがあります。
これはクラス名 abc と def の２つを持つという意味になります。
class="abc def"
このクラスにスタイルを設定するときは次のように．（ピリオド）に続けたクラス名を２つ空白を入れずに併記します。
クラス名 abc と def の両方を持つばあいの設定を指定しますという意味です。
.abc.def {
設定: 値;
}
ちなみに２つのクラス名の間に空白を挟むと、左側のクラス名のなかにある右側のクラス名の部分という意味になります。
![[Linux]ファイル一覧を取得](https://www.commuply.co.jp/technic/memo/wp-content/uploads/2024/08/20240830-132207.png)
Linux系でファイルとディレクトリの両方を取得するには次のコマンドを実行します
ls -a -l -R --time-style=long-iso /すべてのファイルを取得するため「/（ルートディレクトリ）」を設定します
出力結果をファイルに書き出すには次のようにします
ls -a -l -R --time-style=long-iso / 1>ファイル名 2>&1「2>&1」でエラーもファイルに書き出します
ファイルだけを取得したいときは次のようにします
ls -a -l -R --time-style=long-iso / | grep -v "^d" | grep -v "^l" | grep -v "^c" | grep -v "^b" | grep -v "^total " >ファイル名「grep -v」で先頭文字が｛d, l, c, “total “｝行を除外します
grepを付けると「2>&1」が無効になってエラーが画面表示されるみたいです
lsの行頭の記号の意味
d : ディレクトリ
l : シンボリックリンク
c, b : デバイスファイル
– : ファイル