PythonをApache上でCGIとして動作させる方法

apache

Pythonを使ってWEBアプリケーションを構築する場合、Apacheを使ってCGIとしてPythonを動作させるのが一般的です。
PythonをApache上で動作させるには、PythonとApacheをインストールして、Apacheの設定ファイルを環境にあわせて修正するだけでよいです。


今回は、PythonをApache上で動作させる方法について紹介していきます。


環境情報


  • OS:Windows10
  • Apache:Apache 2.4.41
  • Python:Phton3.9

Pythonスクリプトの格納


まず、使用するPythonスクリプトファイルをApacheの所定の場所に格納します。
ApacheのCGIとしてPythonを動かすので、Apacheのルートディレクトリに存在する「cgi-bin」に格納します。


PythonをCGIとして動作させる場所

今回は、以下の”Hello,World!”を表示するだけのスクリプトで動作確認をおこないます。


#! C:\Python34\python

print('Content-Type: text/html')
print('')
print('Hello,World!')

1行目は、Phthonのインストールパスを記載する必要があります。
筆者のマシンでは、「C:\Python34\python」にPythonをインストールしています。


Apacheのインストールについては省略しましたが、以前書いた記事があるので、そちらを参照してください。


Apache設定ファイルの修正


次に、PythonをApacheのCGIとして動かすためにApacheの設定ファイルを修正します。
修正するのは、Apacheの設定ファイルである「httpd.conf」になります。


筆者のマシンのApacheは「C:\Apache24」にインストールしているのですが、「httpd.conf」の格納先は以下になります。


・C:\Apache24\conf\httpd.conf

「httpd.conf」の修正箇所は大きくわけて2カ所になります。 まず、Scriptエイリアスの設定で、「cg-bin」フォルダをcgi実行スクリプトフォルダとして有効にします。


<IfModule alias_module>
    #
    # Redirect: Allows you to tell clients about documents 
    # exist in your server's namespace, but do not anymore.  
    # will make a new request for the document at its location.
    # Example:
    # Redirect permanent /foo http://www.example.com/bar

    #
    # Alias: Maps web paths into filesystem paths and is used to
    # access content that does not live under the DocumentRoot.
    # Example:
    # Alias /webpath /full/filesystem/path/
    #
    # If you include a trailing / on /webpath then the server will
    # require it to be present in the URL.  You will also likely
    # need to provide a <Directory> section to allow access to
    # the filesystem path.

    #
    # ScriptAlias: This controls which directoriesscripts. 
    # ScriptAliases are essentially the same as
    # documents in the target directory are treated 
    # run by the server when requested rather than as 
    # client.  The same rules about trailing "/" apply
    # directives as to Alias.
    #
    ScriptAlias /cgi-bin/ "${SRVROOT}/cgi-bin/"
</IfModule>

通常、上記の設定はデフォルトで有効になっているので、特に設定変更する必要はないかもしれません。


もう1か所の変更箇所が、「cgi-bin」フォルダのディレクトリ設定です。
拡張子「.py」をスクリプトファイルとして認識します。

以下の例では、「.py」ファイルだけではなく「.cgi」「.pl」もスクリプトファイルとして設定しています。


<Directory "${SRVROOT}/cgi-bin">
   AllowOverride none
   AddHandler cgi-script .cgi .pl .py
   Options +ExecCGI
   Require all granted
</Directory>

上記の設定をおこなった後にApacheを再起動し、ブラウザでアクセスして格納したPythonスクリプトが動作するかを確認します。


以下の画面が表示されれば設定成功です。



PythonスクリプトとHTMLを共存させる場合


「cgi-bin」下にはスクリプトファイル(上記例では「.cgi」「.pl」「.py」)だけではなく、通常のHTMLファイルも格納したいことはあると思います。
その場合は、「cgi-bin」のディレクトリ設定で「AddHandler text/html」の設定をおこないます。


以下の例では、「cgi-bin」下に「.html」「.htm」「.txt」「.css」「.js」の配置を許可しています。


<Directory "${SRVROOT}/cgi-bin">
   AllowOverride none
   AddHandler cgi-script .cgi .pl .py
   AddHandler text/html .html .htm .txt .css .js
   Options +ExecCGI
   Require all granted
</Directory>

この設定をいれることで、「cgi-bin」下にスクリプトファイル以外の静的HTMLについても格納可能になります。



CSSだけで画像っぽい表示をやってみる。画像は使わない!

CSS

WEBページを作成していく上で、ちょっとした画像を使用したい場合があります。

