プログラミング - caracal media／キャラカルメディア https://media.caracal.jp/category/develop/ ウェブ制作／WordPressカスタマイズ／iPad情報／ボルダリング情報を発信してます Sun, 24 May 2020 23:59:55 +0000 ja hourly 1 https://wordpress.org/?v=6.6.2 Vue.js入門 – 初歩の初歩 https://media.caracal.jp/develop/vue-js-introduction/ Wed, 22 Jan 2020 00:16:23 +0000 https://media.caracal.jp/?p=608 こんにちは、ケイジです。 2002年から今までウェブサイト制作の仕事をしてご飯を食べてます。 今回はVue.js入門。 ウェブやアプリ制作界隈は技術の移り変わりが激しく、色々な技術が生まれては消えていきます。 今回紹介す…

The post Vue.js入門 – 初歩の初歩 appeared first on caracal media／キャラカルメディア.

]]> こんにちは、ケイジです。 2002年から今までウェブサイト制作の仕事をしてご飯を食べてます。

今回はVue.js入門。

ウェブやアプリ制作界隈は技術の移り変わりが激しく、色々な技術が生まれては消えていきます。

今回紹介するVue.jsなどJavaScriptの技術についても耳にすることは多いと思います。

「Vue.jsってよく耳にするけど結局なんなの？」
「大まかでもいいのでVueの仕組みを知りたい」
「この技術の流れにキャチアップしていきたい」

と思っている方は多いはず。

今回の記事をひととおり読むとVue.jsの概要をザックリと理解できるようになります。

実際にコードを書いてVue.jsの公式サイトのチュートリアルをさらにかみ砕いて、極力わかりやすくして「Hello, World！」を表示させるということをやっていきます。
ぜひ最後までお読みください。

Vue.jsとは？

Vue.jsはJavaScriptでアプリケーションを高速に制作するためのフレームワークになり、日本では2016年後半からズイズイとシェアを伸ばしてきています。
JavaScriptフレームワークの代表的なものは次のようなものがあります。

  • Vue.js
  • React.js
  • Angular
  • jQuery

jQueryなんかはすっかり老舗感がでておなじみになりましたね。

vue.js入門 – 初歩の初歩

ではまず、HTMLを書いていきます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue.js 初歩の初歩</title>
</head>
<body>

</body>
</html>

ファイル名を「vue.html」とでもして保存しておいてください。
もう、必要最低限のHTMLですね。

次に、Vue.jsを読み込みます。

https://jp.vuejs.org/
から「はじめる」をクリック。

ダウンロードして読み込むか、CDNを利用するかを選べます。

今回はCDNを使います。

下図の本番バージョンのHTMLをコピーします。

そして、次のコードの場所へ貼り付けます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue.js 初歩の初歩</title>
</head>
<body>

<script src="https://cdn.jsdelivr.net/npm/vue"></script> <!— ←　これ —>
</body>
</html>

これでVue.jsを使う準備はOKです。

今回、行うことを具体的に記述すると次のようになります。

・messageという変数に「Hello, World!」という文字列を代入して表示させる
・表示させるのは「app」というid名を付けたdivタグの中

上の前提にもとづき、次にHTMLを記述をします。

<div id="app">
  {{ message }}
</div>

次にVue.jsを使い、appという変数でモデルを作成します。
気をつける点は以下の２つ

・id=“app”の要素（Element）と結びつける
・変数「message」に「Hello, World!」の値を格納したデータを持たせる

<script type="text/javascript">
(function() {
  'use strict';

    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, World!'
      }
    });

})();
</script>

Elementにid=“app”なので「el: ‘#app’」という記述になります。
分かりやすいですね。

あとは最初に作成したHTMLのコード内にコピペして保存するだけです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue.js 初歩の初歩</title>
</head>
<body>

<div id="app">
  {{ message }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script type="text/javascript">
(function() {
  'use strict';

    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello, World!'
      }
    });

})();
</script>

</body>
</html>

