Pythonで学ぶバックエンド開発

Pythonを使ってバックエンド開発を学ぼう！Webページの概要とPythonの基礎知識について

Pythonで学ぶバックエンド開発　第1回

大西武[著] / CodeZine編集部[編]

2025/05/26 11:00

ポスト

ダウンロード第1回　サンプルコード (4.2 KB)

一筆書きアプリのおさらい

　「index.html」ファイルをWebブラウザで実行すると、以下の図のように、4つのサンプルコードが1つのセットとなり、お絵描きをすることができます。この4つが今回の連載のテンプレートとなります。

　詳しくは、前回の連載で似たものを作ったので参考にしてください。今回はブラウザの幅に合わせてパソコン版が「pc.css」のスタイルシートを、モバイル版が「pc.css」と「mobile.css」のスタイルシートを適用します。

　「.html」ファイルは、タグを配置するHTML5文書です。タイトルの<h1>タグ、メニューの<nav>タグ、絵を描ける<canvas>タグ、作者情報の<footer>タグを配置します。

「index.html」のサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>一筆書きBBS</title>
  <link href="css/pc.css" rel="stylesheet" type="text/css" />
  <link href="css/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-width:1023px)" />
  <script type="text/javascript" src="js/main.js"></script>
</head>
<body>

<div id="left">
  <header>
    <h1>一筆書きBBS</h1>
    <nav>
      <a href="?page=home">HOME</a>
      <a href="?page=draw">DRAW</a>
      <a href="?page=about">ABOUT</a>
    </nav>
  </header>
</div>
<div id="right">
  <canvas width="760" height="500"></canvas>
  <footer>
    <h3>このサイトは2025年から<a href="http://vexil.jp" target="_blank">VexilJp</a>がテストしています。</h3>
  </footer>
</div>

</body>
</html>

　「.css」ファイルが装飾のスタイルシートです。パソコン版では、左側にタイトルとメニューが配置されており、右上に絵を描くことができます。右下には、このサイトの作者についてを書けるようになっています。

「css」→「pc.css」のサンプルコード

html,
body {
  font-family:Meiryo,"Hiragino Kaku Gothic Pro";
  min-height: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  background-color: #999;
}
header {
  overflow:hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}
h1 {
  float: left;
  padding: 0;
  margin: 10px 0 0 0;
}
h2 {
  clear: both;
}
h3 {
  margin: 0 0 0 20px;
  padding: 20px 0;
}
nav {
  float: right;
  text-align: center;
}
footer {
  float: left;
  margin: 0;
  padding: 0;
}
input,
textarea {
  width: calc(100% - 20px);
  padding: 0;
  margin: 5px 10px;
}
button {
  width: 200px;
  padding: 0;
  margin: 5px 10px;
}
input[type="submit"] {
  width: 200px;
}
select {
  margin: 10px 0 0 0;
}
#select {
  margin: 20px;
}
#select_num {
  color: #fff;
  background-color: #000;
}
canvas {
  background-color: #fff;
  z-index: 0;
}
ul {
  clear: both;
}
li {
  width: 100%;
  padding: 5px 0;
}
#left {
  float: left;
  margin: 0;
  padding: 0 10px;
  width: 380px;
  min-height: 100%;
  background-color: #ccc;
}
#right {
  float: right;
  width: calc(100% - 400px);
  min-height: 100%;
  background-color: #999;
}
a {
  color: #000;
  text-decoration: underline;
}
a:hover {
  color: #fff;
  background-color: #000;
  text-decoration: none;
}
nav a {
  float: left;
  margin: 0;
  padding: 25px 5px 20px 5px;
  font-size: 12px;
  text-decoration: none;
  font-weight: bold;
}

　モバイル版のスタイルシートは、上にタイトルとメニューを配置し、上下の真ん中に絵を描くことができるようになっています。下には、このサイトの作者について書けるように配置されています。

「css」→「mobile.css」のサンプルコード

