■Python

今回のPythonのバージョンは、「3.8.5」を使用しています。（Windows10）（pythonランチャーでの確認）

■DataFrameを作成する

DataFrameをHTMLテーブルとしてレンダリングする前に、DataFrameを作成します。

■コード

import pandas as pd

data = {
    '名前':['鈴木','森岡','大林','安田','小林'],
    '出身':['石川','京都','滋賀','東京','大阪'],
    '血液型':['A','B','O','AB','O']
}

df = pd.DataFrame(data, columns=['名前','出身','血液型'])

print(df)

インポートでPandasモジュールを呼び出します。dataという変数を作成し、その中に、今回は「名前」,「出身」,「血液型」という3つの行を追加し格納します。

格納後、dfという変数を作成し、pd.DataFrame()と記述し、格納したDataを元にDataFrameを作成。作成後、dfという変数に格納します。

■実行

このスクリプトを実行すると、作成したDataFrameが出力されます。

■DataFrameをHTMLテーブルとしてレンダリングする

DataFrameが用意できましたので、HTMLテーブルとしてレンダリングするスクリプトを書いていきます。

■コード

import pandas as pd

data = {
    '名前':['鈴木','森岡','大林','安田','小林'],
    '出身':['石川','京都','滋賀','東京','大阪'],
    '血液型':['A','B','O','AB','O']
}

df = pd.DataFrame(data, columns=['名前','出身','血液型'])

result = df.to_html()

print(result)

DataFrameをHTMLテーブルに変換する際は、今回はresultという変数を作成し、その中にto_html()で、今回作成したDataFrameに対して、HTMLテーブルへの変換を行い、格納します。

格納後、print関数で変換されたDataFrameを出力します。

■実行

このスクリプトを、「df_htmltable_2.py」という名前で保存し、コマンドプロンプトから実行してみます。

実行してみると、今回作成したDataFrameがHTMLテーブルにレタリングされて出力されました。

■DataFrameをHTMLファイルに変換する

では、次にDataFrameをHTMLテーブルとしてレタリングを行い、HTMLファイルに変換してみます。

■コード

import pandas as pd

data = {
    '名前':['鈴木','森岡','大林','安田','小林'],
    '出身':['石川','京都','滋賀','東京','大阪'],
    '血液型':['A','B','O','AB','O']
}

df = pd.DataFrame(data, columns=['名前','出身','血液型'])

html = df.to_html()

text_file = open(r"C:\Users\user\test\index.html","w")
text_file.write(html)
text_file.close()

DataFrameをHTMLファイルに変換する場合は、今回はhtmlという変数を作成し、その中にto_html()で、今回作成したDataFrameに対して、HTMLテーブルへの変換を行い、格納します。

格納後、text_fileという変数を作成し、その中に、open()と記述し、今回は「C:\Users\user\test\（フォルダパス）」に書き込み用のindex.html（HTMLファイル）を開いた状態で格納します。

格納後、text_fileという変数に対して、write(html)で、DataFrameをHTMLテーブルにしたものを、書き込み用のindex.html（HTMLファイル）に書き込みます。

書き込み後、書き込み用のindex.html（HTMLファイル）を閉じます。

■実行

このスクリプトを「df_htmltable_3.py」という名前で保存し、コマンドプロンプトから実行してみます。

実行してみると、「C:\Users\user\test\（フォルダパス）」にindex.html（HTMLファイル）が保存されました。

変換されたindex.html（HTMLファイル）をWebブラウザで開いてみると、今回作成したDataFrameがHTMLテーブルにレタリングされたものが表示されました。

■Netlifyにアクセスする

まずは、Netlify（https://www.netlify.com/）にアクセスします。

アクセスすると、Netlifyのトップページが表示されます。ページ内の右側に「Sign up」の文字が表示されていますので、こちらをクリックします。なお、今回はNetlifyのアカウント登録は済ませた状態でアクセスしています。

■「Team overview」から独自ドメインの設定するサイトを選択

クリックすると、「Team overview」というページが表示されます。ページ内で「Sites」と表示されている箇所に表示されているサイトを選択します。

■ドメイン管理からカスタムドメインを追加する

選択すると、「Site overview」というページが表示されます。選択したサイトのURLなどが表示されています。このページ内で「Domain settings」と表示されたボタンをクリックします。