ブラウザ表示させて「Hello, World!」と表示されれば成功です。

まとめ

いかがでしたでしょう。Vue.jsの概要がザックリとお分かりいただけたでしょうか。

では、よいVue.jsライフを！

参考：はじめに – Vue.js

The post Vue.js入門 – 初歩の初歩 appeared first on caracal media／キャラカルメディア.

]]> テンプレートファイル構成を確認する – WordPressテーマを自作する 第3回 https://media.caracal.jp/wordpress/wordpress-theme-original/ Tue, 14 Jan 2020 23:43:52 +0000 https://media.caracal.jp/?p=552 こんにちは、ケイジです。WordPressをカスタマイズすることで、妻と娘と自分の食い扶持を稼いでいます。WordPressで作ったサイトは100以上。現在は企業のインハウスエンジニアとして日々勤しんでいます。 シリーズ…

The post テンプレートファイル構成を確認する – WordPressテーマを自作する 第3回 appeared first on caracal media／キャラカルメディア.

]]> こんにちは、ケイジです。
WordPressをカスタマイズすることで、妻と娘と自分の食い扶持を稼いでいます。WordPressで作ったサイトは100以上。現在は企業のインハウスエンジニアとして日々勤しんでいます。

シリーズでWordPressテーマテンプレートの作成手順を紹介しています。
今回は「テーマのテンプレートファイル構成」。

第1回は↓こちら。

WordPressテーマを自作する 第1回 – ブログのサイト設計をする

どうもこんにちは、ケイジです。 ウェブ制作を生業として、WordPressのテーマやプラグイン作成、カスタマイズをメインに日々暮らしています。 WordPressは便利なブログツールでフリーテーマなどが豊富にあります。 …

ご自身のブログのテーマを自分で作成してみたい方はぜひご覧ください。

また、WordPressのテーマが作成できるようになると、お仕事として企業やサイト運営している個人からテーマ作成も受注できたりします。

クラウドソーシングサイトで「WordPress テーマ作成」と検索すると、かなりの案件がヒットすると思うので見てみてね。

今回の対象読者

  • WordPressオリジナルテーマを作ってみたい
  • HTMLでひととおりウェブページが作れる
  • PHPをなんとなく知っている

※PHPについては基本的な知識を持っていたほうがスムーズにすすみます。入門記事を書いているので「PHPでメールフォームを自前でつくる。ゆるふわPHP入門」も合わせてご覧ください。

WordPressでオリジナルテーマを自作する – テーマのテンプレートファイル構成

テーマとは

テーマは決められた場所におく必要があります。
WordPressを設置しているディレクトリをルートディレクトリとすると

ルートディレクトリ/wp-content/themes/

の下に任意の名称でフォルダを作成して置きます。
今回はsample_themeという名称でフォルダを作成します。

ルートディレクトリ/wp-content/themes/sample_theme/

WordPressテーマ内テンプレートファイルの命名規則

WordPressテーマはいくつかのテンプレートファイルでできていて、それぞれに決められた名前をつける必要があります。

できるだけシンプルなテンプレートファイル構造にします。今回作成するテンプレートファイルは以下の通り。

// 各ページのテンプレートファイル
home.php
single.php
page.php
archive.php
category.php
404.php

// 共通パーツテンプレートファイル
header.php
footer.php
sidebar.php

// その他ファイル
functions.php （機能ファイル）
style.css （CSSファイル）
screenshot.png （テーマのスクリーンショット）

テンプレートファイルにはそれぞれ役割があります。ひとつずつ見ていきましょう。

各ページのテンプレートファイル

WordPressにはトップページや投稿記事ページなどいくつかページによって種類があります。各ページに対応するテンプレートファイル名は次のようになります。

home.php （トップページ）
single.php （投稿ページ）
page.php （個別ページ）
archive.php （アーカイブ一覧ページ）
category.php （カテゴリー一覧ページ）

他にもいくつかあるのですが、今回は上記の基本的なテンプレートファイルのみ使います。

