Archive of ‘プログラム’ category

[PHP] テーマに必要なファイルの配置 ゼロから覚えるWordPressテーマ作成、第5回

IMG_0222

ゆうです。

前回から約3ヶ月程間が空いてしまいました。
本当に申し訳ないです。
気を取り直すこともなく、普通に前回の続きからやっていこうと思います。

今回は、ファイルの配置です。

  1. テーマの配置場所
  2. ファイルの作り方
  3. 必要なファイル
  4. 今回のまとめ



1・テーマの配置場所

 WordPressはテーマを作る際に決まった置き場所があります。WordPressをデプロイ(※)したディレクトリにwp-contentディレクトリがあるのですが、その下のthemesディレクトリの下です。
 ここに新しくディレクトリを作り、その中にファイルを入れていきます。
 参考としては下のような形になります。
ファイル・フォルダ構成

※ デプロイとは、サーバの必要な場所に必要なファイルを配置し、使用する準備をすることです。インストールと似たような意味で使われます。



2・ファイルの作り方

 テーマの配置場所で新しく作ったディレクトリに作成するファイルは、基本テキストファイルになります。テキストファイルは、Windowsのメモ帳などで作ることのできるファイルのことです。アスキーファイルと呼ばれることもあります。
 この際、一つ注意点があるのですが、「文字コード」に気を付けてください。

 文字コードとは? となるかもしれませんが、今はそういうものがあり気を付けないといけないという事だけ覚えておいてください。後ほど(次回・ヘッダー作成で)詳しく解説します。



3・必要なファイル

 必要になるファイルが

  • index.php
  • funcitons.php
  • style.css

 の3つのファイルになります。このうち、style.css には先日の記事のようにコメントを書くと管理画面にいろいろ情報が表示されてうれしいです。
 functions.php ファイルは、今はまだ空で大丈夫です。
 最後に、index.php に下記内容を書いてみてください

<!DOCTYPE html>
<html lang='ja'>
    <head>
        <title>test</title>
    </head>
    <body>
        <p>test</p>
    </body>
</html>

 最後にテーマを選択から今回作ったテーマを選択すると、トップページに下のような画面が表示されれると思います。
test_sample
 やりました! オリジナルテーマの作成、第一歩が完了です!(画像はテーマ変更のライブビューで見ているので、画面真ん中にグルグル回っているアイコンや、左下にメニュー開閉の矢印がありますが…)



4・今回のまとめ

 今回で、テーマ作成の大枠が完了しました。ね? 簡単だったでしょ?
 とはいえ、まだ、index.php に普通のHTMLを書いたに過ぎません。
 次回は、ヘッダーをより細かく作っていく作業と、それに伴いWordPress専用のタグ(関数)を使っていきます。

[jQuery]錯視

IMG_0222

 サイトリニューアル後のデザインではメインビジュアルにパララクスエフェクトを使うことになりましたので、実装しました。
 デモページとソースコード貼っておきます。

 簡単ですが、本日の更新は以上です。
 次週は製作者情報など、WordPressテーマのコメントの書き方についての解説になりそうですが、予定は未定です。
 それではっ

 デモページ

 ソースコード
jQuery

jQuery.fn.extend({
	background_parallax : function(sp) {
		var parallax_obj = $(this);
		var scroll_par = sp;
		if(!sp) { scroll_par = 10; }
		$(window).scroll(function(){
			background_move();
		});

		function background_move() {
			var scroll_top = $(window).scrollTop();
			parallax_obj.css('background-position', '0px -' + (scroll_top / scroll_par) + 'px');
		}
		
	},
});

 HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
		<script src="background-parallax.js"></script>

		<style>
			body {
				margin : 0;
				padding : 0;
				border : none 0px white;
			}

			div {
				width : 60%;
				margin : 100px auto 0 auto;

				line-height : 100px;
				text-align : center;

				color : white;
				font-weight : bold;

				background-color: rgba(0, 0, 96, 0.5);

				border : solid 2px white;
			}
		</style>
		<script>
			$(function(){
				$('body').background_parallax(5);
			});
		</script>
	</head>
	<body style='background-size:contain;background-attachment: fixed;background-repeat:no-repeat;background-image:url(background-image.jpg);'>
		<div>パララクスエフェクト</div>
		<div>背景が</div>
		<div>ゆっくり</div>
		<div>ついて</div>
		<div>きます</div>
		<div>よ</div>
	</body>
</html>

[PHP] PHPの基礎その2 ゼロから覚えるWordPressテーマ作成、第4回

IMG_0222

 ゆうです。
 第4回も前回に引き続きPHPの基礎をお勉強していきます。

  1. 判断命令「if」文
  2. 日常使う機会が少ない
  3. if文と比較演算子、組み合わせて行う「判断」
  4. 今回のまとめ



1・判断命令「if」文

 いよいよプログラム最後の機能「判断」についてお勉強です。
 これを覚えるとプログラムでできることがぐんと広がります。

 今までのプログラムは基本的に上から下、書かれていることを順番に処理していました(決められたことを決められた順番に実行していく。イベント等の「プログラム」と同じですね)。
 しかしこれだと、あまり複雑なことはできません。状況に応じて人間の判断が必要になってしまいます。

 例えば、入社式にて会社の今期目標発表後、会場の雰囲気が「納得しがたい。聞きたいことがある」となっていて、先に質疑応答に移ったほうがいいと思っても、それを判断し実行するためには人間が干渉しないとできません。

if文1

 これでは常に人間がいないとプログラムにお仕事をしてもらえなくなってしまいます。
 ここで出てくるのがプログラム自身に判断させる「if文」です。
 先ほどの図に「判断」の処理を追加した図が下のものです。