ひと昔まえであれば、本当にいちいち画像を作成する必要がありましたが、HTML5・CSS3が主流の現在においては、ちょっとした画像は準備する必要はありません。

CSSを使えば、画像を作成しなくても画像っぽい表現が可能となります。


今回は、簡単な例ですが、WEBページ上で”画像っぽい”表示をおこなう方法を紹介します。


環境情報


  • ブラウザ:Chrome81

WEB画面にマークを付ける


例として、一覧画面上に新着の記事については新着であるマークをつける場合を考えます。

よくあるパターンですよね。

恰好良いマークをつけたいのでデザイナーさんに頼んで画像をつくってもらいたいところですが、そんな必要はありません。


以下のような表示であれば、わざわざ画像を作る必要はなく、HTMLとCSSで表現できます。


::after疑似要素を使用した新着マークの表示サンプル

実際のWEBページはこちら


::after疑似要素を使ったサンプルコード


実際は、CSSの::after疑似要素を使ってマーク表示をおこなっています。
::after疑似要素は、選択した要素の最後の子要素として擬似要素を作成します。
よく content プロパティを使用して、要素に装飾的な内容を追加するために用いられます。


まずは、HTMLのサンプルです。

マークを付けたい要素に対して「newクラス」を付加します。

    <table>
        <tr>
            <th>No</th>
            <th>タイトル</th>
            <th>日時</th>
        </tr>
        <tr>
            <td class="new">1</td>
            <td>画像を使わずに画像っぽい表示をさせる①</td>
            <td>2020/06/14 11:27</td>
        </tr>
        <tr>
            <td>2</td>
            <td>画像を使わずに画像っぽい表示をさせる②</td>
            <td>2020/06/13 23:05</td>
        </tr>
        <tr>
            <td>3</td>
            <td>画像を使わずに画像っぽい表示をさせる③</td>
            <td>2020/05/03 08:11</td>
        </tr>
    </table>

次に、CSSのサンプルです。

一応、サンプルWEBページに使用しているCSSを全て紹介していますが、実際にマーク表示で使用している箇所は、「::after」属性部分のみとなります。

        body {
        }
        table, tr, th, td {
            border: solid 1px gray;
        }
        table {
            width: 800px;
        }
        table tr th:nth-child(1) {
            font-weight:bold;
            width:10%;
            background:#FFFFCC;
        }
        table tr th:nth-child(2) {
            font-weight:bold;
            width:60%;
            background:#FFFFCC;
        }
        table tr th:nth-child(3) {
            font-weight:bold;
            width:30%;
            background:#FFFFCC;
        }
        .new::after {
            content:"新";
            font-weight:bold;
            background:#FF0000;
            height:30px;
            width:30px;
            border-radius:21px;
            text-align:center;
            line-height:30px;
            display:inline-block; 
            color:#FFF;
            margin-left:20px;
        }

::after疑似要素の使い方


サンプルを例にして、::after疑似要素の使い方について図で説明します。
あまり難しいものではないです。


CSSでのマーク表示方法

「border-radius」で丸みを表現して画像っぽいスタイルを作成するところがポイントですね。


まとめ


HTMLとCSSだけで、ひとむかし前だと画像を準備する必要があったようなデザインも表現できることが解っていただけたかと思います。


まとめ
  • 指定要素の後に別要素を付加するのは::after疑似要素を使えばよい
  • ちょっとした画像っぽい表現は、HTMLとCSSで可能

それではまた。



canvasタグを使ってブラウザ上でお絵描きアプリを作る

JavaScript


ブラウザ上でのお絵描きは、HTML5の<canvas>タグを使って描画エリアを準備し、マウス操作をJavaScriptで制御をおこなうことで可能になります。


今回は、canvasタグを使ってブラウザ上でお絵描きをおこなう方法を紹介します。

JavaScriptでマウスの動きを制御して、canvasタグ上にお絵描きをおこないます。


HTMLとJavaScriptだけで、機能を実現することができます。


環境情報


  • ブラウザ:Chrome81
  • JQuery:JQuery2.2.4

サンプルプログラム


早速ですが、サンプルプログラムを紹介します。

紹介しているHTMLとJavaScriptをそのままコピペして使って頂ければ、基本的な機能をそなえたお絵描きアプリがブラウザ上で実現できます。


サンプルプログラムで動作するお絵描きアプリは、以下のURLから起動できます。

さくさく TECH
お絵描きアプリケーション
https://sakusaku-techs.com/sample/draw/
お絵描きアプリケーションのサンプルです。簡単にブラウザ上でお絵描きができます。undo・redoも可能です。