共通パーツテンプレートファイル

また、基本的にすべてのページで共通で使われるヘッダーやフッターなどのパーツがあり、そのパーツを各ページにインクルードして使います。各パーツに対応するテンプレートファイル名は次のようになります。

header.php （ヘッダーパーツ）
footer.php （フッターパーツ）
sidebar.php （サイドバーパーツ）

各ページと共通パーツの関係は次の図のようになります。

WordPress,各ページテンプレートと共通パーツテンプレートの関係

例えばヘッダーに変更があった場合はheader.phpを修正すれば全てのページに反映されることになり、すこぶる便利です。

その他、共通パーツスタイルシート

functions.php　（機能ファイル）
style.css （スタイルシート）
screenshot.png （テーマのスクリーンショット）

style.cssはスタイルシートになり、テーマの見た目を設定します。また、WordPressテーマ名やテーマ作成者といったテーマの情報もこのファイルに書き込むことになります。

functions.phpはテーマの設定や機能を書き込みます。

screenshot.pngは管理画面のテーマ設定画面に表示されるスクリーンショット画像になります。

待て、次回！

ここまで、WordPressテーマのテンプレート構造を見てきました。次回は「WordPressオリジナルテーマを自作する その2 【Webサイトデザイン、UI/UXデザインをする】」で作成したデザインをもとに、コードを組んで実際にテーマを作成していきたいと思います。

次の記事は↓こちら。

HTMLコーディングする – WordPressテーマを自作する 第4回

こんにちは、ケイジです。 WordPressオリジナルテーマを自作する。第4回の今回は前回作成したデザインをHTMLコーディングしていきます。 今回作成するのは、トップページと個別記事ページのHTMLファイル、CSSファ…

The post テンプレートファイル構成を確認する – WordPressテーマを自作する 第3回 appeared first on caracal media／キャラカルメディア.

]]> PHP入門-メールフォームを自前でつくる。ゆるふわPHP第７回 https://media.caracal.jp/develop/php-mailform07/ https://media.caracal.jp/develop/php-mailform07/#comments Sat, 21 Dec 2019 09:00:00 +0000 https://media.caracal.jp/?p=284 PHP入門-第７回　完成！メールフォーム ようやくここまでたどり着きました。今まで学習してきた第１章から第６章までを全て組み合わせて、とうとうメールフォームが完成します。 PHP入門-メールフォームを自前でつくる。ゆるふ…

The post PHP入門-メールフォームを自前でつくる。ゆるふわPHP第７回 appeared first on caracal media／キャラカルメディア.

]]>

PHP入門-第７回　完成！メールフォーム

ようやくここまでたどり着きました。今まで学習してきた第１章から第６章までを全て組み合わせて、とうとうメールフォームが完成します。

最後にもう一度全体の流れを確認します。第１回で見た図をもう一度確認してみましょう。

メールフォームのしくみ

ユーザーがブラウザのメールフォームからウェブサーバーへデータを送信。
ウェブサーバーがそのデータを受け取って開発者へメールを送信するといった流れになります。

※メールフォームが動作するためにはお使いのサーバーがmb_send_mailに対応していることが必要になります。

<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのPHP</title>
</head>
<body>
<?php
if ($_POST["submit"] == "メール送信")
{
mb_language("Ja");
   mb_internal_encoding("UTF-8");
   $mailto="aaa@bbb.com"; // ←このメアドをご自分のメアドに変更して下さい。
   $subject = htmlspecialchars($_POST["subject"]);
   $content = htmlspecialchars($_POST["content"]);
   $name = htmlspecialchars($_POST["name"]);
   $email = htmlspecialchars$_POST["email"]);
   $mailfrom="From:" .mb_encode_mimeheader($name) ."<".$email.">";
   mb_send_mail($mailto,$subject,$content,$mailfrom);
}
?>
<form method="post" action="mailform.php">
お名前：<input type="text" name="name">
メールアドレス：<input type="text" name="email">
件名：<input type="text" name="subject">
お問い合わせ内容：<textarea name="content" cols="50" rows="5"></textarea>
<input type="submit" name="submit" value="メール送信">
</form>
</body>
</html>