if文2

 緑色のひし形の部分が「if文」です。
 PHP の文法で書くと下のようになります。

if (判断内容) {
    判断内容が「真」の時実行される処理
} else {
    判断内容が「偽」の時実行される処理
}

 「真」とか「偽」とか今まで聞いたことない用語が出てきましたが、これについては次の「比較演算子」で説明します。



2・日常使う機会が少ない「比較演算子」

 少し脇道にそれて、比較演算子について説明していきます。
 比較演算子とは、その名前の通り値を比較するための演算子です。左辺と右辺を比較して式が成り立てば「真」を、成り立たなければ「偽」を返します。
 「真」は、正しいのニュアンスで受け取っておけばおおむね大丈夫です。PHP上では true で示されます。
 「偽」は、間違いのニュアンスで受け取っておけばおおむね大丈夫です。PHP上では false で示されます。

 比較演算子にはいくつか種類がありますが、一般的なものを挙げておきます。

==
右辺左辺が等しい
>
左辺が右辺より大きい
<
左辺が右辺より小さい
>=
左辺が右辺より大きいか等しい
<=
左辺が右辺より小さい等しい
!=
右辺と左辺が異なる

 ほかにも幾つかあるのですが、またの機会に解説します。

 また、これは正直プログラム慣れてる人もたま~にやってしまうのですが「代入演算子”=”」と「比較演算子”==”」は非常に似ているので間違えないでください!

 比較演算子の使い方について具体例を記述しますが、今回は変数の中身の確認に echo文や print文 ではなく、var_dump関数を使います。echoやprint文では true・false が出力できないからです。「関数」についてはしばらく後に解説予定ですので、今は「命令の一種」と覚えておいてください。

$answer = 1 == 1;
var_dump($answer);
$answer = 1 == 2;
var_dump($answer);
$answer = 1 < 2;
var_dump($answer);

2016-01-06_173020

 出力部分に bool(true) や bool(false) が出ていると思いますが括弧の外側が「型」で、内側が「値」です。ここでは $answer 変数に bool 型の true や false が格納されていることが確認できます。「型」についてもしばらく後に解説します。



3・if文と比較演算子、組み合わせて行う「判断」

 次回から WordPress のテーマ編集に戻るのでもう一息です。
 最後に if文 と比較演算子を使った判断の具体例を書きます。
 百聞は一見に如かず、下記の例を見てください。

if ( 1 == 2) {
    echo("同じ");
} else {
    echo("違う");
}

2016-01-06_174428

 変数に入れた値でもできます。

$answer = 1 + 2;
if ($answer == 3) {
    echo("同じ");
} else {
    echo("違う");
}

2016-01-06_174607

 このように、if文に「比較演算子」による「演算」を書くことでその計算結果に応じた処理をすることが可能になるのです。



4・今回のまとめ

 ちょっと今回のところは難しかったかもしれません。自分も説明文を書いてて「説明しづらいなぁ」と感じてました。もっちゃんと協議して次回以降もう少しわかりやすい説明を目指します。

 さて、ようやっとです。次回から WordPress のテーマ作成に移っていきたいと思います。
 まずはテーマ作成の方法「ファイルの作り方」から解説していきたいと思います。
 合わせて「PHPのコメントの書き方」なんてのも含みますので、こうご期待。

[PHP] PHPの基礎 ゼロから覚えるWordPressテーマ作成、第3回

IMG_0222

 ゆうです。
 第3回はPHPの基礎についてお勉強していきます。

  1. これだけは覚えて。出力命令「echo」文
  2. 値を入れておく箱「変数」
  3. 数学と一緒「算術演算子」
  4. 数学と違う!「代入演算子」
  5. 今回のまとめ



1・これだけは覚えて。出力命令「echo」文

 前回書いた次回予告と順番が違うじゃないか! とお叱りを受けるかもしれませんが、これだけはどうしても覚えてください。これが出来ないと組んだプログラムが「正しく動いているかわからない」のです。
 それじゃ、「echo」とは何なのか説明しますが、その前にプログラムは「入力・出力・記憶・演算・判断」の5つのことしか出来ないことを覚えていますか?
 「echo」はプログラムの中で「出力」に該当します。簡単に書くと画面に文字を出す命令です。

 もう少ししっかり説明すると、echo の右側に書かれた数値・文字列・変数を改行コードを末尾に付けて標準出力に出力する命令です。
 …なんか一気に用語が増えましたね。一つ一つ解説していきます。

命令

 コンピュータへの命令です。基本的に命令を右側の値に基づいて実行しろ、という形になります。

echo "Hellow PHP!";
include "test.php";

数値

 コンピュータ上で示す数字で表された値のことで、単に数値と言うと整数・小数・負の値など全てを含んだ値の事を指します。

文字列

 コンピュータ上で示す文字の集合体のことです(※)。文字列を表す場合は必ずシングルクォート(’)もしくはダブルクォート(”)で囲む必要があります。
 この2つは厳密には違いがあるのですが、それは後日改めて説明します。

'test';
"php";

 ※昔は「文字」と「文字列」は厳密に区別されていましたが、最近の言語では区別されていません。

変数

 次の項で詳しく解説してます

標準出力

 厳密には異なるのですが、標準出力は大体の場合において画面を指す為ここでは「画面」ということにしておきます。※
 ※プログラムが動作している環境に割り振られている標準的な出力のことなので環境によって異なる場合があるのです

改行コード

 テキストファイル等で改行に該当する「文字」の事です
 解説するとすごく長くなるので、一旦「そういうもの」として覚えておいてください

 それではいよいよ本格的にPHPのプログラムに入っていきます。