h1 {
  font-size: 50px;
}
h2 {
  font-size: 40px;
}
h3 {
  font-size: 35px;
}
li {
  font-size: 30px;
}
#left {
  clear: both;
  margin: 0;
  padding: 0 10px;
  width: 100%;
  min-height: 50%;
  background-color: #ccc;
}
#right {
  clear: both;
  width: 100%;
  min-height: 50%;
  background-color: #999;
}
a {
  font-size: 36px;
}
nav a {
  float: left;
  margin: 0;
  padding: 30px 10px;
  font-size: 30px;
  text-decoration: none;
  font-weight: bold;
}

　「.js」ファイルがHTML5やCSSを制御するプログラミング言語です。<canvas>タグに2D画像をお絵描きして描画します。マウスホイールで絵を描いた過程をアンドゥ・リドゥできます。

「js」→「main.js」のサンプルコード

// 変数
let _canvas;
let _context;
let _click = false;
let _pos = [];
let _current = 0;
// 全てのDOMが読み込み完了したら
window.addEventListener("DOMContentLoaded", () => {
  _canvas = document.querySelector('canvas');
  if (_canvas == null) return;
  _context = _canvas.getContext('2d');
  window.addEventListener("resize", resize, false);
  resize();
  // マウスがクリックされたら頂点描画
  _canvas.addEventListener("mousedown", (e) => {
    _click = true;
    _pos.length = _current*4;
    let pos = getPos(e);
    _pos.push(pos[0],pos[1],pos[0],pos[1]);
    _current++;
    line();
  });
  // マウスが離されたら
  window.addEventListener("mouseup", (e) => { _click = false; });
  // マウスがドラッグされたら
  window.addEventListener("mousemove", (e) => {
    if ( _click ) {
      let pos = getPos(e);
      _pos[_pos.length-4] = pos[0];
      _pos[_pos.length-3] = pos[1];
      line();
    }
  });
  // マウスホイールでアンドゥとリドゥ
  _canvas.addEventListener('wheel', (e) => {
    if (e.deltaY > 0) {
      if (_current > 0) _current--;
    } else if (e.deltaY < 0) {
      if (_current < _pos.length/4) _current++;
    }
    line();
  });
});
// 画面サイズが変更されたら
function resize() {
  if ( document.body.clientWidth <= 1023 ) {
    _canvas.width = window.innerWidth;
  } else {
    _canvas.width = document.body.clientWidth - 400;
  }
  _canvas.height = document.body.clientHeight - 80;
  line();
}
// 図形の描画
function line() {
  _context.clearRect(0,0,_canvas.width,_canvas.height);
  let color = 'rgb(0,0,0)';
  _context.strokeStyle = color;
  _context.lineWidth = 1;
  // 1クリックした頂点
  for ( let i = 0; i < _current; i++ ) _context.strokeRect(_pos[i*4+2],_pos[i*4+3],1,1);
  // ベジェ曲線を引いていく
  _context.lineWidth = 3;
  _context.beginPath();
  for ( let i = 1; i < _current; i++ ) {
    _context.moveTo(_pos[i*4-2],_pos[i*4-1]);
    _context.quadraticCurveTo(_pos[i*4],_pos[i*4+1],_pos[i*4+2],_pos[i*4+3]);
  }
  _context.stroke();
}
// 正確なcanvasのマウス座標
function getPos(event) {
  // 要素の位置を取得
  let clientRect = _canvas.getBoundingClientRect();
  let positionX = event.clientX - clientRect.left;
  let positionY = event.clientY - clientRect.top;

  return [positionX,positionY];
}

次のページ
Pythonについての基礎知識

この記事は参考になりましたか？

印刷用を表示

ポスト

この記事の著者: 大西武（オオニシタケシ）

　1975年香川県生まれ。大阪大学経済学部経営学科中退。プログラミング入門書などを30冊以上商業出版する作家。ドコモでグランプリなどコンテストに20回以上入賞するアーティスト。オリジナルの間違い探し「3Dクイズ」がTVで約10回出題。プロフィールサイト：https://profile.vixar.jp

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事; CodeZine編集部（コードジンヘンシュウブ）

CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事