12行目の変数$mailtoの値を自分のメールアドレスにしてください。

上記プログラムをmailform.phpとしてサーバーにアップ。
ブラウザでアクセスすると、次のような画面が表示されます。

必要事項を記入して「メール送信」をクリック。
メールが送信されてくれば成功です！！

以上、ゆるふわPHPチュートリアル「メールフォームを自前でつくる」は今回で最終回になります。どうもおつかれさまでした。

このチュートリアル連載が誰かの、あなたの役に立ったのであれば幸いです。本望です。

よいプログラミングライフを！！

The post PHP入門-メールフォームを自前でつくる。ゆるふわPHP第７回 appeared first on caracal media／キャラカルメディア.

]]> https://media.caracal.jp/develop/php-mailform07/feed/ 2 PHP入門-メールフォームを自前でつくる。ゆるふわPHP第６回 https://media.caracal.jp/develop/php-mailform06/ https://media.caracal.jp/develop/php-mailform06/#comments Fri, 20 Dec 2019 09:00:00 +0000 https://media.caracal.jp/?p=282 PHP入門-第６回　メール送信できちゃうんです！ ゆるふわPHP第６回。今回はPHPでメール送信をする解説です。 PHP入門-メールフォームを自前でつくる。ゆるふわPHP第1回はこちら 前回記事はこちら phpにはメール…

The post PHP入門-メールフォームを自前でつくる。ゆるふわPHP第６回 appeared first on caracal media／キャラカルメディア.

]]>

PHP入門-第６回　メール送信できちゃうんです！

ゆるふわPHP第６回。今回はPHPでメール送信をする解説です。

phpにはメールを送信するmb_send_mailという命令があり、書式は次のようになります。

※mb_send_mailが許可されていないサーバーもあります。お使いのサーバーでmb_send_mailが許可されているかご確認ください。

mb_send_mail("aaa@bbb.com", "メール送信について", "こんにちは", "From:山田太郎<yamada@taro.com>");

上記プログラムの
「aaa@bbb.com」が送信先メールアドレス、
「メール送信について」が件名、
「こんにちは」が本文、
「From:山田太郎<yamada@taro.com>」が送信元メールアドレスになります。

また、日本語を送信する場合は言語の種類（日本語）と文字コードをそれぞれ次のプログラムのように「mb_language」と「mb_internal_encording」で指定しなければ、文字化けの原因となることがあり、受信したメールが全く読めないということになることもあります。

実際にメールを送信するプログラムです。

<html lang="ja">  
<head>  
<meta charset="UTF-8">
<title>はじめてのPHP</title>  
</head>  
<body>  
<?php  
// 言語を日本語に設定  
mb_language("Ja");

// 文字コードを設定（設定しないと文字化けの原因になることもあります）
mb_internal_encoding("UTF-8");

// 送信先のメアド　↓ここにご自分のメールアドレスを代入してください。
$mailto="aaa@bbb.com";

// 件名
$subject="件名（タイトル）です。";

// 本文
$content="内容を入れます。";

// 送信者
$mailfrom="From:".mb_encode_mimeheader("山田太郎")."<yamada@taro.com>";

// 送信します  
mb_send_mail($mailto, $subject, $content, $mailfrom);
?>  
</body>  
</html>

15行目の変数$mailtoに自分のメールアドレスを代入してください。ファイル名をmail.phpとしてブラウザでアクセス。

自分宛にメールが送信されれば成功です。

次回はラスト「PHP入門-第７回　メールフォーム完成！」になります。もう一息！