2・値を入れておく箱「変数」

 変数、それは数値や文字列等、データを入れておく箱のような物です。
 何故こんな曖昧な説明になるかというと、この変数という物はコンピュータの仕組みと密接に関わっているのでちゃんと説明すると意外と難解なのです。
 持てる知識の全てを動員して説明してみますが、厳密な定義なんていいよ! って人は「スキップ」をクリックして先にすすんでください。

 変数とは、メモリ番地に一時的に名前をつけたもので、1つの変数につき1byte~8byte程度メモリが確保される(文字列は配列と同様とみなす)。
 これにより変数名を使ってメモリに値を格納したりメモリから値を取り出したりすることが可能となる。
変数の仕組み



 勘の良い人は気づかれたかもしれませんが、この変数が「記憶」に該当する機能です。※
 この機能が無いとコンピュータは直前にやったことすら忘れてしまうので、うまく指示に従ってくれなくなります(具体的には直前の計算結果を忘れたりします)。変数のおかげで複雑な処理や計算が出来るわけですね。

 ※ハードディスクとかにファイルとして書き出す機能は「記憶」ではなく「出力」に該当します。この差はどこにあるかというと、プログラムの「記憶」とはプログラムが動作している時の「一時記憶」の事を指しています。プログラムが止まった後も残る「恒久的に記憶」することは「プログラム」の機能ではなく、ハードウェアの機能です。そのハードウェア(ハードディスク等外部記憶装置)に情報を書きだすのは「出力」、書きだした情報を読み取るのは「入力」になります。



3・数学と一緒「算術演算子」

 加減乗除の演算子です。通常と異なるのは乗算と除算の演算子で「×」は「*」に、「÷」は「/」になります。
 数学の計算と一緒で加算・減算より乗算・除算が優先され、左から順番に計算していきます。基本的に数学と同じなのでわかりやすいですね。
 ただし、プログラムの計算には注意点があります。それは除算の割る数を「0」にしてはいけないということです。エラーになってしまいます。※
※ PHP の場合、警告(Warning: Division by zero)が出ますが、処理自体は止まりません。



4・数学と違う!「代入演算子」

 また聞き慣れない「代入」という言葉が出てきましたね。数学ではxやyに値を与える事を指しましたが、プログラムでは変数に値を設定すること(※)です。
 面倒なのは数学では「等価」を表す「=」演算子を使うことです。
 数学での「=」は、左辺と右辺が等価で有ることを示しますが、プログラムの場合右辺の結果を左辺の変数に「代入」するという意味になります。
 ※変数の指すメモリ空間に値を記憶させることです

 具体的な例を書くと、こんな感じです。

$answer = 1 + 2;
echo $answer; // 3

2015-12-24_114655
paiza.io

 画面下に3が出力されていると思いますが、これは1行目の右辺「1 + 2」の結果を左辺「$answer」変数に「代入」し、その後変数「$answer」を画面に出力するという命令を順を追って実行したからです。

 代入演算子は、右辺で計算をさせる必要は特にないので、下のような事ができます

$test = "test";
echo $test; // test
$shiken = $test;
echo $shiken; // test

2015-12-24_114743

 右辺を値だけ(今回は文字列)にしても左辺の変数に代入されるし、右辺に変数を置いておくと変数の中身が左辺の変数に代入されます。



5・今回のまとめ

echo "出力に文字が出せるよ";
$test = "値が入れられるよ";
$x = 1; // 値が入れられるよ
$answer = $x + 5 * 10; // 計算出来るよ
echo $answer; // 51

2015-12-24_114815

 だいぶ長くなってしまったので今回はここまでにします。
 次回は今回できなかった「判断命令(if)、比較演算子」について解説します。これがわかるとプログラムが面白くなってきます。
 ちょっとWordPressと離れてしまってますがもおう少しお付き合いください。次々回ぐらいにはWordPressの解説に戻れてるはずですので…

[PHP] WordPress の「テーマ」とPHPの関係 ゼロから覚えるWordPressテーマ作成、第2回

IMG_0222

 ゆうです。
 第2回はWordPress の「テーマ」とPHPの関係について解説していきます。

  1. WordPressってよく聞くけど、何が出来るの?
  2. 「テーマ」ってなに?
  3. なんでPHPなの?
  4. ちょっとPHPの文法解説
  5. 今回のまとめ



1・WordPressってよく聞くけど、何が出来るの?

 Wordpress とはオープンソースのブログソフトウェアである(って、Wikipediaに書いて有る)。
 ブログソフトウェアは、ブログを取り扱うことの出来るソフトウェアの事で、オープンソースとは「誰でも好きに使っていいよ」っていう事です。文字通り好きに使えて「改造」したり「再配布」したりするのも基本的に自由です※。
 つまり、WordPressとは誰でも使えるブログを使う為のツールってことですね。
※ ライセンスによって微差があるので、詳細は調べてみてください。ただ、基本的にはこの考え方で大丈夫です。

 …しかし、WordPressはあくまでソフト。これを動かすサーバがないとブログ開設ができません。それに比べてAmebaブログやはてぶ等は無料で始められて、しかもサーバを自分で用意する必要がありません。なんか好きに使えても苦労が多そうですよね。

 それでも、WordPressにはそれらのブログサービスにはない強みがあります。それは高いカスタマイズ性。サーバごと提供されているサービスは、サーバに無用な負荷が掛からないようにカスタマイズ性が最低限に抑えられているものが殆ど。
 そんな中、WordPressはそれこそたくさんの事ができます。具体的に書き出してみましょう

  • テーマによる見た目のカスタマイズ
  • プラグインによる機能追加
  • 固定ページ作成