クリックすると、「Domain management（ドメイン管理）」というページが表示されます。ページ内の左側にあるメニューから「Domain management（ドメイン管理）」の「Domains」をクリックします。クリックすると「Domains」の項目が表示されます。この項目の中で「Add custom domain（カスタムドメインを追加する）」というボタンがありますので、こちらをクリックします。

クリックすると、「Add a custom domain to your site（サイトにカスタムドメインを追加する）」というページが表示されます。ページ内に「Custom domain」と表示された入力欄がありますので、こちらにお名前.comで取得したドメインの名前を入力します。

入力後、「Verify（確認）」ボタンをクリックします。

クリックすると、追加したカスタムドメインの確認が行われます。

○○.○○（お名前ドットコムで取得したドメインの名前） already has an owner. Is it you?（○○.○○にはすでに所有者がいます。あなたですか？）

確認後、上記のメッセージが表示されます。

表示された後に、表示されたドメインの所有者ですので、「Yes, add domain（はい、ドメインを追加します）」と表示されたボタンをクリックします。

クリックすると、「Domain management（ドメイン管理）」の「Domains」の項目に、お名前ドットコムで取得したドメインが追加されます。追加後、「Check DNS configuration」の文字をクリックします。今回はwwwありのドメインの「Check DNS configuration」をクリックしています。

クリックすると、「DNS configuration（DNS構成）」というポップアップが表示されます。ポップアップ内では「DNSプロバイダーで所有しているアカウントにログインし、（選択したサイト）を指すwwwのCNAMEレコードを追加します。」といった内容が書かれています。

www CNAME ○○.netlify.app.

上記のようなwwwのCNAMEレコードが表示されていますので、これをお名前ドットコムの方に追加する作業を行います。

■お名前.com Naviから「DNS」へ

Netlifyのページは表示させたまま、お名前ドットコムにアクセスします。アクセス後、ログインページからログインを行います。

ログイン後、お名前.com Naviから「DNS」をクリックします。

クリックすると「DNS」のページが表示されます。ページ内の「ドメインのDNS関連機能設定」を選択し、「次へ」ボタンをクリックします。

クリックすると、「ドメイン設定」の「ネームサーバーの設定」、「DNS設定/転送設定－ドメイン一覧」が表示されます。ページ内のドメイン名からNetlifyに追加したドメインを選択し、「次へ」ボタンをクリックします。

■DNSの設定をする

クリックすると、選択したドメインの設定お手続きが表示されます。ページ内の「DNS設定」から「DNSレコード設定を利用する」の「設定する」ボタンをクリックします。

クリックすると、「DNSレコード設定」が表示されます。ページ内で「入力」の項目にある「A/AAAA/CNAME/MX/NS/TXT/SRV/DS/CAAレコード」で設定を行います。

Netlifyの「DNS configuration（DNS構成）」というポップアップで表示されたwwwのCNAMEレコードを追加します。

今回はwwwありなので、ホスト名には「www」を追加し、TYPEは「CNAME」を選択。選択後、TTLは「3600」で、VALUEは「○○.netlify.app」を入力します。Netlifyの「DNS configuration（DNS構成）」というポップアップでは「○○.netlify.app.」となっていますが、最後のピリオドは入力しません。入力後、状態は「有効」で「追加」ボタンをクリックします。

クリックすると、「DNSレコード設定」の「追加」の項目に、先ほど設定したものが追加されます。

追加後、「DNSレコード設定」の一番下にある「DNSレコード設定用ネームサーバー変更確認」はチェックを入れたまま、「確認画面へ進む」ボタンをクリックします。

クリックすると、「DNSレコード設定」の確認のために、先ほど設定した情報が表示されますので、問題がなければ、「設定する」ボタンをクリックします。

クリックすると、DNSレコード設定の手続きが行われます。その後、DNSレコード設定が完了となります。これでお名前.comで取得した独自ドメインの設定は完了となります。

なお、設定の反映完了まで最大72時間程度かかる可能性があります。

なお、設定後、Netlifyの「Domain management（ドメイン管理）」の「Domains」を確認すると、今回はwwwありのDNSレコード設定を行いましたので、wwwありのドメインから「Check DNS configuration」という表示が消えており、wwwありのURLをクリックすると、お名前.comで取得した独自ドメインが表示されることが確認できました。