The post PHP入門-メールフォームを自前でつくる。ゆるふわPHP第６回 appeared first on caracal media／キャラカルメディア.

]]> https://media.caracal.jp/develop/php-mailform06/feed/ 2 PHP入門-メールフォームを自前でつくる。ゆるふわPHP第５回 https://media.caracal.jp/develop/php-mailform05/ https://media.caracal.jp/develop/php-mailform05/#comments Thu, 19 Dec 2019 09:00:00 +0000 https://media.caracal.jp/?p=280 PHP入門-第５回　条件式ってなんなんですか？ PHP入門-メールフォームを自前でつくる。ゆるふわPHP第1回はこちら 前回記事はこちら 条件式とは、「もし～ならば、～する」といったように、条件を満たしていればその後のプ…

The post PHP入門-メールフォームを自前でつくる。ゆるふわPHP第５回 appeared first on caracal media／キャラカルメディア.

]]>

PHP入門-第５回　条件式ってなんなんですか？

条件式とは、「もし～ならば、～する」といったように、条件を満たしていればその後のプログラムを実行させる命令になり、書式は次の様になります。

// もし、変数$ageが20ならば「条件式」と表示させる。  
if ($age == 20)  
{  
   echo "条件式";  
}

<html lang="ja">  
<head>  
<meta charset="UTF-8">
<title>はじめてのPHP</title>  
</head>  
<body>  
<?php  
$age = 20;  
 
if ($age == 20)  
{  
   echo "条件式";  
}  
?>  
</body>  
</html>

上記プログラムをcode05.phpとしてサーバにアップすると「条件式」と表示されます。

8行目の変数$ageの値を20以外の値にすると、表示されなくなることを確認してください。

また、等号をあらわす「==」の他に「>」「<」「>=」「<=」「!=」といった不等号記号等も使用することができます。

// もし、変数$ageが20より大きければ  
if ($age > 20)  

// もし、変数$ageが20より小さければ  
if ($age < 20)  

// もし、変数$ageが20以上ならば  
if ($age >= 20)   

// もし、変数$ageが20以下ならば  
if ($age <= 20)  

// もし、変数$ageが20でなければ  
if ($age != 20)

「PHP入門-第６回　メール送信できちゃうんです！！」に続きます。

The post PHP入門-メールフォームを自前でつくる。ゆるふわPHP第５回 appeared first on caracal media／キャラカルメディア.

]]> https://media.caracal.jp/develop/php-mailform05/feed/ 2 PHP入門-メールフォームを自前でつくる。ゆるふわPHP第４回 https://media.caracal.jp/develop/php-mailform04/ https://media.caracal.jp/develop/php-mailform04/#comments Wed, 18 Dec 2019 09:00:00 +0000 https://media.caracal.jp/?p=261 PHP入門-第４回　フォームで値を渡します PHP入門-メールフォームを自前でつくる。ゆるふわPHP第1回はこちら 前回記事はこちら htmlタグの で送信された値を、phpで と記述して受け取ります。 その際にhtml…

The post PHP入門-メールフォームを自前でつくる。ゆるふわPHP第４回 appeared first on caracal media／キャラカルメディア.

]]>

PHP入門-第４回　フォームで値を渡します

htmlタグの

<input name="hoge">

で送信された値を、phpで

$_POST["hoge"]

と記述して受け取ります。

その際にhtmlのformタグで値の渡し先を指定し、メソッドをgetかpostかを指定する必要があります。getとpostの違いは今は省略しますが、今回はpostを指定します。

また、受け取る値はhtmlspecialchars関数を使ってクロスサイトスクリプティングという悪意のある攻撃からのセキュリティ対策をします。

htmlspecialchars($_POST["hoge"])

ウェブプログラミングとセキュリティ対策は切っても切れない重要な関係です。
今回深くはセキュリティについては触れませんが、詳しく知りたい方はウェブプログラミングのセキュリティバイブル「体系的に学ぶ 安全なWebアプリケーションの作り方 第2版 脆弱性が生まれる原理と対策の実践」をお読みください。

体系的に学ぶ 安全なWebアプリケーションの作り方 第2版［リフロー版］　脆弱性が生まれる原理と対策の実践

Amazonで見る