特に見た目のカスタマイズは、個性がなくなりがちなブログサイトにおいて強力な魅力の1つです。



2・「テーマ」ってなに?

 それでは具体的に「テーマ」についてほりさげていきます。
 前回、PHPはウェブページを作るHTMLの中に埋め込めるというお話をしましたが、「テーマ」はPHPの埋め込まれたHTMLファイルの塊です。
 ページのデザインをHTMLで行って、その中に決められたPHPのコードを書くことで、PHPの部分に記事等の内容が表示されるようになります。
 つまり、ページの見た目から記事の表示件数、文章の変換(語尾に「にゃ」を付ける等)等々、表示に関わる大部分は「テーマ」で制御されてます。



3・なんでPHPなの?

 WordPressは、本体のコードも全てPHPで書かれているのです。PHPはHTMLに埋め込むことが用意で且つ簡単な文法(※)の為、初心者にも扱いやすいのでPHPとHTMLのみを使ったWordPressのテーマは初心者でも簡単にカスタマイズ出来るようになってます。
 そのために、開発の言語をPHPにしたのではないかと考えられますね。

 ※ 近年のPHPは年々コードが複雑化しています

Untitled

 WordPressはこんな感じで回りとやり取りをしてます。
 図のコアとテーマの部分がPHPで作られてるんですね。
 「データベース」については後日改めて説明しますね。



4・ちょっとPHPの文法解説

 次回から、PHPの説明を行っていきますが、その前に簡単にPHPの文法について説明しておきますね。
 文法というのは、命令を書くときに必ずやらないといけない決まり事です。人間と異なりコンピュータ君は石頭なので曖昧な事が理解できないのです。決まり事通りに命令を書いてあげないと「わからないよっ」って怒られてしまうのです。これが「バグ」ってやつですね。
 バグについてはまた今度説明しますので、今回は文法の中からもっとも重要なものを2つほど紹介します。

行末にはセミコロン「;」

 PHPの行末には必ずセミコロンを置きます。コードを読み取るコンピュータ君が「ここで処理が一区切りなんだな」と判るようにするためです。具体例を書いてみるとこうなります。

print "Hello";
print "PHP!";

変数の先頭にはドルマーク「$」

 変数という謎の言葉が出てきてしまいましたね。一旦そういうものがある、ということだけ覚えてください。
 この変数というやつの先頭には必ずドルマークを書かないといけない決まりがあります。これもコードを読み取るコンピュータ君が「これは変数なんだな」と判るようにするためです。具体例を書いてみるとこうなります。

$s = "Hello PHP!";
print $s;



5・今回のまとめ

  • WordPressとは誰でも好きに使えるブログソフトウェア
  • WordPressのテーマはブログの見た目を決めてる
  • WordPressとWordPressのテーマはPHPで作られてる

 本日の解説はここまでです。
 次回は PHPの基礎「変数、算術演算子、代入演算子、出力命令(print,echo)、判断命令(if)、比較演算子」について解説します。
 なんか一気に用語がだだだだって出てきましたが、わかり易く丁寧に解説していくつもりなのでよろしくお願いします。

[PHP] PHPって何? ゼロから覚えるWordPressテーマ作成、第1回

IMG_0222

 ゆうです。すごく大仰なタイトルを付けてしまいました。
 以前から、Wordpressのプラグインを作ってみようとか、色々中途半端な記事を作ってみましたが、今回はそれらも巻き取って最後まで走りきりたいと思いますっ。

 前ふりはこれぐらいにして、第1回はWordpressを構築しているプログラム言語、PHPの事から始めたいと思います。
 できるだけわかりやすく、簡単に伝えられるようにがんばるぞっ

  1. プログラム言語って、何?
  2. プログラムって、何が出来るの?
  3. PHPって何?
  4. ちょっとPHPを使ってみよう
  5. 今回のまとめ



1・プログラム言語って、何?

 PHPは、プログラム言語です。それじゃあプログラム言語ってなんでしょう?
 「プログラム言語」って聞くとなんかすごく難しそうな印象を持つ人も多いと思います。
 が、実はそんな大したことはありません。
 まず、プログラムとは「手順」の事です。よく、イベントとかの進行表の事を「プログラム」と呼びますが、プログラム言語の「プログラム」と同じ意味です。決められた順番道理にやる「作業」や「内容」が記述された物のことですね。
 そしてプログラム言語は「手順」を書く際、コンピュータが手順を理解しやすくする為に作られた、コンピュータ用の言語の事を指します。C言語とかJava とか、どこかで聞いたことが有るかもしれませんね。
本棚



2・プログラムって、何が出来るの?

 プログラムってまるで魔法みたいに色々な事ができるって思ってる人が多いと思います。
 例えばGoogleやAmazonなど便利なサービス、ドラゴンクエストやファイナルファンタジーなどのビデオゲーム、果ては炊飯器やポットの温度調整などにも使われてます。
 しかし、プログラムが出来ることは、実はものすごく少なく、たった5つのことしか出来ません(※)。

 嘘ではありませんよ。

 プログラムは、入力・出力・記憶・演算・判断の5つのことしか出来ないんです。いや、本当に。
 でも、これだけなら誰でも出来るようになれる気がしませんか?

 いよいよ本日の本題、PHPの話に移ります。PHPもこれらプログラム言語の1つになるのです。

 ※ これは主に日本で使われている用法で、あまり一般的ではないので注意してください。ただ、わかりやすいので使わせてもらいました。