HTMLとJavaScriptは以下になります。


  • HTML
<body>
    <div>
        <canvas id="canvas" style="border:1px solid gray;"></canvas>
    </div>
    <div>
        <input type="button" id="undo" name="undo" value="undo">
        <input type="button" id="redo" name="redo" value="redo">
    </div>
</body>

  • JavaScript
//
// JavaScriptのグローバル変数群
//
var CANVAS_SIZE;
var undoDataStack = [];
var redoDataStack = [];
var mouseDown = false;

$(function() {
    //
    // 画面読み込み時のロード処理
    //
    $(document).ready(function(){

        // キャンバスのサイズを設定
        $('#canvas').css('width', '600px');
        $('#canvas').css('height', '600px');

        // キャンバスの属性を設定
        canvas = document.getElementById('canvas');
        canvas.width = 600;
        canvas.height = 600;
        CANVAS_SIZE = canvas.clientWidth;

        // 描画開始 → 描画中 → 描画終了
        canvas.addEventListener('mousedown', startDraw, false);
        canvas.addEventListener('mousemove', drawing, false);
        canvas.addEventListener('mouseup', endDraw, false);
    });

    //
    // undo
    //
    $("#undo").click(function() {

        if (undoDataStack.length <= 0) {
            return;
        }

        canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');
        redoDataStack.unshift(context.getImageData(0, 0, canvas.width, canvas.height));

        var imageData = undoDataStack.shift();
        context.putImageData(imageData, 0, 0);
    });

    //
    // redo
    //
    $("#redo").click(function() {

        if (redoDataStack.length <= 0) {
            return;
        }

        canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');
        undoDataStack.unshift(context.getImageData(0, 0, canvas.width, canvas.height));

        var imageData = redoDataStack.shift();
        context.putImageData(imageData, 0, 0);
    });
});

//
// 描画開始
//
function startDraw(event){

    // 描画前処理をおこないマウス押下状態にする。
    beforeDraw();
    mouseDown = true;

    // クライアント領域からマウス開始位置座標を取得
    wbound = event.target.getBoundingClientRect() ;
    stX = event.clientX - wbound.left;
    stY = event.clientY - wbound.top;

    // キャンバス情報を取得
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
}

//
// 描画前処理
//
function beforeDraw() {

    // undo領域に描画情報を格納
    redoDataStack = [];
    canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    undoDataStack.unshift(context.getImageData(0, 0, canvas.width, canvas.height));
}

//
// 描画中処理
//
function drawing(event){

    // マウスボタンが押されていれば描画中と判断
    if (mouseDown){
        x = event.clientX - wbound.left;
        y = event.clientY - wbound.top;
        draw(x, y);
    }
}

//
// 描画終了
//
function endDraw(event){

    // マウスボタンが押されていれば描画中と判断
    if (mouseDown){
        context.globalCompositeOperation = 'source-over';
        context.setLineDash([]);
        mouseDown = false;
    }
}

//
// 描画
//
function draw(x, y){
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    context.beginPath();
    context.strokeStyle = "black";
    context.fillStyle = "black";
    context.lineWidth = 2;
    context.lineCap = "round";

    context.globalCompositeOperation = 'source-over';
    context.moveTo(stX,stY);
    context.lineTo(x,y);
    context.stroke();
    stX = x;
    stY = y;
}

HTMLの構成


HTMLはとてもシンプルです。
HTML5の<canvas>タグを定義しているだけ、です。

<canvas id="canvas" style="border:1px solid gray;"></canvas>

<canvas>タグはHTML5から追加されたHTMLタグになります。
2Dのグラフィックを表示することができるので、HTMLとJavaScriptでゲームやグラフィックデザインをおこなうことができます。


ブラウザ上でのゲームは、ほぼ全てこの技術が使われています。


JavaScriptの構成


ポイントは2つありまして、1点目は描画の基本処理。


描画開始 → 描画中 → 描画終了 の3段階で処理をわけています。
イベントの検知は、JQueryのイベントリスナーを使用しています。


// 描画開始 → 描画中 → 描画終了
canvas.addEventListener('mousedown', startDraw, false);
canvas.addEventListener('mousemove', drawing, false);
canvas.addEventListener('mouseup', endDraw, false);

「mousedown(左クリック開始)」のイベントを「startDraw」ファンクションで処理しています。
クリックした位置を算出し、描画開始を認識します。


「mousemove(マウス移動)」のイベントを「drawing」ファンクションで処理しています。
マウス移動に従って、canvas上に線を描画しています。