<html lang="ja">  
<head>  
<meta charset="UTF-8">
<title>はじめてのPHP</title>
</head>
<body>
<form method="post" action="form.php">
<input type="text" name="value">
<input type="submit" name="submit" value="送信">
</form>
渡された値は
<?php
echo $_POST["value"];
?>
です。
</body>
</html>

上記プログラムをform.phpとして保存。サーバにアップしてブラウザでアクセスすると、まず値を入力するテキスト入力フォームと送信ボタン、「渡された値はです。」と表示されます。

テキスト入力フォームになにか文字や数字などの文字列を入力して「送信」ボタンをクリックすると、「渡された値は○○○です。」と入力された文字列が表示されます。

「PHP入門-第５回　条件式ってなんなんですか？」に続く。

The post PHP入門-メールフォームを自前でつくる。ゆるふわPHP第４回 appeared first on caracal media／キャラカルメディア.

]]> https://media.caracal.jp/develop/php-mailform04/feed/ 2 PHP入門-メールフォームを自前でつくる。ゆるふわPHP第３回 https://media.caracal.jp/develop/php-mailform03/ https://media.caracal.jp/develop/php-mailform03/#comments Tue, 17 Dec 2019 09:00:00 +0000 https://media.caracal.jp/?p=257 第３章　四則演算ってなんなの？ 四則演算とは足し算、引き算、かけ算、割り算のことです。 PHP入門-メールフォームを自前でつくる。ゆるふわPHP第1回はこちら 前回記事はこちら 四則演算にはそれぞれ次のような記号を使いま…

The post PHP入門-メールフォームを自前でつくる。ゆるふわPHP第３回 appeared first on caracal media／キャラカルメディア.

]]>

第３章　四則演算ってなんなの？

四則演算とは足し算、引き算、かけ算、割り算のことです。

四則演算にはそれぞれ次のような記号を使います。
「+」 たす
「-」 ひく
「*」 かける
「/」 わる

$a = 5 + 8;

とすると変数$aには5たす8の答えである13が代入され

$b = 20 / 4;

とすると変数$bには20わる4の答えである5が代入されます。

$a = 15;
$b = 3;
$c = $a * $b;

上の式ようにあらかじめ変数$aに15を、変数$bに3を代入しておいて計算することもできます。

ちなみに上記の場合は変数$cには15かける3の答えである45が代入されます。

<html lang="ja">  
<head>  
<meta charset="UTF-8">
<title>はじめてのPHP</title>
</head>
<body>
<?php
$value1 = 8;
$value2 = 3;

$answer1 = $value1 + $value2;
$answer2 = $value1 - $value2;
$answer3 = $value1 * $value2;
$answer4 = $value1 / $value2;

echo $value1 . "と" . $value2 . "を";
echo "たすと" . $answer1 . "、ひくと" . $answer2 . "、";
echo "かけると" . $answer3 . "、わると" . $answer4 . "になります。";
?>
</body>
</html>

前回同様、上記ファイルを「code03.php」としてブラウザでアクセスしてみてください。
「8と3をたすと11、ひくと5、かけると24、わると2.66666666667になります。」
と表示されれば成功です。

8行目と9行目の$value1と$value2に代入する値をいろいろ変更すると、表示される結果が変わってくるのでいろいろと試してみてください。

「PHP入門-第４回　フォームで値を渡します」に続く。

The post PHP入門-メールフォームを自前でつくる。ゆるふわPHP第３回 appeared first on caracal media／キャラカルメディア.

]]> https://media.caracal.jp/develop/php-mailform03/feed/ 2 PHP入門-メールフォームを自前でつくる。ゆるふわPHP第２回 https://media.caracal.jp/develop/php-mailform02/ https://media.caracal.jp/develop/php-mailform02/#comments Mon, 16 Dec 2019 02:50:00 +0000 https://media.caracal.jp/?p=245 PHP入門-第２回　変数ってなに？ PHP入門-メールフォームを自前でつくる。ゆるふわPHP第1回はこちら 変数とは数値や文字列を入れる入れ物のようなものです。先頭に「$」（ダラーまたはダラ）を付けた半角英数字の文字列が…