3・PHPって何?

 PHPとは、HTMLの中に組み込んで使えるサーバサイド・スクリプト言語です。

 ……すいません、これだと伝わらないですよね。

 まず、HTMLはHyper Text Markup Languageの略称で、直訳すれば「文字に印を付けられるすごい言語」です。
 これが、普段目にしているウェブサイトを形作ってます(このサイトもHTMLで作られてますよ)。
 段落ごとに文章をまとめたり、文字にリンクを貼ったりできるのは、全部HTMLのおかげです。
 そして、PHPというのは、このHTMLの中に直接書くことの出来るプログラム言語なのです。
 (サーバサイド・スクリプトについては、また機会をみて説明しますね)

 これを使うと、例えばアクセスカウンタのように見るたびに数値を変えたり、ページにアクセスした人が誕生日だったらお祝いのメッセージが出せたり、見るたびに表示が変わるようなウェブサイトが作れます。
 すごくないですか? これ、同じように文字を扱う媒体でも、雑誌や新聞じゃ絶対できないことですよ!



4・ちょっとPHPを使ってみよう

 ちょ~っとだけ先行して、PHPを使ってみましょう。
 repl.itさんで、ブラウザ上からPHPを実行できます。


repl.it

 repl.it さんの画面を開いたら左側に下の文章をコピーして Run▶ アイコンを押してみてください。

print("Hellow PHP!");

 print という「渡された文字列を出力する」という手順が実行され、渡された文字列「Hellow PHP!」が画面右側に出力されたと思います。
2015-12-08_231424

 入力・記憶・演算・判断については、今後テーマ作成時必要になり次第解説していきますね。



5・今回のまとめ

  • PHPとは、HTMLに組み込めるプログラム言語の事。
  • プログラム言語はコンピュータの為の手順書を書くための言語の事
  • PHPを含めたプログラム言語は入力・出力・記憶・演算・判断の5つのことしか出来ない。

 本日の解説はここまでです。
 次回は WordPress のテーマとPHPの関係について解説します。

 この講座は、Wordpressのテーマやプラグイン作成に必要になった知識をその都度解説していくので、学習順番があまり適切で無いかもしれませんが、生きた知識が身につけられるよう全力で頑張っていきますので、今後もよろしくお願いしますっ

動かすところから始める WordPress プラグイン作成

IMG_0222

随分前に書くと言っていて書かなかったプラグイン作成について記事を書きます。
ただし、前回書いたことはいったん無視します。
プラグインファイルを作ったり色々面倒くさくて
プラグインはファイルを個別に用意したりとか、設定画面を作ったり色々手間が多いので
まず動くものを作ってからプラグインに切り出すという手順でやって行きたいと思います。

作ってるものって、動いてくれないとなかなかモチベーション維持できないですよね。
ですので、まずは簡単に動かす事から始ます。

動くものを作り、リファクタし、テストでチェックをしてまた動くように作る。
TDD(テスト駆動開発)での作業を目指しますっ
※テスト環境がまだないのがいかんですね。作らねば。
tdd

(画像は和田卓人さんのスライドからお借りしました。
プログラマにはためになるスライドが多いのでぜひチェックしてみてください)


1・目的、目標から作業内容を決める

自分ももっちゃんもマジック:ザ・ギャザリングが好きで、よくデッキを弄って遊んでいて
いろいろな人に自分たちの作ったデッキを見てもらいたいと思うのですが
そのデッキをこのブログで掲載するのが面倒くさい。
具体的には見栄えを良く見せるためのタグ打ちが面倒くさい。
せっかくWordpressのようなブログツールを使ってるのだから
面倒なく、自動的に整形してもらいたいのに…
(タグ打ちは嫌でござる)

と、言うことで
decklist
上の画像(公式サイトから引用)のように見えるよう、
カード名と枚数を書くだけで、綺麗なリストを表示するように
タグを自動挿入するプラグインを作ってみようと思います。

今回は動くものを出来るだけ簡単に作るのが目標です。
ですので、出来るだけ作業を小さくします。
具体的には

・関数をひとつ作る
・作った関数を記事表示時にフック(後述)

以上2点に抑えます。

それではやっていきましょう。


2・関数を作成

それでは、まず関数を作っていきます。

function MtgList($the_content){
	return $result;
}

と、こんな感じで、名前を MtgListにして、引数でコンテンツの本文を受け取るようにして、
返り値に整形したコンテンツの本文を返すようにします。

このままだと、本文全体をリストとして整形してしまうので、特定のタグに括られた箇所だけ整形するようにしましょう。

function MtgList($the_content){
	return preg_replace_callback(
		'/\[MTG\](.+)\[\/MTG\]/s',
		function ($matches) { return $matches[1]; },
		$the_content
	);
}

preg_replace_callback 関数と、その引数の正規表現についてはそれぞれ資料を確認してください。

ざっくり解説すると、

第1引数で、どんな文字列を置換するか決定してます。
ここでは [MTG] ~ [/MTG] の文字列を検索しています。

第2引数で、置き換えの方法を決定。
(今のところ、[MTG] ~ [/MTG] の 「~」部分だけを出力するようにしています)

第3引数が、置換元の文字列です。

このままだと、ちゃんと置換されたかわかりづらいので該当箇所を赤い太字にしてみましょう。

function ($matches) { return '<p style="color:red;font-weight:bold;">' . $matches[1] . '</p>'; },

こんな感じですね。
これで、関数作りは完了です。


3・記事表示時にフック

次は、この関数を記事表示時に呼び出し、記事の内容を整形します。
それにはフックという機能を使います。
フックとは

何かの処理の前に処理を割り込ませる機構・機能