Figma（フィグマ）は、Webベースのベクターグラフィックエディターおよびプロトタイピングツールで、WindowsやMacOSで使える。

■Figma（フィグマ）のアカウント登録を行う

まずは、Figma（フィグマ）（https://www.figma.com/）にアクセスします。

アクセスすると、サイト上部のメニューに「Sign up（サインアップ、登録を申し込む）」ボタンがあります。こちらをクリックします。

クリックすると、ウインドウが表示されます。ウインドウには「Sign up with Google」ボタンが表示されており、お持ちのGoogleアカウントからアカウント登録するか、メールアドレスとパスワードの入力欄にメールアドレスとパスワードを入力し、「Create account（アカウントを作成する）」ボタンをクリックすることでも登録ができます。

今回は、メールアドレスとパスワードを入力し、「Create account（アカウントを作成する」ボタンをクリックします。

クリックすると、「Tell us about yourself（あなた自身について教えてください）」というウインドウが表示されます。「Your name」の入力欄に自分の名前を入力した後、下の「What kind of work do you do?（あなたはどんな仕事をしていますか？）」と表示されている欄をクリックするとプルダウンメニューが表示されますので、この中であなたの仕事、もしくは仕事に関する項目を選択します。

選択した後に、「Create account（アカウントを作成する）」ボタンをクリックします。クリックする前に、「I agree to join Figma’s mailing list（Figmaのメーリングリストに参加することに同意します）」にチェックを入れるかどうかを決めます。

その後、「By clicking “Create account” you agree to our TOS and Privacy Policy.（「Create account（アカウントを作成する）」ボタンをクリックすると、利用規約とプライバシーポリシーに同意したことになります。）」とウインドウの下に書かれていますので、利用規約（TOS）と、プライバシーポリシー（Privacy Policy）を翻訳して確認しておくと良いです。

確認後、「Create account（アカウントを作成する）」ボタンをクリックします。

クリックすると、「Verify your email（あなたの電子メールを確認します）」とウインドウに表示されますので、今回アカウント登録に使用したメールアドレスに、メールが届いていますので、確認します。

「Verify your email address」というメールが届いていますので、メール内の「Verify email」ボタンをクリックします。

クリックすると、「Email verified!」とWebブラウザに表示されます。これでメールアドレスでのアカウント認証は完了となります。

完了後、Figma（フィグマ）の管理画面が表示されます。これでアカウント登録は完了となります。

なお、無料プラン（Starter）の場合は、最大2人の編集者と3つのプロジェクトの作成が可能です。また、30日間の履歴保存が可能で、無制限のクラウドストレージ、無制限の無料視聴者が参加可能となっています。

■環境

・Windows10

・Visual Studio Code 1.53.2

・レンタルサーバー「ヘテムル」（php7.4,MySQL5.6）

・FTPクライアント「FileZilla」

■レンタルサーバー「ヘテムル」のデータベース（Mysql）の設定

データベース（Mysql）にデータを保存してみますので、まずは今回使用するヘテムルのデータベース（Mysql）の設定を行います。

「ヘテムル」のコントロールパネルのログイン（https://admin.heteml.jp/）画面で、「ヘテムルID」と「パスワード」を入力し、「ログイン」ボタンをクリックします。

クリックすると、コントロールパネルの右側にメニューがありますので、「各種設定」から「データベース」をクリックします。

クリックすると、「データベース」の管理パネルが表示されますので、「データベース作成画面へ」というボタンをクリックします。

クリックすると、「データベース作成画面」が表示されます。こちらの画面で「データベース名」と「接続パスワード」を入力します。入力後、「メモ」欄がありますので、データベースに関することのメモを入力する場合は行います。その後、「データベースを作成する」ボタンをクリックします。

クリックすると、「admin.heteml.jpの内容」というポップアップが表示されます。「データベースを作成します。よろしいですか？」というメッセージが書かれていますので、「OK」ボタンをクリックします。

クリックすると、「データベース[データベース名]の作成が完了しました」と表示されます。これでデータベースの作成は完了となります。完了後、「戻る」ボタンをクリックします。

「データベース」の管理パネルに戻りますので、作成したデータベースが表示されています。こちらの右側にある「phpMyAdmin」ボタンをクリックします。