The post PHP入門-メールフォームを自前でつくる。ゆるふわPHP第２回 appeared first on caracal media／キャラカルメディア.

]]>

PHP入門-第２回　変数ってなに？

変数とは数値や文字列を入れる入れ物のようなものです。先頭に「$」（ダラーまたはダラ）を付けた半角英数字の文字列が変数と見なされます。文字列は一部例外がありますが、基本的にはなんでも構いません。$a, $value, $hoge　などなど。

<html lang="ja">  
<head>  
<meta charset="UTF-8"> 
<title>はじめてのPHP</title>  
</head>  
<body>  
<?php  
$value = "Hello, World!!";  
echo $value;  
?>  
</body>  
</html>

上記のように記述し、ファイル名を「code02-01.php」としてお手持ちのサーバーにアップロードすると、前回と同様に「Hello, World!!」と表示されます。

$value = "Hello, World!!";

は$valueに文字列”Hello, World!!”を「代入する」と言います。

また、文字列の他にも数値を代入することもできます。
文字列は前後を「 ” 」（ダブルクォーテーション）で囲みますが、数値は前後に何も付けません。

<html lang="ja">  
<head>  
<meta charset="UTF-8">
<title>はじめてのPHP</title>  
</head>  
<body>  
<?php  
$age = 23;  
echo $age;  
?>  
</body>  
</html>

上記を入力し、ファイル名を「code02-02.php」としてアップロードしてブラウザで見てみると「23」と表示されます。

また、文字列同士や文字列と数値などを「 . 」（ドット）で連結することもできます。

<html lang="ja">  
<head>  
<meta charset="UTF-8">
<title>はじめてのPHP</title>  
</head>  
<body>  
<?php  
$before = "わたしは";  
$age = 23;  
$after = "才です。";  
echo $before . $age . $after;  
?>  
</body>  
</html>

上記ファイルを「code02-03.php」と入力してサーバーにアップ、ブラウザでアクセスすると「わたしは23才です。」と表示されます。

「PHP入門-第３回　四則演算ってなんなの？」に続きます。

The post PHP入門-メールフォームを自前でつくる。ゆるふわPHP第２回 appeared first on caracal media／キャラカルメディア.

]]> https://media.caracal.jp/develop/php-mailform02/feed/ 1 PHP入門-メールフォームを自前でつくる。ゆるふわPHP第１回 https://media.caracal.jp/develop/php-mailform01/ Sun, 15 Dec 2019 00:37:12 +0000 https://media.caracal.jp/?p=236 プログラミング初心者の方を対象に「PHPでメールフォームを作ってみよう！」記事を公開します。 対象読者 HTMLとCSSはワリと覚えてきたけど次に何を覚えよう？ Googleフォームはメールフォームを簡単に作成できて便利…

The post PHP入門-メールフォームを自前でつくる。ゆるふわPHP第１回 appeared first on caracal media／キャラカルメディア.

]]>

プログラミング初心者の方を対象に「PHPでメールフォームを作ってみよう！」記事を公開します。

対象読者

  • HTMLとCSSはワリと覚えてきたけど次に何を覚えよう？
  • Googleフォームはメールフォームを簡単に作成できて便利だけど、自由にデザインできないのが不便。
  • WordPressのテーマとかをいじってみたいんだけどPHPっていうのがいじれると有利らしい

といった方々が対象です。

PHP入門-メールフォームのしくみ

今回作成するメールフォームのしくみはざっくりと下の図のようになります。
ユーザーがブラウザのメールフォームからウェブサーバーへデータを送信。
ウェブサーバーがそのデータを受け取って開発者へメールを送信する。

PHPとは？