の事だと思ってくれて大丈夫です。
今回は

記事表示処理 の前に 先ほど作った関数(処理) を割り込ませます。

WordPress には、add_filter という関数で実装されています。

具体的には

add_filter('the_content', 'MtgList');

こんな感じで使います。

第1引数で、どのタイミングに割り込ませるか決めて
第2引数で、どの処理を割り込ませるか決定します。

上の例だと

記事表示(the_content)の前に MtgList 関数を呼び出すという処理を行い、
MtgListの第1引数に、コンテンツ本文の値が格納されます。


4・使ってみよう

これらのコードを早速使ってみましょう。
プラグインファイルを用意するのは、若干手間がかかるので、
今回は functions.php の中に追記します。

functions.php は 外観→テーマ編集→テーマのための関数(functions.php)にあります。

hoge

本来はサイトの見栄えをよくする為の関数を記述するところなのですが、
後日切り出すということで、今回は functions.php の末尾に追記します。

function MtgList($the_content){
	return preg_replace_callback(
		'/\[MTG\](.+)\[\/MTG\]/s',
		function ($matches) { return '<p style="color:red;font-weight:bold;">' . $matches[1] . '</p>'; },
		$the_content
	);
}

add_filter('the_content', 'MtgList');

さて、この状態で記事に下記文章を書いて表示すると…

[MTG]
3 沼
1 山
[/MTG]

3 沼
1 山

と、赤い太字で表示されます。

後は、4行目の処理を改良し
・行数分け
・枚数計算(土地・クリーチャー・その他・サイドボード)
・自動リンク
などを追加していけばOKです。


5・次回予告

来週は行数を分けて表示する機能を追加します。
改行コードでパースしてそれぞれにタグを付与するだけなので簡単だと思います。

それではっ

JavaScript でお手軽に値を保存する方法

ブラウザを閉じた時、更新した時、
折角入力したフォームの値が消えてしまうの、悲しいですよね。
ただ、入力した都度、Cookieに保存したり、サーバと通信したりなんてやりたくない。
そんな時は、localStorage を使って保存しよう。
そのまま使うと面倒くさいので、チョット手を入れました。

配列に、localStorage への保存メソッドを追加してます。
(既存クラスを汚すのでローカルで使うだけにしてね♪)

// 配列クラスにセーブメソッドを追加
Array.prototype.Save = function(savekey){
	// キーがない場合は何もしない
	if(savekey == undefined || savekey == null) return;
	// 配列をJsonに直して記憶
	localStorage.setItem(savekey,JSON.stringify(this));
};
// 配列クラスにロードメソッドを追加
Array.prototype.Load = function(loadkey){
	var buf  = localStorage.getItem(loadkey);
	// Json を配列に直して自身に格納
	var list = JSON.parse(buf);
	for(var key in list){
		this[key] = list[key];
	}
};
// 配列クラスにセーブ削除メソッドを追加
Array.prototype.SaveRemove = function(removekey){
	localStorage.removeItem(removekey);
};

で、使い方は

var hoge = [];

hoge[0] = 'よわむし!';
hoge.Save('rydia');

こんな感じ。

保存したデータを呼び出すときは

var piyo = [];
piyo.Load('rydia');

でできるよ。

PHP GD での画像編集方法、基礎編

先日、「PHP GD を使って透過PNGを作る方法」という記事を上げた所、
一緒にブログを書いているもっちゃんから
コード全部説明してよ全部解説したほうが読みやすいんじゃないかな?」
と、ありがたいお言葉を頂いたので
先日のコードを全部説明…しません。

折角なので、PHP GD を使って画像の編集を行う方法を
何回かに分けて紹介していこかと思います。

今回は、読み込み・拡/縮コピー・保存 を紹介します。
まず、本日解説する命令を使った例を紹介します。

// 画像の情報を取得
$imgInfo = getimagesize('画像パス');

// コピーする座標、サイズを決定する
$width  = 0;
$height = 0;
$x      = 0;
$y      = 0;
if($imgInfo[0]<=$imgInfo[1]){
	// 横幅より、縦幅のほうが大きかった場合
	$width  = $imgInfo[0];	// 横幅はそのまま
	$height = $imgInfo[0];	// 縦幅は横幅と同じ値
	$y      = floor( ( $imgInfo[1] - $height ) / 2);		// コピーの開始座標(縦軸)を決める(横軸は0のまま)
}else{
	if($imgInfo[1] < 100){
		// 横幅のが縦幅より大きく、画像の縦幅が 100px 未満だった場合
		$width  = $imgInfo[1];	// 横幅は縦幅と同じ値にする
		$height = $imgInfo[1];	// 縦幅はそのまま
		$x      = floor( ( $imgInfo[0] - $width ) / 2);		// コピーの開始座標(横軸)を決める(縦軸は0のまま)
	}else{
		// 横幅のが縦幅より大きく、画像の縦幅が 100px 以上だった場合
		$height = floor($imgInfo[1]*0.8);					// 縦幅の長さの 80% を縦幅とする
		$width  = $height;									// 横幅を上で決めた値と同じにする
		$x      = floor( ( $imgInfo[0] - $width ) / 2);		// コピーの開始座標(横軸)を決める
		$y      = floor( ( $imgInfo[1] - $height ) / 2);	// コピーの開始座標(縦軸)を決める
	}
}

// ファイルオブジェクトを作成する
$imgObj = null;
switch($imgInfo[2]){
	case IMAGETYPE_JPEG:	// Jpeg の場合
		$imgObj = imagecreatefromjpeg('画像パス');
		break;
	case IMAGETYPE_GIF:	// Gif の場合
		$imgObj = imagecreatefromgif('画像パス');
		break;
	case IMAGETYPE_PNG:	// Png の場合
		$imgObj = imagecreatefrompng('画像パス');
		break;
}