クリックすると、「phpMyAdmin へようこそ」と表示され、「phpMyAdmin」ログインページが表示されます。表示されたページ内に「ログイン」という項目がありますので、データベースを作成した時のユーザー名とパスワードを入力します。入力後「Server Choice:」では、作成したデータベースの「サーバー名」を選択します。

選択後、「実行」ボタンをクリックします。

クリックすると、「phpMyAdmin」にログインできますので、左側のメニューから作成したデータベース名をクリックします。クリックすると、「このデータベースにはテーブルがありません。」と表示されます。こちらで「テーブルを作成」という項目がありますので、「名前:」、「カラム数：」を入力し、テーブルを作成します。

今回はテーブルの名前を「data」としカラム数を「2」と入力します。　入力後、「実行」ボタンをクリックします。

クリックすると、作成するテーブルの情報を設定する画面になります。こちらでカラムの「名前」を今回は「name」、「email」とします。次にデータ型は今回は「VARCHAR（可変長の文字列）」とします。次に「長さ/値」は、今回は「255」と入力します。入力後、その他の項目は入力なしで、「保存する」ボタンをクリックします。

クリックすると、テーブルが作成が完了となります。左側のメニューで、今回作成したデータベースの中に「data」というテーブルが表示されています。こちらをクリックし、「構造」という項目をクリックすると、作成したテーブル内のカラムなどの情報が確認できます。

■HTMLフォームを作成する

確認後、Visual Studio Codeなどのコードエディターを開き、HTMLフォームを作成していきます。

■コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>データベースへの保存</title>
</head>
<body>
    <div style="text-align: center">
    <h1>入力フォーム</h1>
    <form action="insert.php" method="post">
    <p>
    <label for="name">name:</label>
    <input type="text" name="name" id="name">
    </p>
    <p>
    <label for="email">email:</label>
    <input type="text" name="email" id="email">
    </p>  
    <p>           
    <input type="submit" value="送信ボタン">
    </form>
    </div>

</body>
</html>

今回は上記のHTMLフォームを作成してみました。このHTMLフォームを「index.php」という名前で保存します。

■データを送信し、データベース（Mysql）に保存するためのスクリプト

では、次にデータを送信し、データベース（Mysql）に保存するためのスクリプトを書いていきます。

■コード

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>MySQLへのデータ挿入</title>
</head>
<body>
    <div style="text-align: center">
    <?php
    $host = 'MySQLのサーバー名';
    $username = 'ユーザー名';
    $passwd = 'パスワード';
    $dbname = 'データベース名';

    $conn =mysqli_connect($host,$username,$passwd,$dbname);
    if($conn == false){
        die("エラー: 接続できませんでした。" . mysqli_connect_error());
    }
    $name= $_REQUEST['name'];
    $email= $_REQUEST['email'];

    $sql ="INSERT INTO data VALUES ('$name','$email')";

    if(mysqli_query($conn,$sql)){
        echo "<h3>データベースに正常に保存された。</h3>";
        echo nl2br("\n$name\n $email\n ");
    }else{
        echo "エラー: $sql. " . mysqli_error($conn);
    }
    mysqli_close($conn)
    ?>
    </div>

</body>
</html>

今回はこのようなスクリプトを作成してみました。このスクリプトを「insert.php」という名前で保存します。

■phpのファイルをFTPクライアントを使用し、サーバー上にアップロードする

2つのファイルを保存後、phpのファイルをFTPクライアントを使用し、サーバー上にアップロードする。今回はFTPクライアント「FileZilla」を使用してアップロードします。

■動作確認（スクリプトの実行）

phpのファイルをFTPクライアントを使用し、サーバー上にアップロード後、動作確認（スクリプトの実行）を行います。

Webブラウザでphpのファイルをアップロードしたサーバーにアクセスしてみます。アクセスすると、HTMLフォームが表示されました。表示されましたので、フォームを介して入力したデータがデータベース（Mysql）に保存されるのか検証してみます。

HTMLフォームの「name」と「email」の入力欄にテストで情報を入力します。入力後、「送信ボタン」をクリックします。

クリックすると、「データベースに正常に保存された。」と表示されました。これでデータベース（Mysql）の保存が完了となりました。

完了後、phpMyAdminにアクセスしてみます。

アクセスしてみると、HTMLフォームを介して送信されたデータが、データベース（Mysql）の保存されたことが確認できました。