「mouseup(左クリック終了)」のイベントを「endDraw」ファンクションで処理しています。
左クリックを終了した位置が描画の終了位置と認識します。


もう一つのポイントとしてはUNDO・REDOです。
UNDOはやり直し、REDOはやり直しのやり直し、です。


仕組みは簡単です。
グローバル変数に「undoDataStack」「redoDataStack」を準備し、この領域にデータを格納することでUNDO・REDOを実現しています。


var undoDataStack = [];
var redoDataStack = [];

描画終了したら「undoDataStack」にデータを格納し、UNDOをやったら「redoDataStack」にデータを格納します。
UNDO・REDOの操作をおこなったら、この「undoDataStack」「redoDataStack」領域からデータを取り出し、画面表示をおこないます。


まとめ


いかがでしたでしょうか?


<canvas>タグを使えば、簡単にブラウザ上でお絵描きができることがわかって頂けたかと思います。
今回は紹介しきれませんでしたが、色の指定や図形の指定もおこなうことができます。
ぜひお試しください。



Web画面での時間入力インターフェース!timedropperを使い倒してみる!

カレンダー

Webシステムの開発をおこなっていく上でよく必要となるのは、”日付入力””時間入力”のインターフェースです。

JavaScript(JQuery)を使って入力インターフェースを作るケースがほとんどかと思います。


メジャーなところでは、「DatePicker」「DateTimePicker」あたりですかね?

DatePicker
DateTimePicker

他にも「Material DatePicker」「pickadate」があり、各々で特徴があります。

しかし、Web画面のデザイン次第ではカレンダー形式ではない日付・時間の入力が必要となる場合があります。


という訳で今回は、「timedropper」を使ってみたいと思います。ちょっと面白いインターフェースです。

また、オプションについて一覧形式でまとまっているサイトがなかったので、まとめてみました。


timedropperを使ってみる

とりあえず動かしちゃいましょう。

サンプルソースコードと、サンプルソースコードで動作するインターフェースは以下になります。


サンプルはこちら



    timedropper
    
    
    


    
    


timedropperのサンプル

おもしろいインターフェースで、アナログ時計の意識したインターフェースになります。


バルーンが、アナログ時計での長針・短針になっています。
時間(Hour)を変更したい場合は時間(Hour)をクリックしてバルーンを動かします。

分(Minutes)も同様です。

timedropperの使い方

timedropperには、いくつかのオプションが用意されています。

解り易いオプションもあれば解り辛いオプションもあるのですが、使用方法含めて紹介していきます。

timedropperの基本的なオプション

まずは基本的なオプションを使ってみます。

色系ですね。

一覧でまとまっているサイトを見つけることができなかったので、まとめてみました。


オプション名

日本語名

デフォルト

説明

primaryColor

主色

#1977CC

バルーンで選択中の時・分の色です。

textColor

文字色

#555

バルーンで選択していない時・分の色です。

backgroundColor

背景色

#FFFFFF

背景は全てこの色になります。

“バルーン部分だけ別の色”というのは、オプションではできないようです。

borderColor

枠線色

#1977CC

枠線は全てこの色になります。

 

 

 

 

 

上記のオプションを実際に設定して動かしてみましょう。

色が自由に設定できるので、印象が違ってきますね。


基本的なオプションを指定したサンプルはこちら




    timedropper
    
    
    


    
    



基本的なオプションを指定したtimedropper

timedropperの応用オプション

色以外のオプションもあります。

あまり豊富ではありませんが、ちょっとしたカスタマイズができます。


オプション名

日本語名

デフォルト

説明

autoswitch

自動補正

false

時・分を切り替えた時に、バーン位置を自動的に選択位置に補正します。

meridians

12時間表記

false

24時間表記ではなく、12時間表記にします。

時計部分に、「AM」「PM」が表示されます。

format

時間のフォーマット

h:mm a

選択した時刻の表示フォーマット。

mousewheel

マウスホイールによる変更

false

マウスホイールによる変更を許可します。

init_animation

初期表示時のアニメーション

fadein

dropdown:上から下にフェードイン

※他にあるんですかね?すいません。見つけきれませんでした。。。

setCurrentTime

現在時刻の設定

true

デフォルトで現在時刻を設定するか。


上記のオプションを設定してみます。

formatは助かりますね。

よく使うと思います。

応用オプションを指定したサンプルはこちら




    timedropper
    
    
    


    
    




timedropperの応用オプション設定

まとめ

いかがでしたでしょうか?

timedropperのオプションは全て網羅しているかと思います。

もし、timedropperを使うことがあった場合は、ぜひ参考にして頂ければと思います。