$newImg = imagecreatetruecolor(128,128); // 空の画像を作成

// 画像を切り出し、空画像に縮小(拡大)コピーする
imagecopyresampled($newImg,$imgObj,0,0,$x,$y,128,128,$width,$height);

// 保存
imagepng($newImg,'新しい画像パス');

// メモリ開放
imagedestroy($imgObj);
imagedestroy($newImg);

この例では、元の画像から一部を切り出し、縮小して保存しています。
使用している命令は

  1. 画像情報の取得
  2. 既存画像の読み込み
  3. 新規画像の作成
  4. 拡/縮コピー
  5. 画像の保存
  6. メモリ開放

の6つです。
それでは、一つ一つ解説していきます。

画像情報の取得

$imgInfo = getimagesize('画像パス');

コードで言うとここですね。
getimagesize という命令を使って情報を取得しています。
値は配列で、下記のような内容が返ってきます。

  • 0:幅
  • 1:高さ
  • 2:イメージタイプ
  • 3:<img>タグで使える幅と高さを指定した文字列
  • bits:ビット数
  • channels:チャンネル数
  • mime:MIMEタイプ

試しに下の画像の情報を取得してみましょう。
サンプル
array(7) {
[0]=>int(700)
[1]=>int(525)
[2]=>int(2)
[3]=>string(24) “width=”700″ height=”525″”
[“bits”]=>int(8)
[“channels”]=>int(3)
[“mime”]=>string(10) “image/jpeg”
}
こんな情報が取れました。
ここで重要な要素は0~2の要素です。
幅と高さはコピーする際に必要で、
イメージタイプは、画像の読み込みに必要になります。

既存画像の読み込み

switch($imgInfo[2]){
	case IMAGETYPE_JPEG:	// Jpeg の場合
		$imgObj = imagecreatefromjpeg('画像パス');
		break;
	case IMAGETYPE_GIF:	// Gif の場合
		$imgObj = imagecreatefromgif('画像パス');
		break;
	case IMAGETYPE_PNG:	// Png の場合
		$imgObj = imagecreatefrompng('画像パス');
		break;
}

ここで画像を読み込んでいます。
Switchまで使って、面倒なことをやっていますが、
これは画像の種類によって読み込みに使う命令が異なるため、
事前に調べたイメージタイプによってどの命令を使うか決めています。
今回のサンプルの場合はイメージタイプ 2 = Jpeg なので
imagecreatefromjpeg を使って読み込んでいます。

新規画像の作成

$newImg = imagecreatetruecolor(128,128); // 空の画像を作成

ここで新規に画像を作成しています。
今回は、元画像から特定の箇所を切り出し、
128px × 128px の画像を作ろうと思いますので、
ここで imagecreatetruecolor という命令を使い、
128(幅)と128(高さ)を指定して、画像を作成します。

拡/縮コピー

imagecopyresampled($newImg,$imgObj,0,0,$x,$y,128,128,$width,$height);

ここで、先ほど作った128px × 128px の画像に既存画像から
画像を縮小コピーしています。
imagecopyresampled という命令を使用しています。
引数の意味は下記みたいな感じです。

  • 第1引数 コピー先の画像
  • 第2引数 コピー元の画像
  • 第3引数 コピー先の貼り付け開始位置(横軸)
  • 第4引数 コピー先の貼り付け開始位置(縦軸)
  • 第5引数 コピー元の貼り付け開始位置(横軸)
  • 第6引数 コピー元の貼り付け開始位置(縦軸)
  • 第7引数 コピー先の貼り付ける時の幅
  • 第8引数 コピー先の貼り付ける時の高さ
  • 第9引数 コピー元のコピーする範囲(幅)
  • 第10引数 コピー先のコピーする範囲(高さ)

ここで第7・8引数のほうが、第9・10引数より大きければ拡大、
小さければ縮小処理が入り、画像が拡/縮します。

今回の例では下記コードで画像のコピー位置、大きさを決めています。

// コピーする座標、サイズを決定する
$width  = 0;
$height = 0;
$x      = 0;
$y      = 0;
if($imgInfo[0]<=$imgInfo[1]){
    // 横幅より、縦幅のほうが大きかった場合
    $width  = $imgInfo[0];  // 横幅はそのまま
    $height = $imgInfo[0];  // 縦幅は横幅と同じ値
    $y      = floor( ( $imgInfo[1] - $height ) / 2);        // コピーの開始座標(縦軸)を決める(横軸は0のまま)
}else{
    if($imgInfo[1] < 100){
        // 横幅のが縦幅より大きく、画像の縦幅が 100px 未満だった場合
        $width  = $imgInfo[1];  // 横幅は縦幅と同じ値にする
        $height = $imgInfo[1];  // 縦幅はそのまま
        $x      = floor( ( $imgInfo[0] - $width ) / 2);     // コピーの開始座標(横軸)を決める(縦軸は0のまま)
    }else{
        // 横幅のが縦幅より大きく、画像の縦幅が 100px 以上だった場合
        $height = floor($imgInfo[1]*0.8);                   // 縦幅の長さの 80% を縦幅とする
        $width  = $height;                                  // 横幅を上で決めた値と同じにする
        $x      = floor( ( $imgInfo[0] - $width ) / 2);     // コピーの開始座標(横軸)を決める
        $y      = floor( ( $imgInfo[1] - $height ) / 2);    // コピーの開始座標(縦軸)を決める
    }
}