PHPとはWebサイト上で動作するプログラムの一つで、HTML内に記述することができるので、お手軽で便利。
メールフォームを動作させるためにはお使いのサーバーがメールを送るのに必要になる、mb_send_mailに対応していることが必要になります。
契約しているレンタルサーバーがPHPに対応しているなら、だれでも簡単に試すことができます。

  • おすすめレンタルサーバー
    さくらのレンタルサーバ・スタンダード
    月額524円（初期費用1,048円が必要）と安くて非常に安定していて、今回必要になるmb_send_mailという関数にも対応しています。

アジェンダ

この連載ではHTML,CSSを一通り習得した方を対象に以下の項目に沿ってPHPで実際にメール送信ができるメールフォームを完成させるまでをチュートリアルしていきたいと思います。

第１章　PHPってなに？（この記事）
第２章　変数ってなに？
第３章　四則演算ってなんなの？
第４章　フォームで値を渡します
第５章　条件式ってなんなんですか？
第６章　メール送信できちゃうんです！！
第７章　メールフォーム完成！！

それでは、第１章スタート！！

第１章　PHPってなに？

PHPとはwebサイト上で動作するプログラムの一つで、HTML内に記述することができるので、お手軽で便利。

PHPのルール

プログラミング言語だけに数限りなくルールはあるのですが、ここでとりあえず覚えるべきルールは３つだけ。

  • 拡張子は基本的には「.php」
  • PHPはプログラムを「<?php」で始まり「?>」で閉じる
  • 各行の終わりには基本的には「 ; 」（セミコロン）を付ける

<html lang="ja">  
<head>  
<meta charset="UTF-8"> 
<title>はじめてのPHP</title>  
</head>  
<body>  
<?php  
echo "Hello, World!!";  
?>  
</body>  
</html>

上記のように記述し、ファイル名を「code01.php」としてお手持ちのサーバーにアップしてみてください。
Chromeなどのブラウザでアップしたphpファイルにアクセスし、「Hello, World!!」と表示されれば成功です。

次回、「第２章　変数ってなに？」に続きます。

The post PHP入門-メールフォームを自前でつくる。ゆるふわPHP第１回 appeared first on caracal media／キャラカルメディア.

]]> SQLiteでカラムを削除する簡単な方法 https://media.caracal.jp/develop/sqlite-dropcolumn/ Wed, 30 Oct 2019 13:22:16 +0000 https://media.caracal.jp/?p=41 SQLiteでカラムを削除しようとすると非常に面倒で、「新規にテーブルを作り、古いテーブルからデータを移し、古いテーブルを削除してから新規作成したテーブルを元のテーブルと同じ名前にリネームする」ということをしなければなり…

The post SQLiteでカラムを削除する簡単な方法 appeared first on caracal media／キャラカルメディア.

]]>

SQLiteでカラムを削除しようとすると非常に面倒で、「新規にテーブルを作り、古いテーブルからデータを移し、古いテーブルを削除してから新規作成したテーブルを元のテーブルと同じ名前にリネームする」ということをしなければなりません。※

そんなときは「DB Browser for SQLite」を利用してカラム削除をすればとても楽チン。

DB Browser for SQLiteはGUIでSQLiteを操作するアプリケーションです。
ダウンロードは以下のサイトから。

Downloads – DB Browser for SQLite

今回の例では「articles」テーブルの「published_at」カラムを削除します。

ダウンロードしたアプリケーションを起動するとウィンドウが表示されるので「Open Database」をクリックします。

操作したい拡張子「.sqlite」のSQLiteのデータファイルを選択します。

カラムを削除したいテーブルを選択し、「Modify Table」をクリックします。

すると次のような画面が表示されるので削除する「published_at」カラムを選択して「Remove field」をクリック。

確認画面が表示されるので「Yes」をクリックしてカラムを削除します。

以上です。
簡単ですね。

それでは、よいプログラミングライフを！

※ Laravelを使っていればmigrationを用いて
 $table->dropColumn(‘hoge’);
 一行でできます。

The post SQLiteでカラムを削除する簡単な方法 appeared first on caracal media／キャラカルメディア.

]]>