この式に当てはめると

サンプル

この画像は横幅のが大きく、且つ縦幅が100px 以上あるので

        // 横幅のが縦幅より大きく、画像の縦幅が 100px 以上だった場合
        $height = floor($imgInfo[1]*0.8);                   // 縦幅の長さの 80% を縦幅とする
        $width  = $height;                                  // 横幅を上で決めた値と同じにする
        $x      = floor( ( $imgInfo[0] - $width ) / 2);     // コピーの開始座標(横軸)を決める
        $y      = floor( ( $imgInfo[1] - $height ) / 2);    // コピーの開始座標(縦軸)を決める

ここの処理が実行され、位置と幅が

sample2

こんな感じで決まります。
これをさっきの命令で縮小コピーすると

縮小後

はれてこんな画像が出来上がります。

画像の保存

画像は出来上がりましたが、これはまだメモリ内にしか無く、
保存されていません。このままプログラムが終わってしまうと
せっかく作った画像が無くなってしまうので、保存をします。

imagepng($newImg,'新しい画像パス');

これで保存ができます。
ここでは png 形式で保存していますが、
imagejpeg を使えば jpeg 形式で、imagegif を使えばgif 形式で保存できます。

メモリ開放

無事保存まで行いましたが、画像はまだメモリ内に残っています。
セッションが終了すれば、自動的に開放されますが、
慣例として、開放してやります。

imagedestroy($imgObj);
imagedestroy($newImg);

忘れても特に大きな問題にはならないと思いますが…
まぁ、本当に慣例です。


 

簡単に書けるプログラムでも、実際に説明すると結構大変ですね…
次回はブレンディング周りについてちょっと書いていこうかなぁ

予定は未定にして以下ry

PHP GD を使って透過PNGを作る方法

GD を使ってそのまま透過PNGを作ろうとすると、
1ピクセルごとに透過(アルファ)値を操作する必要があり非常に処理が重くなります。
そこで、事前にテンプレートとなる透過PNGを用意し、それを重ねることで実現します。

  1. 画像準備
  2. PHPコード
  3. コード解説

画像準備

画像を準備します。

透過準備画像

少し分かりにくいですが、円の周りは透過しています。
後述しますが、描画色は 7F7F7F (R127,G127,B127)で準備します。

PHPコード

後は、下記コードで動作します。

$imgPath = '画像パス';
$imgInfo = getimagesize($imgPath);

// ファイルオブジェクトを作成する
// - ファイルタイプ別に呼び出すメソッドを変える
$imgObj = null;
switch($imgInfo['mime']){
	case 'image/jpeg':
		$imgObj = imagecreatefromjpeg($imgPath);
		break;
	case 'image/gif':
		$imgObj = imagecreatefromgif($imgPath);
		break;
	case 'image/png':
		$imgObj = imagecreatefrompng($imgPath);
		break;
}
imagelayereffect($imgObj, IMG_EFFECT_OVERLAY);    // アルファブレンディングの設定をする
imagesavealpha($imgObj, true);                    // アルファ情報を保存するようフラグを立てる

$imgAlpha = imagecreatefrompng('透過画像パス');

imagecopy($imgObj,$imgAlpha,0,0,0,0,$imgW,$imgH); // 混ぜる

imagepng($imgObj,'画像保存パス');

// メモリ開放
imagedestroy($imgObj);
imagedestroy($imgAlpha);

これを実行すると

透過前金魚

透過後金魚

こうなります。

コード解説

まず、画像を読み込みます。
その際、画像の形式によって呼び出すメソッドが異なるので注意です。

switch($imgInfo['mime']){
	case 'image/jpeg':
		$imgObj = imagecreatefromjpeg($imgPath);
		break;
	case 'image/gif':
		$imgObj = imagecreatefromgif($imgPath);
		break;
	case 'image/png':
		$imgObj = imagecreatefrompng($imgPath);
		break;
}

この後に指定している2つが要注意です。
一つ一つ解説していきます。

imagelayereffect($imgObj, IMG_EFFECT_OVERLAY);    // アルファブレンディングの設定をする

これは、画像をどのように合成(重ねあわせ)するかの設定です。
今回は IMG_EFFECT_OVERLAY を使っています。
PHPの公式サイトには

オーバーレイを使用すると、背景の黒い部分は黒のまま。
一方背景の白い部分は白のままとなります。 背景のグレーな部分は、前景のピクセルの色となります。

とあります。
細かいことは置いておいて、今回は

背景のグレーな部分は、前景のピクセルの色となります。

を利用します。ここで言っているグレーと言うのは 7f7f7f の事を指しています。
そこで、全てを 7f7f7f で塗りつぶし、透過した部分を作った画像を用意したわけです。

次に

imagesavealpha($imgObj, true);                    // アルファ情報を保存するようフラグを立てる

これで画像を保存した際に、透過情報が抜け落ちないようにしてます。

ここで注意点なのですが

imagealphablending($imgObj, false);

この指定は絶対にしてはいけません。
正直、理由はよくわかってません(すいませんっ!)が、
どうも imagelayereffect の設定が変更されてしまうみたいです。

ちゃんと読んだら、公式に
imagelayereffect に IMG_EFFECT_ALPHABLEND を設定するのと同じ
と書いてありました orz

あとは、画像を重ねあわせて保存しています。


「簡単にできるだろ」
とか思っていたら、存外うまくいかない上に
資料もあまりなく、結構ハマってしまいました。
(そもそも、サーバサイドで画像加工する機会はほとんどないですからね…)
備忘録がてら記事にしてみました。

…しかし、我ながら硬い文章だ

1 2